目前仍然在有大量的用户界面辅助工具涌现出来,特别是 Mac 上,但大多还不是很成熟。其实工具只是工具,用 Excel 一样可以写交互文档。
我是国内最早一批移动互联网产品经理和设计师,在知乎里有130多万人关注。知群是高端职业教育平台,学生包括国内外各大高校在校生、苹果、谷歌、微软、阿里、腾讯、字节、小米等的在职员工。现在还有各大公司P8、P9、P10的专家和高校教授在知群分享经验。
现在有免费的5天学习机会,帮助你了解阿里、腾讯的工作方法论,更好的入门或者提升。在这里了解详情和报名:
据说,真正专业优秀的交互设计师是不会介意使用哪款软件。因为,只要能力足够, 即使条件不同,工具不同,也能设计出让人眼前一亮的作品。或许,这样的认识本身并没有什么大问题。但,现今,设计师明明拥有如此优质的条件和选择,为什么还要委屈自己,使用一些不顺手或不好用的工具呢?
科学技术不断发展,也为设计师提供了更多高效实用的设计工具。那么,作为常常需要顶着巨大压力,在严格期限内制作出高质量作品的交互设计师,为什么不直接选择一系列高效的设计工具来提高工作效率呢?
不用担心。本文将根据相关设计经验和研究,为广大交互设计师介绍一系列实用高效的设计工具。让我们一起来看看,它们都有什么吧:
设计类的软件,比起原型工具来那可是多了不止一个数量级,并且又是选修的,这节我就简单讲讲三种类型吧,不具体展开了。而且说实在的,我自己很多也只是略懂,还有很多需要学的。
Sketch是目前为止UI设计师群体中最受欢迎的设计工具之一。 其最大的优势就是为用户提供了简洁易懂的设计功能。而且,它也可作为原型工具用于创建图标和插画。Sketch是一款基于矢量,并能够通过其工具面板,实现层级以及形状编辑和设计的工具。
此外,sketch还为用户提供了有效的设计指导。 例如,设计师可以简单按住Alt键来查看组件的具体尺寸,以及组件之间的间隔。而且,因其简单的功能设计,软件本身能够更加简洁轻便,运行速度更快,从而更加有效的节省设计师时间和精力!然而,有一点不太满意的地方就是:Sketch只拥有Mac版本。Windows系统是无法使用的。
全新的UI和UX设计方法的出现,鼓励了很多软件开发人员改进和升级他们的产品,尤其是创建了一些全新的,侧重于某些特定方面的(例如布局结构)的产品。而Adobe集团也不例外。于2016年推出了最新的Adobe XD (体验设计)。这款软件作为Photoshop和Illustrator的替代品,在UI和UX设计师群体中,获得了相当高的评价。
Adobe XD是一款专为UX设计师创建线框图,交互式原型以及完成矢量设计而开发的设计工具。一经发布,就吸引了一部分Adobe迷的回归,尝试使用和熟悉其关于UI设计方面的新功能。而对于那些不太了解网页设计的新手用户来说,XD界面使用和理解起来,就有些困难了。此外,到目前为止,Adobe XD支持Mac和Windows10的操作系统。
Figma是当今最流行的设计工具之一。它是一款能为UI设计师带来创新设计方案和可能的设计工具。首先,它是一款基于web的专业设计工具,允许设计团队在线实时协作,完成页面设计。而且,设计师在使用过程中,还能够轻松导出相关设计的CSS代码,以加强与开发团队的沟通协作。用户注册之后,即可免费创建线框图,原型以及矢量图标。但,这些功能仅仅针对个人用户免费。团队用户,则需先付费。此外,该款设计工具适用于多种操作系统。
Lunacy并不能直接用于创建线框图,但却在设计师创建线框图的过程中发挥着巨大作用。这是因为Lunacy允许Windows用户打开并修改各种Sketch文件。所以,对于那些有成员使用Windows系统的设计团队来说,它会非常实用。换而言之,在流程图创建的各个阶段,Lunacy都能让整个设计过程更加高效,而且对所有设计参与人员(包括设计师,开发者,客户以及管理人员)都很友好。
摹客RP是一款强大的高保真设计利器,支持快速交互设计、矢量绘图、流程图绘制、PRD撰写等,产品经理和设计师都爱用!更多实用、易上手的功能,包括:
更重要的是,摹客RP是一款真正完全免费的原型设计工具,不限时长、不限功能、不限页面,包括:
只要下载摹客RP客户端,并参与活动,即可永久免费使用摹客RP。下载地址:
Marvel是一款基于云端的交互原型设计工具,无需任何编码。设计师可以简单下载Sketch或Photoshop线框图,甚至仅凭一张纸上草图的照片,创建逼真的移动App或Web原型。Marvel提供了创建无限项目并允许为前3个项目添加评论的免费服务。当然,设计师也可付费,获得自由创建项目,添加评论,删除Marvel商标以及其他附加服务。
InVision也是一款免费的交互原型创建工具。 InVison之所以受欢迎,是因为其支持Sketch和PhotoShop文件的轻松导入,以构建动态设计。而且ios使用小火箭达到百度直连,设计师可以通过链接网页来模拟真实网站或移动应用的跳转和功能,制作出更加真实的交互原型。此外,InVision为提升反馈效率,还提供了用户可直接在原型上添加评论的功能。
其另外一个特点就是:能够在不同的“columns”中组织各种界面组件,并展示其状态,例如 待办事项、正在进行 或 已审核。如此,客户和设计师就能够更有效的管理各种工作流程。
Principle是一款简单且旨在创建动态界面的设计工具。其突出的特点在于支持离线设计。如此,用户工作进度就不会受到网络连接情况的影响。而且,用户创建的交互原型能够简单的转化成GIF图片或视频,以便更加轻松的分享到Dribbble设计作品集或其他地方。加之,由于其界面与Sketch非常的相似,对大部分设计师来说使用起来也十分简单方便。此外, Principle支持iOS设备预览。然而,不幸的是,Principle只支持iOS系统。对于Windows用户来说就得另找合适的工具了。
hype 3也算是火了一小段时间的,号称无代码动效神器,像AE一样使用时间轴就做可互动的动画。PC、手机、pad端都可以直接访问(以web的形式),也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线,可以发挥更强大的动画效果。
对中国人来讲,它原生支持中文这一点也非常棒!配合sketch效果也是杠杠的!
UXPin团队,作为公认的UX设计领域的专家,经常在各种书籍和文章中分享其的设计经验和知识。他们开发设计的产品,UXPin编辑器,是一款基于Web的原型工具,支持创建线框图和高质量原型,并将它们轻松转换成交互式原型。而且,设计师可简单导入Sketch或PhotoShop图片,即可创建各类原型。 此外,此款工具还可为开发人员自动生成风格指南和设计规范,提升工作效率。
ColorHexa是一款基于Web,且能够帮助用户生成有效配色方案的免费设计工具。设计师直接在搜索框内输入颜色值,即可获得相关颜色详情,例如色彩,阴影和色调,以及其它替代颜色和配色方案。此款设计工具最大的优点之一就是,展示了色彩将如何被一些拥有视觉缺陷的人群所感知。如此,设计师就能够确保其设计对于受视觉缺陷影响的人们来说也是非常友好的,从而提高其设计的可访问性。此外,ColorHexa还为用户提供了不同格式色彩的替代方案。
Paletton,作为UI 设计师们常用的色彩选择工具,是一款免费的Web工具,能够帮助设计师选择颜色,创建更加舒适和谐的界面设计。其功能设置也非常简单:用户只需在色轮上选择需要的色彩或直接输入色彩值,就可获得漂亮的配色方案。当然,设计师也可简单选择一种配色方案,然后查看在不同色调下,类似的配色方案。
扁平化设计一直很受欢迎。这也是为什么拥有一款能够帮忙设计师们选择扁平设计颜色的工具已成为必然的原因。而Flat UI Color就是这样一款提供了丰富扁平设计配色方案的网页工具。其提供的所有颜色都包含十六进制代码, 允许设计师直接粘贴复制到一些常用软件,比如 Photoshop, 或风格指南中使用。但有一点局限的地方就是,Flat UI Color只对经常使用扁平设计的用户有用。
Material Design Color Tool, 作为大部分设计师所熟知的Googlematerial design 的一部分,是一款基于Web的免费应用。此款应用专注于为移动端设计提供配色方案。设计师可以在其移动模板上预览各种配色方案,从而选择更适合的配色。此外,使用该款软件时,用户也能找到相关配色方案的可访问性数据,并在需要的时候对其进行调整和修改。而这,对于页面的可访问性设计非常实用。
为寻找颜色设计灵感,许多设计师都会搜索大量漂亮图片进行参考。而Pictaculous能够帮助设计师分析这些图片中呈现的色彩,并给出类似的配色方案。用户只需从本地上传一张图片,就能获得拥有16进制码的色彩推荐。此外,这款工具推荐的配色方案还可以保存为Adobe Swatch文件,以方便后期使用。
页面排版是数码产品Web或App用户体验最基本的影响因素之一。这也就解释了为什么拥有一款能够创建有效排版的便利工具是多么重要。
Google fonts是一款很受欢迎的免费Web应用,拥有超过600种字体。每一种字体类型都都可以应用到自定义文本中,以不同尺寸进行预览。而且,该应用还会显示每种字体的加载时间,确保用户不会花费太长的时间等待。此外,Google fonts提供了在产品中嵌入特定字体的相关数据,方便用户在HTML文档的右边部分复制粘贴使用专门为所选字体生成的代码。
Typekit是一款经住时间考验的设计工具。在其字体库里,用户可以找到并使用各种各样的字体,例如一些常用的经典字体和一些全新的字体。而且,用户只需订阅,即可获得对所有字体的访问权限。该工具界面还清晰显示了字体相关的所有基本数据,比如字体粗细和样式等。更重要的是,它允许用户查看不同大小和不同颜色背景的字体。
众所周知,字体配对是排版设计最大的难题之一。如今,现存数以千计的字体种类的情况下,完美配对的过程本身就会非常漫长,而这,对于工具本身的用户体验是非常不利的。而不同的是,Fontjoy就是一款使用便利,能够快速实现Google 字体配对的设计工具。用户可简单选择字体,并设置其属性,例如尺寸和粗细等。
此款免费工具能够从谷歌网络字体中直接获取一个完整的字体库,并把它们呈现在一个页面内。用户只需选择需要的测试字体,并设置好相关参数,例如页面字体尺寸,粗细,行距。然后,等待系统匹配就好。此外,用户还可以通过应用顶部的滑条来调节对比度或相似度。
当设计师们无法在两种字体中做出选择时,Typetester能够帮助他们快速测试和比较这两种字体,从而更加快速的选择适合的一种完成设计。Typetester支持多种字体同页面预览,并同时显示相关字体数据,例如行距和字间距等参数。而且,Typetester还支持不同来源的字体选择,例如谷歌字体或苹果Mac默认字体,并通过调整字体大小、对齐方式以及定制文本和背景进行测试。
定制字体是增加产品设计创意的一种有效方式。而Calligraphr是一款可以根据手写字样创建自定义字体的工具。用户只需下载一个模板,并手写一些字样。该工具即会识别并生成相应的矢量字体。而且,生成之后,用户还可根据需要,编辑和调整相关字体的详细信息,以改进这些自定义字体。
Icons8 app是一款支持Windows和Apple设备的应用,封装了超过6.5万各类数码产品图标。其图标库每天都会更新。Icons8还提供了各种引导,以帮助用户找到合适的图标,例如各种格式的 iOS、Android 和 Windows 平台的图标。而且,选中的图标还能够直接复制到Sketch、Figma 和其他工具中使用。此外,所有图标都能在编辑器内调整色彩和尺寸。Icons8支持100×100的PNG图标免费下载。如若用户希望获得所有图标的访问权限, 则需要先付费购买激活码。
当然,如若设计师并不喜欢网上的各种图标,还可以自己动手设计制作。而图标的自制可以使用一些可视化编辑器(比如Sketch, Illustrator, and Figma等)设计创建,也可选择一些免费的Web设计工具设计完成。而FreeIcon Maker就是这样一款能够帮助设计师们在线创建和编辑图标的工具。一旦注册,用户就可自由地使用所有的设计功能,例如下载SVG图标文件在软件内编辑。
设计师们时常会下载数百个图标包,却找不出合适的一种应用到设计中。而IconJar是一个非常有效的组织者,将特定的图标封装在文件夹内进行分类。例如,如果用户需要一个名为“home”的图标,可以按其名称进行搜索,该工具就会显示所有来自不同集合的相关图标。尽管,现今IconJar只支持Mac系统,但不久就会发布其Windows版本。不足的是,该程序是需要付费的, 虽然它也为用户提供免费试用版。
在项目监管以及信息流监管方面,个人更偏好Trello。因为Trello简单有效,清晰直观。具有一系列功能的”boards”和“cards”形成了清晰高效的协作系统。用户可以将任何任务划分成各种“sprints”,并通过实时更新和图像展示,显示任务执行进程。用户也可轻松设置期限 (即截止日期), 将任务委派给特定人员, 创建清单, 并标记出最重要和最紧急的任务。而更重要的是,它不仅是一个设计成熟的工具网站,而且也是一款快速有效的IOS和Android协作工具。这一点也使用户能够更快的获取反馈,从而节约时间和精力,简单轻松的实现项目管理ios小火箭是什么软件。所以,Trello是设计师,项目经理和客户一起协作创建快速有效工作流的最佳工具。
一个成功的设计项目是建立在创意团队和客户之间有效交流和沟通的基础之上。而ZePin是一个能够增强设计师和开发人员之间协作交流的平台。其主要特点是拥有一个详细的风格指南生成器,以确保设计元素能够被准确恰当地应用。用户可直接上传线框图,并将它们添加到Zeplin的项目文件夹中,从而方便开发人员获得关于设计的所有数据,包括UI组件的尺寸、颜色和CSS推荐等。
Presentator是一款基于Web的免费协作工具,能够在协作团队成员、开发人员和客户之间实现设计资源共享。用户可以下载一个文件并设置其权限。例如,有些协作成员可能拥有完全访问的权限,而其他人可能只拥有查看的访问权限。这个工具最大的优点就是:它对所有人来说都是免费的。
传统的平面设计三巨头:Photoshop、Illustrator和CorelDRAW,相信学过设计的同学至少会其中的一个吧。PS可以说是万能的图形软件了,无论是P照片、画图标或者做UI都行,而Illustrator更擅长的是矢量插画和Logo设计,CorelDRAW则更适合传统的平面排版输出。后两者所谓的擅长也只是相对而言而已,其实能做的事情也还是很多。
除了这三个,还有Mac平台的强劲新锐Sketch,它其实最开始是作为取代PS在UI设计界的定位而出现的,只是用着用着,现在还可以作为原型工具使用了,除了它的功能确实强大之外,上手容易、操作方便也是一个重要原因。
不仅有Sketch挑战PS在UI设计界的地位,在它擅长的图像处理和插画方面也有另一个对手——Affinity Designer。相比PS那每年高昂得吓人的正版授权费,它只要328元的价格可谓是厚道到家了。同时AD的功能也同样强大,在分屏预览、响应式设计以及画板等功能上都有很不错的表现。
会做UI的交互设计师是强大的,可以单枪匹马完成一个APP的所有设计工作。
说到做动效,最经典的软件就是Adobe家的After Effects了吧。我的同事Nefish就是使用这款软件的动效大神,腾讯电脑管家小火箭的很多动效都是他在AE里先做出Demo,确定最终效果后,然后我们才写出动画说明书,给到开发进行还原的。比如我们小火箭的深度加速功能,可以让用户选择几个需要关闭的进程,然后就会有一个加速的过程,我们将这个过程和小火箭这个概念结合起来,包装成一个坐在小火箭内部,在宇宙中加速穿梭的感觉:
如果没有AE这样方便的工具在,想要实现这种如丝般顺滑的动画效果是千难万难的。一些很复杂的动画,可以在开发的时候,直接使用AE导出的序列帧来还原动画效果,这样就一定能够保证百分百还原设计了。不过相应的,也会增加一些图片的数量和体积,这里需要做一个平衡和优化。对于交互设计师的意义
交互不应该只有逻辑跳转,还需要有过渡动效,掌握一个强大的动效工具可以加深我们对交互动效的理解;
它还可以用来做产品的宣传视频,当团队中没有这样的人才的时候你可以果断补位。
如果你的平面功夫已经很好了,动效也会了,是不是就没有可以挑战的东西了?当然不是,你还可以挑战更高的维度——3D动效!我的好基友,的高级视觉设计师Geeco就做过这种事情,从零开始学Cinema 4D,最终做出了屌炸酷爆炫的7.0新版闪屏,你可以感受一下:
除了Cinema 4D,你的选择还有Rhino(犀牛)、3DMax这种3D建模软件,如果有编程基础,想挑战更高维度的,还可以去试试Unity 3D和Unreal Engine 4(虚幻引擎4)这样的游戏引擎。它们都有各自的应用场景,比如我们的3D小火箭就是用Rhino建模出来的:
关于游戏引擎,我们设计中心的设计师们还真的用虚幻引擎做出了很酷炫的大数据可视化产品,展示效果已经秒杀竞争对手几条街,获得了领导层和市场的强烈好评。由于还是在起步阶段的To B产品,我就不放图了,敬请期待它的爆发吧。对于交互设计师的意义
一款工具,只有在真正需要并懂得如何使用它们的人手里,才能发挥其应有的作用。所以,无论如何,不要忘记学习,提升专业技能,并选择合适的设计工具,创建更加优质的设计作品。
很多软件大家也就是尝试一下,真正的使用价值寥寥,以我的自身经历来说一下几款是经得起时间考验的:
除了Origami和AE,其他软件学习难度极低,没啥好讲的。国内接触Origami Studio的设计师没那么多,但是作为原型软件真的非常优质,是Facebook设计团队出品,这里着重讲一下:
使用Origami作为我的原型设计/动效软件已经有一年多时间了,因为它的逻辑性和广泛适用性所以即使有一些难度也坚持在学习使用。很早之前就知道Facebook设计团队在规划新版本,但是当新版本发布时,真的是比想象中更加惊艳。
新版本更名为“Origami Studio”,不再作为插件依附苹果的Quartz Composer,而是Mac上的独立应用(不用烧Mac了 )。除了延续之前的Patch连线的使用逻辑外,还增添了sketch联动、调用基础接口(如摄像头!)等极为实用的功能,比之前的Origami上手难度也降低了一大截。
随着移动互联网发展,更多从业人员进入这个行业。原型设计软件也是雨后春笋,不过身边经常听到设计师朋友说交互设计对于这种技能的掌握可有可无,对于这种想法我不能评价,但是放眼美国硅谷,编程已经成为一项设计师的基础技能了,Google等大公司对于设计部门的职能划分越来越趋向于统一而不是细分,而且操作过实际项目的设计师应该了解视觉稿和可用原型之间体验的差别还是很大的,这种原型软件或者说视觉化编程已经为设计师参与到更广泛更便捷的互联网产品开发全流程中提供了途径,何乐不为?
至于在纷繁的原型软件中用哪一个,每个人需求不同会有所差异。这次我把我用的OrigamiStudio做一个介绍和一个快速上手的教程,以供你在选择时参考。
Origami Studio刻意追求与Sketch一致的使用逻辑,在画面的右边你的每个设计元素都是一个Layer(图层),所有的交互动作在这些layer的基础上开展。Origami Studio准备了非常实用的iOS和Material Design预置图层,可以调用几乎所有的基础组件如甚至包括摄像头、高斯模糊!也就是说你可轻易的实现一个具有录像功能的交互原型,听起来是不是很cool!
如果你们团队都在使用Origami Studio,它也支持你在上面储存自己产品的组件库。>
Origami Studio中最基本的元素就是Patch(模块),通过连接不同功能的patch使你的设计可以交互。Layer本身也是一种Patch,首先你要把你的视觉稿切片也就是layer放到画布上,如果你使用sketch,那么你就可以很方便的复制元素到Origami Studio中,它会自动变成一个整体的切片。
>
接下来你就可以开始对layer进行交互操作了,在Patch Editor(模块编辑器)中,你可以挑选你想要的interaction(交互动作)、animation(动画效果)、behavior(反馈行为)连接到你的layer上。
下面做一个简单的示例,企鹅FM上线的新功能——“跟我跑”跑步电台,点击开始后有倒计时的动效,如下(gif图请点开观看)——
这一步如果你用sketch的话就很简单,在sketch里面复制,再到Origami Studio里面粘贴就自动在。如果你是用别的软件做的,你需要先倒出切片,然后拖进来就可以了。>
第二步-设定动作
在每个layer上都有一个「touch」,这个代表的是你将要用什么手势操作,里面有点击/向上滑动/向下滑动/双击/长按······在我们这个案例里,只需要点击操作——tab。
>
选择之后就会自动生成一个interaction patch,这也是所有的动作的第一步。
在我们的操作里,点按卡片之后,应该出现高斯模糊页,那么高斯模糊页的透明度应该从0到1。所以在画布中添加一个transtion patch(数值变化组件)——
然后设定start为0,end为1,然后把连接到“高斯模糊页”的透明度上去——>
这样,点按卡片就会出现高斯模糊效果了。
这里要提醒大家,如果希望点按之后只有一次效果即可那么你需要在interaction之后加上switch开关,不然的话每次点按,效果都会重复一次,但往往我们的App都是线性操作,需要加入switch来进行控制。
至于你想要实现的效果需要使用哪些patch,你可以在他们的官方文档中查看,在patch editor中,也都有注释。大的分类有动画/色彩/功能(包括调用摄像头、麦克、浏览器···)/反馈效果/函数/逻辑/循环/数学/形状/效用。
不要害怕,虽然他提供了很多patch,但你常用的比较固定,多用几次就很熟练了,遇到什么不会的你也不用着急看文档,可以先看看官方示例库里面有没有,实在不行到fb的群组里面或者私信我也可以。
当你在搭建你的原型时,你可以实时在你的手机上查看并进行交互,当你制作完成准备给leader与开发人员展示你设计的应用时,你可以发送到你手机上,你就可以很轻便的带着ta去与所有人交流。这些操作只需手机中下载一个Origam Live。
忘了说一句,Origami Studio所有的相关应用都是全免费的(亲亲❤️FB❤️爸爸)。>
新版本发布后,Community中很多用户在问为什么之前备受关注的code export功能取消了,facebook design的设计师是这样回复的:
在之前的版本里面,Origami是可以导出代码的,但是需要开发人员装Facebook的动效库,推动这件事并不是只靠我一个设计师能够推动的,所以我们要靠“真诚的交流”,以后还原的时候请彼此真诚一点。 其实我有给他们提意见,他们可以生成一张以时间轴为坐标的可视化图表,感觉这样开发人员看得更明白,希望他们可以早日开发出新的功能来帮助我们设计师与开发交流。
很感谢FacebookDesign勇于在设计师的工具领域尝试,我也始终相信彼此的初衷,工具对于效率的提升只是表象,珍贵的本质在于它能让设计师的思维更新换代,而Origami Studio就是这样一款让设计师具有更加动态与纵深感思维的优质原型软件。
我自己的案例涉及公司产品就不放出来了,结尾准备了一份官方教学视频送给不能翻墙的同学们
———————————————————————————————————————————
主要跟大家分享三部分,第一部分和介绍一些现在做的比较好的设计作品社区,包括一些艺术作品分享网站等。可以帮助大家寻找灵感,里面的一些好的案例,也可以成为你们作品集中second research的一部分,也算是一种casestudy。
第二部分给大家介绍的一些网站是比较偏学术性的网站。这些网站会发表专业性、学术性很强的文章,大家在现在的阶段读这样的文章,一方面可以增加自己对所要学习专业的专业性的了解,另一方面可以学习的最前沿,最系统的理论知识。
第三部分我会给大家介绍现在平台上可以利用的工具,现在有很多公司都将他们内部资源开放原始码,像我们所熟知的Facebook,它开放了很多内部的设计资源素材,其实也是为我们所用,有针对性使用这些template。
第一个给大家介绍的网站叫uplabs。如果同学们对behance或者dribbble很熟悉,我相信大家对uplabs也一定不陌生,它是一个很好地为设计师打造的资源推荐社区,上面汇集了很多前端设计作品,还有大量的android和ios UI这样的资源。
另外uplabs也有很好地marketing功能,大家可以去免费或付费下载资源。
第二个给大家介绍的是 collect UI。它是一个基于dribbble的每日资源推荐社区,同学们可能会感觉有点奇怪,因为如果它是仅仅是dribbble的“再分享社区”,那么它和dribbble网站似乎就不会有很大的区别。
其实并不是这样的,因为collect UI都是通过人工筛选的方式来保证这个社区有很高的质量,我们可以看到在左侧列表栏划分出了不同的页面类别,比如sign up、landingpage、user profile,这样我们在搜索不同类别时可以很清晰,尤其是同学们在做同学们在做app的项目时候。
第三个网站是 site inspire,一听这个名字就知道这是一个寻找灵感比较好的网站。
这个网站收录了很多的网站交互型比较优秀的作品,会分为不同的风格和类型,包括不同主题的网站,我会比较关注这个网站是因为很早看它上面有推荐的网站其实很有视觉冲击力的,算是比较前沿特别是在排版上比较简洁同时会有很高的格调,我觉得如果对板式很关注的同学可以多看一些这样的作品。
第四个网站叫做 one page love 。这个网站汇集了很多优秀单页,也有很多模板和资源,有20多种基于行业的分类,你会发现它没有像其他作品集网站的页面,它会将大家的注意力集中于界面,模板主题很直观,所以你可以很轻松地找到自己喜欢的不同行业的模板。
第五个网站是 resource cards,这个我觉得是一个特别给力的比较结合性的网站。
如果我们对设计还没有很多了解,如果你的设计收藏夹还为零的话,仅仅这一个网站就可以解决很多问题,因为它的resource cards是一个专门为设计师提供丰富资源的网站,这上面有不同的卡片类别,每一个卡片类别下面都会有相应下一级的分类,每一个小小的卡片都是一个收藏夹。
对设计有一定了解的同学应该很熟悉这两个现在做的已经很著名的设计创意社区,有很多包括全球的优秀设计师都会在上面进行作品的分享交流,也可以看到不同作品的反馈。
以上7个网站基本上就是第一部分和大家介绍的,可以帮助大家发展灵感,对大家做research有一些有帮助的平台。
第一个网站叫做smashing magazine(门槛会有一点高),这里面的文章比较综合包括整体的质量很高,很适合做用户体验的同学来关注。
它比较适合美国留学的同学,因为其实美国会对交互有一些技术性要求,会需要你有coding的能力,需要你有交互的能力,其实这里面也有涉及到这样的分类,比如coding,mobile都会有偏向这样的文章。smashing magazine里面的文章总体的质量很高篇幅很长,我不知道现阶段大家的英语能力怎么样,但是我觉得大家可以一篇一篇坚持读下来我相信对大家这样的专业词汇的能力的提上还是很高的。
第二个网站是ux booth,它其实是个偏向于用户体验的文章的汇集网站,与上面的smashing magazine主要的区别的在于是更聚焦于用户体验这样相关的方面,整体具有很系统很严谨的学术性,很系统很严谨。三个功能都很棒,一个是交互,一个是acceptability,还有一个偏向于可用性测试也很不错。
第三个是ux magazine,这里的文章和上面其他的网站上的相比更短小精悍一些。比较会用通俗的案列讲解理论知识,分析得很有理有据,可以作为大家二手调研里的素材,同时会有一些结合心理学与设计的探讨,与上面几个相比会比较容易理解。
第四个是designmodo,这个网站前一阵子很风行,上面会有很多关于webstyte的一些文章。
designmodo介绍了很多设计前沿与趋势,这里面有两个元素很不错,一个是inspiration(灵感),一个是resorts(诉诸)。inspiration里面的内容很新颖,resorts有一些很实用的小工具和一些大家可以测试方法性的工具。我们在主菜单上面可以看到shop,这里面是许多有想法的设计师分享的作品。
第五个是web design。我最初关注这个网站其实是被它的视觉设计所吸引,它的视觉设计确实做的很棒,关注一段时间你会发现这里面的内容很新颖,很适合持续关注,这里面会精选互联网里优质的文章,这上面的漫画都是由职业的漫画家亲自手画而成。
另外web design 在主菜单里面有一个freebies的模块。这里面有很多优质的资源大家都可以去下载。
第六个是Facebook design。这个页面结合了Facebook的设计师所制作的免费设计资源,因为目前你可以看到很多互联网公司它都有将公司内部资源开放出来再做开源,如果你想知道这些前沿的企业他们是如何做这些设计,你都可以下载这些素材看到这些原始的文档。
如果同学们在做作品集中有APP这样的项目,这里面有很多模板,你不需要再去拍照就可以用你最后做的interface(接口)去植入到这样的图片里面。因为这个网站上线的时间不是很久,所以上面的资源不是很多。
它是一个可以帮你快速比较不同字体、选择字体的工具,你可以简单输入你想要测试的文字,设置它的字体大小,就会在下面实时的显示出实时做一个比较。当大家在看英文书籍时你可能会发现一个非常好看的英文字体,但是因为它的纸质的,我也没有办法去得到这个字体是什么,其实这个时候扫描一下把它植入到平台里面会自动帮你识别出这个字体,来方便你日后的使用。
这是一个设计师独立设计、独立coding 的网站。这上面提供了很多不同颜色的配色方案,每一组有四个颜色,大家如果看到这上面有合适的配色方案,可以简化大家的设计流程。
我们可以卡到这也是一个配色网站,相比于上一个它的功能会更丰富一些,可以微调每个颜色的亮度,饱和度与色相。这里有一个很好的功能,你会看到如果上传一张图片,它会帮你解析图片的配色方案,最后你可以导出保存到调色板里面。
这个网站可以简化你的icons设计路径,如果我们在做作品集排版的时候,我们经常会用icon做导引,在这样的平台都可以找到合适的icon。
这是一个偏向组织管理的搜索使用图片的工具,大家可以在这上面下载不用的icon page,一方面是可以使用,另一方面是可以学习我们在做icon set的时候需要去遵循哪些规则。
在做用户体验,交互,服务设计的时候其实都会分4个部分,第一个部分是我们需要去发现一个实际问题;第二是定义一个核心的痛点;第三是去展示我们的设计结果;最好要把设计结果放入到一个真实的情景中去测试,从用户的身上得到反馈。
这个place it其实就是帮助我们在最后在得到设计结果的时候自动生成最终场景的图片,你只需准备好你的interface直接把它植入到这个环境里,不需要去修改,去ps。
其实不用过多的描述,这三个都是属于图库的性质,如果大家在排版在做作品集时候没有合适的图片又没有办法去拍照可以来这里。
以上基本上都是一些平台,软件工具类。无论这些平台还是工具,都只是我们设计的一环,更重要的是需要你在生活中学会发现Pain points,找到痛点,用设计去解决问题。尤其是交互与用户体验的同学,你需要去用你的设计结果去改变别人的行为,我觉得这是用户体验交互的核心。
———————————————————————————————————————————
这些软件从axure开始学,掌握信息架构之后,再用invisionapp学做一个简单的交互软件,sketch做U I,这种软件大概3天可以全部上手,非常非常简单。