交互设计师最常用的界面原型设计工具

以前有淘宝和腾讯qq外包公司内部做高级交互设计师的朋友说他们在做很多新项目的时候,常常用的界面原型设计工具有axure,invision等。而界内大家都熟悉的是Axure,特点是多人协作。而说到做页面demo,交互流程图,系统角色图,产品概念图等等,更多人用的是Omnigraffle,视觉效果完美到爆。总而言之,这些原型设计工具各有千秋,为了不让大家盲目跟风,本文将会详细介绍交互设计师最常用、最好用的一些专业做界面界面设计原型图的工具。

轻巧型

-

低保真;无控件;iOS;少交互;免费。

Pop

非常火的一款原型软件,第一次满足了大家人人都是产品经理的感觉。

方法:拍照--添加触控区--转场方式--选择图片平台:全手机操作

Tapcase

基本和pop一样,就是软件本身的UI更ios7一点,其他都一样,也是导入图片,加热区就好了。缺点也是一样的。

总结:轻巧型的就是适合简单软件且是早期,在手机上稍微复杂一点的就痛不欲生了。但问题是,如果简单到这么轻松了,那真的还需要用软件模拟吗?真的在纸上画更轻松吧。点击这种交互也不需要模拟了吧。

专业型

高保真度;自带控件;Mac+iOS;全交互;收费+免费

UIDesigner+UIDPlayer

方法:windows电脑安装UIDesigner,使用现成控件进行可视化搭建,调试后通过网盘等方式发到iOS设备,用UIDPlayer打开即可。

平台:只支持Win+iOS。可能也是优点,仅有的专门支持Win平台的原型软件。

缺点:吹毛求疵吧,逼格不高。

Briefs+Briefscase

这是我最近发现非常好的一款软件,好在对交互的支持上,如果调整细腻一点,几乎可以以假乱真。我是用它在UI定稿的情况下,提前当完成品测试交互体验的。当然也自带控件,用于原型设计。

还有三种模式,场景模式(SceneView)和细节模式(DetailsView)分别负责交互设计和UI设计两个部分,在设计完成后可以在第三个模式(Overview)查看整个APP的架构。

方法:在场景模式中,添加Actors(按钮,文本段落,文本热点)和Actions(触发动作),可以设置界面跳转时的TRANSITION效果,声效,延时,Retina空间等交互体验辅助特效。然后在iOS设备上安装Briefscase,通过Dropbox同步后使用。

缺点:贵。1298元,感受一下。标注起来还是不太趁手。通过dropbox同步有点慢,又没办法加快,只能生等。可以先试用一下,觉得好再入手吧。

Blueprint+viewer

我最早用的原型软件,现在制作出的原型已经出现在AppStore里拉。SakuraDay。当时用免费的功能(2个项目,无法导入dropbox图片,无自定义控件)就做出来了。后来接手公司大项目,专门买了完整版128元。但是注意,这是用iPad做,iPhone或者iPad看,没有电脑版的。我当时就是为了地铁上可以用,是优点也是缺点。

方法:基本都一样,就是在iPad上操作。触控不那么精确,但是操作体验很好,完整版的自定义库按钮很多很丰富。

平台:iPad+iOS

总结:专业软件还有很多,各有千秋,这两个是最快支持iOS7的,说明他们很重视产品保证更新。但是价格确实也是不菲,优缺点很明显,不符合国人习惯。腾讯那个整体是很不错了,除非你和我一样只用mac。

HTML型

中保真度;自带控件;全平台;需联网;少交互;收费+免费

Flinto

在Flinto中快速制作iOS原型我是通过下面提到的IconStricker发现的这个网站,试用了一下发现,它的特点是快捷的热区和转场操作,但是完全不带控件,也就是网页版的pop。需要你自己准备好图片,不管是UI还是UE,这里只负责交互。最大的亮点就是支持滚动,前面提到的那些软件,都需要通过转场实现长图滚动,这个可以原生支持。

方法:传图,热区,转场。看起来操作很简单。

平台:全平台。

缺点:30天免费期,按月收费。不支持控件。需要浏览器支持。

Fluidui

极简风格的FluidUI快速原型图工具最受推崇的网页版原型网站。控件从iOS到Android到WP。也是可以免费一个项目少量屏幕,然后按月收费。

方法:添加控件,热区,转场。

缺点:我用网页版的还是感觉有点迟缓,不痛快。胜在控件实在很全,这个是很多桌面软件都不支持的。如果针对安卓或者WP,实在没什么更好的选择了。

超大型

高保真度;可拓展控件;自定义库;适配;少交互;收费。

Axure

绕不开的巨人,就像图片界的PS,文字界的Word。它最大的特点就是别人都用它(虽然大多是盗版),我之前也存了显出不同逼格的心试了前面那么多软件,最后绕了一大圈还是回到了它的怀抱。回来的原因主要有三大家都在用。这个没办法,沟通,传输,修改都方便,PC+mac都可以看。你自己逼格到了,人家都感受不了有什么用呢。确实强大,熟练使用库和自定义控件后,效率大幅提升,远胜专业型。生成的HTML页面自带左侧目录边栏。是的,这就是我弃用OmniGraffle的主要原因。方法:不再赘述了,总之要用好自定义控件,这个会让效率成倍提升。缺点:生成的原型在移动端很难用。是有方法的,其实也不错了,但是我还是懒得费心研究。之所以用这个就是为了给开发和写文档,很多标注和逻辑流程,没必要做出交互。所以不考虑用它做交互,你真都做成交互了,难道还要工程师挨个点开才能看到逻辑?

OmniGraffle

为了捍卫mac的逼格,我用了几天就放弃了。不可否认,OG在调整控件时的流畅稳健,草图的美观(前提是你用英文)等方面,能让你享受整个制作过程,这是很少见的。但是我一直搞不懂画布层共享层等等的关系,用起来失误频繁,而且,生成的html没有目录啊,文档可读性差。

方法:不再赘述。

缺点:除了前面所说,仅支持mac,生成的交互原型更难用到手机上。

总结:是的,这两个软件不光是用来做移动交互原型的,他们的强大体现在非常多的领域,但是针对移动交互原型而言,都不适合。A胜在文档和大家都用,所以在个方面就屈从了吧。

Mockplus

支持一键拖拽

简单直观-与其他原型设计工具不一样,Mockplus采用了直观的拖拽方式来实现页面交互。红色的线指哪里连哪里。

JustinMind

支持拖拽

简单-与Mockplus类似,Justinmind也可以通过拖拽的方式实现页面跳转。不同的是,需要拖动整个组件到项目树上。由于没有连接线,不够直观,也不容易看清。

辅助型

特定功能(动画;图标;投影)

QuartzComposer

就是专门用来制作交互动画原型的产品,免费,但是需要苹果开发者账号,学习曲线非常高,但是可以制作非常精美的强交互动画。FacebookPaper的动画原型制作工具Origami及实现代码Pop

Liveview

PSplay等都可以快速把电脑上的内容投影到手机上。但是唯独liveview可以支持交互。打开交互模式后,电脑端可以接受手机的点击和滑动手势。非常强大。

IconStricker

专门用来测试icon的网站,出自Flinto。快速在主屏查看图标。轻量级图标测试工具ICONSTRIKE:快速主屏查看

小结

以上介绍了很多高级交互设计师在做原型图时常用和都觉得好用的原型设计工具软件。每款工具的特点,优点及缺点也都详细介绍了。亲们可根据自己的能力水平、喜好以及项目需要来选择吧。曾有设计师这样说:追求细节交互的话用AxureRP,追求简约草稿的话BalsamiqMockups,强烈推荐BalsamiqMockups,在拍方案阶段快速出草稿全靠它了。不妨你也试试!

THE END
1.用户体验至上:9款软件界面设计工具分享软件设计工具即时设计——可实时在线编辑的专业设计工具 https://ad.js.design/online/ui/?source=csdn&plan=xy805即时设计作为一款专业的在线合作UI设计软件,可以实现视觉效果、互动效果、体验效果的一站式成型,为您的目标用户创造流畅的体验。 轻松绘制原型:借助即时设计社区设计资源和原型模板,开始敏捷高效的工作。与产品经理一https://blog.csdn.net/2301_79599164/article/details/140926262
2.10款强大的APP设计工具大汇总,2025年最新生态系统优势:各软件之间无缝衔接,工作流程更加顺畅。 6、Affinity Designer:专业的矢量图形工具 Affinity Designer 是一款跨平台的矢量 APP 设计工具,以流畅的操作体验和专业的功能而闻名。它的功能十分丰富,其智能捕捉和流畅的文字编辑等特点,使其成为备受好评的 APP 界面设计工具。 https://js.design/special/article/10-app-design-tools.html
3.6款交互设计用的软件,设计行业佼佼者!Pixso是一个基于Web的界面设计工具,这款交互设计用的软件从推出以来,它快速地在设计师社区中获得了大量用户和良好的口碑。Pixso提供了一种无缝的设计体验,让设计师可以在同一平台上完成从草图到原型的所有工作。这意味着你可以避免在不同工具之间跳转,从而提高工作效率。 https://pixso.cn/designskills/software-for-interaction-design/
4.MasterGo我们知道 Sketch 和Figma 都是国际流行的设计工具,但 Sketch 仅有 Mac 版,Figma 也因美国制裁禁止大疆使用的事件闹得沸沸扬扬。加上定价都很高,使得这两者都难以适合国人。 MasterGo 是一款能替代 Sketch、Figma、AdobeXD 甚至是 PS 的国产免费 UI / UX 矢量设计工具!它提供了产品界面设计、交互原型制作、网页/https://www.iplaysoft.com/mastergo.html
5.十大必备界面设计工具,让你的设计更出彩!2.UIDesigner软件界面设计 2.5.5 腾讯CDC设计研发的界面原型设计工具,专为交互、视觉、用研设计师打造。拥有强大模板和预制功能,快速搭建高保真原型。实现设计师、产品经理、程序开发工程师间的快速沟通,减少工作内耗。 UIDesigner软件界面设计 2.5.5 官方 https://app.zol.com.cn/jiqiao/69907.html
6.全面解读2020最值得上手的界面设计工具:Figma优设网界面设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。 2. 历史追溯 在界面设计领域,设计工具一直以惊人的速度演化,竞争愈演愈烈。从曾经的PS一家独大,到近年Sketch新晋王者,再到当下的各类新工具百家齐放。 2010年前,界面设计师普遍使用的是Adobe Photoshop(简称PS),那时界面设计还在起步阶段。PS的定位是https://www.uisdc.com/comprehensive-interpretation-of-figma/
7.《界面设计》复习资料19.Sketch自带根据官方规范设计的IOS和Material Design组件库。20.Sketch专门为网页、移动端设计提供优化和支持。21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方https://www.wjx.cn/xz/260641939.aspx
8.用户界面设计工具腾讯云开发者社区用户界面设计工具是一种软件工具,用于设计和构建用户界面。它们可以帮助开发人员快速创建和测试各种类型的界面,从简单的表单到复杂的交互式应用程序。用户界面设计工具可以帮助开发人员节省时间和精力,提高工作效https://cloud.tencent.com/developer/information/%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1%E5%B7%A5%E5%85%B7-salon
9.axure是什么软件详细介绍axure原型工具Axure RP是Axure软件的全称,二者实际上是同一款软件,Axure RP中的“RP”代表“Rapid Prototyping”(快速原型)。 Figma和Axure的区别是什么? Figma是一款基于云端的UI设计工具,支持实时协作,适合UI设计和界面设计。Axure则侧重于原型设计和交互逻辑,适合需要复杂交互和逻辑展示的项目。两者定位不同,可根据项目需求选择。https://www.bnocode.com/article/what-is-axure-soft.html
10.基于MatlabGUI的模拟带通滤波器的设计AET也有许多公司开发了相关的滤波器设计软件,如 AnsoftDesigner,Filterlab等,但是它们大多数使用起来不容易上手,而且价格比较昂贵。Matlab中的图形界面编程环境GUIDE为用户开发软件界面提供了强有力的工具。在图形界面编程环境GUIDE下,设计好滤波器的设计工具界面后,对界面上各个控件的回调函数进行编写就能设计出交互式滤波器的http://www.chinaaet.com/article/60501
11.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
12.产品经理工具之软件篇1.Balsamiq Mockups(适用于快速草图原型设计) Balsamiq Mockups是一种软件工程中快速原型的建立软件,可以做为与用户交互的一个界面草图,它的优势就在于“草图”原型,这是除了纸笔之外最方便的工具了。 当前版本2.0:去这里下载 2.AxureRP(适用于复杂交互的原型设计) https://www.51cto.com/article/345797.html
13.在线设计协作软件,Web/app界面设计工具,免费云端字体MasterGo 是一款专业智能的 UI/UX 设计工具和原型播放,支持专业矢量编辑,智能辅助功能,团队在线协作,设计实时交付,一站式完成高保真产品设计。https://mastergo.com/design
14.交互流程图用什么软件,产品经理必备工具!产品经理在进行产品设计等工作时,会使用交互流程图来提高团队效率。这种流程图适用于传达方案、评审目标等需要团队协作的场景,视觉设计师、产品开发等工作团队只需看图便能迅速理解图示要义,极大地节省了理解时间,有效提高沟通效率。https://boardmix.cn/article/productflowchart/
15.Axure怎么设计网页的登陆页面?其他工具软件教程Axure中想要设计一个网页的登陆界面,输入用户名密码,该怎么设置呢?下面我们就来看看详细的教程,需要的朋友可以参考下 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 Axure是一款功能强大的交互设计软件,作为产品小白入门时的必学软件,从做一个登录界面开始展开https://www.jb51.net/softjc/525276.html
16.即时原型:快速原型设计与团队协作平台交互原型工具新媒派即时原型(原名xiaopiu)是一款产品原型设计工具和团队实时协作平台。它作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。你可以使用它制作手机应用、Web 网站页面、桌面应用软件的原型,拥有海量原型交互模板资源素材,而且无需下载,可在线使https://pidoutv.com/sites/8136.html
17.分享5个实用Web界面设计工具附开发案例控件新闻推荐5个非常实用的Web界面设计工具,介绍后附有开发案例,有些需下载安装,推荐都试用体验一下。https://www.evget.com/article/2015/11/17/23005.html
18.科学网—常用地质软件及简介三维实时油气地质综合解释软件,是集数据管理、地质分析、地质绘图和地层构建于一体的三维交互式油藏地质综合研究工具。Recon的设计目标就是从根本上建立一个真正三维的、新一代的地质解释工具,把最重要的几个地质解释工作流程合到一个应用软件中。Recon把地质解释与成图功能结合成一个整体,创新点在于它在传统二维测井对https://blog.sciencenet.cn/blog-439966-576189.html