[ 平面理論教程 ] 產品經理解讀軟件產品扁平化設計雜談- 其他教程 - 骨子愛創意

教學主題: 產品經理解讀軟件產品扁平化設計雜談

大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

今天的這個教學主題是: 產品經理解讀軟件產品扁平化設計雜談

這教學的重點為這幾點 [ 設計,雜談,經理,解讀,產品,扁平化,一個,用戶,界面,交互 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

扁平化風潮浩浩蕩蕩，連產品經理也不放過，今天產品經理朝陽陸從5個方面分別講述了作為產品人眼裡的扁平化究竟是怎樣的。文章數據翔實，栗子充足，特別是關於交互扁平化的一段議論非常精彩，推薦設計師童鞋閱讀借鑒。

扁平化風潮浩浩蕩蕩，連產品經理也不放過，今天產品經理朝陽陸從5個方面分別講述了作為產品人眼裡的扁平化究竟是怎樣的。文章數據翔實，栗子充足，特別是關於交互扁平化的一段議論非常精彩，推薦設計師童鞋閱讀借鑒。

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

微信 版本4.5

微信 版本5.3

細心的朋友可能會看出來我選擇的4.5和5.3兩個版本，實際上在這中間還有4.5.1~5.2.1近8個不同的大小版本，都是在上一個版本的基礎上不斷優化。那為什麼選取這兩個界面展現，因為對比的效果更強烈一些——我想強調個人對比后的感覺：用着更爽了!

為什麼會更爽?估計每個人都會想到說界面設計更簡潔了，更清爽，更好看，於是我們似乎有了個結論，說整個產品視覺上更扁平化了。這也牽扯出來今天所要討論的話題——扁平化設計。

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

扁平化設計之潮流問題

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

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

1、鎖屏界面 2、聯繫人界面

3、音樂視頻選擇 4、圖片界面

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

不過這樣的潘棵菜撇恢掛桓觶2011年Android 4.0推出的時候，人們把Holo Theme 當做安卓為了體現於IOS不同所採用的伎倆。

真正引領了設計潮流的還是當2013年9月11日蘋果推出的IOS7，這也是IOS面世以來在用戶界面上做出改變最大的一個操作系統，最大的變化就是拋棄了以往的擬物風格(skeuomorphism)而採用了全新的扁平化。這個“都教授”一出場，扁平化之風就席捲了全球， 扁平化設計彷彿具有令人痴迷的魅力，讓無數產品經理和設計師競相效仿，僅在百度中文搜索“扁平化”關鍵字，返回結果就達16,700,000個之多!

IOS6與IOS7界面

扁平化設計之歷史淵源

軟件產品的扁平化，我們認為是從2010年由微軟開始，但是關於扁平化設計實際上很早就有了，只不過不是在軟件行業，而是在建築設計等藝術領域。不過這時候的扁平化有另外一個說法叫“極簡設計”或者“極簡主義(Minimalism)”。即使現在，軟件設計領域還有很多人還把極簡設計(Minimal Design)與扁平化設計(Flat Design)劃為等號。

極簡主義是20世紀中期整個美國藝術領域一個風靡的設計理念，最初是對抽象表現主義的一種反應，主張一種形式上的客觀與單純。各個領域，比如繪畫、雕塑，服裝設計(我們現在熟知的Calvin Klein也是極簡主義下簡約風格)都深受極簡的影響，下面着重提一下建築設計。

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

德維希•密斯•凡德羅

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

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

扁平化設計之時代背景與人性化考慮

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

找到騰訊分析數據平台部關於2013年移動設備屏幕分辨率分佈的一張統計圖，如下。

2013年Android設備屏幕分辨率分佈數據

百度統計流量研究院關於2014年1月到5月之間關於PC端分辨率使用分佈情況，如下圖所示。

2014年1月到5月PC端分辨率使用分佈

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

響應式更適合什麼樣的頁面設計?首先網站設計要更具規則性，柵格式布局設計是比較好的方式，如此寬屏與窄屏適應性更強(柵格在窄的時候往下調整);其次頁面更加要有層次感，利落清爽，多度的裝飾，過炫的設計是不需要的。基於以上兩點，扁平化與響應式相遇了，正因為契合度如此之高，兩者聯手引領了一個時期的潮流。

扁平化設計之交互扁平化

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

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

1、正常操作路徑

2、採用通知欄設置路徑

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

3、採用快捷開關設置路徑

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

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

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

鎚子系統與MIUI拍照攝像界面

兩者的到達路徑不用說，鎚子更勝一籌，值得肯定的是鎚子系統對細節的人性化考慮非常深刻，所以建議在設計產品時，不斷多問問自己，有沒有更好的路徑?怎麼會更簡單?

當然話又說回來，並不是所有的設計都要簡潔到不能再簡潔，因為有可能引發另外一個問題，讓用戶失去對一件事物的控制感。比如Colborne提到，“東京蘋果專賣店的玻璃電梯，獨特之處在於它沒有按鈕：電梯外面沒有呼叫電梯的按鈕，電梯里也沒有任何控制按鈕。這台升降機案雎Р愣薊嶙遠停一下。蘋果已經把這部電梯精簡到了極致，但是，這部電梯並沒有給人簡單的感覺，而是讓人覺得它神經錯亂。它在我想去的那一層停不停?為什麼在沒人上下的樓層還要停呢?”

另：關於視覺設計的扁平化，網上有N多文章，隨便百度即可。

附：騰訊同學有一篇文章講交互的扁平化，說得特別棒，推薦同學們閱讀：《經驗分享：高大上的扁平化交互設計》

扁平化設計之不一定扁平

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

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

Craigslist網站界面

為什麼?因為能真正解決用戶的問題。

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

優擇網界面

個人非常喜歡這個網站的功能設計，很簡單，直接和易用。但是現在已經消失了，估計是創業已經失敗。為什麼?其它的原因不知道，但我的觀點是整個網站的思路太理性化了，選購商品往往不是完全參數對比方式，我們或許更在乎別人的說法，測評的結論，心情……，雖然後來優擇也有一個論壇，但是根基的問題傳達是產品定位的偏差。或許創業團隊是計算機專業比較偏技術從而忽略了人文的因素。

另：扁平化不意味着純粹的扁平化，目前有很多的概念比如類扁平化、偽扁平化、准扁平化、Almost Flat等等，實際上還是圍繞扁平化的變體或者延伸。

扁平化設計之歷史輪迴

平心而論，擬物、扁平抑或以後出現的什麼新風格，都是軟件產品或者說藝術設計不斷演變發展的演進而已。可以肯定的是，我們在不久，就會去推崇另外一個新的軟件產品設計風格，有些有趣，也有些可笑。但是歷史就是不斷的在輪迴，我們看一下微軟Windows操作系統的界面演變

Windows 2

Windows 98

Windows 8

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

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

看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 產品經理解讀軟件產品扁平化設計雜談 這教學會喜歡

文章標題: 骨子愛創意- 產品經理解讀軟件產品扁平化設計雜談–轉載請註明來源處

本教學分類為平面理論教程中的 其他教程相關教學

文章相關關鍵字為: 設計,雜談,經理,解讀,產品,扁平化,一個,用戶,界面,交互

本文永久連結 :產品經理解讀軟件產品扁平化設計雜談

本文轉載自 :VIA