Introduzione alla progettazione di app di WindowsIntroduction to Windows app design

app di esempio relativa all'illuminazione

Le indicazioni di progettazione di Windows sono una risorsa utile per la progettazione di app rifinite e ben compilate.The Windows app design guidance is a resource to help you design and build beautiful, polished apps.

Non si tratta di un elenco di regole prescrittive, ma di un documento in costante aggiornamento, progettato per adattarsi all'evoluzione del nostro sistema Fluent Design nonché alle esigenze della nostra community di creatori di app.It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

Questa introduzione include una panoramica delle funzionalità di progettazione universali presenti in ogni app UWP, utile per creare interfacce utente che si adattino perfettamente a un'ampia gamma di dispositivi.This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

Pixel effettivi e ridimensionamentoEffective pixels and scaling

Le app UWP vengono eseguite su tutti i dispositivi Windows 10, dal televisore al tablet o al PC.UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. In che modo si progetta un'interfaccia utente che abbia un aspetto corretto su una vasta gamma di dispositivi e dimensioni di schermo?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

stessa app su vari dispositivi

La piattaforma UWP ti aiuta adattando automaticamente gli elementi dell'interfaccia utente in modo che siano leggibili e di facile interazione in tutti i dispositivi e in qualsiasi dimensione di schermo.UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

Quando la tua app viene eseguita su un dispositivo, il sistema usa un algoritmo per normalizzare la visualizzazione sullo schermo degli elementi dell'interfaccia utente.When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. Questo algoritmo di ridimensionamento tiene conto della distanza di visualizzazione e della densità dello schermo (pixel per pollice) per ottimizzare la dimensione percepita (invece della dimensione fisica).This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). L'algoritmo di ridimensionamento garantisce che un tipo di carattere da 24 pixel su un Surface Hub a 3 metri di distanza sia altrettanto leggibile per l'utente di un tipo di carattere da 24 pixel su un telefono da 5 pollici a pochi centimetri di distanza.The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

Distanze di visualizzazione per dispositivi diversi

Per il modo in cui funziona il sistema di ridimensionamento, quando progetti la tua app UWP, stai progettando in pixel effettivi anziché in pixel fisici.Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. I pixel effettivi (epx) sono un'unità di misura virtuale usata per esprimere le dimensioni e la spaziatura del layout, indipendentemente dalla densità dello schermo.Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. Nelle nostre indicazioni, i termini epx, ep e px sono interscambiabili.(In our guidelines, epx, ep, and px are used interchangeably.)

Puoi ignorare la densità in pixel e la risoluzione effettiva dello schermo durante la progettazione.You can ignore the pixel density and the actual screen resolution when designing. Puoi invece progettare in base alla risoluzione effettiva (la risoluzione in pixel effettivi) per una classe di dimensioni (per i dettagli, vedi l'articolo Dimensioni dello schermo e punti di interruzione).Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

Suggerimento

Durante la creazione di bozze delle schermate in programmi di modifica delle immagini, imposta il valore DPI su 72 e le dimensioni dell'immagine sulla risoluzione effettiva per la classe di dimensioni di destinazione.When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. Per un elenco di classi di dimensioni e risoluzioni effettive, vedi l'articolo Dimensioni dello schermo e punti di interruzione.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Multipli di 4Multiples of four

Dimensioni, margini e posizioni degli elementi dell'interfaccia utente devono essere sempre espressi in multipli di 4 epx nelle app UWP.The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

La piattaforma UWP si ridimensiona in un'ampia gamma di dispositivi con valori di ridimensionamento predefiniti pari a 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350% e 400%.UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. L'unità di base è 4 perché è l'unico valore intero che può essere ridimensionato in base a numeri non interi, ad esempio 4 * 1,5 = 6.The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (for example, 4*1.5 = 6). L'uso di multipli di quattro allinea tutti gli elementi dell'interfaccia utente con pixel interi e garantisce che gli elementi dell'interfaccia utente abbiano contorni dritti e netti.Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. Nota che il testo non è soggetto a questo requisito e può avere qualsiasi dimensione e posizione.(Note that text doesn't have this requirement; text can have any size and position.)

griglia

LayoutLayout

Poiché le app UWP sono soggette a ridimensionamento automatico su tutti i dispositivi, la progettazione di un'app UWP per un dispositivo segue la stessa struttura.Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. Cominciamo dall'inizio vero e proprio dell'interfaccia utente dell'app UWP.Let's start from the very beginning of your UWP app's UI.

Finestre, riquadri e pagineWindows, Frames, and Pages

Quando un'app UWP viene avviata su un dispositivo Windows 10, viene usato un oggetto Window con una classe Frame, in grado di spostarsi tra istanze di Page.When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Screenshot dell'oggetto Window con un oggetto Frame.

L'interfaccia utente dell'app può essere considerata come una raccolta di pagine.You can think of your app's UI as a collection of pages. Spetta a te decidere cosa deve essere inserito in ogni pagina e quali sono le relazioni tra le pagine.It's up to you to decide what should go on each page, and the relationships between pages.

Per informazioni su come organizzare le pagine, vedi Nozioni di base sulla struttura di spostamento.To learn how you can organize your pages, see Navigation basics.

Screenshot della pagina della raccolta.

Layout di paginaPage layout

Quale deve essere l'aspetto di queste pagine?What should those pages look like? La maggior parte delle pagine segue una struttura comune al fine di garantire coerenza, in modo che gli utenti possano spostarsi facilmente tra le pagine della tua app e al loro interno.Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. Le pagine contengono in genere tre tipi di elementi dell'interfaccia utente:Pages typically contain three types of UI elements:

  • Gli elementi di spostamento consentono agli utenti di scegliere il contenuto che vogliono visualizzare.Navigation elements help users choose the content they want to display.
  • Gli elementi di comando avviano azioni, come la modifica, il salvataggio o la condivisione di contenuto.Command elements initiate actions, such as manipulating, saving, or sharing content.
  • Gli elementi di contenuto consentono di visualizzare il contenuto dell'app.Content elements display the app's content.

Un modello di layout comune

Per ulteriori informazioni su come implementare i modelli di app UWP comuni, vedi l'articolo Layout di pagina.To learn more about how to implement common UWP app patterns, see the Page layout article.

Puoi anche usare Windows Template Studio in Visual Studio per iniziare a definire un layout per la tua app.You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

ControlliControls

La piattaforma di progettazione di app UWP offre un set di controlli comuni per cui è garantito il funzionamento in tutti i dispositivi con Windows e il rispetto dei principi su cui si basa il sistema di progettazione Fluent Design.UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. Si tratta di un set completo che include sia controlli semplici, come pulsanti ed elementi di testo, sia controlli elaborati, ad esempio in grado di generare elenchi da un set di dati e un modello.These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

Controlli UWP

Per un elenco completo dei controlli UWP e dei modelli che puoi creare con essi, vedi la sezione relativa a controlli e modelli.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

StileStyle

I controlli comuni riflettono automaticamente il tema e il colore principale di sistema, funzionano con tutti i tipi di input e vengono ridimensionati su tutti i dispositivi.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. In questo modo, riflettono il sistema Fluent Design: sono adattivi, empatici e belli.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. I controlli comuni usano luce, movimento e profondità negli stili predefiniti, quindi usandoli incorpori il sistema Fluent Design nella tua app.Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

I controlli comuni sono altamente personalizzabili: puoi modificarne il colore di primo piano o l'intero aspetto.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. Per ignorare gli stili predefiniti nei controlli, applica gli stili leggeri o crea controlli personalizzati in XAML.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

Gif colore principale

ShellShell

L'app UWP interagirà con l'esperienza di Windows più ampia tramite riquadri e notifiche nella shell di Windows.Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

I riquadri vengono visualizzati nel menu Start e all'avvio dell'app e forniscono una panoramica dell'attività in esecuzione nell'app.Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. La loro efficacia deriva dal contenuto a cui consentono di accedere e all'intelligenza e alla perizia con cui vengono presentati.Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

I riquadri per le app UWP possono avere quattro dimensioni (piccola, media, larga e grande) ed essere personalizzati con l'icona e l'identità dell'app.UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. Per indicazioni sulla progettazione dei riquadri per l'app UWP, vedi Linee guida per asset riquadro e asset icona.For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

riquadri nel menu Start

InputInputs

Le app UWP usano le interazioni smart.UWP apps rely on smart interactions. Puoi progettare azioni correlate a un'interazione con clic senza dover sapere o definire se l'origine è un clic del mouse, un contatto dello stilo o il tocco di un dito.You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. Tuttavia, puoi anche progettare le app per modalità di input specifiche.However, you can also design your apps for specific input modes.

Screenshot di icone che rappresentano modalità di input diverse.

DispositiviDevices

dispositivi

In modo analogo, mentre UWP esegue in automatico il ridimensionamento dell'app in base a dispositivi diversi, puoi anche ottimizzare la tua app UWP per dispositivi specifici.Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

UsabilitàUsability

Breve video animato con figure stilizzate che rappresentano persone con abilità differenziate.

Non meno importante è, infine, l'usabilità, che significa rendere l'esperienza dell'app alla portata di tutti gli utenti.Last but not least, usability is about making your app's experience open to all users. Tutti possono trarre vantaggio da un'esperienza utente realmente inclusiva. Per informazioni su come rendere la tua app facile da usare per tutti gli utenti, vedi Usabilità per le app UWP.Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

Se progetti app per un pubblico internazionale, puoi consultare l'argomento Globalizzazione e localizzazione.If you're designing for international audiences, you might want to check out Globalization and localization.

Puoi inoltre prendere in considerazione le funzionalità di accessibilità per gli utenti con problemi di vista, udito e mobilità.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. Integrando sin dall'inizio l'accessibilità nella progettazione, potrai rendere l'app accessibile in modo semplice e rapido.If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

Strumenti e toolkit di progettazioneTools and design toolkits

Ora che conosci le funzionalità di progettazione di base, puoi iniziare a progettare la tua app UWP.Now that you know about the basic design features, how about getting started with designing your UWP app?

Per aiutarti in questa attività ti mettiamo a disposizione numerosi strumenti:We provide a variety of tools to help your design process:

  • Vedi la nostra pagina relativa ai toolkit di progettazione per i download di toolkit per XD, Illustrator, Photoshop, Framer e Sketch, strumenti di progettazione e tipi di carattere aggiuntivi.See our Design toolkits page for XD, Illustrator, Photoshop, Framer, and Sketch toolkits, as well as additional design tools and font downloads.

  • Per configurare il computer per la scrittura di codice per le app UWP, vedi il nostro articolo Introduzione > Per iniziare.To get your machine set up to write code for UWP apps, see our Get started > Get set up article.

  • Per spunti su come implementare l'interfaccia utente per la piattaforma UWP, dai un'occhiata alle nostre app UWP di esempio end-to-end.For inspiration on how to implement UI for UWP, take a look at our end-to-end sample UWP apps.

Riepilogo videoVideo summary

Argomento successivo: Sistema di progettazione Fluent DesignNext: Fluent Design System

Se desideri conoscere i principi di base di Fluent Design (il sistema di progettazione di Microsoft) e scoprire altre funzionalità da incorporare nelle app UWP, continua leggendo l'articolo sul sistema Fluent Design.If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.