【UI 見聞錄EP1】 深入 UI 設計背後的決策：那些關鍵體驗的產品細節
嗨大家！許久不見，這個系列將是我一個新系列，算是新坑，會開始記錄和分享我參加2024 AAPD 第 2 屆 UI 設計線上實戰營以及學習 UI 能力技能的所見所聞，而今天要跟大家聊聊的是我參與5/11舉辦的【主題講座】深入 UI 設計背後的決策：那些關鍵體驗的產品細節，講者為 — AAPD — As A Product Designer / Simon Lin / Andy Chien
➡️ AAPD As A Product Designer
https://academy.aapd.com.tw/
➡️ Simon Lin UI 線上實戰營｜課程講師 & 主理人
https://academy.aapd.com.tw/@simonlin-aapd
➡️ Andy Chien UI 線上實戰營｜助教長
https://academy.aapd.com.tw/@andy-chien
講座提要
AAPD 是今天活動的主辦單位，其全稱為“ as a product designer ”，即產品設計師。
多年來，他們專注於設計教育，並分享如何幫助 UI/UX 學習者成長。
在今天的演講中，他們將探討在設計決策過程中需要考慮的因素，特別是在 UI 方面，可能涉及的各種思考細節，這些細節會體現在使用者體驗上。
AAPD 的主軸主要是人才培育，提供各種課程、工作坊和討論，旨在培養設計師的硬實力和思維能力。 透過各種活動，包括社群交流和直播講座，他們希望創造一個共學、分享、共創的學習氛圍，讓大家一起成長、學習。 他們的最終目標是培養具備專業能力、具有商業和產品理解力的設計師，能夠影響公司的產品，並促進整個產業的成熟發展。
在這場 90 分鐘的講座當中，可以透過以下 UI 決策的三大考量更了解 UI 設計蠆產品的角色定位，同時也將獲得提升能力的小撇步：
• 【設計策略】了解設計策略包含了哪些項目，與商業策略之間有什麼關係？
•【設計原則】UI 設計時不可不知的原則一次告訴你
•【用戶心理與商業目標】在不同情境之下，如何運用設計用戶心理學來達到商業目標
一.設計策略
助教長 Andy 在一開始 引言，設計策略的五個層次分別為：
- 策略層次 (Strategy) — 需先了解使用者需求和商業目標
- 範疇層次 (Scope) — 定義設計範圍和深度
- 結構層次 (Structure) — 資訊架構 (IA)，內容組織和結構
- 框架層次 (Skeleton) — 互動設計和頁面連接關係
- 表現層次 (Surface) — UI 設計和視覺呈現
設計策略位於最底層的策略層次，扮演著地基的角色。
因此必須先在這層次奠定穩固的基礎，上層的 UI 設計才能充分發揮功效。
如果策略層次定義不明確，將使後續設計過程舉步維艱。換言之，策略層次愈明確，UI 設計階段的方向就愈明確利落。
制定設計策略的方法和框架：
框架包含三個關鍵字：
- 使用者 (User) 2. 場景 (Scenario) 3. 需求 (Needs)
1.使用者 (User)：
- 了解使用者為UX設計的第一步
- 不只認識使用者，還需進一步划分使用者群體
- 舉例：設計針對股票投資人的產品
- 初步目標使用者是投資股票者
- 可再細分為短線/中線/長線等不同投資類型
重點是除了要認識使用者外，還需進一步區分並定義不同的使用者群體，這有助於更精準地規劃設計策略。
適當劃分使用者群體，有利於後續的場景和需求分析。
為何需要進一步細分使用者群體的原因？
- 細分使用者群體的過程，會使設計師深入了解不同使用者特性
- 如果對使用者認識不夠深入，將無法有效區分不同的使用者群體
- 細分使用者群體本身就是對使用者深度理解的展現
Andy 分享過去服務公司的實例：
1. 當初目標使用者為股票投資人
2. 公司將投資人細分成不同群體
3. 針對每種群體量身打造獨立的 APP
4. 因為細分得當，故能針對不同需求提供最佳體驗
5. 此產品開發模式在市場上表現良好
綜合而言，設計師必須對使用者有足夠深入的認識，並了解不同使用者群體的差異，才能規劃出最合適的 UI 設計策略，提供出色的使用者體驗。
2.場景 (Scenario)：
Andy 表示場景是制定設計策略三大關鍵字之一，但也是最容易被忽略的一個。
適當考量使用場景很重要，否則可能會導致設計出與實際使用情境脫節的產品或功能。
透過以太陽能手電筒的笑話做為開場白：點出忽略使用場景可能導致設計產生荒謬的結果。
接著以電風扇為例，列舉了三個常見的使用痛點：
- 早晨想關掉電扇但不想下床
- 家中寵物會不小心開關風扇
- 睡覺時需要彎腰開關風扇
針對這三種場景痛點，分別提出了一些可能的設計解決方案：
- 提供無線遙控器，避免需起身關閉
- 將開關設計在較高處，避免寵物觸控
- 採用大型易按開關設計，避免彎腰不便
透過這些實例：Andy 呼籲設計師們在規劃 UI 設計時，務必深入考量產品的實際使用場景，包含使用時間、地點及使用者的身心狀態等因素，才能提出貼近真實需求的優質設計方案。
3.需求(Needs)
是制定設計策略三大關鍵字之最後一個。
雖然大家都明白研究使用者需求的重要性，並知曉各種探索需求的方法框架，但在實際設計 UI 時，仍常會忽略使用者真正的需求。
以設計「找不到商品」頁面為例，分析了四種不同的 UI 設計方案：
- 簡單文字告知查無商品
- 加入插圖，使頁面更活潑有趣
- 除了告知查無外，還會顯示熱門商品選項
- 不會顯示空白頁面，且會主動比對並推薦可能相關的商品並列出熱門商品類型
- 前兩種設計只從 UI 層面思考，未深入考量使用者需求。
- 後兩種則更貼近真正需求，即使無法找到目標商品，至少還能推薦其他可能選項，滿足發現新商品的需求，並增加商品曝光機會！
Andy 指出前兩種設計屬於「提早投降」，認為就這樣做就好了卻忽視了真正的使用者需求。
優秀的 UI 設計應該要深挖使用者需求，並努力滿足需求，而不是操之過早地放棄。需要綜合考量使用者、場景與需求等三大關鍵因素，而非僅從 UI 層面出發。
而同一功能在不同情境下，使用者的需求可能迥異，所以相應的 UI 設計也應有所區隔與調整。
以設計錄音 UI 為例，分別列舉了三種可能的使用場景與對應需求：
- 通訊 APP 中錄音(如路上閒聊)
- 需求為短暫錄音，操作簡單
- UI 設計大按鈕，就不需複雜功能
2. 訪談場合錄音
- 需求為準確記錄內容與時間標記
- UI 顯示逐字，提供暫停等輔助功能
3. 翻譯場合錄音
- 需求為呈現大字體易閱讀文字
- UI 僅保留文字顯示，其他功能皆省略
透過這些實例，相同功能在不同場景下，使用者需求會有極大差異，因此 UI 設計也須因應調整，才能真正滿足使用者需求。
單純從 U I 層面出發設計，未考量實際使用場景與需求，很可能造成與預期落差的設計。
因此 Andy 表示優秀的 UI 設計需綜合使用者、場景、需求等關鍵因素，全面的去審視問題，方能提供符合預期的優質解決方案。
二.設計原則與美感
根據 Simon 的解釋，設計原則指的是在進行 UI 設計或產品設計時，可以作為判斷依據和聚焦準則的一套標準或框架。
設計原則的重要性在於：
- 不僅供設計師參考，也是給整個產品團隊乃至整個公司認知的共同基礎。
- 它影響的不僅是單一介面，而是整個產品的設計理念和溝通框架。
- 有共同原則可避免團隊成員因主觀喜好產生爭執，提供客觀的決策輔助。
- 設計原則可以反映並傳達品牌的形象和價值觀，讓使用者感受品牌風格。
總的來說，設計原則為設計團隊提供一致的設計語言和思考模式，有助於做出更理性和貼近品牌的設計決策，而非完全依賴主觀喜好。
1. 菲茲法則 (Fitts’ Law)
這個原則闡明了目標距離與尺寸對動作難易度的影響關係。
以手機觸控介面設計為例，解釋了菲茲法則在實務上的應用：
1–1. 原理簡介
- 使用者與操作目標距離越遠，動作越困難
- 操作目標尺寸越小，動作也越困難
1–2. 在手機 UI 設計中的應用
- 需考量手指(尤其大拇指)的操作範圍
- 重要按鈕應設置在離手指較近的區域
- 操作區塊尺寸應適中，避免過小而誤觸
1–3. iPhone 網址列位置調整案例
- 早期設計在畫面上方，後來改至下方
- 上方位置需伸手較遠才能操作，單手不便
- 改為下方後貼近手指範圍，大幅改善體驗
透過遵循菲茲法則，UI 設計能有效減少使用者的操作成本及誤觸機率，讓他們能更簡單高效地達成目標。
此一通用原則廣泛應用於手機等觸控式裝置介面優化。
2.許可法則 (Hick’s Law)
當使用者面對太多選項時，認知負擔將增加，所以適當減少選擇項目數量，可降低使用者決策困難度。
2–1. 表單設計實例
- 將大量問題拆分為多個小步驟，每次僅出現少量選項
- 較長表單改以逐步引導方式，減輕使用者壓力
2–2. 登入/註冊設計實例
- 將兩個流程整合,使用者只需輸入電子郵件即可判斷後續動作
- 透過社群登入等單一操作，減少輸入項目
2–3. 搜尋設計實例
- 提供熱門選項或推薦項目，協助使用者快速作決定
2–4. 航班訂購實例
- 主動列出系統評估的最佳選項，減少使用者比對負擔
此時 Simon 也提出了一些生活中的經驗分享經驗：
像是去新餐廳時,過多菜單選項會讓人無所適從，若有主廚推薦或當日特色菜單，可快速做出決定。
然後也有一些特別的應用：
以電商網站案例，基於商業目的，故意設置訂閱制作為預設選項。使用者不經意間就訂閱商品，之後需自行取消訂閱。
Simon 個人經驗案例就是有定期購買維他命，本來只是想單次購買，但網站將選項預設為訂閱，除非用戶主動變更！
問題延伸：
- 使用者通常不會特地改變預設選項，因此可能被誆訂閱非自願的商品或服務。
- 此種做法雖達商業目標，卻違背用戶體驗本質。雖然提供推薦預設選項有助於簡化決策，但過度運用可能導致與用戶期望偏離的情況。設計師需權衡商業營利與用戶體驗之間的平衡，避免產生誤導或不當行為。
3.八十二十法則(Pareto Principle)
在大多數事物中，有 80% 的結果來自 20% 的原因或投入。
在UI設計上的應用為：
3–1.大部分使用者(80%)只會使用到少數核心功能(20%)
3–2.因此設計時應明確思考哪些是關鍵資訊需被強調
3–3.其餘次要資訊則可適度弱化或隱藏
3–4. 專注工作App
- 僅突出倒數計時器和開始鍵
- 幫助使用者專注於當下最重要的工作
3–5. 運動記錄App
- 僅顯示開始/暫停等基本操作按鈕
- 因使用情境為運動中，減少其他干擾
透過八十二十法則，UI 設計可聚焦使用者當下最關鍵的需求，突出關鍵資訊和功能，隱藏或簡化次要選項，避免干擾使用者完成主要目標。此原則有助於提升使用體驗的效率和簡潔度。
4.一致性原則(Principle of Consistency)
在同一產品或系統中，視覺樣式、元件行為、功能邏輯等元素應保持一致性，不可以隨便在不同的頁面追加元件，要避免雜亂無章。
4–1. 重要性
- 避免工程師與設計師在開發維護時產生溝通成本
- 降低使用者的學習成本，符合預期的操作行為
- 賦予產品整體性，增強品牌認同
4–2. 常見的一致性問題
- 相似元件樣式卻有細微差異(間距、顏色等)
- 相同元件在不同頁面呈現不一致行為
- 沒有統一規範，任意添加新樣式或行為
4-3. 設計系統的作用
- 提供共用元件庫和視覺樣式規範
- 確保產品在視覺和功能上保持一致
- 方便團隊溝通，維護整體性設計語言
一致性原則要求設計師在產品的細節中貫徹統一的設計語言，避免雜亂、矛盾的情況發生，從而減少開發和使用成本，提升品牌整體性。
設計系統則是實現一致性的利器。
5.可見性原則 (Affordance)
系統或產品的功能應當從它的外觀和設計上就能給予使用者明確的暗示和引導，讓使用者不需過多思考便能理解該如何與之互動。
5–1. 界面元件應符合可見性
- 按鈕應長得像可按壓的造型
- 下拉選單應有箭頭等視覺暗示
- 可滑動元件應有把手和滑軌設計
5-2. 生活化例子
- 按鈕應長得像可按壓的造型
- 椅子有4個椅角和凹陷坐墊，即能理解其「坐」的功能
- 湯勺有凹面造型，能暗示其「盛湯」用途
5-3. 界面設計運用
- 使用者僅從元件外觀便能直接 Get 其操作方式
- 減少認知負擔，提升直覺友善體驗
可見性原則旨在使系統或產品的功能通過外在設計自明，讓使用者不需過多思考和學習便能自然地與之互動，達到人機無間的體驗。
6.簡約設計（less is more）
跟二十八十法則很像，但也是一種有效的設計方法，可以使設計更加簡潔、高效、美觀。在進行設計時，可以考慮採用簡約設計理念，以提升設計品質。
兩個案例：
6-1. 特斯拉充電界面
特斯拉的充電界面是一個典型的簡約設計案例。在充電開始時，界面會顯示一個動畫，而不是文字說明。這個動畫清晰直觀地傳達了充電開始的信息，同時也避免了界面上的文字過多，使界面更加簡潔易懂。
6-2. Netflix 首頁
Netflix 的首頁也採用了簡約設計。首頁上只展示了電影海報和少量文字，營造出電影般的氛圍，吸引使用者的注意力。這種簡約的設計方式，可以讓使用者快速瀏覽電影的海報，找到自己感興趣的內容。
7.案例分享：報稅系統
Simon 此時畫風很一轉，聊到五月報稅，而從古至今，每年的報稅系統一直在改善，但從使用者界面（UI）的角度來看，仍然存在一些問題。
例如，顏色使用過多且缺乏明確的功能指向。
部分資訊看起來像是連結，但點擊後並不清楚其用途。另外，許多連結放置在卡片下方，造成視覺上的拥挤，並且存在著視覺層次感過重的問題。
按鈕的文案也相對冗長。因此，從界面的角度來看，這些地方都有改進的空間。
為了解決這些問題，Simon 則是提出了一系列的設計改進方案。
- 首先，對顏色進行整理和收斂，將其弱化以突出資訊而非顏色。
- 其次，進行顏色調整，並調整文字區塊的顏色，以及降低顏色的深度。
- 然後，對文字空間和視覺層級進行調整，新增標題以指示所需文件，並調整空間比例。
- 此外，增加引導資訊，例如添加數字以辨識步驟和文件數量。
- 最後，整合底部連結並改善視覺效果，如調整陰影和圓角。
這種設計的目的不僅僅是美觀，更重要的是讓使用者更快速地吸收資訊並完成任務。
Simon 表示儘管這些改進是基於設計原則的判斷，但仍需要進行使用者測試以確保對使用者有實際幫助（因為是簡單快速的 Redesign 後續還是要測試跟迭代，以驗證使用體驗）。
8.總結
美感的培養可以分為幾個步驟：
8-1. 觀察和分析大量優秀的作品是關鍵，這有助於培養你的美感。
8-2. 進入模仿階段是必要的，通過實際動手做來練習，例如進行繪畫模仿練習。在這個過程中，要試著拆解作品，了解其中的設計手法和元素排列組合，建立自己的邏輯和感覺。
8-3. 隨著練習的深入，你會開始進入到創造和實驗階段，嘗試自己的設計配方並進行各種嘗試。在這個過程中，接受來自他人的建議和反饋是很重要的。這樣的循環練習可以大大提升設計師的美感水平。
三.心理學與商業策略
Andy 介紹了如何利用心理學讓社群產品讓人上癮，透過自身案例，曾參與社群 APP 的設計，並運用心理學理論在產品設計和 UI 設計中，使使用者對產品產生上癮。
為了實現商業目標，即每周活躍用戶數的增加，透過名為「鉤癮模式」的心理學理論，該模式分為四個步驟，形成一個循環。
一.「鉤癮模式」
1–1. 觸發，任何行動都需要一個起點，即使一個事情對你很重要，沒有觸發點，你仍然可能不會行動。
1–2. 行動，行動應該是超級簡單的，例如只需打開書本或穿好運動鞋。
1–3. 獎勵，一旦完成簡單的行動，立即給予自己獎勵，最好是一個不確定的獎勵，因為這種不確定性會讓人上癮。
1–4. 投入，當你投入時間和精力時，你會對事物產生好感，這就是沉沒成本的作用。
而行為學家也會運用類似的模型來培養習慣：
舉例來說，當一個行為學家想要培養伏地挺身的習慣時，他會如何操作？ 首先，他會設定一個觸發點，例如每次從廁所出來都作為一個觸發點，因為每天都會有幾次上廁所的時間，這確保了觸發點每天都會發生多次。
第二步是行動，要做的是超級簡單的行動，例如做一次腹地挺身。 是的，沒錯，就是做一次，雖然可能看起來很費力，但只有這樣才夠簡單，否則你根本做不到。
第三步是獎勵，這裡的獎勵是內心給自己一個小慶祝，告訴自己你做到了，或任何可以鼓勵自己的話都可以。 這可能看起來很傻，但實際上非常有效。
最後一步就是投入，每次小小的成功會讓你變得越來越自信，然後越來越喜歡這種小慶祝的感覺，一旦進入軌道，培養習慣就會變得越來越容易。
此時Andy 和大家小聊了一下，説：有些人可能會認為內心小慶祝不是一種變動獎勵。會算是什麼呢？ 它是確定性的獎勵。
在現實世界中，培養習慣真的很難設定變動獎勵，但這是數字產品擅長的領域。 透過心理學理論如何應用在數字產品的UI設計上。
二.現實中的運用：以主流社群產品Instagram為例
2–1. 觸發，社群產品中經常有小紅點，它是一個超強的觸發，看到小紅點就會讓人想要消除它，所以很多時候我們 不是因為想看文章而看文章，而是為了消除小紅點而看文章，一旦進入閱讀，就不自覺地陷入其中。
- 推播通知，也是一個強烈的觸發，數據顯示，推播通知對留任率的影響非常大，只要推播數量增加，開啟次數和留存率就會直接上升。
2–2. 行動，行動的重點是要非常簡單，社群產品在設計時一直在思考如何讓用戶簡單無腦地瀏覽，而不是一直說服他們產品有多好。 因此，許多 APP 採用了無限滾動的設計，讓用戶可以連續不斷地瀏覽內容。
- 除了瀏覽動態牆之外，社群產品也不斷讓發文變得更容易，例如 Instagram 不斷更新新的互動功能，這些都讓用戶在發文時更簡單、更無腦、更沒有阻礙。 UI 設計的一大任務就是減少認知成本和行動成本。
2–3.獎勵，產品最擅長的就是推送一些你感興趣的或是神秘的內容，這些不確定的獎勵會讓你一直想要往下看，永遠不會膩。
- 例如短視頻，它的不確定獎勵很強，因為你永遠無法確定下一個短影片是什麼。
2-4. 投入，社群產品會鼓勵你多發各種內容，累積越多資料就越難離開APP，這有利於長期留存率。
- 因此，社群產品的核心就是內容！
四.總結
總結這場演講，主講師 Simon 和 助教長 Andy 探討了許多產品的製作過程，無論是基於不同原則還是結合心理學和商業目標。
這些產品背後都經歷了無數的思考和決策，最終呈現在使用者界面（UI）上。
雖然UI給人的感覺是視覺效果，但背後的設計決策往往與商業目標密切相關。為了更有效地提升UI設計能力，Simon提出了幾個推薦的學習方法：
- 是向有經驗的前輩請教，並獲得他們的真實反饋。這些前輩通常能夠直接指出盲點，因為他們有更廣泛的市場經驗。
- 是刻意學習，透過持續練習和設定目標，來提升技術水平。
- 是長期關注設計趨勢，並適應變化，尤其是隨著人工智能等新技術的興起。
- 除此之外，設計師還應該多使用不同類型的產品，並分析其設計背後的原因和思考。
- 累積與不同角色合作的經驗的重要性。做產品設計從來都不是單打獨鬥的，而是需要與不同專業的人合作，這樣才能更好地理解市場需求。
- 透過 Side project 也是提升技能的好方法。雖然學習過程中可能會遇到挑戰，但這些挑戰也是成長的機會。
最後， Simon 提到了教學的重要性，希望能透過實戰經驗來幫助學員解決實際問題，並舉辦了一系列的營隊活動，以幫助學員實現他們的目標。
如果看到這的讀者感興趣的話，可以參考下方連結：
2024 AAPD 第 2 屆 UI 設計線上實戰營
小結：又一年決定投入進修的心得
因為前陣子生病了，所以趁著這段時間思考了再來這一季的狀況和被迫休養，以及剛好身邊的朋友一直大推這門課程，且稍微需要回到個人能力的精進和協調身體，剛好這門線上課程，去年朋友也參加，且結束後感覺都做得很好，於是再三考量後，決定利用時間來重新學習跟完整我自己對於Figma能力的完善（團隊後來是一人設計師），總之就是邊休養身體，但也不要讓自己閒下來可以繼續有動力做更多我想做跟想學的東西，所以在自己確定好了的情況下，這一季應該會紀錄各種 UI 實戰營相關的心得和筆記，希望這個新坑，可以幫助到一些人，或是幾年後我回來看，會有不同的心境（笑）。
感謝大家看到這裡，有任何回饋都歡迎和我分享！
我是Rabby，下一篇文章見。
