hig-foundations

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Apple HIG: Design Foundations

Apple HIG：设计基础

Check for

.claude/apple-design-context.md

before asking questions. Use existing context and only ask for information not already covered.

提问前请查看

.claude/apple-design-context.md

文件。请基于已有上下文，仅询问未涵盖的信息。

Key Principles

核心原则

Prioritize content over chrome. Reduce visual clutter. Use system-provided materials and subtle separators rather than heavy borders and backgrounds.
Build in accessibility from the start. Design for VoiceOver, Dynamic Type, Reduce Motion, Increase Contrast, and Switch Control from day one. Every interactive element needs an accessible label.
Use system colors and materials. System colors adapt to light/dark mode, increased contrast, and vibrancy. Prefer semantic colors (
```
label
```
,
```
secondaryLabel
```
,
```
systemBackground
```
) over hard-coded values.
Use platform fonts and icons. SF Pro, SF Compact, SF Mono by default. New York for serif. Follow the type hierarchy at recommended sizes. Use SF Symbols for iconography.
Match platform conventions. Align look and behavior with system standards. Provide direct, responsive manipulation and clear feedback for every action.
Respect privacy. Request permissions only when needed, explain why clearly, provide value before asking for data. Design for minimal data collection.
Support internationalization. Accommodate text expansion, right-to-left scripts, and varying date/number formats. Use Auto Layout for dynamic content sizing.
Use motion purposefully. Animation should communicate meaning and spatial relationships. Honor Reduce Motion by providing crossfade alternatives.

内容优先于装饰元素。减少视觉杂乱。使用系统提供的材质和细微分隔线，而非厚重边框和背景。
从初始阶段就融入无障碍设计。从项目第一天起，就为VoiceOver、Dynamic Type、减少动效、增强对比度和切换控制功能进行设计。每个交互元素都需要无障碍标签。
使用系统色彩与材质。系统色彩会适配明暗模式、增强对比度和动态效果。优先使用语义化色彩（
```
label
```
、
```
secondaryLabel
```
、
```
systemBackground
```
）而非硬编码值。
使用平台字体与图标。默认使用SF Pro、SF Compact、SF Mono字体；衬线字体使用New York。遵循推荐尺寸的排版层级。图标使用SF Symbols。
匹配平台惯例。视觉风格和交互行为与系统标准保持一致。为每个操作提供直接、响应式的操作方式和清晰的反馈。
尊重隐私。仅在需要时请求权限，清晰说明原因，在收集数据前为用户提供价值。设计时遵循数据最小化原则。
支持国际化。适配文本扩展、从右到左脚本、不同的日期/数字格式。使用自动布局实现动态内容尺寸适配。
有目的性地使用动效。动画应传递意义和空间关系。为“减少动效”选项提供淡入淡出替代方案。

Reference Index

参考索引

Reference	Topic	Key content
accessibility.md	Accessibility	VoiceOver, Dynamic Type, color contrast, motor accessibility, Switch Control, audio descriptions
app-icons.md	App Icons	Icon grid, platform-specific sizes, single focal point, no transparency
branding.md	Branding	Integrating brand identity within Apple's design language, subtle branding, custom tints
color.md	Color	System colors, Dynamic Colors, semantic colors, custom palettes, contrast ratios
dark-mode.md	Dark Mode	Elevated surfaces, semantic colors, adapted palettes, vibrancy, testing in both modes
icons.md	Icons	Glyph icons, SF Symbols integration, custom icon design, icon weights, optical alignment
images.md	Images	Image resolution, @2x/@3x assets, vector assets, image accessibility
immersive-experiences.md	Immersive Experiences	AR/VR design, spatial immersion, comfort zones, progressive immersion levels
inclusion.md	Inclusion	Diverse representation, non-gendered language, cultural sensitivity, inclusive defaults
layout.md	Layout	Margins, spacing, alignment, safe areas, adaptive layouts, readable content guides
materials.md	Materials	Vibrancy, blur, translucency, system materials, material thickness
motion.md	Motion	Animation curves, transitions, continuity, Reduce Motion support, physics-based motion
privacy.md	Privacy	Permission requests, usage descriptions, privacy nutrition labels, minimal data collection
right-to-left.md	Right-to-Left	RTL layout mirroring, bidirectional text, icons that flip, exceptions
sf-symbols.md	SF Symbols	Symbol categories, rendering modes, variable color, custom symbols, weight matching
spatial-layout.md	Spatial Layout	visionOS window placement, depth, ergonomic zones, Z-axis design
typography.md	Typography	SF Pro, Dynamic Type sizes, text styles, custom fonts, font weight hierarchy, line spacing
writing.md	Writing	UI copy guidelines, tone, capitalization rules, error messages, button labels, conciseness

参考文档	主题	核心内容
accessibility.md	无障碍设计	VoiceOver、Dynamic Type、色彩对比度、肢体操作无障碍、切换控制、音频描述
app-icons.md	应用图标	图标网格、平台特定尺寸、单一焦点、无透明度
branding.md	品牌设计	在Apple设计语言中整合品牌标识、低调品牌呈现、自定义色调
color.md	色彩设计	系统色彩、动态色彩、语义化色彩、自定义调色板、对比度
dark-mode.md	深色模式	层级化界面、语义化色彩、适配调色板、动态效果、双模式测试
icons.md	图标设计	字形图标、SF Symbols整合、自定义图标设计、图标权重、视觉对齐
images.md	图片设计	图片分辨率、@2x/@3x资源、矢量资源、图片无障碍
immersive-experiences.md	沉浸式体验	AR/VR设计、空间沉浸、舒适区域、渐进式沉浸级别
inclusion.md	包容性设计	多元呈现、无性别语言、文化敏感度、包容性默认设置
layout.md	布局设计	边距、间距、对齐、安全区域、自适应布局、可读内容指南
materials.md	材质设计	动态效果、模糊、半透明、系统材质、材质厚度
motion.md	动效设计	动画曲线、过渡效果、连贯性、减少动效支持、基于物理的动效
privacy.md	隐私设计	权限请求、使用说明、隐私营养标签、数据最小化收集
right-to-left.md	从右到左排版	RTL布局镜像、双向文本、翻转图标、例外情况
sf-symbols.md	SF Symbols	符号分类、渲染模式、可变色彩、自定义符号、权重匹配
spatial-layout.md	空间布局	visionOS窗口放置、深度、人体工学区域、Z轴设计
typography.md	排版设计	SF Pro、Dynamic Type尺寸、文本样式、自定义字体、字重层级、行间距
writing.md	文案撰写	UI文案指南、语气、大小写规则、错误提示、按钮标签、简洁性

Applying Foundations Together

综合应用设计基础

Consider how principles interact:

Color + Dark Mode + Accessibility -- Custom palettes must work in both modes while maintaining WCAG contrast ratios. Start with system semantic colors.
Typography + Accessibility + Layout -- Dynamic Type must scale without breaking layouts. Use text styles and Auto Layout for the full range of type sizes.
Icons + Branding + SF Symbols -- Custom icons should match SF Symbols weight and optical sizing. Brand elements should integrate without overriding system conventions.
Motion + Accessibility + Feedback -- Every animation must have a Reduce Motion alternative. Motion should reinforce spatial relationships, not decorate.
Privacy + Writing + Onboarding -- Permission requests need clear, specific usage descriptions. Time them to when the user will understand the benefit.

考虑各原则之间的相互作用：

色彩 + 深色模式 + 无障碍设计 —— 自定义调色板必须在两种模式下都能满足WCAG对比度要求。从系统语义化色彩开始设计。
排版 + 无障碍设计 + 布局 —— Dynamic Type必须在不破坏布局的前提下缩放。使用文本样式和自动布局适配全范围的字号。
图标 + 品牌设计 + SF Symbols —— 自定义图标应匹配SF Symbols的字重和视觉尺寸。品牌元素应融入系统惯例，而非覆盖。
动效 + 无障碍设计 + 反馈 —— 每个动画都必须有“减少动效”的替代方案。动效应强化空间关系，而非仅作装饰。
隐私 + 文案撰写 + 引导流程 —— 权限请求需要清晰、具体的使用说明。应在用户能理解其益处的时机发起请求。

Output Format

输出格式

Cite the specific HIG foundation with file and section.
Note platform differences for the user's target platforms.
Provide concrete code patterns (SwiftUI/UIKit/AppKit).
Explain accessibility impact (contrast ratios, Dynamic Type scaling, VoiceOver behavior).

引用具体的HIG基础文档，包含文件和章节。
标注平台差异，针对用户的目标平台。
提供具体代码示例（SwiftUI/UIKit/AppKit）。
说明无障碍影响（对比度、Dynamic Type缩放、VoiceOver行为）。

Questions to Ask

需询问的问题

Which platforms are you targeting?
Do you have existing brand guidelines?
What accessibility level are you targeting? (WCAG AA, AAA, Apple baseline?)
System colors or custom?

你针对哪些平台进行开发？
你是否有现有的品牌指南？
你目标的无障碍级别是什么？（WCAG AA、AAA、Apple基准要求？）
使用系统色彩还是自定义色彩？