UI新手如何自学交互设计？

UI新手如何自学交互设计？经常有人问我新手如何自学交互设计，我之前也录过一个视频给大家，没想到放到网上后点击率很高，看来对新人是的确有帮助的。所以今天再次针对这个问题做阐述，修正了第一版的一些内容，也更具有针对性。

以下七点是我归纳的大家在学习和工作中经常感到困惑的问题，下面就逐一解答。

顺便在此给大家分享一个学平面设计的网站“兔课网”，大家可以百度搜一下：兔课网，兔课网是一个专门学设计的网站，上面有很多的设计教程，还有一个魔鬼特训班，魔鬼特训班大家可以挑战一下，很多人的学习效果都非常不错！

一、令人眼花缭乱的专业术语

专业术语这个问题的确令人头疼，来看看下面的对应关系：

在这四对关系中，GUI对应界面视觉（画icon，画视觉效果）、PM对应产品经理是比较准确的，但是UI这个词相对来说就比较混乱了。有人认为UI是视觉设计，有人认为UI是交互设计，这是有一定的历史原因的。在很多的大公司里，我指的是诸如腾讯、阿里、百度、谷歌这样的巨头，它们的UI分工是很明确的，指的就是交互设计，交互设计师的主要任务就是发掘需求以及根据需求来进行构架。但是在一些小公司里是没有专门的交互设计的岗位的，UI设计师通常既要做交互也要做视觉，这就造成了UI的指向不是很明确。所以有时候很多同学找我说要学UI，我其实不太清楚他们到底是想学视觉还是交互的。

UE这个词常见于一些大公司，它其实只是为了跟UI有区分，指的真的就是交互设计师。但是UE在做交互的同时也多参与一些用户研究的内容，这样的岗位一般只有规模比较大的公司才设置。在很多公司里，发展到后期你可能既是交互设计师也是产品经理，因为交互设计师和产品经理在前期的工作任务中，特别是对需求的把控上，有很多是重合的。这就是四个名词所代表的意思了。

二、交互和视觉如何分工

下面我们再来看看视觉设计师和交互设计师工作职责的差异，下图形象的展示了两者不同的任务：

视觉设计主要包括Logo、界面元素、图标（icon）、色彩与字体、形状与尺寸以及视觉效果设计，它的关注点是“界面”，把界面更好地呈现出来。虽然我在视觉设计下方标注了“关注美丽”，但这只是区别于交互设计来说的，光是“美丽”是不够的，还要注意信息的可读性和易读性。视觉设计与平面设计不同，比如说给一个房地产公司做宣传海报，雇主要求海报视觉上打动人，文案也要有亮点吸引人，这是平面设计；但是GUI的话，不管是做手机的APP还是WEB也好TV也好，要考虑到每一条信息都是要给用户读取的，这就要求视觉要有稳定性，不能有些易读有些难读。

作为交互设计师更关注的是“逻辑”，在做设计的时候实际上是在建立一种体系。也就是说在设计产品的时候要考虑出口入口、寻找需要元素、如何操作等等。所以说交互设计师前期需要进行需求分析，要更好地区理解和分析用户的需求，然后要进行信息构架，毕竟需求最终要反映在信息构架上面。什么是信息构架呢？你看我们使用的手机，图片有自己的固定位置，导航有自己固定的位置，文字、说明也有固定的位置，这些东西就是由信息构架来决定的。还要说明的是文案，这也是属于交互设计范畴的，因为界面需要设计一些信息被用户读取。

所以说基本上交互是带着视觉前进的，因为交互要对最终的体验负责，而视觉也是体验的一部分。

三、工作的流程

下面来谈谈不同的人员在具体工作中的分工：

先来看产品经理，产品经理要对项目的最终的结果负责。产品经理一般来说要为项目背黑锅，比如老板要求三个月做出产品并且目标用户达到十万，那么这些任务就落到产品经理的身上。

然后产品经理对交互设计师的要求可能就是要保证产品的构架清晰，有良好的体验。那么交互设计师要根据这些要求去挖掘其他的需求，然后根据用户的反馈或者是迭代的一些东西做一个完美的信息构架，把信息先设计出来。哪块放导航，哪块放图片，哪块放主体内容，到底采用什么样的结构，这些都是要考虑的。

交互设计进行到0.5版本时，即把产品的大体结构设计出来后，这时视觉设计师和开发人员就可以加入进来了。视觉设计师开始画界面，根据信息把视觉呈现出来，比如重要的信息颜色可能更醒目一点，同时保证视觉流的平衡，总之为最终的“美丽”服务；开发人员的职责就是实现效果。进入1.0版本，视觉效果做好后做高保真的迭代呈现给用户或上级等。这时候测试人员也要跟进了，做一些可用性测试、bug测试以及体验测试。

我讲的比较笼统，只是把大致的流程梳理一下，让大家看到各个角色是怎么分配的，因为考虑到新人讲得太细的话也不一定能够明白。

四、视觉类UI的自学

视觉类UI我们称之为GUI，从软件篇来看的话，有些培训机构是有点坑人的（这里就不点名了），因为大部分公司只要用PS就可以了，即精确地把图片画出来然后切图。交互设计师一般用PTT和AXUR来做原型，这三款软件基本上就可以覆盖你的职业生涯了。但是很多培训结构却让学员花费大量的金钱和时间学习软件。剩下的一下软件像AE/flash属于锦上添花的技能：AE可以输出高保真原型动画，便于展示你的想法；flash可以做高保真的交互动画。其实这些东西在企业里是有研发人员协助你完成的，所以会更好，不会也无大碍。IOS是有专门的软件处理高保真原型的，可以现用现学，不太复杂。

所以总的来说还是要把PS练好。我特别想告诫新人的是：软件和设计完全是两回事，软件用得熟练不代表设计做得好，它们只是实现设计的工具和手段。而设计的学习重在培养思维和视野。

下面简单介绍一下视觉流行的三种风格：

这个是水晶风格，由微软首创，现在中国的rigo design也是做的不错的。水晶风格的特点是晶莹、有玻璃质感和光感，rigo design已经把水晶风格做得很棒了，贴两张图看看：

下面来看拟物风格：

新手如果想快速学习的话可以尝试临摹拟物风格的作品，这个确实难度是比较大的。苹果原来就是拟物风格的代表。来欣赏一些作品，画得的确精致：

还有扁平化风格的设计：

以及中国风的设计：

中国风的东西尽量还是不要做了，这种风格其实只适合比赛。真实的项目里对icon识别度的要求是很高的，中国风的设计识别度太差了。对icon来说，美观不是第一位的，识别度才是。

零基础的新人我建议采用这样的方法来提高自己的视觉设计能力：先临摹一个icon，然后根据这个icon的风格设计其他的icon。临摹考验的是你对软件的熟悉程度以及对细节捕捉的能力，而自己模仿设计才是真正提高设计能力的。这两步认真走下来基本上可以胜任初级的视觉设计师了。

icon临摹完之后可以尝试画一些界面，找找界面的感觉。特别是一些跨专业的新人，通过临摹找设计感觉是比较好的方法。

五、交互设计需要掌握的知识

交互设计的自学是非常困难的，最好有人带，有人点拨。这也是我们集创堂现在主要做的事情，带一些有经验的设计师提高交互设计的能力。如果想自学的话，一般来讲需要培养一下三种能力：

心理学的能力有助于了解、定位用户，让你能更好地在产品的博弈中找准用户的的需求，继而发掘出更符合用户内心的一种设计模式，所以心理学的知识作用还是很大的。

逻辑学的知识帮助设计师将找到的用户需求构建出来，形成一种体系，让产品更好用。做产品需求很强的逻辑性，哪些需求重要哪些不重要、点击与功能如何对应、信息的隶属关系都需要厘清。所以逻辑学知识重在构建，视觉设计的知识与最后产品能够实现的效果相关。

这是三大能力各自起到的作用，优秀的设计师必须要掌握。当然如果提出更高的要求的话，最好再关注一下商业的知识。

总的来说，交互设计的自学还是比较辛苦的，视觉设计通过临摹等方法提高还是显著的，但是交互设计还是需要人指点的。

六、今天设计什么

说句恐怖的话，目前90%的设计师是不合格的。我看到很多人在论坛、贴吧里讨论的还是怎么设计界面之类的，这样的关注点是不对的。关于UI的前途，我们可以看到今天的手机、PAD、电脑、智能手表等都是通过UI来控制的，UI成为人和今天的大数据信息的唯一接口，所以发展潜力非常巨大。

在未来，像无人拍摄飞机、家庭只能电器、大型工作辅助设备等都是通过UI控制的，UI依旧是人和数据的接口，UI设计的需求量巨大。我们之前的社会是人和人交往的社会，慢慢将过渡到人和数据的社会，实际上人和数据的接口就是UI。

很遗憾，我说过90%的设计师都不合格，他们的关注点依然是界面好不好看，即“美”的问题。今天来说，“信息”才是首位的，来看几个例子：

来看今天我们用得很多的三款APP：微信、淘宝、58同城，如果单纯从审美的角度来看，它们的设计并不完美，但实际上几乎每个人都在使用它们。根本原因这些APP能够提供我们需要的信息。

七、设计师的薪资

相信这个问题是大家比较感兴趣的，我大致梳理一下不同薪资水平对设计师能力的要求。年6万以下的设计师其实就是美工，工作多是画画cicon、改改图片，基本只对视觉效果负责，这种类型的员工完全还没有走进交互设计和信息设计的门槛；6万-12万年薪的我们称之为初级交互设计师，初步具备了根据需求来进行构架的能力，参与分析竞品、定位人群，同时也参与一些GUI的工作；12万-24万年薪的算是中级的UI设计师了，需要懂得在前期的时候挖掘用户的需求，根据需求进行构架，有能力精细地把控产品（包括文案、颜色等）；20万-40万的属于资深设计师，需要了解相关类型的竞品，知道自己产品的特点和命门，能够协调运营和研发资源，了解产品的商业目的，能够很好地完成交互设计的布局等。考虑的层次越多，完成产品的维度越高，薪资越高。再往上走的话，基本上就是管理岗位了，要全权负责一款产品，主要职责可能就是招聘人员、提升效率、制定规范之类的了，这个就不适合给新人讲了。