mobile-app-ui-design

移动应用UI/UX设计技能

本技能指导创建专业、精美的移动应用界面，遵循Airbnb、Duolingo、Spotify、Revolut和Phantom等顶级应用使用的成熟设计原则。

核心理念

优秀的移动UI不在于花哨，而在于意图性。每个像素、每个间距值、每个颜色选择都应服务于用户。目标是创建流畅、个性化且生动的界面，而不仅仅是功能性的。

在设计之前，理解三件事：

1. 用户想要完成什么？（减少达成目标的摩擦）
2. 这应该让用户感觉如何？（信任、愉悦、自信、平静）
3. 他们首先应该注意到什么？（视觉层次）

设计流程

对任何移动界面遵循以下顺序：

步骤1：理解上下文

• 应用类型？（健身、金融、社交、生产力、健康、加密货币等）
• 用户是谁？（新用户、回访用户、高级用户——调整体验）
• 此界面的主要操作是什么？
• 适用哪些行业设计惯例？（参见 references/industry-conventions.md）

步骤2：先结构（UX视角）

• 映射用户流程：前后界面是什么？
• 识别MVP元素——仅保留此界面必需的内容
• 将主要操作放在拇指区域（屏幕底部1/3）
• 内容布局遵循F型阅读顺序
• 降低交互成本：直接展示内容，而不是隐藏在点击后面
• 将空状态转化为机会：提供引导、插图和行动号召
• 选择合适的输入方式：一次性设置用滑块/滚轮，重复/精确输入用文本字段

步骤3：应用视觉设计（UI视角）

按顺序遵循以下规则：

排版

• 使用一种字体家族（最多两种，且具有清晰的层次目的）
• 最多4种字号和2种字重
• 大数字（价格、统计、指标）使用等宽变体
• 文本容器宽度保持在600px以下以保证可读性
• 通过字号、字重和不透明度创建层次，而不是全部加粗

色彩系统（60/30/10规则）

• 60% — 中性底色（白色、浅灰或深色背景）
• 30% — 互补色（黑色文本、深色元素）
• 10% — 品牌/强调色（行动号召、关键指示器、图标）
• 使用中性色的不透明度变化创建文本层次：标题100%，正文80%，次要文本60-70%
• 强调色以5%不透明度用于次要按钮和微妙的卡片高亮
• 阴影颜色与背景匹配（着色阴影，彩色背景上绝不使用纯灰/黑）
• 保留强烈颜色（如红色）用于有意义的时刻——过度使用会破坏层次

间距（8点网格系统）

• 所有间距值必须能被8或4整除（8, 12, 16, 24, 32, 48, 64, 80, 96）
• 使用基于关系的间距：相关元素更近，无关元素更远
• 倍数规则：如果相关文本元素间距16px，则到下一组的间距应为2倍（32px）
• 区域垂直内边距：至少80-96px（大屏幕上主要区域160px）
• 卡片内部内边距：基准24-32px
• 更大的文本需要更大的间距

阴影

• 始终使用柔和阴影——绝不生硬/明显
• 阴影颜色与背景匹配并带有色调
• 在按钮上使用微妙的白色内阴影增加立体感
• 添加淡化的投影以增加深度而不显沉重

视觉提示与图像

• 使用图标、表情符号、插图和图像使信息易于理解
• 用户头像/照片 > 首字母 > 通用图标（用于表示人物）
• 颜色编码的类别，搭配柔和纯色背景和干净的独立图像
• 整个应用保持视觉风格一致——不要混合随机图库图片
• 使用AI生成或精心策划的视觉元素，搭配匹配的调色板

步骤4：为情感设计（峰终定律）

用户会记住两个时刻：高峰（最强烈）和终点（最后印象）。

• 识别高峰时刻：完成核心任务、达到里程碑、找到他们想要的
• 设计高峰：微动画、庆祝反馈、闪光、徽章、鼓励性文案
• 设计终点：摘要卡片、进度确认、温和的回归提示
• 添加情感反馈循环：成功状态应令人有成就感（弹跳、发光、闪光）
• 庆祝小胜利——成功状态不必宏大，但应感觉有意图
• 使用动效和动画作为信任信号，尤其是在高风险领域（金融、加密货币、健康）

步骤5：打磨与细节

• 在关键元素后添加微妙的发光效果（模糊+不透明度）
• 在主按钮上使用微小的白色内阴影
• 在次要元素上添加5%不透明度的主色边框
• 考虑状态变化的微动画
• 确保所有点击目标至少44×44pt
• 检查对比度以确保可访问性
• 设计错误状态、空状态、加载状态和成功状态

可应用的智能模式

按用户阶段个性化

• 新用户：简单欢迎、引导设置、最少选项
• 回访用户：个性化内容、关注常规、进度指示器
• 高级用户：高级统计、优化工具、密集信息

更智能的搜索

永远不要显示空白搜索界面。包括：

• 最近搜索
• 热门/趋势项目
• 个性化推荐

订单/状态跟踪

• 以自信的状态消息开头
• 通过照片、姓名、快速操作按钮人性化
• 使用视觉时间线而非基于文本的日期列表

分类界面

• 使用颜色编码的卡片，搭配柔和背景和干净的独立图像
• 确保所有分类项目的视觉一致性
• 在布局中创建节奏，便于轻松浏览

选择而非手动输入

• 为常见选项（职位、偏好等）提供可点击的选择
• 在选项旁包含图标/表情符号以增加个性
• 提供“其他”选项，并辅以手动输入作为备选

应避免的反模式

• 过度使用花哨的渐变和模糊效果（除非你能真正驾驭）
• 超过4种字号或3种字重
• 随机间距值（使用8点网格！）
• 将关键内容隐藏在横幅或额外点击后面
• 将行动号召放在拇指区域之外
• 没有引导的通用空状态
• 使用滑块进行频繁/精确的数据输入
• 所有信息具有相同的视觉权重（没有层次）
• 强调标签而非数值（例如，使“销售额”比“591”更大）
• 彩色背景上的纯灰/黑阴影

实现说明

当将这些设计构建为React组件或HTML时：

• 使用Tailwind CSS工具类处理间距、颜色和排版
• 导入Lucide React以获得清晰一致的图标
• 使用Recharts进行数据可视化
• 应用CSS过渡实现微交互和状态变化
• 使用CSS变量管理色彩系统
• 移动优先：以375px宽度（iPhone SE）为基准设计
• 使用 rounded-2xl 或 rounded-3xl 实现现代卡片美学
• 在适当的地方应用 backdrop-blur 实现玻璃态效果

有关行业特定惯例和情感设计模式的更深入指导，请阅读 references/industry-conventions.md。