Modern UI
![Da aggiornare](http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Orologio_arancio.svg/45px-Orologio_arancio.svg.png)
![Voce da controllare](http://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Emblem-important.svg/40px-Emblem-important.svg.png)
![](http://upload.wikimedia.org/wikipedia/it/thumb/b/bd/Wp7_musicvideo.jpg/220px-Wp7_musicvideo.jpg)
Il linguaggio di design Microsoft, noto anche come Modern UI e precedentemente identificato con il nome in codice interno Metro[1][2][3], è un linguaggio di design di tipo tipografico, creato da Microsoft originariamente per Windows Phone[2]. È lo stile dell'interfaccia utente di Windows Phone 7, Windows Phone 8, Windows Phone 8.1, Windows 8, Windows 8.1, Windows RT e, in parte, di Windows 10.
Principi
![](http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Microsoft-METRO-UserInterface-Logo_Mid2011.svg/220px-Microsoft-METRO-UserInterface-Logo_Mid2011.svg.png)
Il linguaggio di design Microsoft si fonda su una serie di principi[4] che si basano sullo Stile tipografico internazionale.[5] Secondo Microsoft, il linguaggio di design Microsoft è progettato per essere «elegante, veloce, moderno», e intende rinnovare le tradizionali interfacce di Windows, Android e iOS basate sulle icone.
Il linguaggio di design Microsoft è stato progettato specificatamente per riunire gruppi di operazioni comuni velocizzandone l'utilizzo. Ciò si ottiene escludendo gli elementi grafici superflui e concentrandosi invece sui contenuti effettivi, che fungono a loro volta da interfaccia utente principale. Le interfacce risultanti privilegiano grandi hub anziché piccoli pulsanti, e forniscono spesso ampie aree a scorrimento laterale.
Le animazioni giocano un ruolo importante: le transizioni e le interazioni dell'utente, come pressioni o scorrimenti, tendono ad assumere qualche forma di animazione o movimento naturale. Questo ha lo scopo di dare all'utente l'impressione che l'interfaccia utente sia «viva» e reattiva, con «un aggiunto senso di profondità».
Tipografia
Il linguaggio di design Microsoft si concentra sull'uso di una tipografia facilmente leggibile. Il testo ha solitamente caratteri di grandi dimensioni che attirano l'attenzione, e gli ampi titoli sono capaci di sfruttare lo scorrimento laterale delle pagine.
Le interfacce del linguaggio di design Microsoft impiegano tipi di carattere della famiglia Segoe, disegnata da Steve Matteson presso Agfa Monotype e concessa in licenza a Microsoft.[6] Microsoft ha creato delle versioni personalizzate, per esempio il Segoe UI per Zune[7] e la famiglia Segoe WP per Windows Phone, che presentano delle lievi differenze.
Storia
Precursori
Encarta 95 e il linguaggio di design Microsoft sono accomunati dal fatto di avere entrambi un aspetto orientato verso il print design.[5]
Già in Whistler c'era un tema, acquerello (o Watercolor), che aveva molti aspetti in comune con l'attuale design Microsoft, da cui prende forse anche spunto.
Windows XP Media Center Edition,[8] pubblicato il 16 luglio 2002,[9] e in seguito Portable Media Center,[10] la sua versione portatile pubblicata nella seconda metà del 2004,[11] presentarono un'interfaccia progettata per l'uso multimediale in cui si privilegiava il testo come forma di navigazione primaria.[12]
Alla fine del 2007, la seconda generazione di Zune introdusse alcune innovazioni:[13] l'interfaccia venne riprogettata in larga parte con una maggiore attenzione alla pulizia tipografica a discapito degli elementi di contorno dell'interfaccia grafica.[14]
Definizione del linguaggio di design
![](http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Seattle_Metro_4.jpg/220px-Seattle_Metro_4.jpg)
Il team che all'inizio del 2009 disegnò il nuovo stile Microsoft, denominato in codice "Metro", trasse ispirazione dalla segnaletica di aeroporti e sistemi di trasporto pubblico.[15]
I riquadri animati piatti e colorati fecero la loro prima apparizione in Windows Phone alla fine del 2010.[16]
Ai primi di giugno 2011, parallelamente in California alla D9 Conference[17][18] e a Taipei al Computex Taipei 2011,[19] Microsoft svelò che Windows 8 avrebbe avuto una nuova interfaccia utente nel nuovo stile.
Hanno implementato un'interfaccia nel linguaggio di design Microsoft anche altri prodotti e servizi come Xbox 360[20] e Windows Live, in particolare Outlook.com[21] e SkyDrive.com[22] (poi rinominato OneDrive).
Cambio di nome
A causa di potenziali problemi di marchio, probabilmente con la società tedesca Metro AG, all'inizio di agosto 2012 l'azienda statunitense sconsigliò agli sviluppatori di utilizzare ancora il termine "Metro",[23] poiché secondo un portavoce Microsoft era usato solamente come nome in codice per la nuova piattaforma delle applicazioni.[24]
Inizialmente ai dipendenti Microsoft fu consigliato di fare riferimento all'interfaccia con il nome "UI in stile Windows 8",[25] e in seguito alcuni notarono che Microsoft aveva iniziato a sostituire nei suoi documenti pubblici alcune occorrenze di "Metro-style" con "Modern UI-style".[26][27] Tuttavia Visual Studio 2012, compilato in versione RTM all'inizio di agosto 2012[28] e reso pubblico il 15 agosto 2012, apparve fare riferimento alle ex-"app in stile Metro" con il nuovo nome "app di Windows Store".[29] Il nuovo nome fu confermato il 12 settembre 2012 da Soma Somasegar, un dirigente Microsoft, in occasione dell'evento per il lancio di Visual Studio 2012.[30]
Nel mese di ottobre Microsoft ha confermato che il nome ufficiale sarebbe stato linguaggio di design Microsoft[31][32].
Reazioni
Le reazioni al linguaggio di design Microsoft sono state generalmente positive.[senza fonte]
In una recensione di Zune HD, Joshua Topolsky di Engadget dichiarò:
«Microsoft continues its push towards big, big typography here, providing a sophisticated, neatly designed layout that's almost as functional as it is attractive.»
«Microsoft continua la sua spinta verso una grandissima tipografia qui, fornendo un layout sofisticato e progettato in modo pulito che è funzionale quasi quanto è attraente.»
(Joshua Topolsky, 17 settembre 2009[33])
Donald Bell di CNET News fece i complimenti al linguaggio di design Microsoft:
«[…] it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod touch.»
«[…] è un po' più audace e informale rispetto agli stretti e sterili menu di tipo Rolodex e griglie di icone di iPhone e iPod touch.»
(Donald Bell, 18 settembre 2009[34])
La Industrial Designers Society of America (IDSA) assegnò a Windows Phone il primo premio per "People's Choice Design" e il premio per "Best in Show".[35] Isabel Ancona, in qualità di User Experience Consultant alla IDSA, spiegò il motivo per cui Windows Phone vinse questo premio e spiegò l'esperienza dell'utente nelle interfacce nel linguaggio di design Microsoft:
«The innovation here is the fluidity of experience and focus on the data, without using tradition user interface conventions of windows and frames. Data becomes the visual elements and controls. Simple gestures and transitions guide the user deeper into content. A truly elegant and unique experience.»
«L'innovazione qui è la fluidità dell'esperienza e la focalizzazione sui dati, senza utilizzare le tradizionali convenzioni di finestre e riquadri nell'interfaccia utente. I dati diventano i controlli e gli elementi visivi. Semplici gesti e transizioni guidano l'utente più a fondo nei contenuti. Un'esperienza davvero unica ed elegante.»
(Isabel Ancona, 8 giugno 2011[36])
Note
- ^ Is 'Metro' now a banned word at Microsoft? | ZDNet, su ZDNet. URL consultato il 14 settembre 2015.
- ^ a b Microsoft now using 'Modern UI Style' to refer to Windows 8 'Metro Style' apps, su The Verge. URL consultato il 14 settembre 2015.
- ^ Microsoft Doesn’t Need a Name for Its User Interface, su wired.com. URL consultato il 14 settembre 2015.
- ^ (EN) Modern UI Design Language of Windows Phone 7, su microsoft.com, Microsoft Design .toolbox (archiviato dall'url originale il 12 marzo 2012).
- ^ a b (EN) Mike Kruzeniski, How Print Design is the Future of Interaction, su kruzeniski.com, 11 aprile 2011. URL consultato l'11 marzo 2012 (archiviato dall'url originale l'11 marzo 2012).
- ^ (EN) Microsoft Fonts - Microsoft Corporate Fonts, su ascendercorp.com, Ascender Corporation. URL consultato il 12 marzo 2012 (archiviato dall'url originale il 17 luglio 2010).
- ^ (EN) Long Zheng, “Zegoe”, the new Zune font., su istartedsomething.com, istartedsomething, 14 novembre 2007. URL consultato il 15 ottobre 2012 (archiviato il 15 ottobre 2012).
- ^ (EN) Paul Thurrott, Windows XP Media Center Edition reviewed, su winsupersite.com, SuperSite for Windows, 9 ottobre 2002. URL consultato il 5 agosto 2012 (archiviato dall'url originale il 5 agosto 2012).
- ^ (EN) Microsoft Unveils Windows XP Media Center Edition, Previously Code-Named "Freestyle", su microsoft.com, Microsoft News Center, 16 luglio 2002. URL consultato il 5 agosto 2012.
- ^ (EN) Paul Thurrott, Portable Media Center Review, su winsupersite.com, SuperSite for Windows, 2 settembre 2004. URL consultato il 5 agosto 2012 (archiviato dall'url originale il 5 agosto 2012).
- ^ (EN) Leading Digital Entertainment Companies Announce Support for Portable Media Centers at CES 2004, su microsoft.com, Microsoft News Center, 7 gennaio 2004. URL consultato il 5 agosto 2012 (archiviato il 5 agosto 2012).
- ^ (EN) Jason Lefevers, A Walkthrough the History of the Metro UI, su windowsphonemetro.com, Windows Phone Metro, 11 luglio 2011. URL consultato il 10 aprile 2013 (archiviato dall'url originale il 10 aprile 2013).
- ^
Confronto tra la prima e la seconda generazione di Zune. URL consultato il 3 marzo 2014 (archiviato dall'url originale il 5 agosto 2012). L'immagine è stata tratta da: (EN) Thomas Ricker, Zune 2.0 update is ready for your first generation Zune, su engadget.com, Engadget, 13 novembre 2007. URL consultato il 3 marzo 2014 (archiviato il 17 marzo 2008).
- ^ (EN) Paul Thurrott, Zune 2 Review, Part 3: Zune 4/8, su winsupersite.com, SuperSite for Windows, 17 novembre 2007. URL consultato il 6 agosto 2012 (archiviato dall'url originale il 5 agosto 2012).
- ^ (EN) Nick Wingfield, The Critics Rave ... for Microsoft?, su nytimes.com, NYTimes.com, 7 gennaio 2012. URL consultato il 5 agosto 2012 (archiviato il 5 agosto 2012).
- ^ (EN) Scenes from Windows Phone 7 Launch in Europe Australia, and New Zealand, su microsoft.com, Microsoft News Center, 21 ottobre 2010. URL consultato il 6 agosto 2012.
- ^ (EN) Julie Larson-Green, Previewing 'Windows 8', su microsoft.com, Microsoft News Center, 1º giugno 2011. URL consultato il 16 febbraio 2012 (archiviato dall'url originale il 7 marzo 2012).
- ^ (EN) Erica Ogg, Sinofsky shows off Windows 8 at D9, su news.cnet.com, CNET News, 1º giugno 2011. URL consultato il 13 febbraio 2012 (archiviato il 13 febbraio 2012).
- ^ (EN) Microsoft Previews ‘Windows 8’, su microsoft.com, Microsoft News Center, 2 giugno 2011. URL consultato il 16 febbraio 2012.
- ^ (EN) Jay Greene, New Xbox update aims to put Microsoft at the heart of TV viewing, su news.cnet.com, CNET News, 4 dicembre 2011. URL consultato il 6 agosto 2012 (archiviato il 5 agosto 2012).
- ^ (EN) Chris Jones, Introducing Outlook.com - Modern Email for the Next Billion Mailboxes, su blogs.office.com, Outlook Blog, 31 luglio 2012. URL consultato il 18 agosto 2012 (archiviato il 18 agosto 2012).
- ^ (EN) Omar Shahine, Mike Torres, A new modern SkyDrive.com, updated apps, and Outlook.com at 10 million users, su windowsteamblog.com, Inside SkyDrive, 14 agosto 2012. URL consultato il 18 agosto 2012 (archiviato il 18 agosto 2012).
- ^ (EN) Tom Warren, Microsoft advises developers to stop using 'Metro' name in apps following possible trademark dispute, su theverge.com, The Verge, 2 agosto 2012. URL consultato il 3 agosto 2012.
- ^ (EN) Mary Jo Foley, Is 'Metro' now a banned word at Microsoft?, su zdnet.com, ZDNet, 2 agosto 2012. URL consultato il 3 agosto 2012 (archiviato il 3 agosto 2012).
- ^ (EN) Tom Warren, Exclusive: Microsoft's Metro branding to be replaced 'this week' according to internal memo, su theverge.com, The Verge, 2 agosto 2012. URL consultato il 3 agosto 2012 (archiviato il 3 agosto 2012).
- ^ (EN) Tom Warren, Microsoft now using 'Modern UI UI Style' to refer to Windows 8 'Metro Style' apps, su theverge.com, The Verge, 10 agosto 2012. URL consultato il 12 agosto 2012 (archiviato il 12 agosto 2012).
- ^ (EN) Shunal Doke, Microsoft renames Windows 8 UI to Modern UI, su tech2.in.com, 14 agosto 2012. URL consultato il 14 agosto 2012 (archiviato dall'url originale il 14 agosto 2012).
- ^ (EN) Charles, Visual Studio 2012 RTM!!, su c-sharpcorner.com, Channel 9, 3 agosto 2012. URL consultato il 13 settembre 2012 (archiviato dall'url originale il 13 settembre 2012).
- ^ (EN) Mahesh Chand, Metro Style app renamed as Windows Store App, su c-sharpcorner.com, C# Corner, 17 agosto 2012. URL consultato il 13 settembre 2012 (archiviato dall'url originale il 13 settembre 2012).
- ^ (EN) Mary Jo Foley, Microsoft finally comes clean(er) on post-Metro naming plans, su zdnet.com, ZDNet, 12 settembre 2012. URL consultato il 13 settembre 2012 (archiviato il 13 settembre 2012).
- ^ (EN) Microsoft Design Style - The real new name, su infragistics.com, Infragistics.com Blog, 16 ottobre 2012. URL consultato il 29 ottobre 2012 (archiviato dall'url originale il 29 ottobre 2012).
- ^ (EN) Mary Jo Foley, Microsoft Design Language: The newest official way to refer to 'Metro', su zdnet.com, ZDNet, 29 ottobre 2012. URL consultato il 29 ottobre 2012 (archiviato il 29 ottobre 2012).
- ^ (EN) Joshua Topolsky, Zune HD review, su engadget.com, Engadget, 17 settembre 2009. URL consultato il 12 marzo 2012 (archiviato il 2 ottobre 2009).
- ^ (EN) Zune HD 64GB Review, su reviews.cnet.com, CNET News, 18 settembre 2009. URL consultato il 12 marzo 2012 (archiviato il 26 maggio 2010).
- ^ (EN) Tom Warren, Windows Phone wins IDEA 2011 – people’s choice design award, su winrumors.com, WinRumors, 18 settembre 2011. URL consultato il 12 marzo 2012 (archiviato dall'url originale il 12 marzo 2012).
- ^ (EN) rachelw, Windows Phone 7, su idsa.org, IDSA, 8 giugno 2011. URL consultato il 12 marzo 2012 (archiviato il 5 agosto 2011).
Voci correlate
Altri progetti
Altri progetti
- Wikimedia Commons
Wikimedia Commons contiene immagini o altri file su Metro
Collegamenti esterni
- (EN) Introducing Windows Phone Design System, codename: Metro (PDF)
- (EN) Windows Phone UI and Design Language, presentazione di Metro al MIX 2010
![](http://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Win-like-userbox.svg/25px-Win-like-userbox.svg.png)