Oops ! 能不能點傻傻分不清.. 設計師必須留意的扁平化設計問題 (上)

一段小小的介面設計史

源起

扁平化設計Flat Design(*1)雖已是老生常談,然想寫這篇文章,始因於筆者常為了如何設計出適當的扁平化風格鏈結(*2)而苦惱。

(*1)扁平化設計=俗稱的「平面化設計」,為了區隔平面設計讓大家更好理解故用之。
(*2)鏈結也就是介面中常見的「超連結」,可能會以按鈕或是文字、圖像形式出現而總稱之。

不知各位設計師是否也曾遇過類似情況?

傳統以來,介面鏈結都被設計成具材質觸感、立體化且具光澤的形狀,除了能有效暗示這是個「能被點擊」的物件外,還可突顯其「作用範圍」避免誤觸。

然扁平化設計去材質、去立體化的特性雖為介面設計開創更多可能性,但過度的簡化與使用習慣的改變,致使我們無法依賴過去的慣例來判斷元件是否可被點擊;而移動裝置的觸碰式螢幕,也無法出現手型來暗示可點物件…

👉 這些都間接導致「使用者點擊的不確定性,學習成本提高,以及誤觸的問題。」


在解析過度扁平化設計造成的UX問題前,我們需要先理解介面設計歷年的風格演進~

3分鐘理解介面設計風格的演化

扁平化常被認為是3D風格、擬真隱喻風格 (skeuomorphic) 和情境寫實風格(Realism)的反向。

1. 3D 風格(Three-Dimensional Effects)

圖形用戶介面初期,常採用 偽3D效果(陰影、漸變、光澤)來幫助用戶解讀視覺層次結構,並藉此了解元素間的互動關係。我們所熟知的3D效果按鈕,看起來像是可被按下;而搜尋欄位則被設計成凹陷或空洞狀以引發用戶填入文字的慾望。

This Windows 95 dialog box (圖片來源 / https://www.nngroup.com/articles/flat-design/)

2. 擬真隱喻風格 ( 原文為 Skeuomorphism,筆者自翻為擬真隱喻風格)

此風格是透過模仿現實世界的物件外觀及特性,來幫助用戶了解如何使用介面。這種介面往往具有非必要的裝飾且善用「隱喻」,以協助使用者應用該物件的先前知識來操作。

Amazon Kindle Fire平板電腦的早期型號就採用具有木質紋理的擬真書架設計。書架隱喻能夠幫助用戶將以前關於書架(作為存儲和組織物理媒體的場所)的知識轉移到數位環境中。書架和木質紋理與系統的功能無關,但可以加強聯想與視覺效果。(圖片來源 / https://www.nngroup.com/articles/flat-design/)

3. 情境式寫實風格( 原文為 Realism,筆者自翻為情境式寫實風格)

寫實主義是設計風格的一種,本著於美學因素而模仿實際物件的物理特性或紋理,並不特別強調任何形式的隱喻來幫助用戶理解如何使用介面。

像早期的Kindle Fire平板電腦,Sprouts雜貨店網站使用3D木質紋理,但是這種設計只是單純為了美感的一致性。(圖片來源 / https://www.nngroup.com/articles/flat-design/)

看到這兒你可能會覺得擬真隱喻風格情境式寫實風格好難分辨,兩者主要的區別在於:

擬真隱喻風格善用物件的物理特性與隱喻,透過習慣的知識認知來幫助用戶理解介面。而情境式寫實風格則基於純粹的美學目的,使用模仿物理世界的視覺元素和紋理來讓使用者沉浸於介面情境。因此也可說這兩種風格一個是為了讓用戶易於理解而設計,一個則是為了設計而設計。

4. 扁平化風格(Flat Design)

2011年,微軟Metro設計風格和Windows 8的發布為扁平化設計開啟先端。微軟稱此種新風格為“真正的數位化”。

與前述的設計風格不同,扁平化風格為了能讓用戶更關注內容的本質,因此大量移除可能使其分心的裝飾性設計(例如,可點擊元件的陰影、紋理與光澤等) 轉而追求視覺上的簡約,用簡單的形狀以及色彩來替代以往的紋理和光影效果。它被認為是探索數位的可能性,而不嘗試重現物理世界的外觀及隱喻的新的設計方式。

為了讓用戶可以更專注在內容上,Metro Style 刪除擬真的紋理和光影效果,只留下 簡單的圖片文字與色塊。 (圖片來源 / https://www.technorms.com/11172/install-uninstall-metro-apps-windows-8 )

談到這兒,我們還可以更進一步透過蘋果官網來理解以上幾種風格的差異。

2007的蘋果官方首頁(下圖),可以明顯看出導航欄的樣式被設計為帶有光澤質感的3D標籤,給予用戶的可點擊暗示非常明顯。

(圖片來源 / https://www.nngroup.com/articles/flat-design/)

2012的蘋果官方首頁(下圖)。標籤隱喻已經消失了,但導航欄仍然顯得光滑圓潤。搜索欄位內嵌陰影,暗示可在其上填入文字。

(圖片來源 / https://www.nngroup.com/articles/flat-design/)

2015的蘋果官方首頁(下圖)。可以看出整個導航欄,包括標誌已刪除可辨識的陰影或光澤紋理,呈現扁平化風格。然使用者依然可以倚賴慣例(網頁頂部的位置往往會是導航欄)來操作。

(圖片來源 / https://www.nngroup.com/articles/flat-design/)

由上述我們可以發現在2013年之前,蘋果官網的主流一直是3D風格和擬真隱喻風格。而當近年蘋果主頁改採扁平化風格後,則又更加速了扁平化設計的普及。


一路道來,大家應當已能清楚理解介面設計風格的歷史演變與其特性,然扁平化設計究竟會引出那些可視性問題? 我們先留在下篇討論囉!

下篇傳送門


請動動手幫我點 5 次 Like,完全免費,但我能拿獎勵買餅乾吃(邊吃邊寫文章 >3)

感謝閱讀到最後的你!

我是 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

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Seal-美術系跨製造業的產品設計師

Written by

理性>感性,所以練習感性;圖像>文字,所以嘗試寫作。我是位在半導體產業工作,且深怕被AI人工智慧取代的產品設計師 !! (☞•́⍛•̀)☞ 因此對科技趨勢極有興趣,只為了找尋能不被滅亡的答案 :P。https://dribbble.com/sealtseng

AAPD — As A Product Designer

AAPD 專注於分享數位產品設計的相關資訊,並且致力在平台上創造更多的交流與互動,我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等,希望透過這些知識的傳遞,能夠降低每位設計師成長的過程中所遇到的阻礙。歡迎來信投稿:aapdgo@gmail.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade