藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計

來源：http://www.xiusheji.net/article-851-1.html

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

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

  <br />

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



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



一點設計史



Bauhaus 設計學校，現代主義設計的源頭。



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



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



下列三個有名的設計信念其實就出自包浩斯：



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



忠于質材(Truth to materials)：讓每種材質做它自己。塑膠不可偽裝成木頭、皮革等；鍍金、浮雕、毛茸茸壁紙也在禁止之列——因為每種形式的外表有其特定的功能，是無法變造的。同樣也不可以把現代建筑蓋成古代神廟，因為每個時空有不同的脈絡。



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



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

  <br />

扁平化設計的視覺安排經濟而切要，可以觀察到包浩斯信念的痕跡。



這種信念在 1960 年代達到高峰，變質成為一種教條。過于嚴肅、呆板，所以造成另一批新興的設計師反擊，用不講求實用的、即興的、裝飾的、擬真的設計反諷，進而取代先前的現代主義設計。



使
用者圖形接口 (GUI, Graphic User Interface)是一個例子。從 GUI
在八零年代出現開始，擬真設計都占主流，例如一直被使用到現在的桌面概念。這某種程度是對包浩斯概念的無視：形要隨功能，但擬真設計常常是裝飾多于功能：
書報攤的木頭材質紋路不符合電子螢幕的脈絡，更沒有什么“少即是多”，因為就算不用木頭材質，它一樣可以運作，而功能上的多余就算不上美。

  <br />

iOS 書報攤的木質擬真設計，違背了某些包浩斯信念。



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



網格系統(tǒng)與扁平設計



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



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

  <br />

原圖攝于www.swissted.com，一個很理想的國際風格參考網站。該字體是Akizdenz Grotesk



我
們會建議需要進行扁平設計的各位可以多多參考此一時期的海報，因為它們正是當今扁平設計的鼻祖。而要了解瑞士風格，則必須了解網格系統(tǒng)的使用。如同前述，
經濟的視覺效益來自于比例、輪廓等基本線條的直接展現，而這類美感是透過理性的網格使用達成的。網格系統(tǒng)可以更方便讓我們看出并安排版面上元素之間的關
系。

分析構圖后可以發(fā)現，視覺的質感是由留白的空間決定的。從紅色框框的地方就可以看出來，空白的地方決定視覺整齊或者零亂，但空白是怎么決定的呢？這取決于
怎么安排元素。把元素適當組合，可以讓版面看來更整齊，例如B；但若讓元素散布在版面各處，把空白割裂過多，就會看起來零亂，例如A。



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

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

在形狀的使用上，平面上也沒有任何幾何圖形是多余的，就算是一條直線也可能有導引視覺的功用，如下面這張與包浩斯同時期、同理念的海報設計：

  <br />

Jan Tschichold 的新文字設計(Die Neue Typographie)，其幾何元素有助于視線的流動。



另外，色彩也是國際風格關心的話題。有個著名的視覺實驗如下：兩個相同大小的正方形，在視覺上卻似乎白色方形要比黑色方形為大。

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

字體與扁平設計



字
的安排是由網格系統(tǒng)處理的，但字本身也對視覺印象與使用經驗影響非常大，不可不注意。與瑞士風格強烈相關的，通常是幾個 grotesque
無襯線字體。如同大家所熟知的 Helvetica (通常使用全部大寫的 bold)，幾乎與瑞士風格畫上等號。iOS
系統(tǒng)的默認英文字型Helvetica Neue 家族內有一套極細體(ultra light)，也常見于近年的扁平風格。使用了Helvetica
Neue ultra light 當作首頁大標題，就有說不出的時尚感。

  <br />

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



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



但是目前的扁平風格使用的字體就更多元了，例如貫徹扁平美學的微軟 metro 接口就使用了Segoe UI；而目前也常常看到有app或網站使用像Zite app內文，這種圓圓的，帶有人文手寫直感的無襯線字體，雖然不一定好讀，但視覺上相當可愛。

  <br />

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





后記：中文線條過于復雜所以不適合扁平設計？



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