我們在《#058 資訊架構整理術》中把你產品的骨架，也就是資訊架構(IA)理解清楚了。
接下來的麻煩才剛開始。因為骨架只是「放得進去」，UI 才是「用得下去」。
很多 UI Review 之所以討論不出結論，不是大家沒品味，而是大家只剩一句話「感覺不對」。
然後設計師心裡翻白眼，工程師想沒意見，PM 夾在中間，最後變成「那就照老闆的意思」。
原因也很簡單，沒人敢說「我的判斷是對的」，因為都是靠「感覺」。
但 UI 的「怪」，大部分不是美感問題，是人腦怎麼理解畫面的問題。你不需要會配色、會構圖、會UX，你要會的是一件事，把「感覺不對」轉換成可以執行的指令。
格式塔心理學（Gestalt）剛好就是這樣的工具。
◆ 焦點不是美感，是用戶的理解成本
在 Nielsen Norman Group 的眼動研究中曾指出，使用者在一般頁面上最多只讀 28% 的字。 這意味著使用者不是在閱讀，而是在「掃描」。
當他點開一個畫面，其實只在想兩件事：
- 我現在在哪裡？
- 我現在要做什麼？
如果畫面讓他多想一秒，他不是變聰明，他是開始不安。 再多給他兩秒，他就開始焦慮，接著到處亂點（東點點、西點點），幾次找不到，通常就直接關掉了。
所以 PM Review UI 的任務很單純：降低理解成本，避免誤判。 而格式塔原則，就是在講大腦如何「自動腦補」與「歸納」視覺資訊。
以顏色為例：
UI 的顏色，很多時候不是在拚美，而是在降低誤會。你把按鈕做成灰階，使用者通常會把它當成 不可點擊，就算他手癢想試，點下去沒反應，心裡的評語也只剩一句「啊就壞掉」。在 Material Design 的按鈕規範裡，disabled state 本來就被當成一種狀態處理，不是隨便淡化一下而已。
紅色也一樣。紅色不是「比較醒目」，而是 警示。在 Apple 的介面語意裡，destructive 這種動作就是用來提醒使用者「這可能不可逆」。你把刪除做成紅色，是在替使用者擋一層衝動。
綠色則是另一種訊號，偏向 安全、可以執行、可以放心按。這些都不是萬靈丹，但它們確實能替你省掉很多「使用者多想了一秒」的成本。
◆ 相近性 Proximity：放得近，就等於你在說「它們是一組」
最常見的 UI 怪感，來自一種很尷尬的排列方式。東西明明是一組，你卻把它們拆開。東西根本不同，卻硬排在一起。
你一定看過這種畫面。
- 「Email」標題在左邊，但輸入框離它很遠，中間還夾一段提示文字。使用者第一眼會問 這提示是給誰的
- 「方案價格」跟「立即訂閱」分得很開，按鈕被放到角落。你以為你在排版，使用者只覺得 所以我到底要不要按
相近性原則的白話版本就是 靠近代表同一組。
你把標題、輸入框、錯誤訊息放在合理距離內，是在替使用者把關聯先整理好，讓他少想一次。
PM 在 Review 時可以直接這樣說
「這個標題、輸入框、錯誤訊息要更靠近，讓人一眼知道它們是一組。」
這句話可改，也好改，不會變成吵架。
◆ 相似性 Similarity：長得像，就會被當成同一種東西
相似性帶來的後果更直接。你畫得像，使用者就會用得像。用錯一次，他就開始不信你。接下來每個按鈕他都會多看一眼，停一下，猶豫一下，最後又回到「用試的」。
常見災難
- 主要按鈕和次要按鈕長得一模一樣，只差一點點顏色。使用者很容易按錯，代價還不小
- 可點擊的文字跟純文字長得太像。使用者一直點不到，情緒很快就上來
- 同一個表單裡，有的欄位標題在上、有的在左。有的必填星號在前、有的在後。看似小事，但它會讓人一直停頓，停到最後就不想填了
相似性原則的白話版本是 長相就是承諾。
你長得像按鈕，就要像按鈕一樣可靠。你長得像連結，就要能點。
PM 在 Review 時可以這樣講
「同層級的操作要長得一致。主要動作要更明確，次要動作不要長得像主要動作。」
這不是美感，是避免誤判。
◆ 封閉性 Closure：框起來，就等於你在說「這是一個完整單元」
封閉性最常出現在卡片、區塊、分隔線、背景底色。它的效果也最直接。
你框起來，使用者就會把它當成「一段流程」或「一個區塊」。
你沒框，使用者就會覺得畫面上所有東西都混在一起，需要自己辨認界線。然後他就會一直確認「我是不是漏了什麼」。
典型案例
- 付款頁把信用卡資訊、帳單地址、優惠碼、訂單摘要混在一起，只用一條細線分隔。使用者每填一格都在心裡問 我現在填到哪裡了
- 設定頁把安全性設定跟通知設定貼在一起，沒有區塊界線。使用者會怕改錯，因為他不知道這些選項彼此關不關聯
封閉性原則的白話版本是 邊界是在幫使用者切段。
切段做得好，畫面不需要更華麗，讀起來就會順很多。
PM 在 Review 時可以這樣講
「這裡需要一個明確的區塊邊界，把同一段流程包起來。否則使用者會覺得整頁是同一個東西。」
◆ 連續性 Continuity：人眼會追路徑，你的版面會帶人前進或讓人分心
連續性講的是視線路徑。使用者不會逐字閱讀，他會掃。掃的時候，他會被版面安排引導。
如果你的動線清楚，他會很順。
如果動線斷掉，或是把他引到不重要的地方，他就會停住，開始找「我是不是看漏了」，接著又回到東點點、西點點。
你一定遇過
- 表單欄位排列忽上忽下，焦點跳來跳去。使用者會漏填，漏了又被錯誤訊息退回去，心情直接變差
- 兩欄式版面，左邊是流程，右邊一直放促銷訊息或推薦內容。注意力很容易被分散，完成率就掉
- 重要 CTA 放在視線不會停留的位置。結果大家都看到了方案，但沒人按下去
連續性原則的白話版本是 視線會照著版面走。
你要嘛帶他完成任務，要嘛讓他在畫面裡一直繞。
PM 在 Review 時可以這樣講
「這個畫面主動線要更單純。先讓使用者完成任務，再放其他資訊。」
你會不會曾經有過一個疑問，「為什麼重要資訊常被放在左上」？
因為大多數介面閱讀順序就是 由左到右、由上到下。你如果把最重要的提示、關鍵 CTA、或是狀態訊息丟到角落，使用者不是「慢慢找」，他通常是「沒看到」然後開始亂按。
更現實的是，眼動研究早就反覆看到同一件事，多數人看網頁不是乖乖逐字讀，而是用掃的，常見的掃視方式甚至被整理成 F-shaped pattern。
所以左上角常被當成重點區，不是迷信，是你在順著人的閱讀慣性做事。
你又說「人類視覺會在畫面中央飄忽不定」，可以把它換成更可具體的說法：當畫面沒有明確的視覺引導時，視線會變得很散。幾次都找不到，他不是生氣而已，會先出現焦慮，接著就直接關掉。
這正是 體驗設計 跟 第一性原理 在這裡的交集。第一性原理很簡單，使用者要的不是理解你的分類邏輯、也不是欣賞你的排版，他要的是 更快完成任務。他如果必須停下來想「你把這功能放在哪」，等於你多設計了一層學習門檻給他。
眼動研究也支持這種「不要期待使用者會讀完」的現實，讀者在頁面上會大量掃視與跳讀，而不是線性閱讀。
◆ 廣三觀點
嗨，我是廣三。
UI Review 最浪費時間的狀況，是大家一直講「我覺得」。感覺很重要，但感覺要能落到修改點，才有價值。
你不需要在會議上講「格式塔」三個字。你只要把問題講成可落地執行的檢核點。
這兩個是一組，所以要靠近一點。
這兩個不是同一種，所以不要長得一樣。
這是一段流程，所以要有界線。
主動線要讓人完成任務，不要讓注意力一直被分散。
講到這裡，你會發現你不是在評論設計，你只是在確認一件事。
使用者不要把時間花在理解畫面。
他理解一次，疑問就多一點；理解兩次，他就開始心煩；理解三次，通常就謝謝再聯絡。
若你在PM這條路上感到迷茫，
或想更清楚了解自己的能力與定位，
歡迎試試這份《PM產品／專案雙軌分析報告》。
它不為了定義你，而是幫助你更看清自己。
歡迎關注：
官網：https://unityprosper.com/
部落格：https://hero-mi.com/
FB：https://www.facebook.com/DigiPRDCoachHeroMi
LINE OA：@hero-mi
《歡迎加我LINE，一起破局未來》
請於下方輸入電子郵件信箱，即可接收最新訊息。
留言