Share
Au cours des dernières années, Microsoft a adopté le langage de conception actuel dans une large mesure. Metro est la base esthétique de Windows 8; Le prochain système d'exploitation de Microsoft sera disponible en octobre. Jetons un coup d'œil à ce qu'est Metro, comment pouvons-nous imiter certains de ses principes souhaitables et jetons un coup d'œil à l'endroit où il est déjà utilisé.
Metro est le nom donné au langage de conception utilisé dans les systèmes d'exploitation actuels et futurs de Microsoft, y compris le prochain Windows 8, le tableau de bord actuel Xbox 360 et certains de leurs sites Web. Certains aspects ont déjà été mis en évidence dans certains travaux antérieurs de la société, de retour dans Windows XP et le Zune..
L’équipe de conception de Microsoft a révélé que la langue est en partie influencée par les panneaux de transports en commun, ce qui met l’accent sur la typographie et une hiérarchie visuelle composée de textes aux propriétés variées. Dans le logiciel, Microsoft a décrit Metro comme un "rafraîchissement" à partir des interfaces de Windows (antérieures à 8), Android et iOS, qui comportent principalement des interfaces basées sur des icônes..
Bien que la transition brutale observée dans Windows 8 soit sujette à controverse, la réception de Metro a été principalement positive et il n’est pas difficile de comprendre pourquoi..
Au crédit de Microsoft, l'esthétique de [l'interface utilisateur de Metro] est un peu plus audacieuse et informelle que les grilles d'icônes serrées et stériles et les menus Rolodex de l'iPhone et de l'iPod Touch.. - CNET
Microsoft souligne quatre principes fondamentaux de l'interface utilisateur de Metro; typographie, mouvement, "contenu pas chrome" et honnêteté. Voyons comment ils se traduisent sur le Web.
La typographie est un principe fondamental de Metro. En tant qu'interface utilisateur, Metro remplace la conception traditionnelle basée sur des icônes pour une navigation composée uniquement de texte. Lorsque ce texte doit être conforme à une grille définie, il est placé sur des quadrilatères de couleur unie.
Metro est décrit comme étant moderne et cela est évident grâce à l'utilisation du type sans empattement, en particulier, dans le cas de Windows, de la famille de polices Segoe. Dans le design influencé par la métropole, le texte ne se différencie guère que par la taille, conservant la même ou identique propriétés de la police de caractères, du poids et des autres propriétés, différenciant les autres propriétés uniquement en agissant comme un lien ou sur une couleur de fond alternative.
Avec la réduction des graphiques en faveur du texte, Metro influence l'utilisation du texte à tous les niveaux. Une hiérarchie est donc née et sur un design de site minimaliste, la taille du texte peut constituer la seule distinction entre les sections (par exemple, le titre d'un article de blog et le texte qui l'accompagne). Marier peu de disparités entre les styles de texte avec une bonne utilisation cohérente des espaces est une partie essentielle des principes typographiques de Metro..
Microsoft eux-mêmes ont publié un article sur les directives de typographie de Metro. Bien qu'il soit évident que vous ne devez pas vous y conformer (il s'agit principalement d'une directive pour les développeurs de logiciels natifs), le guide décrit une façon d'utiliser la philosophie typographique de Metro à différents niveaux..
En conjonction avec les caractéristiques typographiques de Metro, "content, not chrome" joue un rôle important dans la distinction visuelle de Metro avec d'autres méthodes de conception..
Les fonctionnalités d'interface graphique visibles d'une application sont parfois appelées "chrome" - Wikipedia
L'approche minimaliste de Metro est finalement satisfaite en évitant les interfaces avec le chrome. Au lieu de cela, vous rencontrerez des conceptions centrées sur le contenu qui consistent principalement en un texte respectant les qualités typographiques susmentionnées. En supprimant le chrome, les conceptions placent le contenu au centre de leurs préoccupations, ce qui est particulièrement avantageux pour les blogs et autres sites à base de texte..
En évitant le chrome dans la conception, un site peut bénéficier d'une mise à l'échelle plus transparente et fonctionner efficacement avec des écrans de petite taille, dans le cadre d'une conception réactive. Vous pouvez observer un exemple de cela en regardant les applications Metro dans Windows 8, juxtaposées à celles comparables sur Windows Phone 7. La philosophie "contenu, pas chrome" joue dans une conception réactive qui est évidemment importante lors de la conception pour être consommé à plusieurs tailles.
Dans Google Chrome, nous nous sommes efforcés d’éliminer [Chrome] - non seulement parce qu’il aboutit à une conception plus simple et plus propre, mais aussi parce que nous estimions que vos applications Web ne devraient pas sembler gênées par le volume encombrant d’un navigateur - applications de première classe sur votre bureau. - Google.
La croyance principale de Microsoft en "contenu, pas chrome" est de ravir avec le contenu, pas la décoration, réalisée en réduisant tout ce qui n'est pas contenu sur la page. En procédant ainsi, vous pouvez obtenir une expérience utilisateur extrêmement simple, une philosophie qui a déjà été mise en évidence par de nombreux modèles sur le Web, même s'ils ne ressemblent pas vraiment à Microsoft. Même les navigateurs déploient des logiciels pour offrir aux utilisateurs une option de visualisation conforme au principe.
L'aspect Motion de Metro, en tant que langage de conception, est centré pour les applications et son influence sur votre conception dépend du degré d'interaction d'un utilisateur et du niveau de transition invoqué par cette interaction..
Microsoft estime, par le biais de Metro, que la fluidité et la performance de la conception ont une valeur égale à l'esthétique d'un design et que les principes de déplacement apportent profondeur et réactivité à un site..
Windows 8 et Windows Phone 7 ont également un penchant pour le défilement horizontal, avec un contenu présenté dans une direction pratiquement inexistante dans un paradigme de conception plus traditionnel. Il n'a pas vraiment été traduit sur le Web de bureau, même sur les sites de Microsoft, mais est très populaire dans la conception mobile. Par conséquent, les conceptions réactives ou centrées sur le toucher peuvent utiliser cela assez efficacement. (Bien que, même si cela est utilisé dans les interfaces utilisateur Metro, ce n'est pas un principe officiel et est déjà évident dans tous les systèmes d'exploitation.)
Metro est "authentiquement numérique", ce qui contraste avec certains des principes de conception les plus complexes de sociétés comme Apple. Par exemple, Apple a conçu ses applications Contacts, Calendrier, Notes et Rappels pour qu'elles ressemblent davantage à leurs homologues plus physiques, ce qui s'est révélé assez controversé..
Microsoft croit en quelque chose de très différent. Le langage Metro est conçu pour que ses principes n'essayent pas de ressembler à quelque chose qui ne le soit pas, mais embrassent sa nature numérique à travers le design. Ainsi, au lieu de faire en sorte qu'une liste de contacts ressemble au carnet d'adresses que vous pourriez acheter dans un magasin, elle devrait ressembler à une liste de contacts sur un téléphone ou un ordinateur, conformément aux principes de Metro..
Le logo de Windows 8 a lui-même fait l’objet d’une controverse, mais il s’inscrit dans les principes de Microsoft qui veut être authentiquement numérique. Bien sûr, cela ressemble toujours à une fenêtre, mais pas à la fenêtre qui fait partie d'un bâtiment, mais simplement à la fenêtre du nom. Il n'y a donc pas de faux verre ou de bois. Même la conception d'un bouton ne devrait pas être influencée par celle d'un bouton que vous rencontrez dans la vie réelle.
Le choix de ne pas émuler une liste de tâches traditionnelle a permis aux concepteurs [de Clear, pour iPhone] de penser différemment et de tirer pleinement parti de la technologie à leur disposition. L'application a été construite autour de gestes multi-touch et, avec une animation fluide, une expérience unique et élégante.. - Shaun Cronin
Ce concept joue son rôle dans l'idée de "contenu, pas de chrome" en supprimant les détails superflus qui ne contribuent en rien au contenu..
Il est important de noter que le métro n'est pas une conception. Il existe certes des sites conçus pour ressembler directement à Windows 8 ou Windows Phone 7, mais ce n’est qu’une interprétation du langage. Votre conception n'a pas besoin de paraître identique à une application Metro Windows pour se conformer à la langue..
Les dessins peuvent s’inspirer de Metro à différents niveaux, mais il est évident qu’ils ne doivent pas forcément avoir l’impression qu’ils ont été fabriqués par Microsoft. Vous pouvez implémenter les principes typographiques de Metro sans avoir à utiliser Segoe en tant que famille de choix de police de caractères, tout comme vous pouvez implémenter "le contenu, pas le chrome"..
En fait, avec la typographie faisant partie intégrante de Metro, votre conception peut ne plus ressembler à celle de Microsoft tout en tirant parti de ses pratiques..
Metro a été conçu principalement pour la conception de logiciels, mais ses fonctionnalités ont également commencé à influencer le Web, à commencer par les propriétés propres à Microsoft..
L’aperçu de Microsoft.com est un très bel rafraîchissement de la page d’accueil de la société, qui permet de s’aligner parfaitement sur Metro et de lui donner une mise à jour réactive..
My Kind of Phone est le blog britannique de Windows Phone. Il est donc naturel qu’il suive le langage de conception de la plate-forme qu’il couvre. Vous pouvez également voir les principes "Motion" de Metro en jeu ici, avec du contenu en transition lorsque vous survolez des éléments..
Le site Zune de Microsoft est très fortement influencé par Metro, surtout depuis que le Zune a été le premier appareil à adopter une interface Metro complète. Vous pouvez voir dans la conception une incarnation parfaite de Metro sur le Web.
La page d'accueil actuelle de la BBC adhère fortement aux principes de Metro avec une utilisation audacieuse de la typographie et des grilles..
Même les sites Web de Google ont une étincelle de Metro, avec la refonte la plus récente de la suite d'applications offrant une utilisation généreuse des espaces et de la typographie. Comme dans les directives de Microsoft en matière de typographie, Google utilise une seule couleur d'accent au milieu de sa typographie simple..
Accentsconagua