Mobile App UI Design

移动应用UI设计

Expert guidance for designing beautiful, accessible, and platform-native mobile app interfaces following 2025 best practices.

遵循2025年最佳实践，为设计美观、无障碍且符合平台原生特性的移动应用界面提供专业指导。

Core Philosophy

核心理念

User-First Design — Prioritize user needs, behaviors, and mental models over aesthetics
Platform Consistency — Follow iOS HIG and Android Material Design guidelines
Accessibility as Foundation — Design for all users from the start, not as an afterthought
Emotional Intelligence — Create interfaces that users emotionally connect with
Performance-Conscious — Beautiful design that doesn't sacrifice app performance

用户优先设计 — 优先考虑用户需求、行为和心智模型，而非单纯的美观
平台一致性 — 遵循iOS HIG（Human Interface Guidelines）和Android Material Design规范
无障碍为基础 — 从设计之初就为所有用户考虑，而非事后补充
情感化设计 — 打造能让用户产生情感共鸣的界面
性能兼顾 — 美观的设计不能以牺牲应用性能为代价

Hard Rules (Must Follow)

硬性规则（必须遵守）

These rules are mandatory. Violating them means the skill is not working correctly.

这些规则是强制性的。违反规则意味着本技能未正常发挥作用。

Accessibility First

无障碍优先

All designs must meet WCAG 2.2 AA standards. Accessibility is not optional.

markdown

❌ FORBIDDEN:
- Color contrast below 4.5:1 for text
- Touch targets smaller than 44×44pt (iOS) or 48×48dp (Android)
- Information conveyed by color alone
- Missing alternative text for images
- Non-keyboard-navigable interfaces

✅ REQUIRED:
- Minimum 4.5:1 contrast ratio for normal text
- Minimum 3:1 contrast ratio for large text (18pt+)
- Touch targets: 44×44pt (iOS) / 48×48dp (Android)
- Support for Dynamic Type / Font Scaling
- VoiceOver (iOS) / TalkBack (Android) compatibility
- Clear focus indicators for keyboard navigation

所有设计必须符合WCAG 2.2 AA标准。无障碍设计是必备要求，而非可选项。

markdown

❌ 禁止：
- 文本颜色对比度低于4.5:1
- 触摸目标尺寸小于44×44pt（iOS）或48×48dp（Android）
- 仅通过颜色传递信息
- 图片缺少替代文本
- 无法通过键盘导航的界面

✅ 要求：
- 普通文本对比度至少为4.5:1
- 大文本（18pt及以上）对比度至少为3:1
- 触摸目标尺寸：44×44pt（iOS）/ 48×48dp（Android）
- 支持Dynamic Type（iOS）/ 字体缩放（Android）
- 兼容VoiceOver（iOS）/ TalkBack（Android）
- 键盘导航有清晰的焦点指示器

Platform Guidelines Adherence

遵循平台规范

Follow platform-specific design guidelines. Do not mix iOS and Android patterns.

markdown

❌ FORBIDDEN:
- Using Android-style FAB on iOS
- Using iOS-style bottom sheets on Android without adaptation
- Mixing platform navigation patterns
- Ignoring platform typography (SF Pro vs Roboto)

✅ REQUIRED:
iOS (Human Interface Guidelines):
- Use SF Pro font family
- Tab bar at bottom for primary navigation
- Push navigation with back chevron
- Standard iOS controls (UIKit/SwiftUI)

Android (Material Design 3):
- Use Roboto font family
- Bottom navigation bar or navigation drawer
- Material components with ripple effects
- Follow Material You dynamic theming

遵循平台特定的设计规范。禁止混合iOS和Android设计模式。

markdown

❌ 禁止：
- 在iOS上使用Android风格的FAB（浮动操作按钮）
- 在Android上使用iOS风格的底部弹窗而不做适配
- 混合平台导航模式
- 忽略平台排版规范（SF Pro vs Roboto）

✅ 要求：
iOS（Human Interface Guidelines）：
- 使用SF Pro字体家族
- 底部标签栏作为主要导航
- 带返回箭头的推送式导航
- 使用标准iOS控件（UIKit/SwiftUI）

Android（Material Design 3）：
- 使用Roboto字体家族
- 底部导航栏或导航抽屉
- 带波纹效果的Material组件
- 遵循Material You动态主题

Consistent Design System

一致性设计系统

Every app must have a documented design system with tokens.

markdown

❌ FORBIDDEN:
- Ad-hoc colors and spacing values
- Inconsistent button styles across screens
- Multiple unnamed font sizes
- Components without defined states

✅ REQUIRED:
Design System Must Include:
├── Color Tokens (primary, secondary, surface, error, etc.)
├── Typography Scale (heading1-6, body, caption, etc.)
├── Spacing Scale (4, 8, 12, 16, 24, 32, 48px)
├── Border Radius Tokens (none, sm, md, lg, full)
├── Shadow/Elevation Tokens (elevation1-5)
└── Component Library (button, input, card, etc.)

每个应用必须拥有带设计令牌的文档化设计系统。

markdown

❌ 禁止：
- 临时定义的颜色和间距值
- 不同屏幕间按钮样式不一致
- 多种未命名的字体大小
- 组件未定义状态

✅ 要求：
设计系统必须包含：
├── 颜色令牌（primary、secondary、surface、error等）
├── 排版层级（heading1-6、body、caption等）
├── 间距层级（4、8、12、16、24、32、48px）
├── 圆角令牌（none、sm、md、lg、full）
├── 阴影/层级令牌（elevation1-5）
└── 组件库（button、input、card等）

Touch-Friendly Design

触控友好设计

All interactive elements must be optimized for touch interaction.

markdown

❌ FORBIDDEN:
- Touch targets smaller than minimum size
- Interactive elements too close together (<8px gap)
- Important actions outside thumb reach zone
- Hover-dependent interactions

✅ REQUIRED:
- Minimum touch target: 44×44pt (iOS) / 48×48dp (Android)
- Minimum spacing between targets: 8px
- Primary actions in thumb-friendly zone (bottom 2/3)
- Clear tap feedback (ripple, highlight, scale)

所有交互元素必须针对触控操作优化。

markdown

❌ 禁止：
- 触摸目标小于最小尺寸
- 交互元素间距过近（<8px间隙）
- 重要操作位于拇指触及范围之外
- 依赖悬停的交互

✅ 要求：
- 最小触摸目标尺寸：44×44pt（iOS）/ 48×48dp（Android）
- 触摸目标间最小间距：8px
- 主要操作位于拇指友好区域（屏幕下方2/3部分）
- 清晰的点击反馈（波纹、高亮、缩放）

Quick Reference

快速参考

When to Use What

场景对应方案

Scenario	Approach	Key Considerations
New app design	Start with design system	Define tokens before screens
iOS-only app	Human Interface Guidelines	SF Pro, standard iOS patterns
Android-only app	Material Design 3	Roboto, Material components
Cross-platform app	Adaptive design	Platform-specific navigation
Redesign existing app	Audit first	Maintain mental models
Accessibility review	WCAG 2.2 AA checklist	Contrast, touch targets, labels

场景	方法	关键考虑因素
新应用设计	从设计系统开始	先定义令牌再设计界面
iOS专属应用	遵循Human Interface Guidelines	SF Pro字体、标准iOS模式
Android专属应用	遵循Material Design 3	Roboto字体、Material组件
跨平台应用	自适应设计	平台特定的导航模式
现有应用重设计	先做审计	保留用户心智模型
无障碍评审	使用WCAG 2.2 AA检查清单	对比度、触摸目标、标签

Design System Fundamentals

设计系统基础

Color System

颜色系统

markdown

undefined

markdown

undefined

Color Token Structure

颜色令牌结构

Semantic Colors

语义化颜色

primary → Main brand color, CTAs primary-variant → Darker/lighter primary for states secondary → Secondary actions, accents background → App background surface → Card backgrounds, elevated surfaces error → Error states, destructive actions on-primary → Text/icons on primary color on-background → Text/icons on background on-surface → Text/icons on surface

primary → 主品牌色、主要操作按钮（CTA） primary-variant → 主色的深浅变体，用于不同状态 secondary → 次要操作、强调元素 background → 应用背景色 surface → 卡片背景、悬浮表面 error → 错误状态、破坏性操作 on-primary → 主色上的文本/图标颜色 on-background → 背景上的文本/图标颜色 on-surface → 表面上的文本/图标颜色

Color Palette (60-30-10 Rule)

配色比例（60-30-10规则）

60% → Neutral/background colors 30% → Secondary/supporting colors 10% → Accent/primary colors

60% → 中性色/背景色 30% → 次要/辅助色 10% → 强调/主色

Dark Mode Considerations

深色模式注意事项

Don't just invert colors
Use desaturated colors for dark surfaces
Reduce contrast slightly (avoid pure white on black)
Maintain color meaning across modes

undefined

不要简单反转颜色
深色表面使用低饱和度颜色
适当降低对比度（避免纯黑配纯白）
保持颜色在不同模式下的语义一致

undefined

Typography Scale

排版层级

markdown

undefined

markdown

undefined

Mobile Typography Guidelines

移动应用排版规范

iOS Typography (SF Pro)

iOS排版（SF Pro）

Large Title → 34pt, Bold Title 1 → 28pt, Bold Title 2 → 22pt, Bold Title 3 → 20pt, Semibold Headline → 17pt, Semibold Body → 17pt, Regular Callout → 16pt, Regular Subhead → 15pt, Regular Footnote → 13pt, Regular Caption 1 → 12pt, Regular Caption 2 → 11pt, Regular

Large Title → 34pt，粗体 Title 1 → 28pt，粗体 Title 2 → 22pt，粗体 Title 3 → 20pt，半粗体 Headline → 17pt，半粗体 Body → 17pt，常规体 Callout → 16pt，常规体 Subhead → 15pt，常规体 Footnote → 13pt，常规体 Caption 1 → 12pt，常规体 Caption 2 → 11pt，常规体

Android Typography (Roboto / Material 3)

Android排版（Roboto / Material 3）

Display Large → 57sp Display Medium → 45sp Display Small → 36sp Headline Large → 32sp Headline Medium→ 28sp Headline Small → 24sp Title Large → 22sp Title Medium → 16sp, Medium Title Small → 14sp, Medium Body Large → 16sp Body Medium → 14sp Body Small → 12sp Label Large → 14sp, Medium Label Medium → 12sp, Medium Label Small → 11sp, Medium

Display Large → 57sp Display Medium → 45sp Display Small → 36sp Headline Large → 32sp Headline Medium→ 28sp Headline Small → 24sp Title Large → 22sp Title Medium → 16sp，中等体 Title Small → 14sp，中等体 Body Large → 16sp Body Medium → 14sp Body Small → 12sp Label Large → 14sp，中等体 Label Medium → 12sp，中等体 Label Small → 11sp，中等体

Best Practices

最佳实践

Maximum 2-3 font families per app
Minimum body text: 16px (14px absolute minimum)
Line height: 1.4-1.6× font size for body text
Support Dynamic Type (iOS) / Font Scaling (Android)

undefined

每个应用最多使用2-3种字体家族
正文最小字号：16px（绝对最小值14px）
正文行高：字号的1.4-1.6倍
支持Dynamic Type（iOS）/ 字体缩放（Android）

undefined

Spacing System

间距系统

markdown

undefined

markdown

undefined

8-Point Grid System

8点网格系统

Base Unit: 8px

基础单位：8px

Spacing Scale

间距层级

spacing-0 → 0px spacing-1 → 4px (half unit) spacing-2 → 8px (1 unit) spacing-3 → 12px (1.5 units) spacing-4 → 16px (2 units) spacing-5 → 24px (3 units) spacing-6 → 32px (4 units) spacing-7 → 48px (6 units) spacing-8 → 64px (8 units)

spacing-0 → 0px spacing-1 → 4px （半单位） spacing-2 → 8px （1单位） spacing-3 → 12px （1.5单位） spacing-4 → 16px （2单位） spacing-5 → 24px （3单位） spacing-6 → 32px （4单位） spacing-7 → 48px （6单位） spacing-8 → 64px （8单位）

Component Spacing

组件间距

Button padding → 12px vertical, 24px horizontal Card padding → 16px List item padding → 16px horizontal, 12px vertical Section spacing → 24px-32px Screen edge margin → 16px (phones), 24px (tablets)

按钮内边距 → 垂直12px，水平24px 卡片内边距 → 16px 列表项内边距 → 水平16px，垂直12px 区块间距 → 24px-32px 屏幕边缘边距 → 16px（手机），24px（平板）

Touch Target Spacing

触摸目标间距

Minimum gap between interactive elements: 8px Recommended gap: 12-16px

---

交互元素间最小间隙：8px 推荐间隙：12-16px

---

Platform Guidelines

平台规范

iOS Human Interface Guidelines

markdown

undefined

markdown

undefined

iOS Design Principles

iOS设计原则

Core Principles

核心原则

Clarity → Text legible, icons precise, purpose obvious
Deference → UI helps understanding, not competing with content
Depth → Visual layers and realistic motion convey hierarchy

清晰性 → 文本易读、图标精准、用途明确
顺从性 → UI辅助用户理解内容，而非与内容竞争
层次感 → 视觉层级和拟真动效传递结构关系

Navigation Patterns

导航模式

Tab Bar (bottom) → 3-5 primary destinations
Navigation Bar (top) → Title, back button, actions
Modal sheets → Temporary focused tasks
Popovers (iPad) → Contextual options

标签栏（底部） → 3-5个主要目的地
导航栏（顶部） → 标题、返回按钮、操作按钮
模态弹窗 → 临时聚焦任务
弹出框（iPad） → 上下文选项

2025 Updates: Liquid Glass

2025年更新：Liquid Glass

Translucent materials for controls
Floating navigation elements
Dynamic depth and hierarchy
Background blur effects

控件使用半透明材质
浮动导航元素
动态深度和层级
背景模糊效果

Safe Areas

安全区域

Top: Status bar + Dynamic Island/Notch
Bottom: Home indicator (34pt on Face ID devices)
Use safeAreaInsets for proper content placement

顶部：状态栏 + Dynamic Island/刘海
底部：Home指示器（Face ID设备为34pt）
使用safeAreaInsets确保内容正确放置

Standard Dimensions

标准尺寸

Navigation bar height: 44pt (96pt with large title)
Tab bar height: 49pt (83pt on Face ID devices)
Toolbar height: 44pt

undefined

导航栏高度：44pt（大标题模式下为96pt）
标签栏高度：49pt（Face ID设备为83pt）
工具栏高度：44pt

undefined

Android Material Design 3

markdown

undefined

markdown

undefined

Material Design 3 Principles

Material Design 3原则

Core Concepts

核心概念

Material You → Personal, adaptive, dynamic color
Expressiveness → Emotional connection through design
Accessibility → Inclusive design for all users

Material You → 个性化、自适应、动态色彩
表达性 → 通过设计建立情感连接
无障碍 → 为所有用户提供包容性设计

Navigation Patterns

导航模式

Bottom Navigation → 3-5 primary destinations
Navigation Drawer → 5+ destinations or secondary nav
Navigation Rail → Tablets and large screens
Top App Bar → Title, navigation, actions

底部导航 → 3-5个主要目的地
导航抽屉 → 5个以上目的地或次要导航
导航栏 → 平板和大屏设备
顶部应用栏 → 标题、导航、操作按钮

Material 3 Expressive (2025)

Material 3 2025 expressive特性

Dynamic color from user wallpaper
Springy, physics-based motion
Bolder, more expressive typography
Rounded, approachable shapes

从用户壁纸提取动态色彩
基于物理特性的弹性动效
更醒目、更具表达性的排版
圆润、亲和的形状

Component Shapes

组件形状

Extra Small: 4dp
Small: 8dp
Medium: 12dp
Large: 16dp
Extra Large: 28dp
Full: 50% (pills/circles)

极小：4dp
小：8dp
中：12dp
大：16dp
极大：28dp
全圆角：50%（胶囊/圆形）

Standard Dimensions

标准尺寸

App bar height: 64dp
Bottom navigation height: 80dp
FAB size: 56dp (standard), 40dp (small), 96dp (large)

---

应用栏高度：64dp
底部导航高度：80dp
FAB尺寸：56dp（标准），40dp（小型），96dp（大型）

---

2025 Design Trends

2025年设计趋势

AI-Driven Personalization

AI驱动的个性化

markdown

undefined

markdown

undefined

Adaptive UI Patterns

自适应UI模式

Personalization Strategies

个性化策略

Content recommendations based on behavior
Adaptive UI layouts based on usage patterns
Smart defaults and predictive actions
Contextual feature suggestions

基于行为的内容推荐
基于使用模式的自适应UI布局
智能默认值和预测性操作
上下文相关的功能建议

Implementation Guidelines

实施规范

Always provide manual override options
Explain why content is recommended
Respect user privacy preferences
Gradual personalization (don't overwhelm new users)

undefined

始终提供手动覆盖选项
解释内容推荐的原因
尊重用户隐私偏好
逐步实现个性化（不要让新用户感到不知所措）

undefined

Dark Mode Excellence

深色模式优化

markdown

undefined

markdown

undefined

Dark Mode Best Practices

深色模式最佳实践

Color Adaptation

色彩适配

Light Mode → Dark Mode White (#FFFFFF) → Dark gray (#121212) Black (#000000) → White (#FFFFFF) Primary (vibrant) → Primary (desaturated) Shadows → Subtle shadows or none

浅色模式 → 深色模式白色 (#FFFFFF) → 深灰 (#121212) 黑色 (#000000) → 白色 (#FFFFFF) 主色（鲜艳） → 主色（低饱和度）阴影 → 柔和阴影或无阴影

Surface Elevation (Material 3)

表面层级（Material 3）

Elevation 0 → #121212 Elevation 1 → #1E1E1E (+ 5% white overlay) Elevation 2 → #232323 (+ 7% white overlay) Elevation 3 → #272727 (+ 8% white overlay) Elevation 4 → #2C2C2C (+ 9% white overlay) Elevation 5 → #323232 (+ 11% white overlay)

Elevation 0 → #121212 Elevation 1 → #1E1E1E（叠加5%白色） Elevation 2 → #232323（叠加7%白色） Elevation 3 → #272727（叠加8%白色） Elevation 4 → #2C2C2C（叠加9%白色） Elevation 5 → #323232（叠加11%白色）

Recommendations

建议

Auto-switch based on system setting
Separate color tokens for light/dark
Test contrast in both modes
Consider OLED optimization (true blacks)

undefined

根据系统设置自动切换模式
为浅色/深色模式设置独立的颜色令牌
在两种模式下测试对比度
考虑OLED优化（纯黑显示）

undefined

Microinteractions

微交互

markdown

undefined

markdown

undefined

Meaningful Motion

有意义的动效

Types of Microinteractions

微交互类型

Feedback → Button press, form submission
State → Loading, success, error
Guidance → Onboarding hints, tooltips
Delight → Celebration animations, easter eggs

反馈 → 按钮点击、表单提交
状态 → 加载、成功、错误
引导 → 新手引导提示、工具提示
愉悦感 → 庆祝动画、彩蛋

Motion Principles

动效原则

Duration: 200-500ms for most interactions
Easing: Use natural easing curves
Purpose: Every animation should have a reason
Performance: Use hardware-accelerated properties

时长：大多数交互为200-500ms
缓动：使用自然的缓动曲线
目的性：每个动画都应有存在的理由
性能：使用硬件加速属性

2025 Trends

2025年趋势

Springy, physics-based animations
Morphing transitions between states
Gesture-driven interactions
Reduced motion support for accessibility

undefined

基于物理特性的弹性动画
状态间的变形过渡
手势驱动的交互
支持减少动效的无障碍选项

undefined

Glassmorphism & Neumorphism

玻璃态与新拟态

markdown

undefined

markdown

undefined

Modern Visual Styles

现代视觉风格

Glassmorphism

玻璃态

Properties:

Background blur (backdrop-filter: blur)
Transparency (10-40% opacity)
Subtle border (1px white at 20% opacity)
Soft shadow

Use Cases:

Overlays and modals
Cards on image backgrounds
Navigation bars (iOS Liquid Glass)

Caution:

Ensure text readability
Consider performance impact
Provide fallback for older devices

特性：

背景模糊（backdrop-filter: blur）
透明度（10-40%不透明度）
细微边框（1px白色，20%不透明度）
柔和阴影

适用场景：

遮罩和弹窗
图片背景上的卡片
导航栏（iOS Liquid Glass）

注意事项：

确保文本可读性
考虑性能影响
为旧设备提供降级方案

Neumorphism (Soft UI)

新拟态（Soft UI）

Properties:

Soft shadows (light and dark)
Subtle elevation effect
Muted color palette

Use Cases:

Toggle switches
Input fields
Cards

Caution:

Often fails accessibility contrast tests
Use sparingly, not as primary style
Always test with actual content

---

特性：

柔和阴影（浅色和深色）
细微的层级效果
低饱和度配色

适用场景：

开关控件
输入框
卡片

注意事项：

通常难以通过无障碍对比度测试
谨慎使用，不要作为主要风格
始终结合实际内容测试

---

Accessibility Checklist

无障碍检查清单

Visual Accessibility

视觉无障碍

markdown

undefined

markdown

undefined

Vision Accessibility Checklist

视觉无障碍检查清单

Color & Contrast

颜色与对比度

Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large)
UI component contrast ≥ 3:1
Color is not the only indicator (use icons, text)
Works for colorblind users (test with simulators)

文本对比度 ≥ 4.5:1（普通文本），≥3:1（大文本）
UI组件对比度 ≥3:1
不单独通过颜色传递信息（配合图标、文本）
适配色盲用户（使用模拟器测试）

Text & Typography

文本与排版

Base font size ≥ 16px
Supports Dynamic Type (iOS) / Font Scaling (Android)
Line height ≥ 1.4× for body text
Text can scale to 200% without loss of content

基础字号 ≥16px
支持Dynamic Type（iOS）/ 字体缩放（Android）
正文行高 ≥1.4倍
文本可缩放至200%且不丢失内容

Focus & Navigation

焦点与导航

Visible focus indicators
Logical tab order
Skip links for repetitive content
Keyboard-accessible (external keyboards)

undefined

可见的焦点指示器
合理的Tab键顺序
重复内容的跳过链接
支持键盘导航（外接键盘）

undefined

Motor Accessibility

运动无障碍

markdown

undefined

markdown

undefined

Motor Accessibility Checklist

运动无障碍检查清单

Touch Targets

触摸目标

Minimum size: 44×44pt (iOS) / 48×48dp (Android)
Spacing between targets ≥ 8px
No time-limited interactions (or extendable)
Alternative to drag gestures (WCAG 2.2)

最小尺寸：44×44pt（iOS）/48×48dp（Android）
触摸目标间距 ≥8px
无时间限制的交互（或可延长时间）
拖拽手势的替代方案（符合WCAG 2.2）

Interaction

交互

Single-tap for all actions (no double-tap required)
Undo available for destructive actions
No precision requirements (fine motor)
Support for Switch Control / Voice Access

undefined

所有操作支持单击（无需双击）
破坏性操作支持撤销
无精细操作要求（针对精细运动能力较弱的用户）
支持Switch Control / Voice Access

undefined

Screen Reader

屏幕阅读器

markdown

undefined

markdown

undefined

Screen Reader Checklist

屏幕阅读器检查清单

Content

内容

All images have descriptive alt text
Decorative images have empty alt (alt="")
Buttons/links have descriptive labels
Form inputs have associated labels
Headings used for structure (not styling)

所有图片都有描述性替代文本
装饰性图片使用空替代文本（alt=""）
按钮/链接有描述性标签
表单输入框有关联标签
使用标题构建结构（而非仅用于样式）

Navigation

Component Patterns

组件模式

Button Design

按钮设计

markdown

undefined

markdown

undefined

Button Hierarchy

按钮层级

Primary Button

主要按钮

Most important action on screen
Filled/solid style
High contrast
Only ONE per view section

屏幕上最重要的操作
填充/实心样式
高对比度
每个视图区域仅保留一个

Secondary Button

次要按钮

Alternative actions
Outlined or tonal style
Medium contrast

替代操作
轮廓或色调样式
中等对比度

Tertiary Button

三级按钮

Low-priority actions
Text-only or ghost style
Subtle appearance

低优先级操作
纯文本或幽灵样式
外观低调

Destructive Button

破坏性按钮

Delete, remove, cancel
Red/error color
Requires confirmation for important data

删除、移除、取消等操作
红色/错误色
重要数据操作需确认

Button States

按钮状态

Default → Normal appearance
Pressed → Scale down, darker
Disabled → 50% opacity, no interaction
Loading → Spinner, disabled

undefined

默认 → 正常外观
按下 → 缩小、变暗
禁用 → 50%不透明度，无法交互
加载 → 显示加载动画，禁用状态

undefined

Form Design

表单设计

markdown

undefined

markdown

undefined

Form Best Practices

表单最佳实践

Input Fields

输入框

Clear labels (above input, not placeholder-only)
Helpful placeholder text
Error states with specific messages
Success validation feedback
Appropriate keyboard types

清晰的标签（位于输入框上方，而非仅用占位符）
有用的占位符文本
带具体提示的错误状态
成功的验证反馈
合适的键盘类型

Layout

布局

Single column for mobile
Group related fields
Logical tab order
Primary action at bottom
Sticky submit button if long form

移动端使用单列布局
相关字段分组
合理的Tab键顺序
主要操作位于底部
长表单使用固定提交按钮

Validation

验证

Inline validation (on blur or after input)
Clear error messages with fix suggestions
Don't clear fields on error
Mark required fields clearly

undefined

内联验证（失焦或输入后）
清晰的错误信息及修复建议
错误时不清除输入内容
明确标记必填字段

undefined

Navigation Patterns

导航模式

markdown

undefined

markdown

undefined

Mobile Navigation

移动应用导航

Bottom Navigation (Primary)

底部导航（主要）

3-5 destinations
Icons + labels
Active state indicator
Consistent across app

3-5个目的地
图标+标签
激活状态指示器
全应用保持一致

Tab Bar (Content Switching)

标签栏（内容切换）

Horizontal tabs for related content
Swipe between tabs
Indicator for active tab

横向标签用于相关内容
可滑动切换标签
激活标签有指示器

Navigation Stack

导航栈

Clear back navigation
Meaningful titles
Breadcrumbs for deep hierarchies

清晰的返回导航
有意义的标题
深层级结构使用面包屑

Gestures

手势

Swipe back (iOS standard)
Pull to refresh
Swipe actions on list items
Long press for context menus

---

滑动返回（iOS标准）
下拉刷新
列表项滑动操作
长按呼出上下文菜单

---

Design Process

设计流程

Workflow

工作流

markdown

undefined

markdown

undefined

App Design Workflow

应用设计工作流

Research & Discovery ├── User research and personas ├── Competitor analysis ├── Platform guidelines review └── Technical constraints
Information Architecture ├── User flows ├── Navigation structure ├── Content hierarchy └── Sitemap
Design System Setup ├── Color tokens ├── Typography scale ├── Spacing system ├── Component library └── Icon set
Wireframing ├── Low-fidelity layouts ├── Flow validation ├── Stakeholder review └── Iteration
Visual Design ├── High-fidelity mockups ├── Interaction design ├── Prototype creation └── Accessibility audit
Handoff & Implementation ├── Design specs documentation ├── Asset export ├── Developer collaboration └── QA review

---

研究与探索 ├── 用户研究与用户画像 ├── 竞品分析 ├── 平台规范评审 └── 技术约束评估
信息架构 ├── 用户流程 ├── 导航结构 ├── 内容层级 └── 站点地图
设计系统搭建 ├── 颜色令牌 ├── 排版层级 ├── 间距系统 ├── 组件库 └── 图标集
线框设计 ├── 低保真布局 ├── 流程验证 ├── 利益相关者评审 └── 迭代优化
视觉设计 ├── 高保真原型 ├── 交互设计 ├── 原型制作 └── 无障碍审计
交付与实施 ├── 设计规范文档 ├── 资源导出 ├── 与开发者协作 └── QA评审

---

Anti-Patterns to Avoid

需避免的反模式

markdown

undefined

markdown

undefined

Common Mistakes

常见错误

Visual Design

视觉设计

❌ Using more than 3 fonts ❌ Inconsistent spacing values ❌ Low contrast text ❌ Overly complex gradients/effects ❌ Ignoring safe areas

❌ 使用超过3种字体 ❌ 间距值不一致 ❌ 低对比度文本 ❌ 过于复杂的渐变/效果 ❌ 忽略安全区域

Interaction Design

交互设计

❌ Hidden navigation ❌ Gesture-only actions without alternatives ❌ Tiny touch targets ❌ No loading states ❌ Confusing back navigation

❌ 隐藏式导航 ❌ 仅支持手势的操作无替代方案 ❌ 极小的触摸目标 ❌ 无加载状态 ❌ 混乱的返回导航

Accessibility

无障碍

❌ Placeholder-only labels ❌ Color-only information ❌ Auto-playing media ❌ Timed interactions without extension ❌ Missing screen reader labels

❌ 仅用占位符作为标签 ❌ 仅通过颜色传递信息 ❌ 自动播放媒体 ❌ 有时间限制的交互且无法延长 ❌ 缺少屏幕阅读器标签

Platform

平台

❌ iOS patterns on Android (or vice versa) ❌ Custom controls when standard works ❌ Ignoring platform conventions ❌ Not supporting dark mode

---

❌ 在Android上使用iOS模式（反之亦然） ❌ 已有标准控件却自定义 ❌ 忽略平台惯例 ❌ 不支持深色模式

---

Checklist

检查清单

Before Design

设计前

Reviewed platform guidelines (iOS HIG / Material Design 3)
Defined target users and their needs
Analyzed competitor apps
Identified accessibility requirements
Set up design system tokens

评审过平台规范（iOS HIG / Material Design 3）
定义了目标用户及其需求
分析过竞品应用
确定了无障碍需求
搭建了设计系统令牌

During Design

设计中

Following 8-point grid
Using defined color tokens
Typography from scale only
Touch targets meet minimum size
Contrast ratios verified
All states designed (default, pressed, disabled, error)
Dark mode variant created

遵循8点网格
使用已定义的颜色令牌
仅使用排版层级中的字号
触摸目标符合最小尺寸
验证了对比度
设计了所有状态（默认、按下、禁用、错误）
创建了深色模式变体

app-ui-design

Original

Translation

Mobile App UI Design

移动应用UI设计

Core Philosophy

核心理念

Hard Rules (Must Follow)

硬性规则（必须遵守）

Accessibility First

无障碍优先

Platform Guidelines Adherence

遵循平台规范

Consistent Design System

一致性设计系统

Touch-Friendly Design

触控友好设计

Quick Reference

快速参考

When to Use What

场景对应方案

Design System Fundamentals

设计系统基础

Color System

颜色系统

Color Token Structure

颜色令牌结构

Semantic Colors

语义化颜色

Color Palette (60-30-10 Rule)

配色比例（60-30-10规则）

Dark Mode Considerations

深色模式注意事项

Typography Scale

排版层级

Mobile Typography Guidelines

移动应用排版规范

iOS Typography (SF Pro)

iOS排版（SF Pro）

Android Typography (Roboto / Material 3)

Android排版（Roboto / Material 3）

Best Practices

最佳实践

Spacing System

间距系统

8-Point Grid System

8点网格系统

Spacing Scale

间距层级

Component Spacing

组件间距

Touch Target Spacing

触摸目标间距

Platform Guidelines

平台规范

iOS Human Interface Guidelines

iOS Human Interface Guidelines

iOS Design Principles

iOS设计原则

Core Principles

核心原则

Navigation Patterns

导航模式

2025 Updates: Liquid Glass

2025年更新：Liquid Glass

Safe Areas

安全区域

Standard Dimensions

标准尺寸

Android Material Design 3

Android Material Design 3

Material Design 3 Principles

Material Design 3原则

Core Concepts

核心概念

Navigation Patterns

导航模式

Material 3 Expressive (2025)

Material 3 2025 expressive特性

Component Shapes