交互设计入门基础：常见的设计模型全面解析

前沿：

本次的文章输出主要有两个目的：第一让自己略显浮躁的心沉淀下来；第二对于自己脑海中交互设计的「原则、定律、模型、法则、效应、注意事项等」进行一次整理和探索。

我对于交互设计师的概念更多的是来自于 UI 的理解，独立的交互设计师必然不会是一名好的交互设计师。身边也有很多朋友想从 UI 设计转行交互设计师，其实我建议可以直接转用户体验设计。

对于 UI 转行，个人认为产品经理也是一个不错的职业方向。见过很多产品都是纯产品（非转职），仅限于对于技术研发团队有一定的技术了解。但是如果 UI 转职产品，那么天然在竞争上就会有一定的优势。

言归正传，入行以来从最初的外包积累项目到专注于做一款项目，项目中包含的产品运营、数据提升等。再到现在使用交互模型更加合理的去处理界面的设计，很开心一直在不断的进步。

更多交互入门干货：

如何快速入门交互设计？来看高手的方法！

前段时间有位产品小白问我：在实习的这段时间里，要怎么才能高效提升我的交互设计经验呢？

阅读文章 >

什么是交互设计？如何解读交互设计？

交互设计，又称互动设计，英文 Interaction Design, 缩写 IxD 或者 IaD，是定义、设计人造系统的行为的设计领域，侧重在交互模式的设计。

人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带设备以及系统的组织结构。交互设计在于定义人造物的行为方式（the "interaction",即人工制品在特定场景下的反应方式）相关的界面。

交互设计师首先进行用户研究相关领域，以及潜在用户，设计人造物的行为，并从有用性，可用性和情感因素（usefulness, usability and emotional）等方面来评估设计质量。

交互设计中常用的设计模型

文中举例仅为方便理解该模型

1. 福格行为模型

福格行为模型，以 BJ Fogg (斯坦福说服力科技实验室主任) 命名。表明一个行为得以发生，行为者首先需要有进行此行 为的动机和操作此行为的能力。接着，如果他们有充足的动 机和能力来施行既定行为，他们就会在被诱导/触发时进行。

福格行为模型可以表示为 B=MAT，即：B（Behavior）是行为，M（Motivation）是 动机，A（Ability）是能力，T（Triggers）是触发。

图表表示该行为原则

简单举例：当你在进入某 APP 时看到了 Mac 的宣传广告于是就点击进去购买了新款的 Mac。

此处的动机就是你对于新款 Mac 的喜爱，能力就是有钱，而进入 App 看到的宣传广告则是对于你当下购买 Mac 的触发。

实例说明（1）

当前标题《这事还没完！房子开始反碱，全网喊话退钱，130 万改造...》_____此处标题仅展示用户所看到的标题部分

当前配图：

提高点击动机《130 万改造的房屋，两周后居然反碱。全网都在喊：退钱！退钱！...》提高用户点击动机（用户好奇心/关注热点等）

能力（点击观看用户成本很低）

触发（与动机类似去激发用户的好奇心以及关注热点的心理）

实例说明（2）百度网盘活动页

1. 动机：文案吸引（限时优惠，抽奖赢 SVIP）——想要获取利益
2. 触发：产生点击抽奖行为
3. 动机：抽奖完成后显示文案突出本次抽奖产生的优惠信息——利益文案吸引
4. 动机：底部文案「仅此」做突出化处理——告知用户（产生机会难得心理）
5. 动机：当点击取消时进行提醒当获取到 SVIP 时可以获得的会员权益——功能吸引（实用性强调）
6. 能力：在用户可承担范围内进行以上的操作，若不可承担或者无意在此项目消费的用户会通过「动机 1」筛选一部分
7. 触发：产生消费行为

一款产品活动的需要提出到最终方案的形成，尤其是产品运营类方案。我么可以利用福格行为模型，在不激发用户反感的前提下，去增加动机和触发，推广到有合适能力的用户。

2. 双钻模型

双钻设计模型由英国设计协会提出，其核心是：发现正确的问题、发现正确的解决方案。双钻设计模型把设计过程分成 4 个阶段：发现问题、定义问题、构思方案和交付方案。

细分扩展双砖模型

双钻模型主要分为四个时期：

①发现阶段—发散性对问题的洞察；

发现问题对产品现状进行深入研究。包括了解用户特征、产品当前状况、用户如何使用产品以及用户对于产品的态度等。

②定义阶段—收拢性的聚焦问题；

对产品进行实质性的评估，根据发现阶段总结发现的问题，然后进行发散性的思考，总结问题归纳想法。

③发展阶段—发散性的寻找可能方案；

当我么对于产品进行了问题的总结和归纳，并且发现了痛点问题后我么就可以根据问题产出解决方案，进行初步的设计。

④交付阶段—收拢性的寻找解决方案

在发展阶段中所归纳总结的所有解决方案，进行分析整理，选择出一个或者多个最合适的。

实例说明（1）

文中举例仅为方便理解该模型，本案例为个练（百度网盘会员服务模块改版，此处仅展示部分页面，后续会上传完整改版思路和改版后页面）

①案例介绍

百度网盘（原百度云）是百度推出的一项云存储服务，已覆盖主流 PC 和手机操作系统，包含 Web 版、Windows 版、Mac 版、Android 版、iPhone 版和 Windows Phone 版。

用户将可以轻松将自己的文件上传到网盘上，并可跨终端随时随地查看和分享。2016 年，百度网盘总用户数突破 4 亿。2016 年 10 月 11 日，百度云改名为百度网盘，此后会更加专注发展个人存储、备份功能。

2021 年 5 月 18 日，百度网盘 TV 版正式上线。

发现阶段

1. 已经是会员的用户对于升级会员的点击转化率低
2. 网盘为工具类产品，社交属性较低不需要使用很强烈的会员和非会员标识去区分
3. 用户点击我的页面更多的是想查看自己的总储存量和剩余储存量
4. 我的页面的活动（活动中心、分享赚钱、积分领取）参与度低于预期

定义阶段

1. 调动已是会员的用户进行升级（可组合套用福格模型）
2. 降低非会员的感知度，把会员和非会员差异化拉低
3. 增加查看储存量的空间占比
4. 重设计入口，变动页面布局占比

发展阶段（提出多种方案）

进行设计方案探索，多种不同方案去解决定义阶段给出的解决方案。

交付阶段

未开通会员基础对比

已开通会员基础对比

会员已过期基础对比

添加动效设计

解决问题

1. 通过加大会员版快设计，提示升级会员、开通会员、续费会员点击转化率
2. 将空间管理层级提高，刚点击进入我的页面后空间管理处增加动效设计。使剩余储存/总储存/已占用储存更加可视化。
3. 积分领取、活动中心、分享赚钱等运营功能位于第一屏页面中屏，Icon 进行 3D 化设计，解决参与度低于预期
4. 未开通、已过期、开通会员后页面感知感和差异化降低。

以上分析和解决方案仅为展示和理解模型，不做为实际应用情况下的解决方案和最优解。

3. 漏斗模型

全称为"搜索营销效果转化漏斗"，漏斗的五层对应了企业搜索营销的各个环节，反映了从展现、点击、访问、咨询，直到生成订单过程中的客户数量及流失。从最大的展现量到最小的订单量，这个一层层缩小的过程表示不断有客户因为各种原因离开，对企业失去兴趣或放弃购买

漏斗模型的概念最早由 St. Elmo Lewis （美国知名广告人）在 1898 年提出的，叫做消费者购买漏斗（the purchase funnel），也叫消费者漏斗（customer funnel）、营销漏斗（sales/marketing funnel）等，是一种品牌广告的营销策略，准确的概括出了顾客关于产品或者服务的流程。

Lewis 提出的这个策略，后来被称为 AIDA 模型，即意识 – 兴趣 – 欲望 – 行动。在接下来的100年里，随着漏斗模型的推广，为了适应新的媒体平台，以及用户行为路径的改变，它经过多次的修改和扩展，产生了各种衍生版本，比如 AIDMA、AISDALSLove、AISAS、AARRR等。

①AIDMA 模型

AIDMA 模型是在 AIDA 模型（Attention、Interest、Desire、Action）的基础上，增加了 Memory，形成的注意 – 兴趣 – 欲望 – 记忆 – 行动（购买）的模型。

AIDMA 模型主要适用于品牌营销方面，从我记事起一直对于“恰恰瓜子”都一直记忆犹新总感觉好像瓜子除了恰恰之外其余也没有什么品牌，恰恰瓜子就是利用 AIDMA 模型一遍一遍的进行记忆点的回流。

当然现在很多互联网产品也开始把自己作为品牌去打造，比如抖音上的得物广告，博主还没有开始打广告我就可以猜到是“得物”了，都是从引起用户的兴趣，强化品牌记忆，从而吸引潜在用户不过，AIDMA 的用户流程并不是即时转化的，且缺乏购买后的用户反馈信息。

②AARRR 模型

模型更多应用于互联网用户增长，AARRR”转化漏斗，也即：acquisition（获取用户）、activation（激发活跃）、retention（提高留存）、revenue（增加收入）、referral（传播推荐）。

AARRR 模型因其掠夺式的增长方式也被称为海盗模型，该模型是 2007 年由 Dave McClure（500 Startups 创始人）提出的一 种业务增长模式’对应客户生命周期帮助大家更好地理解获客和维护客户的原理。

AARRR 分别代表了五个单词，对应了产品生命周期中的五个 阶段：

获取用户：指让潜在的用户首次接触到产品，或者可以更宽泛地理解为”吸引流量”。其途径多样，如投放各大门户网站广告、SEO 搜索引擎优化、ASO 应用市场引流等。

激发活跃：获取到用户后下一步是引导用户完成某些”指定动作”，使之成为长期活跃的忠诚用户。”指定动作”可以是浏览一篇文章，观看一节课程，又或是写下自己的评论与网友互动，任何促使他们正确而高效体验产品核心价值的行为，都是这一步的关键策略。

提高留存：用户来也匆匆，去也匆匆。如果产品缺乏黏度，导致的结果就是用户一个管子进，另外一个管出，池子里面永远水量都蓄不起来。通常开发一个新用户是维护老用户的十倍成本。因此提高用户留存，是维持产品价值、延长生命周期的重要手段。

增加收入：产品要能持续发展，必须是盈利，在有限的用户生命周期中，尽可能去完成商业价值的开发和转化。在互联网时代的产品中也有很多种盈利模式，包括 360 杀毒的免费软件+增值服务模式，腾讯优酷爱奇艺的会员模式，淘宝天猫开店的服务抽成模式等。

传播推荐：社交网络的兴起促成了基于用户关系的病毒传播，这是低成本通过用户口碑传播，推广产品的全新方式，近年来也不断有新的社区平台崛起，微信、微博、小红书、抖音、淘宝直播等，运用妥当就可以产生指数级的用户增长。

它被广泛接受为公司关注的五个最重要的指标，因为这些指标有效地衡量了公司的增长，同时又简单且可操作。

③AISAS 模型

因为 AIDMA 模型缺少用户反馈的环节，且随着互联网用户教育的完成，消费者行为模式发生了改变，随之衍生出了 AISAS 模型（Attention、Interest. Search. Actions Share）,也 就是注意、兴趣、搜索、行动、分享。

最近被百度网盘的周年庆活动“理性”消费了一波然后我带动了好友也消费：

本次运营也可以对应福格行为模型，福格行为模型目前几乎已经应用在绝大多数产品运营。此处仅说明 AISAS 模型的应用。

Attention：在进入百度网盘后会在首页和我的页面均有 9 周年活动年 SVIP 会员活动的入口，App 也换成了 9 周年的标志。

Interest：活动优惠价确实会相比较平时低很多，对于经常使用百度网盘的用户来说肯定会引起兴趣。

Search：当 Banner 或者标题引起用户兴趣后，用户会进行相关检索进入或者直接点击入口进入。

Action：进入详情页后，用户会滑动查看本次活动的内容，进行决定是否要付费。

Share：用户付费后对于本次活动的力度很满意，之后会进行朋友的分享，避免错过本次活动。

4. 5W1H 模型

5W1H 是一个帮助我们完成任务的分析工具，由美国政治学 家拉斯维尔于 1932 年提出’并经过不断的优化和更新。广泛应用在企业管理、学术研究、生产管控、日常生活中。

5W1H 模型，就是提出下列 5 个问题，通过收集、定义这 5 个 问题，找出解决方案的做事方法：

WHAT：要做的产品、需求是什么

WHY：为什么要做这个，原因是什么

WHO：设计给谁用的，对象是谁

WHERE：产品使用的场景、环境是什么

WHEN：什么时候开始做，时间节点呢

实例说明：一款电商产品详情页（H5）的改版

说明：该产品为产品启动期产品，是一款跨境电商平台。前期主要利用H5链接去推广，推广平台多为：谷歌、脸书等。其他推广方式此处只说两种：独立站引流、邮件营销引流。

邮件营销页面：

详情页页面：

①Who：哪类用户为产品主要用户？

（1）因为产品是起步阶段，所以产品的流量来源更多的是以各个不同的社交平台进行引流。

（2）除社交平台引流之外，还会来自于独立站的引流，独立站做不同的垂直电商，主产品为全品类产品。电子邮件引流主要是因为国外用户的习惯添加的一种引流方式。国外用户查看电子邮箱的频率会高于国内很多，很多通知、文件等都是通过电子邮箱去接收发送。

（3）还有少部分的老用户

引流用户路径：点击 Banne（商品图、链接）—商品详情页—下滑展示商品详情—点击购买—填写订单信息—下单支付

老用户：点开 App—挑选商品（搜索、浏览等）—商品详情页—下滑展示商品详情—点击购买—下单支付

由于产品生命周期原因，更多的会是引流新用户，所以在进行重新设计时，需要对页面、功能、布局进行仔细考虑更加注重新用户的体验，同时优化现有用户的体验。

②Why：用户为什么要点击进来产品详情页？

后期会推出社区板块可以利用起来用户的碎片化时间，而不仅仅是当用户想购物的时候打开App进行浏览。

用户会处于好奇或者觉得商品宣传图不错，好奇心驱使用户点开推广链接进入商品详情页。

③When：用户会在什么情况下点击链接进入本产品？

闲暇时间打开电子邮件后进行浏览、在平台刷动态时进入本产品、在独立站点购买后感觉不错，选择进入主站点

④Where：链接入口在哪里？

社交平台上的产品应用场景/产品优惠活动等/电子邮件内部产品链接/手机App

⑤What：本次商品详情页内应该有哪些板块？

商品主图/商品详情板块/用户评价板块/更多商品板块/用户保证板块

⑥How：怎么设计本次商品详情页？

• 功能上对比竞品详情页，列出优劣进行功能对比
• 视觉上由于推广平台的因素，平台更多的是年轻化用户，所以页面设计偏向于干净简约
• 对于新的产品应给予用户更多的安全保障，所以可以把保障类信息板块提高层级

以上就是本次的全部内容，有点肝不动了。之后还有三到四篇，感谢观看！