软件综合实践专题做业--墨刀的使用

一．    墨刀整体介绍

墨刀，一款在线原型设计与协同工具，借助墨刀，产品经理、设计师、开发、销售、运营及创业者等用户群体，可以搭建为产品原型，演示项目效果。同时也是协做平台，项目成员能够协做编辑、审阅，不论是产品想法展现，仍是向客户收集产品反馈，向投资人进行Demo展现，或是在团队内部协做沟通、项目管理。墨刀为北京磨刀刻石科技有限公司旗下一款在线原型设计与协做工具产品，用户群体包括：产品经理、设计、研发、运营销售、创业者等。

二．   墨刀的发展历史

APP原型设计工具墨刀完成500万Pre A轮融资，FreeS资本领投。此前，墨刀曾得到150万元天使轮融资。2017年6月，墨刀推出3.0版本，主打团队协同方向，从3.0开始，墨刀再也不是一个只给产品经理用的，用来画产品原型的工具，而是变成了一个覆盖整个产品的设计和开发流程，帮助整个产品团队最大限度的发挥协同效应的团队协同工具。6月12日，高保真产品原型制做及团队协同工具公司墨刀宣布推出最新3.0版本，这次发布会墨刀主打团队协同方向，将来重点打造高效团队协做工具，加速团队内部效率和流程。同期墨刀宣布与石墨文档、吆喝科技、轻芒、联创工厂等多家上下游企业达成合做，将来打通整个产品设计流程。2018年1月推出Sketch插件2.0版本，Sketch设计稿能够导入墨刀，进行交互设计，自动获取标注信息，推动开发进程；2019年1月，墨刀启动To B 战略上线企业版，提供诸如企业项目及成员管理、基本数据统计等功能。

三．   墨刀的注册登陆以及版本介绍

1.目前墨刀分为网页版和客户端，网页版能够直接使用，客户端其实也是网页版的功能，咱们通常下载客户端，使用过程当中须要联网

2.登陆以后，就会出现以下界面：

 

 

四．   网页版的大概使用方法：

1.建立新的应用：

进入网页以后，能够看到有两个选项，一个是一个例子，一个是使用原型设计。咱们选择第二个进行咱们须要的原型设计。点击右上方的建立应用，能够选择不一样的模板和设备类型，填写应用名称以后便可完成应用的建立，比方说上图的泡影就是我建立的一个应用，而后咱们能够随时编辑应用或者与他人共同编辑和分享应用。

 

 

2．建立新的应用

进去以后如图所示能够看到分为几个部分，菜单栏等比较简单的就不介绍了。最左边是组件栏，能够选择须要的组件，中间编辑栏，对选取的组件进行编辑，右边是预览排列，就是最终咱们看到的页面。点击咱们建立的对应应用进行编辑，进去以后会看到下图，其分为菜单栏、组件栏、编辑栏和预览排列栏几个部分。最左边是组件栏，咱们能够在这里选择须要的组件，而后拖拽到中间编辑栏中进行设计；中间编辑栏里能够对选取的组件进行编辑；右边是预览排列，就是最终咱们看到的页面的基本排列。

 

 

3.组件的使用

咱们把一个页面要的组件所有都拉到这个右边的排列栏，经过双击对应的组件进行文字的编辑，经过中间栏进行如颜色之类的改变。

 

 

4.页面管理

新建页面：

若是咱们须要作另外一个页面以及页面的管理，咱们能够在最右边的页面管理栏进行新建或者复制页面，这样咱们的原型也能够在不一样页面之间跳转

页面跳转：

若是要进行页面之间的跳转，能够点击组件，而后拉动组件旁边的超连接的样式图标到相应页面便可执行进行页面跳转功能

5. 导出下载图片或者安装包

点击页面上方的下载图标，具体以下图所示：

 

 

五．     软件版墨刀制做一个app首页原型的案例

1.建立应用

首先打开墨刀软件，新建一个应用，选择应用类型（这里我选择了iPhone设备），输入应用称，设备类型和应用尺寸，点击建立按钮，完成应用建立名。

 

 

1.制做底部导航栏

新建应用的标题栏会自动显示应用的名称（人人都是产品经理），标题栏文字能够自行修改。制做里布导航栏，从左侧“组件”栏目中找到底部组件，拖入应用之中，大小和样式能够自行修改。而后拖入三个导航标签，修改标签的位置和名称。至此完成底部导航栏的制做。

 

 

3.制做原型页面

而后咱们开始简单的制做下“产品经理”的首页原型，在左侧的“组件”栏目中找到搜索组件，拖入App首页中，在“母版”栏目中找到轮播图模版，拖入应用之中。墨刀中有一些已经作好的组件或母版，可直接拖入使用，加快建立原型的时间。

 

 

而后回到“组件”栏目，为首页插入图片和文字。图片调节在右边的设置栏，这里推荐你们直接拖入图片，而后用鼠标调节大小这样会比较方便。文字的调节在左边的主题栏目，可调节文字的大小和样式，而后用鼠标摆至合适的位置。

4.建立页面

在软件右上角点击“+新页面”便可生成新的页面，每个页面有复制、删除、添加子页面的功能。在新的页面中添加标题栏，复制首页的底部导航，粘贴至新的页面，注意粘贴时用于粘贴至“原位置”。按如此方式制做“发现”页面和“个人”页面。

5.页面跳转

这里介绍一个墨刀很是有特色的功能，就是经过连线的方式进行页面之间的跳转，在应用中选择任何一个控件，图片或者文字均可以经过添加手势和页面切换方式实现页面跳转。优势在于操做方便，且比较直观。缺点是若是页面复杂，跳转比较多，会有很是多交叉在一块儿的线，容易链接出错。利用连线的方式便可快速的实现底部导航的切换，设置完成后选择右上角运行按钮，便可查看实际效果。

6.添加全局手势

最后说一个在移动端比较重要的功能，应用全局手势的添加，在左侧“组件”栏目找到全局手势组件，拖入至应用的任意位置，而后选择你要发动手势后跳转的页面，选择手势方式和动画效果便可。利用全局手势组件，在应用添加滑动的页面切换效果。运行测试，效果以下。

 

 

7.手机预览

手机预览功能，能够直接将原型导到手机上查看。只须要在运行界面，点击分享，用手机浏览器（墨刀app能够）扫描二维码便可直接在手机上查看原型，更加方便的你为团队演示和讲解本身的原型。

8.总结

“墨刀”总的来讲操做是很是方便的，若是有其余的原型工具基础，用起来可能更好上手。自己支持手机预览功能，更加方便于移动产品的建立和展现。本人也推荐app的产品或设计师使用墨刀来快速建立原型，能够加快本身的制做和展示的时间。

六．客户端版本的详细介绍

1.建立移动端

在墨刀，你既能够建立移动端项目（iPhone/Android）、平板项目、也能够建立Web/电视项目、Watch项目，并能够自定义尺寸，为各类屏幕建立原型。

登录墨刀以后，点击“新建项目”便可。

 

 

固然，您能够选择“从模板中建立项目”。

鼠标悬浮在模板上方，点击“使用模板”，就能建立该模板项目。

2.修改原型尺寸和机型

鼠标悬浮在项目卡片上，点击“..."，而后点击“设置”，

再修改项目的名称、设备类型和尺寸，而后保存便可。

3.添加和编辑页面

添加页面

添加同级页面：选中一个页面，再点击页面列表顶部的「添加新页面」，即可以新建该页面的同级页面。

 

 

添加子级页面：鼠标悬浮某页面上，点击「...」展开更多按钮，单击「添加子页面」便可为该页面添加子级页面。目前最多支持建立7级页面。

修改页面名称

双击修改页面名称：可以使用“数字”+“页面功能”方式命名，既便于页面识别，又可弥补多级列表演示时的不足，更清晰地展现页面逻辑关系。

调整页面顺序

 

 

拖拽调整页面顺序：拖动某页面在页面列表上下移动位置便可。若是将页面 A 移动为页面 B 的次级页面，直接拖拽 A 至 B 区域处便可。

复制/转移/删除页面

鼠标悬浮某页面，页面名称右侧会显示「...」更多按钮，点击更多按钮展开「建立副本」、「移动到」以及「删除」的按钮。

编辑页面式样

在右侧的“页面设置面板”，你能够选择页面是“竖屏”仍是“横屏”演示，能够修改背景颜色

能够选择是否显示“布局”，并能够修改“列数”/"间隔"/“尺寸”。

能够选择是否显示“网格”，并能够调节网格大小。

能够查看当前页面连接数，并在这里一键删除。

 

4.添加组件和图标

在最右的设置面板左侧里有“组件”、“个人组件”、“图标”库，点击便可打开相应的素材库。

组件（官方组件）库：墨刀官方提供丰富的组件库，除了基础组件，还有苹果的 iOS, 谷歌的Material design, 微信的 WeUI，蚂蚁金服的 Ant Design, Windows 10 等多套组件库。这些均可以直接使用，画原型效率大大提高。

个人组件：你自定义的组件库。

图标：覆盖各领域的图标，来自 Font Awesome, Material Design 和墨刀图标系列。

 

墨刀目前有两种方式添加组件/图标到画布上：

1 双击组件/图标

2 拖拽组件/图标到画布

对于左侧（在“推荐”模式下）的“快捷组件”来讲，还有第三种添加方式：按住对应的快捷键而后鼠标画出。好比画“长方形”组件，就按住“R”。至于其余组件用什么快捷键，鼠标悬浮在“快捷组件”上就能够看到啦！

 

 

5.编辑组件属性

在面板里能够编辑组件的各类属性，好比位置、大小、颜色、透明度、阴影、动效等等。

选中多个组件，能够编辑它们的布局方式，好比“左对齐”、“右对齐”、“居中对齐“、“水平等间距”、“垂直等间距”…

选中组件，在设置面板中点击「小眼睛」得图标便可显示、隐藏组件。

显示、隐藏组件快捷键：

选中组件，在工具栏中点击「锁定」，或者在外观设置中点击「小锁」图标便可锁定、解锁组件。锁定组件后，点击组件右上方的「小锁」图标也可解锁组件。

锁定、解锁组件快捷键：

组件和页面目前还不支持渐变色设置。

 

 

6.保存自定义组件，以重复使用

画原型时，会遇到这样的状况：我设计好了一套组件，以后会屡次利用，但我不想每次都从新设计，该怎么办？

在墨刀，你能够将任何组件（组合）建立为“个人组件”，收录到“个人组件”库中，以后便直接从组件库中拿出来使用便可。

“个人组件“跟随你的帐号，所以不管你是在哪台电脑使用墨刀，只要登陆你的帐号，就能够在任何项目里使用你以前设计的组件，助你提高设计效率。

 

有2种方式能够建立“个人组件”：

1 选中组件，右键弹出面板，选择“建立个人组件”。

2 直接拖拽组件到“个人组件”面板空白区域。

建立成功后，即可以经过双击或者拖拽的方式直接使用啦！

若是你自定义的组件数量不少，还可使用“搜索”功能来提高工做效率。 

此外还能够在“个人组件”面板创建文件夹来管理你的组件，更多批量处理能够经过打开“素材库”实现。

 

 

7.使用母版批量修改组件

你在画原型时或许面临这样的问题：同一个组件（组合）在多个页面多处都用到，可是当后期须要修改时，你想一次性修改全部这样的组件。

此时你就能够利用墨刀的“母版”了。

母版：

墨刀支持将任何组件，不管是静态仍是动态，转化成母版（master）。

母版的特色是具有“继承性”：只要改动母版（master），那么它全部的实例（instance）都能同步更新改动。

新建母版：

选中组件——右键“转换为母版”——命名。在该项目建立的全部母版都会存放在“母版库“中。

编辑母版：鼠标悬浮在母版缩略图上方，点击“…”—“编辑”，便可进入修改母版。修改完成后，它在该项目里全部的应用实例都会同步更新修改。

8.添加交互设置

在墨刀，你能够很快捷地实现页面之间的跳转。有2种方式：

给出其中一种方法

选中组件，在“连接设置面板“点击“添加事件”。

 

 

而后设置”触发动做“和”动做“。

 

 

9.管理素材库：

组件：你能够在这里新建、复制、移动、删除组件，新建和删除组件文件夹，也能够将组件置入画板。支持按住Shift或command/ctrl键多选。

 

 

图片：有一个好的图片库至关于一个井井有理的图书馆，能够快捷高效的取用所需素材。

于是这一版有两个小改动：

1. 直接上传到工做区的图片再也不自动添加到素材库，咱们没法判断这些图片是只使用一次仍是要屡次使用，过多的无关图片有可能会污染素材库。你能够手动把之后可能会用到的图片添加到素材库，保持素材库的整洁。
2. 要先建立文件夹，再添加图片，甚至是对图片添加标签，对每张图片都分门别类。（您能够将按照项目来建立文件夹，按照标签来归类。固然您也能够按照本身的习惯来作分类。）

 

良好的整理习惯，必定会让你往后的工做受益无穷。

添加文件夹、添加标签

1. 建立文件夹后，你能够直接拖拽图片到空白区域，或者点击「添加图片」，就能够上传图片。目前支持上传PNG/JPEG/JPG/SVG/GIF 格式。
2. 选中图片，能够接着添加标签、删除、下载或者移动到其余文件夹，也能够将其置入到画板。
3. 在“图片标签”，便可经过选择“标签”快速查看相关图片。点击“管理”，便可删除某个标签。
4. 能够按照名称、大小、建立时间，以列表或横排形式排序。更快的找到所需

 

 

 

以上就是对墨刀的学习总结