推薦：隨本索源探討Metro風(fēng)格

Metro風(fēng)格的起源自瑞士國(guó)際主義平面設(shè)計(jì)

雖然扁平化的設(shè)計(jì)在metro風(fēng)格之前已經(jīng)存在，但真正引起人們注意的，正是它的誕生。Metro風(fēng)格是從Segoe字體開(kāi)始的。Segoe是一款西文無(wú)襯線體，為微軟公司諸多新產(chǎn)品中用戶界面的字體。Segoe的設(shè)計(jì)靈感來(lái)自于Helvetica和瑞士國(guó)際主義平面設(shè)計(jì)，它的設(shè)計(jì)像是一種簡(jiǎn)單而又能準(zhǔn)確傳遞信息的工具。沒(méi)有多余的裝飾和移動(dòng)部件，Segoe是一種呈現(xiàn)清晰、準(zhǔn)確和的新方式。

Segoe與Helvetica

瑞士國(guó)際主義平面設(shè)計(jì)

瑞士國(guó)際主義平面設(shè)計(jì)與Metro風(fēng)格設(shè)計(jì)共性

由于metro風(fēng)格是由瑞士國(guó)際平面主意設(shè)計(jì)發(fā)展而來(lái)，經(jīng)過(guò)類比，驚訝地發(fā)現(xiàn)兩者有驚人的相似之處：他們的設(shè)計(jì)目的均為單純，易于識(shí)別。風(fēng)格簡(jiǎn) 單明確，傳達(dá)功能準(zhǔn)確，追求幾何學(xué)式的嚴(yán)謹(jǐn)。采用非對(duì)稱的版面組織方式。對(duì)齊方式使用左齊，右長(zhǎng)短不一的對(duì)稱方式使用方格網(wǎng)為設(shè)計(jì)基礎(chǔ)。形成高度功能化， 理性化的設(shè)計(jì)風(fēng)格。使用無(wú)飾線體作為主要的設(shè)計(jì)字體。

windows8啟動(dòng)界面

瑞士國(guó)際主義平面設(shè)計(jì)

從瑞士國(guó)際主義平面設(shè)計(jì)的局限性到metro風(fēng)格界面的局限性

正所謂針無(wú)兩頭利。瑞士國(guó)際主義平面設(shè)計(jì)的優(yōu)點(diǎn)正正是他的缺點(diǎn)所在。 首先瑞士國(guó)際主義平面設(shè)計(jì)作品的要求必須是客觀的非個(gè)人的設(shè)計(jì)。個(gè)體偏好、顧客的特殊要求、宣傳的壓力都應(yīng)該漠視不顧。唯一的標(biāo)準(zhǔn)是視覺(jué)的力量與效果。過(guò) 分的理性化與公式化導(dǎo)致了個(gè)人性化的過(guò)道泯滅。忽略了普羅大眾對(duì)于情感化的需求。 其次瑞士國(guó)際主義平面設(shè)計(jì)形式為數(shù)字網(wǎng)格注重?cái)?shù)學(xué)邏輯和理性思維缺乏感性的思想給設(shè)計(jì)者造成很大的局限。不利于思維的發(fā)散而且形成的版面過(guò)于死板、拘束缺少更為自由、更為個(gè)人化的特點(diǎn)。

網(wǎng)格設(shè)計(jì)

最后瑞士國(guó)際主義平面設(shè)計(jì)發(fā)展到美國(guó)后漸漸背離了設(shè)計(jì)先驅(qū)們的初衷。它漸漸變成了一種風(fēng)格而不是一種動(dòng)機(jī)成為了虛空的形式主義。
以史為鏡,可以知興替，根據(jù)瑞士國(guó)際主義平面設(shè)計(jì)的消亡可以得出關(guān)于metro界面的局限性。

優(yōu)秀win8設(shè)計(jì)

1.個(gè)人情感主意的抹殺。不同與ios的擬物化情感化設(shè)計(jì)。Metro風(fēng)格對(duì)于質(zhì)感作了最大限度的抽象化。界面設(shè)計(jì)上對(duì)于高光，陰影這樣的基本 元素都作了舍棄。純粹的平面設(shè)計(jì)風(fēng)格到底是不是用戶想要的呢？當(dāng)真實(shí)世界與互聯(lián)網(wǎng)世界完全割裂的時(shí)候，未來(lái)的界面設(shè)計(jì)，到底是不是一個(gè)與真實(shí)世界沒(méi)有交集 的平行性視覺(jué)體系？

2.過(guò)于嚴(yán)格的網(wǎng)格式排布對(duì)設(shè)計(jì)者造成很大的局限。首先不能否認(rèn)的是網(wǎng)格設(shè)計(jì)具有良好的指導(dǎo)性，會(huì)使界面更加整齊劃一。但使用網(wǎng)格并不意味著枯 燥的設(shè)計(jì)，一個(gè)好的設(shè)計(jì)師不僅能夠合理地應(yīng)用基于網(wǎng)格布局的規(guī)則，而且還能適時(shí)地打破這些規(guī)則。但是當(dāng)規(guī)則不能破的時(shí)候，如何展開(kāi)一個(gè)有創(chuàng)造性的設(shè)計(jì)？

3.增加認(rèn)知和學(xué)習(xí)成本。當(dāng)信息以他本來(lái)的面目完整地展示到我們的面前的時(shí)候，我們?nèi)绾慰焖賲^(qū)分這些信息？目前metro界面使用了色塊來(lái)快速定位相應(yīng)的模塊。但是如果是色盲患者呢？他們可以看到的，或者是以下這張難以辨認(rèn)的圖。

正所謂窮則變，變則通。從metro的起源瑞士國(guó)際主義平面設(shè)計(jì)中，我們已經(jīng)看到了危機(jī)與機(jī)遇。如何化解相應(yīng)metro風(fēng)格下的界面設(shè)計(jì)呢？其 實(shí)在諸如無(wú)印良品與宜家的相關(guān)設(shè)計(jì)里面，已經(jīng)可以找到相關(guān)的答案。在去繁求簡(jiǎn)，信息明了的基礎(chǔ)上，開(kāi)放布局，適當(dāng)增加質(zhì)感，添加人性化的味道。如下圖，同 樣是信息的直接羅列，但是使用圖片帶來(lái)自然質(zhì)感。板式靈活，在規(guī)矩中與簡(jiǎn)潔中帶來(lái)不一樣的味道。

目前為止metro風(fēng)格的延續(xù)與發(fā)展還是一個(gè)不明朗的疑問(wèn)號(hào)？他或許是現(xiàn)今ui趨勢(shì)的一個(gè)頗為強(qiáng)大的分支。但是它會(huì)像科幻電影中未來(lái)的界面，到處充斥著由metro風(fēng)格演化而來(lái)的簡(jiǎn)單的線條與圖標(biāo)信息？我想還是個(gè)未知數(shù)。

【讀者觀點(diǎn)】@盧X克 極簡(jiǎn)化只是 Metro 的一個(gè)方面而不是全部，用這一個(gè)方面判斷 Metro 的未來(lái)并不全面。

首先，從本文談到界面的極簡(jiǎn)化來(lái)說(shuō)，隨著承載界面的“容器”不斷演進(jìn)，大大小小的屏幕在未來(lái)可能會(huì)隱去，而地板、墻、玻璃、鏡子等日常語(yǔ)境中的平面可能更多替代屏幕成為新的“容器”。那時(shí)，擬物化的設(shè)計(jì)反而顯得突兀——例如，從穿衣鏡上召來(lái)一個(gè)擬物的計(jì)算器？而極簡(jiǎn)化的界面可以更無(wú)形地融入環(huán)境，并且通過(guò)它的非現(xiàn)實(shí)感，讓我們將其與現(xiàn)實(shí)生活中有形有質(zhì)感的實(shí)體區(qū)分開(kāi)來(lái)，減少與實(shí)體世界的脫節(jié)和對(duì)虛擬世界的沉迷。

其次，Metro 同樣強(qiáng)調(diào)信息的表面化，相對(duì)的是目前設(shè)計(jì)哲學(xué)中的層級(jí)。這讓瀏覽者更多通過(guò)直覺(jué)和對(duì)信息本身的需求瀏覽，而非設(shè)計(jì)者預(yù)先規(guī)定的層級(jí)和邏輯。

作者：echos
原文：http://cdc.tencent.com/?p=7506

 
================微信推薦================
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：