Oops ! 能不能點傻傻分不清.. 設計師必須留意的扁平化設計問題 (上)
一段小小的介面設計史
源起
扁平化設計Flat Design(*1)雖已是老生常談，然想寫這篇文章，始因於筆者常為了如何設計出適當的扁平化風格鏈結(*2)而苦惱。
(*1)扁平化設計=俗稱的「平面化設計」，為了區隔平面設計讓大家更好理解故用之。
(*2)鏈結也就是介面中常見的「超連結」，可能會以按鈕或是文字、圖像形式出現而總稱之。不知各位設計師是否也曾遇過類似情況?
傳統以來，介面鏈結都被設計成具材質觸感、立體化且具光澤的形狀，除了能有效暗示這是個「能被點擊」的物件外，還可突顯其「作用範圍」避免誤觸。
然扁平化設計去材質、去立體化的特性雖為介面設計開創更多可能性，但過度的簡化與使用習慣的改變，致使我們無法依賴過去的慣例來判斷元件是否可被點擊；而移動裝置的觸碰式螢幕，也無法出現手型來暗示可點物件…
👉 這些都間接導致「使用者點擊的不確定性，學習成本提高，以及誤觸的問題。」
在閱讀Nielsen / Norman的相關研究後雖然有點豁然開朗，但此為2015年的全英文文章，故筆者除了原文翻譯外又綜合近年趨勢與工作心得，重點整理出實用的設計小筆記，希望能讓有相同困擾的你/妳釐清盲點，使用扁平化設計不再只是跟隨趨勢而已，還能理解其背後的影響與演進。當然也歡迎大家能多多交流工作上的使用經驗!
在解析過度扁平化設計造成的UX問題前，我們需要先理解介面設計歷年的風格演進~
3分鐘理解介面設計風格的演化
扁平化常被認為是3D風格、擬真隱喻風格 (skeuomorphic) 和情境寫實風格(Realism)的反向。
1. 3D 風格(Three-Dimensional Effects)
圖形用戶介面初期，常採用 偽3D效果（陰影、漸變、光澤）來幫助用戶解讀視覺層次結構，並藉此了解元素間的互動關係。我們所熟知的3D效果按鈕，看起來像是可被按下；而搜尋欄位則被設計成凹陷或空洞狀以引發用戶填入文字的慾望。
2. 擬真隱喻風格 ( 原文為 Skeuomorphism，筆者自翻為擬真隱喻風格)
此風格是透過模仿現實世界的物件外觀及特性，來幫助用戶了解如何使用介面。這種介面往往具有非必要的裝飾且善用「隱喻」，以協助使用者應用該物件的先前知識來操作。
3. 情境式寫實風格( 原文為 Realism，筆者自翻為情境式寫實風格)
寫實主義是設計風格的一種，本著於美學因素而模仿實際物件的物理特性或紋理，並不特別強調任何形式的隱喻來幫助用戶理解如何使用介面。
看到這兒你可能會覺得擬真隱喻風格與情境式寫實風格好難分辨，兩者主要的區別在於:
擬真隱喻風格善用物件的物理特性與隱喻，透過習慣的知識認知來幫助用戶理解介面。而情境式寫實風格則基於純粹的美學目的，使用模仿物理世界的視覺元素和紋理來讓使用者沉浸於介面情境。因此也可說這兩種風格一個是為了讓用戶易於理解而設計，一個則是為了設計而設計。
4. 扁平化風格(Flat Design)
2011年，微軟Metro設計風格和Windows 8的發布為扁平化設計開啟先端。微軟稱此種新風格為“真正的數位化”。
與前述的設計風格不同，扁平化風格為了能讓用戶更關注內容的本質，因此大量移除可能使其分心的裝飾性設計(例如，可點擊元件的陰影、紋理與光澤等) 轉而追求視覺上的簡約，用簡單的形狀以及色彩來替代以往的紋理和光影效果。它被認為是探索數位的可能性，而不嘗試重現物理世界的外觀及隱喻的新的設計方式。
談到這兒，我們還可以更進一步透過蘋果官網來理解以上幾種風格的差異。
2007的蘋果官方首頁(下圖)，可以明顯看出導航欄的樣式被設計為帶有光澤質感的3D標籤，給予用戶的可點擊暗示非常明顯。
2012的蘋果官方首頁(下圖)。標籤隱喻已經消失了，但導航欄仍然顯得光滑圓潤。搜索欄位內嵌陰影，暗示可在其上填入文字。
2015的蘋果官方首頁(下圖)。可以看出整個導航欄，包括標誌已刪除可辨識的陰影或光澤紋理，呈現扁平化風格。然使用者依然可以倚賴慣例(網頁頂部的位置往往會是導航欄)來操作。
由上述我們可以發現在2013年之前，蘋果官網的主流一直是3D風格和擬真隱喻風格。而當近年蘋果主頁改採扁平化風格後，則又更加速了扁平化設計的普及。
一路道來，大家應當已能清楚理解介面設計風格的歷史演變與其特性，然扁平化設計究竟會引出那些可視性問題? 我們先留在下篇討論囉!
下篇傳送門
感謝閱讀到最後的你！
我是 Seal,也是一位UI/UX Designer,希望你們喜歡這次的分享。歡迎追蹤我，拍手鼓勵我，或是有其他問題也可以來信:tsengseal@gmail.com，謝謝!
◈1-5 claps：既然看過了，就來簽個到吧!
◈6-10 claps：表示你喜歡這篇文章！
◈11-20 claps：看完這篇文章我認為很有幫助！
◈21-50 claps：Oops!看來你對這篇很有感覺，我會更努力分享!資料來源
1. Flat-Design Best Practices / 2017
2. Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users / 2015
3. Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency /2015
4. Beyond Blue Links: Making Clickable Elements Recognizable / 2015
