正文

交互设计怎么做（产品交互设计）

发布时间：2023-04-28 13:19:24 稿源：创意岭阅读： 1254

大家好！今天让创意岭的小编来大家介绍下关于交互设计怎么做的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

1、如何学会交互设计
2、交互产品设计开发流程那五步
3、交互设计基本知识整理
4、UI新手如何自学交互设计？

交互设计怎么做（产品交互设计）

一、如何学会交互设计

交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。

1. 看书。看书看什么书？你可以先去看【破茧成碟—用户体验设计师之路】了解整个交互的工作流程是怎么样的（前面已经说过）。然后看看【点石成金】【简约至上】【用户体验要素】【设计师要懂的心理学】等等，先树立起做交互基础思维，千万不要一开始去看【交互设计精髓】，里边讲的东西比较深奥你会看不懂的，看了还伤学习的冲劲。至今我还在研究【交互设计精髓】上所说的东西。

2. 玩app 。手上应当准备两部不同平台的手机，Android和ios，助你了解Android平台和ios平台设计规范的不同。你可以多下载一些苹果商店推荐的app，各个类型的都下载几个来玩玩，研究别人app上各个功能信息为什么要这样构架。比如知乎上添加回答页面中，为什么键盘顶上的那条栏要放置那几个小功能？比如淘宝购物流程，为什么点击提交订单按钮直接弹出支付密码输入框？一定要带着脑子去看和玩app 。而且新手要经常看，一有空就看就研究。主要研究：流程为什么这样子设计、信息为什么这样子架构、各个控件的交互样式。

还有我推荐可以动手用ps临摹电商的详情页，和列表页布局，看看人家是怎么做的。临摹的时候将页面弄成黑白的。让你更加容易了解别人如何做层级结构。

3. 学软件。学习什么软件？绘制原型的axure ；信息构架的xmind；流程图绘制的Visio 。这些都是比较主流的交互工作中使用到的软件，也不给你推荐那么多其他的，给你个唯一的你就不纠结到底选什么了。还有附加软件: Photoshop 。你起码要学会这四个才能在工作中使用软件得心应手。

对了，你也可以用axure来画流程图，不过就是没那么专业。

还有，学axure 一开始你可以不必那么深入，因为一般自主研发产品的公司不会让出动态的原型图，只会做出静态的。静态的方便程序，UI，产品去查看。等你可以上手项目之后，你再慢慢研究axure的动态使用吧（以防将来要出动态图）。

4. 记住并了解清楚可用性十大原则，熟读ios设计规范、Android设计规范。做完这件事之后才去实践项目吧！

5. 试着做项目。准备得差不多了就要开始实践了。实践是检验真理的唯一标准。你在书上学到了多少东西就在你做的项目中体验出来。你可以自己试着策划一个小应用，自己提点小需求，然后自己试着把交互弄出来。弄出来后怎么办？当然找大神指导啦，一定要厚着脸皮去，不要怕发打大神的傲气高扬。或者你也可以试着改进某些产品中你发现的交互问题。反正就是要尝试做项目，因为你将要用这些项目来进行接下来的交互实习面试。

5. 反复做项目并看书，总结自己的优缺。做项目不能停。需要不断地做项目，才能验证你学到哪些东西。边做项目边看书。然后总结自己在项目中的优缺。最后将自己认为做好的一个项目拿去面试。面试的项目不需要多，那一个精品就足够了。

二、交互产品设计开发流程那五步

1、用户研究

交互设计的初衷就是解决用户的问题。不论设计什么产品，能够被用户认可的途径只有这个产品解决了他们生活中的一个问题。交互设计的第一步，不论是对成熟产品还是初创产品都一样，就是定义这个设计到底要解决用户的什么问题，这一步可以说至关重要。

2、确定人物角色（Persona）并建模

如果第一步的用户研究有所成功，这时你应该对你的用户有所了解了。根据上面提到的五个方面，你需要挑拣出最典型的一个或几个形象建模。例如逛知乎的人物角色可能有：比较普通的求知者、特定领域的专家、到处灌水的……

3、画线框图、制作原型

到了这里，你对你的交互方案已经有了一个很抽象的想法了，只需要把它具象化就可以了。这时候需要做的就是把流程图以及线框图画出来，它可以帮你把产品的逻辑理顺，同时也是跟PM以及程序员沟（si）通（bi）的利器，特别是对于比较复杂的产品来说，流程图、线框图显得尤为重要。

4、测试评估

丨专业人士测试评估

原型完成后召集两三个设计师或者对交互比较了解的人，使用并评测原型。你可以将原型所关注的几个任务列出来，以免专家不知道原型哪部分可交互哪部分不可交互。

丨用户测试评估

原型通过专家评测后，你可以找一些典型用户使用原型。你可以把任务列给他们，让他们自己尝试完成任务。中间遇到的问题可以记录下来，设计师通过观察来进行评分。

5、改善设计，持续迭代

说到最后，交互设计的精髓不就是产品的迭代么，哪里没做好改哪里。对于开发周期很长的产品，互联网行业赋予设计师最大的自由度，就是随时没做好，咱就改呗~具体步骤就是酌情重复前面四步啦~

三、交互设计基本知识整理

交互设计：人与产品（系统/应用/服务等）互动交流沟通的过程设计；产品的输入方式是否直观、简单、清晰、安全；产品的输出方式在不同环境中的适应性、以人类和文化角度表述而易于被理解。

基本原则/标准

1、易用性易用性包括：易理解性、易学习性、易操作性。2、交互设计的目标划分·让用户容易理解：层次清晰；功能区块的划分明确；区分可交互元素与不可交互元素；入口要明确，区分优先级；·让用户操作简单：符合常规的操作流程；符合平台的交互特性；产品自身操作的一致性；及时反馈；更短的交互路径；减少用户记忆；减少输入，帮助用户做选择；防错&容错（不可用置灰、格式限制、可撤销）；

3、尼尔森十大可用性原则

1.状态可见原则2.环境贴切原则3.撤销重做原则4.一致性原则5.防错原则6.易取原则7.灵活高效原则8.易扫原则9.容错原则10.人性化帮助原则

4、诺曼的设计学三层次（《设计心理学》）与交互设计目标体验目标/本能层次——想给用户/用户想要什么样的感觉（激发情感、唤醒某种记忆、视觉/听觉/嗅觉等的刺激带来的情感最终目标/行为层次——用户想做什么（使用产品的目的）人生目标/反思层次——用户想要成为什么样的人（品牌形象）

6、满足不同的需求

用户。产品，自我需求

7、用户体验相关设计原则减少用户输入/避免重复、过多的操作（减少页面跳转；重要信息前置-不需要点击就可以看到；先露出一部分，点击后展开，让跳转过程更加自然、顺滑；）交互设计元素与非交互设计元素区分明显防错&容错帮助用户记忆适当引导、提供帮助交互路径清晰、让用户知道自己所处的位置保持一致性文案清晰易懂直觉设计设计流程/方法

其它

1、反馈设计的重要性2、一些必要的关乎设计学的定律奥卡姆剃刀原则：如无必要，勿增实体。菲兹定律：到达目标的时间与移动距离成正比，与目标大小成反比。希克定律：选择越多，选择时间越长。对于设计而言，可以帮助用户选择（默认选择、不可选的情况置灰）、减少选项、或者将选项分类、区分权重、让用户分步选择等。让用户一次面对的选项较少。特斯勒定律：复杂性守恒定律。产品的复杂性守恒不变，想要让用户在使用中变得简单，需要将复杂性转移给程序来处理，减少用户的操作，提高输入效率，让人来做一些决策等简单但是具有控制权的事情。美即好用效应：当产品足够美观、吸引人时，用户可以容忍一些操作上的不方便。比较适合于文艺类、慢生活类的产品。不是故意做得难用，而是在设计决策时，可以为了美观牺牲一些操作效率，如增大留白/显示面积会让浏览效率降低。多尔蒂门槛：系统/产品对于用户的操作响应时间<400ms，才能让用户保持专注，提高沉浸感与效率。一方面对于动效设计而言，时间需要把控，不能过长。另一方面，对于网络、设备性能等引起的等待时间过长，可以考虑使用过渡方式（过渡动画、占位符）来减缓用户的焦虑情绪。雅各布定律：操作方式与主流产品或者同类型方式保持一致，可以让用户更快上手。没有更好的交互方式时，采用通用的方式会让人更容易接受。简洁法则：人的大脑会简化、归纳、过滤外在的信息，方便简单快速的理解外在的世界。邻近原则&相似原则：距离接近/具有相似性特点的对象会被认为是一组。模块内部、模块之间的距离、样式的一致/差异会区分不同的模块。帕累托原则：二八定律。对于大多数事件，80%影响由20%的因素造成。帕金森定律：任何任务都会拖延，直到可用的时间都用完为止。同域原则：元素在一个具有明显边界的区域内，会被认为是一组的。类似卡片风格，卡片内的内容被认为是一组。米勒定律：短时记忆，人平均能记住7±2个项目。对于信息展示而言，一次展示的条目不宜过多。冯·雷斯托夫效应：当存在多个相似的对象时，与众不同的那个容易被记住。对于设计而言，这也是“设计点”的所在。突出真正重要的内容。蔡格尼克记忆效应：人们对于未完成的任务的记忆比已完成的更深刻。对于任务的设计，需要同时关注已完成与未完成，促使、激励人们去完成未完成的任务。3、交互设计五要素——

人、动作、工具或媒介、目的和场景构成交互设计的五要素

四、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万的属于资深设计师，需要了解相关类型的竞品，知道自己产品的特点和命门，能够协调运营和研发资源，了解产品的商业目的，能够很好地完成交互设计的布局等。考虑的层次越多，完成产品的维度越高，薪资越高。再往上走的话，基本上就是管理岗位了，要全权负责一款产品，主要职责可能就是招聘人员、提升效率、制定规范之类的了，这个就不适合给新人讲了。

以上就是关于交互设计怎么做相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。