原型工具中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. 1102 Invert a Binary Tree

    题意:给定一个二叉树,要求输出翻转后的二叉树的层序序列和中序序列. 思路:不用真的翻转,只需要在输出时先访问右结点再访问左结点即可. 代码: #include <cstdio> #incl ...

  2. Docker for windows 7 - 加载 docker images

    背景 由于之前一直是在 Linux 上面跑,所以对于docker for windows 部分不是很熟. 由于我们的合作伙伴需要在windows 上面跑我们的docker image, 所以在自己的w ...

  3. python学习(二十) Python 中的比较:is 与 ==

    Python 中的比较:is 与 == 在 Python 中会用到对象之间比较,可以用 ==,也可以用 is .但是它们的区别是什么呢? is 比较的是两个实例对象是不是完全相同,它们是不是同一个对象 ...

  4. 第一个PyQt5窗口

    1.使用pycharm,生成UI文件 右键->External Tools->QtDesigner 选择Main Window创建一个窗体,从右边拖动组件到窗体上,保存路径到自己的工程目录 ...

  5. WARN deprecation:&L - HHH90000012: Recognized obsolete hibernate namespace http://hibernate.sourceforge.net/hibernate-configuration. Use namespace http://www.hibernate.org/dtd/hibernate-configuration

    WARN deprecation:&L - HHH90000012: Recognized obsolete hibernate namespace http://hibernate.sour ...

  6. 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

    一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...

  7. 转-----FPGA工程师:持守梦想or屈于现实

     昨晚无意间看到一段新闻频道对最近炒得火热的“史上最年轻教授”的专访,倒是他的一位同学对于梦想的“现实版”解说颇有些耐人寻味.大体意思是说“拼了老命考上一所梦寐以求的大学,父母辛辛苦苦交了学费,我们却 ...

  8. 安装Oracle 10g RAC是否需要安装HACMP

    实际上无论在哪个操作系统(AIX,HP-UX,Solaris,Linux)上安装Oracle10g RAC都不再需要Vendor Clusterware(IBM的HACMP,HP的Service Gu ...

  9. Defining Python Source Code Encodings

    Defining the Encoding Python will default to ASCII as standard encoding if no other encoding hints a ...

  10. mac下mysql5.7.18修改root密码

    参考:http://blog.csdn.net/lijilong_/article/details/70991809 第一步:苹果->系统偏好设置->最下面点MySQL,关闭mysql服务 ...