Sistema Fluent Design per sviluppatori di app WindowsThe Fluent Design System for Windows app creators

Intestazione Fluent Design

IntroduzioneIntroduction

Il sistema Fluent Design è il nostro sistema per la creazione di interfacce utente belle, adattive ed empatiche.The Fluent Design System is our system for creating adaptive, empathetic, and beautiful user interfaces.

PrincipiPrinciples

Adattive: le esperienze Fluent risultano naturali in ogni dispositivoAdaptive: Fluent experiences feel natural on each device

Le esperienze Fluent si adattano all'ambiente.Fluent experiences adapt to the environment. Un'esperienza Fluent è perfetta su tablet, PC desktop e Xbox, oltre a offrire risultati eccellenti anche con il visore VR realtà mista.A Fluent experience feels comfortable on a tablet, a desktop PC, and an Xbox—it even works great on a Mixed Reality headset. Fluent è in grado di trarre vantaggio dall'aggiunta di componenti hardware, come un ulteriore monitor per il tuo PC.And when you add more hardware, like an additional monitor for your PC, a Fluent experience takes advantage of it.

Empatiche: le esperienze Fluent sono intuitive e intenseEmpathetic: Fluent experiences are intuitive and powerful

Le esperienze Fluent si adattano al comportamento e all'intento, comprendono e prevedono quanto necessario.Fluent experiences adjust to behavior and intent—they understand and anticipate what’s needed. Uniscono idee e persone, indipendentemente dal fatto che si trovino ai lati opposti del mondo o nella stessa stanza.They unite people and ideas, whether they’re on opposite sides of the globe or standing right next to each other.

Belle: le esperienze Fluent sono coinvolgenti e immersiveBeautiful: Fluent experiences are engaging and immersive

Incorporando elementi del mondo fisico, un'esperienza Fluent va a esplorare qualcosa di fondamentale.By incorporating elements of the physical world, a Fluent experience taps into something fundamental. Usa luci, ombreggiature, movimenti, profondità e trame per organizzare le informazioni in modo che sembrino intuitive e istintive.It uses light, shadow, motion, depth, and texture to organize information in a way that feels intuitive and instinctual.

Applicazione di Fluent Design all'app con UWPApplying Fluent Design to your app with UWP

Logo di Fluent Design

Le linee guida sulla progettazione spiegano come applicare i principi di Fluent Design alle app.Our design guidelines explain how to apply Fluent Design principles to apps. Quali tipi di app?What type of apps? Anche se molte linee guida possono essere applicate a qualsiasi piattaforma, abbiamo creato la piattaforma UWP (the Universal Windows Platform) per supportare Fluent Design.While many of our guidelines can be applied to any platform, we created UWP (the Universal Windows Platform) to support Fluent Design.

Le funzionalità di Fluent Design sono incorporate nella piattaforma UWP.Fluent Design features are built into UWP. Alcune di queste funzionalità, ad esempio i pixel effettivi e il sistema di input universale, sono automatiche.Some of these features—such as effective pixels and the universal input system—are automatic. Per gestirle, non è necessario scrivere codice aggiuntivo.You don't have to write any extra code to take advantage of them. Altre funzionalità, ad esempio Materiale acrilico, sono facoltative. Puoi aggiungerle alla tua app scrivendo il codice per includerle.Other features, like acrylic, are optional; you add them to your app by writing code to include them.

Stiamo introducendo i controlli UWP sul desktop per migliorare l'aspetto e le funzionalità delle applicazioni WPF o Windows esistenti con le funzionalità di Fluent Design.We're bringing UWP controls to the desktop so that you can enhance the look, feel, and functionality of your existing WPF or Windows applications with Fluent Design features. Per altre informazioni, vedi Ospitare i controlli della piattaforma UWP in applicazioni WPF e Windows Form.To learn more, see Host UWP controls in WPF and Windows Forms applications.

Oltre a fornire linee guida sulla progettazione, gli articoli su Fluent Design illustrano anche come scrivere il codice appropriato.In addition to design guidance, our Fluent Design articles also show you how to write the code that makes your designs happen. UWP usa XAML, un linguaggio basato su markup che semplifica la creazione di interfacce utente.UWP uses XAML, a markup-based language that makes it easier to create user interfaces. Ecco un esempio:Here's an example:

<Grid BorderBrush="Blue" BorderThickness="4">
    <TextBox Text="Design with XAML" Margin="20" Padding="16,24"/>
</Grid>

Esempio di XAML

Se hai poca familiarità con lo sviluppo UWP, consulta la pagina di introduzione a UWP.If you're new to UWP development, check out our Get started with UWP page.

Trova una soluzione naturaleFind a natural fit

Come puoi far risultare naturale un'app in un'ampia gamma di dispositivi?How do you make an app feel natural on a variety of devices? Dando l'impressione che sia stata concepita pensando a ogni specifico dispositivo.By making it feel as though it were designed with each specific device in mind. Un layout dell'interfaccia utente che si adatta a dimensioni dello schermo diverse (per evitare di lasciare spazio inutilizzato, ma senza esagerare), rende l'esperienza naturale, come se fosse stata progettata per tale dispositivo.A UI layout that adapts to different screen sizes so there's no wasted space (but no crowding either) makes an experience feel natural, as though it were designed for that device.

Immagine che mostra la progettazione per i punti di interruzione giusti.

Progettare per i punti di interruzione giustiDesign for the right breakpoints

Anziché progettare un'applicazione per ogni dimensione dello schermo, concentrarsi su poche larghezze chiave, note anche come "punti di interruzione", può semplificare notevolmente il codice e le progettazioni, pur consentendo all'app di apparire perfetta su schermi di ogni dimensione.Instead of designing for every individual screen size, focusing on a few key widths (also called "breakpoints") can greatly simplify your designs and code while still making your app look great on small to large screens.

Informazioni su dimensioni dello schermo e punti di interruzioneLearn about screen sizes and breakpoints

Breve filmato che mostra un layout reattivo.

Creare un layout reattivoCreate a responsive layout

Perché un'app sembri naturale, deve adattare il proprio layout a diversi dispositivi e dimensioni dello schermo.For an app to feel natural, it should adapt its layout to different screen sizes and devices. È possibile usare il ridimensionamento automatico, i pannelli di layout, gli stati di visualizzazione, nonché definizioni dell'interfaccia utente separate in XAML, per creare un'interfaccia utente reattiva.You can use automatic sizing, layout panels, visual states, and even separate UI definitions in XAML to create a responsive UI.

Informazioni sulla progettazione reattivaLearn about responsive design

Immagine che mostra la progettazione per un'ampia gamma di dispositivi.

Progettare per un'ampia gamma di dispositiviDesign for a spectrum of devices

Le app UWP possono essere eseguite su una vasta gamma di dispositivi Windows.UWP apps can run on a wide variety of Windows-powered devices. È utile comprendere quali dispositivi sono disponibili, a cosa servono e in che modo gli utenti interagiscono con essi.It's helpful to understand which devices are available, what they're made for, and how users interact with them.

Informazioni sui dispositivi UWPLearn about UWP devices

Immagine che mostra come effettuare l'ottimizzazione per l'output giusto.

Ottimizzare per il giusto inputOptimize for the right input

Le app UWP supportano automaticamente le interazioni comuni tramite mouse, tastiera, penna e tocco.UWP apps automatically support common mouse, keyboard, pen, and touch interactions. Non serve altro.There's nothing extra you have to do. Tuttavia, se vuoi, puoi migliorare la tua app con il supporto ottimizzato per input specifici, come la penna e Surface Dial.But, if you'd like to, you can enhance your app with optimized support for specific inputs, like pen and the Surface Dial.

Informazioni su input e interazioniLearn about inputs and interactions

Crea un'esperienza intuitivaMake it intuitive

Un'esperienza risulta intuitiva quando si verifica nel modo previsto dall'utente.An experience feels intuitive when it behaves the way the user expects it to. Usando controlli e modelli stabiliti e sfruttando il supporto della piattaforma per l'accessibilità e la globalizzazione, puoi creare un'esperienza intuitiva che consente agli utenti di essere più produttivi.By using established controls and patterns and taking advantage of platform support for accessibility and globalization, you create an effortless experience that helps users be more productive.

Dimostrare empatia significa fare la cosa giusta al momento giusto.Demonstrating empathy is about doing the right thing at the right time.

Le esperienze Fluent usano in modo coerente controlli e modelli per offrire il comportamento previsto.Fluent experiences use controls and patterns consistently, so they behave in ways the user has learned to expect. Le esperienze Fluent sono accessibili alle persone con un'ampia gamma di abilità fisiche e includono funzionalità di globalizzazione che consentono di usarle in tutto il mondo.Fluent experiences are accessible to people with a wide range of physical abilities, and incorporate globalization features so people around the world can use them.

Immagine che mostra come fornire le funzionalità di spostamento giuste.

Offrire la giusta esperienza di navigazioneProvide the right navigation

Per creare un'esperienza di navigazione semplice usando la struttura dell'app e i componenti di navigazione più adatti.Create an effortless experience by using the right app structure and navigation components.

Informazioni sulla navigazioneLearn about navigation

Immagine che mostra come essere interattivi.

Per essere interattiviBe interactive

Pulsanti, barre dei comandi, tasti di scelta rapida da tastiera e menu contestuali consentono agli utenti di interagire con l'app; sono gli strumenti che trasformano un'esperienza statica in qualcosa di dinamico.Buttons, command bars, keyboard shortcuts, and context menus enable users to interact with your app; they're the tools that change a static experience into something dynamic.

Informazioni sui comandiLearn about commanding

Immagine che mostra come usare il controllo giusto per il processo.

Usare il controllo più adatto alla situazioneUse the right control for the job

I controlli sono le colonne portanti dell'interfaccia utente. L'uso del giusto controllo consente di creare un'interfaccia utente che si comporta esattamente come desiderato dagli utenti.Controls are the building blocks of the user interface; using the right control helps you create a user interface that behaves the way users expect it to. La piattaforma UWP offre oltre 45 controlli, che vanno da semplici pulsanti a potenti controlli dei dati.UWP provides more than 45 controls, ranging from simple buttons to powerful data controls.

Informazioni sui controlli UWPLearn about UWP controls

immagine di inclusività

Per essere inclusivi Un'app ben progettata è accessibile alle persone con disabilità.Be inclusive A well-designed app is accessible to people with disabilities. L'uso di codice aggiuntivo permette di condividere l'app con persone di tutto il mondo.With some extra coding, you can share your app with people around the world.

Informazioni sul concetto di usabilitàLearn about Usability

Offri atmosfere coinvolgenti e immersiveBe engaging and immersive

Fluent Design non riguarda la creazione di effetti eclatanti.Fluent Design isn't about flashy effects. Incorpora effetti fisici che realmente migliorano l'esperienza utente, perché emulano esperienze che il nostro cervello è programmato per elaborare in modo efficiente.It incorporates physical effects that truly enhance the user experience, because they emulate experiences that our brains are programmed to process efficiently.

Usa la luceUse light

La luce attira la nostra attenzione.Light has a way of drawing our attention. Crea atmosfera e un senso di familiarità. È uno strumento pratico per dare risalto alle informazioni.It creates atmosphere and a sense of place, and it’s a practical tool to illuminate information.

Aggiungi luce alla tua app UWP:Add light to your UWP app:

Breve video che mostra l'evidenziazione Reveal.

Evidenziazione RevealReveal highlight

Evidenziazione Reveal usa la luce per far evidenziare gli elementi interattivi. La luce illumina gli elementi con cui l'utente può interagire, mostrandone i bordi nascosti.Reveal highlight uses light to make interactive elements stand out. Light illuminates the elements the user can interact with, revealing hidden borders. Reveal viene abilitato automaticamente per alcuni controlli, come la visualizzazione elenco e la visualizzazione griglia.Reveal is automatically enabled on some controls, such as list view and grid view. È possibile abilitarla in altri controlli applicando gli stili di evidenziazione Reveal predefiniti.You can enable it on other controls by applying our predefined Reveal highlight styles.

Breve video che mostra Reveal stato attivo.

Reveal stato attivoReveal focus

Reveal stato attivo usa la luce per richiamare l'attenzione sull'elemento che attualmente ha lo stato attivo per l'input.Reveal focus uses light to call attention to the element that currently has input focus.

Crea un senso di profonditàCreate a sense of depth

Viviamo in un mondo tridimensionale.We live in a three-dimensional world. Incorporando di proposito la profondità nell'interfaccia utente, possiamo trasformare un'interfaccia 2D piatta in qualcosa di più, con le informazioni e i concetti presentati efficacemente tramite una gerarchia visiva.By purposefully incorporating depth into the UI, we transform a flat, 2-D interface into something more—something that efficiently presents information and concepts by creating a visual hierarchy. Così possiamo reinventare le relazioni tra gli oggetti all'interno di un ambiente fisico a più livelli.It reinvents how things relate to each other within a layered, physical environment

Aggiungi profondità alla tua app UWP:Add depth to your UWP app:

Breve video che mostra lo scorrimento con effetto parallasse.

Effetto parallasseParallax

Parallasse crea l'illusione della profondità facendo in modo che gli elementi in primo piano sembrino muoversi più velocemente rispetto agli elementi sullo sfondo.Parallax creates the illusion of depth by making items in the foreground appear to move more quickly than items in the background.

Incorpora il movimentoIncorporate motion

Progetta il movimento come in un film.Think of motion design like a movie. Le transizioni lineari mantengono l'attenzione sulla storia e danno vita alle esperienze.Seamless transitions keep you focused on the story, and bring experiences to life. Possiamo trasferire queste sensazioni nei nostri progetti, consentendo agli utenti di passare da un'attività a un'altra con effetti cinematografici.We can invite those feelings into our designs, leading people from one task to the next with cinematic ease.

Aggiungi movimento alla tua app UWP:Add motion to your UWP app:

gif continuità

Animazioni connesseConnected animations

Le animazioni connesse aiutano l'utente a restare nel contesto creando una transizione uniforme tra le scene.Connected animations help the user maintain context by creating a seamless transition between scenes.

Sviluppala con il materiale appropriatoBuild it with the right material

Tutto quello che ci circonda nel mondo reale è sensoriale e stimolante.The things that surround us in the real world are sensory and invigorating. Le cose si piegano, si stendono, rimbalzano, si distruggono, scorrono.They bend, stretch, bounce, shatter, and glide. Queste qualità dei materiali vengono trasferite negli ambienti digitali, permettendo alle persone di interagire e di toccare i nostri progetti.Those material qualities translate to digital environments, making people want to reach out and touch our designs.

Aggiungi materiale alla tua app UWP:Add material to your UWP app:

Immagine che mostra un livello in materiale acrilico.

AcrilicoAcrylic

Materiale acrilico è un materiale semitrasparente che consente all'utente di vedere i livelli di contenuti, stabilendo una gerarchia di elementi dell'interfaccia utente.Acrylic is a translucent material that lets the user see layers of content, establishing a hierarchy of UI elements.

Esempi di codice e strumenti di progettazioneDesign toolkits and code samples

Vuoi iniziare a creare le tue app con Fluent Design?Want to get started creating your own apps with Fluent Design? I nostri toolkit per Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer e Sketch velocizzeranno i tuoi progetti, mentre i nostri esempi ti consentiranno di iniziare a scrivere codice più rapidamente.Our toolkits for Adobe XD, Adobe Illustrator, Adobe Photoshop, Framer, and Sketch will help jumpstart your designs, and our samples will help get you coding faster.

Screenshot della pagina dedicata ai toolkit e agli esempi di progettazione.

Pagina di esempi e toolkit di progettazioneDesign toolkits and samples page

Consultare la pagina dedicata a strumenti ed esempi di progettazioneCheck out our Design toolkits and samples page