墨刀原型设计指南
# 一、Axure导入
将Axure中的HTML文件以重新建立一个项目的形式导入墨刀内,支持在墨刀内进行继续编辑等操作。 需要注意的是, Axure生成的HTML文件夹需要压缩为.zip格式,其他格式暂不支持(加密ZIP无法识别)。
具体操作步骤如下:
# 1、导出Axure文件
在Axure内点击发布-生成HTML文件
# 2、压缩Axure文件
创建文件夹,将生成的文件进行压缩,注意是压缩整个文件夹而不是某个HTML。压缩时选择压缩文件格式为ZIP并且不能加密。
# 3、导入到墨刀
使用谷歌浏览器打开墨刀,在项目管理页,点击新建-Axure导入即可将Axure压缩包上传到墨刀内。
点击后会出现一个弹窗,选择相应的压缩包之后点击打开,当出现提示后即表示导入成功,此时项目管理页内会出现一个新的项目(即导入的Axure项目)然后就可以在墨刀内继续编辑Axure文件了。
# 二、项目创建
# 1、新建项目原型
登录系统进入个人主版面,左侧栏点击“新建”按钮,选择“原型工具”,选择自己项目原型需要的版面尺寸,点击“确定”,即项目创建成功。
注:自定义尺寸项目才支持自定义修改原型的长宽。
# 2、星标项目
在项目文件夹中选中项目,点击「更多」-「设为星标」,即可在项目文件夹中星标此项目。
# 3、锁定项目
在项目管理页中选中项目,点击「更多」,选择「锁定」项目,即可锁定项目。
锁定的项目,可以在项目组顶栏切换到 「已锁定」中查看。
# 三、编辑页面
# 1、添加页面及页面文件夹
在编辑区左侧的页面列表区域,您可以点击顶部的「页面」为原型添加新页面。
在编辑区左侧的页面列表区域,您可以点击顶部的「页面文件夹」为原型添加新的页面文件夹。
页面文件夹能够有效的梳理页面逻辑,具体设置方法如下:
在项目编辑区左上角,点击➕就可以新增页面,点击文件夹的图标,就可以新增文件夹。
# 2、页面标识
在左侧的页面列表区域,可以为页面及文件夹修改标识样式,便于区分各页面的类型或状态,提升您的工作效率。
设置页面文件夹标识
点击页面文件夹前的「文件夹」图标会弹出切换颜色菜单,点击就能为文件夹图标修改颜色。
点击最右侧的「恢复默认」按钮,即还原为默认颜色。
点击空白区域,颜色菜单即会隐藏。
设置页面标识
点击页面名称前的「页面」图标会弹出切换图标面板,共有最近使用、标志符号及表情三个板块。
最近使用:这里会记录并显示您最近使用过的页面标识,方便您快速复用。
标志符号:提供了进度标志以及符号标识,能够清晰地标明页面的类型、修改状态及操作等。
恢复默认:点击面板右上角的按钮,即可使页面标识恢复默认状态。
# 3、设置页面/组件外观
选中整个页面画板时,您可以在右侧的外观设置面板中设置页面画板的外观(尺寸、背景色)。
选中某个组件时,您可以在右侧的外观设置面板中设置组件的外观(如位置、大小、颜色、透明度、阴影、动效等)。
# 4、页面列表/元素组件列表多选
墨刀支持页面列表/元素列表多选,具体操作如下,
页面列表:
按住shift,单击首尾两个页面即可选中两页面中间的所有页面,进行统一的移动/删除操作;
按住command(Mac)/ ctrl(Windows),即可逐个页面进行选择。
元素组件列表:
按住shift,单击首尾两个元素组件即可选中列表中两组件中间的所有元素,然后右键进行组合/图层调整等操作;
按住command(Mac)/ ctrl(Windows),即可逐个元素组件进行选择,然后右键进行组合/图层调整等操作。
# 5、设置页面高度(长页面)
选中页面画布后,鼠标悬浮在页面画布底部,按住向下拖拽即可调整页面高度(拉长页面)。如果需要精确设置页面高度的值,可以在右侧的页面外观设置中输入数值设置。 拉长页面高度超过一屏后,在运行时会以滚动的形式展示。
# 6、合并项目
把几个项目的页面合并成一个,可以通过「转移页面」功能来实现: 在项目A中选择所需页面,点击页面右侧的「更多」-「移动到」按钮,在弹出的面板中选择需要移入的空间-文件夹-项目B,就可以将项目A的页面转移(合并)到项目B中了。
需要注意的是:
1、项目不能没有页面,因此如果需要转移所有页面,得先新建一个一级空白页面。
2、移动页面时可选择「复制并移动副本」,这样原页面会保留,只会将副本移动到新项目中。
# 四、编辑组件
# 1、添加组件
在编辑区右侧的状态栏,素材板块内有「组件」、「图标」、「图片」和「页面」,可以点击打开对应的素材面板,添加需要的组件。
# 2、显示/隐藏组件
选中组件,可以在编辑区右侧的外观设置面板中点击「小眼睛」图标设置显示或隐藏组件。
注:隐藏组件后需要在左侧元素栏选中元素后才可以显示组件。
# 3、组合/打散组件
多选组件后,可以在编辑区的顶部工具栏中对它们进行打散和组合。
也可以使用快捷方式操作:
组合 Mac:Cmd+G (group) Windows:Ctrl+G(group)
取消组合 Mac:Command+Shift+G(Group) Windows:Ctrl+Shift+G(Group)
# 4、锁定/解锁组件
选中组件后,可以在页面编辑区顶部工具栏或者右侧的外观设置面板中点击「小锁」图标来锁定或解锁组件。
# 五、编辑母版
# 1、使用母版批量修改组件
在画原型时遇到这样的问题:同一个组件(组合)在多个页面多处都用到,但是当后期需要修改时,想一次性修改所有这样的组件,就需要用到“母版”功能了。 墨刀支持将任何组件,无论是静态还是动态,都可以转化成母版。母版具备“继承性”:只要改动母版,那么它所有的实例都能同步更新改动。
# 2、新建母版
步骤:选中组件—右键“转换为母版”—命名。
在该项目创建的所有母版都会存放在“母版“中。
# 3、编辑母版
鼠标悬浮在母版缩略图上方,点击「 … 」—「编辑」,即可进入修改母版。修改完成后,它在该项目里所有的应用实例都会同步更新修改。
还可以选中母版后,在右侧的外观面板选择设置这一母版实例在该页面的默认状态
# 六、添加交互事件
# 1、交互事件介绍
跳转页面/超链接
跳转页面:支持跳转至该原型项目内的其他页面。
跳转超链接:支持跳转至其他网页网站。
切换页面/组件状态
若页面或组件具有多个状态,支持进行状态切换。(ps:仅支持当前页面或当前页面内的动态组件。)
# 2、动态组件的交互事件
墨刀支持为动态组件中的元素添加交互事件,如切换页面状态、其他组件状态等。能够实现丰富的动态效果。
# 3、快速添加/删除交互事件
添加交互事件的方法
有两种操作方法为原型添加交互事件。
1.选中需要添加交互的页面/元素组件,点击右侧的设置面板-事件-添加事件。
2.选中需要添加交互的元素组件,拖动左侧的【闪电】图标,将连接线拖到需要跳转或切换的“页面”或“状态”,即可快速创建事件。
拖动至左侧页面列表中的某一页面,默认快速创建【单击切换页面】事件。
拖动至目标元素组件,会弹出行为菜单,选择需要的行为即可快速创建事件;如果当前状态仅支持一种行为,则会直接创建事件。
拖动至编辑区左上角的【返回来源页面】菜单,可快速创建返回链接,运行时点击即可回到当前页面的前一页。
# 七、标尺、参考线、图层及画布
# 1、标尺
上方和左侧的「标尺」分别与画布的 X、Y 值相对应,在绘制原型的过程中就能通过标尺更便捷直观地查看元素和组件的坐标位置。
在左上角下拉菜单,点击【偏好设置】-【标尺】,能够切换标尺的显示/隐藏状态。
标尺右键菜单
鼠标放置在标尺区域,并单击右键弹出菜单,能够勾选设置显示标尺、显示参考线、对齐参考线,也可以批量删除横向/纵向参考线。
需要注意的有:
1.选择不显示标尺时,参考线也会隐藏。
2.开启对齐参考线功能后,页面元素靠近参考线时,可触发吸附效果;同时拖动参考线也会自动吸附附近的元素。
# 2、参考线
从标尺上可以拖拽出多条参考线,以辅助定位或对其元素及组件。添加参考线:将鼠标靠近标尺区,能够看到鼠标切换为拖拽样式,此时单击鼠标并向下或向右滑动,并在合适的位置松开鼠标,即可创建参考线。
同一页面中可创建多条横向及纵向的参考线,参考线不会同步至所有页面。
操作时需要注意:
1.从上方标尺拖拽出的是 X 轴(横向)的参考线
2.从左侧标尺拖拽出的是 Y 轴(竖向)的参考线
移动参考线:
有两种方式可以对参考线进行移动。
1.将鼠标靠近目标参考线,鼠标样式会发生改变,此时直接单击鼠标并拖动即可移动参考线。
2.鼠标单击目标参考线,该参考线即会切换为蓝色的选中状态,使用键盘方向键即可移动参考线,每次移动的距离为1像素;按住shift+方向键,每次移动的距离为10像素。
穿透参考线:
按住shift可穿透参考线,选择参考线下方的元素。
删除参考线:
有两种方式可以删除参考线。
1.拖动参考线至上方或左侧的标尺区域,鼠标会切换至【取消】状态,此时松开鼠标,参考线即被删除。
2.单击选中参考线,使用键盘delete键即可快捷删除。
# 3、图层
组件的图层顺序有两种调整方式:
1、选中组件,点击编辑区的顶部工具栏「图层」进行调整(如:置顶、置底)。
2、在编辑区左侧的元素列表中直接上下拖拽元素调整图层顺序。
# 4、画布
按住空格键后,鼠标拖拽即可自由拖动画布。页面画布的大小可以在编辑区的顶部工具栏中调整。也可以使用快捷方式操作:Ctrl+鼠标滚轮滚动。