避免做出爛 UI ，你需要注意什麼
【不是你太笨！是爛 UI 的錯！】 — 非設計師也該學的介面設計常識
--
這幾天看了【不是你太笨！是爛 UI 的錯！】，這本書是許多人推薦的 UI 入門書，內容非常的淺顯易懂。
主要是藉由介紹各種「爛 UI」的例子，來希望讀者思考「為何會做出爛 UI？」、「要如何才能改善？」、「該怎麼做才不會做出爛 UI？」
裡面有許多讓人看了會心一笑、感同深受的例子，在這邊就不一一列出來了，這篇主要是想記錄在裡面看到的一些做 UI 需要注意的概念。
ㄧ、線索
在設計 UI 時，要特別留意在適合的場所提供容易了解的線索給使用者，同時在準備線索時，也要想辦法強調這些線索。
如果你的產品為使用者提供了引發錯誤行為的線索，那就會造成他們在使用上的不便，就像是無法馬上判斷要推還是拉的門。
另外，線索有時候是來自其他人的行為。因為人類會把別人的痕跡當作線索來採納，而這個痕跡造成的錯誤線索也就會影響後續人們的行動。所以我們要避免錯誤的發生，一但有人留下了錯誤的痕跡，也得立刻處理，阻止繼續誤導下去。
二、回饋
在這章提到了使用者通常不會注意到與本身目的不一致的資訊，這在心理學上稱作「選擇性注意（Selective Attention）」。人的知覺會因為一個人興趣來選擇性發揮作用，因此若要避免不好的 UI ，就要傳回可以引起使用者注意的適當回饋，例如警告等重要回饋要用聲音、顏色、動畫來強調。
當我們給予的使用者動作的回饋變化不明顯、回饋太小、或是出現令人誤會的回饋時，他們就無法了解到到底是麼原因讓他們無法完成想要達成的目的，造成使用者的困擾。
在設計回饋時，也必須考慮到人類的能力。如果顯示速度太慢，會讓人感到不太耐煩，但是如果速度太快，又會讓使用者沒注意到，一樣會發生問題。
三、配對關係
一對一的配對關係
例如顏色，他用在配對關係上的效果非常顯著，但如果要使用它來表示就應該賦予其意義。例如包裝與口味的配對，如果高麗菜口味是紫色，豌豆口味是粉紅色，葡萄口味是白色就會繞人覺得很奇怪。
距離的配對關係
想要顯示兩者的配對關係時，距離也是非常重要的因素。像是以下設計就有可能會讓人不確定到底是選到的選項是前者還是後者。所以在製作網頁時，也要特別注意空間的運用。
四、群組化
人類把某個集合當作群組（完形）來認知的結構，在心理學領域稱作「體制化法則（群化法則）」，又以下五種最為有名。
接近法則 Proximity
與距離較遠的個體相比，距離較近的個體之間，有著比較強烈的關係，因此容易被融為是同一群組。
像是以下色塊，當我們把三個擺在一堆時，我們的大腦就會自動把它看成是兩個群組。
這種作法也常見於線上表格的填寫，我們會把相關的標題、功能、按鈕等排列在一起，或是表單的選項放在鄰近處。這不僅僅是方便使用者操作，更可以明確的告訴使用者這些功能或選項是互相有關聯性的。
相似法則 Similarity
同形狀、同顏色、同方向等具有共同特徵的圖形，使用者會自動為它們建立起關聯，並把它們認知為同一個群組。
如下圖所示，當一連串方塊和一連串的圓形並排時，我們會看成一列方塊和兩列圓形。
對應用到介面設計上，Facebook 上的按鈕圖標 (按讚Like / 留言Comment / 分享Share) 雖然功能各不相同，但由於它們在視覺上顏色、大小、排列上的相似性，用戶會將它們視認為同一級別的按鈕。
良性連續法則 Continuation
連續性元素容易被認知為相同群組。
如下圖所示，左半邊這張圖我們會把 A、C 視為同一群組，B、D 則為另一群組。另外右半邊這張圖，我們並不會因為中間有橫切一條直線而阻礙我們辨識它為一條連續的波浪型。
而這樣的概念也常應用於瀑布式網站的佈局。
即便區塊式的卡片內容因頁面高度被截斷，由於連續性的影響，大腦並不會因為宮格被裁切或是只露一部分而阻礙我們辨識它，藉由這樣的設計來觸發使用者繼續往下瀏覽。
閉合法則 Closure
因為某個圖形產生的封閉區域會加強群組的作用。
除了用框線清楚區分群組的方法，當我們碰到複雜或是不完整的圖形時，我們的大腦也會自動填補元素和元素間的空白部分，將複雜的元素簡化。儘管中間沒有接續的關係，我們仍然會傾向於看成一個完整的圖形，以節省我們的記憶空間並快速辨識物件。
例如以下 Logo 設計的例子：
共同命運法則 Common Fate
即使不同形狀、不同顏色，只要做出相同的動作的個體，就容易被認知為同一群組。這個原則常用在動態的呈現上。
上圖是 Material Design 中，常使用到的漂浮按鈕 (Floating Action Button)，如果一個按鈕裡面有多種功選或選擇，就會以像是上面圖片的方式呈現，這個設計是為了節省移動裝置的可使用空間，而將多種功能或選項藏在其中。因為類似的動態與設計，且幾乎在同一個時間點出現不同選擇，我們的大腦就會意識到，這些功能是一個整體。
五、習慣
一般人會從平日的使用習慣中建立規則，例如綠色代表開啟，紅色代表關閉，所以在做設計時也需要把這些習慣納入考量，才可以減少 UI 造成的錯誤。
這裡也提到探討文字與文字顏色組合概念的「史楚普效應（Stroop Effect）」，是指眼睛同時看到「文字的意義」與「文字的顏色」時，兩者資訊互相干擾的現象。而在這種效應的作用下，使用者就容易對產品產生混淆。
六、限制
物理性限制
指與物體本身的物理特性有關的限制。例如按鈕被蓋子包圍，如果不拿掉蓋子就無法按下按鈕。這種限制對於一般人來說，非常容易了解，可以確實發揮效用。
意義性限制
指使用者配合設置場所及狀況來決定的限制，這種限制需要運用知識。例如電腦桌面的垃圾桶圖示、智慧型手機上的電子郵件圖示等等，是以知識基礎，了解狀況或外界狀態來確定動作的可能性。
文化性限制
是與習慣或經驗有密切關係的限制。例如面對玻璃門要進入室內時，不會破壞玻璃門，而是打開大門。或是用顏色當作識別男女廁所的方法，也是文化性限制的一種。
理論性限制
指從某些集合或系列中，按照順序思考，來達到限制的目的。例如完成拼圖時，通常不可能會有剩下的拼片。
有效地利用這四種限制，減低操作錯誤的可能，才能趨近於好用的 UI 。
七、十大可用性原則
- 系統狀態的可見性（Visibility of system status ）
系統必須在合理的時間內，提供適當的回饋，讓使用者了解目前的狀況。
2. 系統與真實世界的協調性（Match between system and the real world）
系統應該運用使用者熟悉的詞句與概念，同時必須根據真實世界的習慣，以自然、理論性的順序來顯示訊息。
3. 使用者的操控自由（User control and freedom）
使用者可能會操作錯誤，所以必須為他們準備可以直接離開的緊急出口。
4. 一慣性與標準化（Consistency and standards）
產品的設計不該讓使用者感到疑惑，應該要有統一的介面。
5. 預防錯誤（Error prevention）
要提供適當的錯誤訊息，更重要的是採取預防發生問題的謹慎設計。
6. 記憶最小化（Recognition rather than recall）
清楚顯示物件、動作、選項，盡量減少使用者需要記憶的訊息。
7. 彈性與效率（Flexibility and efficiency of use）
提供高效率的操作方法給高階使用者，以提升溝通速度，還可以讓使用者自訂常用的動作。
8. 美觀的簡約設計（Aesthetic and minimalist design）
設計需要簡潔明瞭，突出重點，弱化或剔除無關或很少用到訊息。
9. 幫助使用者辨識錯誤、偵測、恢復（Help users recognize, diagnose, and recover from errors）
系統應以簡單明瞭的詞彙來表現錯誤訊息，清楚指出問題，並提供有建設性的解決對策。
10. 幫助說明與操作手冊（Help and documentation）
最理想的系統是即使沒有操作手冊也能使用，但是偶而也可以提供幫助說明。這種訊息必須能搜尋，同時整理的很精簡。
以上就是這次閱讀後所整理出來的一些概念！最後，如果大家喜歡我的分享或是有什麼問題的話，歡迎留言讓我知道，當然也絕對歡迎多拍手 👏🏻
👏🏻1~20下：感謝分享，到此一遊。
👏🏻21~30下：覺得這篇文章對你有一點幫助。
👏🏻31~50下：太棒了，覺得獲得很大的幫助！期待之後的分享！
