軟件產(chǎn)品扁平化設(shè)計(jì)雜談

在開始這篇雜談前，想和大家以微信為例，分享在其產(chǎn)品界面風(fēng)格上比較重要的一個(gè)變化，如下圖所示微信版本4.5和版本5.3的界面效果對(duì)比。

細(xì)心的朋友可能會(huì)看出來(lái)我選擇的4.5和5.3兩個(gè)版本，實(shí)際上在這中間還有4.5.1~5.2.1近8個(gè)不同的大小版本，都是在上一個(gè)版本的基礎(chǔ)上不斷優(yōu)化。那為什么選取這兩個(gè)界面展現(xiàn)，因?yàn)閷?duì)比的效果更強(qiáng)烈一些——我想強(qiáng)調(diào)個(gè)人對(duì)比后的感覺：用著更爽了！

為什么會(huì)更爽？估計(jì)每個(gè)人都會(huì)想到說(shuō)界面設(shè)計(jì)更簡(jiǎn)潔了，更清爽，更好看，于是我們似乎有了個(gè)結(jié)論，說(shuō)整個(gè)產(chǎn)品視覺上更扁平化了。這也牽扯出來(lái)今天所要討論的話題——扁平化設(shè)計(jì)。

不知道怎么，最近兩年“扁平化”這個(gè)說(shuō)法是N多產(chǎn)品經(jīng)理、視覺設(shè)計(jì)、老板必須要提到的概念，如果自己的產(chǎn)品界面設(shè)計(jì)不是扁平化的，就顯得老土，out了。而且關(guān)于這個(gè)概念，很多人都能提出自己的一套觀點(diǎn)。就筆者在對(duì)將近20多個(gè)視覺設(shè)計(jì)師的面試，關(guān)于這個(gè)問(wèn)題的解答就不盡相同，個(gè)人感覺大多還停留在諸如“大圖標(biāo)”、“色塊”、“去裝飾效果”等比較常見的觀點(diǎn)上——這些固然沒有錯(cuò)誤。今天也想在經(jīng)過(guò)若干時(shí)間研究和實(shí)踐的基礎(chǔ)上提出個(gè)人的一些看法，思路瑣碎，故為雜談。

扁平化設(shè)計(jì)之潮流問(wèn)題

現(xiàn)在談來(lái)自“星星的你”好像有點(diǎn)過(guò)時(shí)，不過(guò)正好，可以去掉一些跟隨潮流的“嫌疑”，實(shí)際上下面這個(gè)問(wèn)題恰恰是所謂“扁平化設(shè)計(jì)的潮流問(wèn)題”。如果在這個(gè)韓劇未開播之前，有位屌絲拿著炸雞和啤酒，或許會(huì)被人BS，但這之后鋪天蓋地的廣告使得炸雞加啤酒似乎成為了時(shí)尚。

話說(shuō)回來(lái)，在軟件產(chǎn)品最開始引入扁平化設(shè)計(jì)的莫過(guò)于微軟了，2010年2月15日，微軟在MWC 2010大會(huì)上CEO鮑爾默親臨現(xiàn)場(chǎng)發(fā)布其全新的手機(jī)操作系統(tǒng)Windows Phone 7，我們來(lái)回顧一下當(dāng)時(shí)有網(wǎng)站專門做的其與iPhone之間的對(duì)比：

1、鎖屏界面

2、聯(lián)系人界面

3、音樂(lè)視頻選擇

4、圖片界面

如今來(lái)看，微軟無(wú)疑是最早拿著啤酒和炸雞蹲在街邊享受的“屌絲”，因?yàn)楹竺娴氖袌?chǎng)與用戶反應(yīng)都平淡無(wú)奇，Windows Phone 7甚至得到了不少科技評(píng)論界的嘲笑。

不過(guò)這樣的屌絲貌似不止一個(gè)，2011年Android 4.0推出的時(shí)候，人們把Holo Theme 當(dāng)做安卓為了體現(xiàn)于IOS不同所采用的伎倆。

真正引領(lǐng)了設(shè)計(jì)潮流的還是當(dāng)2013年9月11日蘋果推出的IOS7，這也是IOS面世以來(lái)在用戶界面上做出改變大的一個(gè)操作系統(tǒng)，大的變化就是拋棄了以往的擬物風(fēng)格（skeuomorphism）而采用了全新的扁平化。這個(gè)“都教授”一出場(chǎng)，扁平化之風(fēng)就席卷了全球， 扁平化設(shè)計(jì)仿佛具有令人癡迷的魅力，讓無(wú)數(shù)產(chǎn)品經(jīng)理和設(shè)計(jì)師競(jìng)相效仿，僅在百度中文搜索“扁平化”關(guān)鍵字，返回結(jié)果就達(dá)16,700,000個(gè)之多！

IOS6與IOS7界面

扁平化設(shè)計(jì)之歷史淵源

軟件產(chǎn)品的扁平化，我們認(rèn)為是從2010年由微軟開始，但是關(guān)于扁平化設(shè)計(jì)實(shí)際上很早就有了，只不過(guò)不是在軟件行業(yè)，而是在建筑設(shè)計(jì)等藝術(shù)領(lǐng)域。不過(guò)這時(shí)候的扁平化有另外一個(gè)說(shuō)法叫“極簡(jiǎn)設(shè)計(jì)”或者“極簡(jiǎn)主義（Minimalism）”。即使現(xiàn)在，很多軟件設(shè)計(jì)領(lǐng)域還有很多人還把極簡(jiǎn)設(shè)計(jì)（Minimal Design）與扁平化設(shè)計(jì)（Flat Design）劃為等號(hào)。

極簡(jiǎn)主義是20世紀(jì)中期整個(gè)美國(guó)藝術(shù)領(lǐng)域一個(gè)風(fēng)靡的設(shè)計(jì)理念，最初是對(duì)抽象表現(xiàn)主義的一種反應(yīng)，主張一種形式上的客觀與單純。各個(gè)領(lǐng)域，比如繪畫、雕塑，服裝設(shè)計(jì)（我們現(xiàn)在熟知的Calvin Klein也是極簡(jiǎn)主義下簡(jiǎn)約風(fēng)格）都深受極簡(jiǎn)的影響，下面著重提一下建筑設(shè)計(jì)。

20世紀(jì)中期著名建筑師路德維希?密斯?凡德羅有一句經(jīng)典名言“l(fā)ess is more”，深化和升華了在建筑設(shè)計(jì)領(lǐng)域的一個(gè)理念即極簡(jiǎn)主義——提倡簡(jiǎn)單，反對(duì)過(guò)度裝飾。（極簡(jiǎn)主義更早可以追溯到12世紀(jì)歐洲的宗教改革思潮，主要是面向雕塑和繪畫。）

德維希?密斯?凡德羅

德維希?密斯?凡德羅代表作-范斯沃斯住宅

如此跨界，各位是否會(huì)會(huì)心一笑的同感，其實(shí)本無(wú)意外，根源在于不同時(shí)代背景下的人性化需求。

扁平化設(shè)計(jì)之時(shí)代背景與人性化考慮

現(xiàn)代軟件所承載及要傳達(dá)的信息量急速爆炸增長(zhǎng)，如何在短時(shí)間內(nèi)讓用戶快速獲取所需內(nèi)容，是每個(gè)產(chǎn)品設(shè)計(jì)人員的核心關(guān)注點(diǎn)。無(wú)論視覺展現(xiàn)還是交互過(guò)程，如果增加了認(rèn)知及學(xué)習(xí)成本，用的不爽，心煩意亂，難免會(huì)遭到用戶摒棄而轉(zhuǎn)移到競(jìng)爭(zhēng)對(duì)手產(chǎn)品。當(dāng)信息成為界面主體并且要求更多的視覺關(guān)注力時(shí)，過(guò)去純粹裝飾性設(shè)計(jì)開始成為內(nèi)容化界面的重負(fù)，因此必然會(huì)受到逐步減弱和剝離。近年來(lái)很多人提出“沉浸式瀏覽”這個(gè)概念，與扁平化有著非常密切的聯(lián)系，甚至可以說(shuō)沉浸式是扁平化的核心，即讓用戶更關(guān)注內(nèi)容層面的體驗(yàn)，盡量減少所有過(guò)度裝飾對(duì)用戶工作任務(wù)的干擾。例如如下關(guān)于IE9體驗(yàn)設(shè)計(jì)的一段描述（百度），“IE9界面設(shè)計(jì)簡(jiǎn)潔，為網(wǎng)站提供更大的顯示區(qū)域，從而讓用戶聚焦于應(yīng)用本身，而不是瀏覽器。瀏覽器控件減少并且處于半透明狀態(tài)，避免干擾用戶的視線，真正讓內(nèi)容成為用戶關(guān)注的焦點(diǎn)。”

找到騰訊分析數(shù)據(jù)平臺(tái)部關(guān)于2013年移動(dòng)設(shè)備屏幕分辨率分布的一張統(tǒng)計(jì)圖，如下。

2013年Android設(shè)備屏幕分辨率分布數(shù)據(jù)

百度統(tǒng)計(jì)流量研究院關(guān)于2014年1月到5月之間關(guān)于PC端分辨率使用分布情況，如下圖所示。

這些分析是給大家一個(gè)直觀的印象——當(dāng)前設(shè)備，尤其是移動(dòng)設(shè)備的分辨率規(guī)格千奇百怪，大量不同分辨率（尺寸）觸摸屏產(chǎn)品的上市使得產(chǎn)品生態(tài)鏈更加齊備和完整。而這勢(shì)必帶來(lái)一個(gè)問(wèn)題，頁(yè)面如何根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整？這非常令人頭疼，響應(yīng)式設(shè)計(jì)（Responsive Design）也由此而生。知乎上有位網(wǎng)友提出：“扁平化設(shè)計(jì)風(fēng)格與響應(yīng)式設(shè)計(jì)在同一時(shí)間點(diǎn)產(chǎn)生，是巧合，還是為了服務(wù)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的高效性？”可惜沒有人回答，這里我嘗試討論一下這個(gè)問(wèn)題。

響應(yīng)式更適合什么樣的頁(yè)面設(shè)計(jì)？首先網(wǎng)站設(shè)計(jì)要更具規(guī)則性，柵格式布局設(shè)計(jì)是比較好的方式，如此寬屏與窄屏適應(yīng)性更強(qiáng)（柵格在窄的時(shí)候往下調(diào)整）；其次頁(yè)面更加要有層次感，利落清爽，多度的裝飾，過(guò)炫的設(shè)計(jì)是不需要的?；谝陨蟽牲c(diǎn)，扁平化與響應(yīng)式相遇了，正因?yàn)槠鹾隙热绱酥?，兩者?lián)手引領(lǐng)了一個(gè)時(shí)期的潮流。

扁平化設(shè)計(jì)之交互扁平化

可以肯定的是，很多人有個(gè)誤區(qū)——扁平化只是視覺層面的扁平，實(shí)際上不僅視覺扁平，我們還更應(yīng)關(guān)注交互層面的扁平。如下圖所示，用戶對(duì)某個(gè)信息或者功能的獲取邏輯示意。

用戶通過(guò)一系列的操作（方式包括點(diǎn)擊、搖一搖、滑動(dòng)、觸摸等）來(lái)到達(dá)某個(gè)特定的信息或者功能點(diǎn)。而從軟件設(shè)計(jì)本身，對(duì)信息進(jìn)行對(duì)象建模，劃分了數(shù)據(jù)對(duì)象的層級(jí)結(jié)構(gòu)；對(duì)功能進(jìn)行定義，確定了功能的層次模型。如果軟件交互設(shè)計(jì)中體現(xiàn)的信息或功能的層級(jí)與實(shí)際在對(duì)象與功能建模中的完全對(duì)應(yīng)，則很有可能用戶獲取一個(gè)信息或功能點(diǎn)會(huì)非常繁瑣。比如我們?cè)贏ndroid 4.1中設(shè)置飛行模式，如下界面中的三種路徑。

所以在交互設(shè)計(jì)中，設(shè)計(jì)不同的到達(dá)路徑會(huì)直接影響用戶對(duì)產(chǎn)品使用的體驗(yàn)，我們把合理的，用戶能夠到達(dá)最短路徑的優(yōu)化稱之為交互的扁平化設(shè)計(jì)，可以通俗的講就是把交互做淺。視覺中國(guó)有一篇文章叫“高大上的扁平化交互設(shè)計(jì)”，專門講解關(guān)于交互扁平化的一些設(shè)計(jì)方法，筆者在這里重新整理一下，實(shí)際上可以分為兩大類，如下圖所示。

在產(chǎn)品的概念建模階段，如果能考慮到后續(xù)可能的交互問(wèn)題，如此從根本上對(duì)整體設(shè)計(jì)就有了更優(yōu)的考慮。交互路徑優(yōu)化中信息的分類組織是一個(gè)更廣闊的話題，在Giles Colborne的“簡(jiǎn)約至上”一書中，對(duì)此進(jìn)行了非常系統(tǒng)的論述：平鋪、淺目錄、有序組織等都可以劃分到這個(gè)范疇。建議參考“美圖看看”的目錄穿透功能設(shè)計(jì)，我們假定一個(gè)場(chǎng)景：下載了一個(gè)文件夾，里面有50個(gè)子文件夾，每個(gè)子文件夾都有嵌套的50層級(jí)的文件夾，每個(gè)文件夾中有20個(gè)圖片。如果我們想看到所有的圖片則需要點(diǎn)擊多少次？不可想象。但是如果使用美圖看看的穿透功能，所有圖片都會(huì)直接在一個(gè)界面中平鋪顯示，如此看圖的效率會(huì)大大提升。這個(gè)小功能實(shí)際上就是采用了平鋪和淺目錄的設(shè)計(jì)。還有個(gè)例子是老羅的錘子手機(jī)系統(tǒng)拍照與視頻選擇界面，下圖是與MIUI V5的對(duì)比。

錘子系統(tǒng)與MIUI拍照攝像界面

兩者的到達(dá)路徑不用說(shuō)，錘子更勝一籌，值得肯定的是錘子系統(tǒng)對(duì)細(xì)節(jié)的人性化考慮非常深刻，所以建議在設(shè)計(jì)產(chǎn)品時(shí)，不斷多問(wèn)問(wèn)自己和他人，有沒有更有的路徑怎么會(huì)更簡(jiǎn)單？

當(dāng)然話又說(shuō)回來(lái)，并不是所有的設(shè)計(jì)都要簡(jiǎn)潔到不能再簡(jiǎn)潔，因?yàn)橛锌赡芤l(fā)另外一個(gè)問(wèn)題，讓用戶失去對(duì)一件事物的控制感。比如Colborne提到，“東京蘋果專賣店的玻璃電梯，獨(dú)特之處在于它沒有按鈕：電梯外面沒有呼叫電梯的按鈕，電梯里也沒有任何控制按鈕。這臺(tái)升降機(jī)毎個(gè)摟層都會(huì)自動(dòng)停一下。蘋果已經(jīng)把這部電梯精簡(jiǎn)到了極致，但是，這部電梯并沒有給人簡(jiǎn)單的感覺，而是讓人覺得它神經(jīng)錯(cuò)亂。它在我想去的那一層停不停？為什么在沒人上下的樓層還要停呢？”

另：關(guān)于視覺設(shè)計(jì)的扁平化，網(wǎng)上有N多文章，隨便百度即可。

扁平化設(shè)計(jì)之不一定扁平

趕一趕潮流確實(shí)是一件很cool的事情，可以讓自己的產(chǎn)品顯得更時(shí)尚，連擬物做到非常極致的錘子系統(tǒng)亦或改變，老羅在2013年IOS7推出不久發(fā)微博稱，局部的擬物做得再爛也只是好和壞的問(wèn)題，而全局扁平化（作為一個(gè)成熟公司的行為），是對(duì)和錯(cuò)的問(wèn)題，暗示悄悄在錘子內(nèi)部啟動(dòng)了扁平化風(fēng)格。不過(guò)在今年前不久發(fā)布的錘子手機(jī)T1還未扁平?？赡苁怯捎跁r(shí)間成本，或者面子的問(wèn)題，抑或錘子的堅(jiān)持（后來(lái)這老兄又說(shuō)只要他在一天，錘子系統(tǒng)就永遠(yuǎn)不會(huì)扁平化）。

個(gè)人而言，采用什么樣的設(shè)計(jì)風(fēng)格，是由產(chǎn)品本身的目標(biāo)以及要解決的問(wèn)題來(lái)決定的，美與丑、操作難易并不完全決定了一個(gè)產(chǎn)品的成敗。有一個(gè)非常的經(jīng)典案例是趕集網(wǎng)產(chǎn)品總監(jiān)布棉老師在一次講課提到的美國(guó)最火的分類網(wǎng)站Craigslist，如果從扁平化的角度來(lái)看，真的是丑爆了。該網(wǎng)站上沒有圖片（最新版加上了一個(gè)地圖），只有密密麻麻的文字，但雖然看上去頗為乏味，可是卻是美國(guó)人最喜歡的網(wǎng)站之一。

Craigslist網(wǎng)站界面

為什么？因?yàn)槟苷嬲鉀Q用戶的問(wèn)題。

所以視覺、交互等問(wèn)題在如此的整體規(guī)劃下，顯得不那么“重要”。決定產(chǎn)品成敗的因素確實(shí)非常多，但是如何基于用戶人性化特點(diǎn)的角度來(lái)考慮，是非常重要的一點(diǎn)。前兩年有個(gè)比較清新的網(wǎng)站叫“優(yōu)擇網(wǎng)（youze.cc）”，可以讓人選購(gòu)數(shù)碼產(chǎn)品更直觀，方便了解到幾款產(chǎn)品之間的差別，快速找到適合自己產(chǎn)品。

優(yōu)擇網(wǎng)界面

個(gè)人非常喜歡這個(gè)網(wǎng)站的功能設(shè)計(jì)，很簡(jiǎn)單，直接和易用。但是現(xiàn)在已經(jīng)消失了，估計(jì)是創(chuàng)業(yè)已經(jīng)失敗。為什么？其它的原因不知道，但我的觀點(diǎn)是整個(gè)網(wǎng)站的思路太理性化了，選購(gòu)商品往往不是完全參數(shù)對(duì)比方式，我們或許更在乎別人的說(shuō)法，測(cè)評(píng)的結(jié)論，心情……，雖然后來(lái)優(yōu)擇也有一個(gè)論壇，但是根基的問(wèn)題傳達(dá)是產(chǎn)品定位的偏差?；蛟S創(chuàng)業(yè)團(tuán)隊(duì)是計(jì)算機(jī)專業(yè)比較偏技術(shù)從而忽略了人文的因素。
另：扁平化不意味著純粹的扁平化，目前有很多的概念比如類扁平化、偽扁平化、準(zhǔn)扁平化、Almost Flat等等，實(shí)際上還是圍繞扁平化的變體或者延伸。

扁平化設(shè)計(jì)之歷史輪回

平心而論，擬物、扁平抑或以后出現(xiàn)的什么新風(fēng)格，都是軟件產(chǎn)品或者說(shuō)藝術(shù)設(shè)計(jì)不斷演變發(fā)展的演進(jìn)而已?？梢钥隙ǖ氖?，我們?cè)诓痪?，就?huì)去推崇另外一個(gè)新的軟件產(chǎn)品設(shè)計(jì)風(fēng)格，有些有趣，也有些可笑。但是歷史就是不斷的在輪回，我們看一下微軟Windows操作系統(tǒng)的界面演變

有兩個(gè)輪回，我們可以看到界面效果上，在Windows 2上還算是一種“扁平化”的風(fēng)格，不過(guò)可以肯定的是，當(dāng)時(shí)的界面設(shè)計(jì)絕對(duì)不是想要如今的這種扁平，而是局限于當(dāng)時(shí)技術(shù)狀態(tài)的表現(xiàn)罷了，之后Windows 98的擬物再到Windows 8的扁平，這似乎是驗(yàn)證了一種輪回。另一個(gè)輪回我們注意是版本號(hào)，2→98→8，這個(gè)角度的輪回我實(shí)際上是思想認(rèn)識(shí)上的不斷提升而絕不是退步。

所以，既然該來(lái)的總會(huì)來(lái)，那就去享受擁抱，在不斷變換的潮流中恪守以人性為根本的產(chǎn)品設(shè)計(jì)理念，明晰自己的選擇，以不變應(yīng)萬(wàn)變，你的產(chǎn)品會(huì)一直立于不敗之地。

網(wǎng)站標(biāo)題：軟件產(chǎn)品扁平化設(shè)計(jì)雜談
鏈接URL：http://www.muchs.cn/news18/169018.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)