藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：http://www.xiusheji.net/article-851-1.html

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

最近扁平化設(shè)計(jì)(flat
design)變成相當(dāng)熱門(mén)的 UI
設(shè)計(jì)概念。不僅許多知名應(yīng)用與網(wǎng)站開(kāi)始爭(zhēng)相采用，就連執(zhí)著擬真設(shè)計(jì)(Skeuomorphism)的水果公司也謠傳即將在下一代作業(yè)系統(tǒng)采用扁平式設(shè)計(jì)。
扁平設(shè)計(jì)到底是什么，為什么它這么有魅力？在本篇文章里，justfont blog 要從字型學(xué)的角度切入觀察扁平設(shè)計(jì)的緣由與原理。

  <br />

不過(guò)首先，注意一下名詞：扁平設(shè)計(jì)(flat design)此譯名并非廣為接受的翻譯，它同時(shí)也可以被稱為最小化設(shè)計(jì)(minimal design)或誠(chéng)實(shí)的設(shè)計(jì)(honest design)，但概念都是講究直接、不假雕飾的美學(xué)風(fēng)格。



前
一陣子 inside 編譯了Flat Design: Can You Benefit from the Trend? 這篇文章，里面對(duì) flat
design 有簡(jiǎn)單明確的定義：“零 3D
屬性的設(shè)計(jì)”，放棄浮雕、斜角、漸層等花俏的，而采用色彩深淺標(biāo)明層次，用線條比例架構(gòu)美感，并直接以字體表達(dá)意念、引發(fā)視覺(jué)聯(lián)想。然而，這類概念在
設(shè)計(jì)史上并不是新的。扁平化設(shè)計(jì)其實(shí)承繼了一些非常經(jīng)典的設(shè)計(jì)傳統(tǒng)：包浩斯(Bauhaus)現(xiàn)代主義，與受其直接影響的國(guó)際字體風(fēng)格
(International Typographic Style)。



一點(diǎn)設(shè)計(jì)史



Bauhaus 設(shè)計(jì)學(xué)校，現(xiàn)代主義設(shè)計(jì)的源頭。



二十世紀(jì)的設(shè)計(jì)師強(qiáng)
烈認(rèn)為自己身處嶄新的時(shí)代。工業(yè)革命的成熟已經(jīng)把人們帶入機(jī)械的世紀(jì)，但這種科技的成熟卻帶來(lái)一次大戰(zhàn)的毀滅。這令 1920
年代的思想家們深覺(jué)，他們需要新的信仰與行動(dòng)準(zhǔn)則，來(lái)為人類創(chuàng)造新的生命。他們強(qiáng)烈認(rèn)為設(shè)計(jì)應(yīng)該要做大，應(yīng)該要實(shí)用，并能改善人類生活。這段期間產(chǎn)生的，
想要與前代斷然二分的思考模式，正好是包浩斯現(xiàn)代主義。



包浩斯其實(shí)是一座設(shè)計(jì)學(xué)校，在一次大戰(zhàn)與二戰(zhàn)之間的德國(guó)創(chuàng)立，意思是“建筑之家”。它募集了當(dāng)時(shí)最有才華的設(shè)計(jì)師與學(xué)生在一起學(xué)習(xí)并創(chuàng)作。其中包含 Herbert Bayer，奠定現(xiàn)代主義平面設(shè)計(jì)風(fēng)格的大師之一。他們要以機(jī)械時(shí)代的樸素、實(shí)用風(fēng)格，取代維多麗亞(Victorian)時(shí)期的綴飾，而強(qiáng)調(diào)經(jīng)濟(jì)、簡(jiǎn)約、務(wù)實(shí)而有意義的秩序。



下列三個(gè)有名的設(shè)計(jì)信念其實(shí)就出自包浩斯：



形隨功能(form follows function)：最出色的設(shè)計(jì)必須一目了然，要干凈、誠(chéng)實(shí)、直接的展露自己的功能。



忠于質(zhì)材(Truth to materials)：讓每種材質(zhì)做它自己。塑膠不可偽裝成木頭、皮革等；鍍金、浮雕、毛茸茸壁紙也在禁止之列——因?yàn)槊糠N形式的外表有其特定的功能，是無(wú)法變?cè)斓?。同樣也不可以把現(xiàn)代建筑蓋成古代神廟，因?yàn)槊總€(gè)時(shí)空有不同的脈絡(luò)。



少
即是多(Less is
More)：承上兩者，這個(gè)流派相當(dāng)奉行“經(jīng)濟(jì)”的設(shè)計(jì)原則，并且把“經(jīng)濟(jì)”提升到美學(xué)的高度上思考——好的東西應(yīng)該把它運(yùn)作的方式展現(xiàn)出來(lái)，剝除一切裝
飾、象征與姿態(tài)，留下紋理、色彩、重量、比例、輪廓等等，讓視覺(jué)“經(jīng)濟(jì)”了，一目了然，井然有序。



不用太仔細(xì)思考這上面三個(gè)信念，就會(huì)發(fā)現(xiàn)這根本就是扁平化設(shè)計(jì)的指導(dǎo)原則：極簡(jiǎn)，少即是多，形隨功能，而且不能有莫名的材質(zhì)、陰影，僅能用單純的數(shù)位色塊、線條呈現(xiàn)。

  <br />

扁平化設(shè)計(jì)的視覺(jué)安排經(jīng)濟(jì)而切要，可以觀察到包浩斯信念的痕跡。



這種信念在 1960 年代達(dá)到高峰，變質(zhì)成為一種教條。過(guò)于嚴(yán)肅、呆板，所以造成另一批新興的設(shè)計(jì)師反擊，用不講求實(shí)用的、即興的、裝飾的、擬真的設(shè)計(jì)反諷，進(jìn)而取代先前的現(xiàn)代主義設(shè)計(jì)。



使
用者圖形接口 (GUI, Graphic User Interface)是一個(gè)例子。從 GUI
在八零年代出現(xiàn)開(kāi)始，擬真設(shè)計(jì)都占主流，例如一直被使用到現(xiàn)在的桌面概念。這某種程度是對(duì)包浩斯概念的無(wú)視：形要隨功能，但擬真設(shè)計(jì)常常是裝飾多于功能：
書(shū)報(bào)攤的木頭材質(zhì)紋路不符合電子螢?zāi)坏拿}絡(luò)，更沒(méi)有什么“少即是多”，因?yàn)榫退悴挥媚绢^材質(zhì)，它一樣可以運(yùn)作，而功能上的多余就算不上美。

  <br />

iOS 書(shū)報(bào)攤的木質(zhì)擬真設(shè)計(jì)，違背了某些包浩斯信念。



而在擬真設(shè)計(jì)流行近半世紀(jì)后，扁平化設(shè)計(jì)又大行其道，還魂重生。人們又開(kāi)始執(zhí)著于這種魅力極高的極簡(jiǎn)設(shè)計(jì)。



網(wǎng)格系統(tǒng)與扁平設(shè)計(jì)



扁平設(shè)計(jì)的魅力在于極簡(jiǎn)，極簡(jiǎn)卻不能意味簡(jiǎn)陋；相反的它必須展現(xiàn)極高的功能性。平面設(shè)計(jì)極簡(jiǎn)，而又將功能性發(fā)揮，不會(huì)妨礙溝通，很大一部分有賴于字的編排。文字是最直接的表“意”媒介——不只有意義，還有意象與意念。



以
瑞士為中心的瑞士風(fēng)格(swiss style)發(fā)揚(yáng)了這類設(shè)計(jì)。瑞士風(fēng)格又稱國(guó)際字體風(fēng)格(International Typographic
Style)，理性、中性，讓觀者不需俱備特定文化知識(shí)與背景，也能掌握所要傳達(dá)的意念。例如下面這個(gè)網(wǎng)站展示的各個(gè)海報(bào)設(shè)計(jì)，就充滿了國(guó)際字體風(fēng)格的特
色。

  <br />

原圖攝于www.swissted.com，一個(gè)很理想的國(guó)際風(fēng)格參考網(wǎng)站。該字體是Akizdenz Grotesk



我
們會(huì)建議需要進(jìn)行扁平設(shè)計(jì)的各位可以多多參考此一時(shí)期的海報(bào)，因?yàn)樗鼈冋钱?dāng)今扁平設(shè)計(jì)的鼻祖。而要了解瑞士風(fēng)格，則必須了解網(wǎng)格系統(tǒng)的使用。如同前述，
經(jīng)濟(jì)的視覺(jué)效益來(lái)自于比例、輪廓等基本線條的直接展現(xiàn)，而這類美感是透過(guò)理性的網(wǎng)格使用達(dá)成的。網(wǎng)格系統(tǒng)可以更方便讓我們看出并安排版面上元素之間的關(guān)
系。

分析構(gòu)圖后可以發(fā)現(xiàn)，視覺(jué)的質(zhì)感是由留白的空間決定的。從紅色框框的地方就可以看出來(lái)，空白的地方?jīng)Q定視覺(jué)整齊或者零亂，但空白是怎么決定的呢？這取決于
怎么安排元素。把元素適當(dāng)組合，可以讓版面看來(lái)更整齊，例如B；但若讓元素散布在版面各處，把空白割裂過(guò)多，就會(huì)看起來(lái)零亂，例如A。



而
圓形在網(wǎng)格系統(tǒng)里最為自由，可以不受格線的限制自由移動(dòng)，增加、補(bǔ)強(qiáng)視覺(jué)效果。這類幾何圖形在網(wǎng)格系統(tǒng)被大量使用。其實(shí)包浩斯的視覺(jué)設(shè)計(jì)師們注意到，人眼
對(duì)這種純粹的歐幾里德式形狀很感興趣。事實(shí)上，歐美的設(shè)計(jì)先驅(qū)就在觀察幼稚園時(shí)就發(fā)現(xiàn)了這個(gè)現(xiàn)象：小朋友的畫(huà)中充滿了直線與純粹的形狀，是人類完型視覺(jué)最
純粹的表征。幾何圖形看來(lái)是一種天生的，最直接的視覺(jué)語(yǔ)言。

  三歲孩童的繪圖，使用簡(jiǎn)單的原型與線條表達(dá)。原圖出自Wikimedia Commons。<br />

在形狀的使用上，平面上也沒(méi)有任何幾何圖形是多余的，就算是一條直線也可能有導(dǎo)引視覺(jué)的功用，如下面這張與包浩斯同時(shí)期、同理念的海報(bào)設(shè)計(jì)：

  <br />

Jan Tschichold 的新文字設(shè)計(jì)(Die Neue Typographie)，其幾何元素有助于視線的流動(dòng)。



另外，色彩也是國(guó)際風(fēng)格關(guān)心的話題。有個(gè)著名的視覺(jué)實(shí)驗(yàn)如下：兩個(gè)相同大小的正方形，在視覺(jué)上卻似乎白色方形要比黑色方形為大。

  這個(gè)實(shí)驗(yàn)證明人腦對(duì)形狀與顏色的反應(yīng)是有模式可循的：淺色好像會(huì)前移，深色會(huì)后退，而某些顏色組合比其他組合更令人愉悅；在設(shè)計(jì)扁平接口時(shí)，也要相當(dāng)留意色彩的配置給使用者的視覺(jué)聯(lián)想與情緒，畢竟扁平風(fēng)格很大一部分借由色彩使用區(qū)分、標(biāo)明版面的重心。<br />

字體與扁平設(shè)計(jì)



字
的安排是由網(wǎng)格系統(tǒng)處理的，但字本身也對(duì)視覺(jué)印象與使用經(jīng)驗(yàn)影響非常大，不可不注意。與瑞士風(fēng)格強(qiáng)烈相關(guān)的，通常是幾個(gè) grotesque
無(wú)襯線字體。如同大家所熟知的 Helvetica (通常使用全部大寫(xiě)的 bold)，幾乎與瑞士風(fēng)格畫(huà)上等號(hào)。iOS
系統(tǒng)的默認(rèn)英文字型Helvetica Neue 家族內(nèi)有一套極細(xì)體(ultra light)，也常見(jiàn)于近年的扁平風(fēng)格。使用了Helvetica
Neue ultra light 當(dāng)作首頁(yè)大標(biāo)題，就有說(shuō)不出的時(shí)尚感。

  <br />

很明顯使用了helvetica neue的接口。原圖攝于justfont pinterest



但
衛(wèi)道的設(shè)計(jì)師會(huì)更支持 Helvetica 的祖先：Akizdenz
Grotesk，一個(gè)最早發(fā)布于1898年的無(wú)襯線字體，更具有一種難以表達(dá)的帥味。另一個(gè)選項(xiàng)就是Adrian
Frutiger所設(shè)計(jì)的Univers，家族內(nèi)總有50多種粗細(xì)斜、延展(extended)或壓縮(condensed)字型。



但是目前的扁平風(fēng)格使用的字體就更多元了，例如貫徹扁平美學(xué)的微軟 metro 接口就使用了Segoe UI；而目前也常?？吹接衋pp或網(wǎng)站使用像Zite app內(nèi)文，這種圓圓的，帶有人文手寫(xiě)直感的無(wú)襯線字體，雖然不一定好讀，但視覺(jué)上相當(dāng)可愛(ài)。

  <br />

總
而言之用字沒(méi)有標(biāo)準(zhǔn)答案。在扁平設(shè)計(jì)上使用字的原則跟傳統(tǒng)版面設(shè)計(jì)的要求差異不大。除了考量媒材的適用性(要能適合電子螢?zāi)伙@示)、字的機(jī)能之外，再來(lái)就
是視覺(jué)聯(lián)想了。在介紹Times New
Romans時(shí)，我們提供了一些挑選字型的思考方式，大家不妨參考。但這并沒(méi)有正確答案，還是要靠不斷嘗試，才能試出最適合的字體。





后記：中文線條過(guò)于復(fù)雜所以不適合扁平設(shè)計(jì)？



扁
平視覺(jué)極簡(jiǎn)的需求上相當(dāng)突兀，就這一點(diǎn)我們認(rèn)為，可能是整個(gè)中文接口設(shè)計(jì)上，還沒(méi)有發(fā)展出應(yīng)對(duì)扁平設(shè)計(jì)最好的安排；否則就中文海報(bào)而言，實(shí)在有太多非常出
色的極簡(jiǎn)設(shè)計(jì)。理論上，合理的空間布局與黑白平衡造就美觀的版面，而中文字本來(lái)就很講究此類平衡，但其構(gòu)成較像一幅畫(huà)，而非拉丁文的線條，所以在設(shè)計(jì)中文
字，還有使用中文字上，都要特別小心。我們不是不好看，只是還沒(méi)有實(shí)驗(yàn)出最適合的設(shè)計(jì)而已。