近万字干货！可能是最全面的交互基础知识总结

本文堪称设师必备的交互基础知识大全，无论你是手还是工作多年，如果是专的交互设计师，对互不够熟悉的，看篇就完够。

一、交互设计是什么？

互设计 Interaction Design 也被成为 IXD。互设计建立人与计机便捷沟通的通道，它的目标是创造用和用户验俱佳的产品。为 UI设计师，我们在工之中经常对接互设计师和产品经理，他们具有富的互识和经验。是不是我们为 UI设计师，就只需要心做视面的工而不需要互设计呢？当不是，在视设计面更地考虑局和互原则才以让我们的界面更，视设计师是互设计中非常重要的角。

二、用户体验

在工中经常听到 UED（用户验设计）和 UCD（以用户为中心的设计），见互联网行业非常重视用户验，而用户验绝不仅仅是要样子看。有设计师只关注视面，认为产品战略等用户验度和自己的设计无关，么就和产品经理等角处不同的世界。「他们为什么要我么改？」、「为什么里文字要浅一点？」有时不理对方的思考角度就造成争执。用户验（User Experience）是用户使用产品的心理和感受，用户验现产品设计以人为的设计精神。其早在互联网出现之前就有「顾客先点鸡就先有鸡」、「顾客就是上帝」种说法，并且西方很大司施乐、联合华等大司早在互联网行业出现之前就已经开始进行研究用户验，见用户验对所有产品是么的重要。但是让人摸不着头脑的是，用户验有时非常地主观。因为用户验背影响用户的因素有人的喜、情感、印象、心理反应等，有人明明有摩拜却要走很远找 OFO，也有人只肯基而不麦当劳。选择并不是优胜劣汰，而是有背的原因的。要想让我们的产品被人喜欢，我们需要研究用户。

三、用户研究七种方法

但用户可能是百万人呢！面对这抽象的群体然后告诉要以为中心计这多抽象啊。这多用户甚至有用户的声音也是矛盾的。底怎了解用户的心声呢？

1. 用户画像

根据产品的调性和用户群体，用户研究队可以计出一个用户的模型，这种研究的方式被称为用户画像。用户画像是由带有征的标签组成的，通过这个标签可以更好地理解谁在使用的产品。用户画像建立后，每个功能可以完成的用户故事：用户在什景下需要这个功能。这，所计的功能就会更近用户实际的需要。

比我们现在要设计一个女装购物应用，么我们以做个用户画像：小美，在北京国贸 CBD 上班，21岁，收8000，喜欢淘宝购物和电视购物。使用我们产品的目的是为寻找正品时尚大牌服装进行网购。

• 美因为刚毕业所以一方面喜欢大牌一方面资金短缺（启发：的产品是不是要解决这个痛点？）
• 小美是时尚OL，审美很高，不喜欢俗气的设计。（启：界面设计是否考虑不要使用粉粉嫩嫩的颜而使用大牌的黑白？）。

，即使美并不真实存在，但是她指引了的产品计。下来，还可以给美增加一个头像，在做计想象这个人就是真实存在的用户，她会对的计有什法。当完成用户画像之后，还可以着计用户故事：美经常需要在工作穿符工作气质的衣服，也需要在约会有晚礼服之类的服装，可是美的收入有限，她眼光较高但是对价格过高的服装无法承担，她使用的 APP 就是为了寻找正品且价格适中的服装。那，美在哪用的 APP 呢？这就要为美继续计一个用户使用景了：美在开会可能会开、在地铁也会浏览、在清晨开衣柜也会浏览。基本来说是碎片间，而且是有着装需求。（启发：是不是需要把字号调大以适应地铁颠簸的阅读环？是不是需要计流量模式免得刚刚毕业的美花一笔巨大的流量资费？）

△ 用户画像

2. 用户访谈

邀约用户来回答产品的相关问题，并记录作出后续析。用户访谈有三种形式：结构式访谈（根据之前写好的问题结构）、半结构式访谈（一半根据问题一半讨论）、开放式访谈（较为深入地和用户交流，双方都有主动权来探讨）。用户访谈置要注：用户不可以是互网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适产品开发的全部过程。

3. 问卷调查

可为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题，制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适产品策划初期对目标人群的投放，另外注一个问题最好收集10个问卷，也就是如果你有10个问题那至少要收集100个问卷才是有效的。要知道不是所有人都愿耐心地填写问卷，可能敷衍了事的回答会扰乱的判断。

4. 焦点组

焦点组一有6-12人组成，由一名专业人士主持，依照访谈提纲引导组成员各抒见，并记录析。并且在焦点组的房间会有一扇向玻璃窗，用户是不面有谁的。而在面坐着的通常是开发队，可以清晰地用户是如何吐槽的产品的，但是没有权利直和用户进行解释。焦点组需要殊的房间和备，主持人也需要训练有素，焦点组别能够析出用户在没有说的情况下如何使用的产品和对产品的不。

5. 可用性测

通过筛选让不同用户群来对产品进行操作，同观察人员在边观察并记录，可用性测的要求是用户不可以是互网从业者而应该是真实产品的用户群体。但是可用性测一要有一个可用的软件版本或者型供人测才可以，在软件开发的前期不适用这个方法。

6. 眼动测

使用殊的备眼动仪来追踪用户使用产品眼睛聚焦在哪，盲是哪。比如一个网站通过眼动测可以知道用户的视觉会动屏蔽网站的常见广告位置，这如果希望提高广告的点击，就需要把广告位放置于用户聚焦间较长的位置。眼动测的备比较专业，通常在公较难开展。

7. 用户反馈和大数据析

根据市提供的反馈和数据得出观的判断和理的推测。用户反馈也是用户研究的一个重点，用户反馈主要是用户通过产品的反馈入主动向开发者提出的见。

有方法，我们就能更地用户和接近用户。但是要注意，用户研究也是有陷阱的。比：填写问卷和参与研的用户能并不是核心用户；提用户反馈的用户之外能有更沉默的用户等。总之用户研究是一个必要的手段，但是仍需要产品团来对产品的方向做出决断。

四、用户如何使用产品

1. 使用景

刚才介绍了用户使用的景是根据产品的功能和决定的。脑的使用景是正襟危坐，持鼠标。而移动端则是随随地使用，的用户可能在地铁、在厕所、在吃、在上课中怕老把机藏在洞、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的候没有开灯地浏览等。这要为用户考虑，如果在使用产品的各种景中有什需要，是不是需要流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便视频、是不是需要缓存视频、是不是界面目前不友好、是不是扫二维码需要个功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用景的产品一定是会遭吐槽的。久之前听同事在吃抱怨过「大爷的，也不搞个提示，早晨在地铁用 4G 流量以为是在家用 WIFI，结果了一集《甄嬛传》花了80块钱」、「哎？你是不是早晨开会玩游戏了？你的比都给推送了哈哈哈」。

△ 的产品中的用户使用景表格

2. 操作势

网页计所的脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最位甚至可以是一像素。而移动端不一，移动端备中使用指来操作界面。一来说，指点触域最尺寸为7×7mm，拇指最尺寸为9×9mm。也就是在@2x计中为88px（或44pt）。这个神奇的88PX在移动端应用广泛：多表项的高度是88px、导航栏高度也是88px等等。那您可能会说，也不对吧，有些界面上的图标上去没有88px啊。是的，但是那只是视觉，可以通过增加图标点击域的方式（比如给60像素大的图标左右增加22像素的透域）来让图标更好点击。千万在计不要把操作域放得别近，可以把所有点击域用88px标记是否有重叠的情况，避免点击一个图标误点另一个图标。除了点击域，移动端还可以利用各种势来进行各种操作的计。主要的势有：

• 单点触碰（Tap）：点击用选择一元素，类似鼠标的左键，常用的手势。
• 拖曳（Drag）：击某个元素然后拖拽进移动，类似现实生活移动物体感觉。
• 快速拖曳（Flick）：速度快的拖曳操作。
• 滑动（Swipe）：水平或垂直方向的滑动，比翻阅相册和电子书翻阅的手势。
• 双击（Double-Click）：快速点击一个物体，通会在放大、缩小操作中使。
• 捏（Pinch）：两根手指向内捏，捏的动作会使体变得小，通常缩小操作中使用。网易新闻客户端中文页面即可通过捏的动作缩小字。
• 伸展（Stretch）：两根手指，现实这操作会使物体伸，元素可能会变更大，常会在放大操作使用。网易新闻客户端正文页可以过伸展放大号。
• 长按（Touch and hold）：指点击并按住会激发另一个操作。比如朋友圈的相机图标长按可只发文字。但是注，长按不是一个常操作，所以一不建议用户进行该操作。但长按操作是有需要的，所以会把删除、只发文字状等操作隐藏其中。

除了用户使用场景、击区域、手势，那么有个影响我们设计使用情况，是用户怎么拿手很要。用户可以：单手拿手、双手拿手、拿手、拿手。我们需要考虑这些可能发生特征进手势互动规划与设计。比如 OFO 为了让单手（说不定是左手是右手）操作便，主要按钮在下并做很大，左右手都可以轻松击。而微信很多按钮也都是大长条，便左右手触发。屏使用场景般是游戏、视频等，所以般 APP 并不支持屏操作（微信、支付宝、微均不支持屏操作）。

五、格式塔：我们如何认知？

我们发些用户使用设好的界面时找不到一些重的功能按钮。也许会：「奇怪，分享功能不就多按钮里面吗？」、「用户怎么连这也找不到啊」。我们了解一下用户如何认知我们设好的界面的。初高中考试的时候您一见过完形填空这种格式吧，「格式」源自德语「Gestalt」，意即「整体」、「完形」的意思。格式理学认，我们观察的时候会自动脑补出一些逻辑含义，会让观察对象变一完整的、整体的、常见的形状。

「研表究明，序并不定能影阅响读，比如你完看这句话后，才发这现里全是都乱。」研究格塔心理学我们做互联网品和设计有什么用呢？掌握格塔理论我们可以让用户按照我们安排「剧本」来交互和操作界了。我们可以让用户比较容易地根据固定位找到提交按钮、我们也可以让用户不经过太多思考在杀毒软件击杀毒按钮等。格塔心理学于我们做好表现层是常有利。格塔原理主要有格塔五大律和格塔三大记忆律两个知识。

1. 接近律 law of proximity

格塔心理学认为，们认知事物时候，会依靠它们距离来判断它们关系。两个元素越近说明它们关系更强。是接近也是有比，在复杂设计，我们要边考虑它们内部逻辑关系边来排版。

△ A组和B组为接近律而生不地阅读序

△ 距离更近信息暗示了他们有内在逻辑关系

2. 相似律law of similarity

认知事物时，刺激要素（比如大小、色、形状等要素）相似元素我们倾于把它们联合在起或者认为它们是个类。比如，我们能轻易分辨出拨号页拨号键和按键群区。

△ 相似元素暗示了他们属于个类

△ 类似形单元会被我们脑默认为属类

3. 闭合律law of closure

算没有形约束，我们也会自动把图形脑补完全。比如半个形状或者有缺口形状我们不会认为是条线，而是个完形状。闭合是指完形认知规律。

△ 左边图我们会认为是圆形有缺口而不是条曲线，右边图形我们会认为是圆形被三条线截断了而不是四个图形

△ 界设计露出半内容，闭合律让我们感知右边隐藏着更多内容

4. 连续律law of continuity

在知觉过程们往往倾于使知觉象线继续成为线，使曲线继续成为曲线，也是视觉惯性。利用连续律我们可以让用户操作界时不经过思考击个固定位。

△ 深谙连续律流氓软件

5. 成员特性律law of membership character

如我们有很多样按钮，如何让某个更要按钮突出是仍然让用户感知是按钮呢？那要用到成员特性律了。成员特性律赋予了体某个元素特殊些刺激元素从而突出它。

△ 独特形暗示了它与元素有不功能

△ 拨号页拨号键与微发布微图标都与其他按钮不

6. 记忆律：我们如何记忆？

接着格塔五大律有专研究用户记忆格塔记忆律。格塔心理学家沃尔夫遗忘问题所作经典性研究出了格塔三大记忆律。沃尔夫实验时要求实验体观看样本图形并记住它们，然后在不时里根据记忆把它们画出来。结发现实验体在不隔时画出来图像都有不。有时再现图画比原来图画更简单更有规则，有时原来图画显著细节在再现时被更加突出了。有比原来图像更像某些我们都很熟悉图案了。沃尔夫把这三记忆规律称为格塔三大记忆律：「平化」、「尖锐化」、「常态化」。

△ 哪个图形才是正确？（图片来：网络）

• 水平化leveling：水平化指记忆中我们趋向于减少知觉图形小的不规则部分使其对称；或趋向于减少知觉图形中的具体细节。
• 尖锐化sharpening：尖锐化是在记忆与平化过程伴随而。尖锐化是指在记忆，们往往强调知觉图形某些特征而忽视其它具体细节过程。在有些心理学家看来，类记忆特征，是客体最明显特征在再现过程往往被夸大了。
• 常化normalizing：常化是指人在记忆中，往往根据已有的记忆痕迹对知觉图形加以修改，即一会趋向于按照认为它似乎应该是什来加以修改的。

六、情感化设计是什么？

了解格式塔会我们把界面做得符合户的心预期，户够明显地到他应该到的操作。可是户好像还是开心，因为户觉得界面好看。您是是会陷入这样的矛盾：可性重要还是美感更重要？怎么样够我们设计的界面又好还漂亮呢？情感设计最先由唐纳德·A·诺曼博士，指的是设计中情感在处于的重要地位及如何户把情感投射在产上来解决可性与美感的矛盾。情感设计是在抓住户注意、诱发情绪反应执行行为的可性的设计。如红色且巨大的购按钮够无意识地抓住户的注意、可爱萌萌的卡通可缓解户络好时的焦虑等等。情感设计有个水平，它们是递进系，分别是：本水平（重视设计外形）、行为水平设计（重视使的乐趣和效率）、反思水平设计（重视自我形象、个人满意、记忆）。

1. 能水平

我们是视动物，对外形的观察和理是出我们能的。能水平的设计就是刺激用户的感官验，让别人注意到我们的设计。个阶段的设计更加关注外形的视效果。比各大电网站的题页面设计，更加注重抓眼球和外观的刺激。

2. 行为水平

行为水平是功能产品需要注重的。一个产品是否达到行为水平，要看它是否能有效地完成任务，是否是一种有乐趣的操验。优行为水平设计的四个方面：功能，易懂，用和物理感。比用的APP 等。

3. 反思水平

反思水平的设计与用户长期感受有关，种水平的设计建立品牌感和用户的情感投射。反思水平设计是产品和用户之间情感的纽带，通互动给用户自我形象、满意度、忆等验，让用户形成对品牌的认，培对品牌的忠诚度。马洛斯理论把人的需求分成生理需求、安需求、需求、尊重需求和自我现需求个次。我认为反思水平的设计就是提供给用户归属感、尊重、自我现。比 Google 每逢节就有一符合节化的设计、网易严选的空状态也有品牌感的现等。

△ 淘宝空状态中的情感化设计

4. 情感化设计的表达

• 画面：画面感化设的重点，让错误页面或者空状态都一幅可的插画。
• 应景：让用户在我们品体验到些和真实世界样氛围变化。
• 游戏：没有人喜欢做任。着让用户完成的任变成游戏吧。比如每次登录加金币，有足够的金币就可以获得什称号。
• 冲突：冲突非常能够勾人的情绪，营造一个竞争或者对抗的氛围，让用户感自己置身在一个比赛或者斗中一样。
• 讲故事：给产和无聊的图像一些故事容，毕竟没有人讨厌讲故事。
• 隐喻：用一些家理解，随处可见的事表达一些无趣、涩的概念。
• 互动：用户和其他用户多制造互动会，比如排榜、荐等，不要让用户感觉孤独。

七、交互八原则

当我们了解了产五要素（产设计的维问题）、格式塔心（户如何认知的问题）、情感设计（如何户满意的问题）后，我还要给您介绍一大堆地交互原则。这些交互原则会帮助我们设计更好的界面，当然可帮助我们讲这样设计的原因。拿一些论怎么够别人信你的设计，对对？

1. 茨定律（Fitts’Law）

茨定律指的是：光标到达一个目标的时间，与当前光标在的位置和目标位置的距离（D）和目标大小（S）有。它的数公式是：时间 T = a + b log2(D/S+1)。这个定律是由保罗.菲茨博士（Paul M. Fitts）的得名。菲茨定律在很多领域都得到了应，特别是在互联设计中尤为深远。我们利茨定律估算户移光标到链接或者按钮需的时间，时间越短越效。如有一个按钮在左角，我们的操作可细分为两个阶：第一个阶大范围移到左方向，然后再做微调到达这个按钮之上。这个时间受按钮和链接在位置与按钮和链接大小影响，就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是是太小了。

△ 茨定律说明距离越短、目标大小越大，那么光标到达目标越快

△ 茨定律在页设计中的使

△ OFO 和苹果音乐APP 都将按钮放置手指最容易点击的区域并且按钮足够大

2. 希克定律（Hick’s Law）

希克定律是指一个人面的择（n）越多，需要作决定的时间（T）就越长。它的数公式是：反应时间 T=a+b log2（n）。在我们的设计中如果给户的择更多，那么户需要做决定的时间就越长。如我们给户菜单-子菜单-项，那么户可会很纠结；如果我们简成菜单-项，就会减户做择的时间。

△ 户反应时间和择数量的系

△ 我们应该减户的择

3. 7±2法则

我们先玩个游戏，请记忆面的字，一分钟后移开视线：

挣 多 久 可 猫  师 袅 崩 六 酒 望

现在闭上眼睛想一才的字您忆几个？大概是五个到九个之间。1956年美国科米勒对人类短时记忆进行了研究，他注意到年轻人的记忆广大约为5到9个单位之间，就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望户记住导航区域的容或者一个路径的顺序，那么数量应该控制在七个左右，如苹果和酷的导航个数。另外，移端 Tab 区域最多是五个，而页面中的八大金图标是八个。

△ 苹果、酷、Dribbble 等导航数量全是7±2

4. 思勒定律（Tesler’s Law）

这个定律是说产固有的复杂性存在一个界点，超过了这个点过程就再简了。我们只将这种复杂性转移。如我们如果发现页面的功是必须的，但当前的页面信息过载，那么就需要将次要的功收起或者转移。

△ Dribbble 导航将更多功收起在一个表示更多的图标

5. 防错原则

一个表单是需要填写毕后方可交的。但是户有时会漏填或者忘记填写，这时户点击交会怎么样？很可有些项会被清空（如密码项基于全考虑会清空 cookies）那么户还得重填写。这时解决办法是在户没填写之前把按钮设置一个看起来点击的样式，户想交时弹：您还有容没有填写哦，然后把户定位在没填写的项目，那个表单亮。（是是真的做到户为中心啦？）再如推特只允许户填写140个字，但户一写爽了往往会超140个字那怎么办？解决办法是给他在旁边倒数还写几个字。看，这些都是我们为了防止户操作现错误做的努，防错设计就是要减错误操作带来的灾难。错误的示当然需要设计师的设计了。可是许您知道有些错误示含糊，户并知道到错的是哪里，一步该怎么办。如仅仅登录功就可会有户名错误、密码错误、络超时、连续次输入密码错误、户名为空等同的错误，而有些产仅仅给「错了」，那么户当然会知措了。正向的例子如一次我在登录 Google Mail 时输错了密码，它示「密码输入错误，示：您在1个月前改过密码」。

△ BOO！APP 输入密码时卡通会蒙住眼睛，输错时会有示

6. 奥卡姆的剃刀法则（Occam’s Razor）

奥卡姆的剃须刀法则要就是说我们做产时功上可太繁琐，应该保证简洁和工具。如产中为户供了收藏功是否就需要了？供了是否需要点了？一定保证功上的克制。

△ QQ 将更多功收起到了头像和号图标中

7. 防呆原则

有一个著名的交互书籍叫作《Dont make me think》，翻译过来就是要我思考。这句话一直在我做设计时响起：要认为户是专！有时我们会觉得，点击汉堡包图标当然就是菜单！这个按钮长按就会调XX功了嘛。但是我们忘记了普通户可并解么是汉堡包图标、么是抽屉式导航、么是长按、双指滑。更何况普通户并会研究我们的 APP，在他们眼中我们的产只是众多工具中的一个，我们何德何认为自己的产是值得户时间习的？一定要把交互和设计做得简单，并且户在别的地方「习」过。每个页面强调一个重要的功而要户做择题。这些都是有效防呆的好方法。防呆和要我思考都讲的是我们的设计要自然而然。

△ APP KEEP 的页面中总有一个按钮是突的

8. 防止耐烦原则

户是很容易耐烦的，你还记得你多次看着视频载条骂人吗？如果我们需要户等待载入信息，一定要给一个有情感的设计示，避免户产生焦虑。 如很多游戏（决战平京、王者耀等）载时都会现角跑步的小画，美团等 APP 拉刷时会有几帧的画来慰户。画要好于苹果默认供给开发的「转菊」，因为卡通形象更有亲和。但是好像还够，户需要掌控感，「哎？它一直载，是是死机了？」为了防止户没有掌控感，我们可为户设计载条或者载示。载状态条很遗憾很多都是假的甚至是重复的，原因是实要精确判断载了多M的素材的代码更占资源！我们本来想慰户等待载的时间竟然会变得更长，那当然行啦。于是很多时候我们会做一个假的载状态条来抚户，我想您一定看过反复载的载条！载条的案实是可变得非有情感设计感受的，如通是：载场景资源、载素材这样的案，但是有些APP需要很长载时间时会给这样的案：导演正在准备、女角准备妆了、摄像师打开了灯光。是是更好玩啦？

△ 美团和易严的载画

总结

交互知识实键还要在应和分析。一方面，我们可在工作中积累经验，断地思考如何和同事配合一起研究产在使时的体验；另一方面，我们要经积累一些产使时发现的交互。建议大平时可收集你觉得错的情感设计或者微交互，如发现饿了么在雨天送货时会有电闪雷鸣和雨滴的设计；OFO 和滴滴打车在同节日会把地图车里的图标换成节日相的图标；BOO！APP 在输入密码时小怪兽会捂住眼睛；WPS 在晚上写作时会示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师，应该是非细心的设计师，应该是懂得为户着想的设计师。

欢迎关注作者的微信公众：「见」

图片素作者：Luc Chaissac