Communitygithub.com

aswin-haridas/apple-guidelines-for-ui

平台无关的UI/UX设计指南(改编自Apple Human Interface Guidelines),适用于Web、Android、iOS、桌面、电视、手表等任何平台。在设计师、开发人员、审阅或评判UI、界面、流程、组件时使用。

apple-guidelines-for-ui 是什么?

这个技能提供了119个参考页面(位于`references/`目录下),这些页面是从Apple Human Interface Guidelines(HIG)改写而来的,适用于任何平台。它涵盖了广泛的设计主题,包括:设计原则、可访问性、按钮、菜单、导航、表单、警报、列表、颜色、布局、暗模式、动效、手势、无障碍、通知、隐私、内容写作等。每个参考页面都保留了指向原始HIG页面的`Source:`链接。使用时,用户首先根据任务确定相关主题(如组件、模式、基础、输入),然后仅通过Read工具读取需要的一页或多页(例如`references/buttons.md`)。技能要求用户将指南应用到具体的目标平台上(如Web、Android、iOS),并在指南列出跨平台等效项时选择正确的平台约定。该技能还强调在设计或审查UI时始终参考`design-principles.md`和`accessibility.md`。支持的文件格式包括Markdown(.md),共119页。对于AI Agent(如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设计指南(平台无关)

references/目录下(此文件旁边)有119个参考页面,这些页面从Apple HIG改写,适用于任何平台。每个页面都保留Source:行指向原文。

使用方法

  1. 确定任务涉及的主题(组件、模式、基础、输入)。从下面的目录中选择。
  2. 只使用Read工具读取相关页面,例如references/buttons.md。如果不确定哪个页面涵盖该主题,可在references/目录中grep关键词。
  3. 将指南应用于实际使用的平台(web、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 — 活动视图:活动视图(通常称为分享面板)提供一系列任务,人们可以在当前上下文中执行这些任务。在Web上……
  • 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 — 列视图:列视图(也称为浏览器或米勒列)允许人们通过一系列垂直列查看和导航数据层次结构……
  • combo-boxes.md — 组合框:组合框将文本字段与下拉按钮结合在一个控件中。
  • components.md — 组件:了解如何使用和自定义系统定义的组件,为用户提供熟悉且一致的体验。
  • content.md — 内容:- 图表
  • context-menus.md — 上下文菜单:上下文菜单提供与某个项目直接相关功能的快速访问,而不使界面杂乱。
  • controls.md — 控件:控件提供从系统表面(如快速设置面板、锁屏或硬件……)快速访问应用功能的方式。
  • dark-mode.md — 暗黑模式:暗黑模式是一种系统范围的外观设置,使用深色调色板提供适合低光环境下的舒适浏览体验……
  • design-principles.md — 设计原则:探索跨平台(Web、移动、桌面等)设计的基本原则。
  • 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 — 入门:创建在你支持的所有平台(Web、移动、桌面等)上都感觉自然的应用或游戏。
  • going-full-screen.md — 全屏模式:手机、平板、桌面和Web浏览器提供全屏模式,让人们将窗口扩展到整个屏幕,隐藏系统控件……
  • gyro-and-accelerometer.md — 陀螺仪与加速度计:设备上的陀螺仪和加速度计可以提供设备在物理世界中运动的数据。
  • icons.md — 图标:有效的图标是一种图形资源,以人们立即理解的方式表达单一概念。
  • image-views.md — 图像视图:图像视图在透明或不透明背景上显示单张图像(有时是动画图像序列)。
  • image-wells.md — 图像井:图像井是图像视图的可编辑版本。
  • images.md — 图像:为确保你的素材在所有支持的设备上看起来都很出色,了解系统如何显示内容及如何以适当分辨率提供素材……
  • inclusion.md — 包容性:包容性应用和游戏以人为本,优先考虑尊重性沟通,并以人人都能理解和享受的方式呈现内容和功能……
  • index.md — 界面设计指南:这些指南包含指导和最佳实践,帮助你在任何平台(Web、移动、桌面等)上设计出色的体验……
  • 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 — 从右到左:支持从右到左的语言(如阿拉伯语、希伯来语)需要镜像……

…(101个页面已列出,其余页面遵循相同模式)

…(为简洁而截断)

相关技能