Share
I løpet av de siste årene har Microsoft i betydelig grad vedtatt sitt etablerte designsprog. Metro er det estetiske grunnlaget for Windows 8; Microsofts neste operativsystem leverer denne oktober. La oss ta en titt på hva Metro er, hvordan vi kan etterligne noen av sine ønskelige prinsipper og se på hvor den blir brukt allerede.
Metro er navnet på designspråket som brukes i Microsofts nåværende og neste generasjons operativsystemer, inkludert den kommende Windows 8, det nåværende Xbox 360-dashbordet og i noen av deres nettsteder. Aspekter har allerede vært tydelig i noen av selskapets tidligere arbeid, tilbake i Windows XP og Zune.
Microsofts designteam har avslørt at språket er delvis påvirket av offentlige transportskilt som legger stor vekt på typografi og et visuelt hierarki som består av tekst med varierende egenskaper. I programvare desgn beskrevet Microsoft Metro som en "oppdatering" fra grensesnittene til Windows (pre-8), Android og iOS som hovedsakelig inneholder ikonbaserte grensesnitt.
Selv om den skarpe overgangen som ble sett i Windows 8, har vært åpen for kontroverser, har Metro mottatt hovedsakelig positiv, og det er ikke vanskelig å se hvorfor.
Til Microsofts kreditt er estetikken til [Metro UI] litt mer dristig og uformell enn de stramme, sterile ikonnettene og Rolodex-menyene til iPhone og iPod Touch. - CNET
Microsoft fremhever fire prinsipper som grunnleggende for Metro UI; typografi, bevegelse, "innhold ikke krom" og ærlighet. La oss se på hvordan disse oversetter til nettet.
Typografi er et svært viktig prinsipp i Metro. Som et brukergrensesnitt bytter Metro ut tradisjonell ikonbasert design for navigasjon som bare består av tekst. Når teksten må tilpasse seg et bestemt grid, plasseres det på firkantede fargebilder.
Metro er beskrevet som moderne og det er tydelig gjennom bruk av sans-serif-typen, spesielt når det gjelder Windows, Segoe-familien av skrifttyper. I Metro-påvirket design er teksten i stor grad differensiert av noe annet enn størrelsen, og holder skrifttype, vekt og andre egenskaper like eller liknende, differensierer i andre egenskaper bare når det virker som en link eller på en alternativ bakgrunnsfarge.
Med reduksjon av grafikk til fordel for tekst, påvirker Metro bruken av tekst på alle nivåer. Et hierarki er derfor født, og på en minimalistisk nettsteddesign kan typestørrelse fungere som det eneste skillet mellom seksjoner (si en blogginnleggstitel og tilhørende tekst). Å gifte få forskjeller mellom tekststiler med god, konsekvent bruk av hvitt plass er en sentral del av de typografiske prinsippene i Metro.
Microsoft har selv en artikkel om Metros retningslinjer for typografi. Selv om det er opplagt, trenger du ikke å overholde dem (det er hovedsakelig en retningslinje for innfødte programvareutviklere) guiden viser en måte å bruke Metros typografiske etos på ulike nivåer.
I forbindelse med de typografiske egenskapene til Metro spiller "innhold, ikke krom" en stor rolle i den visuelle forskjellen mellom Metro og andre måter å designe.
De synlige grafiske grensesnittfunksjonene til et program blir noen ganger referert til som "krom" - Wikipedia
Metroens minimalistiske tilnærming møtes til slutt ved å unngå grensesnitt med krom. I stedet møter du innholdsmessige design som hovedsakelig består av tekst som observerer de nevnte typografiske egenskapene. Ved å fjerne krom, skyver design innhold som hovedfokus, spesielt fordelaktig i blogger og andre tekstbaserte nettsteder.
Ved å unngå krom i designen, kan et nettsted ha nytte av mer sømløs skalering og fungere effektivt på mindre skjermstørrelser, som en del av en responsiv design. Du kan observere et eksempel på dette ved å se på Metro apps i Windows 8, i tillegg til lignende på Windows Phone 7. Filosofien "innhold, ikke krom" spiller en responsiv design som er åpenbart viktig når designen skal brukes til flere størrelser.
I Google Chrome traff vi oss for å eliminere [Chrome] - ikke bare fordi det fører til en enklere, renere design, men fordi vi følte at webapplikasjonene dine ikke burde synes å være begrenset innenfor den store delen av en nettleser - de burde føles som førsteklasses programmer på skrivebordet ditt. - Google.
Microsofts viktigste tro på innhold, ikke krom, er å glede seg over innhold, ikke dekorasjon, oppnådd ved å redusere noe på siden som ikke er innhold. Ved å gjøre det, kan du oppnå en behagelig enkel brukeropplevelse, en filosofi som allerede har blitt vist mange design på nettet, selv om de ikke ser ganske ut som Microsofts Metro. Selv nettlesere implementerer programvare for å gi brukerne et visningsalternativ som overholder prinsippet.
Bevegelsesaspektet av Metro som et designsprog er noe fokusert på applikasjoner, og dets innflytelse på utformingen er avhengig av hvor mye samhandling en bruker har og nivået på overgang som samspillet påkaller.
Microsoft mener via Metro at estetikken til et design er avstemt av betydning ved designets flythet og ytelse, og at bevegelsesprinsippene gir dybde og respons til et nettsted.
Windows 8 og Windows Phone 7 har også en kjærlighet for horisontal rulling, med innhold lagt ut i en retning som nesten ikke eksisterer i et mer tradisjonelt designparadigm. Det har egentlig ikke blitt oversatt til skrivebordet, selv i Microsofts egne sider, men er ganske populært i mobildesign. Derfor kan responsive eller touch-sentriske motiver utnytte dette ganske effektivt. (Selv om dette brukes i Metro-baserte brukergrensesnitt, er det ikke et offisielt prinsipp og er allerede tydelig på tvers av operativsystemene.)
Metro er "autentisk digital", en kontrast til noen av de mer skeuomorfe designprinsippene til selskaper som Apple. For eksempel utformet Apple sine kontakter, kalender, notater og påminnelser apps som ligner sine mer fysiske kolleger, noe som har vist seg å være ganske kontroversielt.
Microsoft tror på noe helt annet. Metro-språket er utformet slik at dets prinsipper ikke forsøker å ligne noe som det ikke er, og i stedet omfavne sin digitale natur gjennom design. Så, i stedet for å lage en liste over kontakter, ser ut som adresseboken du kan kjøpe i en butikk, det bør se ut som en liste over kontakter på en telefon eller en datamaskin for å overholde prinsippene i Metro.
Logoen for Windows 8 ble møtt med egen kontrovers, men det spiller inn i Microsofts prinsipper for å være autentisk digital. Visst, det ser fortsatt ut som et vindu, men ikke som vinduet som er en del av en bygning - i stedet, bare vinduet i navnet - så det er ingen fauxglass eller tre i den. Selv utformingen av en knapp bør ikke påvirke utformingen av en knapp du møter i virkeligheten.
Hvis du velger å ikke etterligne en tradisjonell oppgaveliste, har designerne [for Clear, for iPhone] tenkt annerledes og fullt ut utnyttet teknologien som er tilgjengelig for dem. Appen har blitt bygget rundt multi-touch bevegelser og sammen med jevn animasjon, det gir en veldig unik og elegant opplevelse. - Shaun Cronin
Dette konseptet spiller sin rolle i innholdet, ikke krom-ideen ved å fjerne overflødig detalj som ikke gjør noe for å støtte innhold.
Viktigst er Metro ikke et design. Selv om det er definitivt nettsteder der ute som er bygget for å ligne Windows 8 eller Windows Phone 7, er det bare en tolkning av språket. Ditt design trenger ikke å se identisk med en Metro Windows-app for å passe til språket.
Design kan ta inspirasjon fra Metro på ulike nivåer, men åpenbart trenger ikke nødvendigvis å se ut som de ble produsert av Microsoft. Du kan implementere de typografiske prinsippene til Metro uten å måtte bruke Segoe som din typefacefamilie, akkurat som du kan implementere "innhold, ikke krom".
Egentlig, med typografi som spiller en slik integrert del av Metro, kan designet din ende opp med å se ingenting som Microsofts, mens du fortsatt drar nytte av sin praksis.
Metro ble konstruert hovedsakelig for programvareutforming, men dens funksjoner har begynt å påvirke nettet også, med utgangspunkt i Microsofts egne egenskaper.
Forhåndsvisning av Microsoft.com er en veldig fin oppdatering av selskapets hjemmeside for å virkelig tilpasse seg Metro og gi den en responsiv oppdatering.
Min type telefon er den britiske bloggen til Windows Phone, så det er ganske naturlig at det skal følge designspråket til plattformen den dekker. Du kan også se Metros "Motion" -prinsipper i spill her, med litt innholdsovergang i som du svinger over elementer.
Microsofts Zune-nettsted er svært sterkt påvirket av Metro, spesielt bemerkelsesverdig siden Zune var den første enheten som virkelig omfavner et fullblåst Metro-grensesnitt. Du kan se i designet en perfekt utførelse av Metro på nettet.
BBCs nåværende hjemmeside følger sterkt med Metro-prinsipper med en dristig bruk av typografi og grids.
Selv Googles nettsteder har en gnist av Metro, med det nyeste redesignet av app-pakken med en generøs bruk av hvittom og bruk av typografi. I likhet med Microsofts retningslinjer for typografi bruker Google en enkelt aksentfarge midt i sin enkle typografi.
Accentsconagua