墨刀原型设计工具实操培训

20XX/XX/XX墨刀原型设计工具实操培训汇报人:XXXCONTENTS目录01

培训开篇介绍02

墨刀基础操作讲解03

墨刀核心功能详解04

原型设计项目实战05

培训总结与答疑培训开篇介绍01培训目标与内容

掌握基础操作学员可学会墨刀新建项目、页面布局、组件拖放等基础操作，独立完成简单原型搭建。

理解原型设计逻辑通过案例学习，学员能掌握用户路径梳理方法，设计出符合用户使用习惯的产品原型。

产出可交付原型作品课程结束后，学员能够独立完成一款小型APP的原型设计，产出符合规范的可交付作品。

了解协同办公功能学员可学会使用墨刀的团队协同、评论批注功能，适配团队产品开发协作需求。墨刀工具优势介绍

低门槛易上手无需复杂代码基础，界面简洁直观，新手设计师半天就能快速完成基础原型搭建。

云端协同高效团队成员可在线实时编辑评论原型，远程协作时能随时同步设计修改进度。

适配多端输出一键导出手机、平板、PC多端原型，支持直接扫码在真机上预览交互效果。墨刀基础操作讲解02个人账号注册流程可通过手机号、邮箱或第三方账号完成注册，个人用户选择免费版即可使用核心原型功能。工作台核心区域说明左侧是项目列表与团队空间，顶部是功能导航栏，中央区域展示所有已创建的原型项目。项目创建基础操作点击首页“+新建项目”，可选择空白模板或行业模板，设置尺寸后即可进入编辑页面。个人账号设置方法在头像下拉菜单可修改个人昵称、绑定信息，还能调整账号存储空间和版本订阅信息。账号注册与工作台介绍新建项目与画布设置

从工作台新建项目进入墨刀工作台后，点击左上角新建项目按钮，可选择模板或空白项目创建，快速起步。

设置画布尺寸新建后可根据需求设置画布参数，比如常见手机端375×667px适配移动端设计需求。

调整画布基础参数可在右侧面板修改画布背景色、开启缩放适配，满足不同展示场景的设计需要。基础页面管理操作

新建项目页面打开墨刀工作区后，点击左侧面板“新建页面”按钮，即可输入页面名称完成创建。

调整页面排序在左侧页面管理栏，长按目标页面拖动到对应位置，松开即可完成页面顺序调整。

删除无用页面选中不需要的页面后点击右上角删除图标，确认后即可移除该页面释放空间。墨刀核心功能详解03基础组件调用墨刀内置了按钮、输入框等基础组件，只需拖拽就能直接拖拽添加到画布，适配基础原型快速搭出页面框架。自定义组件创建重复使用的模块比如导航栏，可保存为自定义组件，一处修改全原型内相同组件同步更新。第三方组件导入支持从本地或墨刀社区导入他人分享的组件，不少设计师分享了小程序通用组件可直接用。组件库的使用方法页面跳转交互设置

点击触发跳转点击按钮或文字触发页面切换是墨刀最常用跳转方式，原型演示时适配用户常规点击操作习惯。

页面状态切换跳转同一页面内不同内容模块切换，无需新建页面，通过状态跳转即可实现弹窗、tab切换效果。

手势触发跳转墨刀支持滑动、双击等手势触发跳转，适配移动端原型设计，还原手机端真实操作逻辑。

返回上级页面跳转添加返回上一页交互组件，自动关联上级页面，无需手动绑定目标页，简化原型设置流程。动态组件效果制作

切换式标签栏制作墨刀可通过绑定动态组件页面实现标签切换，京东首页顶部分类标签就是典型案例。

下拉刷新动效制作在墨刀中给动态组件添加下拉状态绑定手势，就能实现类似微博feed流的下拉刷新效果。

折叠面板展开动效制作使用墨刀动态组件设置折叠/展开两个状态，可制作电商商品详情的参数折叠面板。全局样式管理技巧

默认样式自定义修改可针对项目默认字体、填充色批量调整，适配企业VI规范，节省逐页修改时间。

全局样式同步更新修改全局样式后所有引用组件自动同步更新，避免手动调整遗漏，提高效率。

共享样式库复用企业可创建团队共享样式库，成员直接调用，保证多项目输出设计风格统一。多人实时协同编辑团队成员可同时进入同一个原型项目编辑，自动保存版本，避免反复传输文件版本混乱。页面定向评论互动设计师可在原型任意页面添加评论，stakeholders可直接定位位置留言，减少沟通错位。成员权限分级设置项目创建者可自定义分配编辑、查看、评论权限，核心页面避免误改，保障项目安全。协作与评论功能原型导出与分享图片格式导出墨刀支持将原型导出为PNG图片，可选择单页或全部页面导出，方便用于文档配图展示。离线包导出可将完整原型导出为HTML离线包，无需网络就能打开查看，适合本地离线演示使用。协作链接分享生成可分享的原型协作链接，支持设置访问权限，方便团队成员在线查看评论原型。原型设计项目实战04需求分析与页面梳理

核心功能需求拆解以电商APP开发项目为例，需明确购物车、支付等核心需求，区分用户端和商家端不同诉求。

页面逻辑层级梳理梳理新闻资讯类产品页面层级，区分一级导航、二级内容页逻辑，明确用户跳转路径。

页面功能模块划分围绕在线文档协作工具，划分编辑、协作、存储等模块，明确各模块对应需求边界。首页原型框架搭建页面尺寸适配设置根据移动端、PC端不同设备需求设置原型画布尺寸，适配微信小程序项目需选375×667尺寸。基础导航栏组件添加在画布顶部添加返回按钮、标题栏和功能图标，电商项目需保留搜索框和购物车入口。核心内容区域分区排版按用户浏览顺序划分banner区、商品推荐区、功能入口区，保证界面层级清晰符合用户习惯。底部标签导航配置添加首页、分类、购物车、我的五个常用标签，设置选中态样式完成基础框架搭建。商品规格切换交互用户点击不同规格选项，页面自动对应展示对应规格图与价格，模拟淘宝商品页真实效果。回到顶部按钮交互滚动页面超出首屏后按钮自动显示，点击后页面平滑滚动回详情页顶部，优化浏览体验。图文轮播图交互设置滑动切换和指示器点对应交互，模拟电商详情页首图轮播的真实操作效果。详情页交互功能制作个人中心页面设计个人中心信息模块布局原型设计时，一般将用户头像、昵称放置模块顶部，按优先级排列功能入口，适配移动端操作习惯。常用功能入口交互设置在墨刀中可给“我的订单”“设置”入口添加点击跳转，设置页面切换动画提升操作流畅度。个人中心页面适配调试在墨刀调试面板切换不同手机尺寸，检查元素溢出问题，调整后输出可分享的原型链接给他人测试。全流程原型逻辑调试

页面跳转逻辑校验调试美团APP首页到商家详情页的跳转，排查是否存在跳转错误、空白页等异常问题。

交互反馈功能测试测试百度搜索原型中点击搜索按钮后的结果加载动效，验证反馈是否符合设计预期。

全局状态一致性检查检查电商购物原型不同页面中购物车商品数量的显示，确认全局状态更新同步无错。图片格式导出可导出PNG/JPG格式切图，方便快速分享到社交平台，供需求方查看整体视觉效果。可交互原型链接分享生成专属在线分享链接，支持设置密码和查看权限，方便协作者在线测试交互逻辑。原生安装包导出可导出iOS/Android端安装包，用于在真机设备测试原型的实际适配与运行效果。原型成品导出分享培训总结与答疑05核心知识点梳理

原型页面基础搭建墨刀可通过拖拽组件快速完成页面创建，能一键复用组件提升原型制作效率。

页面交互逻辑设置可通过添加页面跳转、切换动画，实现点击触发跳转这类常用交互效果的设置。

原型分享与协作生成分享链接发送给团队成员，成员可在线评论标注，高效推进原型迭代修改。常见问题解答

原型组件无法拖动调整多数是因为组件被锁定，在右侧图层面板选中对应组件点击解锁按钮即可恢复操作。

导出原型出现格式错乱一般是导出时选择的适配参数不匹配，重新导出时勾选「适配目标设备分辨率」即可解决。

多人协作原型编辑冲突墨刀支持实时锁定编辑组件，协作前开启组件锁定