交互设计怎么入门呢？

经常会有童鞋来问我：“交互设计如何入门？工业设计转行做交互设计的门槛高吗？用户体验和交互设计的区别是什么？”

工业设计转行做交互的门槛并不高，就像工业设计需要考虑用户和实体产品之间的互动一样，交互设计更多的是考虑用户与界面之间的交互，只是换一个载体，其理论体系挺相似的。设计技能并不能弥补设计思维上的欠缺，技能只是一种表达方式，而Design Thinking才是最为核心的价值。

基本概念

浏览招聘网站上的讯息，就会发现UED，UX，UI等不同头衔。那么他们之间怎么区分？

侧重点不同

1、UED（User Experience Design）用户体验设计，有些公司也称为UX，更关注用户的心理预期。是基于用户画像、和细分用户使用场景，去了解用户在使用过程中存在的体验不足，关心的是整个服务系统中人的交互行为。

设计要具有全局观，关心用户在服务各个环节中的不同需求，需要掌握行为学和用户心理学。可以说UED是个全流程设计，设计师需要掌握一些用户调研能力、一些交互模型搭建能力、一些界面设计能力。

学生口中的交互设计更多的是指IxD（Interaction Design），主要定义交互系统的结构和行为，交互设计师只关注设备和用户的交互行为，需要具备逻辑思考能力和行为学背景。

UI（User Interface）交互界面设计，是用来表达功能和反馈用户行为的重要媒介，思考更多的是设计美学，考验设计者对设计工具与视觉法则的掌握程度。

新零售的无人货架（来源网络）

以无人货架为例。UED要考虑的是用户在使用无人货架购物的全流程的用户体验，包括了扫描二维码，进入应用程序、浏览商品列表、在线付款、线下获得商品、获得红包等。IxD要考虑的是用户在使用应用程序的过程中的交互问题，包含浏览商品列表，线上付款和获得红包等流程。而UI只需要关注应用程序中各个界面的设计，例如商品列表页、收款界面、支付成功页面、红包页面等的具体视觉设计。

当然，在实际设计中并没有这么明确的界限。理解不同，才能明确选择。

交互设计流程

所有的设计流程都可以参考IDEO的design thinking process，如下图

IDEO‘s Design Thinking Process

交互设计流程：

1、DISCOVERY：理解所要解决的问题。设计被用户所认可就是解决用户在使用和体验上的痛点，满足他们的需求并给予惊喜。第一步Dicovery对于任何产品都是适用的，无论是初创产品还是成熟产品的迭代。

挖掘用户需求的方法有很多，比较学术全面的介绍就是Design Research Methodology，比较常用的调研方法有问卷调查Questionaire、桌面调研desk research、访谈Interview、观察Observation、体验Be a user等。其中问卷和桌面调研为定量分析，通过大量的数据分析找准市场定位以及技术支持；访谈和观察为定性分析，帮助你更加准确地抓住人群特征和现有设计的不足。前期调研的不充分，很可能直接导致后面用户行为、用户需求的错误分析，在设计阶段就无法真正缔造有价值的设计，说服不了自己，更说服不了甲方。

2、INTERPRETATION：定义用户需求。针对上一阶段调研所得，设计师要提炼理解并融合用户的需求，获得用户画像Persona。Persona指的并不是某一个具体的人，而是Lead User，是一类生活习惯相似，消费水平想近，最为重要的是核心需求一致。定义流程如下图所示。

Lead User 定义流程（来源网络）

3、IDEATION：提供解决方案。经过头脑风暴尽可能多的收集想法，经过筛选找到可行方案，进行线框图／流程图的绘制，最后到原型图的绘制，所有的创新方法在这个阶段都适用。很多时候，这部分是团队协作的结果，单打独斗的设计容易片面而造成交互流程上的不完整。

Mobile Wireframe（来源网络）

4、EXPERIMENTATION：测试。测试的方法有很多种，罗列两个经常用到的方法：a.可用性测试usability test，以线上app的测试为例，就是在手机端的虚拟机上进行跳转、响应、界面等一些列的测试。

AB test，这个方法经常用于效益不确定的情况下，在现有用户抽样，一组所见设计为方案A，另一组为B，在一段时间之后，用调研或者收集数据的方式评估，胜者最终上线为所有用户所使用，这个方法是公司最常用的方法。

5、REVOLUTION: 迭代过程。随着时间的推移，设计师对于产品的理解会逐渐加深，一开始设计的交互流程可能会无法满足后来用户的需求。这就需要交互设计师不断体验，不断迭代，不断修复漏洞。这里IDEO的Design Thinking Process依然适用。

总结：要学会问WHY（为什么想要），理解WHAT（到底要什么），这两个问题理解清楚后，再去想HOW（如何实现）。希望每一个设计都能让解决一些用户需求，make the world better。

工具技能加持

熟练掌握工具可以帮助你快速导出设计方案，提高工作效率。

1. Axure：鼻祖级的交互设计工具，功能大而全，可做低保真，可做高保真，可做动效，插件众多。对于移动端的设计在软件本身的操作上不是很灵活。高保真的绘制精细度也不够，目前更多的是用来做低保真原型。

Axure界面截图（来源网络）

1. Sketch：针对移动端而设计的软件。可做低保真、可做高保真。且高保真的效率非常高，各类阴影效果和图片裁剪功能非常齐全。插件众多，比较常用有可导出html各式标注的measure，可快速生成占位符的Content Generator，移动端的虚拟机Mirror等等。基本上可以满足交互设计师在设计中的需求。

Sketch软件截图（来源网络）

1. Flinto：原型设计软件。界面和sketch非常相似，在做动效方面比较出色，界面间的转场，滚动效果以及点击反馈等。并且可以直接与sketch相匹配，文件相互导入导出。

存储方式为mov以及gif，可直接发送给团队成员，对于展示交互流程非常方便，可直接上传至dribbble，与全球优秀交互交互设计师分享。 

Flinto界面截图（来源网络）

1. Cinema 4D：适合做比较复杂带有空间变化的动效。功能非常强大，但不适合做app页面间的动效，比较适合做专题页中的营销动画，以及动画游戏的特效。

Cinema 4D（来源网络）

1. 墨刀MockingBot：强大易用的原型设计与协作软件。借鉴了Axure的一些功能，优点是操作简单容易上手，可做全流程的mockup，同样可直接倒入sketch的高保真文件。

墨刀的每一个图标都被设置成模块，带有动作链接锁链，可通过直接拖拽链接界面，非常傻瓜式的操作。它可以允许设计者邀请一名或多名队员参与协作，也可直接导出到手机上的虚拟机，直观地体验交互流程。适合做低保真原型，与高保真的交互流程。

墨刀界面截图

还有Adobe的AE和PS也可以用来做原型设计，教程网上应有尽有。还是强调软件只是帮我们快速导出设计的工具，只要熟练掌握一款全面型软件，或者几种软件相互配合覆盖工作流程即可，做到最直接地向产品经理展示交互流程设计。

推荐一些交互设计网站：

UI设计

1.http://www.uiparade.com/发现最好的UI设计图库

2.https://www.mockplus.com/blog推荐UX / UI设计资源和有趣专题

3.http://designrfix.com/logo/tips-design-perfect-logo提供最流行的网页和图形教程

4.http://www.fltdsgn.com/给出案例和相应的UI网站

5.https://www.siteinspire.com/让用户体验不同网站中的交互设计

6.https://www.chainco.cn/app帮助交互设计师进行演示的工具

动效设计

1.http://www.uisdc.com/c4d-photoshop-2017-font-poster教你用C4D+PS作出2017特效字体海报

2.https://www.youtube.com/channel/UCKQ7xHm52MlA8MSxjVj-Nwgyoutube上专注于分享flinto动效制作过程的博主

3.http://www.woshipm.com/rp/614989.html?utm_source=tuicool&utm_medium=referral墨刀教程：如何快速制作一个APP首页原型