Pencil 移动端原型设计完全指南

移动端原型设计概述

Pencil 是设计移动端 App 原型的强大工具，支持 iOS、Android 等主流平台。

设计规范基础

移动端设计规范：
├── iOS 设计规范
│   ├── 尺寸：375×812（iPhone X/11/12）
│   ├── 安全区域：顶部 44px，底部 34px
│   └── 字体：SF Pro
│
└── Android 设计规范
    ├── 尺寸：360×640（主流）
    ├── 状态栏：24dp
    └── 字体：Roboto

iOS 原型设计

iOS 组件使用

Pencil 内置了完整的 iOS 组件库：

# iOS 组件位置
菜单：插入 → 组件 → iOS

# 常用 iOS 组件
├── iOS 状态栏（多型号）
├── iOS 导航栏
├── iOS 标签栏
├── iOS 表格视图
├── iOS 搜索栏
├── iOS 开关
└── iOS 按钮

iPhone 页面设置

# 创建 iPhone 原型
1. 新建页面
2. 设置页面尺寸：375×812
3. 添加 iOS 状态栏
4. 添加 iOS 导航栏
5. 设计页面内容
6. 添加底部标签栏（可选）

# iOS 导航栏高度
- 普通导航栏：44px
- 大标题导航栏：96px

iOS 交互实现

# iOS 典型交互
1. 标签栏切换
   - 4-5 个标签
   - 选中状态高亮
   - 点击切换内容

2. 列表点击跳转
   - 列表项右侧箭头
   - 点击跳转到详情页
   - 使用滑入动画

3. 导航栏交互
   - 返回按钮 ←
   - 右滑返回手势
   - 标题居中

Android 原型设计

Material Design 组件

# Android 组件位置
菜单：插入 → 组件 → Android

# 常用 Material Design 组件
├── 状态栏
├── 导航栏
├── FAB（浮动操作按钮）
├── 卡片
├── 底部导航
├── 对话框
└── Snackbar

Android 页面设置

# 创建 Android 原型
1. 新建页面
2. 设置页面尺寸：360×640
3. 添加状态栏：24dp
4. 添加顶部 App Bar：56dp
5. 设计内容区域
6. 添加底部导航（可选）

# Material Design 间距
- 边距：16dp
- 卡片间距：8dp
- 图标大小：24dp

Android 交互实现

# Android 典型交互
1. FAB 点击
   - 位置：右下角
   - 点击展开菜单
   - 涟漪效果

2. 卡片点击
   - 阴影加深
   - 跳转详情页
   - 可使用共享元素

3. 底部导航
   - 3-5 个项目
   - 选中显示图标+文字
   - 未选中只显示图标

响应式设计

多设备适配

# 响应式设计策略
1. 流体布局
   - 使用相对单位
   - 百分比宽度
   - 最小/最大宽度

2. 断点设计
   - 手机：< 768px
   - 平板：768px - 1024px
   - 桌面：> 1024px

3. 组件复用
   - 创建响应式组件
   - 根据宽度调整布局

移动端到桌面端

# 从移动端扩展到桌面端
1. 手机优先设计
2. 桌面端扩展策略
   - 单列 → 多列
   - 底部导航 → 侧边导航
   - 简化手势 → 完整点击

# 布局转换示例
手机布局（360×640）：
┌─────────┐
│  状态栏  │
├─────────┤
│  导航栏  │
├─────────┤
│         │
│  内容区  │
│         │
├─────────┤
│  底部栏  │
└─────────┘

桌面布局（1200×800）：
┌────┬───────────────┬────┐
│    │     导航栏     │    │
│侧  ├───────────────┤侧  │
│边  │               │边  │
│导  │     内容区     │导  │
│航  │               │航  │
└────┴───────────────┴────┘

手势交互

移动端手势

# Pencil 支持的手势
├── 点击（Tap）
├── 长按（Long Press）
├── 滑动（Swipe）
├── 拖动（Drag）
└── 捏合（Pinch）

# 手势实现方式
1. 使用 Pencil 交互功能
2. 设置触发条件和动作
3. 测试不同方向

滑动手势

# 水平滑动
- 图片轮播
- Tab 切换
- 列表滑动删除

# 垂直滑动
- 上下滚动
- 下拉刷新
- 上拉加载更多

# 实现方法
1. 创建页面间跳转交互
2. 设置滑动触发
3. 添加滑动方向限制

移动端常用模式

底部标签栏模式

# 底部标签栏设计
┌─────────────────────────────────┐
│           内容区域               │
├─────────────────────────────────┤
│  🏠    📋    💬    👤          │
│  首页   分类   消息   我的       │
└─────────────────────────────────┘

标签数量：3-5 个
图标尺寸：24×24
标签高度：56dp（iOS）/ 56dp（Android）

抽屉导航模式

# 侧边抽屉导航
┌────┬──────────────────┐
│ ≡  │                  │
├────┤                  │
│    │     主内容区      │
│菜   │                  │
│单   │                  │
│    │                  │
└────┴──────────────────┘

抽屉宽度：280dp
触发方式：点击汉堡菜单 或 右滑

列表详情模式

# 列表 → 详情流程
┌─────────┐    点击     ┌─────────┐
│ 列表页   │ ────────→  │ 详情页   │
│         │            │         │
│ ┌─────┐ │            │         │
│ │项目1 │ │            │         │
│ └─────┘ │            │         │
│ ┌─────┐ │            │         │
│ │项目2 │ │            │         │
│ └─────┘ │ ←── 返回 ──│         │
└─────────┘            └─────────┘

输出与演示

移动端导出

# 导出设置
1. 导出 PNG/JPEG
2. 设置 2x 或 3x 缩放
3. 选择透明或白色背景
4. 批量导出所有页面

# 适合移动端查看的格式
- PNG（推荐）
- PDF（打印/归档）
- HTML（交互演示）

原型演示工具

# 演示准备
1. 导出高分辨率图像
2. 创建 HTML 原型（可选）
3. 上传到演示平台
4. 准备演示设备

# 常用演示工具
├── InVision
├── Marvel
├── Principle
└── Figma（直接演示）

设计检查清单

iOS 检查项

# iOS 原型检查
☐ 使用 iOS 组件库
☐ 遵循 Human Interface Guidelines
☐ 导航栏高度正确
☐ 状态栏和导航栏分离
☐ 底部安全区域
☐ 支持刘海屏
☐ 图标为 SF Symbols 风格

Android 检查项

# Android 原型检查
☐ 使用 Material Design
☐ 遵循 Material Guidelines
☐ 状态栏和 App Bar 分离
☐ FAB 位置正确
☐ 卡片使用 Material 样式
☐ 配色符合 Material 色彩系统
☐ 间距使用 8dp 网格

---

掌握移动端原型设计让你的设计工作更加专业，能够创建跨平台的高质量原型。