Share
Negli ultimi anni, Microsoft ha adottato il suo linguaggio di design incumbent in misura significativa. Metro è la base estetica di Windows 8; Il prossimo sistema operativo Microsoft verrà spedito a ottobre. Diamo un'occhiata a ciò che Metro è, come possiamo emulare alcuni dei suoi principi desiderabili e dare un'occhiata a dove è già in uso.
Metro è il nome dato al linguaggio di progettazione utilizzato nei sistemi operativi attuali e di prossima generazione di Microsoft, incluso il prossimo Windows 8, l'attuale dashboard di Xbox 360 e in alcuni dei loro siti web. Aspetti sono già stati evidenti in alcuni dei precedenti lavori dell'azienda, in Windows XP e Zune.
Il team di progettazione di Microsoft ha rivelato che la lingua è in parte influenzata dai segni dei trasporti pubblici, che attribuiscono un'importanza significativa alla tipografia e una gerarchia visiva costituita da testo con proprietà diverse. In software desgn, Microsoft ha descritto Metro come un "aggiornamento" dalle interfacce di Windows (pre-8), Android e iOS che presentano principalmente interfacce basate su icone.
Sebbene la forte transizione di Windows 8 sia stata aperta a controversie, la ricezione di Metro è stata principalmente positiva, e non è difficile capire perché.
A credito di Microsoft, l'estetica di [Metro UI] è un po 'più audace e informale delle griglie icone sterili e sterili e dei menu Rolodex di iPhone e iPod Touch. - CNET
Microsoft evidenzia quattro principi fondamentali per l'interfaccia utente di Metro; tipografia, movimento, "contenuto non cromato" e onestà. Diamo un'occhiata a come questi si traducono nel web.
La tipografia è un principio molto importante in Metro. Come interfaccia utente, Metro sostituisce il tradizionale design basato su icone per la navigazione che è composto esclusivamente da testo. Quando detto testo deve essere conforme a una griglia definita, viene posizionato su quadrilateri di colore solido.
Metro è descritto come moderno e questo è evidente attraverso l'uso del tipo sans-serif, in particolare, nel caso di Windows, la famiglia di font Segoe. Nel design influenzato da Metro, il testo è ampiamente differenziato da nient'altro che dimensioni, mantenendo il carattere tipografico, il peso e altre proprietà uguali o simili, differenziandosi in altre proprietà solo quando agisce come collegamento o su un colore di sfondo alternativo.
Con la riduzione della grafica a favore del testo, Metro influenza l'uso del testo a tutti i livelli. Nasce quindi una gerarchia e su un design minimalista del sito, la dimensione del testo può fungere da unica distinzione tra le sezioni (ad esempio, il titolo di un post del blog e il testo di accompagnamento). Sposare alcune disparità tra gli stili di testo con un buon uso coerente degli spazi bianchi è una parte fondamentale dei principi tipografici in Metro.
La stessa Microsoft ha un articolo sulle linee guida tipografiche di Metro. Mentre è ovvio che non devi rispettarli (è principalmente una linea guida per sviluppatori di software nativi) la guida dimostra un modo per usare l'ethos tipografico di Metro a vari livelli.
In concomitanza con le caratteristiche tipografiche di Metro, "content, not chrome" gioca un ruolo importante nella distinzione visiva di Metro in altri modi di progettare.
Le caratteristiche dell'interfaccia grafica visibile di un'applicazione sono a volte indicate come "chrome" - Wikipedia
L'approccio minimalista di Metro viene alla fine risolto evitando le interfacce con il chrome. Invece, incontrerai disegni incentrati sul contenuto che consistono principalmente in testi che osservano le qualità tipografiche citate sopra. Rimuovendo il cromo, i progetti spingono il contenuto come obiettivo principale, particolarmente vantaggioso nei blog e in altri siti basati su testo.
Evitando il cromo nella progettazione, un sito può trarre vantaggio da un ridimensionamento più uniforme e lavorare efficacemente su schermi di dimensioni minori, come parte di un design reattivo. Puoi osservare un esempio di questo guardando le app Metro in Windows 8, giustapposte a quelle comparabili su Windows Phone 7. La filosofia "content, not chrome" gioca in un design reattivo che è ovviamente importante quando si progetta di essere consumato in più dimensioni.
In Google Chrome, ci siamo sforzati di eliminare [Chrome] - non solo perché porta a un design più semplice e più pulito, ma perché ritenevamo che le tue applicazioni web non dovessero apparire limitate all'interno del ingombrante cruft di un browser - dovrebbero sentirsi come applicazioni di prima classe sul desktop. - Google.
La principale convinzione di Microsoft in "content, not chrome" è di deliziare con il contenuto, non la decorazione, ottenuto riducendo tutto ciò che non è contenuto nella pagina. In tal modo, è possibile ottenere un'esperienza utente piacevolmente semplice, una filosofia che è già stata dimostrata in molti progetti sul Web, anche se non assomiglia molto a Metro di Microsoft. Persino i browser stanno implementando software per offrire agli utenti un'opzione di visualizzazione che rispetti il principio.
L'aspetto Motion di Metro come linguaggio di progettazione è qualcosa di focalizzato per le applicazioni e la sua influenza sul design dipende da quanta interazione ha un utente e dal livello di transizione che l'interazione richiama.
Microsoft ritiene, attraverso Metro, che l'estetica di un design sia importante per la fluidità e le prestazioni del design e che i principi di movimento forniscano profondità e reattività a un sito.
Windows 8 e Windows Phone 7 hanno anche una predilezione per lo scrolling orizzontale, con contenuti disposti in una direzione praticamente inesistente in un paradigma di design più tradizionale. Non è stato realmente tradotto nel Web desktop, nemmeno nei siti Microsoft, ma è molto popolare nel design dei dispositivi mobili. Pertanto, i modelli reattivi o touch-centric possono utilizzare questo in modo abbastanza efficace. (Anche se, mentre questo è usato nelle interfacce utente basate sulla metropolitana, non è un principio ufficiale ed è già evidente nei sistemi operativi.)
Metro è "autenticamente digitale", in contrasto con alcuni dei principi di progettazione più skeuomorphic di aziende come Apple. Ad esempio, Apple ha progettato le app Contatti, Calendario, Note e Promemoria per assomigliare alle loro controparti più fisiche, cosa che si è rivelata piuttosto controversa.
Microsoft crede in qualcosa di molto diverso. Il linguaggio Metro è progettato in modo che i suoi principi non provino a somigliare a qualcosa che non è, e invece abbracciano la sua natura digitale attraverso il design. Quindi, invece di fare in modo che una lista di contatti assomigli alla rubrica che potresti comprare in un negozio, dovrebbe apparire come un elenco di contatti su un telefono o un computer per rispettare i principi in Metro.
Il logo per Windows 8 è stato accolto da polemiche, ma gioca sui principi di Microsoft di essere autenticamente digitali. Certo, sembra ancora una finestra, ma non come la finestra che fa parte di un edificio - invece, semplicemente la finestra nel nome - quindi non ci sono vetri finti o legno. Anche il tuo design di un pulsante non dovrebbe avere alcuna influenza sul design di un pulsante che incontri nella vita reale.
La scelta di non emulare una tradizionale lista di cose da fare ha permesso ai designer [di Clear, per iPhone] di pensare in modo diverso e sfruttare appieno la tecnologia a loro disposizione. L'app è stata costruita attorno a gesti multi-touch e insieme a un'animazione fluida, per un'esperienza davvero unica ed elegante. - Shaun Cronin
Questo concetto fa la sua parte nell'idea "content, not chrome" rimuovendo dettagli superflui che non fanno nulla per supportare il contenuto.
È importante sottolineare che Metro non è un progetto. Mentre ci sono sicuramente dei siti là fuori costruiti per assomigliare direttamente a Windows 8 o Windows Phone 7, questa è solo una interpretazione della lingua. Il tuo design non ha bisogno di sembrare identico a un'applicazione Metro Windows per conformarsi alla lingua.
I disegni possono trarre ispirazione da Metro a diversi livelli, ma ovviamente non devono necessariamente apparire come prodotti da Microsoft. È possibile implementare i principi tipografici di Metro senza dover utilizzare Segoe come famiglia di caratteri tipografici preferita, proprio come si può implementare "contenuto, non chrome".
In realtà, con la tipografia che suona così parte integrante di Metro, il tuo design può non sembrare niente di simile a Microsoft pur continuando a sfruttare le sue pratiche.
Metro è stato progettato principalmente per la progettazione di software, ma le sue funzionalità hanno iniziato a influenzare anche il web, a partire dalle proprietà di Microsoft.
L'anteprima di Microsoft.com è un ottimo aggiornamento della home page della società per allinearsi davvero con Metro e dargli un aggiornamento reattivo.
My Kind of Phone è il blog del Regno Unito di Windows Phone, quindi è naturale che segua il linguaggio di progettazione della piattaforma che copre. Puoi anche vedere i principi della "Motion" di Metro in gioco qui, con alcuni contenuti in fase di transizione mentre ti posizioni sopra gli elementi.
Il sito Zune di Microsoft è molto influenzato dalla Metro, specialmente da quando Zune è stato il primo dispositivo ad abbracciare un'interfaccia Metro in piena regola. Puoi vedere nel design una perfetta incarnazione di Metro sul web.
L'attuale homepage della BBC aderisce fortemente ai principi Metro con un uso audace di tipografia e griglie.
Anche i siti web di Google hanno una scintilla di Metro, con la riprogettazione più recente della suite di app con un uso generoso di spazi bianchi e l'uso della tipografia. Molto simile alle linee guida di Microsoft per la tipografia, Google usa un singolo accento nel mezzo della sua semplice tipografia.
Accentsconagua