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 型阅读顺序
• 降低交互成本：直接展示内容，不要把内容藏在点击操作后面
• 将空状态转化为机会，提供引导、插图和 CTA
• 选择合适的输入方式：一次性设置使用滑块或滚轮，重复或精确输入使用文本框

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

按以下顺序遵循这些规则：

字体排版

• 使用一个字体系列（最多两个，并明确各自的层级用途）
• 最多使用4 种字号和2 种字重
• 大数字（价格、统计数据、指标）使用等宽字体变体
• 文本容器宽度保持在 600px 以内，以确保易读
• 通过字号、字重和不透明度建立层级，而不是一味加粗

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

• 60%——中性色底色（白色、浅灰色或深色背景）
• 30%——互补色（黑色文字、深色元素）
• 10%——品牌色/强调色（CTA、关键指标、图标）
• 使用中性色的不同不透明度来区分文字层级：标题为 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 点网格！）
• 将关键内容藏在横幅后面或需要额外点击才能看到
• 将操作按钮放在拇指触控范围之外
• 空白状态缺乏引导，过于笼统
• 使用滑块频繁或精确地录入数据
• 让所有信息具有相同的视觉权重（缺乏层次）
• 让标签比数值更醒目（例如，让“Sales”比“591”更大）
• 在彩色背景上使用纯灰色／黑色阴影

实现说明

使用 React 或 HTML 构建这些设计时：

• 使用 Tailwind CSS 工具类设置间距、颜色和排版
• 导入 Lucide React，使用简洁一致的图标
• 使用 Recharts 展示数据可视化内容
• 使用 CSS 过渡效果实现微交互和状态变化
• 使用 CSS 变量定义颜色系统
• 移动优先：以 375px 宽度（iPhone SE）作为基准进行设计
• 使用 rounded-2xl 或 rounded-3xl 打造现代卡片风格
• 在适当的地方应用 backdrop-blur 实现玻璃拟态效果

如需深入了解特定行业的规范和情感化设计模式，请阅读 references/industry-conventions.md。