10款交互设计原型开发工具lcchuguo

所谓“工欲善其事,必先利其器”,虽然小米加步枪能够也能够打败敌人,但假设朱棣有了坦克装甲部队,那岂不是更easy平定安南?

关于原型开发工具,各有哥的使用习惯,有人喜欢axure、photoshop,也有人喜欢手绘,robert还见到过高人直接用excel制作的交互原型,不仅可以布局,还具有主要的链接和跳转功能,相当佩服。工具仅仅是实现目标的一个手段,因此选用何种工具全然基于个人的习惯及方便。当然在某些公司为了便于不同的设计师之间进行交流以及重用而规定使用同样的工具,那就另当别论。

以下仅仅是个人所使用过的而且觉得值得推荐的工具,我尽可能的将其便利性与不足写出来,当然假设您发现有所不足或有很多其它的补充,也欢迎随时和我联系。

Axure借鉴了office的界面,可以让用户高速上手,而且提供了丰富的组件样式改动,使得通过其可以创建低保真、高保真甚至接近于实际效果的界面。然而最让人称道的是,Axure的丰富的脚本模式,可以通过点击和选择可以高速完毕界面元素的交互,如链接、state切换、动态变化等效果,使得Axure可以生成十分接近于真实产品的原型。还有一方面,Axure可以导入其它人创建的元件库,使得Axure可以满足绝大多数类型产品的设计。

但Axure仍然有一个让人头痛的问题:对于中文的支持不太友好。在小部分元件上输入中午的时候,常常须要像碰运气似的重复切换输入法,破坏了咱们设计师的用户体验。

瑕不掩瑜,Axure仍然是交互设计师的首选原型工具。

Visio在2000年被微软收购,并在2002年成为office2003套件中的一个组件,最新版本号是2007。Visio可以获得推荐的原因是由于Visio的适用性很之广,从站点界面、数据库模型,到平面布置图到工艺流程图,Visio都提供了对应的元件库和模板来进行高速创建。

相较Axure而言,Visio更适合于传统行业的生产或流程设计,或者软件及互联网行业中的信息、数据和流程的说明,而不太适用于web界面。由于其的基于web的元件库还是比較少,而且形式和结构也更相似于word中的图形工具,因此在原型开发效率上都有所不足。

这个基于AdobeAIRRuntime的工具实在是有让人眼前一亮的感觉,手绘风格的元件样式粗犷淋漓,能创建接近于纸上手绘的原型文件。其提供了丰富的手绘风格的web经常使用元件,包含经常使用的html控件、以及一些组合控件,如多媒体控制器、标签页、列表、Iphone界面元件等。

Mockups最值得观赏之处在于其提供的多数组件都可定制外观,对于中文的支持也不错(选择View>UseSystemFonts)。

Mockflow和以上工具最大的不同在于Mockflow是一项基于AdobeFlex技术开发在线服务,提供了与BalsamiqMockups基本类似的功能,甚至更丰富的组件,尽管其元件定制化不够强大,但其提供的元件库默认样式却很适合用来做商业产品原型的搭建。有一个让我爱不释手的功能是模板,能够设置基于不论什么页面的模板来进行新的页面设计。

尽管在线服务的基本帐号仅仅能创建一个文件,但单个文件却没有限制页数,因此也基本上足够使用。

Pencil是一款基于Firefox的扩展组件,安装之后就可以在Firefox的工具菜单中打开Pencil的画图面板。功能比較简单,仅能用以日常简单工作的辅助说明。提供的默认元件都是基于软件project,因此更适合用于windows桌面程序的简易界面搭建,或者是主要的页面功能说明,并不适用于严肃的原型开发,但好在体积小、又轻便,可以方便将网页中的元素直接拖到或者拷贝到当前的画布中,这也是Pencil安装在Firefox所带来的便利之中的一个吧。

很多其它工具...

在以上列举的原型开发工具都是较为经常使用的,也是在国内的交互设计师们比較常讨论的,但事实上和Axure功能类似的软件还有非常多,以下也就一些简单说明:

这是一款真的非常强大的原型制作工具,没有在上面推荐的原因是由于我还没有实际体验过,但冲着这project级的界面设计就没有去尝试的冲动,可是从官方站点的截图和视频演示来看,这款软件的操作模式和前面的原型工具大有不同。Axure之类多是基于页面的原型设计,对于web站点虽然非常有用,可是对于软件界面的流程设计却略显繁琐。而GUIDesignStudio却另辟蹊径,直接以建立元素与元素之间的关联的方式来自己主动化的创建动作流程,而从视频演示来看,这种确非常大程度上提升了软件界面原型搭建的效率。

由Elegance科技推出的LucidSpec是一款非常相似Pencil的原型工具,只是提供了很多其它控件。只是LucidSpec强调了生成干净的说明文档的功能,这可能是针对于多数原型工具的自己主动化生成规范的冗余而言的,只是老实说LucidSpec提供的原型界面太过简陋,而且生成的说明文档也未见优化有如何的提升。视频介绍

Irise与其它原型工具相比当中一个特色在于提供了样本数据的功能,这是相似于excel表的一个样本数据库,能够通过界面元素直接获取样本数据库中的数据,这样所生成的原型甚至能够使动态数据更新的。

THE END
1.这9款工具值得一试!开源免费的原型设计工具有哪些在当今快速发展的数字世界中,原型图设计工具无疑是设计师必不可少的武器。高效易用的工具不仅能使设计过程更加顺畅,还能有效提高设计质量。在这个竞争激烈的市场上,有许多优秀的免费原型图设计工具可供选择。以下是我们选择的9种免费原型图设计工具,我们相信一定有您需要的。 https://blog.csdn.net/2301_79599164/article/details/137138194
2.Framer首页文档和下载开源原型设计工具OSCHINAFramer 是一个开源原型设计工具,使用 CoffeeScript 编写。支持动画效果和交互操作。 展开阅读全文 代码 Gitee 极速下载/koenbok-Framer Star 0 | Fork 1 Framer 是一个开源原型设计工具,使用 CoffeeScript 编写 最近提交: 477b95a8 Update readme.md Koen Bok 2019-05-07 22:15 76e96eb8 Merge pullhttps://www.oschina.net/p/framer
3.开源的GUI原型设计工具Pencil介绍控件新闻开源的GUI原型设计工具Pencil介绍 Pencil是一个免费开源的GUI设计工具,可以运行在Linux、Windows和MacOS平台,甚至可作为Mozilla Firefox插件运行。安装方便简单,用户可以使用它来创建多种模型。 Pencil内置了大量的形状集合,无论是在桌面端还是移动端,用户都可绘制多种类型的用户接口。与此同时,其还自带热门绘图功能,简化https://www.evget.com/article/2016/11/8/25142.html
4.Pencil:免费的手绘风格开源原型图设计工具Web前端Pencil 是一款开源的手绘风格原型图绘制工具,可以用来绘制各种架构图和流程图。目前最新版本是1.2,同时还提供 Firefox 的插件。 主要功能: 内置多种原型设计模板 多页背景文档 跨页超链接 富文本编辑支持 可导出HTML,PNG,Openoffice.org文件,Word文件和PDF。 撤消/重https://www.iteye.com/news/21516/
5.全面解读2020最值得上手的界面设计工具:Figma优设网另外,Sketch在原型和交互设计上发挥不足,inVision很好的从这个环节独立出来。再如Framer,基于开源原型框架,在代码上的优势,为设计和技术的融合搭建桥梁。 总体来看,界面设计工具在往两个方向分化。 一种是模仿者,进行功能效仿或内部整合。另一种是跨界者,横向扩展,做不同领域的功能集成。工具战场是力量的决胜,亦是速https://www.uisdc.com/comprehensive-interpretation-of-figma/
6.Penpot:开源设计协作平台Penpot是一个开源的设计和原型制作工具,它专为团队协作而构建,允许设计师、开发者和产品经理在同一平台上无缝地创建、分享和迭代设计项目。这个平台基于Web,因此它能够在任何操 Penpot是一个开源的设计和原型制作工具,它专为团队协作而构建,允许设计师、开发者和产品经理在同一平台上无缝地创建、分享和迭代设计项目https://pidoutv.com/sites/16921.html
7.最全零代码nocode/低代码lowVisly使用类似于Sketch或Figma的视觉设计程序构建React组件 Chakra UI和OpenChakraReact的开源组件库,附带可视化拖放构建 Modulz通过在界面设计工具中创建前端组件来缩小设计和代码之间的差 Hadron另一个兼作前端组件构建器的界面设计工具。在一个应用程序中统一您的设计系统 https://www.tanmer.com/blog/707
8.十大必备界面设计工具,让你的设计更出彩!软件介绍:Origami是一款基于Quartz Composer的交互原型设计工具,这款工具可在无需编程的情况下轻松实现与设计原型进 立即查看 6.Pencil原型图绘制工具 3.0.4 Pencil是一款开源的手绘风格原型图绘制工具,适用于各种架构图和流程图的绘制。它提供了多种原型设计模板、多页背景文档、跨页超链接等功能,并支持富文本编辑。用https://app.zol.com.cn/jiqiao/69907.html
9.最受产品经理关注的10个原型设计工具Mockingbird 是一款使用纯javaScript开发的基于Cappuccino 的在线原型设计工具。为用户提供完全基于浏览器窗口的产品原型设计服务,由于Mockingbird 采用了Cappuccino开源框架,能够较为逼真的模拟 Axure 这类桌面软件,给用户极大的亲切感。Mockingbird 内置常用的各种Web控件,包括Text, Link, Button, Image, List, Box 等等,鼠https://www.jianshu.com/p/b2ef15d764d9
10.MasterGo我们知道 Sketch 和Figma 都是国际流行的设计工具,但 Sketch 仅有 Mac 版,Figma 也因美国制裁禁止大疆使用的事件闹得沸沸扬扬。加上定价都很高,使得这两者都难以适合国人。 MasterGo 是一款能替代 Sketch、Figma、AdobeXD 甚至是 PS 的国产免费 UI / UX 矢量设计工具!它提供了产品界面设计、交互原型制作、网页/https://www.iplaysoft.com/mastergo.html
11.10个超棒的界面设计工具UI软件编程Fluid UI 是目前最快的移动 app 原型设计工具,它可以在移动设备上测试各种低保真和高保真的 app 模型,帮助你以最快的速度收集 app 需求,节约时间和金钱。 SkinCrafter 这是一个非常强大的自定义皮肤库,可以作为 ActiveX 控件或者 .NET (x86 + x64) 控件使用的 GUI 设计工具。它支持所有常见语言如 VB,C#, VBhttps://www.open-open.com/news/view/27f0a6
12.产品经理工具之软件篇2.AxureRP(适用于复杂交互的原型设计) 如果是轻量级的设计,Mockups就够了。但如果要做一个产品高保真的交互原型,AxureRP应该是产品经理或交互设计师的首选。网络上有汉化,有Crack。 3.UIDesigner(腾讯推出的原型设计工具) 目前的版本还在不断的更新完善中,可以做为尝新的人来使用,相信后续功能会越来越完善,毕竟这https://www.51cto.com/article/345797.html
13.菜鸟工具菜鸟工具,为开发设计人员提供在线工具,网址导航,提供在线PHP、Python、 CSS、JS 调试,中文简繁体转换,进制转换等工具。致力于打造国内专业WEB开发工具,集成开发环境,WEB开发教程。..https://c.runoob.com/
14.研究项目开源EDA项目,构建支持28nm工艺芯片设计的全流程(RTL到GDSII)开源EDA工具链,实现自动化和智能化的芯片设计流程,助力打造“使用开源EDA设计开源芯片”的生态体系,降低芯片设计门槛。具体来看:首先,拆解、抽象、定义和描述关键技术问题;其后,设计高质量软件架构,对各子模块中的关键问题进行专项突破,强调代码和文档质量,研发https://acs.ict.ac.cn/yjxm/
15.从域名到运营:开办独立网站全流程网页设计师和网页开发者分别使用两种网站设计工具:原型设计和进程码撰写。其中,网页设计师使用原型设计工具负责输出原型、互动式框架与 UI 设计等可视化部分,知名软件如Sketch、Figma等;网页开发者使用进程码撰写工具撰写 HTML 和 CSS 进程码,知名软件如Visual Studio Code、Sublime Text、Atom、WebStorm、Adobe Dreamweaverhttp://www.thailycare.com/blog/network/762.html
16.UI设计师导航网Octopus.do是一个可以让你对网站或应用程序结构创建详细可视化站点地图并进行原型设计的在线工具,同时提供动态计算项目成本的功能,并以简单的链接形式进行分享。 Read more ? Draw.io Draw.io是一个专业的开源图表工具,可以创建和共享流程图、组织结构图、UML图、ER模型、网络图等等,无需注册即可免费在线、PC桌面及http://so.uigreat.com/