交互設(shè)計中的扁平化設(shè)計風(fēng)格

宋振

Flat Design Style in Interactive Designs

Daily life is filled with a variety of interactive designs. When many companies still pursue traditional skeuomorphic design style， flat design style comes into being with a non-mainstream attitude， and deeply influences the traditional skeuomorphic design.

在這個交互設(shè)計快速發(fā)展的時代，我們的日常生活中充斥著各種各樣的交互設(shè)計，什么樣的設(shè)計風(fēng)格，無疑成為大眾所關(guān)注的焦點。當(dāng)眾多公司還在追求傳統(tǒng)的擬物化設(shè)計風(fēng)格的時候， 扁平化設(shè)計風(fēng)格以一種非主流的姿態(tài)應(yīng)運(yùn)而生，沖擊著傳統(tǒng)的擬物化設(shè)計，這種趨勢就好比是19世紀(jì)后期法國產(chǎn)生的印象畫派一樣，以創(chuàng)新的姿態(tài)出現(xiàn)，來反對當(dāng)時已經(jīng)陳腐的古典學(xué)院派的藝術(shù)觀念和法則。

扁平化設(shè)計的起源

首先來認(rèn)識下扁平化設(shè)計， 扁平化設(shè)計最早是由A l l a n Grinshtein在設(shè)計者的版本控制系統(tǒng)LayerVault中創(chuàng)造和推廣的。在他的博客文章“扁平化設(shè)計時”里，Allan曾提到“優(yōu)雅的界面是用最少的元素達(dá)到最佳的效果的界面”。這個理念比更多修飾、更復(fù)雜的界面更適合于當(dāng)前的界面功能。

從那時起，扁平化設(shè)計得到了快速成長。微軟是最早使用扁平化設(shè)計的公司，蘋果IOS7系統(tǒng)的推出將扁平化設(shè)計推向頂峰。扁平化設(shè)計具有幾大特點：造型簡單不添加細(xì)節(jié)效果、注重色彩、排版等。

扁平化設(shè)計發(fā)展非?？焖伲^察它的發(fā)展過程，其實和字體的發(fā)展過程是一致的，都是經(jīng)歷了一個擬物化到抽象化的過程， 從最開始的象形文字到現(xiàn)在的簡體字，字體變得更加抽象和簡潔，識別性也變得更清晰。這也是扁平化發(fā)展的一個過程，在最開始人們接觸擬物化設(shè)計的時候，可能被其對每個圖標(biāo)的細(xì)致表現(xiàn)所吸引，但是經(jīng)過長時間的使用有些細(xì)節(jié)會令人產(chǎn)生疲憊，而這時候扁平化的產(chǎn)生，無疑是對交互設(shè)計的一次革命。

扁平化設(shè)計發(fā)展的必然性分析

在我們討論扁平化設(shè)計發(fā)展必然性的時候不得不提一個視覺理論，就是差別閾限（J.N.D just noticeable diffrernce）。人的神經(jīng)系統(tǒng)對于任何刺激都能做出反應(yīng)，但人明確感覺到刺激， 不僅如傳統(tǒng)理解的那樣，需要超出感覺閾限；并且通常刺激只有超出一般規(guī)律的變化，才能作為外界信號被接受，這種兩個相似刺激之間被覺察到的最小差別閾限，就叫做差別閾限。這里列舉一個例子來說明，圖表1中左邊的圖形內(nèi)的白色明顯比右邊圖形被的白色要深的多，其實在理論上兩個白色的色值是一樣的，只是旁邊不同色度的黑和白色形成對比，給人的視覺刺激是不一樣的，通過神經(jīng)反射到人大腦中的反應(yīng)也是不一樣的。所以當(dāng)額外刺激的強(qiáng)度不能引起個體的感覺，則是感覺上的適應(yīng)，也就是通常說的“久聞不覺其臭”在這種情況下只有再次超出差別閾限的刺激時才能引起人的注意。圖表（1）

通過以上的理論可以了解到平時在用長時間的擬物化設(shè)計時，擬物化本身就是對實物進(jìn)行概念化的模擬，這里的模擬是以寫實為主，所以擬物化的設(shè)計在人們慢慢習(xí)慣的時候，它本身和背景之間給人的差別閾限越來越小，對人視覺上的刺激也越來越小，而它每個圖表上的細(xì)節(jié)也在減小這個差別閾限。所以，扁平化設(shè)計的出現(xiàn)，其實是在原來擬物化設(shè)計上進(jìn)行的一次更深層次的提煉，刪減掉一些影響視覺的東西，加大對比度、大量使用色彩、更加注重設(shè)計的排版和字體的使用，使其能夠更強(qiáng)烈地刺激人的感官，加大圖標(biāo)的識別度，使操作變得更加簡單，交互界面變得更加美觀。

扁平化設(shè)計造型分析

在扁平化出現(xiàn)的起初，受到了很多的爭論，在心理學(xué)里有一個概念，“遮蔽效應(yīng)”，即強(qiáng)烈的變化會阻礙對微妙變化的知覺。心理學(xué)中以“通道”流量來解釋這一問題，即心理只有有限的資源來執(zhí)行全部信息加工，強(qiáng)烈的變化帶來了巨大的信息量，它占用了大量的信息通道，其他信息則被過濾掉了，因此人們在感受巨大變化時會忽略那些細(xì)微的變化。所以，扁平化出現(xiàn)的時候，大家都忽略了可能扁平化設(shè)計是刪減掉很多的細(xì)節(jié)，但是， 它在增加對比度的同時也加大了很多我們不易發(fā)現(xiàn)的細(xì)節(jié)。它不僅僅是一個色塊與一個色塊之間的關(guān)系，其實是圖標(biāo)更抽象化的推敲，所以在扁平化出現(xiàn)的時候，受到了大家很多的批評，當(dāng)人們接觸了更多的扁平化設(shè)計應(yīng)用之后，才慢慢地發(fā)現(xiàn)，這一變化其實是對設(shè)計的一種更精準(zhǔn)的提煉，就好比畢加索畫的牛，并不是簡單地去提煉，而是藝術(shù)更深層次的提煉，這要求設(shè)計師充分了解設(shè)計的本質(zhì)，并且表現(xiàn)出物體的美感。所以在我們慢慢接受了扁平化的同時，我們應(yīng)該更加深刻地去感受扁平化設(shè)計帶給我們的變化，這里以IOS7為例，向大家解釋扁平化帶來的變化。

圖（2）是傳統(tǒng)的擬物化日歷設(shè)計，在界面的設(shè)計上營造了復(fù)雜的裝飾效果，這種效果其實增加了人們在使用上的障礙，而圖（3）的扁平化設(shè)計中，去掉了很多裝飾，增加了主體與背景的差別，用簡單的黑白兩色使人在使用時能夠第一時間進(jìn)行閱讀，而當(dāng)天日期的紅色重要標(biāo)記提醒使人的大腦能夠第一時間對其作出反應(yīng)。在人們進(jìn)行日期查閱的時候，扁平化的設(shè)計能夠第一時間通過畫面的強(qiáng)對比對人的視覺神經(jīng)進(jìn)行刺激，將信息快捷地傳達(dá)給受眾。這樣的設(shè)計不僅提高了準(zhǔn)確性，也提高了界面的直觀性和美感。

在圖（5）的圖標(biāo)設(shè)計上，扁平化的設(shè)計給人的感覺更加的簡潔，有的人會說，擬物化的設(shè)計看起來更有空間感，在使用時能夠更有動感。其實，擬物化設(shè)計上的立體感不僅僅增加的是空間感，同時增加的是人對其使用時的計算量，而扁平化的設(shè)計它是與背景存在于一個空間之內(nèi)，在視覺上我們相對于之前的擬物化設(shè)計，扁平化設(shè)計所塑造的空間更加簡潔，使我們在使用時減小視覺上的空間感。

而扁平化設(shè)計會不會增加使用上的難度，每個圖標(biāo)都扁平地擺放在桌面上，會不會使我們會混淆有些圖標(biāo)？其實不然，例如IOS7在圖標(biāo)的設(shè)計上雖然減少了很多的細(xì)節(jié)，但是在圖標(biāo)的表現(xiàn)力上則是加強(qiáng)了對比，使圖標(biāo)表達(dá)得更加準(zhǔn)確，而圖標(biāo)的簡化是否會帶來使用上的混淆？在這里我們大概可以用諾曼在《設(shè)計心理學(xué)》中提到的“心理模型”來解釋。諾曼認(rèn)為，當(dāng)物品的設(shè)計與大腦中的“模型”一致時即形成“自然匹配”，人們或者能下意識地、自然地作出反應(yīng)，明白如何使用，從而減少大腦信息加工資源，提高效率。扁平化設(shè)計圖標(biāo)在顏色上提高了純度，增加顏色的分類和圖形與圖形之間的對比度，提高了圖標(biāo)的識別度，在進(jìn)行使用時能更好地區(qū)分圖標(biāo)，使我們能夠更好地達(dá)到匹配效果，完成使用的過程，所以說，雖然扁平化設(shè)計在許多細(xì)節(jié)上去掉了裝飾的效果，但是基于人機(jī)工程學(xué)考慮是增加了人們使用的便利性，使用戶界面更加高效。在美觀上，扁平化設(shè)計也更加有現(xiàn)代感。

扁平化設(shè)計色彩分析

我們在討論扁平化設(shè)計的同時，其實也可以換種說法，那就是色彩化設(shè)計，擬物化的設(shè)計大多采用的色彩在2-4種顏色之間，而扁平化設(shè)計的色彩運(yùn)用達(dá)到了6-8種之多，所以，我們在看扁平化設(shè)計時，色彩的運(yùn)用無疑是設(shè)計最重要的環(huán)節(jié)。雖然色彩上比原來多了很多，但是為什么畫面會比原來更清晰？原來扁平化設(shè)計有些圖標(biāo)的設(shè)計上去掉了擬物化的大部分特征，更多是去用色彩來表現(xiàn)，用色彩來刺激人的視覺達(dá)到更好的功能性。而在很多界面，扁平化更多地是根據(jù)表現(xiàn)的對象來提煉它的色彩， 在這里可以打一個比方，如果之前的擬物化設(shè)計是對現(xiàn)實中進(jìn)行真實的模擬，來實現(xiàn)在交互中達(dá)到一個和現(xiàn)實相似的環(huán)境，扁平化設(shè)計就是設(shè)計者對實物進(jìn)行色彩提煉，使用戶感受到一個不同于現(xiàn)實的環(huán)境，這個環(huán)境更加抽象，色彩更加豐富。

扁平化設(shè)計在互補(bǔ)色的運(yùn)用上也更加大膽，互補(bǔ)色的巧妙運(yùn)用就成為了強(qiáng)調(diào)使用重點的一個重要手段，例如以蘋果IOS7系統(tǒng)為例，在蘋果IOS7系統(tǒng)中可以看到蘋果公司在去掉了擬物化細(xì)節(jié)的同時，同時提升了重要圖標(biāo)的綠色純度，使用者在使用電話的時，最重要的幾個功能就是手機(jī)的短信和電話功能，所以重要的功能鍵上蘋果均采用了綠色，而在重要提醒上則是采用了紅色的通知，強(qiáng)烈的色彩對比度使人能在第一時間發(fā)現(xiàn)信息，進(jìn)行回復(fù)。同時，扁平化設(shè)計的色彩對比相對于擬物化的設(shè)計，少了更多的細(xì)節(jié)，在減少細(xì)節(jié)和顏色提純的同時也是在加大差別閾限， 增加了圖標(biāo)對人視覺上的刺激，使相互設(shè)計變得更加及時與高效。所以，綜上所述，扁平化設(shè)計雖然在色彩上的運(yùn)用十分豐富，但是在運(yùn)用了強(qiáng)化對比度、減少細(xì)節(jié)等手段，畫面不僅僅是增加了色彩，也使畫面更加地清晰，設(shè)計感更強(qiáng)。

扁平化設(shè)計排版分析

扁平化設(shè)計排版一出現(xiàn)就給人以耳目一新的感覺，這種設(shè)計風(fēng)格到底是什么時候出現(xiàn)的？它其實并不是憑空出現(xiàn)的，仔細(xì)觀察扁平化設(shè)計風(fēng)格，它和瑞士平面設(shè)計十分相似。第二次世界大戰(zhàn)結(jié)束后，平面設(shè)計經(jīng)歷了一段時間不長的停滯。到20世紀(jì)50年代期間，一種嶄新的平面設(shè)計風(fēng)格終于在聯(lián)邦德國與瑞士形成，被稱為“瑞士平面設(shè)計風(fēng)格”（Swiss Design）。由于這種風(fēng)格簡單明確，傳達(dá)功能準(zhǔn)確，因此很快流行全世界，成為二戰(zhàn)后影響最大、國際最流行的設(shè)計風(fēng)格，因此又被稱為“國際主義平面設(shè)計風(fēng)格”（The International Typographic Style）。同樣風(fēng)格明確簡單，傳達(dá)功能準(zhǔn)確，這也是扁平化最大的特點，所以說扁平化設(shè)計也是國際主義平面設(shè)計風(fēng)格的延續(xù)。

這里以蘋果的I O S 7為例分析下扁平化設(shè)計在排版上的變化。在排版上，字體變得更加地纖細(xì)，更多的地方留有空白，這里的空白并不是表面意義上的空白，而是在強(qiáng)調(diào)字體之外形成的另外一個空間，這種空間是一種力量，就像原研哉在《白》中寫到空不僅指形式的簡單、邏輯的復(fù)雜等?？掌鋵嵦峁┝艘粋€讓我們的想象力自由發(fā)揮的空間，大大豐富了我們的感知力以及相互理解力。因此扁平化設(shè)計中的空是一種力量，它是一種“機(jī)前” 狀態(tài)，代表著可以令人充分想象的力量，我們在看到空的狀態(tài)時，會刺激我們的想象力和創(chuàng)造力，去充分想象填充它的內(nèi)容， 而這種想象力和創(chuàng)造力，也正是空的價值所在，它是一種若有若無的狀態(tài)，這也使扁平化設(shè)計中的空成為一種有力能量，給人一種此處無聲勝有聲的力量。而在塑造這種空的同時，也加大了交互界面色彩的對比，使畫面看起來風(fēng)格更加統(tǒng)一和簡潔。所以在扁平化設(shè)計中，可以看到大量的留白，這種留白通過設(shè)計研究的提煉給人充分的設(shè)計感與想象的空間，而采用纖細(xì)的字體也增加了這種空的感覺，相比之前擬物化的設(shè)計，扁平化設(shè)計更加精準(zhǔn)與細(xì)致，而擬物化過多的細(xì)節(jié)占用了大量的空間，在使用時，首先會影響用戶的視覺感受，其次會降低用戶在進(jìn)行交互時候的準(zhǔn)確率，增加使用障礙，所以扁平化設(shè)計在排版上是更深層次的再設(shè)計，其目的是使交互界面更加地便利。

當(dāng)大家還在討論扁平化設(shè)計利弊的時候，條理清晰、色彩豐富、風(fēng)格統(tǒng)一的扁平化設(shè)計已經(jīng)成為了一種潮流，在科技快速發(fā)展的今天，交互設(shè)計已經(jīng)慢慢成為了主導(dǎo)視覺的最大載體，而扁平化設(shè)計也在引領(lǐng)著使用者的視覺審美。扁平化設(shè)計的出現(xiàn)， 很多人都認(rèn)為是降低了設(shè)計的門檻，使每個人都能成為設(shè)計師， 其實這是一種很膚淺的理解，扁平化在表面上可能是降低了一些設(shè)計細(xì)節(jié)，但是這種刪減是一種藝術(shù)性的刪減，并不是簡單的軟件操作就能做到，相比添加，有的時候刪減是一件更難的事情。所以，在接觸扁平化設(shè)計時也應(yīng)該更理性地去分析它的優(yōu)缺點， 設(shè)計相對于藝術(shù)來說，是視覺與功能雙向存在的，所以在交互設(shè)計上無論視覺還是功能都是不可或缺的，只有掌握好這兩者的平衡點才能更好地掌握設(shè)計，扁平化設(shè)計可能并沒有最完美地分配好這兩點，但是可以肯定地說，相對于擬物化的設(shè)計，扁平化設(shè)計確實是一次極大的進(jìn)步。

參考文獻(xiàn)：

[1]《設(shè)計心理學(xué)》柳沙著.[M].上海人民美術(shù)出版社.2012-03-1.[ISBN： 9787532277964].

[2]《設(shè)計心理學(xué)》柳沙著.[M].上海人民美術(shù)出版社.2012-03-1.[ISBN： 9787532277964].

[3]《設(shè)計心理學(xué)》（美）諾曼著.[M].中信出版社.2010-03-1.[ISBN： 9787508619156].P18頁

[4]《白》（日）原研哉著.[M].廣西師范大學(xué)出版社.2012-03-1.[ISBN： 9787549512775].P58頁