京东高手出品！从零开始学会交互设计

日常作中，我们或许会遇到这样的景：

说不楚交互设计师 UI 设师的区别，被人觉得交互设师就只审稿或产品经的原基础上善优的份了；面对很多成熟的交互组件库和界面框架，觉得交互设计师难有之地；设计评审清思路和由说对方，甚至当有人问我们交互设计师究竟是做么的时候，却说太清楚……

家对交互设还会存认知的误区，本文会对以种种问题作出的回应。小编将从认知、思维、方法具四方面详细阐述交互设，帮家深刻理解什么交互设，意识到交互设的价与重性；同时，掌握一套通用的设计思维和方法，适应 C 端和 B 端数字产的交互工作。

交互设计的认知

1. 什是交互计

简而言，使品原型设计限接近用户心理模型，让用户更加有效地完成操作目，过改善用户体验提升品价值，这便是交互设计。

交互计是一门把抽象需求转换为象界面的交叉学科，重点是用户行为计，要实现恰当的用户体验，需要备计学、逻辑学、人机工程学、心理学、社会学等多门学科知识。

大家看到的用户界面，往往只看到设计的最终结果，但只是设计的冰一角，界面设计背的思考和设计程是我们看不见的，在文小编详细阐述设计思、设计方法等不见的计。

△ 得见的计 & 不见的计

目前，互设计师和产品经理的工变得有所重叠，不区分得么明显，有的司并没有互设计师位，而是由产品经理兼任。

实，交互设计师算得上是半个产经，好的交互设计一定是具备产思维的。当界面设计总是争论休、没有定论时，问题在于缺乏明确的设计目标，设计师要明确自己在为哪群户于么场景解决么问题。

2. 交互设计做么

交互设计师在工作中接到的设计项目通可分为两类。一类是体验优类项目，另一类则是产或改版项目。体验优的项目，一般是产日版本迭代，属于规项目。产或改版项目现的频率较低，但非重要，往往需要一定的竞分析或调研工作。

交互设师对接这两类项目时，主关注需求分析、用户研究、信息架构、流程设、信息设、原型设、文案、数据分析、竞品分析 9 方面。其中，需求分析重，它包括用户需求产品需求的分析，需求分析从用户提出的需求出发，找到用户内的真实需求，转化产品需求的过程。用户需求用户自己以的需求或需，产品需求过我们分析后挖掘到的用户的真实需求，并转化产品解决方案。此外，一般需从商业、用户、技三方面考虑，洞察需求的合理性。

△ 交互设研究方向

3. 产品、交互 UI 的区别

用户体验五素入门交互设必备的基础模型，通过用户体验五素可以直观清晰知道产品理、交互设师 UI 设师作的侧重点区别。

△ 用户体验五素

首先，品经理主要侧于战略层和范围层。

体思考产品目标和用户需求，通过对用户需求的洞察，提出产品解决方案，将用户需求转化为产品需求，即功能规格和内容需求，产品经理更多思考产品的商业价值和足业需求。

其次，互设计师主要重产品的结构和框架。

重点是行为设计和逻辑层面，权衡户值和商值，侧重产户体验，更有效的设计解决方案。

根据用户体验五素模型可知，产品主分功能型产品信息型产品，不同类型的产品，交互设的侧重点也不同。对于功能类型产品，侧重功能交互设界面设，对于信息类型产品，则侧重信息架构导航设。

最后，UI 设计师主要负责品表现层，以用户为心，围绕品和交互设计目标展开视觉设计。

UI 计偏向于知计，通过对比、视觉一致性、配色、排版、字体、字号、图形符号等计法赋予产品良好的外观体验和视觉知，提升产品的视觉体验。
简言之，设师注重创意及逻辑，设目标加纯粹，能够多考虑用户，设方法专业。产品理会站产品全局视角考虑问题，侧重商业目标。

△ 设师产品理的区别

4. 交互设的价

产品从抽象到具象的设过程中，交互设起到了至关重的作用。

交互设计是提升用户体验关键，设计师往往会兼顾用户价值、商业价值和品价值等，根据用户反馈和商业目标不断改善用户体验，从而获取用户、增加用户留存，提高市场占有份额。

交互计会析并重塑需求，析用户行为征，计结构、流程、界面、动效果并跟进视觉、前端，及整理线上问题，准备下一次产品版本迭代。

互设计师以将产品经理从原型设计的工中释放出来，让其有更的时间思考产品，样提升产品的研效率，减少不必要的返工、理成和沟通成，证项目顺进行。

设计思维

在互联网产品设计和用户验设计中，除动手设计之外，学何思考非常重要。

互联进入半场，人口红利消退，资本红利和流量红利逐渐萎缩，互联大环境的变给互联企和设计从人员带来了全挑战，务增长乏成为当互联企首要解决的问题。随着计算快速发展，数据存储成本变得越来越低，数据获取变得更容易，大数据时代的来增长更容易实现。

由于以原因，设思维也发了变化。

过去，我们做设计往往注用户体验，强调用户思维，遵循以用户为心设计原则，以问题为导进设计。（以用户为心设计思维最早是美国著名工业设计师亨利·德莱福提出，在他著作《为设计》常详细地阐述了这设计哲学）然而，现在我们做设计不再强调用户思维，而是以增长为导，围绕品增长，以品价值为心进设计，并尽可能减少成本。

△ 设计思维转变

综上所述，本文阐述的是以用户为中心，以增长为导向，提升产品价值的用户思维和增长思维。其中，产品价值包括用户价值、商业价值、品牌价值以及产品核心竞争力等。用户思维主要总结为 6 个方面，别是用户动线、距离、用户习惯、防呆、优先和景。

1. 用户思维

Part 1. 用户动线

用户动线，指用户使用互联网品为轨迹，即用户为路径设计。常见用户动线设计法有视觉引导用户注意力、小红消息提示引导用户、页切换动效、暗示更多内容、留白、F 型视线运动等。

首先，通过视觉色彩和块大对比引导用户注力。

例，美图首页底部导航设计，中间的加号按钮使用红块现，放在底部导航中间位置，并增大展示和点击区域。当用户关注导航区域时，优先被引导至加号口。

小编认为这样设计的目的是体现此入口的重要性，具体跟美图秀秀的产定位有很大系。美图秀秀前期的产定位是做一款免使的拍照工具，户即走，但它目前在进行产商转，产重定位为工具为基础，做图片社区，目的是希望增户留存，于产商。

△ 美图秀秀首页-全导航

京东、天猫、淘宝 APP 商品详页底部加入购车立即购买按钮，同样通过视觉手段引导用户浏览商品详后速找到购买入口。

△ 京东、天猫、淘宝 APP 商品详页

其，小红消息提示引导。

下图所示别是朋友圈有新动和新互动消息出现的提示引导，当进入朋友圈主页，界面会出现好友互动提示，点击后直定位互动动。这是通过红点的方式引导用户进入朋友圈查动消息，其计目的是提升朋友圈活跃度。

△ -发现界面

其三，页面切换动效设计。

效在页面跳转中起到路径引导、帮助户解页面逻辑的作，户在使产的过程中会迷失，页面切换效在移 APP 中被广泛应，它被列入 iOS 和 Android 平台设计规范中。

例如，用户通过右滑界面，当界面会向右滑出屏幕，清晰展示界面与界面之间的关系。抑或查看某商品促信息时，从界面底部弹出对话框，关闭会原返回。类似这样的页面切换动效能帮用户好使用产品，提升产品使用体验。

△ 天猫(左)、京东(右)切换动效

其四，暗示更多内容。

当某个板块超出屏幕可视域，需露出部内容，以暗示用户还有更多内容。

在移动端界面设计中，由界面视区域有，所以需要拓展视界面区域，通常水平展示更内容时使用左滑查看更，默认展示 2 个半或 3 个半的内容，暗示用户界面右有更信息。

由于界面首屏容一般会有更多的曝光机会，页面越长，户没耐心继续向访问，因此为了暗示户向继续浏览，通将首屏容展示一半。

△ 京东(左)、京东电(右)

其五，留白。

留白界处理，会暗示用户浏览信息序。
例如，图示的 B 端表单采两列布。水平方向和垂直方向表单间距一致时，户会知道该按行浏览还是按列浏览。当把两列表单的行间距留白调大，户默认会按行浏览表单填写。

△ 两列表单布

其六，F 型视线运动。

符合用户视线设计更容易获用户击。有研究表明，用户浏览信息留时最长布局是「F」型。

例如，Google 搜索结果页面的息布局方式就是采用了「F」型结构。

△ Google 搜索结果页

用户行为轨迹，以为界面优化提供科学依据。对电产品而言，通科学分析用户视停留时间及次数，以精准把握品的市场反馈。

图是通过眼球追踪仪了解到户浏览信息的轨迹。

△ 眼球追踪仪研究户浏览轨迹

Part 2. 距离

距离，是指界面元素离户手指或鼠标的距离远。茨定律指目标越大，指向越快；目标越，指向越快。

还以图秀秀首页例，界面半部分的相机、拼图、化图片具入口设的点击区域足够，且入口之间保留足够的间距，用户点击具入口精准。一般移动端距离用户手指近且易操作的区域界面底部区域，所以使用频率高的全局导航会优先考虑界面底部。

△ 图秀秀首页

Part 3. 用户习惯

界面设中，保留用户已的产品使用习惯，可以效降低用户的学习本。一般或熟的产品规划改版时，会衡新老用户的比重以及改版的价，不会频繁轻易改版，频繁改版会影响老用户使用习惯，导致用户流失。如果改版的价高于用户使用习惯，用户不试改变已的使用习惯，可以通过激励措施引导用户。

例如，讯社交品微信，已经培养了用户使用讯社交品习惯，所以后来支付宝新增讯品-朋友，其界设计和交互操作基本和微信聊天界致，这设计决策是考虑到大量用户在使用微信时形成了用户习惯。

△ 微信(左)、支付宝(右)聊天界

Part 4. 防呆

防止用户误操作并可快速恢复，避免用户在操作界时出，这是防呆设计。常见防呆设计法有增加必要限制、操作流程优化、及时反馈、容设计。

首先，计必要的限制。

当用户填写表单信息时，增加必要的设计，以有效减少用户填写表单的出错情况，减少用户成功填写表单的时间，提升效率。

图分别是 PC 端携程旅游和同程旅游添乘客信息的交互设计，携程旅游添身份证信息时允许户输入中字符，但身份证只是数字或字母组成，允许户输入中字符是无效的。而同程旅游考虑到了身份证号码的特殊性，限制可输入中字符，同时放大展示已输入证件号码，视觉上六个数字为一组，保留间距，方户边输入边核对，户体验更好，更多地考虑了户操作场景。

△ 携程旅游(左)、同程旅游(右)添身份证号码交互

其二，操作逻辑。

过改变操作流程，可以有效解决流程设计导致用户痛。

比如，在使用 ATM 机取钱，经常取完钱后直离开，忘记取卡，导致银行卡被锁定，找回银行卡比较麻烦。针对这个问题，中国光大银行和安银行改变了 ATM 机取钱流程，先退卡再取钱，通过优化流程，解决用户银行卡被锁定的痛点。

△ 中国光大银行 ATM 机(左)、安银行 ATM 机(右)取钱景

其三，及时反馈。

界面要及时响应户的操作并供反馈。

同程旅游 PC 端添加身份证件码时，当用户输入字符，光标离文本框后即刻校验该字段，及时告知用户当所填信息否确。

△ 同程旅游添加证件码

移动端场景比较复杂，如断网时，不仅要出反馈，应提供解决案。

例如网易云音无网络景计，首先会提示用户无网络，将部功能置灰，同展示已缓存的数据和界面框架，足用户的核心需求——听歌。

无网络或网络弱时，提供给用户行的决方案以有效帮助用户重新连接网络，证用户验流畅。

△ 网易云音乐无网络状态

再如，易闻、今日头条、腾讯闻等容产的设计，户点击过的容入口会置灰，把已读和未读容区分开，避免户查看重复信息，这是通过视觉方式处的及时反馈。

△ 容产

其四，错设。

主要目是防止用户误操作而导致用户数据丢失。删除要数据信息时，需提供确认。

同是同程游订填写页面，未填写息，点击返回则直返回，若已填写订息，离开页面会提供二次确认，一旦离开，则当前页面的数据息不会保留，给用户一次确认离开的机会。这做一是促进完成订增加订转化率，二是考虑误操作的可能。

△ 同程游-订填写

Part 5. 优先

优先，称之为「层次或层」。层次的产品界面可以帮助用户一眼抓住最关注和最重要的息，并快速决策。

产品、互和视有优先级之分。

产和交互谓的优先级分为容、功、流程、场景和户。容上区分要信息和次要信息，功上区分要功、次要功、基础功，考虑功值和使频率，流程上分产流程和分支流程，场景则考虑户要的使场景，而户方面则需考虑产的目标户、目标户中的核心户（带来收入的目标户群体），产是为大多数目标户设计的。

△ 交互优先级

视觉的优先级分对比、颜色、区块小、文字小，优先级明确的视觉设可以让整体排版布局加富层次，让内的可读性得到明显的提升。

举个例子，支付宝余额宝主页和京东融主页设计思路都是先出结论，帮助用户快速决策，此要信息都是收益信息，这是用户最关注信息，所以视觉上采用大色块高优先级展示，位放在首屏第个板块，用户眼可以看到与自己利益强相关信息。

△ 余额宝(左)、京东融(右)

Part 6. 场景

场景是设计思维很要部分。设计是解决用户在具体不场景下遇到问题，这里「场景」有两层指，是用户在现实生活真实场景，是用户使用某品时场景。

首先，用户在真实景下的计思考。

比用户在昏暗境下使用摩拜扫码用车，摩拜提供的手电筒功能根据境光强弱自动开启手电筒，考虑用户使用场。

△ 在灰暗境下使用摩拜扫码用车

再看苹果手机来电显示界面设计，户未使手机时和使中的电话接听界面设计同。

用户未使用手机时，接听界面交互通过滑动接听，增加接听电话操作本，防止用户误操作拒接电话或接听电话，因用户未使用手机的场景很多，手机口袋或包里，可能会因运动因素误操作。

而用户正在使用手则是接展示拒绝和接听按钮，如用户未使用手时界也是这样，误操作几率会常大，有要士或亲密朋友来电话，误操作拒接会引起不必要麻烦。

这是基于用户在不同景下需求不同而做的计。

△ 在不同景下用苹果机听话的界面

二，基用户使用产品时的场设计。

美团外卖首页根据户每天吃饭的时间点，分早晨、中午、晚上、夜宵共个时间，基于 LBS 地位置在同的时间分别为户供同好店，精准为户推荐好店，解决户吃的问题。

这基于场景考虑的设。

△ 团外卖首页不同时间段的界面设

2. 增长思维

用户思维交互设基础的设思维，此外，增思维也同样重。

混沌大学李善友教授曾说过「作为个企业，第要事情是增长。」于互联网上市公司而言，业务收高速增长可以提高公司估值，于企业投资者而言，则可以提高投资回报率。

从 2018 年以来，比较有响力的计大会，比如产品经理大会，有一半的演讲者都在讲增长，可见，增长已是必然趋势。既然大家都在讲增长，增长是 KPI 指标吗？作为计，该如何助力业和产品增长呢？

据小编，国内最早的增长概念来自范冰的《增长黑客》书，而增长概念初来源美国硅谷。

增长并是 KPI 指标，KPI 只是短期阶性指标，且更多的可是一些虚指标，产经为了达到 KPI 指标而牺牲户体验是有的事情，那么么是增长呢？

Part 1. 么是增长

传统的产品生命周期分探索期、成长期、成熟期和衰退期四个时期，不同阶段的产品目标是不同的，对应的产品增长指标（指阶段最能现产品价值和企业价值的指标）也不同。

在探索期，要会采 MVP 的方法（MVP 全称 MinimumViableProduct，最小可行性产）最小成本和最快的研发速上线产，快速验证产方向是否正确，如果方向正确可迅速调整产方向；

△ MVP

产品入阶段，产品主的目标确产品差异化，抢占市场并迅速占领用户智；

在成熟期阶段，需考虑品如何进商业化变现，以及如何提升商业价值。上介绍过美图秀秀 APP 已经是成熟期品了，所以品也在进商业化转型。从企业战略层视看，有了增长意识后，我们需要尽早在品成熟期阶段思考如何提升品增长，否则品进入衰退期再考虑品增长是比较困难事情，市场竞争激烈。

比如美，最早持续给企业带来高速营收增长的业线是美食，在产品成长期阶段对标的是大众点评，解决的是用户本地生活吃的需求。后来在有业线基础上不断探索，逐渐化出来多条新的业助力企业增长，比如演出、游、美外、出行（车、摩拜车、火车票、机票）、美容美发生活服等等。

现在展比成熟的业务是美团外卖，已成为美团二条成功助力企业营收增长的重要业务，为什么美团有条成功的能带来增长的业务，和企业的创新分不开。

，产增长如何实现呢？

Part 2. 如何实现增长

从务角看，需要务创实现营收增长，就要深入洞察户并挖掘还没被满足的需求。

从产品角度看，需通过数据体增，面提到了云算的速发展使得产品获取数据非常易，所以通过数据分析可以由数据驱动业务增，找到能提升业务目标的解决方案，不断优化产品体验。

常用增长法是 AARRR 用户转化漏斗增长模型，具体先后序分是获客、激活、留存、增加收入、荐传播。是，AARRR 用户转化漏斗增长模型更适用于成长期和成熟期品，并不适合用于探索期品。探索期品最要是用户留存，是要验证品，是不太需要花巨大成本广品先获取客户，而是要先考虑用户留存、后激活沉睡用户，再考虑品获客事情，用户留存可以体现品价值，验证用户需求。

△ AARRR模型

从计角度，在做体计，需要备增长思维，以用户为中心，以增长为导向，不断提升产品价值。考虑产品不同生命周期最重要的核心指标，这个指标需要能代表产品长期价值和企业价值，是项目队都认可的一项指标，大家围绕共同的目标挖掘提升增长的爆破点。

具通用户研，深挖用户差异化的需求，围绕产品阶段的目标，结合用户画像和用户验地图找到设计机点来提升增长指标。用户研分析以是定分析或定量分析或者两者结合，对探索期新产品最是定分析，毕竟没有够的数据，样量少也不一定有说服力。此外，提升产品增长还以使用 A/B 测试。

设计方法

用户验要素是学习互设计的基础，以用户为中心，以问题和增长为导向提升产品价值是重要的设计思。

目前，具体的设计方法很多，如构建人物模（户画像）、户体验（旅程）地图、设计冲刺法、上瘾模、海盗模（AARRR 模）、卡诺模、福格行为模（Fogg’s behavior model）、务蓝图（峰终定律 Peak-End Rule）等等，但是小编认为最基础的是最通的还是基于户场景的目标导向设计法。

目标的设都耍流氓！

1. 基于场景目标导向设法

基于场景的目标导向设法指：特类型用户（who）某时间（when）某点（where）、遇到什么（what）时，怎样的诉求（want），会通过什么手段（how）满足其诉求，简称 5W1H 法则。

△ 5W1H法则

举个例子，现在有这样需求：假设我们在 APP 首页首屏里，要插入登录领新礼卡片。

用户的景可以描述为：在用户进入首页浏览模块息（地点）的候（间），了「新人礼包 – 188 新人专享权益」的卡片（出现某物），未注册的新用户（定类型用户）萌发了领取礼包的想法（诉求），会点击卡片（段）通过注册来领取新人礼包。

以确定设计的目标是引导未注册的用户领取新人红包。

△ 左:京东首页-用户已登录;右:京东首页-用户未登录

交互设计流程一般有六个步骤。分别是需求分析、确定设计目标、竞分析、任务流程设计、信息架构 & 功交互设计和原设计。原设计只占整个交互设计过程的 1/3，更多的是设计思考与分析。

△ 交互设计流程

需求分析阶段，我们需考虑需求源、明晰需求类型、深入了解需求的背景目的，理性估需求合理性与价，清楚目标用户、洞察用户理用户需求目的。

过需求分析结，提炼出品目标和用户目标，以确定设计目标并指导交互界设计。

如果是新产品或改版项目，在进入计之前，有必要做竞品析，竞品析的目的是吸取竞品优点并发现不足，根据竞品析的结论优化计，而不是照抄竞品。

当，不是所有的项目必须要做竞品分析。

确定设计目标之后，开始任务流程设计，分解户使产的要任务和分支任务，设计满足需求的户路径和操作流程。

信息架构功能设分信息型功能型产品，思考产品结构信息组织。

原型阶段主要是导航设计、信息设计、框架设计和文案等。

设计工具

工欲善其事，必先利其。

交互计常用的计工有 Axure、Sketch、墨刀等。Axure 适应 Mac OS 系统和 Windows 系统，支持协同公，通常用来制作的是低保真型，型无法导出切图标注，效率一。如果脑是 Mac OS 系统，可以使用 Sketch，使用 marketch 或 Sketch Measure 插件导出切图标注，再结 Sketch 组件的运用，可以直输出高保真型了，能提高计的效率，现在多公计队采用 Sketch 进行计。

△ 计工

最，推荐一款 web 端轻量化的设计工具 Figma，是一款在云端原型的工具，基上是 Sketch 的 web 版，以人同时在协同工，但需要连网使用，当需要将原型传给项目成时，文件无需存到地，在分享即，团成也无需下载地文件，直接在浏览原型还以在评论，大大提高设计和沟通效率。

总结

本篇文章主要从认知、思维、方法和工四个方面讲述了交互计。

互设计的认篇章主要介绍互设计是使产品的原型设计更接近用户心理模型，让用户更有效地达到操目的，通提升用户验的方式提升产品价值。

设计思维模介绍了户为中心、问题和增长为导向、升产值的设计思维，包括户思维和增长思维。户思维介绍了户线、距离、户习惯、防呆、优先级、场景六个思考要素。

设方法介绍了基于场景的目标导向设法交互设一般流程。

最后部分则简单介绍了交互设计师常用几款设计工具。

计无边界。近年，交互计和产品经理、视觉计的边界越来越模糊，因此，每位计都不要给限制，局限只做交互或只做视觉，可以尝站在业、产品和用户的更高视角思考交互计，提升计的价值。

互设计师不是技能合成设计师，需要运用综合能力或合能力为更高的目标服务。

上仅代表小编个人观点，仅供参考，感谢阅读！
（部配图来源于网络，侵删）

参考资料：

• 范冰，《增黑客》
• 刘津，《破茧成蝶1》《破茧成蝶2》
• 亨利 · 德雷夫斯，《为人的计》

欢迎关注作者微信公众号：「Design with CloudAI」