1.2　了解UI交互设计

有人的地方就存在交互，交互行为的产生是和人紧密相关的。交互设计（Interaction Design）最初作为应用哲学的一个分支，从人类诞生之初就产生了，人和人之间、人和物之间都可以产生交互行为。

1.2.1　什么是交互

交互，即“交流互动”，其实交互离我们的日常生活很近，例如，我们在大街上遇到熟人打个招呼，简单的几句话，搭配眼神和动作，向对方传递礼貌、亲近等，这就可以理解为人与人之间的交互。

那么人和机器之间的交互是什么样的呢？举个例子，如果你想解锁一个手机，你与手机的交互可能是下面这样的场景：

——按手机上的“Home”键（嗨，手机，好久不见！）

——手机屏幕亮了，但需要输入解锁密码（你好，是老王来了吗？）

——输入密码（是的）

——手机解锁成功，进入主界面

通过上面人与手机交互的场景，我们可以这样来理解交互：当人和一件事物（无论是人、机器、系统、环境等）发生双向的信息交流和互动，这就是一种交互行为。

需要注意的是，这种交流和互动必须是双向的，如果只有一方的信息输出展示，而没有另一方的参与，那么只能是信息展示而不是交流互动。

图1-12所示的是一款果汁饮料产品的包装设计，包装只是单方面的信息展示，用户只能从中获取信息，而不能反馈信息，所以只是一种信息展示而不是交互。

图1-13所示的用户登录框，当用户在登录框中输入信息时，登录表单会给用户相应的反馈，特别是当用户输入错误的信息时，登录框会根据错误的类型给用户相应的信息提示，这种人与界面之间的信息交流，就是交互。

1.2.2　什么是交互设计

交互设计，又称“互动设计”（Interaction Design），是指设计人与产品或服务互动的一种机制。交互设计在于定义产品（软件、移动设备、人造环境、服务、可穿带设备及系统的组织结构等）在特定场景下对相关界面的反应方式，通过对界面和行为进行交互设计，从而让用户使用设置好的步骤来完成目标。

从用户的角度来说，交互设计是一种如何让产品易用、有效且让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点。同时还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及多个学科，以及与交互设计领域人员的沟通。

本书介绍的互联网交互设计，主要是指人与互联网产品（网站、移动端App、智能穿戴设备等）的交互行为的设计。

图1-14所示的一个自行车宣传介绍网站，该网站的设计打破了传统的图片与文字结合的介绍方式，而是采用交互操作方式来介绍该自行车及其各部件。当用户在网页中滚动鼠标时，页面中的产品图片会进行360°旋转展示，并分别对其重要的组成部分进行介绍，简洁的介绍方式加上独特的创意，给人留下深刻的印象。

图1-15所示的社交类App界面设计，当用户在界面中滑动时，人物图片会以动画的方式进行切换，模拟了现实世界中卡片翻转切换的动画效果，给用户带来较强的视觉动感，也为用户在App中的操作增添了乐趣。

1.2.3　了解UI交互设计师

许多人认为UI交互设计师就是画流程图、线框图的，其实这种说法是非常片面的，虽然流程图和线框图确实是UI交互设计的一种表现方式，但这种说法忽略了在这些可视化产物之外，设计师所进行的思考工作。

UI交互设计师的相关工作如图1-16所示。

• 产品经理（PM）

负责产品需求的收集、整理、归纳、挖掘，组织人员进行需求讨论，进行产品规划，与UI设计师、交互设计师、开发人员、运营人员沟通，并推进、跟踪产品开发到上线，上线后再根据运营人员收集的用户反馈、需求进行下一版本开发、迭代。

• 用户研究（UR）

负责产品的问卷调查，手机用户需求反馈，不断完善自己的产品，给用户带来更好的体验。大型互联网公司才会有用户研究工程师这个职位，很多小公司是没有的。

• 交互设计师（IxD）

在出现软件图形界面之前，长期以来UI设计师就是指交互设计师。一个产品在进行编码设计之前需要做的工作就是交互设计，并且确定交互模型、交互规范。

交互设计师主要负责对产品进行行为设计和界面设计，行为设计是指用户在产品中进行各种操作后的效果设计，界面设计包括界面布局、内容展示等众多界面展现方式的设计。

• 视觉设计师（UI）

目前，国内大部分的UI设计者都是从事界面设计的图形设计师，也被称为“美工”，但实际上视觉设计师并不是单纯意义上的美术人员，而是软件产品的外形设计师。

UI设计师需要对产品设计需求有良好的理解能力，并完成需要的视觉设计提案。通过团队协作设定产品整体界面视觉风格并进行创意规划，配合团队高效地开展系统化的视觉设计。

1.2.4　交互设计需要考虑的内容

如果说产品的UI设计是“形”，那么交互设计就是“法”，通过“形”与“法”的相互融合提升产品的用户体验。在进行产品的交互设计时需要考虑的事情很多，并不是随便在界面中放一些内容和控件那么简单。

• 确定需要这个功能

当看到策划文案中的一个功能时，要确定该功能是否需要，有没有更好的形式将其融入其他功能中，直至确定必须保留。

• 选择最好的表现形式

不同的表现形式直接影响用户与界面的交互效果。例如，对于提问功能，必须使用文本框吗？单选列表框或下拉列表是否可行？是否可以使用滑块？

• 设定功能的大致轮廓

一个功能在页面中的位置、大小，其内容是否被遮盖、是否滚动。既节省屏幕空间，又不会给用户造成输入前的心理压力。

• 选择适当的交互方式

针对不同的功能选择恰当的交互方式，有助于提升整个设计的品质。例如，对于一个文本框来说，是否添加辅助输入和自动完成功能？数据采用何种对齐方式？选中文本框中的内容时是否显示插入光标？这些内容都是交互设计要考虑的。

图1-17所示的移动端App登录界面采用了弹出式的动画交互方式，在第一时间取悦用户。轻微的弹入和渐隐效果使得登录页面看起来非常鲜活。

1.2.5　交互设计需要遵循的习惯

在进行交互设计时，可以充分发挥个人的想象力，使界面在方便操作的前提下更加丰富美观。但是无论怎么设计，都要遵循用户的一些习惯，如地域文化、操作习惯等。将自己化身为用户，找到用户的习惯是非常重要的。

接下来分析要遵循用户哪些方面的习惯。

• 遵循用户的文化背景

一个群体或民族的习惯是需要遵循的，如果违背了这种习惯，产品不但不会被接受，还可能使产品形象大打折扣。

• 用户群的人体机能

不同用户群的人体机能也不相同，例如，老人一般视力不好，需要较大的字体；盲人看不见，要在触觉和听觉上着重设计。不考虑用户群的特定需求，产品注定会失败。

• 坚持以用户为中心

设计师设计出来的产品通常是被他人使用的，所以在设计时，要坚持以用户为中心，充分考虑用户的需求，而不是以设计师本人的喜好为主。要将自己变成用户，融入整个产品设计，这样才能设计出被广大用户接受的产品。

• 遵循用户的浏览习惯

用户在浏览产品界面的过程中，通常会形成一种特定的浏览习惯。例如，首先会横向浏览，然后下移一段距离后再次横向浏览，最后会在界面的左侧快速纵向浏览。这种习惯一般不会改变，在设计时最好先遵循用户的习惯，然后再从细节上进行超越。

图1-18所示的为移动端App聊天界面设计，越来越多的App开始使用对话框或者气泡的设计形式来呈现信息，这种设计形式不会打断用户的操作，并且符合用户的行为习惯。