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。
坦，但用戶無需導航，頂部導航欄和預期位置都可幫助用戶快速識別其目的。(圖片來源/https://www.nngroup.com/articles/flat-design-best-practices/)
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
