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

評論
評論

本文為作者投稿,經 INSIDE 編審後,統合 篇刊載。作者 Seal Tseng,一位喜愛看恐怖漫畫刺激靈感的設計師,卻被「設計業也將被 AI 人工智慧取代」的論點嚇到 !! 因此積極潛進高科技資訊產業,找尋能不被滅亡的答案 :P。/ 也是「重曝好時光 Double Exposure the Good Old Days。

源起

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

糾結點不知各位 UI/UX 設計師是否也曾遇過?

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

然扁平化設計去材質、去立體化的特性雖為介面設計開創更多可能性,但過度的簡化與使用習慣的改變,致使我們無法依賴過去的慣例來判斷元件是否可被點擊;而移動裝置的觸碰式螢幕,也無法出現手型來暗示可點物件…這些都間接導致使用者點擊的不確定性,學習成本提高,以及誤觸的問題。

在閱讀 Nielsen / Norman 的相關研究後雖然有點豁然開朗,但此為 2015 年的全英文文章,故筆者除了原文翻譯外又綜合近年趨勢與工作心得,重點整理出實用的設計小筆記,希望能讓有相同困擾的你/妳釐清盲點,使用扁平化設計不再只是跟隨趨勢而已,還能理解其背後的影響與演進。當然也歡迎大家能多多交流工作上的使用經驗!

(註一) 扁平化設計=俗稱的「平面化設計」,為了區隔平面設計讓大家更好理解故用之。

(註二) 鏈結也就是介面中常見的「超連結」,可能會以按鈕或是文字、圖像形式出現而總稱之。

在解析過度扁平化設計造成的 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 風格和擬真隱喻風格。而當近年蘋果主頁改採扁平化風格後,則又更加速了扁平化設計的普及。

接下來將融合 NN/g 的研究與自身工作心得,歸納出在扁平化風格下鏈結元件的設計建議。共有 6 個主項目與其個別細項。

1. 靜態文字和鏈結文字應使用不同的視覺設計

文字常成為鏈結元件之一,因此文字形態的鏈結應注意:

1.1 色彩 靜態文字的顏色不應與超鏈接顏色一樣,不可點擊項目請避免使用藍色。由於近年設計的多樣化,你也可以使用其他顏色,但必須確保兩者有清楚的區隔;若沒有特別的理由需要使用其他顏色,藍色仍然是鏈結色的最佳選擇。

1.2 底線 不可點擊項目請勿使用底線。文字鏈結是否需要底線可藉由所在位置決定,例如使用者已習慣將導航欄 (Navigation Bar) 和側邊列表位置視為鏈接區域,其上的文字就不需要底線。

Patient Safety and Quality Healthcare:一個失敗的例子: 標題不可點擊但卻使用藍色;圖像可被點擊,但它們看起來又像靜態圖像。(圖片來源 / https://www.nngroup.com/articles/flat-design/)
星巴克網站:很顯然為了與企業標識一致,網站上的超鏈結是綠色的。而頁面右側的項目列表雖沒有底線,但可透過它們的位置(在狹窄的列中)和格式(框和項目符號)讓用戶知道他們是可被點擊的。(圖片來源/https://www.nngroup.com/articles/clickable-elements/)

2. 始終在可點擊的元件上使用適量的視覺暗示

2.1 按鈕 至少將按鈕設計得接近物理按鈕,可保留矩形(最好帶圓角)以看起來類似傳統按鈕。在扁平化設計中若不使用較重的效果,按鈕也可透過使用陰影和漸變使之看起來能被點擊。

Google 的 Material Design 是 flat 2.0 的經典範例之一。設計師巧妙使用微妙的陰影和圖層以突顯元件深度,這種設計方式也被稱為“semi flat”,或“flat 2.0”。透過圖層概念暗示元件的前後順序,並借用物理學的隱喻和原理,來幫助使用者理解介面,並解釋內容中的視覺層次結構。

Material Design 對按鈕物件添加視覺效果,模擬點下時的物理現象,讓用戶感覺好像 真的「點下」。(圖片來源/擷取自 https://www.behance.net/gallery/23056487/Material-Design-Button-Animation)

設計師設計按鈕時還須注意勿使不可點擊的項目看起來像按鈕,引起用戶不必要的點擊慾望。

Menagerie Climb:那個橙色的方型封閉區域是一個按鈕嗎?不是。形狀和標籤使它看起來像一個按鈕。避免在頁面上有許多不同大小的彩色框。當相似的項目相互競爭時,人類視覺會被干擾而難以挑出可點擊的元素。(圖片來源/https://www.nngroup.com/articles/clickable-elements/)
TaskRabbit:這四個按鈕無須擬真化就能夠輕易被辨識– 原因在於這四個按鈕的邊界清晰,視覺設計與行為一致,且沒有其他元素與之競爭。(圖片來源/https://www.nngroup.com/articles/clickable-elements/)

2.2 圖片 點擊時圖片應有變化或反饋 (圖片放大、模糊、或角度旋轉等效果)。圖片範圍內的相關元素(例如圖片上的圖標或文字)應都能被點擊。換句話說就是可以增加點擊範圍,並提高被點擊的可能性。除非圖片中的選項被明確呈現,應避免一個圖片卻有多個操作行為。

Loftwork: 大區塊狀的按鈕包含了圖片與文字被視為同一個感應區,感應區被設計 為滑鼠移過去時增加一層不透明白色,顏色的變化讓用戶清楚知道這邊是可點擊區,能連結至目標頁面。(圖片來源/http://www.loftwork.com/projects/)

2.3 符號 (Symbols) 和圖標 (Icon) 使用圖標 (Icon) 鏈接時,圖標應能被立即識別。除非單一圖標夠直覺 (例如: 垃圾桶代表刪除),圖標最好能與文字鏈結組合,以指示其可點擊性。當沒有其他可點擊線索存在時,箭頭圖標可能有助於暗示點擊性,但必須謹慎使用,因為它們有時會破壞介面的簡單一致。

CNN: 此頁面上的箭頭為黑色標題發出可點擊線索。若沒有箭頭,用戶可能不知道黑框可以點擊。(圖片來源/http://www.loftwork.com/projects/)
Rader Joe’s: 如預期,Announcement 下的列表是被可點擊的。藍色為其提供強烈的提示。但圖像下方的列表也列出的同樣花俏的圖標卻不可點擊,這種設計不一致性往往導致混亂。(圖片來源/http://www.loftwork.com/projects/)

3. 提供反饋 (Feedback)

即時、明顯的反饋對於使用者經驗始終是重要的,在扁平化設計下的使用者更依賴它來確認該元素是否可被點擊。大部分即時反饋應在 0.1 秒內回應,若有任何延遲使用者將開始懷疑剛才是否誤點,並可能放棄搜尋其他的潛在鏈結線索。常見的反饋包括:

3.1 視覺變化 透過顯眼的視覺變化凸顯反饋。

Listener’s Playlist / Designer: Anzi : UI 設計貌似稍微漂浮起來了一點,加入了一些小的變化,使視覺效果顯得更加立體,扁平還是那個扁平,視覺上卻給觀者不一樣的體驗。

3.2 進度指標 點擊後給予使用者明顯的進度回饋,能幫助其理解系統的各種狀態 (例如下載、上傳、儲存等..)。

Wix: 點擊儲存 ICON 出現的進度條回饋,能讓使用者理解正在儲存資料,並更有耐心等待其儲存完畢再進行其他使用行為。(圖片來源/https://www.wix.com/)

3.3 狀態更新 例如用戶網購的購物車數量變化,或確認操作完成後的立即反饋。

3.4 微互動 微互動在 2016 年於網路間引起廣泛的關注,而它亦將會是 2017 年的趨勢。微互動通常以細微的動畫形式出現,在用戶體驗設計中發揮著至關重要的作用,特別是在行動裝置上,我們每次使用應用程式都會接觸到數以千計的微互動。微互動透過傳達狀態和變化、引導注意力到某些區域,以及為動作提供反饋來協助創造難忘的體驗。

Photo Credit: Ivan Bjelajac : 透過精緻小巧的微互動設計讓使用者認知到現在正在發生什麼事、剛剛發生了什麼事、接下來又要發生什麼事。(圖片來源/擷取自 https://www.inside.com.tw/2016/12/23/web-design-predictions-for-2017)

4. 元素位置與上下文線索

有時使用者也透過元素所在位置,與周圍上下文來確認可點擊性。在缺少可點擊暗示的環境中,他們會尋找其他線索來協助識別可能的交互元素,這些線索包括:

4.1 元件放置的位置,例如頁面頂部 ( Page top) 或導航欄 ( Navigation Bar)

4.2 元件中使用的語言,例如「立即購買」或「查詢」

4.3 周圍元素 元素本身可能不建議點擊,但通常會被放在 Link to.. 類似樣式的單詞前,或是其他例子如: 聯絡我們 Contact us 或所在地 Location。

teavana.com:由於 Teavana 使用簡單的視覺設計和相對傳統的電子商務佈局,因此儘管介面設計非常平坦,但用戶無需導航,頂部導航欄和預期位置都可幫助用戶快速識別其目的。(圖片來源/https://www.nngroup.com/articles/flat-design-best-practices/)

5. 所在位置的前後對比

大幅形象圖片搭配簡約文字的排版,在近年各大官網首頁設計頻頻出現,這種趨勢下更須確保圖片、文字和元素間需能清晰易讀,且能被辨識。

sabemasson.com :主要動作按鈕設計為深灰色色塊,底下襯著黑白照片已導致按鈕近乎消失在照片中。若能使用差異較大的顏色便可輕鬆改善這種不良設計,例如如 UI 中已經使用的淺藍色。(圖片來源/https://www.nngroup.com/articles/flat-design-best-practices/)

筆記到此,若一時之間還無法記住, NN/g Group 也貼心提供了清單幫助設計師快速檢視自己的設計有沒有問題:

  1. 可點擊線索的設計在整個網站上是一致的。
  2. 鏈接元素是顯著的,且具有適當的對比度。
  3. 鏈接元素位於用戶期望的位置。
  4. 沒有虛構的目標,看起來可點擊,但實際上無法點擊的物件。
  5. 與同一內容相關聯的所有元素(圖標、圖像、文本)都指向同一頁面。
  6. 當點擊和結果動作之間出現時間停滯時,提供足夠強烈的反饋。

結論

與任何設計趨勢一樣,平衡和適度才是最佳解。

扁平化設計能夠成為強大的設計美學,但運用不好也可能成為壓垮駱駝的最後一根稻草。設計師們得記住,點擊的不確定性不僅僅只是用戶正面臨的問題,也意味著他們很有可能放棄原本來這兒的目的而轉往他處。

請勿因為追求趨勢,或認為年輕用戶可以更快適應設計不良的介面,而忽略這些易用性設計的細節。除了大方向的視覺一致性外,「微互動」也將會愈來愈流行。雖然它們是應用程式的小功能,甚至有時候還不被列為功能,但善用微互動,它們往往能為扁平化設計提供優秀的用戶體驗。

正如 Jakob Nielsen 所說,“生命太短,我們沒有時間浪費在嘗試錯誤 (點擊) 上。 “Life is too short to click on things you don’t understand.”

評論