Nozioni di base sulla progettazione del contenuto per le app di Windows

  • Articolo

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 grondaie

L'uso di spaziatura e gutter di dimensioni coerenti raggruppa semanticamente un'esperienza in componenti separati. Questi valori eseguono il mapping alla logica degli angoli arrotondati e consentono di creare un layout coesivo e utilizzabile.

Two buttons separated by 8 pixels.

8epx tra pulsanti

A button and a flyout separated by 8 pixels.

8epx tra pulsanti e riquadri a comparsa

A control and a header separated by 8 pixels.

8epx tra controllo e intestazione

A Control and a label separated by 12 pixels

12epx tra il controllo e l'etichetta

Two content areas separated by 12 pixels.

12epx tra aree di contenuto

A surface containing text with 12 pixel gutters on both sides.

16epx tra testo di superficie e bordo

Testo e gerarchia

La nostra rampa di tipo (collegamento) è progettata per fornire una matrice di dimensioni che consentono di comunicare la gerarchia all'interno di un'app.

An example of text using title, subtitle, and body styles when there is adequate space.

Uso di Titolo, Sottotitolo e Corpo con spaziatura 12epx.

An example of using Body Strong instead of Title in a confined space.

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.

An example of using the Caption style in a confined space.

Usare didascalia dimensioni 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 elenco e griglia. Di seguito sono riportate diverse composizioni usate in Windows.

An example list with multi-element list items.

Per gli elenchi a più righe, usare Corpo e Didascalia dalla rampa di tipo e icone 32epx.

Usare Body Strong per le intestazioni di sezione.

An example of horizontal lists.

Quando si usano icone o elementi immagine di persona per gli elementi della griglia, usare Testo didascalia allineato al centro.

An example list containing large list items.

Usa stile corpo per il testo primario e allinea a sinistra all'immagine se l'elenco contiene elementi grafici di grandi dimensioni con testo.

Utilizzo di controlli

Alcuni esempi di come i controlli possono essere correlati tra loro nelle configurazioni comuni.

An example of an expander with child controls.

Esempi che illustrano come usare un controllo expander (collegamento) con stili elenco e controlli comuni. I controlli devono essere allineati a destra con 16epx tra il controllo e il pulsante di espansione.

An example how controls inside an expander are aligned.

In questo esempio viene illustrato l'allineamento dei controlli quando viene posizionato all'interno dell'espansore. Rientro dei controlli 48epx.