原型工具中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. 学习 FPGA之前的基础知识

    在学习一门技术之前往往应该从它的编程语言入手,比如学习单片机时,往往从汇编或者C语言入门.所以不少开始接触FPGA的开发人员,往往是从VHDL或者Verilog开始入手学习的.但小编认为,若能先结合& ...

  2. android图片优化

    /1.不要将Button的背景设置为selector 如果是将Button的背景设置为selector,在初始化Button的时候会将正反选图片都加载在内存中,相当于一个按钮占用了两张相同大小图片所使 ...

  3. Java Array 方法和使用

    1.Arrays.toString():数组转字符串 格式:Arrays.toString(数组名) 将数组转化成字符串,此时输出的结果是字符串类型. import java.util.Arrays; ...

  4. Java 版本6下载大全

    Oracle 官方 JDK6 下载地址: 基本包含所有的JDK6版本. 需要登注册相应的账户登录到Oracle官网~ http://www.oracle.com/technetwork/java/ja ...

  5. Java复习——I/O与序列化

    File类 java.io.File只用于表示文件(目录)的信息(名称.大小等),不能用于文件内容的访问,我们可以通过通过给其构造函数传一个路径来构建以文件,传入的路径名有一个小问题,就是Window ...

  6. Java 中 wait, notify 和 notifyAll的正确使用 – 以生产者消费者模型为例

    如何使用Wait 尽管关于wait和notify的概念很基础,它们也都是Object类的函数,但用它们来写代码却并不简单.如果你在面试中让应聘者来手写代码,用wait和notify解决生产者消费者问题 ...

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

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

  8. oracle autotrace使用

    通过以下方法可以把Autotrace的权限授予Everyone, 如果你需要限制Autotrace权限,可以把对public的授权改为对特定user的授权. D:\oracle\ora92>sq ...

  9. FastClick

    处理移动端click事件300毫秒延迟.FastClick 是一个简单,易于使用的js库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 1.为什么会延迟? 从点击屏 ...

  10. 关于网格比较工具metro使用的几点注意事项

    Metro作为一个非常好用的简化网格比较工具,在科研界几乎算是标准了.不过很多比较牛的作者会使用自己设计的一些比较算法,但是如果metro够用了也就不必那么麻烦了,毕竟Metro使用的方法还算是很成熟 ...