一、前言
这次,我们将介绍一些主流的原型设计工具,包含了Axure,墨刀等,并会举例说明其中一款软件的使用方法。
二、工具介绍
Axure:
Axure是非常经典的原型设计工具,可以在本地制作,编辑和保存原型文件,当我们学会使用它的自定义库和控件以后,我们设计原型的效率能够大大得到提高,它支持交互设计和基础设计,可以使用母版,元件等,提供了许多高级交互组件,功能全面并且强大。不论是网站或软件的规格说明文档,或是原型、线框图、流程图等,它都能够帮助专家快速创建,从而提高了许多工作的效率,比如设计界面和功能,定义规格和需求。它传达互动的特性能够帮助我们节约时间,因为它还支持版本控制,多人协作等功能。在PC端和Mac上,它也是通用的,然而对于新手来说,正是因为它的功能强大,应用广泛,所以它过于复杂,不够友好。
墨刀:
墨刀是一款在线编辑设计原型的软件,对新手比较友好,容易上手,操作较为简单,适合一些小型PC项目,更新频繁的软件或者是APP,使用它的用户能够提高协同办公的效率,编写的文件都是可以保存在云上,这样就无需有丢失文件的担心,但是正因为它是在线编辑软件,所以它也有它的缺点,在延迟比较严重,网络比较卡顿的时候会给我们造成许多麻烦,在进行原型编辑操作时,会很不通畅,此外由于它是一款轻量级的工具,它的原型模板和功能不像Axure丰富。
摹客RP
这款软件同时拥有团队协作能力和强大的高保真原型设计能力,适用场景有中高保真原型,团队协作,快速原型,平板/移动端/WEB原型,视觉稿,线框图等等,这款软件适合被当作快速原型工具来使用,从而能够有效地将原型提供给工作团队来预览,因为工程刚开始立项的时候,要多方面的成员都参与进来,包含了团队领导,运营,设计和产品等,这个时候往往就要使用快速原型工具。另外这款软件的功能强大且全面,有易用的设计能力,摹客能够流畅制作有着丰富细节的高保真设计稿,还是快速生产线框原型,因为它有着完善的矢量编辑功能,高自由度的编辑方式,和预设的高扩展性图标和组件。
Figma
Figma是一款基于浏览器的在线设计协作平台,浏览器打开即可使用,这款软件可以完成开发人员交付,UI协作和设计,原型设计,设计系统管理各种环节,因为它集成了交付,UI,原型等功能,并且它对于用户也较为友好,能在没有代码知识情况下创建原型。并且它也支持将文件保存在云端,同时,无需同步设计图到第三方平台,因为我们能使用Figma顺利完成从设计到原型演示的转换,具体是在手机上使用Figma Mirror浏览效果。它对在线协作的支持性也很好,用户可以用链接的方式分享自己的文件,也支持Win,Mac等多平台使用。它还内置了强大的组件和易用的原型功能,而且界面对用户很友好。但它的缺点也比较多,它的价格较贵,同时作为一款在线工具,它无法进行离线创作,插件较少,不能按比例缩放等。
三、使用示例
下面,将对墨刀这款软件进行简单的介绍。
首先,我们打开软件,来到原型的主页面。在这个主页面上,在搜索框的位置添加了一个空白的矩形组件,它具有的事件是点击这个矩形会跳转到页面2。
如何实现这个功能呢?我们只要选中矩形,将其拖入主页面内,
再将矩形左边的闪电图标拖到要跳转的页面即可。
然后,我们可以点击右上角的演示图标预览效果,
在上面,我们就已经介绍了一种使用墨刀实现页面跳转效果的功能,包括动作+目标+动效,交互逻辑清晰可见。
现在我们已经对页面跳转功能的使用有了一定的了解,下面我们将通过使用跳转和设计页面布局来尝试初步实现一个具体的软件界面。
现在我们要实现一个“校园二手交易平台”的用户界面。首先我们通过向画布内拖入一些组件,如文字,矩形,单行输入的搜索框等来初步建立界面,也可以从电脑上将图片拖入墨刀的画布,下面的“集市”和“我的”图标就是通过拖入图片的方式实现。也可以直接通过拖入导航栏的方式实现底部导航,还可以更改界面内各类方框的圆角。
然后我们可以设置不同页面之间的跳转,
这里的返回按键的设计,我们既可以选择跳转页面,也可以选择返回来源页面,因为在主页面的苹果选项上已经设置了点击这个选项会跳转到商品详情页面。
效果如下:
四、总结
通过这次的学习,我了解了一些常见的原型制作工具,他们的一些特点以及相互的异同点,在这些软件中,有专业但较难上手的,也有较为简单容易的,关键在于根据我们的需求来不同地使用这些软件。墨刀对初学者用户非常友好,方便快捷,能够提高我们的效率。这次的学习主要是熟悉原型的制作流程和原型软件的使用,重点在于体现出软件页面的布局和页面跳转效果,所以采用墨刀作为原型设计工具来简单地设计了一个校园二手交易平台的雏形。
此外,我也对原型设计的意义有了进一步的了解,“墨刀”可以让设计者很快地完成软件的一些初步的设计给别人展示,能很方便具体地展示一些口头表达的难点或细节,从而让软件的使用者了解软件的体验效果,来明确后面的软件设计方向,这正是原型设计的用处。
标签:跳转,介绍,原型,设计,软件,工具,墨刀,页面 From: https://www.cnblogs.com/3af487r82sd35/p/17391452.html