日本UX站点Uxmilk.jp对Mockplus的介绍 - ​简洁快速的原型图设计工具Mockplus使用指南

简介: 链接地址:https://www.mockplus.cn/blog/post/408日本UX站点对Mockplus作了专文介绍。被我们偶然发现了。因为Mockplus在欧美的用户较多,所以日文的介绍,让我们感到荣幸,也确实有些意外。

链接地址:https://www.mockplus.cn/blog/post/408

日本UX站点对Mockplus作了专文介绍。被我们偶然发现了。

因为Mockplus在欧美的用户较多,所以日文的介绍,让我们感到荣幸,也确实有些意外。作为日本同行,他们如何看待Mockplus?有什么使用感受或者意见?

原文为日文,所以这里全文翻译出来,提供大家阅读。

>> 作者 三瓶亮

>> UX MILK主编。如今的大数据时代用各种各样的形式分享信息。喜欢朋克摇滚、电子游戏以及动漫作品。最近DARK SOULS(黑暗之魂)的游戏又重新回到人们的视线里了。

>>http://uxmilk.jp/38755

原型图设计是现如今网页设计师和应用软件的设计师工作中不可忽视的一道工序。最近随着以adobe为首的图形软件公司不断研发,在全世界许多图形制作工具应运而生。

原型图设计由于处于不同的开发阶段以及追求的效果不同又萌生出很多小的需求,使操作性更加灵活多变。与其说在众多的图形软件中选出最好的图形工具不如根据自己的需求选择操作最方便快捷的图形制作工具才是最重要的。

基于以上需求,现在此介绍目前日本国内还未广泛使用的原型图设计工具Mockplus

Mockplus的定义

Mockplus是Jongde Software公司研发的一款简洁快速的原型设计工具。就像宣传标语WYSIWYG(What You See is What You Get =既“所见即所得”)说的一样,Mockplus是一款直观可视、操作方便快捷的图形制作工具。

在此之后,我草拟了一份关于此图形制作工具的操作流程报告,全文几乎没有任何的指导教程。本人初次使用此工具就是在无任何指导的情况下独立完成所有操作,制作过程中未碰到任何疑难问题。我可以直言不讳的说它虽然没有华丽的用户界面,但绝对是“直观可视、操作方便快捷”的图形制作工具。

所谓百闻不如一见,所以我从初级开始循序渐进的讲解原型图制作流程并以报告形式呈献给大家。

Mockplus使用指南

Mockplus支持Win/Mac系统。甚至还有辅助iOS/Android的应用软件。大部分功能可以免费试用,只有云功能等一小部分功能需要付费后才能使用。

下载应用程序,启动后会弹出会员登录界面。

按界面要求填写登录后进入用户界面。

界面提供线框和素描两种模式。此时如果作图不美观、不细心的话,系统会自动识别并向用户作出提示。可以显示工具的状态。

接下来试着读取样图设计信息。

此时立即在作图区沿边框顶格生成图像。

首先进入主画面。画面的左侧一栏为工具栏,右侧为画图区域和状态属性栏。画面最上方当中位置是预览设置,可以演示原型图。

看上去总感觉只要一触碰该工具就会马上开始制作图形。

原型图制作指南

此次我试着制作某媒体网站的应用软件的初级阶段的原型图。

就是这样的感觉。顺便提一下,此时很想用Sketch模式在PDF上书写试试看。

交互工具

首先在左侧的工具栏里有交互工具,可以试着加入Sliding Drawer(抽屉组件)。直接拖曳工具栏中的图标使其移动&下拉。因为评价不高的汉堡菜单会在桌面上滚动,所以请适当放入。

双击抽屉组件就弹出该画面。

可以在抽屉中插入图片组件。

可以按照自己所想的图案添加图形。系统自动默认为x图形,并且支持嵌入自己想要的图片。

因为这是应用程序的副菜单可以试着放入列表视图。

左侧的工具栏里会看到桌面视图。拖曳&下拉该图标会产生样图。双击此图标后…

画面上出现文本区。只可以在文本区进行编辑。文字组合和象形图随即出现。这是该软件的独到之处,使用顺手后,编辑处理图形很容易。

马上开始编辑。

编辑处理好后,圆形图立即呈现。果然很方便!

如果想启动画图界面可以返回主页面。

若单击汉堡图标,会显示许多细分图标。上面的图标是和图片组件相关的,方框中的三个图标又是代表什么呢。

若拖动图标后面的链接点,它可以拉伸至抽屉组件处,所以就先试着连着看看。此处看不见效果,但会弹出确认窗口,请点击确认按键。让我们试试看吧。

可交换的图像文件虽然有点杂乱无章,但可以轻而易举的移动。简单极了!

跟帖

好玩极了。制作贴子很方便,不如试着制作一篇记事贴和报道吧。

该软件为您准备了各种各样的标签。只要拖曳和下拉一看便知的记事贴图标就可以了。图标设计的虽然不华丽但配有样本标签,方便快捷,一学就会。

这和刚才所介绍的列表视图一样只能在编辑区编辑制作。可以用逗号分隔。仔细观察后发现各图标上面有个拖曳用的小链接点。果然这里也是可以链接的。

帖子下方需要留有一定的空间作说明。所以可以使用内容面板。这里真实的反映了我大脑中的构想,虽然有点让人难以捉摸,但结果和想象的完全一致。

动态面板可以将几页同时绑定,方框区域可以记载页数。

画面的右侧有项目列表,新增页面时会生成新的页面导览图。

将刚才介绍的动态面板设置在标签的正下方,点击图标后马上会生成一个黑色的方框,用鼠标适当拖动调整方框大小。

试着连一下,和Panel 1相连的记事表也随之发生变化。按「+」按键后新增Panel 2,同样连接推荐记事一览表。

在此可以记载两页的信息。

这里还有一个功能,可以将记事贴和所述内容面板联系到一起。

将消息贴→记事贴,推荐贴→推荐记事一览表联系到一起。这里只是摸索着操作。我本想可以连接到一起的就试着操作了一下,还真的连接到一起了。太好了。

那么就给大家演示一下吧

我这次想将记事贴的内容和所述内容的范畴对换一下。要是内容范畴的记事一览表可以循环变换就好了,于是就根据自己的想法试着做了,不知道会不会成功。

按下预览图标(F5)

脑海中浮现的想法几乎都实践了!

没有花多少时间学习就三下五除二的完成了制作,感觉自己好厉害呀。

这里顺便提一下,如果下载了iOS/Android应用软件的话可以通过扫描QR(二维码)在手机端预览。这个操作很简单。(但是,日语字体有点怪怪的感觉,但如果想写得漂亮得体的话最好是使用美术字体功能)

总结

Mockplus可以作为一款现成的既想既作的绘画工具使用。它是一款简洁快速的原型图设计工具。

因为本人多少熟悉一些其它的绘图工具,如果是初学者一开始就使用的话,绝不会像这款工具这么方便。你可以从这款绘图工具中直观的找到想要绘制的图形,方便快捷。

你既可以利用这款工具仔细做图,也可以像本人一样追求速度,大胆的潦草作图。

如果能通过在线等方式分享,那就再好不过了,但好像几乎都是收费的功能。话说回来,这款绘图工具可以满足你匆匆忙忙作图的需求,有机会的话不妨尝试一下如何?

相关文章
|
安全 前端开发 JavaScript
工具集锦(三)---网站安全及跨浏览器测试工具(最新整理)
工具集锦(三)---网站安全及跨浏览器测试工具(最新整理)
|
数据采集 API Python
自制简易谷歌翻译器详解(附完整UI界面及代码文件)
自制简易谷歌翻译器详解(附完整UI界面及代码文件)
269 1
|
Java 程序员 数据库
小型员工管理系统 1.0 绿色版(java实现版,附源码)
小型员工管理系统 1.0 绿色版(java实现版) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
60 0
小型员工管理系统 1.0 绿色版(java实现版,附源码)
|
开发工具 数据安全/隐私保护 git
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
三行代码搭建一个全能书籍系统(wiki)
|
Web App开发 安全 API
五款轻量级的办公软件,界面简洁且无广告
五款轻量级的办公软件,界面简洁且无广告
205 0
五款轻量级的办公软件,界面简洁且无广告
|
存储 数据可视化 前端开发
这款国外开源框架, 让你轻松构建自己的页面编辑器
前段时间我一直在设计和研究低代码搭建平台,也开源了几款可视化编辑器框架,最近在 github 上发现了一款非常强大的基于自然流布局的页面搭建框架 GrapesJS,接下来我就带大家摸索一下这款框架。
471 0
|
Web App开发 Kubernetes JavaScript
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得
近日,微软上线了一个新的开源网站。这不是微软唯一的开源网站,但却代表了新的起点。网友表示:这次真的拥抱开源了!从「恨」到「爱」,微软与开源有着一段长达30年的故事。
127 0
真爱!微软宣布新开源网站,由 Jekyll 一键生成,代码所见即所得
|
小程序 uml Android开发
好工具推荐系列:石墨文档(在线Office)和亿图(UML流程图)
好工具推荐系列:石墨文档(在线Office)和亿图(UML流程图)
411 0
|
数据库 Windows
艾伟_转载:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计
第一步:创建一个新的Windows项目 打开VS2005,点击“文件”-->“新建”-->“项目”,在弹出的对话框里,在左边选择“Windows”,在右边选择“Windows应用程序”,并在下面的名称里输入“QuestionnaireSystem”,选择相应的保存位置后,点“确定”,如下图3-1所示:                                  图3-1  这样一个新的Windows项目就创建好了。
787 0