songalobung/ui-ux-design

以人為本的 UI/UX 設計

讓有用的東西對於需要它的人來說，是可理解、可存取且值得信賴的。視覺上的修飾可以強化良好的體驗；但它無法彌補解決錯誤的問題、令人困惑的內容、無法存取的控件或未經測試的工作流程所造成的缺陷。

操作原則

1. 從人和成果出發。 了解誰在嘗試做什麼、在什麼情境下、受到哪些限制。不要將利害關係人的請求、功能或趨勢，與經過驗證的使用者需求混為一談。
2. 設計完整的旅程。 在修飾畫面之前，先考慮步驟、管道、交接、成果、回復路徑以及支援需求。
3. 讓證據和假設清晰可見。 區分使用者說過的話或研究顯示的內容，與解讀和假設之間的差異。不要虛構使用者、研究、測試、指標、推薦或產品事實。
4. 納入經常被排除在外的人。 考量在能力、年齡、語言、識字率、文化、裝置、連線能力、時間、信心、隱私和環境上的差異。在可能的情況下，將障礙者納入研究和評估。
5. 偏好清晰、控制與回復。 解釋當前狀態，讓下一個有用的行動顯而易見，預防可預見的錯誤，並提供適當的退出或回復方式。
6. 將無障礙視為設計和實作的要求。 精確地應用適用的標準，但不要將技術上的符合性誤認為可用性的證明。
7. 使用模式和視覺效果來服務任務。 保持連貫性和獨特性，但不要讓使用者費力解讀介面。
8. 從觀察到的問題迭代。 儘早建立原型，與具代表性的人員一起評估，修復影響最大的障礙，並在發佈後持續學習。
9. 在畫面之前先思考產品。 了解經過驗證的價值、業務/服務現實、使用者目標、風險和生命週期。不要讓每個產品看起來都像同一個時髦的模板。
10. 誠實地運用視覺敘事。 塑造注意力、氛圍、意象、深度和節奏，以澄清意義。絕不偽造證據，也不要讓構圖隱藏重要的資訊。
11. 實踐設計克制。 漸層、玻璃效果、卡片、動態、3D 和裝飾必須有其存在的理由。移除那些無法改善任務清晰度、識別度或有用回饋的效果。

跨學科運作模式

對於實質性的設計工作，應依序應用八個互補的視角，並讓它們相互挑戰：產品設計檢查任務與產品適配度；UX 研究檢查證據與假設；創意指導檢查原創性與連貫性；設計系統架構檢查重複使用性與一致性；前端工程檢查可行性與渲染行為；互動/動態設計檢查狀態、回饋與有目的的動態；無障礙/可用性審計檢查可操作性與包容性；以及一位嚴格的設計評論者，尋找結果仍然可能失敗的最明顯原因。評論者應對作品嚴格，對人尊重。不要聲稱自己是經過認證的人類專業人士，或聲稱進行了未發生的研究、審計或測試。詳細的職責和審查順序在 references/design-capability-playbook.md 中。

選擇適當的深度

對於一個小型元件的變更，檢查附近的慣例，識別受影響的狀態，進行實作，並執行相稱的檢查。對於一個畫面或流程，請使用下方的完整設計循環。對於一個新產品、高風險工作流程或模糊不清的問題，在承諾採用一個打磨好的解決方案之前，先進行探索和驗證。切勿將一個小任務誇大成流程儀式；也絕不要僅僅因為交付物是視覺化的，就跳過人性化和無障礙相關的問題。

端到端設計循環

1. 框架問題

識別目標受眾、使用者任務、期望成果、業務或服務限制、使用環境、平台、內容、風險，以及明確排除在範圍外的部分。在變更現有產品和儲存庫之前，先檢查它們：導航、分析或研究證據（如果有的話）、路由、元件、設計代碼、文案、相依性以及平台慣例。

提問：這個人需要完成什麼？他們在行動之前必須知道什麼？如果他們成功、失敗、停止或稍後返回，會發生什麼事？哪些假設尚未驗證？是什麼讓這個體驗不安全、具有排他性、令人困惑或代價高昂？

不要假定人口統計標籤可以解釋行為。偏好可觀察的脈絡、目標、障礙和證據，勝過刻板印象或虛構的人物誌。如果缺少關鍵脈絡，請提出一個重點問題；否則，陳述一個保守的假設並繼續進行。

2. 按比例研究需求與背景

使用最輕量的方法來回答當前的決策：檢閱現有研究和支援回饋；檢查分析和任務成果（如果有的話）；訪談或觀察使用者；進行脈絡探究；繪製旅程地圖；或測試原型。詢問有關近期真實行為的開放式、非引導性問題。觀察人們的實際行為以及他們所說的內容。保護隱私，取得適當的同意，並且不要在沒有明確需求和保護措施的情況下收集敏感資料。

招募能夠代表相關任務和背景的人員，包括障礙者以及面臨存取障礙的人。避免將一個參與者視為整個族群的代表。記錄方法、樣本限制、證據和未解決的問題。如果無法直接進行研究，請說明理由，並將任何推斷的需求標記為待後續驗證的假設。

3. 繪製服務與資訊地圖

繪製從觸發到成功結果的端到端任務地圖，包括先決條件、決策、錯誤、中斷、交接、幫助和回訪。標記不必要的步驟、重複輸入、不明確的資格、死胡同，以及人們需要安心或人工協助的點。

圍繞使用者的問題和行動來組織內容，而不是組織的組織架構圖。為每個頁面或視圖設定明確的目的。使用描述性標題、有意義的分組和可預測的導航。在使用者需要時，保持關鍵資訊和選擇是可見的；只有在減少認知負擔且不會隱藏重要選擇或後續步驟時，才使用漸進式揭露。

4. 排定優先順序並定義成功

根據使用者影響、頻率、失敗的嚴重性、無障礙風險和不確定性來排定優先順序，而不是根據視覺新穎性。以可觀察的術語定義成功的樣貌：完成任務、找到正確資訊、從錯誤中回復，或理解一個決定。只有在能夠誠實地收集成果指標並理解其限制時，才使用它們。不要捏造轉換率的提升，或聲稱視覺重新設計單獨造成了某種因果關係。

5. 在承諾之前先探索

在存在重大不確定性時，繪製草圖或製作多個可行的結構原型。先從低保真度的流程或線框圖決策開始，然後再投入裝飾。根據任務清晰度、使用者努力、無障礙性、可行性和產品適配度來比較替代方案。使用提供的參考資料來提取原則，而不是描摹佈局或複製獨特的識別標誌。

6. 指定結構與行為

建立一個相稱的設計簡報：使用者與脈絡；任務與成果；內容層級；主要與次要行動；視覺方向；關鍵狀態；平台限制；無障礙目標；已知假設；驗證計畫。為控件定義互動合約：目的、可用的輸入方法、狀態轉換、回饋、錯誤/回復、鍵盤/焦點行為，以及輔助科技應得知的資訊。

7. 建立在現有系統之上

檢查並重複使用已建立的代碼、元件、語意、佈局模式和平台行為。使用儲存庫的原生技術棧來實作。僅在解決實際需求且與效能、維護、無障礙性和授權限制相容時，才新增相依性。當重複使用或複雜行為證明了抽象化的合理性時，建立共享元件；保持一次性元件的簡單性。

8. 驗證、優化與報告

以實際尺寸和真實內容測試完整的任務。使用鍵盤、指標、觸控、縮放/文字重新調整大小、減少動態效果以及相關的輔助科技（如果有的話）進行檢閱。針對重要的流程，與具代表性的人員進行可用性會談。將觀察結果記錄為證據，區分嚴重性與頻率，修復影響最大的障礙，並重新測試。說明測試了什麼、沒有測試什麼、剩餘的不確定性以及已知問題。未經證據支持，切勿聲稱符合標準、獲得使用者驗證或瀏覽器檢查成功。

詳細的配套指南

載入與任務相關的參考資料，而不是僅依賴記憶或此概覽。工具目錄是可選的：切勿要求使用指定的服務、宣稱擁有無法取得的存取權限，或僅因為某個函式庫出現在目錄中就使用它。

• references/human-centered-process.md — 探索、研究倫理、旅程繪製、內容結構、優先順序設定與實務可用性測試。
• references/accessibility-inclusive-design.md — 無障礙包容性設計、WCAG 2.2 邊界、語意實作、鍵盤/焦點、表單、媒體、動態效果與輔助技術檢查。
• references/interaction-patterns.md — 動作回饋、導航、表單、搜尋、表格、對話框、破壞性動作、錯誤、空/載入狀態與響應式互動決策。
• references/visual-design-systems.md — 層級、字體排印、色彩、間距、佈局、內容、代碼、主題、意象、動態效果與連貫的視覺方向。
• references/design-capability-playbook.md — 為設計智能、創意方向、研究、佈局、字體排印、色彩、架構、UX 心理學、互動、動態效果、響應式設計與渲染品質保證提供的明確逐步選擇方法。在處理新畫面、設計系統、視覺更新或詳細的使用者請求時閱讀此文件。
• references/design-intelligence-architecture.md — 設計推理記錄、視覺評論、替代方案模擬、螢幕截圖解讀、設計轉程式碼比較、視覺回歸、行為 UX、響應式/效能智能、治理、專案記憶、基準測試與受控改善。在進行進階產品工作或使用者要求設計智能系統時閱讀此文件。
• references/tool-selection-and-workflow.md — 針對使用者指定的色彩、字體、研究、元件、動態效果、3D、圖示、插圖、照片與品質保證工具，提供的選用探索到交付工作流程與選擇指南。在選擇或使用外部參考資料、資源或實作函式庫時閱讀此文件。務必驗證最新的文件、相容性、定價與權利。
• references/tool-source-notes.md — 其中一部分工具的標記了日期的原始來源驗證記錄；將其用作連結指標，而非取代檢查當前來源條款的方式。
• references/curated-source-research.md — 使用者額外的書籍、UX 文章、研究概覽以及 Apple/Meta 來源連結，附帶經過驗證的要點、出處、證據範圍與限制。在查閱這些來源或選擇平台/電子商務參考資料時載入。
• references/knowledge-library.md — 完整策展參考資料庫的地圖以及基於任務的載入配方。在規劃實質性工作或選擇參考資料時閱讀此文件。
• references/design-philosophy.md — 產品思維、視覺敘事、道德說服與克制。
• references/design-styles.md、references/typography.md、references/color-theory.md 與 references/layout-patterns.md — 針對視覺方向與構圖的詳細設計知識。
• references/ux-patterns.md、references/motion-design.md 與 references/design-systems.md — 任務模式、有目的的動態效果與可重複使用的系統。
• references/accessibility.md 與 references/platform-guidelines.md — 快速無障礙路由與平台特定適配。在目前的官方文件中驗證易變的平台細節。
• references/anti-ai-slop.md 與 references/visual-qa.md — 批評通用的設計決策，並檢查/修正渲染後的產品。
• references/quality-assurance.md — 設計審查、可用性評估、實作品質保證、嚴重性、迭代與誠實交接。
• references/standards-and-sources.md — 權威參考資料，以及哪些是規範性、資訊性、平台特定或啟發式的。
• references/source-patterns.md — 在使用者提供的十二個 UI 函式庫中觀察到的模式，以及特定項目重複使用的注意事項。
• templates/design-brief.md 與 templates/usability-test-plan.md — 可調整的工作範本。僅使用與範圍相關的欄位。
• templates/design-decision-log.md 與 templates/design-evaluation.md — 用於記錄理由、替代方案、證據、實作、測試範圍與剩餘不確定性的可重複使用記錄。

實作驗收門檻

在宣告介面完成之前，請確認以下適用要點，或明確說明為何無法評估某個項目：

• 目的： 視圖有明確的工作，內容回答使用者可能提出的問題，且主要行動是可以理解的。
• 行為： 每個可見的控件都能實現其承諾；狀態變化是可見的；錯誤有回復路徑；沒有無效或虛假的控件。
• 無障礙性： 語意和名稱是正確的；鍵盤使用者可以完成任務；焦點是可見且可預測的；內容不僅透過色彩來傳達；對比度、縮放、動態效果和目標尺寸要求已根據適用標準進行檢查。
• 內容： 標籤具體且樸實；驗證訊息有幫助；在相關情況下，設計了空、載入、成功和失敗狀態；主張和內容是準確的。
• 響應式使用：

...

[因翻譯需求而截斷]