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

上篇,我們已透過介面設計風格的特徵來理解其差異與演化。而其中扁平化設計去材質、去立體化的特性卻也降低了鏈結元件的可視性。

上篇傳送門

下篇筆者將融合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.”

希望以上筆記對大家有所幫助,也歡迎留言交流喔~


感謝閱讀到最後的你!

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