《UX 三刀流》課程筆記+心得整理 Week 12

1. 本系列內容為 UX 三刀流 2024 春季班 課程進度內容
2. 本篇依據自身當下手抄筆記再次統整歸納為貼文
3. 心得依照講義影片頁面順序
4. 對課程有興趣者可參考

Week 12：章節進度 2-6 介面設計原則
筆記環節

1. 介面設計原則

(1)

更通用於所有介面（著重使用者任務） 
↑［設計原則］
↑［設計規範］
↑［設計規則］
更具體於裝置元件 （著重介面操作）

(2) Don Norman 六項設計原則：

運用人心理的「認知模型」，讓「習慣」協助視覺介面設計
 a. 可視性（Visibility） — — 系統資訊必須明確地呈現
 b. 回饋性（Feedback） — — 讓使用者知道指令或動作已被系統接收
備餘式（redundant design）設計：按鈕的視覺「狀態」、「顏色」與「位置」回饋
 c. 限制（Constraints） — — 適當減少頁面「自由度」，降低使用者選擇（注意力）、避免犯錯
 d. 對應關係（Mapping） — — 與使用者「已知記憶」的概念對應，讓使用者操作獲得預期引導
 e. 一致性（Consistency） — — 具相似的操作和元素已完成相似的任務，避免混淆
 f. 預示性（Affordance） — — 物體的屬性讓使用者知道如何使用

(3) 完形心理學 — — 格式塔視覺設計原則（Gestalt Priciples）

運用人心理對事物完整認知的能力來增加或協助視覺介面的設計
 a. 接近性（Proximity） — 「靠近」的事物看成一體
 b. 相似性（Similarity） — 「相似」的事物看成一體
 c. 圍繞性（Enclosure）
 d. 對稱性（Symmetry） — 「對稱」的物體視為一個整體，如：header↔footer
 e. 閉合性（Closure） — 多個獨立元素視認為一個「完整封閉」的圖形
 f. 接續性（Continuity） — 事物看成「連續的形體」
 g. 連結性（Connection）
 h. 圖形與背景性（Figure & Ground）
 *共同命運（Common Fate） — 「動態相近」的事物看成一體

2. 介面設計規範與介面組成元素

(1) Material Design：實感設計/材料設計

a. 理念
 • 用材質作為介面的隱喻
 • 粗體字、圖形化、創造意圖
 • 透過物件運動提供設計意義

b. 介面元件
 • 顯示（Display） — 運用卡片、列表和表格安排內容
 • 導航（Navigation） — — 側欄選單、頁籤在產品中移動往返
↘可識別、有組織、含情境
 • 操作（Actions） — — 
 • 輸入（Input） — — 文字框、紙片、選擇控件
 • 溝通（Communication） — — 浮出文字框（Snackbars）、橫幅、對話框作為提示 
↘Pop up（Ｘ），Dialogs（Ｏ）
↘顏色、排版和形狀，不會直接影響操作效率，但好的顏色、排版和形狀設計能賞心悅目
 • 人和電腦互動的目的，是透過介面的元件來進行實作跟呈現

(2) 蘋果公司介面設計規範

a. iOS 三大設計主題定調：清晰（Clearity）、遵從內容至上（Deference）、深度層次感（Depth）

b. 六大設計原則：
 • 美學完整性（Aesthetic Intergirty） — — 美觀和功能搭配是一體思考的
 • 一致性（Consistency） — — 符合既有認知與期待
 • 直接操作（Direct Manipulation）
 • 回饋（Feedback）
 • 隱喻（Metaphors） — — 虛擬元件與現實事物相近
 • 使用者主控性（User Control） — — App提供建議、警告，不替使用者接管決策
 
c. 三大重點介面元件
 • 導覽列（Bars） — 引導位置：導覽、搜尋列、工具列
 • 顯示區（Views） — 應用程式中所見主要內容：收藏、文字瀏覽、換頁瀏覽、活動瀏覽
 • 控制（Controls） — 行動、訊息傳達機制：按鈕、情境選單、進度列
 
d. 手勢互動：手勢與介面的互動，也是設計師進行互動設計的範圍

(3) 介面視覺系統（UI Guideline）

由「品牌」延伸，建立企業風格的色彩系統至公司各項產品上

(4) 介面工具包（UI Kit）與模板（Template）

企業或介面雛型設計軟體支援的介面元件集成，加速設計師效率且已符合實感設計或設計規範
但運用之外也要從中嘗試創新，否則全部產品都會變得大同小異

(5) 色彩設計原則

a. 藍色：不同國家喜歡的比例最高，且紅綠色盲眼下也能識別
b. 高達62%～90%的產品購買意願是根據「顏色」來決定
c. 色彩影響人們的行動：透過A/B測試瞭解使用者行為傾向

(6) 可參考資源：UX/UI Trend Book

心得環節

這一章節把介面設計的原則和設計的規範講解的很清楚，也讓我認識了很多介面設計的專有名詞。 （瞭解名詞對我來說是讓設計溝通更完整清楚的基本）

完形心理學的部分讓我理解大多數人是如何去認知和關聯眼前的事物，聽完課之後回去看常看的網頁就會很有帶入感XD

使用介面工具包和模板雖然很適合新手介面設計師或是效率型的設計師，但如果不從中嘗試創新的話，大家會變得都一樣。

就會有違之前第六週課堂上提及「商業流看產品價值創造」中的「獨佔/進入門檻（無法複製）」的部分了。

問題也就會回到：「各大公司的產品都跟你一樣，你憑什麼要別人非你不可？」

共學文件上的問題回答：
生活上有哪些設計你覺得是好或不好的，他們在設計原則的實踐上正向或負向的表現如何？

這個事例應該比較偏向回饋和使用者控制面。

我要提的是很久之前紀錄下來的，到某大賣場使用自動結帳機的悽慘經驗。
某大型賣場的自助結帳機器商品重量異常警告後無法繼續進行結帳的機制。
 
在此猜想，此機制目的是讓客人可以注意商品可能有損壞或缺漏。 
但我實際使用過兩次並觀察同樣在使用的客人與店員後發現有些讓人極度崩潰的地方：

第一、在刷讀第2樣商品的條碼後，若沒有等商品名稱出現在螢幕時就把商品放置在檯面上，就會出現重量異常警告 。（等待商品名稱出現的時間平均為刷讀條碼後的2–3秒。） 
我推測是因為系統在這段等待時間誤判，將第一個商品的重量當作第二個商品的重量。

第二、異常警告僅能由店員刷磁卡進行排除，承上，若沒有抓好節奏去放商品，結帳過程中就會一直出現重量異常而無法繼續結帳，變成店員必須隨時在旁等待客人使用機器發生異常去排除。

第三、重量異常的顯示並沒有特別的視覺提示，只有白底黑字的視窗告訴你：「重量異常，這個商品 X 克而檯面感知 Y 克，請洽店員」。 
客人通常也不會去仔細看到底重量怎樣了，只會覺得「啊怎麼不能繼續結帳了，店員救我～」
 
第四、 在人多的時候能明顯感受到客人們的惱火（刷一次出現一次誰不崩潰……） 又惱火又心急之下，他們去發現第一點情況的機率也不高。

於是我看見的就是，客人開始對不太擅長操作機器的同伴叫罵、客人結帳完一肚子火，以及店員為了排除這些異常而在機器間東奔西跑。 這個設計徹底喪失自助結帳機被發明的目的：節省時間與人力成本。

題外話：自從開始學UX後，每天都在認真觀察哪裡的UX設計好不好了呢🤣

關於我