Nota
L'accesso a questa pagina richiede l'autorizzazione. Puoi provare ad accedere o a cambiare directory.
L'accesso a questa pagina richiede l'autorizzazione. Puoi provare a cambiare directory.
Questo articolo fornisce alcuni suggerimenti pratici ed esempi che consentono di progettare il contenuto dell'app: la spaziatura di Windows, l'uso della rampa di tipi per illustrare gerarchia, elenchi e griglie e come raggruppare i controlli.
Spaziatura e interstizi
L'uso di spaziatura e gutter di dimensioni coerenti raggruppa semanticamente un'esperienza in componenti separati. Questi valori si mappano alla logica degli angoli arrotondati e insieme aiutano a creare un layout coesivo e usabile.
8epx tra pulsanti
8epx tra pulsanti e menu a tendina
8epx tra controllo e intestazione
12epx tra il controllo e l'etichetta
12epx tra aree di contenuto
Superficie contenente testo con margini di 12 pixel su entrambi i lati.
16epx tra testo di superficie e bordo
Testo e gerarchia
La nostra scala tipografica (collegamento) è progettata per fornire una serie di dimensioni che aiutano a comunicare la gerarchia all'interno di un'app.
Uso di Titolo, Sottotitolo e Corpo con spaziatura 12epx.
Quando si differenzia un titolo in uno spazio limitato dell'interfaccia utente, usare Body Strong per il titolo senza spaziatura aggiuntiva tra blocchi di testo.
Usare le dimensioni della didascalia per spazi molto limitati in cui è necessario il testo, ad esempio i pulsanti di comando.
Elenchi e griglie
È possibile creare un'ampia gamma di stili di elenco e griglia. Di seguito sono riportate diverse composizioni usate in Windows.
Per gli elenchi a più righe, usare Testo principale e Didascalia dalla scala tipografica e icone da 32px.
Usare "Body Strong" per le intestazioni delle sezioni.
Quando si usano icone o immagini di persone per gli elementi della griglia, usare testo didascalia allineato al centro.
Usa lo stile corpo per il testo primario e allinea a sinistra il testo primario rispetto all'immagine se l'elenco contiene elementi grafici di grandi dimensioni con testo.
Uso dei controlli
Alcuni esempi di come i controlli possono essere correlati tra loro nelle configurazioni comuni.
Esempi che illustrano come usare un controllo espansore (link) con stili di elenco e controlli comuni. I controlli devono essere allineati a destra con 16epx tra il controllo e il pulsante di espansione.
In questo esempio viene illustrato l'allineamento dei controlli quando viene posizionato all'interno dell'espansore. Rientra i controlli di 48 ep.
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile su GitHub, dove è anche possibile creare ed esaminare problemi e richieste pull. Per ulteriori informazioni, consulta la nostra guida per i collaboratori.
