并不是扁平化設(shè)計(jì)降低了效率,而是不好的設(shè)計(jì)降低了效率

2017年初,咨詢公司Nielsen Norman做了一項(xiàng)調(diào)研。 他們找來(lái)了71名用戶,分別跟蹤他們?cè)跒g覽9組網(wǎng)站時(shí)的眼球運(yùn)動(dòng),并將用戶們花在內(nèi)容上的時(shí)間記錄下來(lái)。被作為“對(duì)照組”的網(wǎng)站(非“扁平化設(shè)計(jì)”)上,按鈕擁有陰影、浮雕的效果,超鏈接則被突顯為加粗的藍(lán)色字體。而實(shí)驗(yàn)組(“扁平化設(shè)計(jì)”)的按鈕和超鏈接們的視覺(jué)元素則被弱化了。

非“扁平化設(shè)計(jì)”
“扁平化設(shè)計(jì)”

當(dāng)瀏覽那些被弱化視覺(jué)元素的網(wǎng)站時(shí),平均每位參與者會(huì)多花22%的時(shí)間在網(wǎng)頁(yè)內(nèi)容上。不像以往的用戶粘度實(shí)驗(yàn),Nielsen Norman沒(méi)有把用戶多花的時(shí)間算作網(wǎng)站用戶的主動(dòng)停留時(shí)間,而是將它們解釋為“用戶在瀏覽文字內(nèi)容時(shí)的不確定性”——這些參與者花費(fèi)了更多時(shí)間用來(lái)定位他們希望看到的元素。

基于上述調(diào)研,咨詢公司Nielsen Norman發(fā)布了一篇研究報(bào)告,指出:

扁平化設(shè)計(jì)會(huì)使用戶導(dǎo)航的效率降低22%。因此扁平化設(shè)計(jì)(Flat Design)是一種不那么直觀的設(shè)計(jì),抹去了網(wǎng)頁(yè)按鈕與內(nèi)容之間的差別。這使得用戶將可點(diǎn)擊的元素和不可點(diǎn)擊的圖標(biāo)與文本混淆,因而影響了效率,還可能導(dǎo)致廣告商和電子商務(wù)網(wǎng)站們損失數(shù)十億美元。

雖然從扁平化設(shè)計(jì)開(kāi)始流行,關(guān)于扁平化是否真的可以優(yōu)化瀏覽效率的討論就沒(méi)有停歇過(guò),但還是第一次有公司給出量化的結(jié)論。不過(guò)老土個(gè)人并不認(rèn)可這個(gè)數(shù)字,一來(lái)Nielsen Norman使用的樣本數(shù)量還是太少了(僅有71名用戶),二來(lái)扁平化設(shè)計(jì)對(duì)使用者的背景(知識(shí))的確有要求。如果使用者具備相關(guān)背景(知識(shí)),則扁平化可以有效優(yōu)化操作效率;反正的確是下降的。就比如下圖。

老土的iPhone首屏

在上圖中,App Store是一個(gè)典型例子。如果從舊版本的iOS過(guò)來(lái)的人,是可以更加高效的找到App Store的,但是沒(méi)有相關(guān)背景(知識(shí))的人是很難想到這么三根筷子就是App Store了。同樣的情況還有“照片”。而老土個(gè)人認(rèn)為“輕芒閱讀”根本就是反面典型。如果說(shuō),蘋(píng)果公司有底氣“教育用戶”,讓用戶主動(dòng)記得其圖標(biāo)的樣式,那么“輕芒閱讀”弄了這么一個(gè)讓人不知所云的圖標(biāo)就讓人很難理解了。這種不知所云的圖標(biāo),還不如喜馬拉雅那種偷懶的一個(gè)字的圖標(biāo)的效果好!

在知乎上有一個(gè)討論非常熱烈:

簡(jiǎn)約化/扁平化設(shè)計(jì)浪潮下,設(shè)計(jì)師的工作會(huì)變得越來(lái)越簡(jiǎn)單嗎?(https://www.zhihu.com/question/26478091

總體來(lái)說(shuō),上面討論的核心觀點(diǎn)是“不會(huì),也許在制作上的門(mén)檻變低了,但在設(shè)計(jì)上的門(mén)檻反而變高了”。因此老土認(rèn)為Nielsen Norman發(fā)現(xiàn)的問(wèn)題不應(yīng)該被算作是“扁平化設(shè)計(jì)”的問(wèn)題,而是“設(shè)計(jì)”的問(wèn)題!“扁平化”可以被認(rèn)為一種設(shè)計(jì)風(fēng)格,指摘一個(gè)風(fēng)格的優(yōu)劣意義不大,關(guān)鍵還是看設(shè)計(jì)者的水準(zhǔn)!

下面老土要摘錄的帖子也是從Nielsen Norman的調(diào)研和報(bào)告開(kāi)始,其主要內(nèi)容是對(duì)扁平化設(shè)計(jì)的推廣過(guò)程的回顧,老土覺(jué)得不錯(cuò),將其中對(duì)扁平化設(shè)計(jì)的推廣過(guò)程的回顧轉(zhuǎn)載過(guò)來(lái)。

扁平化設(shè)計(jì)成主流,它真的會(huì)浪費(fèi)用戶時(shí)間嗎?(http://www.cnbeta.com/articles/soft/656305.htm


扁平化是如何慢慢成為主流的

設(shè)計(jì)師們對(duì)扁平化的解釋不一,常常是從“它不是什么”說(shuō)開(kāi)去的。它在擬物化(skeuomorphism)盛行的時(shí)候橫空出世,大膽剝離了三維表現(xiàn)形式的沉重設(shè)計(jì)風(fēng)格,只留下沒(méi)有紋理、沒(méi)有質(zhì)感效果、沒(méi)有陰影的平面元素。但發(fā)展到現(xiàn)在,扁平化似乎又將陰影和深度重新吸納,炮制出“偽3D”的效果。

“所以我從來(lái)都不認(rèn)可‘扁平化’這個(gè)詞,我覺(jué)得來(lái)描述這種風(fēng)格更好的一個(gè)詞是平面化”,F(xiàn)rog視覺(jué)設(shè)計(jì)師Jaskni Wong對(duì)《好奇心日?qǐng)?bào)》說(shuō)。

但曾經(jīng)稱作Metro的設(shè)計(jì)語(yǔ)言被一致認(rèn)為是真正的扁平化設(shè)計(jì):它由不同顏色鮮亮的方框色塊組成,抹去了一切陰影、投影、斜角等設(shè)計(jì)元素,徹頭徹尾的平面設(shè)計(jì)風(fēng)格。

Metro設(shè)計(jì)

發(fā)布Metro的微軟,也因此成了第一個(gè)將扁平化設(shè)計(jì)風(fēng)格用于數(shù)字界面的公司。

2012年Computex Taipei大會(huì),微軟公開(kāi)宣布,Metro會(huì)被用在即將發(fā)布的Windows 8和Windows Phone上。

Metro設(shè)計(jì)被用在Windows 8和Windows Phone

那時(shí),蘋(píng)果還站在扁平化風(fēng)格的對(duì)立面,以擬物化設(shè)計(jì)界面和現(xiàn)實(shí)主義審美聞名。而微軟在2007年發(fā)售的Windows Vista也才剛剛更新了一種叫“Aero”的界面風(fēng)格,它被看做是微軟對(duì)擬物化設(shè)計(jì)的成熟嘗試,而毛玻璃質(zhì)感會(huì)帶給用戶更強(qiáng)烈的審美感受。

Windows Vista界面

Metro則好像突然讓微軟走向了自己的對(duì)立面:一切看起來(lái)立體的元素都取消了。它的靈感來(lái)自于機(jī)場(chǎng)和地鐵的指示牌,旨在明確。

看起來(lái)也的確如此:大號(hào)無(wú)襯線字體,弱化圖像,依賴排版。微軟描述它“直覺(jué)、易懂、現(xiàn)代”,稱這種新的設(shè)計(jì)風(fēng)格是“真正的數(shù)字化”。當(dāng)時(shí)這種簡(jiǎn)潔的設(shè)計(jì)形式的確令人耳目一新,獲得了包括Jaskni在內(nèi)不少設(shè)計(jì)師追捧。

事實(shí)上,微軟用上扁平化設(shè)計(jì)還要更早:他們?cè)?006年發(fā)布的媒體播放器Zune中就使用了這種風(fēng)格。

Zune Player

Zune的誕生始于微軟試圖與蘋(píng)果iPod的較量。微軟的商業(yè)發(fā)展總監(jiān)Will Tschumy號(hào)稱微軟每年花費(fèi)200億元在設(shè)計(jì)上。

“我們做了無(wú)數(shù)用戶體驗(yàn)背后的調(diào)研”,Will Tschumy說(shuō),“微軟是唯一一家在各個(gè)屏幕上擁有統(tǒng)一設(shè)計(jì)語(yǔ)言的公司了。”

很快地,Zune的產(chǎn)品設(shè)計(jì)風(fēng)格延伸成為所有微軟產(chǎn)品的設(shè)計(jì)語(yǔ)言。扁平化設(shè)計(jì)風(fēng)格也成了最流行的設(shè)計(jì)趨勢(shì)。

蘋(píng)果也加入了扁平化設(shè)計(jì)的熱潮中,甚至還成了扁平化的最大擁躉和推動(dòng)者。要知道,擬物化和寫(xiě)實(shí)主義設(shè)計(jì)在很長(zhǎng)一段時(shí)間內(nèi)都是蘋(píng)果的設(shè)計(jì)標(biāo)志。

直到2012年,蘋(píng)果的主頁(yè)導(dǎo)航欄還是光滑的球面型,按鈕們則像是裹了糖衣一般發(fā)光。2013年6月10日世界開(kāi)發(fā)者大會(huì),蘋(píng)果發(fā)布了一套全新的UI設(shè)計(jì)風(fēng)格iOS 7。這一切都發(fā)生在蘋(píng)果副總裁Scott Forstall離開(kāi)蘋(píng)果后,Jony Ive掌管了整個(gè)公司的交互界面。

蘋(píng)果水晶質(zhì)感的界面

以Metro的扁平化標(biāo)準(zhǔn)來(lái)看,iOS 7其實(shí)不算完全扁平,它還保留了一些紋理。但它相比自己過(guò)去的設(shè)計(jì),拿掉了光澤、斜角和陰影。圖標(biāo)們更簡(jiǎn)潔了,顏色也更鮮亮了。照片的圖標(biāo)從一株現(xiàn)實(shí)的向日葵變成了七彩色輪;相機(jī)圖標(biāo)則由原來(lái)描繪細(xì)致的鏡頭變成了一臺(tái)黑色的相機(jī)剪影。

iOS 7

不過(guò)iOS 7初揭曉時(shí),遭到了一些批評(píng),曾獲德國(guó)設(shè)計(jì)獎(jiǎng)終身成就獎(jiǎng)的?Erik Spiekermann就專門(mén)拍了個(gè)視頻批評(píng)蘋(píng)果過(guò)于纖細(xì)而難以閱讀的字體。更大的硬傷還在于:上滑界面對(duì)于可點(diǎn)與不可點(diǎn)元素的混淆,以及沒(méi)必要的細(xì)線分割(蘋(píng)果在后來(lái)的版本中對(duì)這點(diǎn)做出了改進(jìn),用更深的色塊表示可點(diǎn)元素,也取消了細(xì)線)。

iOS上滑界面不光混淆了可點(diǎn)與不可點(diǎn)元素,還用沒(méi)必要的細(xì)線分割
改進(jìn)后的版本,將可點(diǎn)元素用深色塊框住

但這顯然無(wú)礙無(wú)數(shù)設(shè)計(jì)師們跟隨蘋(píng)果一起擰轉(zhuǎn)了設(shè)計(jì)趨勢(shì)。最顯著的變化莫過(guò)于那些登上蘋(píng)果APP Store的應(yīng)用們。要是給它們的圖標(biāo)按照時(shí)間順序梳理下來(lái),你會(huì)發(fā)現(xiàn)圖標(biāo)們也基本遵循立體、描繪細(xì)節(jié)到拍扁、簡(jiǎn)潔的路徑變化著。

Instagram

Snapchat

Uber

扁平化與日漸普遍的極簡(jiǎn)主義

這種趨勢(shì)并非無(wú)端出現(xiàn)。

被譽(yù)為建筑史“現(xiàn)代主義之父”的美國(guó)建筑師Louis Sullivan創(chuàng)造了現(xiàn)代摩天大樓的原型,他留給后世更大的財(cái)富,還在于放之四海而皆準(zhǔn)的設(shè)計(jì)格言:形式追隨功能( Form follows function)。

這句話的意思很簡(jiǎn)單,即設(shè)計(jì)首先得考慮功能性。

從擬物化和現(xiàn)實(shí)主義,到極簡(jiǎn)的扁平化,再由扁平化升級(jí)為更具兼容度的設(shè)計(jì)風(fēng)格,都是用戶界面設(shè)計(jì)風(fēng)格順應(yīng)了當(dāng)下潮流所得的結(jié)果。

1994年,萬(wàn)維網(wǎng)的出現(xiàn)使得互聯(lián)網(wǎng)開(kāi)始引起公眾注意。大部分美國(guó)的上市公司開(kāi)始視一個(gè)公開(kāi)的網(wǎng)站為必需品。但此時(shí),個(gè)人電腦的滲透率極低。只有專業(yè)工作人員熟悉電腦桌面軟件,更不用說(shuō)那些看了令人疑惑的數(shù)字接口了。設(shè)計(jì)師們花了大量時(shí)間制作網(wǎng)站按鈕、菜單和跳轉(zhuǎn)鏈接,使他們看起來(lái)略微友好一些。

在網(wǎng)頁(yè)設(shè)計(jì)幾乎無(wú)可參照的當(dāng)時(shí),人們認(rèn)為網(wǎng)站設(shè)計(jì)的黃金準(zhǔn)則就是去模仿電腦桌面的界面設(shè)計(jì)。

1995年發(fā)布的Windows 95就是3D模擬的經(jīng)典例子。

它的對(duì)話框使用了很深的陰影和高光來(lái)制造3D效果。它們的凸起凹陷都遵循著兩個(gè)基本原則:

凸起的元素是可以用鼠標(biāo)點(diǎn)擊按下的。它經(jīng)常被用來(lái)表示按鈕。

凹陷的元素則是被用來(lái)填充的。諸如搜索框等輸入框就常使用內(nèi)陷的視覺(jué)元素。

凹陷/凸起的元素

就如同美國(guó)1840年代的鐵路、1920年代的汽車(chē)和收音機(jī)所帶來(lái)的技術(shù)繁榮一樣,巨大的互聯(lián)網(wǎng)泡沫積聚起來(lái),又因?yàn)檫^(guò)熱的投機(jī)行為經(jīng)歷了一場(chǎng)名為“Dot Com”泡沫的破裂。

不過(guò)很快地,互聯(lián)網(wǎng)經(jīng)歷泡沫破滅以后再次起飛,一大批新的創(chuàng)業(yè)公司出現(xiàn),讓自己的界面充斥著陰影、氣泡、眩光、巨大投影等時(shí)下流行的元素。

微軟在2003年發(fā)布的Outlook Web Access,被認(rèn)為是網(wǎng)頁(yè)設(shè)計(jì)的杰出代表。

Outlook Web Access

這個(gè)在如今標(biāo)準(zhǔn)看來(lái)頗為簡(jiǎn)陋的界面,在當(dāng)時(shí)是 .NET網(wǎng)站的標(biāo)準(zhǔn),以及很多AJAX庫(kù)所渴求的設(shè)計(jì)。

與此同時(shí),蘋(píng)果的擬物化設(shè)計(jì)和現(xiàn)實(shí)主義風(fēng)格也搭載著產(chǎn)品的出售被更多用戶接受。

擬物化是對(duì)物理世界一些特征的模仿。它用在設(shè)計(jì)中,能讓用戶在對(duì)現(xiàn)實(shí)存在物品的了解基礎(chǔ)上,學(xué)會(huì)使用一種全新的交互界面。

蘋(píng)果的用戶界面上,那些反光的圖標(biāo)其實(shí)是現(xiàn)實(shí)生活中的物體在電子屏幕上的一種轉(zhuǎn)移。在大部分人還未被智能手機(jī)牢牢擒住時(shí),這種對(duì)現(xiàn)實(shí)物品的模仿其實(shí)能消除人們對(duì)電子事物的疏離感。

擬物化的開(kāi)始

蘋(píng)果的第一套界面就開(kāi)始擬物了。

擬物化的深入

蘋(píng)果將虛擬鍵盤(pán)做成精致的水晶玻璃質(zhì)感,正是為了讓人們習(xí)慣虛擬鍵盤(pán)的存在??梢院芸隙ǖ卣f(shuō),假如它沒(méi)有做得如此“直覺(jué)”,它的體驗(yàn)就沒(méi)有說(shuō)服力,也無(wú)從培育消費(fèi)者的習(xí)慣。

擬物化風(fēng)格愈演愈盛,并被蘋(píng)果對(duì)細(xì)節(jié)的極致描繪推向了高點(diǎn)。

但和過(guò)去數(shù)百年建筑、藝術(shù)的發(fā)展軌跡類似,扁平化設(shè)計(jì)所代表的“極簡(jiǎn)主義”,也是在堆疊裝飾風(fēng)潮達(dá)到極盛之后,開(kāi)始一股由繁入簡(jiǎn)的風(fēng)潮。

扁平化設(shè)計(jì)常被視作網(wǎng)頁(yè)和界面設(shè)計(jì)發(fā)展到成熟階段的象征。

這種成熟首先體現(xiàn)在設(shè)計(jì)師身上,他們對(duì)于設(shè)計(jì)圖標(biāo)和界面已經(jīng)得心應(yīng)手,開(kāi)始轉(zhuǎn)而尋求創(chuàng)新和現(xiàn)代性。

互聯(lián)網(wǎng)的滲透意味著遠(yuǎn)比過(guò)去更多的人熟悉如何與電子設(shè)備互動(dòng)。我們已經(jīng)習(xí)慣于與數(shù)字設(shè)備的交互方法。即便是某個(gè)頁(yè)面上只有一個(gè)細(xì)線條方框,只要上面寫(xiě)著“Go”,你也清楚地知道那是個(gè)可以被點(diǎn)擊的按鈕。

同樣的發(fā)展軌跡,你可以在印刷物上的“扁平化”上找到。

這種更“原始”一些的載體,早在60年前就已經(jīng)見(jiàn)證過(guò)這種極簡(jiǎn)風(fēng)格的鼎盛時(shí)期。當(dāng)時(shí)扁平化設(shè)計(jì)的名稱還叫做“瑞士設(shè)計(jì)風(fēng)格”,也稱為“國(guó)際印刷風(fēng)格”(International Typographical Style)。

如它名字所指,這種設(shè)計(jì)風(fēng)格始于瑞士,在1940-1950年代推廣至全球,成為戰(zhàn)后西方的設(shè)計(jì)基礎(chǔ)。

推動(dòng)者是現(xiàn)代最著名的平面設(shè)計(jì)師之一Armin Hofmann。從蘇黎世藝術(shù)學(xué)院畢業(yè)后,他作為一名版師流轉(zhuǎn)于Basel和Bern。1947年,在火車(chē)上遇見(jiàn)時(shí)任Basel藝術(shù)學(xué)院校長(zhǎng)的Emil Ruder后,他得知那兒正缺一名教師,于是開(kāi)始了40年的教學(xué)生涯,并在后來(lái)接替了Ruder的校長(zhǎng)位子。

Hofmann一生中大部分時(shí)間都在設(shè)計(jì)扁平設(shè)計(jì)風(fēng)格的海報(bào)。因?yàn)樗J(rèn)為,海報(bào)是最好和最有效的溝通形式之一。

ArminHoffman,1959(海報(bào)設(shè)計(jì))

他的海報(bào)永遠(yuǎn)高效審慎地使用顏色和字體。他將這種做法稱為“色彩的瑣碎化”。即便以當(dāng)下的審美標(biāo)準(zhǔn)評(píng)判,它們依舊融合了創(chuàng)意與藝術(shù)氣質(zhì),完全不過(guò)時(shí)。

事實(shí)上,Hofmann用在海報(bào)中的元素和如今的扁平化設(shè)計(jì)元素并無(wú)太大區(qū)別:照片蒙太奇,強(qiáng)調(diào)排版和實(shí)驗(yàn)性的構(gòu)圖,以及大量無(wú)襯線字體。

他還將自己的設(shè)計(jì)哲學(xué)和實(shí)踐寫(xiě)入了一本名為?Graphic Design Manual?的設(shè)計(jì)指導(dǎo)手冊(cè),成了無(wú)數(shù)平面設(shè)計(jì)師的必讀書(shū)目。

瑞士汽車(chē)俱樂(lè)部海報(bào),Joseph Müller-Brockmann,1955(海報(bào)設(shè)計(jì))

這種“剝離非必要元素”的風(fēng)格專注于可讀性,和同樣以清晰可讀為準(zhǔn)繩的Helvetica字體一起,在二戰(zhàn)后的西方設(shè)計(jì)史中,占據(jù)了一席之地。

扁平化設(shè)計(jì)在原本就是平面的海報(bào)中,并沒(méi)有遭遇太大問(wèn)題。這也是極簡(jiǎn)排版風(fēng)格在印刷物中長(zhǎng)盛不衰的原因之一。

數(shù)字屏幕就沒(méi)有這么簡(jiǎn)單了。盡管不少設(shè)計(jì)師全心擁抱扁平化設(shè)計(jì),但這種早期只有兩個(gè)維度的設(shè)計(jì)風(fēng)格,也很快就暴露出局限性。比如拋棄一切三維元素的Metro,它的誕生就伴隨著反對(duì)者對(duì)其易用性的質(zhì)疑。

盡管在Jaskni看來(lái),Metro難以推廣的原因還在于Windows Phone可憐的市場(chǎng)份額,以及它對(duì)開(kāi)發(fā)者的高要求,“它基于wayfinding(路牌指示),是非常需要功力的一個(gè)領(lǐng)域?!?/p>

越來(lái)越多設(shè)計(jì)師厭倦了它的魅力,開(kāi)始尋求解決方案。

扁平化,真的就是指完全扁平嗎?

這恰恰是Nielen Normann這份報(bào)告存在的缺陷之一:這份報(bào)告對(duì)扁平化設(shè)計(jì)的理解似乎還停留在它們最初的印象,忽視了這種設(shè)計(jì)語(yǔ)言進(jìn)入數(shù)字屏幕以來(lái)的進(jìn)化。

在它的對(duì)照組中,扁平化就是徹底沒(méi)有紋理和陰影的存在。

但現(xiàn)實(shí)情況是,扁平化設(shè)計(jì)其實(shí)與擬物化設(shè)計(jì)的概念并行不悖。它擁有物理世界中的規(guī)則,甚至開(kāi)始主動(dòng)摹仿現(xiàn)實(shí)中的“層次”和“維度”,比如不少設(shè)計(jì)師利用深淺不一的色塊表現(xiàn)出陰影,而不是過(guò)去的投影、斜角和漸變,仿造出真實(shí)的投影。此時(shí)它的對(duì)立面已經(jīng)不是擬物化了,而是“豐富設(shè)計(jì)”(rich design)。

扁平化中陰影的使用

扁平化圖標(biāo)使用簡(jiǎn)潔的圖像傳達(dá)信息,少有漸變、紋理和陰影,圖標(biāo)更小,頁(yè)面加載時(shí)間也更快。它們既有裝飾性,也能導(dǎo)航到網(wǎng)站的正確位置。扁平化并非完全摒棄紋理和陰影的存在,進(jìn)化使得它解決了過(guò)去那些缺陷。

2013年,Google發(fā)布的Material Design引發(fā)了不少扁平化設(shè)計(jì)愛(ài)好者的狂歡。

在它發(fā)布這個(gè)設(shè)計(jì)語(yǔ)言以前,Google在設(shè)計(jì)上的戰(zhàn)術(shù)頗有些小心翼翼:設(shè)計(jì)沒(méi)有重大變化,只是在每次新產(chǎn)品發(fā)布時(shí)實(shí)施一些小小改變。

但作為在設(shè)計(jì)上具有高要求和高用戶期望的大公司,Google在發(fā)布Material時(shí)做了超前的一步:它不僅為自己的設(shè)計(jì)語(yǔ)言取了名字,還專門(mén)設(shè)定了相對(duì)完整而明晰的設(shè)計(jì)規(guī)則。

這為設(shè)計(jì)師們提供了便利。因?yàn)閷?duì)設(shè)計(jì)師來(lái)說(shuō),當(dāng)憑空設(shè)計(jì)出一套新的風(fēng)格時(shí),需要付出巨大的研究成本與溝通成本。而Material Design相當(dāng)于一個(gè)框架,在其中生發(fā)出來(lái)的設(shè)計(jì),是已經(jīng)被驗(yàn)證過(guò)的。

要解釋Material Design的概念也很簡(jiǎn)單,它試圖在最簡(jiǎn)化的設(shè)計(jì)中引入一些擬物化設(shè)計(jì)的特征:

它將所有設(shè)計(jì)元素都想象成在固定光源下的紙片,因?yàn)楣庠催h(yuǎn)近表現(xiàn)出深淺不同的色彩和陰影。雖然它看起來(lái)依舊扁平,但就連運(yùn)動(dòng)模式都模擬了物理世界的規(guī)則。

Material Design在天氣應(yīng)用中的表現(xiàn)

盡管一些設(shè)計(jì)師認(rèn)為Material Design在顏色、陰影方向等都做了過(guò)于死板的限制,令他們創(chuàng)意受限,但Material Design的發(fā)布算是扁平化設(shè)計(jì)“進(jìn)化”成功的嘗試。

與Material Design發(fā)布同年,設(shè)計(jì)師Jeff Escalante也在Dribbble等設(shè)計(jì)網(wǎng)站上發(fā)起了一次關(guān)于扁平化設(shè)計(jì)趨勢(shì)的討論,并提出了一種頗為簡(jiǎn)單粗暴的解決方案:長(zhǎng)陰影(Long Shadow)。

它的效果如同將圖標(biāo)上的物體置于冬日陽(yáng)光下:它們都拖著45° 斜角的長(zhǎng)陰影,是物體的2.5倍。

長(zhǎng)陰影(Long Shadow)

長(zhǎng)陰影保留了扁平化設(shè)計(jì)的基本審美,但也為圖像增加了深度。這使得它的確火了一陣,設(shè)計(jì)網(wǎng)站Dribbble和Pinterest上都出現(xiàn)不少類似作品。教程也在教大家如何以更高效率制作長(zhǎng)陰影。

不過(guò)這種戲劇化的對(duì)角線陰影讓人聯(lián)想起早期的蘇聯(lián)海報(bào)或是像俄羅斯構(gòu)成主義、幾何抽象派畫(huà)家馬列為期的拼貼畫(huà)作品。它們都呈現(xiàn)出一種積極的、理想主義的風(fēng)格,具有強(qiáng)烈的視覺(jué)沖擊力,非常適合用作圖標(biāo)和品牌商標(biāo)。

但除此以外,長(zhǎng)陰影的使用廣度欠奉。和理論更成系統(tǒng)的Material Design相比,它并沒(méi)有辦法走得更長(zhǎng)遠(yuǎn)。

2013年,人們關(guān)于扁平化設(shè)計(jì)的討論,還在于“它是一個(gè)趨勢(shì),還是一次革命”。

但從現(xiàn)在它們的發(fā)展看來(lái),扁平化設(shè)計(jì)已經(jīng)成了一個(gè)容納度極高的存在。它還在依照變體不斷延續(xù)自己的影響力。

蘋(píng)果實(shí)際上也沒(méi)有將自己限定在最初那個(gè)扁平化設(shè)計(jì)的框架里。在走扁平路線的iOS7中,“游戲”圖標(biāo)在一眾被拍扁的圖標(biāo)中顯得不同,依舊擁有閃亮的光澤感。

Dribbble中不乏好事者將它拍扁,但“這就不是原來(lái)的球體了”,Jaskni說(shuō),“蘋(píng)果可能不是在一味追求扁平化,而是在尋求好的設(shè)計(jì)?!?/p>

Game Center的演進(jìn)
Game Center的演進(jìn)

顯然,扁平化設(shè)計(jì)只是電子屏幕設(shè)計(jì)的其中一個(gè)階段。到目前為止,2D界面的通用性已經(jīng)基本得到解決。一旦出現(xiàn)像AR/VR這樣更沉浸的視覺(jué)需要時(shí),它可能會(huì)失去現(xiàn)有的地位。

在過(guò)去兩年多,包括微軟在內(nèi)的不少科技公司都在進(jìn)行“包容性設(shè)計(jì)”,意即他們開(kāi)始思考一些相對(duì)前沿的事物,并為之做出設(shè)計(jì)方案。

比如微軟發(fā)布的全息設(shè)備HoloLens。盡管用戶能夠與全息照相機(jī)進(jìn)行互動(dòng),但HoloLens的操作系統(tǒng)與微軟其它設(shè)備所用的界面并不相同。

微軟希望能發(fā)布一套像Metro那樣,貫穿所有產(chǎn)品線的設(shè)計(jì)語(yǔ)言。

他們也“做到了”。今年5月的開(kāi)發(fā)大會(huì)上,微軟發(fā)布了一套叫做“Fluent”的設(shè)計(jì)語(yǔ)言,它看起來(lái)像是扁平化設(shè)計(jì)的延伸,但被賦予了無(wú)縫對(duì)接2D和3D操作系統(tǒng)的愿景。

盡管它目前還只是一個(gè)概念,但如同每個(gè)階段的演進(jìn)一樣,這個(gè)依舊很年輕的系統(tǒng)需要時(shí)間。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容