订阅摹客文章

免费获取优质的设计资讯!

文章分类
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 设计和原型工具 > 前20名用户界面和用户体验设计师原型开发工具

前20名用户界面和用户体验设计师原型开发工具

Linda
2017-11-30
23673

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


探索最佳的原型工具以提高工作效率,为自己的原型提供优势。

如今已有很多工具可以用于设计软件产品,从设计到开发再到网页创建,所使用的工具都有所不同。

原型设计工具将帮助你更快更有效地设计产品,展示你的想法,也可改变你的设计方式。

如今的用户都倾向于交互原型,这些原型能更好的展示交互和设计的内涵。

原型脱颖而出的地方就是交互和分享能力,能在不同页面上快速工作。一个真正的赢家是拥有与用户或团队分享的能力的。

接下来我将在文中向你介绍原型设计工具,它将帮助您更快地设计和交互。

设计


Sketch

Sketch是一款基于矢量的设计工具,可快速直观地进行界面设计。

基于Photoshop与Illustrator的结合,这是一款能使用无限制的画板的轻量级软件。

此前行业里的专家已经撰写了数百篇关于其各种可能性的文章,因而我不会列出它所有的功能。

就个人而言,我最喜欢的功能之一是符号嵌套。

有了这个功能,可以预先设计按钮、小工具甚至复杂的导航机制等元素,然后复制其设计和形状在其他画板上。

另一个刚出来的功能是Launchpad for Sketch插件的“导出代码”,它能在几秒钟内将设计格式化为代码,让你拥有前所未有的发展速度。

兼容性:仅适用于Mac用户。

价格:99美元即可购买

Zeplin

当与插件一起使用时,Sketch就非常好用,这也是插件是最有用的地方之一。它可以帮助开发人员轻松的检查界面的大小,字体,颜色和尺寸。

另外,Zeplin允许从画板直接下载一个元素到另一个元素。

它准备了CSS样式的接口文件,从而为前端开发人员省去了大量的工作。

兼容性:仅适用于Mac用户。

价格:1个项目免费(3个项目17美元/月,12个项目26美元/月)

FIGMA


Figma是一个相对较新的工具,有着与Sketch几乎相同的界面。

这个创新的工具,主要是因为它允许一个设计团队实时协作并给出设计评论。

没错,Figma的画布能以协作的方式完成设计过程。

这就产生了一个非常有趣的现象,产品团队,设计团队和开发团队都可以参与到这个过程中。

整个团队通过Slack群组保持联系,这个过程将比以前更高效。

兼容性:Mac/ Windows用户。

价格: 免费3个项目(无限项目12 美元/月)

线框


MockFlow

MockFlow是一款面向创意设计师和可用性工程师的在线UX套件,它能够轻松的创建线框和纸张原型。

兼容性:Mac/ Windows用户。

价格 - 免费1个项目(无限项目14美元/月,团队29美元/月)

Balsamiq



Balsamiq是一个绘制用户界面、网站、桌面和手机应用程序的图形工具。它可以很容易地拖拽和定位元素。

Balsamiq能模拟并写出当用户在使用软件时的体验。

每一个成功的设计都是从笔和纸开始的,而Balsamiq可以改变这一点。

兼容性:Mac/ Windows用户。

定价 :89美元

设计和开发


Webflow

这是由2个不了解代码的兄弟在2013年推出来帮助设计师创建网站的工具。

Webflow能让设计师在相对较短的时间内创建网站,并使用与Photoshop相似的界面。

虽然不需要知道使用此工具的代码,但可以根据客户的需要导出和更改网站的html / css标签。

您可以在其中找到与Google字体、高质量cms、代码访问、存储和导出设计代码的结合体。

需要指出的是,webflow对于简单的静态网站来说非常有用,但当涉及到复杂的动态网站,就需要尝试新的解决方案。

兼容性:Mac/ Windows用户。

价格:免费2个项目(10个项目16美元/月,无限项目35个/月)

Flinto

这是我个人最喜欢的原型制作工具之一,它能与sketch完美的结合。

Flinto能让设计人员创建手机、桌面或任何其他Web应用程序的交互式原型。

使用Flinto,我们可以从sketch导出的图层上创建复杂的微交互。

兼容性:Mac/ Windows用户。

价格:Flinto软件: 99 美元即可购买

Flinto精简版:免费(无限制项目20美元/月)

Framer

使用Framer时必须用CoffeeScript进行编码。

但我不得不说,当你掌握它的时候,可以让你有无限的选择。

你基本上可以在上面做所有可能的事情,例如使用实时数据,或在100天内创建100个不同的项目。

它内部有自己的设计工具,而且还能与Sketch完美结合。

如果对Framer不是很有熟练的话,我还是建议你尝试一下,因为其学习成本并不高。

兼容性:仅适用于mac用户。

价格:免费(15美元 /月,159 $美元/年)

RapidUI

这个新平台无需编写代码就可以将Photoshop文件转换为实时网站。

拖放你的PSD文件到它的仪表板,在几分钟内就能将psd转换成HTML和CSS。

在平台内,设计能得到充分交互——只需点击几下鼠标,即可将滑块,视频,地图,按钮和其他任何您想要的内容带入其中。

另外,代码可以完全共享并与设计同步,有需要的话还能与程序员协作。

兼容性:Mac/ Windows用户。

价格:免费(现在在测试)

Hype3

通过Hype,可以制作动画,就好像通过关键词创建动画的After Effects一样。该工具会记录你创建的动画并自动将其导出到HTML5。

这个工具的特别之处在于,你不需要了解代码,它就可以用于各种设备,如手机,桌面端和平板电脑。

兼容性:仅适用于mac用户。

价格:免费(标准版为49美元,完整版为99 美元)

Principle

你可以通过Principle轻松设计交互式用户界面,无论您是多屏幕应用程序的设计流程还是新的交互和动画设计,Principle都能让您设计出令人惊叹的外观和体验。

兼容性:仅适用于Mac用户。

价格:免费(买129 美元)

Adobe XD


Adobe以Photoshop和Illustrator而闻名,但去年Adobe推出了新的UX原型制作工具Adobe Experience Design CC(以前称为Project Comet)。

Adobe XD专注于两方面:“设计”和“原型”,“设计”中包含简单的矢量和文本工具,用于设计。“原型”用于预览和共享设计。借助Adobe,也可以在PC端构建高保真原型。

兼容性:Mac/ Windows用户。

价格:免费(现在在测试)

Origami


接下来是Facebook设计团队为我们带来的工具,它在构建数字产品时可探索和检验你的创意,这是设计中有现代接口的原型工具。

兼容性:仅适用于Mac用户。

价格:免费,需要一个Apple开发者帐户,但这也是免费的。

Invision

在所有流行的原型制作工具中,Invision都可以无缝联结到Sketch中。

这是一个Webby产品,它可以让设计人员自由地设计、审查、测试、与开发人员和其他团队成员分享结果。

这个产品最突出的优势就是它的项目协作功能,它允许所有用户提供反馈,记录并看到产品的实时变化。

InVision用于构建手机原型时,在模拟数字产品的多功能性及其在移动领域的应用中提供完整的服务。

兼容性:Mac/ Windows用户。

价格:一个项目免费(3个项目15美元/月,个人无限项目25美元/月,团队 99美元/月)

Mockplus

设计模式:Mockplus专注于更快更简单的设计理念,通过简单拖拽即可创建项目原型。其包含200多个组件和3000多个矢量图素材,完全可视化的交互设置。

项目演示和模板:可直接导入项目和模板例子,完成项目初期的原型设计,省时省力,拥有漂亮的页面流程图和快速反映设计思路和项目结构的思维导图,高达8种演示方式,方便快捷的即可展示你的创意和想法。

Sketch文档导入:支持将Sketch的设计文档导出为Mockplus的mp项目文件。导出后,可以在Mockplus中打开它。更进一步地,还可以直接将sketch的文档发布为Mockplus的团队项目,支持多人协作处理。甚至,你可以直接往团队项目中插入一个新Sketch页面。

团队协作:支持团队项目实时审阅和在线批注,能快速提高团队的工作效率,节省成员间的沟通成本。

此外,Mockplus不仅拥有格子功能,即拉动鼠标便可快速复制重复布局并自由编辑,图片与文字能批量填充,还支持全平台的原型设计,简直是追求效率的设计者的最佳选择。

兼容性:Mac/ Windows用户。

价格:免费(专业版199人民币/年,特惠版399人民币/3年,终身版699人民币)

Axure RP

Axure RP在用户体验设计领域是很有名的。毫无疑问,它是功能最全面的原型工具之一。

网络和用户体验设计师可用它来制作点击线框、用户流和站点地图以及交互式原型。

既能添加交互,也能创建母版页并使用Widget库中的现成组件。

如果你是专业设计师,可以使用Axure RP构建更复杂的交互式原型,但这需要一些时间来掌握编程的基本知识。

但这款工具不推荐用于手机原型设计,因为在手机端的用户体验不太好而且设计起来是很耗时的。

兼容性:Mac/ Windows用户。

价格:免费(1个用户29美元/月,团队49美元/月)

Proto.io

Proto.io在网络应用程序的设计上是非常强大的,有着非常多的功能。但是由于所有交互都是通过拖拽来实现的,点击按钮并从列表中选择,因而有时候会比较困难找到你所需要的设置。

这虽然是一个更先进的用于添加复杂的微交互的原型工具,但它的学习成本却很低。

兼容性:Mac/ Windows用户。

价格:免费试用(5个项目24 美元/月,10个项目40美元 / 月,15个项目80 美元/月, 30个项目160美元/月)

Atomic

这是一个可以解决产品构建过程中复杂问题的工具。

Atomic的愿景是,从设计的开始到结束,整个原型都在其平台上进行。

但通常情况是,设计师通过矢量工具如草图或插画设计,然后将它们导出。

值得注意的是Atomic的界面和Sketch的界面在建立列,画板,分层,快捷方式等方面有着异曲同工之妙。

如果你使用过Sketch,你可能会产生在使用sketch的假象。

兼容性:Mac/ Windows用户。

价格:1个项目免费(无限项目19美元/月,团队39美元/月,公司59美元/月)

UXPin


UXPin会让设计者在设计过程中的每个阶段都平滑过渡,纸质草图、线框、模型、原型和你可以想到的任何独特的组合,全部都在同一个文档中。

例如,您可以在几分钟内构建一个快速交互式线框,并能马上检验您的想法。然后,您可以在同一个文件上生成合并来自第一个测试的结果。

在Sketch或Photoshop中制作像素完美的样机后,直接将其上传到同一个文档中,以相同的原始线框布局即可创建高保真原型。

兼容性:Mac/ Windows用户。

价格:免费(25个项目29美元/月,50个项目49美元/月)

ProtoPie



这是一个相对较新且易于学习的工具,可以在创建产品原型时生成复杂的微交互,它能与Photoshop或Sketch同步。

你可以通过扫描条形码来测试原型的功能。

兼容性:Mac/ Windows用户。

价格:免费试用(购买99美元)

作者:Yuval Keshtcher

地址:https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9


Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。




扫描二维码,关注 “摹客” 微信公众号。

上一篇
更好的移动端下拉列表替代方案

Tangerine   12/01

十个改进用户测试的小窍门

Tangerine   11/30

下一篇
咨询客服

帮助群:651432826

服务邮箱:service@jongde.com