心理學在 UI / UX 設計中的運用（上）
在進行產品設計的過程中，設計師必須掌握一些基礎的設計原則，來讓用戶體驗上可以符合一定水準的品質，今天我們會介紹幾個重要的設計心理學幫助設計師領域的朋友可以對於產品設計的掌握度更高。
這次我們會介紹 8 個心理學的法則：
- 席克定律 Hick’s Law
- 費茲定律 Fitts’ Law
- 米勒定律 Miller’s Law
- 格式塔原則 Gestalt Principles
- 泰思勒定律 Tesler’s Law
- 防錯原則
- 奧卡姆剃刀原理 Occam’s Razor
- 雷斯多夫效應 Von Restorff Effect
因為內容比較多，將會分成上下兩篇來介紹，除了認識這些心理學的原理，你也可以想一想，你覺得很棒的設計，是否有符合這些原則。
那我們就開始吧！
席克定律 Hick’s Law
當一個人面對的選擇愈多時，作出決定花費的時間愈長。
這個定律應該蠻好理解的，當選擇的數量愈多、複雜度愈高，用戶就需要花更多時間做出選擇。若要帶給使用者良好的用戶體驗，應該要透過設計減少用戶決策的時間，當選擇太多太複雜、無法快速完成操作，用戶可能就會離開了。除了盡可能減少選項的數量，如果還是必須有較多的選項時，也可以運用以下方法來減輕用戶選擇時的負擔。
TIP 1：對選項做權重區分
在一個頁面中，一定會有用戶比較常用跟幾乎不使用的資訊，可以在視覺上將這兩者做區分，弱化使用頻率低的，或是收納或隱藏起來，讓選項變少，提高用戶使用時的效率。
TIP 2：分類選擇
跟一次展開 10 個選項比起來，分成兩個菜單各 5 個選項，用戶可以用更短的時間做決策。這個手法很常應用在電商產品，因為選項多，使用分類的方式可以有效的降低用戶選擇的時間，操作更方便。
TIP 3：劃分步驟
除了用分類的方式，也可以拆分為幾個步驟，讓使用者在操作時不受到其他資訊干擾，透過流程的優化來提高決策效率。這個應用常見於註冊、結帳等需要輸入較多資訊的流程。
費茲定律 Fitts’ Law
更大、更近的東西更容易操作。
費茲定律說的是，從起點移動到目標位置花費的時間會受到兩個參數影響，分別是到目標的距離(D)及目標的大小(W)，可以用數學公式表示：T = a + b log2(1+ D/W)。
按鈕該放在哪裡？大小要多大？這些問題就跟費茲定律有關。
TIP 1：在合理的範圍內，愈大愈容易點擊
目標操作區域在合理的範圍內，愈大愈容易點擊，以下圖的產品為例，不論是輸入區域跟操作按鈕 Expedia 都比較大一點，操作也會比較容易一點，視覺上的引導性也比較強。
TIP 2：運用快捷操作
快捷操作是減少移動距離的一個常用的方式，比如移動端的長按操作跟電腦端的點擊右鍵，將操作區域安排在點擊的位置旁邊，提高操作的效率。
TIP 3：螢幕邊角適合放重要的按鈕和選單
你有發現，不論是 Windows 系統的「開始」或是 Mac OS 的 Dock 都放置在畫面的邊界，這是因為螢幕的邊界是最容易到達的位置，不論你怎麼移動滑鼠他都會在螢幕的邊緣停下來。
移動端也是相同的道理，當你在操作時，手指點擊也不會超出螢幕外，所以許多主要的操作也會放在螢幕的邊角。
米勒定律 Miller’s Law ( 7±2 法則 )
人的大腦平均能同時處理 7 個項目
由於人短期記憶的儲存空間限制，最多大約能記住 5~9 個單位，所以也就得到了魔法數字 7 ( Magic Number 7 ) 這個概念，超過 9 個大腦出錯的機率就會提高了。像是你在記手機號碼、身分證字號之類的資訊，通常都會把數字拆開方便記憶吧，另外信用卡上面的數字會分成 4 個 4 個一組，也是相同的道理。
米勒定律在設計上的運用其實類似席克定律，可以透過減少選項或是將選項分類，讓設計更一目了然。
TIP 1：控制入口、導航的數量
你有發現，App 的底部導航大多不會超過 5 個，大部分的網站導航也不會超過 9個，這是為了減少認知負荷，讓用戶可以快速的理解產品操作。
TIP 2：資訊很多的時候就把資訊分段
如果資訊真的很多，適當地將內容分段也可以幫助用戶更好的閱讀，就像是一篇文章如果完全沒有分段，也會讓人讀得很辛苦吧。
格式塔原則 Gestalt Principles
格式塔原則是基於格式塔心理學（又稱為完形心理學）而發展出來的一些原則，這邊會介紹幾個跟 UI 比較相關的原則。
1. 相似性 (Similarity)
相似的東西會被視為一個整體
當物件的特徵相似，不論是顏色、形狀、大小、排列…等等，大腦會自動將這些物件視為一個整體。在界面上的應用，我們會把同樣層級的資訊設計成相似的樣式，比如 App 的底部導航，都會設計成風格統一的樣式；另外在一些圖表的展示，用同樣的顏色代表相同的資訊，以便用戶閱讀理解。
TIP 1：同樣的資訊使用同樣的樣式
以下面這張圖為例，我們會自然地將圓角矩形的圖標視為一個群組，後面文字的部分視為另一個群組，不需要把每一列的內容都看完，就能夠將圓角矩形的部分全部理解為產品的圖標，而後面文字的部分是產品名稱及分類，除了視覺上看起來整齊舒服，也能讓它們與特定資訊產生連結。
2. 接近性 (Proximity)
距離相近的東西會被視為一個整體
我們的大腦會自動把距離接近的物體視為一個群組，從下面這個圖就可以發現，我們在看圖 B 的時候會自動把圓形分成 3 個跟 6 個兩組。
TIP 1：將關聯的資訊組成群組
接近性經常會跟相似性同時出現，我們用同一個界面來看，根據相似性我們可以快速分辨不同元素表達的資訊，而根據接近性，這些不同類型的元素因為距離較近，容易被認為是相關的，這整個區塊自然就被視為一個整體，成為一個 App 展示的物件，而當相似性跟接近性同時出現時，接近性的影響往往會大於相近性。
3. 連續性 (Continuity)
連續的個別物體會被視為一個整體
我們的視覺比較傾向於連續的形式，即使被截斷也不影響我們判斷，以圖 B 為例，雖然兩個線段交疊相互截斷，我們仍然會將這個圖形判斷為一條曲線跟一條直線。
TIP 1：露出一部分的元素，提示用戶後面還有更多內容
連續的物體即使被截斷或是只露出一小部分，因為受連續性影響，大腦然仍會判斷後面還有內容，這就是在界面設計時經常使用的手法。
瀑布流的網頁設計，即時卡片被截斷，我們仍然知道下面還有內容，會自然地向下瀏覽。
在移動端的導航、卡片等也經常使用這樣的手法，我們會故意露出一點文字或卡片，提示用戶後面還有更多內容。
4.圖與地 ( Figure-Ground )
我們的大腦會將畫面分為主體跟背景
當畫面中有個物體相對於其他部分來得明顯，我們的大腦會自動將它視為主體 ( 圖 )，周圍的部分則視為背景 ( 地 )，這個會有助於我們對重要資訊跟次要資訊的感知。
TIP 1：突出主體，弱化背景
在設計上，我們可以透過對比度、顏色、大小…等方式突出主體，並且弱化背景，來抓住用戶的注意力，先看到我們想讓他們看的內容。在界面上最常見的應用就是對話框 ( Dialog Box ) 等彈出框的設計，除了讓背景暗化，將畫面變模糊也是十分常用的手法。
用顏色來突出主體也是很不錯的方式，弱化背景顏色，突出重要資訊，同時也能用你的標準色強化品牌的印象。
看完這四個心理學的設計法則，你是不是也發現身邊不少產品是符合這些原則的，一個設計中經常會綜合了數個設計原則，大家可以進一步去想一想，這些產品為什麼會這樣設計。當然我們在設計的時候還是要考慮實際的使用者跟情境，不過這些法則仍然可以幫我們了解大腦是怎麼思考的，進而去設計出適合用戶的產品。
這篇暫時就先寫到這裡，下篇會繼續介紹剩下四個心理學法則，敬請期待！
