交互设计应该学的软件有哪些?_将摹客交互原型分享到UI中国

时间:2021年06月18日 10:41:39

据说,真正专业优秀的交互设计师是不会介意使用哪款软件。因为,只要能力足够, 即使条件不同,工具不同,也能设计出让人眼前一亮的作品。或许,这样的认识本身并没有什么大问题。但,现今,设计师明明拥有如此优质的条件和选择,为什么还要委屈自己,使用一些不顺手或不好用的工具呢?

科学技术不断发展,也为设计师提供了更多高效实用的设计工具。那么,作为常常需要顶着巨大压力,在严格期限内制作出高质量作品的交互设计师,为什么不直接选择一系列高效的设计工具来提高工作效率呢?

不用担心。本文将根据相关设计经验和研究,为广大交互设计师介绍一系列实用高效的设计工具。让我们一起来看看,它们都有什么吧:

设计类的软件,比起原型工具来那可是多了不止一个数量级,并且又是选修的,这节我就简单讲讲三种类型吧,不具体展开了。而且说实在的,我自己很多也只是略懂,还有很多需要学的。

线框图和原型设计工具Sketch

Sketch是目前为止UI设计师群体中最受欢迎的设计工具之一。 其最大的优势就是为用户提供了简洁易懂的设计功能。而且,它也可作为原型工具用于创建图标和插画。Sketch是一款基于矢量,并能够通过其工具面板,实现层级以及形状编辑和设计的工具。

此外,sketch还为用户提供了有效的设计指导。 例如,设计师可以简单按住Alt键来查看组件的具体尺寸,以及组件之间的间隔。而且,因其简单的功能设计,软件本身能够更加简洁轻便,运行速度更快,从而更加有效的节省设计师时间和精力!然而,有一点不太满意的地方就是:Sketch只拥有Mac版本。Windows系统是无法使用的。

Adobe XD

全新的UI和UX设计方法的出现,鼓励了很多软件开发人员改进和升级他们的产品,尤其是创建了一些全新的,侧重于某些特定方面的(例如布局结构)的产品。而Adobe集团也不例外。于2016年推出了最新的Adobe XD (体验设计)。这款软件作为Photoshop和Illustrator的替代品,在UI和UX设计师群体中,获得了相当高的评价。

Adobe XD是一款专为UX设计师创建线框图,交互式原型以及完成矢量设计而开发的设计工具。一经发布,就吸引了一部分Adobe迷的回归,尝试使用和熟悉其关于UI设计方面的新功能。而对于那些不太了解网页设计的新手用户来说,XD界面使用和理解起来,就有些困难了。此外,到目前为止,Adobe XD支持Mac和Windows10的操作系统。

Figma

Figma是当今最流行的设计工具之一。它是一款能为UI设计师带来创新设计方案和可能的设计工具。首先,它是一款基于web的专业设计工具,允许设计团队在线实时协作,完成页面设计。而且,设计师在使用过程中,还能够轻松导出相关设计的CSS代码,以加强与开发团队的沟通协作。用户注册之后,即可免费创建线框图,原型以及矢量图标。但,这些功能仅仅针对个人用户免费。团队用户,则需先付费。此外,该款设计工具适用于多种操作系统。

Lunacy

Lunacy并不能直接用于创建线框图,但却在设计师创建线框图的过程中发挥着巨大作用。这是因为Lunacy允许Windows用户打开并修改各种Sketch文件。所以,对于那些有成员使用Windows系统的设计团队来说,它会非常实用。换而言之,在流程图创建的各个阶段,Lunacy都能让整个设计过程更加高效,而且对所有设计参与人员(包括设计师,开发者,客户以及管理人员)都很友好。

交互原型设计工具

摹客RP

摹客RP是一款强大的高保真设计利器,支持快速交互设计、矢量绘图、流程图绘制、PRD撰写等,产品经理和设计师都爱用!更多实用、易上手的功能,包括:

套装组件+风格定制,快速产出不费心矢量绘制轻松用,设计创作更随心页面+主辅画板模式,原型搭建更合心交互体系完善,UI/UX更开心方位传递设计理念,逻辑表达更顺心

更重要的是,摹客RP是一款真正完全免费的原型设计工具,不限时长、不限功能、不限页面,包括:

设计页面不受限制,灵感肆意发挥;无需为成员付费,注册即可实时参与项目编辑;无限导出离线演示包,无忧演示与汇报;设计资源库自由搭建,团队共享不收费;历史版本无限生成,随时查看及回溯。

只要下载摹客RP客户端,并参与活动,即可永久免费使用摹客RP。下载地址:

画原型做设计,摹客RP永久免费​www.mockplus.cn图标

Marvel

Marvel是一款基于云端的交互原型设计工具,无需任何编码。设计师可以简单下载Sketch或Photoshop线框图,甚至仅凭一张纸上草图的照片,创建逼真的移动App或Web原型。Marvel提供了创建无限项目并允许为前3个项目添加评论的免费服务。当然,设计师也可付费,获得自由创建项目,添加评论,删除Marvel商标以及其他附加服务。

InVision

InVision也是一款免费的交互原型创建工具。 InVison之所以受欢迎,是因为其支持Sketch和PhotoShop文件的轻松导入,以构建动态设计。而且,设计师可以通过链接网页来模拟真实网站或移动应用的跳转和功能,制作出更加真实的交互原型。此外,InVision为提升反馈效率,还提供了用户可直接在原型上添加评论的功能。

其另外一个特点就是:能够在不同的“columns”中组织各种界面组件,并展示其状态,例如 "待办事项"、"正在进行" 或 "已审核"。如此,客户和设计师就能够更有效的管理各种工作流程。

Principle

Principle是一款简单且旨在创建动态界面的设计工具。其突出的特点在于支持离线设计。如此,用户工作进度就不会受到网络连接情况的影响。而且,用户创建的交互原型能够简单的转化成GIF图片或视频,以便更加轻松的分享到Dribbble设计作品集或其他地方。加之,由于其界面与Sketch非常的相似,对大部分设计师来说使用起来也十分简单方便。此外, Principle支持iOS设备预览。然而,不幸的是,Principle只支持iOS系统。对于Windows用户来说就得另找合适的工具了。

hype 3

hype 3也算是火了一小段时间的,号称无代码动效神器,像AE一样使用时间轴就做可互动的动画。PC、手机、pad端都可以直接访问(以web的形式),也可以导出视频或者GIF。3.0版还有物理特性和弹性曲线,可以发挥更强大的动画效果。

对中国人来讲,它原生支持中文这一点也非常棒!配合sketch效果也是杠杠的!

我们先来看看Hype 3制作的一些动效设计作品:

UXPin

UXPin团队,作为公认的UX设计领域的专家,经常在各种书籍和文章中分享其的设计经验和知识。他们开发设计的产品,UXPin编辑器,是一款基于Web的原型工具,支持创建线框图和高质量原型,并将它们轻松转换成交互式原型。而且,设计师可简单导入Sketch或PhotoShop图片,即可创建各类原型。 此外,此款工具还可为开发人员自动生成风格指南和设计规范,提升工作效率。

颜色选择工具ColorHexa

ColorHexa是一款基于Web,且能够帮助用户生成有效配色方案的免费设计工具。设计师直接在搜索框内输入颜色值,即可获得相关颜色详情,例如色彩,阴影和色调,以及其它替代颜色和配色方案。此款设计工具最大的优点之一就是,展示了色彩将如何被一些拥有视觉缺陷的人群所感知。如此,设计师就能够确保其设计对于受视觉缺陷影响的人们来说也是非常友好的,从而提高其设计的可访问性。此外,ColorHexa还为用户提供了不同格式色彩的替代方案。

Paletton

Paletton,作为UI 设计师们常用的色彩选择工具,是一款免费的Web工具,能够帮助设计师选择颜色,创建更加舒适和谐的界面设计。其功能设置也非常简单:用户只需在色轮上选择需要的色彩或直接输入色彩值,就可获得漂亮的配色方案。当然,设计师也可简单选择一种配色方案,然后查看在不同色调下,类似的配色方案。

FlatUI Color

扁平化设计一直很受欢迎。这也是为什么拥有一款能够帮忙设计师们选择扁平设计颜色的工具已成为必然的原因。而Flat UI Color就是这样一款提供了丰富扁平设计配色方案的网页工具。其提供的所有颜色都包含十六进制代码, 允许设计师直接粘贴复制到一些常用软件,比如 Photoshop, 或风格指南中使用。但有一点局限的地方就是,Flat UI Color只对经常使用扁平设计的用户有用。

Material Design Color Tool

Material Design Color Tool, 作为大部分设计师所熟知的Googlematerial design 的一部分,是一款基于Web的免费应用。此款应用专注于为移动端设计提供配色方案。设计师可以在其移动模板上预览各种配色方案,从而选择更适合的配色。此外,使用该款软件时,用户也能找到相关配色方案的可访问性数据,并在需要的时候对其进行调整和修改。而这,对于页面的可访问性设计非常实用。

Pictaculous

为寻找颜色设计灵感,许多设计师都会搜索大量漂亮图片进行参考。而Pictaculous能够帮助设计师分析这些图片中呈现的色彩,并给出类似的配色方案。用户只需从本地上传一张图片,就能获得拥有16进制码的色彩推荐。此外,这款工具推荐的配色方案还可以保存为Adobe Swatch文件,以方便后期使用。

排版工具Google fonts

页面排版是数码产品Web或App用户体验最基本的影响因素之一。这也就解释了为什么拥有一款能够创建有效排版的便利工具是多么重要。

Google fonts是一款很受欢迎的免费Web应用,拥有超过600种字体。每一种字体类型都都可以应用到自定义文本中,以不同尺寸进行预览。而且,该应用还会显示每种字体的加载时间,确保用户不会花费太长的时间等待。此外,Google fonts提供了在产品中嵌入特定字体的相关数据,方便用户在HTML文档的右边部分复制粘贴使用专门为所选字体生成的代码。

Typekit

Typekit是一款经住时间考验的设计工具。在其字体库里,用户可以找到并使用各种各样的字体,例如一些常用的经典字体和一些全新的字体。而且,用户只需订阅,即可获得对所有字体的访问权限。该工具界面还清晰显示了字体相关的所有基本数据,比如字体粗细和样式等。更重要的是,它允许用户查看不同大小和不同颜色背景的字体。

Fontjoy

众所周知,字体配对是排版设计最大的难题之一。如今,现存数以千计的字体种类的情况下,完美配对的过程本身就会非常漫长,而这,对于工具本身的用户体验是非常不利的。而不同的是,Fontjoy就是一款使用便利,能够快速实现Google 字体配对的设计工具。用户可简单选择字体,并设置其属性,例如尺寸和粗细等。

此款免费工具能够从谷歌网络字体中直接获取一个完整的字体库,并把它们呈现在一个页面内。用户只需选择需要的测试字体,并设置好相关参数,例如页面字体尺寸,粗细,行距。然后,等待系统匹配就好。此外,用户还可以通过应用顶部的滑条来调节对比度或相似度。

Typetester

当设计师们无法在两种字体中做出选择时,Typetester能够帮助他们快速测试和比较这两种字体,从而更加快速的选择适合的一种完成设计。Typetester支持多种字体同页面预览,并同时显示相关字体数据,例如行距和字间距等参数。而且,Typetester还支持不同来源的字体选择,例如谷歌字体或苹果Mac默认字体,并通过调整字体大小、对齐方式以及定制文本和背景进行测试。

Calligraphr

定制字体是增加产品设计创意的一种有效方式。而Calligraphr是一款可以根据手写字样创建自定义字体的工具。用户只需下载一个模板,并手写一些字样。该工具即会识别并生成相应的矢量字体。而且,生成之后,用户还可根据需要,编辑和调整相关字体的详细信息,以改进这些自定义字体。

图标工具Icons8 app

Icons8 app是一款支持Windows和Apple设备的应用,封装了超过6.5万各类数码产品图标。其图标库每天都会更新。Icons8还提供了各种引导,以帮助用户找到合适的图标,例如各种格式的 iOS、Android 和 Windows 平台的图标。而且,选中的图标还能够直接复制到Sketch、Figma 和其他工具中使用。此外,所有图标都能在编辑器内调整色彩和尺寸。Icons8支持100×100的PNG图标免费下载。如若用户希望获得所有图标的访问权限, 则需要先付费购买激活码。

Free IconMaker

当然,如若设计师并不喜欢网上的各种图标,还可以自己动手设计制作。而图标的自制可以使用一些可视化编辑器(比如Sketch, Illustrator, and Figma等)设计创建,也可选择一些免费的Web设计工具设计完成。而FreeIcon Maker就是这样一款能够帮助设计师们在线创建和编辑图标的工具。一旦注册,用户就可自由地使用所有的设计功能,例如下载SVG图标文件在软件内编辑。

IconJar

设计师们时常会下载数百个图标包,却找不出合适的一种应用到设计中。而IconJar是一个非常有效的组织者,将特定的图标封装在文件夹内进行分类。例如,如果用户需要一个名为“home”的图标,可以按其名称进行搜索,该工具就会显示所有来自不同集合的相关图标。尽管,现今IconJar只支持Mac系统,但不久就会发布其Windows版本。不足的是,该程序是需要付费的, 虽然它也为用户提供免费试用版。

协作工具Trello

在项目监管以及信息流监管方面,个人更偏好Trello。因为Trello简单有效,清晰直观。具有一系列功能的”boards”和“cards”形成了清晰高效的协作系统。用户可以将任何任务划分成各种“sprints”,并通过实时更新和图像展示,显示任务执行进程。用户也可轻松设置期限 (即截止日期), 将任务委派给特定人员, 创建清单, 并标记出最重要和最紧急的任务。而更重要的是,它不仅是一个设计成熟的工具网站,而且也是一款快速有效的IOS和Android协作工具。这一点也使用户能够更快的获取反馈,从而节约时间和精力,简单轻松的实现项目管理。所以,Trello是设计师,项目经理和客户一起协作创建快速有效工作流的最佳工具。

Zeplin

一个成功的设计项目是建立在创意团队和客户之间有效交流和沟通的基础之上。而ZePin是一个能够增强设计师和开发人员之间协作交流的平台。其主要特点是拥有一个详细的风格指南生成器,以确保设计元素能够被准确恰当地应用。用户可直接上传线框图,并将它们添加到Zeplin的项目文件夹中,从而方便开发人员获得关于设计的所有数据,包括UI组件的尺寸、颜色和CSS推荐等。

Presentator

Presentator是一款基于Web的免费协作工具,能够在协作团队成员、开发人员和客户之间实现设计资源共享。用户可以下载一个文件并设置其权限。例如,有些协作成员可能拥有完全访问的权限,而其他人可能只拥有查看的访问权限。这个工具最大的优点就是:它对所有人来说都是免费的。

设计工具Photoshop

传统的平面设计三巨头:Photoshop、Illustrator和CorelDRAW,相信学过设计的同学至少会其中的一个吧。PS可以说是万能的图形软件了,无论是P照片、画图标或者做UI都行,而Illustrator更擅长的是矢量插画和Logo设计,CorelDRAW则更适合传统的平面排版输出。后两者所谓的擅长也只是相对而言而已,其实能做的事情也还是很多。

Sketch

除了这三个,还有Mac平台的强劲新锐Sketch,它其实最开始是作为取代PS在UI设计界的定位而出现的,只是用着用着,现在还可以作为原型工具使用了,除了它的功能确实强大之外,上手容易、操作方便也是一个重要原因。

Affinity Designer

不仅有Sketch挑战PS在UI设计界的地位,在它擅长的图像处理和插画方面也有另一个对手——Affinity Designer。相比PS那每年高昂得吓人的正版授权费,它只要328元的价格可谓是厚道到家了。同时AD的功能也同样强大,在分屏预览、响应式设计以及画板等功能上都有很不错的表现。

对于交互设计师的意义

作为一个设计师的基本素养,你说你不会用PS?

画原型的时候可以自己P个图标、处理个插图;

做高保真原型的时候,可以自己拿着PSD切图和导出;

会做UI的交互设计师是强大的,可以单枪匹马完成一个APP的所有设计工作。

动效设计工具

Adobe After Effects

说到做动效,最经典的软件就是Adobe家的After Effects了吧。我的同事Nefish就是使用这款软件的动效大神,腾讯电脑管家小火箭的很多动效都是他在AE里先做出Demo,确定最终效果后,然后我们才写出动画说明书,给到开发进行还原的。比如我们小火箭的深度加速功能,可以让用户选择几个需要关闭的进程,然后就会有一个加速的过程,我们将这个过程和小火箭这个概念结合起来,包装成一个坐在小火箭内部,在宇宙中加速穿梭的感觉:

如果没有AE这样方便的工具在,想要实现这种如丝般顺滑的动画效果是千难万难的。一些很复杂的动画,可以在开发的时候,直接使用AE导出的序列帧来还原动画效果,这样就一定能够保证百分百还原设计了。不过相应的,也会增加一些图片的数量和体积,这里需要做一个平衡和优化。对于交互设计师的意义

交互不应该只有逻辑跳转,还需要有过渡动效,掌握一个强大的动效工具可以加深我们对交互动效的理解;

也可以作为高保真原型的一种补充,很多团队的高保真直接就是用AE做的;

它还可以用来做产品的宣传视频,当团队中没有这样的人才的时候你可以果断补位。

2、Adobe After Effects

三维设计工具Cinema 4D

如果你的平面功夫已经很好了,动效也会了,是不是就没有可以挑战的东西了?当然不是,你还可以挑战更高的维度——3D动效!我的好基友,QQ音乐的高级视觉设计师Geeco就做过这种事情,从零开始学Cinema 4D,最终做出了屌炸酷爆炫的QQ音乐7.0新版闪屏,你可以感受一下:

完整视频可以看这里:

除了Cinema 4D,你的选择还有Rhino(犀牛)、3DMax这种3D建模软件,如果有编程基础,想挑战更高维度的,还可以去试试Unity 3D和Unreal Engine 4(虚幻引擎4)这样的游戏引擎。它们都有各自的应用场景,比如我们的3D小火箭就是用Rhino建模出来的:

关于游戏引擎,我们设计中心的设计师们还真的用虚幻引擎做出了很酷炫的大数据可视化产品,展示效果已经秒杀竞争对手几条街,获得了领导层和市场的强烈好评。由于还是在起步阶段的To B产品,我就不放图了,敬请期待它的爆发吧。对于交互设计师的意义

有些动效如果用3D来实现,会更酷炫;

比别人多一个维度的思考空间;

游戏交互设计师对游戏引擎的了解是必须的;

结语

一款工具,只有在真正需要并懂得如何使用它们的人手里,才能发挥其应有的作用。所以,无论如何,不要忘记学习,提升专业技能,并选择合适的设计工具,创建更加优质的设计作品。

UI话题

https://talk.ui.cn/subject/21

精品素材

https://www.xueui.cn/category/download/excellent-material