risposta-alla-domanda-sullo-sviluppo-web-bd.com

Quali sono le regole empiriche per i margini nel web design?

Il mio web designer mi dice che in una pagina web, i margini vuoti o il riempimento devono essere sempre multipli di uno standard. Ad esempio 6 px, 12px, 18px. Ciò dovrebbe produrre layout ben bilanciati. Vorrei saperne di più:

Non si dovrebbe davvero violare questo?

Lo standard dovrebbe essere lo stesso in orizzontale e in verticale?

23
Tintels
  • La migliore risorsa di apprendimento per questo sarebbe una buona introduzione alla tipografia - probabilmente il classico fondamentale di Bringhurst (vedi http://webtypography.net per una buona carrellata applicata al web), sebbene e. g. "Stop Stealing Sheep ..." di Spiekermann non è male neanche per i principianti e per le griglie di progettazione (vedi la mia risposta qui su UXexchange ).

  • Quando si progettano le griglie si utilizza principalmente un modulo di base (proporzioni idealmente definite lavorando dal contenuto verso l'esterno ) a cui viene adattato tutto il contenuto (ovvero multipli di esso ).

  • I margini verticali e orizzontali tra i blocchi sono nella maggior parte dei casi diversi. Gli spazi bianchi verticali sono spesso orientati sulla griglia di base (vedi ad esempio Bringhurst, di nuovo). Si consiglia vivamente di utilizzarne uno per ottenere un ritmo verticale unificante.

  • La quantità minima di spazio bianco orizzontale, i. e. principalmente la separazione tra le colonne del corpo del testo (Gutter), è regolata da psicologia della Gestalt con le dimensioni del carattere, la spaziatura e la larghezza della linea come principali fattori di influenza. Dovresti posizionare i blocchi di testo abbastanza lontano da un altro in modo tale che i tuoi destinatari possano vederli come unità distinte. Una regola empirica tradizionale renderebbe la grondaia larga almeno 1,5 em per apparire significativamente più ampia di qualsiasi spazio bianco possibile all'interno di una riga di testo. Sullo schermo, tuttavia, una buona spaziatura delle linee tende ad essere leggermente più ampia rispetto alla stampa tradizionale. Quindi probabilmente avrai bisogno di qualcosa in più. Utilizzare lo stesso valore della griglia di base è una buona idea per iniziare nella maggior parte dei casi.

  • A proposito: gli standard di progettazione - se non supportati in modo significativo dall'ergonomia o dalla psicologia cognitiva - non sono mai mai standard nel senso più rigido della Parola. Puoi violare qualsiasi "norma" purché tu sappia perché lo stai facendo.

14
Sascha Brossmann

Sì e no. Ciò a cui il tuo designer potrebbe riferirsi è la vicinanza attraverso il raggruppamento. Gli spazi bianchi (nel tuo caso i margini) separano diversi gruppi di elementi l'uno dall'altro.

Ulteriori informazioni sull'argomento: Raggruppamento di elementi per la progettazione di pagine Web chiare

6
Benny Skogberg

È meglio usare valori relativi - "em" s o percent, perché il margine sembra buono solo in un rapporto larghezza/altezza specifico.

Le dimensioni relative sono utili anche nei layout fissi, perché quando ne hai bisogno per restringere/allargare un po ', devi cambiarlo solo in un posto.

Quindi la risposta è: Non usare i pixel, usa "em" s sia per i margini che per le dimensioni delle caselle, e l'IMHO dovrebbe essere compreso tra 0,5 em e 2em - a seconda dell'esperienza visiva.

E il rapporto tra margine verticale e orizzontale dipende dal ritmo generale "verticale e orizzontale" (google).

3
Kamil Tomšík

Il layout di questo sito è un buon esempio di come una combinazione di aderenza a più schemi produce proporzioni equilibrate e una struttura complessiva coerente. Il logo, ad esempio, è distanziato di circa 14 px nella parte superiore e inferiore all'interno del segmento dell'intestazione sebbene sia rientrato di 18 pixel dal bordo dell'intestazione della domanda, rendendo la spaziatura superiore e inferiore circa il 30% più piccola del lato sinistro - altri elementi all'interno del l'intestazione è spaziata in modo simile. D'altra parte, la spaziatura del testo all'interno dell'intestazione della domanda è di circa 9px in basso, 13px in alto e 24px sul lato sinistro. Ciò imposta la spaziatura superiore in modo che sia più piccola di circa il 50% rispetto al lato sinistro e la discrepanza nella parte inferiore è relativa all'allineamento del testo alla parte inferiore dell'intestazione principale, oltre che al testo dell'intestazione (separato dal contenuto principale con un divisore, sebbene più vicino a quel contenuto a cui si riferisce più da vicino rispetto a qualsiasi altra cosa che lo circonda).

Le proporzioni variano e sono un'arte in sé. C'è una matematica in tutto, ma riunire una struttura complessa è, in pratica, un processo generalmente intuitivo.

Sono sicuro che ci sono più libri e risorse online che toccano questo, e sono probabilmente tutti utili a modo loro, ma il mio miglior consiglio è di essere un avido osservatore di proporzioni nelle cose intorno a te - in se stessi e relative a i loro ambienti e altre cose in quell'ambiente, specialmente in natura. Con il tempo perfezionerai la tua intuizione e inizierai a imitare in modo più naturale quelle proporzioni e ad applicarle nelle loro impostazioni appropriate.

2
Coswyn

Prendi in considerazione l'utilizzo di un layout di griglia in cui anche i tuoi margini sono dati da quella griglia. Tendo a usare 960 Grid System ma ce ne sono molti altri che altri giurano.

Per me il vantaggio di questo è in gran parte quello di scegliere qualcosa una volta che funziona e quindi non dover passare il tempo a pensarci ogni volta che qualcosa deve essere presentato.

2
JohnGB

Può essere utile avere una spaziatura standard all'interno delle sezioni del contenuto. IE paragrafi, intestazioni ed elenchi dovrebbero avere tutti la stessa spaziatura sotto di loro in quanto crea ritmo. La regola empirica è comunque quella di mantenere l'equilibrio e la coerenza.

2
MSaforrian

Dovresti avere coerenza sì, ma se la pagina non è focalizzata sull'utente, a che servono comunque margini multipli multipli/riempimento. Cerco personalmente di utilizzare multipli di 5 in quanto è più veloce da equiparare.

1
culvi