Ci sono delle euristiche di padding CSS che posso seguire?

Question

ho un problema semplice:

• Ho un'immagine all'interno di un div.
• Al fine di rendere la pagina più esteticamente gradevole, ho intenzione di aggiungere un po 'di imbottitura aggiuntiva all'immagine.

Invece di bulbo oculare, mi piacerebbe sapere:

Esistono euristiche padding CSS che posso seguire?

pensavo che qualcuno del calibro di Jakob Nielsen potrebbe aver stabilito alcune best practice su layout di pagina e imbottitura (cioè padding pixel minima o di proporzionalità).

• Non sto affermando che questo è un problema particolarmente difficile da risolvere.
• Ma è probabile che si verifichi di nuovo.
• E mi piacerebbe qualche euristica per guidare le mie scelte di imbottitura in futuro.

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

In realtà sono alcune formule standard per questo genere di cose.

1. La legge dei terzi. In caso di dubbio, dividerlo in tre parti. Dividi per tre finché non arrivi a qualcosa di ragionevole.
2. Il Golden Ratio - questo è un po 'più difficile, e hai davvero bisogno di un programma come Golden Section per estrarlo correttamente, ma l'idea di base è che il tuo padding dovrebbe essere un multiplo del rapporto Golden. Il Golden Ratio è ((a+b)/a) = (a/b)) o circa 1.618.
3. Il rapporto A4. Non so come si chiama questo - ma è 1.414 è il rapporto di un foglio di carta A4.
4. Quasi ogni rapporto renderà equilibrata la tua griglia se ti atterrai ad essa.

Se l'immagine è larga 100 pixel, dividi per il rapporto aureo finché non ottieni qualcosa che non è WAY to big.

Quindi i numeri del rapporto aureo per 100 pixel sono 62, 38, 24, 15, 9, 6, 4, 3, 2, 1. In ems è possibile utilizzare le larghezze frazionarie, quindi terminare con 14.5, 9, 5.6 ecc.

em unità sono una funzione della larghezza della "m" nel carattere, quindi in CSS possono cambiare in tutta la pagina.

"misura" è la larghezza della riga di testo. Vuoi che la misura sia inferiore a 2 o 2,5 alfabeti. (Si misura un alfabeto digitando l'ABCDEFG ... due volte.)

Il Colin Wheildon opuscolo/libro Comunicare o solo facendo abbastanza Forme ha alcuni ottimi consigli per la posa tipografia e immagini. È in gran parte orientato alla stampa, ma la maggior parte degli stessi principi si applicano ancora.

Answer 2

hai pensato di usare un framework CSS come:

• BluePrintCSS
• YAML
• YUI Grids CSS
• 960 CSS Grid System
• e così via (si veda questo bel article)

il mio preferito è definitivamente progetto, non troppo gonfio come YAML o YUI e ti dà un inizio perfetto per un nuovo progetto. per quanto ne so aggiunge una imbottitura 1.5em alle scatole e cose del genere. inoltre è facilmente adattabile. dai uno sguardo :)

Answer 3

È difficile dare una risposta generale perché l'aspetto generale della pagina influenza questa scelta. Quanta densità di testo? Quanto spazio bianco? Quante colonne? Quante immagini in una pagina? ecc.

Penso che dovresti sperimentare te stesso e troverai rapidamente le tue dimensioni o intervalli di imbottitura tipici da cui iniziare e lavorare per progetto.

Basta dare un'occhiata al sito web di Jakob Nielsen. Non mi interessa quale sia il suo calibro, non si vuole ottenere una guida estetica da lui. Naturalmente molti dei suoi consigli sull'usabilità sono preziosi, ma prendi tutto con un pizzico di sale.