figma 原型设计步骤

---

一、原型核心概念

• Frame（框架/画板）：页面容器，相当于 App/网页的单个界面。
• Flow（用户流）：一组相互连接的 Frame，代表一条完整用户路径（如登录→首页→详情）。
• Interaction（交互）：触发（如点击、悬停）+ 动作（跳转、打开弹窗）。
• Animation（动画）：页面转场或元素动效，常用 Smart Animate（智能动画）。

---

二、快速上手：5步做原型

1. 准备画布与Frame

1. 新建文件，左侧选 Frame Tool（F）。
2. 右侧面板选预设尺寸（如 iPhone 14、Web 1440×900），或自定义大小。
3. 命名 Frame（如“登录页”“首页”），方便管理。

2. 设计静态界面

• 用基础工具（矩形、文本、图标）搭建布局。
• 善用 Auto Layout 自动适配内容，减少手动调整。
• 复用组件：左侧 Assets 拖入按钮、输入框等，保持设计统一。

3. 添加交互（核心）

1. 选中要交互的元素（如按钮、图片）。

2. 右侧切换到 Prototype 标签。

3. 元素边缘出现 +，按住拖到目标 Frame，自动生成连接线。

4. 在弹出面板设置：

   • Trigger（触发）：On Tap（点击）、Hover（悬停）、Scroll（滚动）等。
   • Action（动作）：Navigate to（跳转）、Open overlay（打开弹窗）、Back（返回）。
   • Animation（动画）：Smart Animate（推荐）、Dissolve（淡入淡出）、Slide（滑动）、Instant（无动画）。
   • Duration（时长）：200–500ms 最自然。

4. 设置原型起点与设备

1. 右侧 Prototype 面板 → Starting Frame 选默认启动页。
2. Device 选预览设备（如 iPhone 15、桌面浏览器）。
3. 可设置背景色、是否显示手机状态栏。

5. 预览与分享

• 点击右上角 Play（▶） 进入预览模式，直接测试点击、滑动。
• 分享：点击右上角 Share → 生成链接，设置权限（可编辑/仅查看），支持嵌入网页或发送给客户/开发。

---

三、常用交互与动画技巧

1. 页面跳转（最常用）

• 按钮 → 点击 → 跳转到目标页 → Smart Animate（300ms）。

2. 弹窗/浮层

• 按钮 → 点击 → Open overlay → 选择弹窗Frame → 位置居中。
• 弹窗关闭：关闭按钮 → 点击 → Close overlay。

3. 返回上一页

• 左上角返回箭头 → 点击 → Back → Instant（无动画）。

4. Smart Animate 智能动画

• 自动识别两页相同元素，生成平滑过渡（如按钮变色、元素位移）。
• 适用：列表展开、卡片详情、页面元素位置变化。

5. 滚动与长页面

• 长内容Frame → 右侧勾选 Scrollable → 预览时可上下滑动。

---

四、实战示例：登录→首页

1. 建3个Frame：登录页、首页、弹窗（登录失败）。
2. 登录页：手机号输入框、密码框、登录按钮。
3. 交互：
   • 登录按钮 → 点击 → 跳转至 首页 → Smart Animate（300ms）。
   • 手机号/密码为空时 → 点击登录 → 打开 弹窗 → Dissolve（200ms）。
4. 首页：顶部导航、内容列表、个人中心入口。
5. 预览：点击Play，测试登录跳转、弹窗显示/关闭。

---