扁平化設計會降低人們使用頁面的效率嗎？如果是，為什麼？

02-02

新聞背景：越來越普遍的扁平化設計，真的會降低人們使用頁面的效率嗎？

9 月 3 日，諮詢公司 Nielsen Norman 發布了一篇研究報告，指出扁平化設計會使用戶導航的效率降低 22%。
……簡而言之，他們的結論是，扁平化設計（flat design）是一種不那麼直觀的設計，抹去了網頁按鈕與內容之間的差別。這使得用戶將可點擊的元素和不可點擊的圖標與文本混淆，因而影響了效率，還可能導致廣告商和電子商務網站們損失數十億美元。

不是！

這還是扁平和擬物風格間爭論的年經貼，雖然通篇看起來像是微軟的軟文。

我一直特別奇怪，在設計領域的很多研究或者具有一定權威性機構給出的意見，都帶有很大的缺陷，過度主觀、片面。

當我們在對設計風格和作品做分析時，是要用多種維度進行審視的，這是硬性要求，也是專業素養！例如符合用戶預期、符合設計理論、符合硬體限制……但是，一定不要只拿著自己關注的、或者擅長的方向，批判你不喜歡但卻異常成功的設計（雖然有些設計在視覺的滿意性上會讓你感到絕望）。

無論扁平或擬物，它們本身承載的意義，是被系統、軟體、網頁所賦予的。研究設計前，一定要先對研究的載體本身有足夠的了解。我就不想說舉例中給的網頁設計得有多一般了（扁平為什麼就一定要用幽靈按鈕？），而且就9組網站71人的採樣就要得出22%的數字結論，簡直是對我們智商的侮辱。

無論你們喜不喜歡扁平，演示頁面想做到和擬物相同效果的話，刻意強調和突出導航或者某些按鈕即可，方法實在是太多了。比如把幽靈按鈕做成純色按鈕，像知乎截面這個藍瞎眼的「關注問題」、「提交回答」按鈕一樣，或者用一些別的對比色，或者加粗加黑什麼的。風格絕對不背什麼弱化操作、影響效率的鍋，區別只在設計師製作時對不同的元素賦予什麼樣的視覺權重和考量。

從擬物發展到扁平，最核心的原因不是少數高層設計師的喜好變了，而是對於整個互聯網來說呈現的內容數量和質量的不確定性大幅度增加了。在一整套的設計體系中，我們是要經過一系列思考來匹配所有的視覺變數，而擬物的設計相對於扁平來說涉及的變數就多太多了，兼容性太低。

舉例來說，就像你設計了一套暗色調的主題，有各種陰沉的材質和陰影，但是作為一個 UGC 平台內容創作者偏偏一直上傳一些高亮逗比的照片，和你的設計格格不入，於是衝突就產生了，用戶不可能會忽視這些問題，受到的干擾就更多。

不是說擬物就不能考慮好所有的問題設計出精彩的設計（常見於遊戲主頁），但這樣的過程代價太大，不僅對設計師要求太高，且需要消耗的時間太長，沒辦法匹配產品迭代的速度。

並且不要當只有設計在這個過程中做出適應和發展，在產品、運營的層面，也一樣積累了新的經驗做出改變，那就是對內容的組織和對用戶行為預判的提升。

好的設計始於前期的規劃，在原型中元素處於什麼位置更合理，整個版面的結構是如何安排的，文案是何如精雕細琢誘人入坑的（類似產品詳情頁）……通過多方面的合力來提升頁面的使用率。且判斷整個頁面設計優劣的是我們對網站目標的考量，如果出發點只是要讓對方能在主頁瀏覽完即在底部進行購買，那麼為什麼要刻意去強調一些無關緊要毫無權重的元素。

太多的分析就不講了，即使表面上跟著新潮使用擬物化設計，但在其它方面沒有跟進還在使用老一套的思路來做今天的設計，那麼頁面效率低是必然的，不是粗暴的強化視覺對比本身能解決的問題。

下面是一些最近收藏的扁平案例，你們自己思考使用效率會低嗎：

---------------------------------完結分割線-----------------------------------------

有什麼想法，可以到QQ群里交流：5537969

或者關注我的公眾號：

超人的電話亭

謝邀，個人觀點，純粹從 UI 設計的角度說，會。但理由和題述的完全不同：

……簡而言之，他們的結論是，扁平化設計（flat design）是一種不那麼直觀的設計，抹去了網頁按鈕與內容之間的差別。這使得用戶將可點擊的元素和不可點擊的圖標與文本混淆，因而影響了效率……

題述的這個觀點是完全錯誤的。扁平化設計所捨棄的僅僅是擬真意義上的細節，呈現在用戶面前的元素越少，用戶的注意力只會更加明確。況且，如果出現了讓「用戶將可點擊和不可點擊的元素混淆」的情況，只能說明這個設計做得差，並不能讓扁平化背鍋。

扁平化 UI 設計會降低使用效率的真實原因是，目前流行的以 iOS 為代表的扁平設計有著相較以前低得多的信息密度。為了向用戶傳達同量的信息，較低信息密度的 UI 布局必然會導致信息獲取的效率更低。所以說純粹從 UI 設計的角度說，是的。

當然，這樣純粹的比較在實際場景中並不存在。時過境遷，隨著推薦演算法的進步、用戶使用習慣的變遷，需要向用戶傳達的信息本身早已發生了巨大的變化，因此現在已沒有辦法嚴格控制其他變數，將擬物化設計和扁平化設計進行比較。

快速瀏覽了一下好奇心日報的那片文章，和作為文章主題基礎的Nielsen的這篇報告，觀察到了一些比較有趣的細節。

1、雖然Nielsen 的這次報告標題用了「flat UI elements」這種提法，但是實驗本身一致在圍繞「weak signifier」（弱指示）這個非常具體的設計方向在展開，而並非「扁平化設計」（flat提到了21次，但weak提到了41次）。就我對報告的理解來說，並沒有把兩者要混為一談的意思。好奇心日報的文章，除了一開始立即提出了報告的結論以外，之後其實多在講扁平化設計的歷史和一些OS風格比較等等，基本已經跑題了，或者說並沒有很客觀全面的闡述這個實驗的真實意圖。

2、關於酒店預訂網頁的實驗結果，其實無論是用了立體樣式的按鈕，還是用了幽靈按鈕，兩者的視線跟蹤數據基本看不出什麼差別。相反，在使用幽靈按鈕的頁面，更多人會看到「查看剩餘房間」的按鈕。說明即便Nielson的結論數據有些驚人，但是並不是每個弱指示設計都會造成不良影響，說明弱指示設計和用戶體驗的相關性並不單純。

3、其實Nielson給出的結論是很詳細的，有很多需要精讀的地方：

22% longer task time for the weak-signifier designs may seem terrible. But remember that our metrics reflect time spent while looking for where to click. The tasks we measured were very specific and represent just a small component of real web tasks. In regular web use, people spend more time on other task aspects such as reading the information on a page. When you add in these other aspects, the slowdown for a full task (such as shopping for a new pair of shoes) would often be less than the 22% we measured.

因為這次試驗的方法是單純讓實驗者完成一項目的非常明確的任務（預訂房間、找出網站最新商品……），這只是日常網頁使用的一部分內容，所以事實上弱指示設計對影響是要小於22%這個數字的。

另外，由於弱指示設計造成了部分實驗者的誤點操作，給這22%作出了貢獻。也就是說，可能弱指示設計的問題根源並非是花更多的時間去做既定任務，而可能是浪費時間去彌補誤操作，和不好的心理體驗。

因為是匆匆看了一眼，之後可能會繼續update這個答案，不過有一個結論是清楚的：

此次報告基本可以認定是特別針對弱指示設計而言，而沒有泛化到整個扁平化設計風格。實驗針對的是處理任務的能力，而不是導航能力。所以所謂」扁平化設計使用戶導航效率降低了22%的結論」可以認為是不精確的一個說法。

以這個角度去看，實驗結果是非常自然的，因為本身就是在說弱指示設計這件事，既然是弱指示，用戶完成任務當然會耗費一定精力篩選網頁內容。只是說影響效率能達到這個數量級的確是需要設計師們警惕的。報告結尾處有對此的一些建議，有心的設計師可以去看看。

UI元素影響用戶注意力的因素不止一個：形狀、尺寸、顏色、位置、動態……可以說是各個因素合力的結果。這9個實驗，在改變頁面元素的時候，或多或少的改變了一個或幾個影響因素，個人認為其中數據的差異並不能簡單的歸為擬物3D和扁平之間的區別而造成的。當然了，Nielsen的實驗畢竟是很嚴謹的，基本可以考慮他們已經把所有其他因素的影響降到了最低了。而且，有些實驗本身網頁的設計就是有缺陷的，對照組又會使用例如用藍色字代表鏈接這種非常深入用戶習慣的做法，所以22%這個數字，其實也沒有太誇張。

結合自己工作的經驗來說，一個好的扁平設計的確是非常考驗功力的，為了儘可能讓用戶的行為向產品的設計目的接近，有很多時候單純的照搬扁平設計的語言，說實話是很難讓人心安理得的。加之歐美設計趨勢往往是大、空、目標明確，而東方設計卻對同屏信息容量的容忍能力很高，導致扁平設計到了國內就是一種非常水土不服的東西，強行使用經常會產生出令人沮喪的結果。

先寫到這裡。

感謝邀請

宏觀維度上，設計本身並沒有所謂風格，一切都是圍繞用戶目的，產品目的，設計目的進行；

賦予設計的手法被更多的設計師放大，變成了所謂風格，扁平本身在我看來就是一種設計手法，我們也不應該定義擬物與扁平的對錯，能圍繞目的同時推動更優秀數據結果的設計都對。

如果調研結果是基於大概率並且真實的，設計師就應該尊重結果，調整手法；

大部分時候我們的調研都是帶有傾向性的，每個設計都不具備完全代表性；

分析你的設計目的，有選擇的使用不同手法，是設計師應該掌握的專業能力；

題主提到的導航效率沒有代表性。我沒有什麼印象，針對導航設計，扁平設計中有非常明確的設計必須規範，擬物設計也沒有，複雜設計也沒有。

如果內容指的是按鈕本來的形式弱化，用文本表示，目前看應該是有損失的。但也是階段性，每一個不同階段，用戶對於UI體系的控制項形式認知都有變化，最早的連接都是藍色並且帶有下劃線，設計師必須這樣設計才能保證連接的點擊次數，因為用戶看得懂，不需要思考；顯然，現在已經不用了。

按鈕是長期積累的視覺識別習慣，去掉這種形式，必然會對部分用戶形成識別上的弱化，數據下降很正常；如果設計都堅持去掉按鈕採用純文本，用戶習慣就被慢慢培養，這種調研的數據必然會發生變化。

所以，這種調研並不是一種長期有效的數據指導，可能僅僅是用戶識別習慣培養過程中的一次小起伏。

建議在設計上保持大部分用戶的識別，比如按鈕的形式，當用戶識別習慣被更大範圍培養起來以後再改成純文本。不贊同作為設計師追求流行，不思考設計根本目的。說不清楚為什麼的設計，通常經不住推敲。

擬物不好么？圖形示意能力上，我覺得擬物一定比扁平所傳達的更明確。

扁平不好么？當大部分圖形示意都不如文本清晰時，去掉視覺上的重量，讓用戶集中精力尋找清楚的使用節點，這顯然更有效率。

明白你在當下設計所要傳達的核心目的，才能找到最正確的方式。

所有設計師都應該明白，設計是複雜的，手法眾多的，當下流行的，必將是馬上過時的。

只有設計目的才具備一定的準確性與唯一性。

扁平的反義詞不是擬物，而是立體或者多細節。

抽象的反義詞才是擬物。

扁平化在於減少噪音，注重內容本身。並不與層級、邏輯等東西衝突。甚至留白，多字型大小，多字重等設計特色還會增加效率。

但不能說扁平就效率高或低。這些事情都是要具體問題具體分析的。擬物化設計為第一代互聯網和第一代移動互聯網用戶帶來了很大的便利，降低了首次學習成本。但抽象是一切事物向高階發展不可逆的過程。這個「高階」的「高」自然也包涵了高效率。

「還可能導致廣告商和電子商務網站們損失數十億美元。」

這句話可能是對的，因為使用扁平化設計的網頁，和當前常用的廣告流、廣告插件顯得格格不入，大大降低了扁平化的美感，說不定會導致廣告起惹人生厭的反作用……

謝邀，非常抱歉。這個問題無能為力。謝謝您！

1.個人感覺主要看氣質，擬物和扁平並不矛盾。你試著讓每個人畫個貓，有的可能看著像狗，有的看著可能像老虎。這是仁者見仁的事。我們只能取大多數的認識。

2.看能力。扁平只是為了統一風格，也就是說你可以有機會容納更多的內容。

我支持material風格。天才般的設計

不，扁平化會提升使用效率，扁平化icon通常使用抽象化設計，易於理解…

通常來說扁平化都是偏簡潔沒有多餘的元素吸引視覺焦點，而且扁平化都是採用高飽和顏色有助於引導用戶獲取重點信息

不會。

扁平化的實際意義是抽象出事物簡潔意義，簡化用戶看到-》理解的過程。

那些影響到效率的扁平化設計，都是沒有做好抽象這個環節，以為實物拍扁了就行了。

所以扁平化一點沒有減輕設計環節的成本，但目的確實是為了減輕用戶但理解成本。