Flat Design / Vector Minimalism vs Metro
フラットデザイン / ベクターミニマリズム / メトロ
Flat Design / Vector Minimalism comes from UI Expression and Metro from Microsoft UI. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Flat Design / Vector Minimalism
Reduces information to plain planes and color, portable across screens and media.
Metro
Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.
| Flat Design / Vector Minimalism | Metro | |
|---|---|---|
| Era | 2010s– | 2010–2015 |
| Family | UI Expression | Microsoft UI |
| Kind | Style | Style |
| Cues | Uniform planes / Simple shapes / Few shadows / Clear color | Type as the hero / Flat-color tiles / Compositions running off-screen / Chrome eliminated |
| Best used for | Light, understandable explanation · Large sets of consistent figures | Dashboards listing news or weather where borders would only add noise · Indoor wayfinding and signage read from a distance in one word |
| Type | A rounded sans-serif | Headings five times body size, kept in a light weight |
| Composition | Simple silhouettes and clear hierarchy | Headings running off the edge, tiles in two rectangle sizes |
| Material | Three to five colors; shadows only when they mean something | No shadows or borders, black or white ground, saturated flat panels |
| Caution | Figures easily become generic. Define your own ratios, lines and color rules. | Stripping every border and shadow erases the difference between a tappable tile and a plain heading, leaving people guessing where to touch. |