UI 設計
適用範圍
- 適用於桌面、行動裝置及網頁的視覺介面設計、實作、修改、審查、最佳化或原則指導請求。純後端、純資料庫及其他不涉及視覺介面工作的任務不在此技能範圍內。
- 此技能可獨立於 SDLC 工作流程運作，可單獨安裝。對於同時涉及資訊組織、互動行為或復原工作的任務，請使用可用的 UX 指引（例如
sdlc-ux-design）來進行相關決策。 - 若僅要求原則指導，請在該層級提供簡要回答，無需擴展到產品特定的設計、實作或驗收測試。
- 對於僅審查的請求，請報告發現與建議，無需建立新設計或變更實作。
- 設計探索、提案、概念比較與原型驗證僅建立或修改獨立的設計工件。僅在請求包含實作時，才變更生產程式碼。
- 對於混合請求，請先交付設計，再繼續授權的實作。分別交付與評估；原型驗證不等同於實作驗收。
- 對於實作，請遵循專案現有的檢查。若當前環境支援重現缺陷，請進行針對性的缺陷重現檢查；根據風險與範圍選擇其他行為變更的檢查。請勿僅為了滿足此技能而設定額外的驗證環境、產生正式的驗證報告或重複既有的檢查。
- 對於實作結果，請報告執行的檢查、觀察結果與未驗證的範圍。區分執行時期證據、基於程式碼的推論與主觀判斷；模型的自我評估並非使用者驗收。
按需閱讀
- 遵循以下的共享原則，並針對實際目標與情境閱讀平台參考資料。
- 桌面：閱讀桌面原則。
- 行動裝置：閱讀行動裝置原則。
- 網頁：閱讀網頁原則。
- 對於行動版網頁，請同時閱讀行動裝置與網頁原則。對於其他組合，請根據所選文件的條件載入其他參考資料。
- 若平台未指定，請先從任務與專案背景推斷。對於一般性建議，僅使用共享原則。僅當具體任務仍缺乏必要的平台決策時，才要求澄清。
- 對於適配版的背景或限制，請查閱其來源背景中的連結條目，並在必要時查閱原始段落。此技能中的英文指示定義了本地化適配版；查閱行為不會匯入上游工作流程或工具鏈。
設計交付
此部分適用於請求的視覺探索、提案、概念比較或原型驗證，無論變更規模大小。在混合任務中，此部分適用於設計部分；實作交付與驗收則遵循任務及專案現有要求。
- 優先透過圖片產生來呈現 UI 設計提案。現有的介面截圖可作為參考。若圖片產生不可用或失敗，請以單頁 HTML 工件呈現提案。來源背景。
- 對於合併的 UI/UX 設計，請提供 UI 設計圖片與互動式 UX HTML 原型。當 UI 使用 HTML 備援方案時，請使用單一 HTML 工件涵蓋兩者。
- 對於 HTML 工件，預設使用內聯 CSS 與 JavaScript，以便可直接開啟。使用局部狀態與明確標示的範例資料來展示商定的互動範圍。
- 在預期的視口下，使用實際內容（若可用）或明確標示的代表性內容來檢視已渲染的設計。來源背景。
- 使用圖片、預覽與可開啟檔案作為主要交付方式。隨附的文字應簡短，僅限於開啟指示、模擬範圍與必要的限制。
共享原則
應用原則
- 應用與請求工作、目標平台及情境相關的原則。
- 說明影響建議的條件與取捨。請勿普遍規定特定的視覺風格。
- 在引用數值要求或建議之前，請驗證其來源、單位及對目標平台的適用性。
設計原則
- 進入點與易用性：使主要進入點在視覺上可辨識。使用控制項的外觀、標籤與位置來傳達其使用方法與動作含義。來源背景。
- 一致性與風格：使圖示、元件與裝飾與產品目的及現有設計慣例保持一致。在添加裝飾時，保持內容可讀且動作可用。選擇符合產品類型、目標受眾、使用情境及陳述的視覺偏好的視覺風格。來源背景。
- 視覺設計系統：預設使用產品級別的視覺設計規則，明確的頁面級別例外在該頁面上優先。按語意角色組織可重複使用的設計值與模式，當重複需求確立時提取共享定義。在決定重複使用什麼時，保留意圖的區別。來源背景。
- 美學方向：當使用者的明確美學選擇與此技能風格偏好衝突時，遵循使用者的選擇。來源背景。
- 呈現概念：將呈現頁面的視覺概念奠基於其主題特有的特性。來源背景。
- 內容契合：選擇能容納實際內容形式、長度與數量的版面。當結構無法容納所需內容時，調整結構，同時保留事實與必要資訊。來源背景。
- 可用媒體：當視覺方法依賴媒體時，請基於現有或實際可取得的素材。當所需素材不可用時，選擇可行的構成方式。來源背景。
- 字體排印：根據閱讀條件選擇字體、大小與行距。透過大小與字重建立階層。保持正文與輔助文字可讀，包括在放大時，不裁剪或隱藏必要內容或控制項。
- 目標語言：針對產品支援的語言與書寫系統，在字體排印與版面中容納文字擴展、閱讀方向與文字特定造型。來源背景。
- 版面與間距：使用位置與分組來表達重要性與關係。一致地應用對齊與間距。使密度符合閱讀、比較與操作需求。避免競爭性的強調。根據介面或容器可用的空間來選擇版面結構。當空間改變時，視需要重新組織內容，保持主要內容與動作可存取。來源背景。
- 色彩、狀態與焦點：定義主要、輔助與狀態色彩，並一致地使用它們。確保文字、控制項與狀態有足夠的對比。當色彩傳達資訊時，輔以文字或形狀。使控制項狀態與焦點在視覺上可識別。針對產品支援的每種外觀，驗證文字與控制項的可讀性以及狀態區別。若目標平台暴露了高對比偏好設定，則在渲染的介面中予以遵循。來源背景。
- 互動目標：針對滑鼠、觸控或其他輸入方式調整目標的大小與間距，使其易於選取且不易誤觸相鄰的項目。
- 資料編碼：以圖形方式呈現資料時，選擇適合使用者需理解關係的視覺編碼。使適用的單位與比例清楚。來源背景。
- 動態效果目的：在任務導向與閱讀導向的介面上，使用動態效果來表示回饋、狀態變更或連續性。當動態效果解釋變更時，使其因果關係可理解。在說服性或體驗性的介面上，動態效果本身可有明確的表達目的。當使用者啟用目標環境支援的減少動態效果偏好時，予以遵循。在減少或取代動態效果時，保持內容可讀且必要的狀態變更可理解。非必要的動態效果不得阻擋輸入。當互動支援切換或取消時，使其動畫可中斷並轉換到最新的互動狀態；中斷動畫本身不會取消背景操作。來源背景。