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

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

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

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

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

扁平化設(shè)計之潮流問題

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

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

1、鎖屏界面

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

3、音樂視頻選擇

4、圖片界面

如今來看，微軟無疑是最早拿著啤酒和炸雞蹲在街邊享受的“屌絲”，因為后面的市場與用戶反應(yīng)都平淡無奇，Windows Phone 7甚至得到了不少科技評論界的嘲笑。

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

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

IOS6與IOS7界面

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

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

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

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

德維希?密斯?凡德羅

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Craigslist網(wǎng)站界面

為什么？因為能真正解決用戶的問題。

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

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

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

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

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

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

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

網(wǎng)站題目：軟件產(chǎn)品扁平化設(shè)計雜談
地址分享：http://muchs.cn/news/169018.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、手機網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、企業(yè)建站

廣告

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