10款线框图和原型图设计软件

   不管你设计网站也好,设计应用界面也好,都需要有出众的视觉设计,从而吸引用户。但在视觉稿输出之前,比如首先要进行线框图设计和原型图设计,来规划站点地图和应用流程

  我们来盘点一下最好用的十款线框图和原型图设计软件,提高你的设计效率

  Solidify


  ZURB旗下的一款产品, Solidify 允许用户将草图、模板、线框图转化为可点击的原型图。而且,很容易测试,节省时间。还可以与其他设计师分享你的工作成果,以便最快得到反馈。

  PowerMockup


  另外一款要推荐给大家的就是 PowerMockup ,有点类似PPT,能够提供丰富的线框图模板,无论是网页还是手机应用,都可以用这款软件来设计线框图。涵盖了菜单、 列表、文本框、按钮和标签。这些组件只需拖移即可。更重要的是,用户可以自行更新、添加组件到组件库中。而且同样的易于分享。

  Antetype


  Antetype 对于那些有大项目的设计师来说,堪称完美,丰富的微件库,范围广泛的微件,非常适合用来做原型图设计。更厉害的是,微件均可以定制。Antetype是一款高级的设计软件,几乎能满足设计师大多数项目的需求。

  UXPin


  UxPin 对于那些不太擅长交互设计的人来说,UXpin是一款完美的工具,设计师可以在这款工具中找到大量的设计元素和设计模式。还可以找到很多优秀的模板。UXPin的目标是帮助产品经理构建响应式线框图以及原型图,能够适应各种分辨率的屏幕和各种设备。

  QuirkTools


  QuirkTools 这款工具可以让设计提速。这是一款内嵌于浏览器的网页应用,使用起来非常方便。可以帮助设计师创建桌面端、手机端、平板上的线框图。这款工具还很方便客户和设计师之间的沟通鞋头。非常好的应用!

  Wireframe.cc


  利用这款极简式的工具,可以提供啊工作效率,也是一款网页应用,提供了极简风格的画布,里面没有繁杂的图标和工具条。这款工具注重的焦点是线框图本身,他们希望用户注重设计在画布上的体现,而不是为了秀功能,秀界面。提供了2款简易的模板:手机和网页浏览器。手机版模板提供竖直和水平两种模式。而且设计完成后,非常容易完成组品输出。

  Easel


  同样是一款网页应用,Easel 可以方便用户随手记录灵感,提供了很多有帮助的元素,比如说按钮、表单和文本框。这款工具结合了Twitter Bootstrap库,能够提供一些额外的元素。更重要的是,Easel能够提供精确的像素处理功能,让设计师的作品更加细腻。还能够使用CSS3和Web Fonts.Easel还能够直接使用其他网站或应用的设计元素,能够创建可点击的原型图。

  InVision


  InVision 非常适合高端设计,能够打造出令人印象深刻的原型图。通过这工具,用户可以把他们的UX草图,设计,线框图做成链接并团队分享。InVision同时还能方便设计师向用户展现Demo,可以在浏览器中加载,亦可以在移动设备中。

  Proto.io


  Proto.io 想要为触摸屏进行交互设计?这是一款完美的工具,提供了主要的手机触摸方式和手势,比如说挥动手势、缩小手势、按压手势以及敲击手势、放大手势。更重要的是,这款应用还整合了动效,比如郭渐隐、滑动、旋转等等,这款工具允许用户添加一些基本的动效。真的是非常强大的工具,值得一试。

  POP


  Prototyping on Paper

  想让iPhone原型图设计更轻松一点?试试这个吧,这款工具非常强大,不是很复杂,只需导入草图,POP就会根据草图进行调整修改,然后输出为原型图,可以用摄像头,可以用扫描仪扫描然后输入链接。很棒,很简单。

  相信有了这些工具,原型图设计和草图设计会更加轻松,提高工作效率,节省时间,让你的设计更加“先进”!.

时间: 2024-08-22 14:38:02

10款线框图和原型图设计软件的相关文章

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应.最初这个名称来自于Ethan Marcotte的文章"Responsive Web Design",设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使

推荐一款比较好用的UE设计软件

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 我们都知道专门针对美术设计人员的专业软件有很多,比如photoshop.比如fireworks.比如coreldraw.比如flash,还有很多;针对web开发人员写程序的软件也有很多,比如EditPlus,比如EmEditor等;针对文字处理的比如WPS.比如word,如果想排出更好的效果还可以使用专业排版软件比如pagemaker.比如I

2010年最受欢迎的10款教学服务和教学管理开源软件

本文收录了 2010 年度开源中国社区最受欢迎的 10 款跟http://www.aliyun.com/zixun/aggregation/17750.html">教学服务和教学管理相关的开源软件,这些软件多数采用PHP开发,也有Java的系统. 1. BigBlueButton BigBlueButton 是一个使用 ActionScript 开发的在线视频会议系统或者是远程教育系统,主要功能包括在线PPT演示.视频交流和语音交流,还可以进行文字交流.举手发言等功能,特别适合用在网上教学

移动端交互原型设计软件Justinmind:为移动设计而生

据国内三大运营商披露的最新数字,截止 2012 年 1 月份,中国的手机用户数已达 9.8758 亿,即将逼近 10 亿大关.CNNIC最新的调查显示,截至 2012年6月,大陆5.38 亿的网民中,有 15.3%的 网民不使用PC(桌上型电脑),也不使用NB(笔记型电脑)上网,只使用手机上网.砖家解释,这个现象来自互联网向某些不便使用PC或NB的人群扩散的结果.阅读全文 智能手机功能越来越强大,同时价格不断走低,让手机上网变得廉价.方便,降低了移动智慧终端机的使用门槛,把原本用普通手机的用户转

10 款新鲜出炉的jQuery UI插件

本文收集了10款jQuery插件,用于UI设计.它们均新鲜出炉,很有帮助.这些插件包括可编辑表格.向导设计等类型. 1. Smart Wizard 这是灵活的jQuery插件,用户制作漂亮的向导界面, 查看演示. 2. MsgUI Notification Plugin 通过该插件可以排版所有的消息, 查看演示. 3. jQXB Expression Binder 这是JS对象和HTML元素之间的双向的数据绑定,基于jQuery,见QXB/M 提供了自然的灵活的方法来进行服务器端和客户端的数据交

【设计】线框图、原型和视觉稿的区别

在平时我们会遇到线框图.原型.视觉稿等.高保真.低保真.PRD.UI.贴图等不同的概念,那么他们究竟有哪些细节方面的差异呢? 本文做一些简单的分析和说明,如下: ================================================== 本文介绍了线框图 (Wireframe).原型 (Prototype) 和视觉稿 (Mockup) 它们三者之间严谨的功能区别. 对于很多搞信息技术的朋友们(非设计师)在交付设计时,就混淆了这几个词汇,认为它们都代表同一样东西:表达自己

网站交互设计:线框图、原型和视觉稿的区别

中介交易 SEO诊断 淘宝客 云主机 技术大厅 [编者按]本文译者@小轰同学 .文中介绍了线框图 (Wireframe).原型 (Prototype) 和视觉稿 (Mockup) 它们三者之间严谨的功能区别. 对于很多搞信息技术的朋友们(非设计师)在交付设计时,就混淆了这几个词汇,认为它们都代表同一样东西:表达自己创意的线框手绘设计稿.那么如果希望在工作中更好的表达自己的想法,我们需要对这三者有更好的认识. 混淆概念便带来麻烦:他们分不清用户体验设计师的作品,常常感到困惑.「这按钮他妈的怎么点不

你了解线框图和原型的过去、现在与将来吗?

  本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者.如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程,那么你可以下载UXPin精心制作的<原型设计终极指南>(英文版).这篇文章会系统为你介绍线框图和原型的发展历程,了解它们在不同历史背景下的发展,能帮你在未来设计更优秀实用的线框图和原型.通过线框图和原型的发展历程,你还能从侧面了解用户体验设计的过去.现在和未来. 来源:What Does Lean UX Have Tha

你知道线框图和原型有啥区别吗

  线框图并非是原型,但即使是经验丰富的设计师也可能会将两者混为一谈.实际上,两者的差别还是非常多且明显的,那么就让我们通过这篇文章分辨清楚这俩概念,一劳永逸. 线框图 线框图是产品设计的低保真呈现方式.它有三个简单直接而明确的目标: 1.呈现主体信息群 2.勾勒出结构和布局 3.用户交互界面的主视觉和描述 正确地创建了线框图之后,它将作为产品的骨干而存在. 它就像一幢建筑的蓝图一样,将细节规定地明明白白. 线框图的视觉特性 线框的视觉特性局限性非常明显.通常设计师会只需要使用线条.方框和灰阶色