Glass ha uno stile unico, perciò ti offriamo modelli di schede standard, una tavolozza dei colori, una tipografia e linee guida per la scrittura da seguire quando possibile.
Prima di progettare qualsiasi layout personalizzato, utilizza i CardBuilder Layout disponibili forniti da GDK per offrire agli utenti un'esperienza utente coerente. Se nessuno di questi layout soddisfa i tuoi requisiti, segui le linee guida riportate di seguito nella tua progettazione.
Metriche e griglie
L'interfaccia utente di Glass presenta linee guida standard per layout e margini per diversi tipi di schede della sequenza temporale. Di solito le schede includono le seguenti regioni generali, quindi abbiamo stabilito alcune linee guida da seguire per un insieme generale di schede.
Regioni delle carte
Glass definisce le dimensioni di un insieme di aree geografiche comuni per semplificare la progettazione e la visualizzazione di schede diverse.
| Contenuti principali I contenuti principali del testo della scheda sono in Roboto Light con una dimensione minima di 32 pixel ed è limitato dalla spaziatura interna. Il testo di dimensioni pari o superiori a 64 pixel utilizza Roboto Thin. Immagine al vivo Le immagini funzionano al meglio quando sono al vivo e non richiedono la spaziatura interna di 40 px richiesta dal testo. Spaziatura interna Le schede della cronologia hanno una spaziatura interna di 40 pixel su tutti i lati per i contenuti testuali. In questo modo, la maggior parte delle persone può vedere chiaramente i tuoi contenuti. |
Piè di pagina Il piè di pagina mostra informazioni supplementari, quali l'origine della scheda o un timestamp. Il testo a piè di pagina è di 24 pixel, con il carattere Roboto Normal e di colore bianco ( cambiare il colore degli oggetti serverless). Immagine o colonna a sinistra L'immagine o le colonne di sinistra richiedono modifiche alla spaziatura interna e ai contenuti di testo. |
Modelli di layout
GDK mette a disposizione vari layout di BuildBuilder che puoi utilizzare.
Colore
Glass mostra la maggior parte del testo in bianco e utilizza i seguenti colori standard per indicare l'urgenza o l'importanza. Puoi utilizzare questi colori anche per le schede della sequenza temporale:
| Classe CSS | Valore RGB |
|---|---|
white |
#ffffff |
gray |
#808080 |
blue |
#34a7ff |
red |
#cc3333 |
green |
#99cc33 |
yellow |
#ddbb11 |
L'esempio seguente utilizza i colori per indicare importanti informazioni sulle linee e sullo stato dei treni.
Tipografia
Glass mostra tutto il testo di sistema in Roboto Light, Roboto regular o Roboto Thin, a seconda delle dimensioni del carattere. Se stai creando schede in diretta o video su argomenti diversi, utilizza una tipografia diversa per trasmettere il tuo branding.
Roboto Light
Glass mostra la maggior parte del testo in questo carattere.
ABCDEFGHIJKLMN
OPQRSTUVWXYZa
bcdefghijklmnopqr
stuvwxyz1234567
890!?/+-=()[]#@$
%^&*<>:";
Roboto - Regolare
Glass mostra il testo della nota a piè di pagina in questo carattere.
ABCDEFGHIJKLMNOPQRST
UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;"
Roboto sottile
Glass mostra un testo più grande (almeno 64 px) in questo carattere.
ABCDEFGHIJKLMNOPQ RSTUVWXYZabcdefghij klmnopqrstuvwxyz1234 567890!?/+-=()[]#@$%^ &*<>:";
Ridimensionamento dinamico del testo
Se utilizzi i layout
CardBuilder.TEXT
e
CardBuilder.COLUMNS, Glass usa la dimensione di carattere più grande possibile in base alla quantità di contenuti.
Le seguenti schede mostrano esempi delle caratteristiche tipografiche del testo in base alla quantità di testo.
Scrittura
Il limite di spazio di testo disponibile è limitato, quindi segui queste linee guida quando scrivi testo per Glassware.
Privilegia la brevità. Usa titoli concisi, semplici e precisi. Cerca alternative al testo lungo, come leggere ad alta voce i contenuti, mostrare immagini o video o rimuovere funzionalità.
Privilegia la semplicità. Immagina di parlare con qualcuno che è intelligente e competente, ma che non conosce il gergo tecnico e potrebbe non parlare molto bene l'inglese. Utilizza parole brevi, verbi attivi e nomi comuni.
Sii cordiale. Usa forme stringate. Parla direttamente al lettore con la seconda persona ("tu"). Se il testo non legge il testo nella conversazione informale, probabilmente non è il modo in cui lo scrivete.
Specifica l'aspetto più importante. Le prime due parole (circa 11 caratteri, spazi inclusi) devono includere almeno una parte delle informazioni più importanti della stringa. In caso contrario, ricomincia da capo. Descrivi solo ciò che è necessario e non più. Non cercare di spiegare le sottili differenze. Verranno persi nella maggior parte degli utenti.
Evita le ripetizioni. Se un termine significativo viene ripetuto in una schermata o un blocco di testo, trova un modo di utilizzarlo una sola volta.