软件综合实践专题作业--墨⼑的使⽤
⼀.墨⼑总体介绍
墨⼑,⼀款在线原型设计与协同⼯具,借助墨⼑,产品经理、设计师、开发、销售、运营及创业者等⽤户体,能够搭建为产品原型,演⽰项⽬效果。同时也是协作平台,项⽬成员可以协作编辑、审阅,不管是产品想法展⽰,还是向客户收集产品反馈,向投资⼈进⾏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设计模板
点击页⾯上⽅的下载图标,具体如下图所⽰:
五.软件版墨⼑制作⼀个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. 可以按照名称、⼤⼩、创建时间,以列表或横排形式排序。更快的到所需
以上就是对墨⼑的学习总结
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论