企业官网建设流程全解析

简介：《墨刀原型工具基本操作流程》是一份面向产品经理、UI设计师和移动应用开发者的入门级教程PDF，旨在帮助零基础用户快速掌握墨刀的核心操作，高效完成移动应用低保真原型的创建。内容以步骤化讲解展开，重点涵盖新建应用时的设备与尺寸设置、底部导航栏的制作与标签自定义、从组件库和母版库拖入搜索框与轮播图模板、通过连线实现页面跳转、添加全局滑动手势，以及利用二维码在手机上实时预览原型等环节。同时说明了原型作为一种沟通工具在团队协作中的价值，适合产品设计课程、个人自学或团队内部培训场景。资源为单个PDF文件，大小约1.83MB，携带方便。目前已有2299人学习使用，边学边练，可作为原型设计日常操作的速查手册。

1. 第一次用墨刀搭App低保真原型：这份基础操作流程到底拆到什么程度

拿到《墨刀原型工具基本操作流程》这份资料，先别把它当成一份软件说明书来读。真正上手之后会发现，墨刀里最拖效率的操作恰恰藏在几个不起眼的选项里：新建应用时选错设备尺寸、底部导航复制到新页面后位置错乱、全局手势和轮播图抢滑动——每一条都足以让一场演示现场翻车。墨刀不是用来写源码软件的，它的定位是把移动应用原型和线框图快速画出来，云端保存、实时手机预览。这篇笔记按建应用、做底栏、堆页面、连跳转、出预览的实操顺序拆一遍，适合刚接手移动端项目的产品和设计，也适合准备原型设计课程的讲师。

2. 创建应用与底部导航：设备尺寸、标题栏和「原位置粘贴」三个关键配置

2.1 新建应用时四个字段怎么填：类型、名称、尺寸、方向一次定对

打开墨刀客户端，先面对的是一个空白工作区。新建应用时的第一组选择，直接决定后面所有页面的参考坐标系，后面再改会牵连组件位置和预览比例，所以第一步值得多花一分钟想清楚。

新建应用的标准路径是：点击「+ 新建应用」，在弹出的面板里选择应用类型。PDF 示例里选的是 iPhone 设备，这一步的意思不是锁定苹果生态，而是告诉墨刀「我要做一款手机端竖屏应用」，让画布尺寸和组件库自动切换到移动端模式。接着输入应用名称、选择设备类型和对应尺寸，确认无误后点击创建按钮。

设备类型和应用尺寸这两个字段看起来重复，实际分工不同。设备类型控制默认组件密度和物理尺寸映射，应用尺寸控制画布像素宽高。我日常常用的一套配置参考如下，实际以你团队验收用的主力机型为准：

创建时还有一个容易被忽略的方向选项。一个 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的形态呈现，方便在评审现场给团队边走边讲边演示。

演示前我用一套固定检查清单，防止现场出丑。列出来供你参考：

原型本身是沟通工具，不是设计稿，也不代表最终布局。它只是最终系统的代表模型或模拟。所以不需要做得太精美，但一定不能出错——错了意味着沟通效率下降，甚至让产品进度拖延。线与线之间的接点、底栏的复制位置、手势的优先级，都是阻碍沟通出错的关键点。

我曾经在评审会现场演示时，从首页切到发现页，底栏位置闪了一下，评审直接问是不是两个页面没对齐。转天我把底栏重新原位置粘贴了三遍，才意识到这类细节才是原型说服力的基本盘。从那以后我每次分享前都强制走一遍上面的检查清单，多花五分钟，换掉整场评审的尴尬。

希望帮到你。

本文还有配套的精品资源，点击获取