原型工具中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. C++11标准库中cstdio头文件新增的5个格式化I/O函数学习

    刚开始学网络编程,稍微扩展书上的简单C/S程序时,发现以前太忽略标准I/O这一块,查官网发现C++11新增了几个格式化I/O函数. snprintf    将格式化输出写入到有大小限制的缓存中 vfs ...

  2. 推动FPGA发展箭在弦上,国内厂商须走差异化之路

    7月25日,由中国电子报与深圳投资推广署共同举办的“第六届(2018)中国FPGA产业发展论坛”在深圳召开. 作为四大通用集成电路芯片之一,FPGA(现场可编程门阵列)的重要性与CPU.存储器.DSP ...

  3. 谈谈GPU与FPGA的一些看法

    从几个方面来介绍一下GPU和FPGA. 从峰值性能来说,GPU(10Tflops)远远高于FPGA(<1TFlops).GPU上面成千上万个core同时跑在GHz的频率上还是非常壮观的,最新的G ...

  4. nginx web服务优化

    nginx基本安全优化 1. 调整参数隐藏nginx软件版本号信息 软件的漏洞和版本有关,我们应尽量隐藏或消除web服务对访问用户显示各类敏感信息(例如web软件名称及版本号等信息),这样恶意的用户就 ...

  5. IIS应用程序池频繁停止,任务管理器发现有多个w3wp.exe进程

    网站其中的一个应用服务器最近频繁出现IIS应用程序池停止的问题,通过任务管理器查看发现有6个w3wp.exe进程,一般一个应用程序池只占有一个w3wp.exe进程,为什么会出现多个呢,通过查看其它服务 ...

  6. 1_python小程序之实现用户的注册登陆验证功能

    python小程序之实现用户的注册登陆验证功能 程序扼要简述:  一.程序流程:1.程序开始2.判断本地文件/数据库是否已存在用户信息,存在则跳转到登陆,否则跳转到注册,注册成功后后跳转到登陆3.判断 ...

  7. 使用国内源部署ceph

    由于网络方面的原因,Ceph的部署经常受到干扰,通常为了加速部署,基本上大家都是将Ceph的源同步到本地进行安装.根据Ceph中国社区的统计,当前已经有国内的网站定期将Ceph安装源同步,极大的方便了 ...

  8. awk查看接口耗时情况

    +1:LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Ag ...

  9. PEM文件和private.key文件生成IIS服务器所需的pfx文件(配置SSL用)

    第一步:输入域名,点击"创建免费的SSL证书"按钮,如图 第二步:输入邮箱,点击创建,如图 创建成功后,需要进行dns验证,结果图如下: 第三步:在域名所在的云服务器上,添加域名解 ...

  10. leetcode384

    public class Solution { private int[] nums; private Random random; public Solution(int[] nums) { thi ...