Share
In de afgelopen jaren heeft Microsoft de bestaande ontwerptaal in belangrijke mate overgenomen. Metro is de esthetische basis van Windows 8; Het volgende besturingssysteem van Microsoft wordt in oktober verzonden. Laten we eens kijken naar wat Metro is, hoe we enkele van de gewenste principes kunnen navolgen en een kijkje kunnen nemen naar waar het al wordt gebruikt.
Metro is de naam die wordt gegeven aan de ontwerptaal die wordt gebruikt in de huidige en volgende generatie besturingssystemen van Microsoft, waaronder de komende Windows 8, het huidige Xbox 360-dashboard en op sommige van hun websites. Sommige aspecten van het eerdere werk van het bedrijf waren al zichtbaar, terug in Windows XP en de Zune.
Het ontwerpteam van Microsoft heeft onthuld dat de taal gedeeltelijk wordt beïnvloed door borden voor het openbaar vervoer, die een grote nadruk legt op typografie en een visuele hiërarchie die bestaat uit tekst met verschillende eigenschappen. In software desgn beschreef Microsoft Metro als een "vernieuwing" van de interfaces van Windows (pre-8), Android en iOS die voornamelijk op pictogrammen gebaseerde interfaces bevatten.
Hoewel de scherpe overgang in Windows 8 voor controverse openstond, was de ontvangst van Metro overwegend positief, en het is niet moeilijk om te zien waarom.
Voor Microsoft is de esthetiek van [de Metro UI] iets gewaagder en informeler dan de strakke, steriele pictogramroosters en de Rolodex-menu's van de iPhone en iPod Touch. - CNET
Microsoft benadrukt vier principes als fundamenteel voor de Metro UI; typografie, beweging, "inhoud niet chroom" en eerlijkheid. Laten we eens kijken hoe deze naar het web vertalen.
Typografie is een zeer belangrijk principe in Metro. Als gebruikersinterface verwisselt Metro het traditionele op pictogrammen gebaseerde ontwerp voor navigatie dat uitsluitend uit tekst bestaat. Wanneer de tekst moet voldoen aan een gedefinieerd raster, wordt deze op vierhoeken van effen kleur geplaatst.
Metro wordt beschreven als modern en dat is duidelijk door het gebruik van het schreefloze lettertype, in het bijzonder in het geval van Windows, de Segoe-letterfamilie. In het door Metro beïnvloede ontwerp wordt de tekst grotendeels gedifferentieerd door niets meer dan de grootte, waarbij het letterbeeld, het gewicht en andere eigenschappen hetzelfde of soortgelijk zijn, waarbij onderscheid wordt gemaakt in andere eigenschappen alleen wanneer ze fungeren als een link of op een alternatieve achtergrondkleur.
Met de vermindering van grafische voorstellingen ten gunste van tekst, heeft Metro invloed op het gebruik van tekst op alle niveaus. Er wordt dus een hiërarchie geboren en op een minimalistisch siteontwerp kan de typegrootte fungeren als het enige onderscheid tussen secties (bijvoorbeeld een titel van een blogpost en bijbehorende tekst). Het trouwen van enkele verschillen tussen tekststijlen met een goed, consistent gebruik van witruimte is een kernonderdeel van de typografische principes in Metro.
Microsoft heeft zelf een artikel over de typografierichtlijnen van Metro. Hoewel het overduidelijk is dat je ze niet hoeft na te leven (het is vooral een richtlijn voor native software-ontwikkelaars), laat de gids wel een manier zien om Metro's typografische ethos op verschillende niveaus te gebruiken..
In combinatie met de typografische kenmerken van Metro speelt "content, not chrome" een grote rol bij de visuele onderscheiding van Metro naar andere manieren van ontwerpen.
De zichtbare grafische interface-functies van een applicatie worden soms "chrome" genoemd - Wikipedia
De minimalistische benadering van Metro wordt uiteindelijk bereikt door interfaces met chroom te vermijden. In plaats daarvan zult u contentgerichte ontwerpen tegenkomen die voornamelijk bestaan uit tekst die de bovengenoemde typografische eigenschappen waarneemt. Door het chroom te verwijderen, ontwerpt push-content de hoofdfocus, met name voordelig in blogs en andere op tekst gebaseerde sites.
Door chroom in het ontwerp te vermijden, kan een site profiteren van meer naadloze schaalvergroting en effectief werken op kleinere schermformaten, als onderdeel van een responsief ontwerp. U kunt een voorbeeld hiervan bekijken door te kijken naar Metro-apps in Windows 8, naast vergelijkbare op Windows Phone 7. De "content, not chrome" -filosofie speelt in een responsief ontwerp dat uiteraard belangrijk is bij het ontwerpen om te worden geconsumeerd in meerdere formaten.
In Google Chrome wilden we [Chrome] elimineren - niet alleen omdat dit leidt tot een eenvoudiger, schoner ontwerp, maar omdat we vonden dat uw webtoepassingen niet beperkt lijken te zijn binnen de omvangrijke interruptie van een browser - ze moeten aanvoelen als Eersteklas applicaties op uw bureaublad. - Google.
Het belangrijkste geloof van Microsoft in 'content, not chrome' is om te genieten van inhoud, niet van decoratie, bereikt door het reduceren van alles op de pagina die niet inhoudelijk is. Door dit te doen, kunt u een aangenaam eenvoudige gebruikerservaring bereiken, een filosofie die al vele ontwerpen op het web heeft bewezen, zelfs als ze niet lijken op Microsoft's Metro. Zelfs browsers implementeren software om gebruikers een kijkoptie te geven die zich aan het principe houdt.
Het Motion-aspect van Metro als ontwerptaal is iets dat is gericht op toepassingen en de invloed ervan op uw ontwerp is afhankelijk van de interactie die een gebruiker heeft en het niveau van de overgang dat de interactie oproept.
Microsoft is van mening, via Metro, dat de esthetiek van een ontwerp in belang wordt gematcht door de vloeiendheid en de prestaties van het ontwerp, en dat de bewegingsprincipes diepte en reactievermogen bieden voor een site.
Windows 8 en Windows Phone 7 hebben ook een voorliefde voor horizontaal scrollen, met inhoud die is neergelegd in een richting die vrijwel niet bestaat in een meer traditioneel ontwerpparadigma. Het is niet echt vertaald naar het desktopweb, zelfs niet op de eigen sites van Microsoft, maar het is vrij populair in mobiel ontwerp. Daarom kunnen responsieve of op aanraking gerichte ontwerpen dit behoorlijk effectief gebruiken. (Hoewel, hoewel dit wordt gebruikt in gebruikers UI's op basis van Metro, het geen officieel principe is en al duidelijk is in besturingssystemen.)
Metro is "authentiek digitaal", een contrast met enkele van de meer skeuomorfische ontwerpprincipes van bedrijven als Apple. Apple heeft bijvoorbeeld de apps Contacten, Agenda, Notities en Herinneringen ontworpen om op hun meer fysieke tegenhangers te lijken, iets wat behoorlijk controversieel is gebleken.
Microsoft gelooft in iets heel anders. De Metro-taal is zo ontworpen dat de principes ervan niet lijken op iets dat het niet is, en in plaats daarvan het digitale karakter door design omarmen. Dus in plaats van een lijst met contacten eruit te laten zien als het adresboek dat je misschien in een winkel zou kopen, zou het eruit moeten zien als een lijst met contacten op een telefoon of computer om te voldoen aan de principes in Metro.
Het logo voor Windows 8 kreeg een eigen controverse, maar het speelt in op de principes van Microsoft om authentiek digitaal te zijn. Natuurlijk lijkt het nog steeds op een raam, maar niet op het raam dat deel uitmaakt van een gebouw - in plaats daarvan gewoon het venster in de naam - dus er zit geen nepglas of hout in. Zelfs je ontwerp van een knop mag geen invloed hebben op het ontwerp van een knop die je in het echt tegenkomt.
Als je ervoor kiest om een traditionele takenlijst niet na te bootsen, kunnen de ontwerpers [van Helder, voor iPhone] anders denken en volledig gebruik maken van de technologie die voor hen beschikbaar is. De app is gebouwd rond multi-touch-bewegingen en samen met soepele animatie, het zorgt voor een zeer unieke en elegante ervaring. - Shaun Cronin
Dit concept speelt een rol in het idee "content, not chrome" door overbodige details te verwijderen die niets doen om inhoud te ondersteunen.
Belangrijk is dat Metro niet één ontwerp is. Hoewel er zeker sites zijn die zijn gebouwd om direct op Windows 8 of Windows Phone 7 te lijken, is dat slechts één interpretatie van de taal. Uw ontwerp hoeft er niet hetzelfde uit te zien als een Metro Windows-app om aan de taal te voldoen.
Ontwerpen kunnen op verschillende niveaus door Metro worden geïnspireerd, maar het hoeft duidelijk niet per se te lijken alsof ze door Microsoft zijn vervaardigd. U kunt de typografische principes van Metro implementeren zonder dat u Segoe als uw favoriete letterfamilie hoeft te gebruiken, net zoals u "content, not chrome" kunt implementeren.
Eigenlijk, met typografie die zo'n integraal onderdeel van Metro speelt, kan je ontwerp er uiteindelijk niet meer uitzien als Microsoft's terwijl je nog steeds van zijn praktijken profiteert.
Metro is voornamelijk ontworpen voor softwareontwerp, maar de functies ervan zijn ook begonnen het internet te beïnvloeden, te beginnen met de eigen eigenschappen van Microsoft.
De preview van Microsoft.com is een erg leuke opfrissing van de startpagina van het bedrijf om zichzelf echt af te stemmen op Metro en het een responsieve update te geven.
My Kind of Phone is de Britse blog van Windows Phone, dus het is heel normaal dat het de ontwerptaal van het platform dat het behandelt, moet volgen. Je kunt hier ook de "Motion" -principes van Metro in het spel zien, waarbij een deel van de inhoud binnenkomt terwijl je over items beweegt.
De Zune-site van Microsoft wordt sterk beïnvloed door Metro, vooral omdat de Zune het eerste apparaat was dat een volledige Metro-interface echt omarmde. Je ziet in het ontwerp een perfecte belichaming van Metro op het web.
De huidige homepagina van de BBC hecht sterk aan Metro-principes met een gedurfd gebruik van typografie en rasters.
Zelfs de websites van Google hebben een vleugje Metro, met het meest recente herontwerp van de app-suite met een royaal gebruik van witruimte en het gebruik van typografie. Net zoals in de richtlijnen voor typografie van Microsoft, gebruikt Google een enkele accentkleur in het midden van zijn eenvoudige typografie.
Accentsconagua