Emulând limbajul de design Metro al Microsoft

În ultimii ani, Microsoft și-a adoptat limbajul actual de design într-o măsură semnificativă. Metro este baza estetică a Windows 8; Următorul sistem de operare Microsoft de transport maritim în octombrie. Să aruncăm o privire la ceea ce este Metro, cum putem emula unele dintre principiile sale dorite și să aruncăm o privire la locul în care este deja folosit.


Ce este Metro?

Metro este numele dat limbajului de design utilizat în sistemele de operare actuale și de generație următoare ale Microsoft, inclusiv viitorul Windows 8, actualul tablou de bord Xbox 360 și pe unele dintre site-urile lor. Aspecte au fost deja evidente în unele dintre lucrările anterioare ale companiei, înapoi în Windows XP și Zune.

Echipa de proiectare a Microsoft a dezvăluit că limba este parțial influențată de semnele de transport public care pune un accent deosebit pe tipografie și o ierarhie vizuală constând din text cu proprietăți diferite. În software-ul desgn, Microsoft a descris Metro ca o "reîmprospătare" de la interfețele Windows (pre-8), Android și iOS, care conțin în principal interfețe bazate pe pictograme.

Deși tranziția bruscă văzută în Windows 8 a fost deschisă la controverse, recepția Metro a fost în primul rând pozitivă și nu este greu să înțelegi de ce.

Pentru creditul Microsoft, estetica lui [Metro UI] este un pic mai îndrăzneață și mai informală decât grilajul de pictograme steril, steril și meniurile Rolodex ale dispozitivelor iPhone și iPod Touch. - CNET

Microsoft subliniază patru principii ca fiind fundamentale pentru UI Metro; tipografie, mișcare, "conținut nu crom" și onestitate. Să aruncăm o privire la modul în care acestea se traduc pe web.


Tipografie

Tipografia este un principiu foarte important în Metro. Ca interfață cu utilizatorul, Metro promovează designul tradițional bazat pe icoane pentru navigație, care este alcătuit exclusiv din text. Atunci când textul respectiv trebuie să se conformeze unei rețele definite, acesta este plasat pe patru culori colorate.

Metro este descris ca fiind modern și care este evident prin utilizarea tipului sans-serif, în special în cazul Windows, familia de fonturi Segoe. În designul influențat de Metro, textul este în mare măsură diferențiat de nimic mai mult decât mărimea, păstrând același tip sau similar proprietății de tip, greutate și alte proprietăți, diferențiind în alte proprietăți numai atunci când acționează ca o legătură sau pe o culoare de fundal alternativă.

Prin reducerea graficii în favoarea textului, Metro influențează utilizarea textului la toate nivelurile. Prin urmare, se naște o ierarhie și pe un design minimalist al site-ului, mărimea tipului poate acționa ca singura distincție între secțiuni (de exemplu, un titlu post de blog și text însoțitor). Conjugarea câtorva diferențe între stilurile de text cu o utilizare bună și consistentă a spațiului alb este o parte esențială a principiilor tipografice din Metro.

Microsoft are un articol despre liniile directoare de tipografie ale Metro. Deși este evident că nu trebuie să le respectați (este o orientare în principal pentru dezvoltatorii de software nativi), ghidul demonstrează o modalitate de a folosi ethosul tipografic Metro la diferite niveluri.


Conținut, nu Chrome

În combinație cu trăsăturile tipografice ale metroului, "conținutul, nu cromul" joacă un rol important în distincția vizuală a Metro-ului în alte moduri de proiectare.

Caracteristicile interfeței grafice vizibile ale unei aplicații sunt denumite uneori "cromate" - Wikipedia

Abordarea minimalistă a Metro-ului este în cele din urmă îndeplinită prin evitarea interfețelor cu crom. În schimb, veți întâlni desene sau modele bazate pe conținut care constau în principal din text care respectă calitățile tipografice menționate mai sus. Prin eliminarea cromului, designul împinge conținutul ca fiind principalul obiectiv, avantajos în mod special în blogurile și alte site-uri bazate pe text.

Prin evitarea cromului în design, un site poate beneficia de o scalare mai uniformă și poate funcționa eficient la dimensiuni mai mici ale ecranului, ca parte a unui design receptiv. Puteți observa un exemplu de acest lucru, uitandu-te la aplicațiile Metro din Windows 8, juxtapuse cu cele comparabile pe Windows Phone 7. Filozofia "conținut, nu crom" joacă un design receptiv care este în mod evident important atunci când se proiectează pentru a fi consumat la mai multe dimensiuni.

În Google Chrome, ne-am străduit să eliminăm [Chrome] - nu doar pentru că conduce la un design mai simplu și mai curat, ci pentru că am considerat că aplicațiile dvs. web nu ar trebui să fie constrânse în cadrul browser-ului - aplicații de primă clasă de pe desktop. - Google.

Convingerea principală a Microsoft în ceea ce privește "conținutul, nu cromul" este să vă bucurați de conținut, nu de decor, obținut prin reducerea a ceva de pe pagina care nu este mulțumită. În acest fel, puteți obține o experiență de utilizator simplă, o filosofie care a fost deja evidențiată de multe modele pe web, chiar dacă acestea nu par foarte asemănătoare metroului Microsoft. Chiar browserele implementează software-ul pentru a oferi utilizatorilor o opțiune de vizionare care respectă principiul.


Mișcare și defilare

Aspectul Motion al Metro ca limbaj de design este ceva concentrat pentru aplicații, iar influența acestuia asupra designului dvs. depinde de cât de mult are un interactiv un utilizator și de nivelul de tranziție pe care interacțiunea îl invocă.

Microsoft consideră, prin intermediul Metro, că estetica unui design este potrivită în importanță prin fluiditatea și performanța designului și că principiile mișcării oferă adâncime și reacție la un site.

Windows 8 și Windows Phone 7 au, de asemenea, o îndrăzneală pentru derularea orizontală, cu conținut stabilit într-o direcție care este practic inexistentă într-o paradigmă de design mai tradițională. Nu a fost tradus pe web, chiar în site-urile Microsoft, dar este destul de popular în designul mobil. Prin urmare, design-urile receptive sau touch-centric pot folosi acest lucru destul de eficient. (Deși, în timp ce acest lucru este utilizat în interfețele UI bazate pe Metro, acesta nu este un principiu oficial și este deja evident în sistemele de operare.)


Authentic Digital

Metro este "autentic digital", un contrast cu unele dintre principiile de proiectare mai scumo-morfice ale companiilor precum Apple. De exemplu, Apple și-a conceput aplicațiile pentru Contacte, Calendar, Note și Mementouri pentru a se asemăna cu mai multe persoane fizice, ceea ce sa dovedit destul de controversat.

Microsoft crede în ceva foarte diferit. Limba metropolitană este concepută astfel încât principiile sale să nu încerce să semene cu ceva ce nu este, și să-și îmbrățișeze natura digitală prin design. Deci, în loc să faci o listă de contacte ca agenda de cumpărări pe care ar putea să o cumperi într-un magazin, ar trebui să pară o listă de contacte pe un telefon sau computer care să respecte principiile din Metro.

Logo-ul pentru Windows 8 a fost întâmpinat cu o controversă proprie, dar se joacă în principiile Microsoft de a fi autentic digital. Desigur, încă arată ca o fereastră, dar nu ca fereastra care face parte dintr-o clădire - în schimb, pur și simplu fereastra în nume - astfel încât nu există nici o sticlă sau lemn în ea. Chiar și designul unui buton nu trebuie să influențeze designul unui buton pe care îl întâlniți în viața reală.

Alegerea de a nu emula o listă tradițională de lucru a permis designerilor [Clear of iPhone] să gândească diferit și să utilizeze pe deplin tehnologia pe care o au la dispoziție. Aplicația a fost construită în jurul unor gesturi multi-touch și, împreună cu o animație netedă, oferă o experiență unică și elegantă. - Shaun Cronin

Acest concept joacă rolul în ideea "conținut, nu crom", prin eliminarea detaliilor excesive care nu fac nimic pentru a sprijini conținutul.


O filosofie, nu un design

Foarte important, Metro nu este un design. În timp ce există cu siguranță site-uri acolo construit pentru a semăna direct cu Windows 8 sau Windows Phone 7, aceasta este doar o interpretare a limbii. Designul dvs. nu trebuie să arate identic cu o aplicație Metro Windows pentru a se conforma limbii.

Design-urile se pot inspira din Metro la diferite nivele, dar evident nu trebuie neapărat să pară că au fost produse de Microsoft. Puteți implementa principiile tipografice ale metroului fără a fi nevoie să utilizați Segoe ca familie de tipărire preferată, la fel cum puteți implementa "conținut, nu crom".

De fapt, cu tipografia care joacă o parte integrantă a metroului, design-ul dvs. poate ajunge să nu arate nimic ca Microsoft, profitând în același timp de practicile sale.


Breviar: inspirat de Metro

Metro a fost proiectat în primul rând pentru proiectarea software-ului, dar caracteristicile sale au început să influențeze și web-ul, pornind de la proprietățile proprii ale Microsoft.

Previzualizare Microsoft.com

Previzualizarea Microsoft.com este o reîmprospătare foarte bună a paginii de pornire a companiei pentru a se alinia într-adevăr cu Metro și pentru a da o actualizare rapidă.

Felul meu de telefon

Felul meu de telefon este blogul britanic al Windows Phone, deci este destul de natural ca acesta să urmeze limbajul de design al platformei pe care o acoperă. Puteți vedea, de asemenea, principiile metroului "Propunere" în joc aici, cu un anumit conținut care se transformă în timp ce treceți peste obiecte.

Zune

Site-ul Microsoft Zune este foarte puternic influențat de Metro, în special remarcabil, deoarece Zune a fost primul dispozitiv care întrunește într-adevăr o interfață Metro plină. Puteți vedea în design o întruchipare perfectă a metroului pe web.

BBC

Pagina de pornire actuală a BBC aderă foarte mult la principiile Metro, cu o utilizare îndrăzneață a tipografiei și a rețelelor.

Google / Gmail

Chiar și site-urile Google au o scânteie de Metro, cu cea mai recentă reproiectare a suitei de aplicații, cu o utilizare generoasă a spațiilor libere și a tipografiei. La fel ca în liniile directoare ale Microsoft pentru tipografie, Google utilizează o singură culoare de accent în mijlocul tipografiei sale simple.