Communitygithub.com

aswin-haridas/apple-guidelines-for-ui

平台中立的 UI/UX 設計指南(改編自 Apple 人機介面指南),適用於網頁、Android、iOS、桌面、電視、手錶或任何平台。

apple-guidelines-for-ui 是什麼?

這個技能提供了一套平台中立的 UI/UX 設計指南,改編自 Apple 人機介面指南 (HIG)。它包含 119 個參考頁面,涵蓋元件、模式、基礎和輸入等類別。使用時,只需根據任務選擇相關頁面閱讀,並將指引套用到實際平台(如網頁、Android 或 iOS)。當不同平台規範衝突時,應遵循目標平台的原生慣例。此技能特別強調設計原則(目的、自主性、責任、熟悉度、靈活性、簡潔性、工藝、愉悅感)和無障礙設計,並提供具體的審查建議,例如引用特定頁面與規則來指導修改。支援的代理平台包括 Claude Code、Cursor 和 Codex。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aswin-haridas/apple-guidelines-for-ui/tree/HEAD

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

UI 設計指南(平台中立)

119 個參考頁面位於 references/(此檔案旁),改編自 Apple 的 HIG,適用於任何平台。每個頁面均保留 Source: 行指向原始出處。

使用方法

  1. 找出任務觸及的主題(元件、模式、基礎、輸入)。從下方目錄中挑選。
  2. 僅使用 Read 工具閱讀相關頁面,例如 references/buttons.md。若不確定哪個頁面涵蓋該主題,請在 references/ 中搜尋關鍵字。
  3. 將指引套用至實際使用的平台(網頁、Android、iOS、桌面...)。當頁面列出跨平台對應項目(螢幕閱讀器、Cmd/Ctrl、Material 與系統慣例)時,請選擇目標平台適用的項目;若衝突,則遵循該平台的原生慣例。
  4. 審查 UI 時,請引用頁面與具體規則(例如「alerts.md:對於破壞性操作應使用取消按鈕」),並具體說明應修改的內容。

對於任何 UI 工作,始終考量 design-principles.md(目的、自主性、責任、熟悉度、靈活性、簡潔性、工藝、愉悅感)和 accessibility.md。

索引頁面:index.md、foundations.md、patterns.md、components.md、inputs.md。

目錄

  • accessibility.md — 無障礙設計:無障礙使用者介面讓每個人都有良好的應用程式或遊戲體驗。
  • action-sheets.md — 動作列表:動作列表(有時稱為確認對話框或底部選單)是一種模態視圖,顯示與使用者操作相關的選擇。
  • activity-views.md — 活動視圖:活動視圖(通常稱為分享表)提供一系列任務,讓使用者能在當前上下文中執行。在網路上...
  • alerts.md — 警示:警示提供使用者立即需要的重要資訊。
  • app-icons.md — 應用程式圖示:獨特且令人難忘的圖示能表達應用程式或遊戲的目的與個性,並幫助使用者一眼辨識。
  • augmented-reality.md — 擴增實境:擴增實境(AR)讓您創造沉浸式、引人入勝的體驗,無縫地將虛擬物件與真實世界融合。
  • boxes.md — 框:框建立一個視覺上獨特的群組,包含邏輯相關的資訊與元件。
  • branding.md — 品牌:應用程式與遊戲以獨特的品牌身份表達自己,使其在平台上即時可辨識,同時感覺自然。
  • buttons.md — 按鈕:按鈕啟動即時動作。
  • charting-data.md — 圖表資料:以圖表呈現資料能幫助您清晰且有吸引力地傳達資訊。
  • charts.md — 圖表:以圖表組織資料,清晰且具視覺吸引力地傳達資訊。
  • collaboration-and-sharing.md — 協作與分享:良好的協作與分享體驗簡單且響應迅速,讓使用者在有效溝通的同時參與內容。
  • collections.md — 集合:集合管理有序的內容集,並以可自訂且高度視覺化的佈局呈現。
  • color-wells.md — 顏色選擇器:顏色選擇器讓使用者調整文字、形狀、參考線及其他螢幕元素的顏色。
  • color.md — 色彩:審慎使用色彩能增強溝通、喚起品牌、提供視覺連續性、傳達狀態與回饋,並幫助使用者。
  • column-views.md — 欄檢視:欄檢視(也稱為瀏覽器或 Miller 欄)讓使用者透過一系列垂直欄位檢視和導航資料層級。
  • combo-boxes.md — 組合框:組合框將文字欄位與下拉按鈕結合成單一控制項。
  • components.md — 元件:學習如何使用和自訂系統定義的元件,為使用者提供熟悉且一致的體驗。
  • content.md — 內容:- 圖表
  • context-menus.md — 上下文選單:上下文選單提供與項目直接相關的功能存取,且不使介面雜亂。
  • controls.md — 控制項:控制項從系統表面(如快速設定面板、鎖定畫面或硬體快捷鍵)提供對應用程式功能的快速存取。
  • dark-mode.md — 深色模式:深色模式是一種系統範圍的外觀設定,使用深色調色板,為低光源環境提供舒適的觀看體驗。
  • design-principles.md — 設計原則:探索指導跨平台設計的基本原則——網頁、行動裝置、桌面等。
  • designing-for-games.md — 遊戲設計:當玩家在任何裝置上遊玩您的遊戲時,他們會沉浸在您設計的世界中,同時依賴他們喜愛的平台功能。
  • disclosure-controls.md — 揭露控制項:揭露控制項顯示和隱藏與特定控制項或視圖相關的資訊與功能。
  • drag-and-drop.md — 拖放:透過拖放,使用者可以將選取的相片、文字及其他內容從一個位置拖曳到另一個位置,以移動或複製。
  • edit-menus.md — 編輯選單:編輯選單讓使用者對當前視圖中的選取內容進行變更,此外還提供複製、全選等相關指令。
  • entering-data.md — 輸入資料:當您需要從使用者獲取資訊時,設計方式應使其易於提供且不易出錯。
  • feedback.md — 回饋:回饋幫助使用者了解正在發生的事情、發現下一步能做什麼、理解動作結果並避免錯誤。
  • file-management.md — 檔案管理:某些應用程式可以支援使用者預期在系統中管理的文件與檔案。
  • focus-and-selection.md — 焦點與選取:焦點幫助使用者視覺上確認其互動目標的物件。
  • foundations.md — 基礎:了解基本設計元素如何幫助您創造豐富的體驗。
  • game-controls.md — 遊戲控制:精準、直觀的遊戲控制能增強遊戲體驗,並提升玩家的沉浸感。
  • gauges.md — 量表:量表顯示數值區間內的特定數值。
  • generative-ai.md — 生成式 AI:生成式 AI 讓您能透過動態內容增強應用程式或遊戲,並提供智慧功能,解鎖新的創造力層次。
  • gestures.md — 手勢:手勢是使用者直接用於影響裝置上應用程式或遊戲中物體的物理動作。
  • getting-started.md — 入門:創建一款在您支援的每個平台(網頁、行動裝置、桌面等)上都感覺自然的應用程式或遊戲。
  • going-full-screen.md — 進入全螢幕:手機、平板、桌面與網頁瀏覽器提供全螢幕模式,讓使用者將視窗擴充至填滿螢幕,隱藏系統控制項。
  • gyro-and-accelerometer.md — 陀螺儀與加速度計:裝置上的陀螺儀與加速度計可提供裝置在物理世界中移動的資料。
  • icons.md — 圖示:有效的圖示是圖形資產,能表達單一概念,讓使用者立即理解。
  • image-views.md — 影像檢視:影像檢視在透明或不透明背景上顯示單一影像(或某些情況下的動畫影像序列)。
  • image-wells.md — 影像欄位:影像欄位是影像檢視的可編輯版本。
  • images.md — 影像:為確保您的藝術作品在您支援的所有裝置上呈現最佳效果,了解系統如何顯示內容以及如何以適當解析度提供藝術作品。
  • inclusion.md — 包容性:包容性的應用程式與遊戲以人為本,優先考慮尊重性溝通,並以每個人都能參與的方式呈現內容與功能。
  • index.md — 介面設計指南:這些指南包含指引與最佳實務,可幫助您在任何平台(網頁、行動裝置、桌面等)設計出色的體驗。
  • inputs.md — 輸入:了解使用者用於控制應用程式或遊戲及輸入資料的各種方法。
  • keyboards.md — 鍵盤:實體鍵盤可以是輸入文字、玩遊戲、控制應用程式等的重要輸入裝置。
  • labels.md — 標籤:標籤是靜態文字片段,使用者可以閱讀並通常可複製,但無法編輯。
  • launching.md — 啟動:流暢的啟動體驗幫助使用者立即開始使用您的應用程式或遊戲。
  • layout-and-organization.md — 佈局與組織:- 框
  • layout.md — 佈局:一致的佈局能適應不同顯示尺寸、方向與多工設定,幫助使用者理解並享受您的應用程式。
  • lists-and-tables.md — 列表與表格:列表與表格以多欄行呈現資料。
  • live-viewing-apps.md — 直播應用程式:設計直播應用程式時,優先考慮內容,並創造有趣、流暢的互動,鼓勵沉浸於直播體驗中。
  • loading.md — 載入:最佳的內容載入體驗在使用者意識到之前就已完成。
  • machine-learning.md — 機器學習:機器學習讓應用程式與遊戲能從資料與使用模式中學習,讓您能改善現有體驗並創造吸引人的新功能。
  • managing-accounts.md — 管理帳戶:當帳戶不會對您的體驗造成不必要的障礙時,它可以是使用者存取內容與內容的便利方式。
  • managing-notifications.md — 管理通知:通知能在裝置鎖定或使用中時,為使用者提供及時且重要的資訊。
  • maps.md — 地圖:地圖在您的應用程式或網站上顯示戶外或室內地理資料。
  • materials.md — 材質:材質是一種視覺效果,能在前景與背景元素之間創造深度、層次與層級感。
  • menus-and-actions.md — 選單與動作:- 活動視圖
  • menus.md — 選單:選單在使用者與之互動時顯示其選項,是在應用程式或遊戲中呈現指令的空間節省方式。
  • modality.md — 模態性:模態性是一種設計技術,將內容呈現於獨立、專用的模式中,防止與父視圖互動,並要求使用者先完成當前任務。
  • motion.md — 動態:優美、流暢的動態賦予介面生命力,傳達狀態、提供回饋與指示,並豐富視覺體驗。
  • multitasking.md — 多工:多工讓使用者能快速從一個應用程式切換到另一個,並在其中執行任務。
  • navigation-and-search.md — 導航與搜尋:- 搜尋欄位
  • nearby-interactions.md — 鄰近互動:鄰近互動支援整合附近人物與物件存在的裝置端體驗,使用鄰近技術。
  • nfc.md — NFC:近場通訊(NFC)允許相距幾公分的裝置無線交換資訊。
  • notifications.md — 通知:通知為使用者提供及時、高價值的資訊,讓他們一目了然。
  • offering-help.md — 提供幫助:雖然最有效的體驗是平易近人且直觀的,但必要時您仍可提供上下文相關的幫助。
  • onboarding.md — 入門引導:入門引導能幫助使用者快速開始使用您的應用程式或遊戲。
  • outline-views.md — 大綱檢視:大綱檢視以滾動列表呈現層級資料,儲存格組織成欄與行。
  • page-controls.md — 頁面控制項:頁面控制項(也稱為頁面指示器或點點指示器)顯示一行指示器影像,每個代表一個頁面。
  • panels.md — 面板:在桌面應用程式中,面板通常浮動於其他開啟視窗之上,提供補充控制項、選項或相關資訊。
  • patterns.md — 模式:獲得支援常見使用者動作、任務與體驗的設計指引。
  • pickers.md — 選取器:選取器顯示一個或多個可滾動的獨特值列表,使用者可從中選擇。
  • playing-audio.md — 播放音訊:使用者期望豐富的音訊體驗,能在裝置上下文改變時自動調整。
  • playing-haptics.md — 播放觸覺回饋:播放觸覺回饋能吸引使用者的觸覺,並將他們對物理世界的熟悉感帶入應用程式或遊戲中。
  • playing-video.md — 播放影片:使用者期望在裝置上享受豐富的影片體驗,無論使用何種應用程式或遊戲。
  • pointing-devices.md — 指向裝置:使用者可以使用觸控板或滑鼠等指向裝置來導航介面並啟動動作。
  • pop-up-buttons.md — 彈出按鈕:彈出按鈕(在某些平台上也稱為下拉選單或選擇器)顯示互斥選項的選單。
  • popovers.md — 彈出視窗:彈出視窗是短暫的視圖,當使用者點擊或輕點控制項或互動區域時,出現在其他內容之上。
  • presentation.md — 呈現:- 動作列表
  • printing.md — 列印:應用程式可在適當時整合系統提供的列印功能,並在必要時呈現自訂的印表機與文件特定選項。
  • privacy.md — 隱私:隱私至關重要:對您所需的隱私相關資料與資源保持透明,並保護使用者資料至關重要。
  • progress-indicators.md — 進度指示器:進度指示器讓使用者知道您的應用程式在載入內容或執行耗時操作時並未停滯。
  • pull-down-buttons.md — 下拉按鈕:下拉按鈕顯示與按鈕目的直接相關的項目或動作選單。
  • rating-indicators.md — 評分指示器:評分指示器使用一系列水平排列的圖形符號(預設為星星)來傳達評級水準。
  • ratings-and-reviews.md — 評分與評論:使用者在下載應用程式或遊戲前,通常會查看其評分與評論。
  • right-to-left.md — 從右到左:支援從右到左的語言,如阿拉伯語和...

相關技能