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

前沿:

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

我对于交互设计师的概念更多的是来自于 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:怎么设计本次商品详情页?

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

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

收藏 79
点赞 46

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。