交互設(shè)計(jì)中的扁平化設(shè)計(jì)風(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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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