design-everyday-things

design-everyday-things

熱門

套用基礎設計原則:功能預示性、指意、限制、回饋與概念模型。當使用者提到「為什麼這很難懂」、「功能預示性」、「錯誤預防」、「可發現性」、「以人為本的設計」、「心智模型」、「對應關係」、「行動七階段」、「使用者一直犯錯」、「這很不直覺」或「人們不知道怎麼用」時觸發。也適用於降低產品複雜度或功能蔓延。涵蓋執行鴻溝與評估鴻溝。如需可用性評分,請參閱 ux-heuristics。如需 iOS 特定模式,請參閱 ios-hig-design。

1717星標
174分支
更新於 2026/7/22
SKILL.md
唯讀
名稱
design-everyday-things
描述

套用基礎設計原則:功能預示性、指意、限制、回饋與概念模型。當使用者提到「為什麼這很難懂」、「功能預示性」、「錯誤預防」、「可發現性」、「以人為本的設計」、「心智模型」、「對應關係」、「行動七階段」、「使用者一直犯錯」、「這很不直覺」或「人們不知道怎麼用」時觸發。也適用於降低產品複雜度或功能蔓延。涵蓋執行鴻溝與評估鴻溝。如需可用性評分,請參閱 ux-heuristics。如需 iOS 特定模式,請參閱 ios-hig-design。

日常事物的設計框架

建立直覺、可發現且易於理解的產品之基礎設計原則。被譽為「UX 聖經」——適用於實體產品、軟體及任何人為設計的系統。

核心原則

好的設計其實比差的設計更難被注意到,部分原因是好的設計完美滿足我們的需求,以至於設計本身是隱形的。 當某件事失敗時,使用者往往責怪自己——但問題幾乎總是在設計上。偉大的設計彌合了人們想做的事與產品允許做的事之間的差距:它必須是可發現的(你能知道該做什麼)且可理解的(你能知道發生了什麼)。

評分

目標:10/10。 快速診斷的每一行(共 5 行:可發現性、評估、錯誤復原、對應關係、限制)滿足得 2 分。分級:9-10 = 使用者無需說明即可操作,理解每個結果,並能從任何錯誤中復原;5-6 = 一個鴻溝或錯誤路徑有問題;<=3 = 使用者必須查閱手冊或經常自責。報告當前分數及未通過的診斷行。

兩個鴻溝

每次與產品的互動都需要跨越兩個鴻溝:

使用者                                    產品
  │                                        │
  ├──── 執行鴻溝 ────────────────────────→│
  │     「我該怎麼做我想做的事?」          │
  │                                        │
  │←──── 評估鴻溝 ──────────────────────┤
  │     「發生了什麼?成功了嗎?」           │

執行鴻溝

使用者想做的事與產品允許做的事之間的差距。 使用者問:我能在這裡做什麼?該用哪個控制項?

橋接方式: 清晰的指意、自然的對應關係、限制、熟悉的概念模型。

評估鴻溝

產品做了什麼與使用者理解發生了什麼之間的差距。 使用者問:發生了什麼?成功了嗎?系統處於什麼狀態?

橋接方式: 即時可見的回饋、清晰的系統狀態指示、有意義的錯誤訊息、進度指示器。

設計目標: 讓兩個鴻溝盡可能窄——行動與理解應該立即發生。

參見:references/two-gulfs.md 進行鴻溝分析練習。

七項基本設計原則

1. 可發現性

定義: 使用者能否知道有哪些可能的動作以及如何執行?其五個組成部分——功能預示性、指意、限制、對應關係、回饋——將在下面詳細說明。

測試: 讓一個新使用者面對你的產品。如果他們在 10 秒內無法知道該做什麼,可發現性就失敗了。

反模式:「使用手冊有說明。」如果使用者需要手冊,設計就失敗了。

2. 功能預示性

定義: 物體屬性與使用者能力之間的關係,決定了物體可能的使用方式。

關鍵見解: 功能預示性存在與否與是否被感知無關——對設計而言重要的是感知功能預示性。

類型 定義 範例
真實 物理能力存在 按鈕可供按壓
感知 使用者相信能力存在 凸起的區域看起來可點擊
隱藏 存在但不明顯 右鍵選單
虛假 看似可操作但實際上不行 看起來可點擊的裝飾元素
反功能預示性 阻止操作 阻擋移動的障礙物

數位應用:

元素 功能預示性 如何提示
按鈕 點擊/輕觸 凸起、有顏色、陰影、懸停狀態
文字欄位 文字輸入 邊框、佔位文字、標籤
滾動區域 滾動 滾動條、邊緣淡出、部分內容

常見失敗: 扁平設計抹去感知功能預示性(按鈕還是標籤?)、觸控目標太小、互動元素與裝飾元素看起來一模一樣。

參見:references/affordances.md 了解功能預示性設計模式。

3. 指意

定義: 傳達應在何處採取行動的信號。功能預示性決定你能做什麼;指意告訴你在哪裡以及如何做。

類型 定義 範例
刻意 設計用來溝通 門上的「推」標籤、佔位文字
偶然 非刻意但提供資訊 草地上被踩出的路徑(人們走這裡)
社會 他人的行為 排隊的人群表示入口

數位指意:

指意 傳達的資訊 範例
游標變化 + 懸停狀態 這是可互動的 指標→連結上的手形;按鈕顏色變化
圖示 + 標籤 元素的功能 放大鏡 = 搜尋;「提交」、「取消」
顏色 + 位置 狀態、類別、層級 紅色 = 錯誤,綠色 = 成功;關閉按鈕在右上角

設計規則: 不確定時就加上指意——過度溝通總比讓使用者猜測好。

參見:references/signifiers.md 用於決定在不明確的控制項上添加哪種指意。

4. 對應關係

定義: 控制項與其效果之間的關係。自然對應關係意味著控制項的空間佈局與其所控制的對象佈局相匹配。

對應品質 範例 成功/失敗原因
自然 音量滑桿(向上 = 更大聲) 符合心智模型
電燈開關面板 與燈具無空間對應
爐具旋鈕排成一排 佈局與爐頭位置不匹配

數位原則: 控制項靠近其影響的對象、佈局鏡像內容、方向符合預期(向下滾動 = 內容向上移動)、相關控制項分組。

技巧 運作方式 範例
接近性 控制項靠近目標 編輯按鈕在內容旁邊
空間 佈局鏡像真實世界 地圖控制項符合指南針方向
文化 遵循慣例 紅色 = 停止/危險,綠色 = 前進/安全
順序 遵循自然順序 步驟 1、2、3 從左到右(或從上到下)

參見:references/mappings.md 進行對應關係分析練習。

5. 限制

定義: 限制可能的操作以防止錯誤。

類型 機制 範例
物理 形狀/大小防止錯誤操作 USB 插頭只能以一種方式插入
文化 社會規範引導行為 紅色表示停止,綠色表示前進
語意 意義限制選項 後視鏡只有朝後才有意義
邏輯 邏輯限制選擇 最後一顆螺絲只剩一個孔

數位限制:

限制 實作方式 範例
輸入驗證 限制可輸入的內容 日期選擇器 vs. 自由文字
停用狀態 灰顯不可用的選項 表單未完成時「提交」按鈕停用
強制順序 + 復原 按順序進行;允許反轉 步驟鎖定的精靈;Gmail「取消傳送」

設計規則: 每增加一個限制,使用者就少一個可能犯的錯誤——讓錯誤操作不可能發生,而不是事後懲罰。

參見:references/constraints.md 了解限制設計模式。

6. 回饋

定義: 將操作的結果傳達給使用者。回饋必須即時(直接操作時在 0.1 秒內)、有資訊性、劑量適當且不干擾。

類型 使用時機 範例
視覺 大多數操作 按鈕按下動畫、顏色變化、勾選標記
聽覺 重要事件、確認 成功提示音、錯誤音效
觸覺 觸控裝置、確認 按鍵時的震動
進度 長時間操作 進度條、旋轉圖示、骨架螢幕

數位回饋模式:

情境 需要的回饋 範例
表單提交 成功/錯誤訊息 「已儲存!」提示或行內錯誤
載入中 進度指示器 旋轉圖示、骨架螢幕、百分比
錯誤 出了什麼問題 + 如何修正 「電子郵件無效,請檢查格式。」

回應時間: 0.1 秒感覺即時;1 秒是明顯的延遲(改變游標);10 秒失去注意力(顯示進度條);超過 10 秒使用者會離開(顯示百分比,允許背景執行)。

常見失敗: 沒有回饋(我的點擊有反應嗎?)、延遲回饋(感覺壞了)、不明確的回饋、警報過多。

參見:references/feedback.md 用於當操作沒有明確結果時,選擇正確的回饋類型和時機。

7. 概念模型

定義: 使用者對產品運作方式的心智模型。

模型 持有者 描述
設計模型 設計師 設計師認為產品如何運作
使用者模型 使用者 使用者認為產品如何運作
系統形象 產品 產品實際傳達的內容

目標: 使用者模型應與設計模型一致;系統形象是唯一的橋樑。模型一致讓使用者能預測結果並從錯誤中復原;不一致則導致困惑、自責和客服電話。

範例(恆溫器): 設計模型——設定溫度,系統維持該溫度;常見使用者模型——設定越高加熱越快(錯誤),所以使用者會調到 90°F。

建立正確模型的方法: 熟悉的隱喻(桌面、垃圾桶)、可見的系統狀態、清晰的回饋、一致的行為、漸進式揭露。

參見:references/conceptual-models.md 用於當使用者模型與產品實際運作方式不一致時。完整的案例分析(門把手、恆溫器、數位產品)請見 references/case-studies.md

人為錯誤

Norman 的關鍵見解:根本沒有「人為錯誤」這種東西——只有糟糕的設計。 當有人犯錯時,尋找設計缺陷,而不是人的缺陷。

錯誤類型

失誤——意圖正確,但動作錯誤:

失誤類型 原因 範例 設計修正
動作失誤 對正確目標做了錯誤動作 點擊「刪除」而非「編輯」 將破壞性操作分開
記憶遺漏 忘記步驟順序 寫了「附件」卻忘記附加檔案 Gmail 的附件提醒
模式錯誤 正確動作,錯誤模式 在大寫鎖定狀態下打字 清楚顯示模式狀態
捕獲錯誤 習慣壓過意圖 自動駕駛般開到舊辦公室 在決策點打斷

錯誤——意圖錯誤,但正確執行:

錯誤類型 原因 範例 設計修正
規則型 套用錯誤規則 對錯誤情況使用公式 提供上下文,要求確認
知識型 不完整/錯誤的心智模型 誤解系統運作方式 更好的概念模型
記憶遺漏 忘記目標或計畫 忘記為什麼打開冰箱 提醒、歷史記錄

為錯誤而設計

預防: 使錯誤不可能發生的限制、隨處可用的復原/重做、破壞性操作的確認、合理的預設值、寬容的輸入。
復原: 清晰的錯誤訊息、絕不刪除使用者的工作、部分儲存、輕鬆重置到已知的良好狀態。

錯誤訊息檢查清單:

  • [ ] 說明出了什麼問題(用人類語言)
  • [ ] 說明如何修正
  • [ ] 不責怪使用者
  • [ ] 保留使用者的工作
  • [ ] 提供替代路徑

參見:references/human-error.md 了解錯誤預防模式。

行動七階段

Norman 的人類與產品互動模型:

1. 目標      → 「我想調整溫度」
2. 計畫      → 「我會用恆溫器」
3. 指定      → 「我會按向上箭頭」
4. 執行      → (按下按鈕)
   ─── 執行鴻溝 ───
5. 感知      → (看到顯示變化)
6. 解釋      → 「數字上升了」
7. 比較      → 「這是我想要的嗎?」
   ─── 評估鴻溝 ───

設計啟示: 用指意、對應關係和限制支援階段 1-3;用良好的功能預示性支援階段 4;用回饋和可見狀態支援階段 5-7。逐一檢視每個階段的互動,找出使用者卡住的地方。

參見:references/seven-stages.md 進行逐階段分析。

以人為本的設計流程

觀察 → 發想 → 原型 → 測試 → (迭代)

兩個會改變你執行此循環的具體要點:在觀察階段,不要問使用者想要什麼(他們不知道)——在真實情境中觀察變通方法和挫折。在測試階段,使用真實使用者而非設計師——5 位使用者能發現約 85% 的問題,所以觀察行為而非意見,並迭代。

常見錯誤

錯誤 失敗原因 修正
沒有指意 使用者找不到功能 為每個互動元素添加視覺提示
沒有回饋 使用者不知道操作是否成功 在 0.1 秒內回應每個操作
責怪使用者 忽略設計缺陷 為每個「使用者錯誤」尋找設計原因
功能蔓延 複雜度壓垮使用者 套用限制、漸進式揭露
不一致 破壞概念模型 相同操作 = 處處相同結果
忽略情境 為理想條件設計 觀察真實使用環境

快速診斷

審查任何設計:

問題 如果否 行動
使用者能知道該做什麼嗎? 可發現性差 添加指意,改善功能預示性
使用者理解發生了什麼嗎? 評估鴻溝過寬 添加回饋,顯示系統狀態
使用者能從錯誤中復原嗎? 無錯誤容忍度 添加復原、確認、清晰訊息
控制項佈局與輸出匹配嗎? 對應關係差 重新組織控制項以匹配空間佈局
不可能/不相關的選項被隱藏了嗎? 缺少限制 停用、隱藏或移除無效選項

延伸閱讀

完整框架請見:

關於作者

Don Norman, PhD 是 Nielsen Norman Group 的共同創辦人、加州大學聖地牙哥分校設計實驗室主任,曾任蘋果先進技術副總裁,並創造了「使用者體驗」一詞。《日常事物的設計》(1988,2013 修訂)被廣泛認為是史上最具影響力的設計書籍,也是全球設計課程的必讀教材。