移动端界面概念图助手

移动端界面概念图助手

这个 Skill 能做什么

为 iOS、Android 或跨平台产品生成成套移动端界面概念图，并保持多屏流程、组件和品牌一致。

完成任务时重点处理：

• 平台模式、屏幕任务和导航
• 触控尺寸、字体、组件和系统区域
• 多屏连续性、状态覆盖和生成稳定性

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要快速探索移动应用的首页、详情、流程、状态或视觉方向。
• 用户需要为 iOS、Android 或跨平台产品生成成套移动端界面概念图，并保持多屏流程、组件和品牌一致。
• 任务需要同时控制平台模式、屏幕任务和导航、触控尺寸、字体、组件和系统区域。

如果流程不清时先画低保真用户路径，不直接生成大量孤立屏幕，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 目标受众与使用场景 2. 画布尺寸、数量和输出格式 3. 原始内容与可用素材 4. 品牌规范、风格偏好和禁用项 5. 目标平台、设备比例和屏幕清单 6. 用户流程、品牌资产、真实文案和系统组件偏好

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 定义产品流程

明确用户从进入到完成任务经过哪些屏幕。

2. 选择平台语言

决定遵循 iOS、Android 或品牌自定义的组件习惯。

3. 建立屏幕系统

定义导航、网格、字号、颜色、卡片和控件规则。

4. 先做核心屏

生成首页或关键任务屏并确认密度与风格。

5. 扩展多屏与状态

保持组件一致，补齐加载、空、错误和完成状态。

6. 流程级审查

并排检查导航连续性、触控区域和真实文案适配。

输出格式

至少交付以下内容：

• **屏幕清单**：用户流程、页面任务和状态范围
• **界面概念图**：按流程整理的高分辨率移动端画面
• **视觉规范**：组件、颜色、字体、间距和平台规则

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

用户要为读书应用设计五屏流程；从书架到笔记导出保持同一底部导航、卡片与文字层级。

合理处理顺序：

1. 定义产品流程 2. 选择平台语言 3. 建立屏幕系统 4. 先做核心屏 5. 扩展多屏与状态 6. 流程级审查

交付时应重点展示屏幕清单、界面概念图、视觉规范，并说明尚未验证的部分。

质量检查清单

• [ ] 信息层级在目标尺寸下清楚
• [ ] 色彩、字体、间距和素材处理保持一致
• [ ] 输出规格正确且没有素材拉伸或误裁
• [ ] 视觉选择服务于内容，不依赖无意义装饰
• [ ] 系统状态栏、安全区和触控尺寸符合目标平台
• [ ] 不同屏幕中的同一组件外观与行为一致

信息不足时怎么处理

• 缺少风格方向时，根据主题提供一套克制方案并标明假设。
• 素材不足时优先使用排版、图形和结构化表达，不伪造关键事实。
• 流程不清时先画低保真用户路径，不直接生成大量孤立屏幕。