简介《墨刀原型工具基本操作流程》是一份面向产品经理、UI设计师和移动应用开发者的入门级教程PDF旨在帮助零基础用户快速掌握墨刀的核心操作高效完成移动应用低保真原型的创建。内容以步骤化讲解展开重点涵盖新建应用时的设备与尺寸设置、底部导航栏的制作与标签自定义、从组件库和母版库拖入搜索框与轮播图模板、通过连线实现页面跳转、添加全局滑动手势以及利用二维码在手机上实时预览原型等环节。同时说明了原型作为一种沟通工具在团队协作中的价值适合产品设计课程、个人自学或团队内部培训场景。资源为单个PDF文件大小约1.83MB携带方便。目前已有2299人学习使用边学边练可作为原型设计日常操作的速查手册。1. 第一次用墨刀搭App低保真原型这份基础操作流程到底拆到什么程度拿到《墨刀原型工具基本操作流程》这份资料先别把它当成一份软件说明书来读。真正上手之后会发现墨刀里最拖效率的操作恰恰藏在几个不起眼的选项里新建应用时选错设备尺寸、底部导航复制到新页面后位置错乱、全局手势和轮播图抢滑动——每一条都足以让一场演示现场翻车。墨刀不是用来写源码软件的它的定位是把移动应用原型和线框图快速画出来云端保存、实时手机预览。这篇笔记按建应用、做底栏、堆页面、连跳转、出预览的实操顺序拆一遍适合刚接手移动端项目的产品和设计也适合准备原型设计课程的讲师。2. 创建应用与底部导航设备尺寸、标题栏和「原位置粘贴」三个关键配置2.1 新建应用时四个字段怎么填类型、名称、尺寸、方向一次定对打开墨刀客户端先面对的是一个空白工作区。新建应用时的第一组选择直接决定后面所有页面的参考坐标系后面再改会牵连组件位置和预览比例所以第一步值得多花一分钟想清楚。新建应用的标准路径是点击「 新建应用」在弹出的面板里选择应用类型。PDF 示例里选的是 iPhone 设备这一步的意思不是锁定苹果生态而是告诉墨刀「我要做一款手机端竖屏应用」让画布尺寸和组件库自动切换到移动端模式。接着输入应用名称、选择设备类型和对应尺寸确认无误后点击创建按钮。设备类型和应用尺寸这两个字段看起来重复实际分工不同。设备类型控制默认组件密度和物理尺寸映射应用尺寸控制画布像素宽高。我日常常用的一套配置参考如下实际以你团队验收用的主力机型为准用途设备类型画布尺寸参考说明主流 iOS 演示iPhone393 x 852逻辑像素手机预览最接近真实渲染小屏适配检查iPhone SE375 x 667用于验证底部导航和标题栏拥挤场景Android 验收Android360 x 800安卓端常见基准画布平板/车机等非常规自定义尺寸手动输入没有现成模板时选这个创建时还有一个容易被忽略的方向选项。一个 App 原型如果主要演示竖屏直接保持默认竖画布如果目标产品支持横屏建议新建一个横版应用单独做不要在同一页面里旋转画布。混着用会让后续的手势和预览出现方向错乱属于可以提前避开的返工项。2.2 标题栏为什么自动带应用名修改入口和沉浸式做法应用创建完成后新建页面的标题栏会自动显示刚才输入的应用名称。这一点容易让人误以为标题是「死」的实际它是墨刀为每个新页面预置的一个标题栏组件文字内容完全可改。想改标题直接双击标题栏上的文字或者选中标题栏后在右侧设置栏里找到「文本」相关项修改标题内容即可。我一般会在项目初期把标题栏文字改成真实页面名比如「首页」「发现」「我的」而不是保持应用名不动。这样在运行预览和后期截图时每一页的归属一目了然团队评审时不用靠猜。如果你做的页面需要沉浸式头图比如首页顶部直接放一张大图标题栏反而会压住视觉。常见做法是把标题栏的「显示」开关关掉或者选中后直接删除再在需要的位置手动拖入一个文字组件。注意删除标题栏不是删除页面页面内容还在只是顶部留白布局自由度更高。2.3 底部导航先放容器组件再放导航标签底部导航是移动端原型里复用率最高的模块。PDF 里的操作顺序很明确从左侧「组件」栏目里找到底部组件拖入应用然后拖入三个导航标签修改位置和名称。先分析为什么要先放底部组件。底部组件本质是一个容器它定义了导航栏的整体高度、背景色和底部吸附位置。直接拖入后墨刀会自动把容器吸附到画布底部宽度默认撑满。如果先拖标签后放容器标签的坐标没法统一对齐后续要手动调整三个图标的位置徒增工作量。容器放好后从组件库里拖出三个导航标签分别放进容器范围内。标签通常由图标和文字组成双击标签文字可以直接改名选中标签图标在右侧图标库替换成和页面语义对应的图形。三个标签之间用鼠标拖动调整横向间距墨刀会显示居中对齐参考线对齐到等距即可。这个阶段还要顺手确认底部导航的高度。默认底部组件高度一般在 50 到 60 像素左右如果你发现它盖住了页面正文内容在右侧设置栏调整组件高度或按比例缩放容器。缩放时注意保持三个标签和容器一起选中再拖动免得只放大图标导致布局破裂。2.4 复制导航到其他页面为什么「原位置」粘贴是铁律底部导航做完之后接下来的核心操作是从首页复制到新页面。PDF 里特别强调了一句粘贴时注意使用「原位置」。这句话值得单独拿出来讲透。墨刀的复制粘贴有普通粘贴和原位置粘贴两种语义。普通粘贴会把组件放在鼠标当前所在位置粘贴后组件相对画布的坐标是随机的原位置粘贴则会保留组件在源页面里的绝对坐标让新页面里的底栏和首页完全重合。我见过很多人做多页面原型时发现页和我的页底部导航要么偏左要么偏上原因就是复制后直接在页面中间点了一下粘贴。三页底栏位置不一致在运行预览时点击底部导航切换页面页面切换瞬间底栏会有一个明显的跳动团队评审时非常容易注意到观感就是「没对齐」。正确的复制链路是选中首页里的整个底部导航容器按快捷键复制切换到新页面在画布空白处右键呼出粘贴菜单选择「原位置粘贴」。粘贴完成后可以新建一个空白页面反复试几次直到形成肌肉记忆。除了原位置新页面自身的创建逻辑也要配合这个动作。右上角「新页面」生成的是独立平级页面生成后先复制首页底栏过来再继续填充这个页面特有的内容顺序不要反。先填内容再粘底栏内容层可能会把导航盖住又得调整图层顺序多走一步冤枉路。3. 页面内容与组件复用搜索框、轮播图母版和图文排版做到不返工3.1 搜索组件拖入后先改占位文字再调位置底部导航框架搭好后开始填充首页内容。PDF 给出的顺序是从左侧「组件」栏目中找到搜索组件拖入首页。这一步操作不复杂但组件拖进来之后有三个参数值得顺手配置。第一个是占位文字。搜索组件默认会带一段示例文本正式演示时应该改成符合产品语境的提示词比如「搜索你感兴趣的内容」这样评审时不会出戏。双击搜索框内的文字就能编辑。第二个是圆角样式。搜索框默认可能是直角或小圆角移动端常见做法是调大圆角改成胶囊形视觉上更贴近主流App。第三个是背景填充色。搜索框颜色一般比页面底色浅一档用浅灰或浅蓝都可以别直接使用默认的高饱和色否则页面重心全被搜索框抢走。位置方面搜索框最常见的摆放位置是页面顶部标题栏下方。如果首页顶部有轮播图有的产品也把搜索框放在轮播图下方看具体需求。移动时打开参考线辅助让搜索框左右边距保持一致不要一边宽一边窄。3.2 轮播图用母版而非组件全局复用是便利也是约束首页第二个核心部件是轮播图。PDF 里的路径是到「母版」栏目中找到轮播图模板拖入应用。这里组件和母版的区别值得展开。组件是独立元件拖到哪个页面就属于哪个页面互不影响。母版则是可复用的结构模板所有引用同一个母版的地方共享一套内部内容。轮播图用母版的好处是在首页做一次轮播内容替换全项目里所有引用该母版的页面同步更新代价也一样明显——如果你只想改首页的轮播图却在母版里改了图片发现页的轮播图也会跟着变。所以使用母版前先想清楚复用范围。如果整个项目只有首页一个轮播图直接拖组件版本就够了如果多个页面要展示同一批活动图才值得用母版。拖入后双击轮播图区域可以进入内部编辑状态替换轮播图片、调整自动播放间隔、修改底部指示器颜色。退出编辑后母版改动会自动同步到所有引用位置这一点在交付前要额外确认避免改了一处带崩其他页面。3.3 图片和文字的排版入口分别在左右两侧「右图左文」不要记反首页内容继续丰富下一步是插入图片和文字。PDF 明确提示图片调节在右侧设置栏文字调节在左侧主题栏目。这两条路径容易记混我拆开说。图片推荐的操作是直接拖入。从本地文件管理器里选中图片拖进墨刀画布松开鼠标后图片会自动生成一个图像组件。选中它右侧设置栏里能调透明度、圆角、边框、滤镜和裁剪模式。用鼠标直接拖拽图片四个边角来缩放大小是最快的方式别去输入框里填精确宽高原型阶段不需要像素级精确。文字组件选中后去左侧主题栏目调整大小和样式。字体、字号、字色、加粗都在这一侧完成调整完再到画布里用鼠标摆位置。文字层级如果被图片挡住选中文字后在编辑菜单里使用「上移一层」把它提到图片上层。别手快把文字直接打进图片组件内部那样会导致文字跟着图片一起缩放变形。3.4 新页面与页面层级先复制底栏再添加子页面多页面原型的组织方式决定了后续连线跳转的复杂度。页面多了以后页面列表会变得很长管理效率开始下降。在软件右上角点「新页面」就能生成新页面。每个页面右键后有复制、删除、添加子页面三个功能。复制页面会把源页面里的所有组件一起复制适合做「首页→发现页→我的页」这种结构相近、只换内容的场景添加子页面则是把新页面挂到当前页面下面形成层级关系。层级结构对应的是演示时的逻辑分组。把首页、发现页、我的页设为平级把搜索结果页挂到首页下面作子页面是移动端原型常用的组织方式。页面层级树在左侧面板可以拖拽调整拖完后子页面在演示时会按父页面的逻辑聚合展示。内容为纲的顺序是先定全局底部导航再做首页后补发现页和我的页最后为每个入口补出二级页面。4. 交互跳转与全局手势连线、点击、滑动三套演示动作这样配4.1 连线跳转选中组件、添加手势、设置页面切换方式三步走静态页面完成后开始让原型「活」起来。墨刀最有特点的交互方式是通过连线完成页面跳转在应用中选择任何一个控件、图片或文字都可以通过添加手势和切换方式实现跳转。完整的连线操作流程是这样的选中首页上的搜索框拖出连线指向搜索结果页松开后弹出手势配置面板选择触发方式点击、长按、左滑、右滑、上滑等再选择页面切换方式例如左推入、右推入、淡入淡出。点击步骤对应「用户按下并松开手指」这个常见动作适合绝大多数按钮。连线跳转的优点是直观画布上每一条线都代表一个交互路径评审时能一眼看出哪个控件连到哪个页面。缺点是页面复杂、跳转数量多时画布上交叉的线条会非常密集容易连线连错。我的习惯是每完成一个区域的连线就运行一次、验证一次不要等全部连完再统一测试那样排查成本会翻倍。4.2 底部导航三页闭环首页、发现、我的逐条连底部导航的跳转是最典型的连线应用场景。PDF 里说利用连线方式快速实现底部导航的切换完成三个页面制作后核心工作是给三个标签分别连出三条链路页面导航标签跳转目标首页首页标签首页首页发现标签发现页首页我的标签我的页发现页首页标签首页发现页发现标签发现页发现页我的标签我的页我的页首页标签首页我的页发现标签发现页我的页我的标签我的页每个页面上的底栏都包含三个标签所以每个页面要连出三条线三个页面一共九条线才能形成完整的导航闭环。只给首页连而忽略发现页和我的页是新手最容易漏的环节——演示时在发现页点首页标签没反应场面会冷下来。这时「原位置粘贴」的价值再次体现。三个页面的底栏位置一致连线的起点和终点对齐画布上不会出现「首页的底栏在底部发现页的底栏又出现在中间」的错乱视觉。4.3 全局手势滑动切换和组件级手势的优先级怎么定除了点击导航标签跳转墨刀还支持在应用里添加全局手势实现滑动切换页面的效果。常见配置是把手势绑定为左右滑动左滑进入下一页右滑返回上一页。添加路径是从组件或手势栏目里找到全局手势组件拖入某个页面在配置面板里设置左右滑动的目标页面。运行测试后手指在屏幕上左右滑动即可切换页面体验上更接近真实App交互。全局手势最大的坑在于和页面内组件的滑动冲突。如果首页里有轮播图轮播图本身支持左右滑动浏览图片同时页面又挂了全局左右滑动手势手指在轮播图上滑动时墨刀会优先响应页面级手势结果轮播图没有滚整个页面倒切走了。遇到这种场景优先保证组件级交互把全局手势从有轮播图、横向滚动列表的页面上移除只在没有内部横向滚动的页面使用。这属于交互层级问题优先级排序是组件级手势大于页面级全局手势。4.4 运行按钮与测试视角右上角点下去之前先检查什么完成连线和手势配置后点击右上角运行按钮即可查看实际效果。运行会启动一个模拟器窗口画布切换为手机预览形态此时点击导航标签、滑动页面、点击搜索框都能看到完整交互链路表现。运行前的检查建议按这个顺序走一遍是否每个页面都粘贴了底栏三个页面底栏是否都连了三条跳转线搜索框是否连到了搜索结果页搜索结果页是否有返回首页的入口轮播图页面是否加了全局手势。前四项影响演示主流程最后一项是排查隐患。运行测试阶段发现的连线错误不需要删除重画。回到编辑画布选中错误的连线直接按删除键清理再从正确的控件重新拖出一条线即可。连线的起点只能是一个可交互组件终点只能是一个页面二者方向不要拖反。5. 避坑与常见问题原型演示翻车后总结的五条排查记录这些坑多数不是功能难找而是交互逻辑上的玄学。它们大多在演示现场才会冒出来按「现象 → 原因 → 解决」逐条记录如下。5.1 底部导航复制到新页面后位置偏了现象把首页的底部导航复制到发现页、我的页后底栏出现在画布中间或偏左三个页面的底栏高度不一致。原因普通粘贴会把组件放在鼠标当前落点组件坐标相对源页面发生了偏移没有沿用原坐标。解决复制后切换目标页面在画布空白处呼出粘贴菜单选择「原位置粘贴」。如果已经用普通粘贴放错了删除后重新走原位置粘贴不要手动拖动去微调坐标很难调到完全一致。5.2 母版轮播图改一处多个页面同时变化现象在首页的轮播图母版里替换了图片发现页、我的页的轮播图也全部同步变了部分页面原本可以不用轮播图也被带上了。原因母版是全局复用机制所有引用同一母版的页面共享内部内容编辑母版等于同时编辑所有引用位置。解决在引入母版前先判断复用范围。单页面使用改成组件版本的轮播图全局需要保持一致时再用母版。已引用的母版如果只想断开某一页的关联在母版上右键选择转为普通组件或脱离母版后续只在当前页面生效。5.3 连线交叉连错目标页面现象画布上有十几条连线交织在一起运行后发现某个按钮跳到了错误的页面排查半天才查出连错目标。原因跳转全部以连线方式平铺展示页数多、路径多后视觉混淆拖线时误松手连到了相邻页面。解决连线前先在左侧页面列表里梳理好路径一次只完成一条主线。连完一条、命名一条在交互面板里核对交互列表不直接依赖画布上的线。复杂项目优先用局部组件交互而非全局连线线少一眼看清。5.4 全局手势把轮播图滑动拦截了现象演示时手指放在轮播图上左右滑结果整个页面被切走轮播图纹丝不动。原因全局手势监听整个页面的滑动操作优先级高于轮播图内部的组件级手势二者冲突时全局手势胜出。解决将包含轮播图或横向滚动列表的页面上的全局手势移除只保留组件级左右滑动或者全局手势只用于不包含内部滚控件的页面。评审演示要滑动切页时在页面空白区域滑动即可。5.5 手机预览二维码扫不开现象运行预览界面点分享生成二维码手机扫出来一直白屏或提示无法访问。原因预览需要电脑端和手机端网络互通局域网断开、浏览器版本不兼容或预览服务未就绪都会导致二维码失效。解决手机和电脑连同一个局域网再试换用手机浏览器直接打开分享生成的链接绕开扫码环节现场网络不稳定时提前导出离线演示包或录屏作为备用。二维码是演示的便利入口不能当成唯一保险。6. 手机预览与分享评审把这个原型变成团队的沟通工具原型做到能点能跳只是起点。墨刀最有价值的输出环节是手机预览在运行界面点击分享生成二维码用手机浏览器或墨刀 App 扫码后原型会在手机上以接近真实App的形态呈现方便在评审现场给团队边走边讲边演示。演示前我用一套固定检查清单防止现场出丑。列出来供你参考检查项通过标准三个页面底栏闭环任意页面点击三个标签都能切过去再切回来搜索链路完整首页搜索框能进搜索结果页并能返回全局手势不抢滚动轮播图页面上没有全局滑动切页底栏位置一致切换过程中底栏不跳动错位二维码可访问手机扫码后页面加载正常原型本身是沟通工具不是设计稿也不代表最终布局。它只是最终系统的代表模型或模拟。所以不需要做得太精美但一定不能出错——错了意味着沟通效率下降甚至让产品进度拖延。线与线之间的接点、底栏的复制位置、手势的优先级都是阻碍沟通出错的关键点。我曾经在评审会现场演示时从首页切到发现页底栏位置闪了一下评审直接问是不是两个页面没对齐。转天我把底栏重新原位置粘贴了三遍才意识到这类细节才是原型说服力的基本盘。从那以后我每次分享前都强制走一遍上面的检查清单多花五分钟换掉整场评审的尴尬。希望帮到你。本文还有配套的精品资源点击获取