Oops ! 能不能點傻傻分不清.. 設計師必須留意的扁平化設計問題 (下)
上篇,我們已透過介面設計風格的特徵來理解其差異與演化。而其中扁平化設計去材質、去立體化的特性卻也降低了鏈結元件的可視性。
上篇傳送門
下篇筆者將融合NN/g的研究與自身工作心得,歸納出在扁平化風格下鏈結元件的設計建議。共有6個主項目與其個別細項。
1.靜態文字和鏈結文字應使用不同的視覺設計。
文字常成為鏈結元件之一,因此「文字形態」的鏈結應注意:
1.1色彩
靜態文字的顏色不應與超鏈接顏色一樣,不可點擊項目請避免使用藍色。由於近年設計的多樣化,你也可以使用其他顏色,但必須確保兩者有清楚的區隔;若沒有特別的理由需要使用其他顏色,藍色仍然是鏈結色的最佳選擇。
1.2 底線
不可點擊項目請勿使用底線。文字鏈結是否需要底線可藉由所在位置決定,例如使用者已習慣將導航欄(Navigation Bar)和側邊列表位置視為鏈接區域,其上的文字就不需要底線。
2. 始終在可點擊的元件上使用適量的視覺暗示
2.1 按鈕
至少將按鈕設計得接近物理按鈕,可保留矩形(最好帶圓角)以看起來類似傳統按鈕。在扁平化設計中若不使用較重的效果,按鈕也可透過使用陰影和漸變使之看起來能被點擊。
Google的Material Design是flat 2.0的經典範例之一。設計師巧妙使用微妙的陰影和圖層以突顯元件深度,這種設計方式也被稱為“semi flat”,或“flat 2.0”。透過圖層概念暗示元件的前後順序,並借用物理學的隱喻和原理,來幫助使用者理解介面,並解釋內容中的視覺層次結構。
設計師設計按鈕時還須注意勿使不可點擊的項目看起來像按鈕,引起用戶不必要的點擊慾望。
2.2 圖片
點擊時圖片應有變化或反饋(圖片放大、模糊、或角度旋轉等效果)。圖片範圍內的相關元素(例如圖片上的圖標或文字)應都能被點擊。換句話說就是可以增加點擊範圍,並提高被點擊的可能性。除非圖片中的選項被明確呈現,應避免一個圖片卻有多個操作行為。
2.3 符號(Symbols)和圖標(Icon)
使用圖標(Icon)鏈接時,圖標應能被立即識別。除非單一圖標夠直覺(例如:垃圾桶代表刪除),圖標最好能與文字鏈結組合,以指示其可點擊性。當沒有其他可點擊線索存在時,箭頭圖標可能有助於暗示點擊性,但必須謹慎使用,因為它們有時會破壞介面的簡單一致。
3. 提供反饋(Feedback)
即時、明顯的反饋對於使用者經驗始終是重要的,在扁平化設計下的使用者更依賴它來確認該元素是否可被點擊。大部分即時反饋應在0.1秒內回應,若有任何延遲使用者將開始懷疑剛才是否誤點,並可能放棄搜尋其他的潛在鏈結線索。常見的反饋包括:
3.1 視覺變化
透過顯眼的視覺變化凸顯反饋。
3.2 進度指標
點擊後給予使用者明顯的進度回饋,能幫助其理解系統的各種狀態(例如下載、上傳、儲存等..)。
3.3 狀態更新
例如用戶網購的購物車數量變化,或確認操作完成後的立即反饋。
3.4 微互動
微互動在 2016 年於網路間引起廣泛的關注,而它亦將會是 2017 年的趨勢。微互動通常以細微的動畫形式出現,在用戶體驗設計中發揮著至關重要的作用,特別是在行動裝置上,我們每次使用應用程式都會接觸到數以千計的微互動。微互動透過傳達狀態和變化、引導注意力到某些區域,以及為動作提供反饋來協助創造難忘的體驗。
4.元素位置與上下文線索
有時使用者也透過元素所在位置,與周圍上下文來確認可點擊性。在缺少可點擊暗示的環境中,他們會尋找其他線索來協助識別可能的交互元素,這些線索包括:
4.1 元件放置的位置
例如頁面頂部( Page top) 或導航欄 ( Navigation Bar)
4.2 元件中使用的語言
例如「立即購買」或「查詢」
4.3 周圍元素
元素本身可能不建議點擊,但通常會被放在Link to..類似樣式的單詞前,或是其他例子如: 聯絡我們Contact us 或 所在地 Location。
5. 所在位置的前後對比
大幅形象圖片搭配簡約文字的排版,在近年各大官網首頁設計頻頻出現,這種趨勢下更須確保圖片、文字和元素間需能清晰易讀,且能被辨識。
筆記到此,若一時之間還無法記住, NN/g Group 也貼心提供了清單幫助設計師快速檢視自己的設計有沒有問題:
(1) 可點擊線索的設計在整個網站上是一致的。
(2) 鏈接元素是顯著的,且具有適當的對比度。
(3) 鏈接元素位於用戶期望的位置。
(4) 沒有虛構的目標: 看起來可點擊,但實際上無法點擊的物件。
(5) 與同一內容相關聯的所有元素(圖標、圖像、文本)都指向同一頁面。
(6) 當點擊和結果動作之間出現時間停滯時,提供足夠強烈的反饋。
結論
與任何設計趨勢一樣,平衡和適度才是最佳解。
扁平化設計能夠成為強大的設計美學,但運用不好也可能成為壓垮駱駝的最後一根稻草。設計師們得記住,點擊的不確定性不僅僅只是用戶正面臨的問題,也意味著他們很有可能放棄原本來這兒的目的而轉往他處。
請勿因為追求趨勢,或認為年輕用戶可以更快適應設計不良的介面,而忽略這些易用性設計的細節。除了大方向的視覺一致性外,「微互動」也將會愈來愈流行。雖然它們是應用程式的小功能,甚至有時候還不被列為功能,但善用微互動,它們往往能為扁平化設計提供優秀的用戶體驗。
正如 Jakob Nielsen所說的:
“生命太短,我們沒有時間浪費在嘗試錯誤(點擊)上。 “Life is too short to click on things you don’t understand.”
希望以上筆記對大家有所幫助,也歡迎留言交流喔~
感謝閱讀到最後的你!
我是 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