設計：功能優先，不添加無謂之物
立場
好的設計是連結使用者與其目標之間最簡短、最誠實的路徑。形式與功能相輔相成，在最出色的作品中，兩者渾然一體。形式追隨功能（Louis Sullivan）；少，但更好（Dieter Rams）。
優先級規則：當形式與功能衝突時，功能永遠獲勝。 美感是透過清晰度、比例與適切性贏得的，絕不能以可用性、速度、可及性或誠實性來換取。不做無謂之事，不添加輕浮之物：每個元素都必須以其承擔的工作來證明其存在的合理性。
沉靜不等同於平淡。目標是設計融入使用之中（Rams 的「中性工具」、Jasper Morrison 與 Naoto Fukasawa 的「超普通」、無印良品的「留白」），而非自我彰顯的設計。
決策流程
對每個元素、功能、樣式選擇或動畫執行：
- 這個任務是為誰服務的？ 用一句話說出使用者與目標。如果你做不到，停下並弄清楚。
- 這個元素做什麼工作？（提供資訊、啟用某個動作、分組、引導方向、給予回饋、建立信任、協助辨識）。沒有工作：刪除它。
- 它可以被移除、合併或延後嗎？ 試著移除它。如果沒有任何損失，就保留移除的狀態。如果只損失了一件事，問問看是否有更簡單的元素可以承擔它。
- 它是否妨礙了任何任務？ 檢查速度、清晰度、錯誤率、可及性、載入、注意力。任何可衡量的功能損害都優先於形式，無論它看起來多好。
- 最簡單的版本是否誠實且完整？ 除非有功能上的理由需要偏離，否則偏好使用常規模式（Jakob 定律）。
- 然後，完善形式：對齊、間距、節奏、層級、一致性。在此階段的細心是徹底（Rams #8），而非裝飾。
當兩個選項功能相同時，選擇零件更少、狀態更少、文字更少的那個。
原則與實務
歸因於 references.md。此處為改寫，非直接引用。
| 原則 | 實務做法 |
|---|---|
| Rams：有用 | 刪除任何不服務任務的東西。功能、顏色、邊框、圖示、文案。 |
| Rams：易懂 | 介面會自我解釋。標籤勝過神秘圖示；顯示狀態；無需說明書。 |
| Rams：不擾人 | 介面框架讓位，內容主導。中立基底色板，主要動作使用一個強調色。 |
| Rams：誠實 | 不製造虛假急迫感、虛假進度、誇大宣稱或假裝的控制項。載入時顯示真實狀態。 |
| Rams：持久 | 避免流行痕跡（玻璃效果、為效果而做的漸層、新穎佈局）。使用耐用的字體、網格與設計代碼。 |
| Rams：徹底 | 邊緣情況、空/錯誤/載入狀態、長字串與微小細節都是設計的一部分。 |
| Rams：儘可能少的設計 | 減至要素，然後確認這些要素是正確的。 |
| Hick 定律 | 更少、分組的選擇。每個檢視畫面一個主要動作；其餘使用漸進式揭露。 |
| Fitts 定律 | 頻繁使用與主要的目標應大且靠近指標或拇指所在位置。最小約 44px 觸碰目標（依照 WCAG 2.2，CSS 下限為 24px）。 |
| Jakob 定律 | 使用熟悉的模式（導覽位置、表單行為、圖示）。新穎性需要有功能上的回報。 |
| Miller 定律 / 分塊 | 不要依賴於計算 7 個項目；將資訊分組為有意義的區塊，並保持工作集合小。 |
| 認知負荷 | 只顯示當下需要的東西。不要讓使用者跨畫面記憶資訊；應將上下文資訊攜帶至下一畫面。 |
| Doherty 臨界值 | 在約 400ms 內回應。超過此時間，應顯示即時回饋、骨架螢幕或樂觀更新；絕不無聲阻塞。 |
| Tesler 定律 | 複雜度是守恆的。將複雜度吸收到系統中（預設值、推論、自動化），而不是讓使用者承擔，除非揭露複雜度本身就是重點。 |
| Postel 定律 | 接受多樣的輸入（空格、格式、大小寫）；輸出一致且嚴格的結果。溫和地驗證，精確地解釋。 |
| 完形心理學：接近性、共同區域、相似性、連結性 | 先使用間距來分組，再用邊框，最後才是區塊。間距是最便宜的結構。相似功能，相似外觀。 |
| 美感可用性效應 | 拋光讓事物感覺更容易並換取容忍度，但它可能掩蓋真正的可用性缺陷。用真實任務測試；絕不將其作為推出有缺陷流程的理由。 |
| Von Restorff 效應 | 讓唯一重要的事情與眾不同。如果每件事都強調，就等於什麼都沒強調。 |
| 序列位置效應、峰終定律 | 將關鍵項目放在列表與流程的開頭或結尾；讓最後一步與錯誤時刻體貼周到。 |
| Zeigarnik 效應、目標漸進效應 | 在多步驟任務中顯示進度並保存部分工作成果。 |
| Tufte：資料墨水比 | 在圖表與表格中，每個標記都應承載資料。移除圖表垃圾、粗網格線、3D 效果、冗餘圖例；直接標記。 |
| Norman：預設用途、意符、回饋 | 控制項看起來可操作；每個動作都獲得可見的確認；控制項的效果與其對應；讓錯誤可復原。 |
| Vignelli / Müller-Brockmann | 一個網格、一個微小的字體級別、少數字體、一致的間距。限制帶來連貫性。 |
| Munari / Aicher | 用最少的手段解決問題；系統優於一次性設計；重複使用元件而非憑空發明。 |
| Krug | 不要讓使用者思考。假設掃讀而非閱讀。直接勝過聰明。 |
| Wroblewski | 表單：更少的欄位、頂部對齊標籤、行內驗證、合理的預設值。行動優先迫使你決定優先級。 |
| Frost（原子設計） | 從可重複使用的小零件搭配設計代碼開始建立；一致性來自系統，而非來自警覺性。 |
| Tognazzini | 讓狀態可見、保護使用者工作、保持互動可逆、偏好直接操作、保留鍵盤操作路徑。 |
| Ive / Rams 的工藝 | 解決細節直到物件看起來是必然的。材質的誠實勝過裝飾。 |
審查檢查清單
功能
- 主要任務可快速完成，且主要動作明確無誤。
- 每個元素都有一個可命名的任務；不存在純裝飾性的元素。
- 每個互動元素都有滑鼠懸浮/聚焦/作用中/禁用/載入/錯誤狀態。
- 已設計空、錯誤、離線、緩慢、長內容等情況。
- 動作是可逆的，或根據風險程度進行確認。
- 文案樸實、具體且以行動為導向；錯誤訊息說明發生何事以及如何解決。
- 使用熟悉的模式，除非有功能上的理由不這麼做。
形式（僅在功能通過後執行）
- 清晰的層級：每個檢視畫面一個焦點；通過瞇眼測試。
- 一致的網格、間距級別與字體級別；少量字體與字重。
- 顏色有限、有目的性，且絕不單獨傳達意義。
- 對齊與節奏精確；沒有任何東西是「差不多」對齊的。
誠實與持久性
- 沒有暗黑模式、虛假稀缺性或誤導性預設用途。
- 沒有任何東西依賴於短暫的流行趨勢。
反模式
- 裝飾：純裝飾性的漸層、陰影、插圖、每個標籤旁的圖示、到處都是邊框、降低對比度的背景。
- 無意義的動畫：延遲任務、為了吸引注意力而循環、或視差效果的動畫。動畫必須解釋一種變化（起源、層級、狀態），且 UI 回饋應保持在約 200 到 300ms 以下。尊重
prefers-reduced-motion。 - 暗黑模式：確認羞辱、隱藏成本、預先勾選的同意選項、偽裝的廣告、取消陷阱、糾纏、假倒數計時、對於同等後果的接受/拒絕提供不對稱的按鈕。
- 神秘肉：沒有標籤或工具提示的純圖示控制項、沒有可見替代方案的純手勢操作。
- 選擇傾倒：用設定與選項來代替好的預設值。
- 重新發明：自訂滾動條、非標準的表單控制項、為了新奇而做的特立獨行的導覽。
- 強調通貨膨脹：所有東西都加粗、加顏色或加上徽章。
- 風格凌駕於內容：在內容存在之前就設計容器；用 Lorem Ipsum 批准設計。
- 以極簡主義隱藏：為求簡潔而移除標籤、預設用途或狀態。極簡意味著必要，而非缺失。
- 展示優先：作品集截圖好看，但空狀態與錯誤狀態是空白。
基本要求（不可協商）
可及性（WCAG 2.2 AA 最低標準）
- 文字對比度 4.5:1（大字體與 UI 邊界/圖示為 3:1）。
- 完整鍵盤操作、邏輯焦點順序、可見的焦點指示器。
- 語意化 HTML 優先；ARIA 僅用於填補缺口。所有輸入欄位有標籤；有意義的圖片有替代文字。
- 絕不單獨使用顏色傳達意義。支援縮放至 200% 與文字大小調整而不遺失內容。
- 尊重
prefers-reduced-motion與prefers-color-scheme。內容閃爍頻率不超過每秒三次。 - 目標至少 24x24 CSS px，在觸控上力求 44x44。
回應式
- 內容優先、行動優先設計；佈局根據內容調整，中斷點設定在內容中斷之處，而非以裝置名稱設定。
- 在 320px 寬度下無水平捲動。使用相對單位、流動字型、
min()/clamp()。 - 內文至少 ~16px，行長約 45 至 75 個字元，行高約 1.4 至 1.6。
- 觸控與指標皆可操作；懸浮絕非唯一路徑。
效能即設計
- 快速是一項功能：精簡素材、無版面位移、系統字型或少數網路字型、在增強之前提供有意義的內容。
形式可主導的情況（少數例外）
只有在形式服務於功能時，形式才能主導。每次使用都必須指明其功能：
- 識別：品牌標記、顏色或一致的視覺簽章，幫助人們識別並信任一個產品。
- 信任與可信度：專業的拋光，其缺失會傳遞風險（支付、健康、安全）。
- 易讀性與掃讀：選擇字體級別、空白與對比度以讓閱讀與尋找更容易。
- 與任務的情感契合：語氣與情境匹配（醫療用平靜、兒童學習用活潑），當情緒影響完成度或舒適度時。
- 有其作用的愉悅感：一個簡短、可跳過的時刻，用於確認成功或教導一個機制（絕不用於頻繁或阻塞的路徑）。
- 藝術導向的內容：編輯、行銷、遊戲與作品集，其中體驗本身就是產品。即使在這些情況下，導覽、閱讀與購買路徑仍應保持功能優先。
如果無法將例外描述為「這有助於使用者執行 X 任務」，則它就不是例外。
工作方法
- 用 2 到 3 句話寫出使用者、任務與限制條件。
- 內容與結構優先（資訊層級、流程），視覺最後。
- 使用真實內容、真實資料量與真實邊緣情況。
- 從最樸素的常規解決方案開始；只添加測試或明確需求所證明的東西。
- 使用檢查清單審查；在添加之前先刪除。
- 在報告設計決策時，說明它所服務的功能，並明確說出如果一個悅目的選項因為損害功能而被拒絕。