Pencil 交互概述
Pencil 不仅能创建静态原型，还支持丰富的交互功能，让原型”动”起来。
支持的交互类型
Pencil 交互类型：
├── 页面跳转
│ ├── 点击跳转
│ ├── 悬停跳转
│ └── 自动跳转
├── 动态效果
│ ├── 显示/隐藏
│ ├── 移动
│ └── 缩放
└── 状态变化
├── 悬停状态
├── 按下状态
└── 禁用状态页面管理基础
创建页面
# 创建新页面
方法 1：菜单栏 → 页面 → 新建页面
方法 2：Ctrl+Shift+N
方法 3：页面面板 → 点击 "+" 按钮
页面命名规范：
✅ 推荐：
- "首页"
- "商品详情页"
- "购物车页"
- "支付流程-地址"
- "支付流程-支付"
❌ 不推荐：
- "页面 1"
- "Page1"
- "新建页面"页面面板操作
页面面板位置：画布左侧
快捷键：F5
常用操作：
- 新建页面：点击 "+"
- 删除页面：选中后按 Delete
- 重命名：双击页面名称
- 复制页面：右键 → 复制页面
- 调整顺序：拖动页面缩略图页面属性
每个页面可设置：
├── 页面名称
├── 页面尺寸
│ ├── 预设尺寸（如 1920×1080）
│ └── 自定义尺寸
├── 背景色
└── 网格设置页面跳转交互
创建跳转
# 基本跳转创建步骤
1. 在当前页面选中需要触发跳转的元素
2. 打开属性面板 → 「交互」标签
3. 点击「新建交互」
4. 设置触发事件
5. 选择目标页面
6. 设置动画效果
7. 确定保存触发事件类型
| 事件 | 说明 | 适用场景 |
|---|---|---|
| OnClick | 点击触发 | 按钮、链接 |
| OnMouseOver | 鼠标悬停 | 悬停提示 |
| OnMouseOut | 鼠标离开 | 恢复原状态 |
| OnFocus | 获得焦点 | 输入框 |
| OnBlur | 失去焦点 | 输入框验证 |
| OnPageLoad | 页面加载 | 自动跳转 |
设置跳转目标
跳转设置面板：
┌─────────────────────────────────┐
│ 触发事件：[OnClick ▼] │
│ │
│ 动作： │
│ ○ 跳转到页面 │
│ ○ 上一页 │
│ ○ 下一页 │
│ ○ 指定页面 │
│ │
│ 目标页面：[商品详情页 ▼] │
│ │
│ 动画效果：[无 ▼] │
│ [淡入淡出] [滑入] [缩放] [无] │
│ │
│ [确定] [取消] │
└─────────────────────────────────┘动画效果
可用动画类型
| 动画 | 时长 | 效果 |
|---|---|---|
| 无 | - | 即时切换 |
| 淡入淡出 | 300ms | 透明度渐变 |
| 滑入 | 300ms | 位置滑动 |
| 缩放 | 300ms | 大小缩放 |
| 弹跳 | 400ms | 弹性效果 |
动画设置
动画设置选项：
├── 时长：100ms - 2000ms
├── 缓动：
│ ├── ease-in：开始慢
│ ├── ease-out：结束慢
│ ├── ease-in-out：开始和结束慢
│ └── linear：匀速
└── 方向：左/右/上/下（滑入时）动画实战技巧
# 1. 页面切换动画
设置：滑入 + 300ms + ease-out
效果：从右侧滑入新页面
# 2. 弹窗出现
设置：缩放 + 200ms + 弹跳
效果：弹窗弹出来
# 3. 元素显示
设置：淡入淡出 + 200ms
效果：柔和的显示效果动态效果
显示/隐藏元素
# 创建显示/隐藏交互
1. 选中触发元素（如按钮）
2. 属性 → 交互 → 新建交互
3. 触发事件：OnClick
4. 动作：显示/隐藏元素
5. 选择目标元素
6. 设置：显示/隐藏
7. 确定
应用场景：
- 点击按钮显示弹窗
- 点击关闭按钮隐藏弹窗
- 悬停显示提示信息移动效果
# 创建移动动画
1. 选中需要移动的元素
2. 属性 → 交互 → 新建交互
3. 设置触发事件
4. 动作：移动
5. 设置移动参数：
- 移动到：指定位置 或 偏移量
- X偏移：0-500px
- Y偏移：0-500px
6. 设置动画参数
应用场景：
- 侧边栏滑出
- 拖动排序
- 滑动删除状态切换
# 创建状态切换交互
1. 准备两个状态的元素
- 状态1：收起
- 状态2：展开
2. 初始状态：隐藏状态2
3. 选中触发元素
4. 创建交互：点击 → 显示/隐藏
5. 设置：显示状态2，隐藏状态1
应用场景：
- 手风琴菜单
- 折叠面板
- 展开/收起列表表单交互
输入框交互
# 输入框常见交互
1. 获得焦点 → 高亮边框
2. 失去焦点 → 恢复边框
3. 输入内容 → 实时显示
4. 错误状态 → 显示错误提示
设置方法：
1. 创建输入框组件
2. 创建验证提示元素
3. 初始状态：隐藏提示
4. 创建 OnBlur 交互
5. 动作：显示/隐藏复选框/单选框
# 复选框交互
1. 创建复选框组件
2. 准备两种状态图形
3. 初始状态：未选中
4. OnClick：切换选中/未选中状态
5. 可配合文字变化
# 单选框组
1. 创建多个单选选项
2. 初始状态：第一个选中
3. 每个选项 OnClick：
- 动作：切换选中状态
- 同时取消其他选项按钮状态
# 按钮常见状态
1. 默认状态：正常样式
2. 悬停状态：颜色变浅
3. 按下状态：颜色变深
4. 禁用状态：灰色、不可点击
# 设置按钮状态
1. 创建按钮的多个状态图形
2. 默认显示"默认状态"
3. OnMouseOver：显示"悬停状态"
4. OnMouseOut：恢复"默认状态"
5. OnClick：显示"按下状态"导航交互
标签栏切换
# 标签栏切换效果
1. 创建标签栏（多个标签）
2. 创建对应的内容区域
3. 初始状态：第一个标签激活，第一个内容显示
4. 每个标签设置 OnClick：
- 取消当前标签激活状态
- 激活点击的标签
- 隐藏当前内容
- 显示对应内容
切换动画：淡入淡出 200ms底部导航栏
# 底部导航栏交互
1. 创建导航栏（多个图标+文字）
2. 准备选中/未选中两种状态
3. 初始状态：第一个导航激活
4. 每个导航项设置：
- OnClick：切换选中状态
- 切换内容页面
效果：
- 图标颜色变化
- 文字颜色变化
- 可能伴随缩放效果下拉菜单
# 下拉菜单交互
1. 创建触发按钮（如"选择分类"）
2. 创建下拉选项列表
3. 初始状态：隐藏选项列表
4. OnClick 触发按钮：
- 显示选项列表
- 可设置：从上方滑出
5. OnClick 选项：
- 隐藏选项列表
- 更新按钮文字列表交互
可点击列表
# 可点击的列表项
1. 创建列表项组件（包含文字、箭头等）
2. 设置 OnClick 交互
3. 动作：跳转到详情页
可选效果：
- 点击时高亮背景
- 点击后背景渐变恢复滑动操作
# 滑动删除/收藏
1. 创建列表项
2. 在列表项下方创建隐藏操作区
3. 初始状态：隐藏操作区
4. 创建手势交互（如果支持）
或使用长按触发
替代方案：
- 使用"..."按钮显示操作菜单
- 使用右键菜单高级交互技巧
条件交互
# 条件判断效果
场景：只有登录后才能访问某些页面
设置方法：
1. 创建登录状态变量（模拟）
2. 创建登录页面和主页面
3. 登录按钮 OnClick：
- 跳转到主页面
- 设置"已登录"状态
4. 会员内容 OnClick：
- 判断登录状态
- 已登录：跳转详情页
- 未登录：跳转登录页循环跳转
# 创建轮播图效果
1. 创建多个页面，每个页面一张图片
2. 设置自动跳转
3. OnPageLoad：
- 延迟 X 秒
- 跳转到下一页
4. 最后一页 → 跳转回第一页
设置循环：
- 在最后一页的交互中
- 跳转到第一页微交互动画
# 微交互设计原则
1. 响应及时：交互反馈 < 100ms
2. 视觉反馈：让用户知道发生了什么
3. 适度动画：不要过度使用
4. 保持一致：相同操作有相同反馈
常见微交互：
├── 按钮点击反馈：缩放 + 颜色变化
├── 输入框焦点：边框高亮
├── 列表项悬停：背景色变化
├── 开关切换：滑块滑动 + 颜色变化
└── 加载状态：旋转图标交互检查清单
发布前检查
# 交互原型检查清单
基础功能：
☐ 所有按钮都有跳转目标
☐ 所有链接都设置了交互
☐ 表单提交有反馈
☐ 返回按钮能正常工作
页面跳转：
☐ 跳转动画流畅
☐ 没有死链接（点击无反应）
☐ 循环跳转设置正确
☐ 返回上一级能回到原页面
状态变化：
☐ 悬停状态有视觉反馈
☐ 选中状态明显
☐ 禁用状态不可点击
☐ 加载状态有提示
异常情况：
☐ 空状态有提示
☐ 错误状态有说明
☐ 超长文本不溢出实践练习
练习：创建一个登录流程原型
目标：创建包含验证的登录流程
页面：
1. 登录页 - 输入用户名密码
2. 首页 - 登录成功跳转
3. 错误提示 - 登录失败显示
交互设置：
1. 登录按钮 OnClick：
- 验证：用户名和密码不为空
- 成功：跳转到首页
- 失败：显示错误提示
扩展功能：
1. 记住密码复选框
2. 密码显示/隐藏切换
3. 登录加载状态良好的交互设计让原型更真实，更好地传达设计意图。
相关文章
评论
加载中...
评论
加载中...