博客> 涨姿势!线框图、视觉稿、原型的区别及原型设计工具的选择
涨姿势!线框图、视觉稿、原型的区别及原型设计工具的选择
2018-09-19 01:00 评论:0 阅读:536 冰糖葫芦123
原型设计

很多朋友经常会把线框图(wireframe)、视觉稿(mockup)和原型(prototype)混为一谈,粗放地理解成原型,这些概念的确是很容易混淆。这篇文章为大家讲解这些概念背后的名堂,并为你推荐合适的原型工具。

1.线框图,视觉稿和原型区别在哪里?

Marcin Treder在Designmode上的一篇文章中写道:“把线框图和原型混淆,就等同于认为建筑设计蓝图跟样板房是一个东西。”事实上,它们所代表的是设计流程中的不同阶段。  1.png 线框图(Wireframe):产品的低保真呈现方式,设计图的骨干与核心,能够高效地勾勒出结构和布局。线框图是用户交互界面的主视觉和描述,绘图时不用在意细枝末节,但必须表达出设计思想,不能漏掉任何重要的部分。就像给项目协作成员开辟了一条辅助理解的通道。

视觉稿(Mockup):视觉稿是高保真的静态设计图,应当表达信息框架, 静态演示内容和功能。与线框图不同的是,视觉稿更倾向于体现最终成品或原型的视觉效果,但是不能交互和点击,更多的是呈现平面视觉效果,主要用于向投资方展示成品平面的效果,帮助团队成员以视觉的角度审阅项目。

原型(Prototype): 原型是最接近最终产品的阶段,这个阶段能够模拟流程并且测试用户交互,与成品的形态相差无几。早期的原型测试能够节省巨量的开发成本和时间,如此一来,团队就不会因为不合理的交互界面而让后端的产品架构都白做了。所以,对设计师和开发者而言,原型是用来测试产品的绝妙工具。

看了上面的,会不会有点绕呢,好吧,简单说:

线框图就是没彩色的设计草图;

视觉稿就是和成品界面完全相同的设计图;

原型是就是会动的设计模型。

总而言之,三者都是最终产品的不同展现方式,了解这些概念后我们就要选择合适的原型设计工具。

2.那么你应该如何选择工具呢?

当你尝试新的工具的时候,往往会面对这样的问题:

学习新工具的时间是否合理? 需要多长时间才能适应新的工具? 我能多快完成一个原型? 在下决定使用新的工具前,你应该考虑如下问题:

这款工具是拿来做网站、桌面端还是手机APP? 我需要绘制线框图、视觉稿还是原型? 我是否需要协作的功能? 我能为这款工具支付多少钱? 3.有哪些可以用来设计线框图,视觉稿和原型的工具? 制作线框图和原型:推荐Mockplus、Balsamiq Mockup  2.png 使用Mockplus,你可以快速地设计移动端和桌面端上的简单的原型。该软件易于使用,无需编程知识。既可以绘制线框图,也可以制作交互原型。简单的下拉和拖动就能实现交互。 并且提供高度封装的组件如弹出菜单、滑动抽屉和图片轮播,并且还支持团队协作,让你通过简单的方法快速轻松地创建原型。

网站:http://mockplus.cn/

如果你只是需要制作线框草图,可以使用Balsamiq Mockup。界面操作简单,绘出的原型图有独特的手绘风格,线条简洁,并且提供了丰富的各种常用元件,这使得设计人员更能把关注点放在设计上,而不是在视觉效果上投入过多的精力。当然,如果你需要体现交互设计,balasmiq可能帮不到你了。

网站:https://balsamiq.com/

制作视觉稿:推荐Sketch、Photoshop、Illustrator  3.jpg Sketch是一款轻量、易用的矢量设计工具,是设计视觉稿的利器。缺点是没有动态或交互功能,不利于表现产品功能(或页面)关联逻辑,只支持Mac。特点是符合原型文件的层级结构;常用功能齐全,快捷键合理方便;各种组件库和模板非常丰富;插件安装容易,且插件库发展迅速。

网站:https://www.sketchapp.com/

一些视觉设计出身的原型设计人员因为软件使用习惯的原因,可以使用PS,AI这样的软件设计原型。但是操作难度相对较大,易于画视觉稿、流程图。不利于表达交互设计,不擅长文字说明与批注。

网站:http://www.adobe.com/products/photoshop.html

结论

每款工具各有优劣,主要取决于你的实际需求,设计线框图、视觉稿还是原型。笔者平常主要使用Mockplus设计原型,简单易用、经济实惠。希望这里介绍的工具能够给予你启发,找到最合适自己的那款。

收藏
0
sina weixin mail 回到顶部