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

以前有淘宝和腾讯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.UIDesigner首页文档和下载软件界面原型设计工具UIDesigner,简称 “UID”,是一款进行软件界面原型设计的工具。 它拥有强大的模板和预制功能,能够快速的搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗。 展开阅读全文 评论 点击加入讨论(6) Awesomehttps://www.oschina.net/p/uidesigner
2.UIDesigner(软件界面原型设计工具)下载UIDesignerUIDesigner(软件界面原型设计工具) v2.11系统其他 软件等级: 软件大小:29.98MB 支持语言:简体中文 授权方式:免费版 软件分类:系统软件/系统其他 官网链接: 更新时间:2024-09-11 07:34:01 运行环境:WinXP, Win7, win8 厂商: 关键字:移动应用原型设计原型设计 https://www.crsky.com/soft/318664.html
3.十大必备界面设计工具,让你的设计更出彩!软件分类:平面设计大小:17.01 MB时间:2019-10-25 软件介绍:腾讯CDC设计研发的软件界面原型设计工具,专为交互设计师、视觉设计师、用研设计师精心打造,它拥有强大的模 立即查看 3.炫彩界面库(DirectUI) 2.1中文版 炫彩界面库是一款功能丰富的桌面软件界面开发框架。它采用C语言开发,速度更快,并支持多种开发语言调用https://app.zol.com.cn/jiqiao/69907.html
4.推荐几款软件界面模型设计工具腾讯云开发者社区界面模型设计中很实用的一个工具GUI Design Studio,可以让界面示意图实现基本的交互,便于演示、交流。 GUI Design Studio提供的了大部分C/S、B/S组件的示意图,可组合使用,在一般软件界面模型设计阶段基本可以满足需要。 推荐需求、界面设计开发等界面原型相关人员使用。 https://cloud.tencent.com/developer/article/1341568
5.?原型图用什么软件做?原型设计工具有哪些UIDesigner,简称UID,是腾讯推出的软件界面原型设计工具。它具有强大的模板和预制功能,可以快速构建软件界面的高保真原型,实现设计师、产品经理和程序开发工程师之间的快速沟通,减少不必要的工作内耗。 缺点: 不稳定性:设置页面跳转效果后,继续编辑,部分已编辑的页面跳转效果无效,或变成其他跳转效果。 https://www.xianjichina.com/special/detail_547152.html
6.原型设计软件网站原型设计工具原型设计工具大全可以让用户快速创建应用软件,自由建立原型,还可以在线预览。 2.protopie 可以将自己建立的原型发送到手机上进行实验,体验多种转场方式。 3.墨刀 国产原型设计工具,界面全部中文,还可以将作品保存在云端。 4.UIDesigner 由腾讯开发的原型设计工具,内置超多模板,用户可以免费使用,还可以快速分享。 http://www.downyi.com/key/grlcrj/
7.界面原型设计工具怎么布局界面界面原型设计工具如何画界面原型图摘要:设计一款软件时,软件界面的设计是很重要的,一般设计初期会使用原型设计工具来进行界面原型设计,并绘制界面原型图。界面原型设计工具布局界面时,主要考虑界面区域的划分、功能区域的规划和作业区的分类;绘制界面原型图则先画好草图,然后通过原型设计工具绘制即可。下面一起来了解一下界面原型设计工具如何画界面原型图吧https://www.maigoo.com/goomai/265856.html
8.MasterGoMasterGo 是一款能替代 Sketch、Figma、AdobeXD 甚至是 PS 的国产免费 UI / UX 矢量设计工具!它提供了产品界面设计、交互原型制作、网页/APP开发设计等功能,且支持团队协作。软件简单易上手,并能搭建“设计系统”,实现设计组件一键复用、一处修改全局同步等功能…… 推荐:Eagle 设计素材收集整理神器 「Sketch / PShttps://www.iplaysoft.com/mastergo.html
9.常用的软件设计开发工具有哪些?软件设计工具是指专门用于支持软件设计过程的应用程序或工具,它可以帮助软件开发人员在构造可行软件设计方案时减轻工作负担,并帮助他们提高软件质量。主要的设计工具类型包括建模工具,原型设计工具,图形设计工具,框架设计工具,模式设计工具,组件设计工具,文档设计工具和图形用户界面(GUI)设计工具等。 http://www.apppark.cn/t-42514.html
10.最全无代码NoCode和低代码LowBildr构建交互式网站的强大方式。界面就像一个设计工具(例如Figma)而不是标准的网站建设 uibakery:使用其可视化构建器构建前端UI组件,并导出格式良好的Angular代 BubbleVisual Web app builder。空间中的领导者。您可以使用Zeroqode的模板开始或使用他们的如何构建教程 https://www.tanmer.com/blog/707
11.UI草图设计软件(界面示意图设计工具设计工具Balsamiq Mockup的特点主要包括: 1. **快速原型设计**:Balsamiq Mockup以其高效快捷的草图绘制功能著称,设计师可以迅速地把想法转化为可视化的界面设计,大大缩短了设计周期。 2. **手绘风格**:软件提供了大量的手绘风格元素,如按钮、文本框、图片框等,这种风格能快速传达设计概念,同时避免在早期阶段过于https://download.csdn.net/download/liuqiaoying_lqy/4856294
12.推荐5款优秀的网页原型设计工具,快速制作网页,高效创建网站,你也摹客RP(Mockplus RP)是一款高效易用的在线产品原型设计工具,它旨在提高产品开发团队的工作效率。摹客RP提供了丰富的设计模板、快捷的移动预览功能和简单易用的操作界面,适用于各类产品设计工作。该工具特别适合产品经理和设计师快速创建高质量的产品原型,并支持多人实时协作,使得团队成员可以同步编辑同一项目,提高设计效率https://www.uweb.net.cn/guanyuyouwang/youwangxueyuan/16882.html
13.线框原型图绘制工具BalsamiqWireframes4.7.2x64中文汉化版摘要:Balsamiq Wireframes 中文版是一种用于创建原型和线框图的软件工具。它被设计用来帮助用户快速绘制应用程序、网页和其他界面的草图。使用 Balsamiq Wireframes,您可以通过拖放预定义的元素和组件来创建简单而直观的界面,并添加注释和互动效果以传达设计意图。该软件的目标是在早期阶段实现快速迭代和… http://www.dayanzai.me/balsamiq-wireframes.html
14.原型设计工具axureapp原型设计工具有哪些原型设计工具大全为大家收集整理许多软件原型设计工具,如axure,Justinmind,mockplus等,均为中文汉化破解版,可以帮助玩家快速便捷的制作软件等模型界面,适合于PC端上的软件以及移动端的app应用界面设计.https://www.qqtn.com/qqkey/yxsjgj/
15.产品经理工具之软件篇原型设计类 1.Balsamiq Mockups(适用于快速草图原型设计) Balsamiq Mockups是一种软件工程中快速原型的建立软件,可以做为与用户交互的一个界面草图,它的优势就在于“草图”原型,这是除了纸笔之外最方便的工具了。 当前版本2.0:去这里下载 https://www.51cto.com/article/345797.html
16.分享界面原型图制作软件,助你简单绘制界面原型图!迅捷画图是一款简单好用的界面原型图绘制软件,不需要额外下载软件,通过多种操作系统的浏览器进入官网编辑页面即可快速设计界面原型图。编辑页面预置多种分类的图形符号帮助你简单设计原型图,利用导入素材与手绘功能自定义多种图形符号。绘制完毕后将设计好的界面原型图保https://www.liuchengtu.com/tutorial/jiemianyuanxingtu.html
17.13款APP开发最佳原型设计工具统软云APP开发APP开发Axure是一款专业的快速原型设计工具,是许多产品经验和设计师制作原型的入门软件。它可以帮助用户定义需求和规范,设计功能和界面,并快速创建App或网站的线框图、流程图、原型和规范文档。它可以在Windows和OS系统上使用。 6.框架 Framer涵盖了从完美像素图标到高保真度和响应性设计的所有内容。这里标注了中国官方网站。被https://www.unisoft.cn/service/app/e5eb6cf930472223.html
18.2024年10款好用的原型设计工具推荐Axure是一款非常强大的原型设计软件,支持Windows和macOS,它将将线框和原型设计的功能集于一身,让设计师无需代码就能够创建逼真的网站和APP应用的交互原型。除了构建视觉效果、交互性和组织所需的东西,Axure还提供了一个全面的文档工具,它使跟踪笔记、任务和其他重要资产变得有条理,并使需要查看的人可以访问它,通过将https://www.v1tx.com/post/best-prototyping-tools/
19.MasterGo莫高设计界面设计 交互原型 设计系统 团队协作 设计交付 界面设计:专业、智能的创作能力,助力设计提效 专业级在线 UI 设计工具,自动布局、素材填充等智能功能,让设计过程更简单,繁琐的操作不再成为障碍,让你更专注于设计细节。 开始了解界面设计 → “ MasterGo 的 UI 界面设计一贯保持较好的易用性、美观性,其功能覆盖涉及https://www.mastergo.com/
20.十大界面原型与布局工具人人都是产品经理摘要:原型设计能起到有效沟通的作用,漂亮,直观的原型图更是让人赏心悦目。本文罗列了2013年最新的10大界面原型与布局工具以帮助设计师和开发者创建出更加优秀的产品。 创建网页或者程序不仅要关注主页的排版以及与主题想匹配的图片,还应注重视觉设计,这是因为它更能吸引用户进而提升搜索量。因此,项目开发首先需要确立良https://www.woshipm.com/rp/42740.html
21.XDv50.0.12破解版AdobeExperienceDesign原型设计工具它为团队设计、原型、共享和合作提供了数十个强大的功能,以实现丰富的用户体验。 >>>Adobe XD v50.0.12>>> Adobe XD v50.0.12的软件功能: 设计惊人的体验。 立即从基本的线框变为精美的设计。使用矢量绘图工具、颜色、字符样式、网格、参考线等定义用户界面的外观。 组件。创建设计元素以在整个XD文档或多个文https://www.yutu.cn/softhtml/showsoft_7641.html
22.界面设计常用软件快速的在线原型界面设计工具,强大的高保真原型设计,和协作平台完全融合。软件提供了封装好的3000多个图标https://www.hxsd.com/wenda/63464/
23.小众软件,墨刀小众软件,墨刀 - 产品原型交互设计工具! ? ?墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计师、开发、销售、运营及创业者等用户群体,能够搭建为产品原型,演示项目效果。墨刀同时也是协作平台,项目成员可以协作编辑、审阅,不管是产品想法展示,还是向客户收集产品反馈,向投资人进行Demo展示,或是https://weibo.com/ttarticle/p/show?id=2309404867638240346606
24.UI原型图用什么软件做?看看这10款吧!Axure 是一款功能强大的快速原型设计工具,拥有强大的组件库,可以快速高效地创建产品原型图,即绘制 APP 以及网页的原型图、框架图、结构图等,是目前原型设计领域较为常用的工具。 优点: 支持团队在线协作 拥有无限画布设计区域 缺点: 软件内全英文界面设置 https://js.design/special/article/prototyping-software-for-ui-design.html
25.10个超棒的界面设计工具UI软件编程你是否还在为找不到合适的界面设计工具而发愁?今天为大家送来了福利,盘点了以下 10 个非常好用的界面设计工具,相信能让你的 UI 设计工作如虎添翼,大大提升开发效率。 Kendo UI Kendo UI 是 Telerik 开发的基于 jQuery HTML5 的 UI 框架,开发面向桌面、移动设备的应用程序,主要有 Kendo UI Web,Kendo UI Mobilehttps://www.open-open.com/news/view/27f0a6
26.原型设计工具有哪些?原型设计工具排名免费原型工具推荐原型设计工具哪个最好用?像axure、mockplus、sketch、墨刀等都是常用的原型设计软件,可以用于画原型图、web网页原型设计等,是交互设计师和产品经理必备工具。绿色资源网还提供了手机版原型设计工具哦!http://www.downcc.com/k/yxsjgj/