设计干货 | Sketch 的交互插件强势更新，再也不用为跳转的事发愁了！
2020-09-15 18:04:55
InVision Craft Prototyping 是 Sketch 的交互插件，其功能更新后支持在 Sketch 中直接设置页面交互并生成可分享的网页链接，简化了原型跳转逻辑的设置流程。 以下是具体操作步骤和功能说明：
一、插件安装与基础设置- 下载安装：需从官网下载最新安装包，并确保更新到支持 Prototyping 功能的版本。
- 开启功能：在 Sketch 中打开 Craft 面板，找到最下方的 Sync + Prototype 选项并开启，此时会弹出提示框确认原型编辑模式已激活。
进入编辑模式：在 Sketch 画布中选中任意组件，按快捷键 C 生成箭头，将箭头指向目标页面（需提前在 Sketch 中设计好目标页面）。
配置交互参数：点击箭头后弹出设置窗口，需完成以下配置：
交互目的：选择链接到新页面或页面遮罩模式。
手势（Gesture）：支持点击、滑动、长按等触发方式。
过渡效果（Transition）：提供 Push（推入）、Slide（滑动）、Flip（翻转）等动画效果。
其他选项：根据需求调整交互细节（如延迟时间、缓动曲线等）。
定位组件跳转的页面
特殊跳转类型：
返回上一页：在交互目的选项中直接选择“返回”功能。
跳转至外部链接：填写目标 URL 即可实现组件点击后打开网页。
组件跳转上一个页面和网页链接
本地预览限制：完成所有交互设置后，需上传至 InVision 服务器才能生成可访问的链接，本地无法直接操作。
上传步骤：
点击右上角上传按钮，登录 InVision 账号。
选择上传范围：推荐手动选择需同步的画布（而非全部画布）。
点击 Sync to InVision 完成上传，左下角进度条显示上传状态。
上传中的进度展示分享与演示：
网页访问：上传完成后点击右侧箭头按钮，在浏览器中打开原型（建议使用 VPN 加速）。
移动端适配：生成的链接支持在手机浏览器中访问，自动适配屏幕尺寸。
协作编辑：通过 Open 按钮可在线编辑原型文件，团队成员可实时查看修改。
电脑中访问的样式
手机中访问的样式
核心优势：
一体化流程：直接在 Sketch 中完成交互设计，无需切换至其他工具（如 Axure）。
实时协作：通过链接分享原型，团队成员可快速反馈意见。
多设备支持：生成的原型兼容电脑和手机浏览器，适合全场景演示。
当前局限：
插件仍处于测试阶段，可能存在稳定性问题。
国内访问速度较慢，需依赖 VPN 优化体验。
- 淘汰 Axure 的理由：InVision Craft Prototyping 与 Sketch 的深度整合显著提升了设计效率，而 Axure 需独立操作且学习成本较高，适合复杂交互但不适合快速原型验证场景。
总结：InVision Craft Prototyping 通过简化交互设置流程和强化协作功能，成为 Sketch 用户优化原型设计的利器。尽管存在网络和稳定性限制，但其一体化工作流仍值得尝试。
热门标签
