原型工具中Wireframe, Mockup和prototype之间的有什么不同?

无论你是一名刚入行的UX/UI设计师,还是入行多年的老手,在制作原型的过程中一定接触或听说过其中很重要的三个原型术语:“wireframe (线框图)”, “Mockup” 或“prototype”。但扪心自问,你真的能够明明白白的分清他们吗?

事实上,就我而言,更多的是将他们当做是产品软件迭代设计的三个阶段:

第一阶段: 绘制线框图(wireframe)

当设计师或产品经理在了解到用户需求和产品本身特色及性能之后,会理所当然的对于产品软件主要界面,布局和功能分配之类要素有个全局把握,为了测试这些想法的可行性,他们常常会使用一些手绘的原型工具绘制出一些没有太多产品细节的原型草图,而这些草图一般被称作线框图(wireframe)。

第二阶段:编辑调整线框图创建具有更多细节的Mockup

然后,当设计师们与其他的设计师或产品经理讨论并听取他们的意见之后,会对线框图做出调整和完善,即添加更多的部件,颜色,图层,布局和排版之类的细节之后,创建更真实和高保真的Mockup。

第三阶段:添加动画交互创建prototype项目

之后,为了让网页或移动端原型更生动,直观且接近最终应用, 设计师会对原型添加各种动画,交互以及转化设计,从而创建prototype项目。

总之,线框图(wireframe)更类似于设计师根据想法制作的关于产品应用的草图,展示出应用大致的布局,所包含的的功能界面以及真实外观之类主要因素。而Mockup则加入了更多细节和视觉元素,以便让原型本身更接近应用的最终成品。当然,只是外观上的接近。然后,prototype则是添加了更多交互和动画的原型,以便设计师可以更好的展示和测试软件应用的功能。

简而言之,三种原型各有特色。而且,现今市场上,为增加原型工具本身的市场竞争力,从产品功能上分析,并没有绝对的wireframe,mockup或prototype原型工具。例如balsamiq就是一款允许设计师绘制草图的mockup原型工具(既可用作wireframe工具,也可用做mockup工具。)

哪些最受欢迎且免费的Mac原型工具值得试一试

既然市场上并没有完全绝对的wireframe, mockup或prototype工具,那么我们在选择的时候就需要更多的关注,哪一款原型工具能够更方便我们制作某种类型的应用原型。所以,这里介绍4款最受欢迎且免费的Mac原型工具,以便大家下载使用:

1). Balsamiq

Balsamiq是一款免费且界面简洁的Mac原型工具,致力于是尽量给用户,即UX/UI设计师,产品经理和开发工程师,一种近似于直接使用笔和纸绘制原型草图的体验。它能够帮助设计师快速地直接在Mac电脑上绘制网页或Android/iOS移动端设备应用的草图。其快速添加功能也为设计师搜索和拖拽需要的应用界面组件提供了便利。而且,其在线团队协作功能也能更方便参与其中的设计师,用户,客户,产品经理及开发工程师提出针对应用原型的建议和评论,更有益于原型方案的提升和完善。

但是,由于Balsamiq是一款需要设计师一一绘制出应用原型部件的手绘工具,并不适合需要创建更多细节和动画的设计师。

2).Mockplus

Mockplus是一款简单快速且全面的Mac原型工具。提供了非常丰富的功能帮助设计师创建网页或移动端app的wireframe, mockplus 或prototype项目:

*提供了超过3000个图标和200组件的强大组件库,便于设计师快速设计创建原型

*允许设计是通过简单拖拽创建可视化交互和动画

*快速格子功能,傻瓜式操作,为设计师快速实现批量复制提供了便利

*8种演示分享方式,方便设计师展示和分享原型设计

*团队协作功能,一键分享,通知阅览和批注,方便设计师分享设计资源和完善原型设计

*项目例子和模板,一键导入即可使用,方便用户设计各种社交,音乐,旅游及学习等软件原型。

总之,无论你是需要创建线框图,mockup或拥有灵活交互的prototype, Mockplus都会是你不错的选择。

3).Pencil Project

Pencil Project是既一款开源的GUI 原型工具,同时也是一款免费且适用于Mac平台的原型工具。软件内置多样的图形和组件,方便设计师直接绘制各式应用界面原型。它支持多种导出格式,例如PNG, PDF, SVG 和 ODT 文件格式等。而且,如果需要的话,在使用Pencil Project制作原型时,还可在原型文件之内添加组件与页面之间的链接,使原型更具可操作性。

所以,从这一方面来讲,Pencil Project对于无需创建复杂原型项目(即无需添加多样配色,版式和动画)的设计师来讲,使用起来会更方便。

4). InVision

InVision是一款在线的原型工具。允许设计师编辑,分享和测试具有一定交互的应用原型。而其团队协作功能,即允许设计师导入原型,讨论和添加交互及动画,也为部分设计师用户所喜爱。而且,作为一款支持大部分浏览器打开的在线工具,InVsion也适用于任何Windows和Mac电脑。

所以,InVision更适合希望通过在线团队协作完善原型交互,同时能够及时获取其他设计师,产品经理以及软件开发人员建议和反馈的设计师使用。

总结

因此,如果你是喜欢手绘网页或手机端应用原型的草图的文艺青年, 手绘风格的Balsamiq会是你不错的选择。如果你是希望创建具有丰富色彩,布局多样,细节清晰且交互生动的应用原型的设计师,简单快捷且功能齐全的Mockplus会是你很好的尝试。如果你是希望找到一款能够帮助你设计和绘制不太复杂的应用原型,Pencil Project会带给你有趣的体验。当然,如果你只是希望通过团队协作优化应用原型并获得其他参与设计师的建议反馈,Mockplus和InVision都值得尝试。

4款最受欢迎的Mac原型工具的更多相关文章

  1. 30款基本UX工具 - 思维流程工具 & 原型工具

    来源:GBin1.com 现在的开发人员在建造网站时,注重的是布局和技术特性,但是往往忽略了更重要的一点,那就是用户体验. 如 果用户在使用的时候,不能简单清楚的知道该要如何操作,那么他们一定会选择另 ...

  2. 交互神器-最好用的Mac原型设计工具

    市场上有着大量的开发和设计工具支持在Mac上安装使用,今天给大家强烈推荐一款Mac上的原型设计工具-Mockplus,原型工具在产品开发设计中是必不可少的,无论是现在非常火的小程序设计,还是网页设计, ...

  3. 8款最受欢迎的HTML5/CSS3应用及源码

    新的一周开始,小编也将继续为大家分享精彩的HTML5应用,还有CSS3和jQuery方面的东西.今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码,一起来看看吧. 1.基于HTML5 Ca ...

  4. 【转】Mac用户必备!100多款免费实用的苹果Mac软件大搜集

    原文网址:http://www.iplaysoft.com/100-mac-freeware.html 对于 Mac 新手,尤其是刚刚从 Windows 转到 Mac OS X 的用户来说,最大的痛苦 ...

  5. 三大Mac清理工具实用性测评,哪款好用?

    相信大多数MAC用户都较为了解,Mac虽然有着许多亮点的性能,但是让用户叫苦不迭的还其硬盘空间小的特色,至于很多人因为文件堆积以及软件缓存等,造成系统空间内存不够使用的情况.于是清理工具就成为了大多数 ...

  6. 在不受支持的 Mac 上安装 macOS Monterey 12

    请注意,当前为 Beta 版,后续会及时更新. 请访问原文链接:https://sysin.org/blog/install-macos-12-on-unsupported-mac/,查看最新版.原创 ...

  7. 在不受支持的 Mac 上安装 macOS Monterey 12(OpenCore Patcher)

    一.介绍 本文通用于 macOS Big Sur 和 macOS Monterey,也可以视作笔者 早期文章 的升级版. 这一章节将介绍 macOS Monterey 的系统要求和不受支持的 Mac ...

  8. 在不受支持的 Mac 上安装 macOS Ventura、Monterey、Big Sur (OpenCore Legacy Patcher)

    请访问原文链接:https://sysin.org/blog/install-macos-13-on-unsupported-mac/,查看最新版.原创作品,转载请保留出处. 作者主页:www.sys ...

  9. 8款超好用的SVG编辑工具用起来

    随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

随机推荐

  1. Js中常用的字符串,数组,函数扩展

    由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...

  2. FPGA设计者必须精通的5项基本功

    FPGA设计者的5项基本功:仿真.综合.时序分析.调试.验证. 对于FPGA设计者来说,练好这5项基本功,与用好相应的EDA工具是同一过程,对应关系如下: 1. 仿真:Modelsim, Quartu ...

  3. DOM的基本概念

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  4. 解决easyui jQuery JS的for循环调用ajax异步问题

    由于JS的for循环与ajax非同步运行,因此导致for循环结束了而ajax却还未执行,解决此方法有两种 1.设置ajax参数async为false,即与js同步,默认是true(异步). 这里首先引 ...

  5. 4_python之路之模拟工资管理系统

    python之路之模拟工资管理系统 1.程序说明:Readme.txt 1.程序文件:salary_management.py info.txt 2.程序文件说明:salary_management. ...

  6. Python Twisted系列教程18:Deferreds 全貌

    作者:dave@http://krondo.com/deferreds-en-masse/  译者: Cheng Luo 你可以从”第一部分 Twist理论基础“开始阅读:也可以从”Twisted 入 ...

  7. 装linux双系统

    一般的电脑都是一个盘的,只要分个区给linux就行了,好装.大概可以看看这篇:http://jingyan.baidu.com/article/c275f6bacc3326e33c756743.htm ...

  8. RHCE7 学习里程-1.配置IP,DNS

    一.安装系统完成 1.系统安装完成之后不同于 6 的 ifconfig 命令.7 使用ip add ,这个跟网络设备配置端口IP 有点类似. 使用  ip add  查看网卡编号 cd  /etc/s ...

  9. spring+mybatis之注解式事务管理初识(小实例)

    1.上一章,我们谈到了spring+mybatis声明式事务管理,我们在文章末尾提到,在实际项目中,用得更多的是注解式事务管理,这一章将学习一下注解式事务管理的有关知识.注解式事务管理只需要在上一节的 ...

  10. NHibernate注意事项

    1.检查映射文件是否正确 2.检查配置文件的“嵌入的资源”选项 3.检查Configuration是否加载了程序集