线框图(Wireframe)是app、软件或者网站设计过程中非常重要的一个环节,它可以合理地组织并简化内容和元素。线框图除了可以帮助开发者节省时间外,更可以加深开发者对产品的认知,给开发者一个清晰的产品构架,避免了开发者陷入层次不清、功能不明的产品设计和开发混乱状态。
是一个非常好的、免费的HTML5应用,通过它可以创建可爱朴素的线框图、实体模型和UI概念。该程序使用起来非常简单,并且有内置的模板可以直接使用(模板包括单选按钮、链接、图像占位符、文本框以及滑块等)。它还提供了iPhone和iPad模板,以及iOS相关的按钮、提示框、picker、菜单、开关以及键盘等。你可以设置网格的尺寸,并预览和分享你的线框图。Moqups提供了一个很有用的功能就是对齐网格,可以使对象精准对齐。
dashboard可以用来管理项目。编辑器是构建原型的环境,由一组设计和开发原型的工具组成,另外还可以构建交互。播放器用来观看原型,并与原型进行交互,并提供了相关工具来标注和保留反馈信息。你可以直接在真实的移动设备上对原型进行测试。并且可以使用iOS或Android上的浏览器以全屏模式运行原型。
UXPin是DeSmart团队开发的一个简易快速的实体模型和在线可点击原型创作工具。它基于优秀的用户体验设计原则,在构建原型中,它提供了一个完整的工具包(该工具包具有良好的用户设计模式和元素)来从头构建一个出色的原型。
UXPin具有响应式的断点功能,创建的响应式原型和线框图可以运行在不同的设备和分辨率上。另外该软件还提供了版本控制和迭代功能,可以轻松的共享预览,直观的注解和实时的协同编辑和聊天。该软件拥有大量具有吸引力的用户界面元素风格(包括web,iOS,Android等),并且具有快速、灵敏的响应拖放接口。
不多说了,很多人都在用这个交互原型设计软件。网上也有很多这方面的教程和文档。
ProtoShare:在线网站开发协同制作工具是一个十分便捷的在线原型制作工具,侧重于团队协作。团队成员可以通过这个工具对工作进行审查,并及时提供反馈,对线框图或内容进行建议。作为一个强大的线框图和原型平台,Protoshare提供了大量移动工具集(有来自中心资源库的大量移动模版和大量2D、3D动画过渡)。通过”拖放”界面,你可以快速创建交互式的线框图和移动原型,然后发送至iPhone、iPad或者Android设备进行测试,体验app的功能实现情况。
WireframeSketcher是一款强大的、灵活的线框图和原型快速创作工具,适用于桌面app和移动app开发者。WireframeSketcher可以作为单独的app,也可作为一个Eclipse 插件。
WireframeSketcher还是一款简单的带有手绘风格的创作工具,这样你就不会被一些细节所打扰。它包含大量UI控件,可以进行灵活的自定义设置。经过优化的界面、多个快捷方式、格点捕捉以及智能化引导都让WireframeSketcher成为快、高效的选择。Mockups Gallery 还储存了大量可供下载的插件、模版以及icon等。
OmniGraffle是由The Omni Group制作的一款带有大量模版可以用来快速绘制线框图、图表、流程图、组织结构图以及插图等类型图的app,也可以用来组织头脑中思考的信息,曾获得2002年的苹果设计奖。它采用拖放的所见即所得界面,你可以用钢笔工具绘制自定义的模版或者图形,此外还自带Graffletopia提供的多个iPhone、iPad以及Android模版。
Pidoco 是一款基于Web的原型设计软件,用于快速创建可点击的线框图。也可以用于制作网站项目、移动项目、企业应用程序的用户界面原型。拥有智能的共享和协同工作功能以及便捷的可用性测试模块,更易于使用。
通过简单的拖放界面,你可以使用软件自带的移动UI元素来快速创建移动app原型,或者使用移动页面模版来节省更多时间。你可以选择”plain” 或者”sketched” 模式来展示你的线框图。
FlairBuilder是一款可以用来创建交互性线框图的快速原型工具,可以帮你把低保真度的草图升级为高保真度的线框图。FlairBuilder内置数量超过70个的小部件或小元件,还带有大量模版。你可以简单快速地预览你的项目,并且输出功能齐备的HTML原型。线框图以树状结构出现,FlairBuilder可以读取你的线框图,并产生一个易于查看的层级式网站地图。
HotGloo是一款为传统软件以及富互联网应用软件制作产品原型的在线工具,友好而强大。内置了许许多多会经常使用到的控件和UI元素,鼠标拖拽至画布,再组织绘制即可。能够有效的帮助用户提高对传统软件以及富互联网应用软件的快速设计和交互式用户界面实体模型的规划进程。
最近,该软件新增了iPad和iPhone专用的模板套件,包括基本的界面元件,比如标签、icon、地图、按钮以及大量表视图。
InVision是一个便捷的产品原型生成工具,用户制作一个在线原型只需要四部:创建一个工程、上传视觉设计稿、添加链接以及生成在线原型。
确切说,InVision提供的不是准确的线框图,而是一个快速原型的环境,可以把你的UX/UI草图快速连接起来。数字型的线框图和高保真的设计可以帮你测试app的工作情况,同时该工具还支持协作和分享功能,生成的在线原型可以支持任何人在产品原型的任何地方评论,便于准确的交流。
针对iOS 开发,InVision还增添了其他功能,比如自定义主屏幕icon和自定义加载页面。
Pencil是一款开源的可以用来制作图表和GUI原型的工具,可以作为一个独立的app,也可以作为Firefox插件。内置模版可以帮你绘制桌面和移动界面中用到的各种各样的用户界面,包括流程图、UI和一般的通用图形。
通过它内置的模板,你可以创建可链接的文档,并输出成为HTML文件、PNG、OpenOffice文档、Word文档、PDF。Pencil Project还包含大量移动app模版
@Micu设计你是美工?还是设计师?你是合格的设计师吗? 设计工作中最基础的修图会吗?找素材拼图会吗? 如果这最基础都不会,能称自己是设计师吗?能漫天要价吗? 如果有点职业道德,先学会最基础的修图,再谈设计吧! 一起看看别人是如何将图片合成的! 第1组:采集素材 完成设计: 第2组: 第3组: 第4组: 第5组: 第6组: 第7组: 第8组: 第9组: 第10组: 第11组: 第12组: 第13组: 第14组: 第15组: 第16组: 第17组: @Micu设计投稿,自 weibo
@Micu设计你是美工?还是设计师?你是合格的设计师吗? 设计工作中最基础的修图会吗?找素材拼图会吗? 如果这最基础都不会,能称自己是设计师吗?能漫天要价吗? 如果有点职业道德,先学会最基础的修图,再谈设计吧! 一起看看别人是如何将图片合成的! 第1组:采集素材 完成设计: 第2组: 第3组: 第4组: 第5组: 第6组: 第7组: 第8组: 第9组: 第10组: 第11组: 第12组: 第13组: 第14组: 第15组: 第16组: 第17组: @Micu设计投稿,自 weibo
周陟 (@UCDChina 深圳负责人、交互设计专业委员会(@IxDC)部长) :我发现一个问题,大部分刚入行或者经验不多的设计师在碰到问题的时候都喜欢”索取”,最好有个现成的东西放那儿给他供着。这暴露了我们设计师群体一个严重的现状——自学能力的欠缺。 我上次提到设计师的三大素质(我自己觉得是这样,也是招人的时候重点考察的),这次就专门聊聊自学能力的问题,与各位打拼靠自己的朋友共勉。 作者还有一篇很有意思的分享:普通UI设计师与顶级UI设计师的区别是什么? 什么是设计师的自学能力? 我们对自学能力的理解是从上学的时候建立的,但那个时候的”自学能力”相对单纯,无非也就是如何通过自己看书、做题,复习到达熟练记忆,以便应付各种苛捐杂税式的考试。 但进入设计行业后,这个自学能力不仅仅限制在”了解知识、复述知识”的范围,设计师要学习各种软件,学习如何寻找灵感,学习如何与客户沟通,学习怎样规划自己的行业前景……这种交叉性的自学要求会成为很多人的屏障。并且,很难定义一个所谓的”自学能力”的量化目标。 就我个人理解,设计师的自学能力是使用合适的时间、方法、资源达到独立的、正确的解决问题的能力。 如何才能有效的自学? 你细心的话,应该注意到上面我的用词,这些关键点就是有效自学的途径。在设计这个行当,光努力是不够的,我们不只是要强调效率,也要强调效能。回过来看,你们学校历史中是不是总有那么几个无论如何努力都始终分数不高的货色? 首先是合适的时间; 如果一件需要花时间的学习任务超出了你的时间成本,你就不应该去碰它,或者换一个更好的方式,比如:你现在是一个从事了8年平面设计的设计师,你觉得目前做动画的收入高,你希望通过自学动画,然后跨行到这个领域,那么未必是最好的选择,首先你的8年的平面经验几乎没有再升值的空间,其次作为一个新人,也许你还要3年的等待,好死不死,你的脑子不错,等到你学有所成,动画行业又是另一个新的天地了。 正确的方法是重要的; 方法不仅是你练习的方式,还有思考问题的方式,这里强调的是设计师快速发现问题的能力,只有准确的了解需要自学的领域的难度、行业标准、设计思路、应用形态,你才知道从何入手; 比如:你想自学网页设计,并把网页视觉设计师作为自己的职业发展,你就应该首先了解,一个网站的基本结构,每个结构需要哪些工作岗位,他们的职责有何不同,一个网站视觉设计师应该干什么,抓住重点(而不要一开始去学什么HTML代码,那不是你最该关心的,我这话是说给某个朋友听的)。 资源指的是任何能够让你了解到所需知识的平台; 基础的东西先看维基和google,然后去书店翻一翻行业著作,然后下载一些软件的学习版知道你要使哪些工具,这些都是你的资源,如果凑巧你还能找到一些资深的从业人士咨询就更好了,但是要提醒的是,别人没有义务回答你,所以你先要准备好自己的问题。 独立性决定了你在自学途径中对自己的要求;你善于坚持的品质是你能够成功通过自己的努力达到目标的前提条件,在你周围没有更多的资源可以利用的时候,你只能靠自己不断的练习,思考。我发现要求很多设计师练习没有问题,要求他们思考却很难,自学的过程中,”想”永远是最关键的。 自学不是万能灵丹 你的性格不适合自学。这是正常的,有部分朋友他们的性格天生就是依赖性强,缺乏主见,在遇到困难的时候选择逃避,那么这样的性格想完全通过自学来达到一个”好高骛远”的目标是不太可能的。你需要选择一个付费的培训机构或者老师,通过一些外部的压力,让你有所提高。 除了自学还应该参与交流。交流当然是重要的,通过交流可以达到解惑的效果,有个前提需要注意,你要和别人交流,别人也需要知道值得和你交流,因此你要有所储备,交流既然是平等的也就需要基础,别以菜鸟之心度老鸟之腹,既冷了场又露了怯。 自学的技术必须转化为实际项目。你的自学有可能是为了自我提升,自我积累设计经验,但如果是为了解决实际问题,那么你自学的成绩就必须经过实际项目的检验,比如:你学习了一些新的交互设计的工作技巧,那么在你自己从事项目的时候你就应该争取机会导入进去,否则到头来,你也只是做了一嘴的好交互。 “人一定要靠自己”,说的不是抛弃阶级感情和团队协作,而是面对困难和障碍的时候,往往只有你自己才是靠得住的。缺乏自学能力的设计师,从性格与技能上都会落于下风,因此请不要让自己”被飞”的日子来得太早。 原文出处:《闲言碎语:周陟设计随笔》,感谢作者的无私分享,推荐童鞋们阅读原著,受益无穷 : )
周陟 (@UCDChina 深圳负责人、交互设计专业委员会(@IxDC)部长) :我发现一个问题,大部分刚入行或者经验不多的设计师在碰到问题的时候都喜欢”索取”,最好有个现成的东西放那儿给他供着。这暴露了我们设计师群体一个严重的现状——自学能力的欠缺。 我上次提到设计师的三大素质(我自己觉得是这样,也是招人的时候重点考察的),这次就专门聊聊自学能力的问题,与各位打拼靠自己的朋友共勉。 作者还有一篇很有意思的分享:普通UI设计师与顶级UI设计师的区别是什么? 什么是设计师的自学能力? 我们对自学能力的理解是从上学的时候建立的,但那个时候的”自学能力”相对单纯,无非也就是如何通过自己看书、做题,复习到达熟练记忆,以便应付各种苛捐杂税式的考试。 但进入设计行业后,这个自学能力不仅仅限制在”了解知识、复述知识”的范围,设计师要学习各种软件,学习如何寻找灵感,学习如何与客户沟通,学习怎样规划自己的行业前景……这种交叉性的自学要求会成为很多人的屏障。并且,很难定义一个所谓的”自学能力”的量化目标。 就我个人理解,设计师的自学能力是使用合适的时间、方法、资源达到独立的、正确的解决问题的能力。 如何才能有效的自学? 你细心的话,应该注意到上面我的用词,这些关键点就是有效自学的途径。在设计这个行当,光努力是不够的,我们不只是要强调效率,也要强调效能。回过来看,你们学校历史中是不是总有那么几个无论如何努力都始终分数不高的货色? 首先是合适的时间; 如果一件需要花时间的学习任务超出了你的时间成本,你就不应该去碰它,或者换一个更好的方式,比如:你现在是一个从事了8年平面设计的设计师,你觉得目前做动画的收入高,你希望通过自学动画,然后跨行到这个领域,那么未必是最好的选择,首先你的8年的平面经验几乎没有再升值的空间,其次作为一个新人,也许你还要3年的等待,好死不死,你的脑子不错,等到你学有所成,动画行业又是另一个新的天地了。 正确的方法是重要的; 方法不仅是你练习的方式,还有思考问题的方式,这里强调的是设计师快速发现问题的能力,只有准确的了解需要自学的领域的难度、行业标准、设计思路、应用形态,你才知道从何入手; 比如:你想自学网页设计,并把网页视觉设计师作为自己的职业发展,你就应该首先了解,一个网站的基本结构,每个结构需要哪些工作岗位,他们的职责有何不同,一个网站视觉设计师应该干什么,抓住重点(而不要一开始去学什么HTML代码,那不是你最该关心的,我这话是说给某个朋友听的)。 资源指的是任何能够让你了解到所需知识的平台; 基础的东西先看维基和google,然后去书店翻一翻行业著作,然后下载一些软件的学习版知道你要使哪些工具,这些都是你的资源,如果凑巧你还能找到一些资深的从业人士咨询就更好了,但是要提醒的是,别人没有义务回答你,所以你先要准备好自己的问题。 独立性决定了你在自学途径中对自己的要求;你善于坚持的品质是你能够成功通过自己的努力达到目标的前提条件,在你周围没有更多的资源可以利用的时候,你只能靠自己不断的练习,思考。我发现要求很多设计师练习没有问题,要求他们思考却很难,自学的过程中,”想”永远是最关键的。 自学不是万能灵丹 你的性格不适合自学。这是正常的,有部分朋友他们的性格天生就是依赖性强,缺乏主见,在遇到困难的时候选择逃避,那么这样的性格想完全通过自学来达到一个”好高骛远”的目标是不太可能的。你需要选择一个付费的培训机构或者老师,通过一些外部的压力,让你有所提高。 除了自学还应该参与交流。交流当然是重要的,通过交流可以达到解惑的效果,有个前提需要注意,你要和别人交流,别人也需要知道值得和你交流,因此你要有所储备,交流既然是平等的也就需要基础,别以菜鸟之心度老鸟之腹,既冷了场又露了怯。 自学的技术必须转化为实际项目。你的自学有可能是为了自我提升,自我积累设计经验,但如果是为了解决实际问题,那么你自学的成绩就必须经过实际项目的检验,比如:你学习了一些新的交互设计的工作技巧,那么在你自己从事项目的时候你就应该争取机会导入进去,否则到头来,你也只是做了一嘴的好交互。 “人一定要靠自己”,说的不是抛弃阶级感情和团队协作,而是面对困难和障碍的时候,往往只有你自己才是靠得住的。缺乏自学能力的设计师,从性格与技能上都会落于下风,因此请不要让自己”被飞”的日子来得太早。 原文出处:《闲言碎语:周陟设计随笔》,感谢作者的无私分享,推荐童鞋们阅读原著,受益无穷 : )