Modelli GUI di progettazione materiale 8pt

Una panoramica del design visivo e delle metriche di base di Design Inc.

Otto ... 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. Questi sono i numeri che mi passano per la testa di notte. Ho usato un 8pt basato dal mio tempo su Android Auto e mi sono divertito ad applicare le metodologie di base di Material Design alle interfacce utente di Design Inc. La scorsa settimana, durante il nostro show settimanale di UNDO, una designer, Danaan Clarke, ha chiesto informazioni sulla griglia 8pt e se avessimo avuto esperienza con essa. Ho sempre “secchiato” la struttura che supporta il design e ho pensato che sarebbe stato divertente condividere alcuni “dietro le quinte”.

1. Griglia di base

Il primo e più importante passo è quello di garantire la struttura principale della griglia dei documenti. Puoi definire i valori della griglia navigando Visualizza> Area di disegno> Impostazioni griglia ...

Il team di progettazione di Google Material ha fatto un ottimo lavoro nel definire il modo in cui questa baseline influenza i valori di altri elementi di tipo dell'interfaccia utente principale. Tutto, dalle barre di navigazione, alla tipografia, alle linee chiave, alla spaziatura e al dimensionamento minimo del target di hit per le azioni, è strutturato attorno a questa base di base. Vorrei aggiungere altro qui, ma seguo abbastanza da vicino questa guida. Se non è rotto, non aggiustarlo.

Fonte: Google Material Design: https://material.io/guidelines

2. Modelli di layout

Il prossimo passo è definire un sistema di colonne per i layout attraverso varie schermate. Cerco di rimanere conservatore sulle dimensioni della mia tela, ma cerco sempre di utilizzare una griglia a 4, 8 o 16 colonne con una grondaia di 8pt (o qualsiasi moltiplicatore di quello). Per i ritmi verticali, ho una griglia a 48pt ripetuta semplice. Puoi definire i valori del layout navigando su Visualizza> Tela> Impostazioni layout ...

Di seguito è riportato un semplice esempio di come utilizzo la griglia della mia colonna (8 colonne, 16 grondaie), le metriche della linea di base (8pt) e il ritmo verticale (48pt) su una nuova interfaccia utente di testimonianze che abbiamo inviato questa settimana.

3. Icone

Le icone sono fondamentali per far funzionare correttamente una griglia della linea di base attraverso un'interfaccia utente. C'è molta matematica complicata per ottenere questo perfetto, ma se fatto correttamente l'integrità della tua icona manterrà lo spettro delle densità dello schermo (Retina, 1x, 2x, MDPI – XXXHDPI ... se questo non ha senso, leggi questo) . La chiave per eseguire le icone in questo modo è garantire che tutte le forme, i tratti e i margini siano “pari” (2, 4, 6, 8), in modo da rimanere con un'icona centrata nell'area 24 x 24pt che può anche essere moltiplicato (x2, x3, x4) e ridimensionare uniformemente.

https://material.io/guidelines/style/icons.html#icons-system-icons

Ci sono anche moltissimi set di icone gratuiti che sono già stati progettati per adattarsi a una linea di base di 8pt. Material Design ha ancora una volta delle risorse straordinarie per questo, ma puoi progettare il tuo. Di seguito è riportato un esempio di come indicizzo tutte le nostre icone nel nostro modello di GUI principale.

4. Struttura della GUI

Non ci sono davvero regole prescrittive su come creare al meglio queste guide, ma questi documenti sono una fonte di verità che mi dà (e spero le mie controparti ingegneristiche) tranquillità. L'obiettivo è avere una versione "perfetta per i pixel" di ogni componente principale in un unico documento, in modo che non sia necessario disegnare per la produzione ogni schermata e stato dell'applicazione. Ci sono un sacco di grandi esempi e risorse online di riferimento, ma se vuoi iniziare da zero puoi scaricare il mio file di base con le griglie e la struttura delle colonne definite.

SCARICA IL FILE SORGENTE

Grazie!

Questo post è stato breve, ma volevo condividere un po 'del mio processo. Se lo hai trovato utile, ti preghiamo di condividerlo con un amico che ne trarrebbe beneficio. Inoltre, se ti è piaciuto il video, inserisco anche un vlog settimanale ... mi piacerebbe che ti iscrivessi.

Se hai bisogno di aiuto per il tuo prossimo progetto, aggiungi la tua richiesta a Design Inc. Se sei un designer e vuoi candidarti, ci piacerebbe vedere il tuo lavoro.