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

以前有淘宝和腾讯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.10个常用的界面原型设计工具,新手小白看!界面原型设计是现代设计师必备的技能之一。在设计数字产品或应用程序时,界面原型是将概念转化为具体可交互界面的重要步骤。对于新手小白来说,选择一款易于上手且功能强大的界面原型设计工具至关重要。本文将介绍10个常用的界面原型设计工具,帮助新手们找到适合自己的工具,释放创意的无限可能。 https://pixso.cn/designskills/10-prototyping-tools/
2.2024年界面原型设计软件TOP10排行榜!随着数字化时代的发展,界面原型设计在软件开发过程中扮演着至关重要的角色,一个优秀的界面原型设计软件不仅能够提高产品开发效率,还能够增强用户体验,因此本排行榜旨在评估和推荐在当前市场上表现突出的界面原型设计软件,帮助用户快速选择适合他们需求的工具。 1、即时设计https://js.design/special/article/interface-prototyping-software.html
3.打造完美产品原型设计:9个不可错过的设计工具推荐!即时设计是一款具有白板、原型、设计、交付、管理的在线合作产品原型图软件,涵盖了产品设计的全过程,是新一代产品设计合作的一体化工具。即时设计注重简洁的界面设计和强大的互动功能,支持导入Axure原型文件,建立低保真、高保真原型,对产品设计方案进行具体演示,帮助产品经理、设计师、开发者共同探索分析用户的核心需求,是https://blog.csdn.net/2301_79599164/article/details/140374576
4.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
5.常用的快速Web原型图设计工具有哪些?无论是桌面软件、Web网站还是移动APP界面,原型设计都是产品设计流程中非常重要的一环,原型设计在一定程度上是为了说明用户将如何与产品进行交互,用来展现更初的产品设想,起到直观展示和有效沟通的作用。那么有哪些常用的WEB原型设计工具呢? Web原型图设计工具一览 https://www.adinnet.cn/bloginfo/2018_03/blog_3497.html
6.?原型图用什么软件做?原型设计工具有哪些原型设计工具有哪些 Axure RP:Axure RP是一个功能强大的交互式原型设计工具,可用于创建高保真的原型,支持交互动作、页面链接和条件逻辑等。 Sketch:Sketch是一款流行的矢量设计工具,也可用于创建界面原型。它提供丰富的插件和资源,适用于快速设计和交互原型制作。 https://www.xianjichina.com/special/detail_547152.html
7.原型设计工具axureapp原型设计工具有哪些原型设计工具大全为大家收集整理许多软件原型设计工具,如axure,Justinmind,mockplus等,均为中文汉化破解版,可以帮助玩家快速便捷的制作软件等模型界面,适合于PC端上的软件以及移动端的app应用界面设计.https://www.qqtn.com/qqkey/yxsjgj/
8.《界面设计》复习资料19.Sketch自带根据官方规范设计的IOS和Material Design组件库。20.Sketch专门为网页、移动端设计提供优化和支持。21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方https://www.wjx.cn/xz/260641939.aspx
9.常用的软件设计开发工具有哪些?软件设计工具是指专门用于支持软件设计过程的应用程序或工具,它可以帮助软件开发人员在构造可行软件设计方案时减轻工作负担,并帮助他们提高软件质量。主要的设计工具类型包括建模工具,原型设计工具,图形设计工具,框架设计工具,模式设计工具,组件设计工具,文档设计工具和图形用户界面(GUI)设计工具等。 http://www.apppark.cn/t-42514.html
10.原型设计工具有哪些?原型设计工具排名免费原型工具推荐原型设计工具哪个最好用?像axure、mockplus、sketch、墨刀等都是常用的原型设计软件,可以用于画原型图、web网页原型设计等,是交互设计师和产品经理必备工具。绿色资源网还提供了手机版原型设计工具哦!http://www.downcc.com/k/yxsjgj/
11.软件原型设计工具有哪些适用人群:擅长于使用Web浏览器的产品经理或设计师。6.Balsamiq Mockups 学习曲线:较高 Balsamiq Mockups是一款软件工程中快速产品原型工具,可以作为与用户交互的一个界面草图,一旦客户认可也可以作为美工开发HTML的原型使用,特别是在web原型图设计领域有不错的影响力。使用Balsamiq Mockups画出的原型图都是https://zhidao.baidu.com/question/2207707447064363228.html
12.十大必备界面设计工具,让你的设计更出彩!下面给大家推荐几款好用的免费的界面设计软件,有需要的小伙伴们来了解一下。 1.Axure RP Pro 9.0 Axure RP是一款专业的快速原型设计工具,由美国Axure Software Solution公司开发。它能够帮助用户创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。相比其他创建静态原型的工具,Axure RP更加快速和高效。 在https://app.zol.com.cn/jiqiao/69907.html
13.十大界面原型与布局工具人人都是产品经理在设计网页或程序之前,需要把界面给“画”出来成为原型设计,就像动画片要画分镜头、手稿一样。原型设计能起到有效沟通的作用,漂亮,直观的原型图更是让人赏心悦目。有了这些工具,原型和线框变得更加简单和方便,即使是初学者也可设计自己的网站或者应用,赶紧尝鲜吧。 https://www.woshipm.com/rp/42740.html
14.常用的原型设计工具有哪些?常用的原型设计工具有哪些? 工欲善其事必先利其器,作为一名产品经理或者设计师,原型工具是必备的工具,分享8款常用的原型设计工具:Axure、百度脑图、创客贴、墨刀、摹客、Invision、ProcessOn、sketch。 1、Axure Axure是一款专业设计师不容错过的免费原型设计工具,设计师可以用它快速创建应用软件或Web线框图、流程图https://www.chuangkit.com/blog/pingmiansheji342.html
15.Web开发人员不要错过的60款用户界面设计工具(上)控件新闻Web开发大师们,干货再次来袭!小编为大家盘点了60款功能丰富类型各异的用户界面设计工具,本系列将以上中下三篇分别为大家呈现。今天盘点的这20款工具囊括了大量界面原型设计工具,有免费的在线原型工具,有iPhone/Android/Facebook应用原型设计工具,还有各种综合型的UI原型工具,应用尽有,绝对能满足你的日常工作需求。 https://www.evget.com/article/2014/3/20/20697.html
16.16款界面原型设计工具Axure RP 能让操作它的人快速准确的创建基于Web的网站流程图、原型页面、交互体验设计、标注详细开发说明,并导出Html原型或规格的Word开发文档。通过扩展还会支持更多 【免费】软件界面原型设计工具 UIDesigner UIDesigner,简称“UID”,是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能,能够快速的搭建https://www.douban.com/group/topic/88116554/
17.Sketch101.6破解版最佳Mac原型UI界面产品设计工具Sketch新增了深色模式,类似与macOS Mojave一样的黑色界面,同时升级了元素捕捉与对齐功能。Sketch仅支持macOS系统,没有Windows版本。是最好用的产品设计与界面设计工具,矢量绘图,支持web 移动端 App的产品设计与界面设计。功能非常强大而且易用,是产品经理和UI设计师必备的一款软件。https://www.macapp.so/sketch3/
18.神器一箩筐:创建高保真的移动Demo(工具篇)优设网这基本上算是整个Demo制作的精髓部分了,有了这部分的工作,你的静态页面将有如注入生命一样动起来!本节将从准备图片素材、添加跳转关系、更多的反馈三个方面来详细说说会用到工具和技巧。 2.4.1 准备图片素材 在高保真原型制作中,使用的就是视觉设计后的界面图片素材。所以要制作动态的Demo的话,需要Demo中涉及到的https://www.uisdc.com/fidelity-mobile-demo-tools
19.浅谈前端低代码开发,如何选择适合的前端低代码平台?前端低代码平台是一种强大的开发工具,可以帮助开发人员快速构建和部署应用程序。它提供了可视化的界面设计、数据集成、逻辑设计等关键功能,提高了开发效率和协作能力。随着技术的发展和需求的增加,前端低代码平台将在未来继续发挥重要作用。 常见问题解答 1. 前端低代码平台适合哪些企业? https://www.jiandaoyun.com/article/post/9063.html
20.2024年10款好用的原型设计工具推荐虽然Figma的专业版只需付费,但有一个免费的入门版,是快速使用其工具的理想选择。它最多允许两个编辑器和三个项目,并有无限制的云存储和30天的版本历史记录,是上手和运行的完美选择 Sketch Sketch是一款macOS上的原型设计工具,它是设计网站和应用最流行的工具之一,它也可以做原型设计,它是一个轻量级的工具,界面非常https://www.v1tx.com/post/best-prototyping-tools/
21.常用快速原型设计工具大比拼原型设计工具哪个好用除了上面我们提到的这些,现在还有很多很多相关的原型设计工具他们各有特点,大家可以选择自己习惯地使用,也欢迎在文章末尾分享您的意见。无论是桌面软件、Web网站还是移动APP界面,原型设计都是产品设计流程中非常重要的一环,原型设计在一定程度上是为了说明用户将如何与产品进行交互,用来展现最初的产品设想,起到直观展示和https://www.jb51.net/softjc/152695.html
22.9款原型设计工具与Sketch的强强组合,轻松构建交互原型!Sketch对于现代设计师而言,已经成了不可或缺的设计工具之一。各家原型设计工具也在悄悄的发生一些改变,迎合设计师们的需求,纷纷开发出了针对sketch原型的插件。既有传统的桌面端原型工具,也有基于云平台的工具。虽然没有任何一条标准规定你必须使用哪一个工具,然而如何能在众多的sketch+原型工具的组合中找到最适合自己https://cloud.tencent.com/developer/article/1387446
23.UI设计师必备的五款界面设计工具Mockplus是一款高效简单的app界面设计工具,产品经理圈子中比较流行的一款国产界面原型设计工具。软件提供了封装好的3000多个图标以及200多个组件,拖拽即可进行UI界面设计,学习成本低,无需代码参与,所以对于UI设计师来说是一个非常好的选择。如果一个UI设计师连基本的原型设计能力都没有,怎么和开发进行有效的沟通呢。 https://www.jianshu.com/p/df3eb95e4823
24.交互设计谁是最好用的原型绘制工具设计教程Photoshop作为设计师的看家技能,理论上可以通过它做出任何图形,但对于交互原型来说制作和改动成本略高,图层和组件的处理上比较死板,软件自身性能和模板库也很受挑战,容易过快进入细节讨论而忘记初衷,并非交互稿首选,当然也有设计师一开始就是朝着高保真 Demo 方向做的,用它最直观。Illustrator同胞兄弟 Illustrator 在矢量http://www.333cn.com/shejizixun/201803/43498_140513.html
25.亲测能用AdobeXDCC21原型设计工具v21.0.12中文破解版Adobe XD CC全名Adobe experience,是Adobe公司发布的原型设计工具。下载安装AdobeXD后,您将找到一组设计和原型设计网站和移动应用程序的核心功能,包括XD创新重复网格工具,加速设计元素的布局,以及可视化连接器和原型。该软件是Adobe的新创意工具,用于为移动和Web应用程序设计高质量的用户界面原型。该工具是专门为构建快速原https://www.yutu.cn/softhtml/showsoft_7456.html
26.2021年最好用的10款免费原型设计工具对产品经理或UI/UX设计师来说,一款好的原型设计工具至关重要。好的原型设计软件能够帮助你快速构建还原度高且信息架构清晰明了的原型图,还能极大减低工作中与同事的沟通成本,更高效地推进工作。 那么,一款好用且免费的原型设计工具有哪些呢?如何找到在匹配自己工作需求的原型设计工具呢?小编为大家总结了2021年最好用https://modao.cc/prototyping/prototyping-tools.html