交互设计(上)

用户头像
上海/UI设计师/4年前/3286浏览
交互设计(上)

建议电脑观看,阅读时间大约三十分钟左右!本文中的交互设计为:界面交互设计(C端案例为主)交互基础可移步主页观看💇

前沿:


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


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


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


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


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


交互设计—————维基百科


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


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


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

                                                                                                  

🔍具体交互工作流程和交互设计师在工作中的产出可以参考在主页的另外一篇文章🔍


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

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


1/4  福格行为模型                                                                             

福格行为模型,以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  双砖模型                                                                             

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


细分扩展双砖模型


🔍双砖模型主要分为四个时期:


🌲发现阶段—发散性对问题的洞察;

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


🌲定义阶段—收拢性的聚焦问题;

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


🌲发展阶段—发散性的寻找可能方案;

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


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

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


🌰实例说明(1)

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


🏠案例介绍


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


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


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


1⃣️发现阶段

1.已经是会员的用户对于升级会员的点击转化率低

2.网盘为工具类产品,社交属性较低不需要使用很强烈的会员和非会员标识去区分

3.用户点击我的页面更多的是想查看自己的总储存量和剩余储存量

4.我的页面的活动(活动中心、分享赚钱、积分领取)参与度低于预期


2⃣️定义阶段

1.调动已是会员的用户进行升级(可组合套用福格模型)

2.降低非会员的感知度,把会员和非会员差异化拉低

3.增加查看储存量的空间占比

4.重设计入口,变动页面布局占比


3⃣️发展阶段(提出多种方案)🌰此处交付阶段仅一种方案

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


4⃣️交付阶段

未开通会员基础对比

已开通会员基础对比

会员已过期基础对比

添加动效设计


🌲解决问题

1.通过加大会员版快设计,提示升级会员、开通会员、续费会员点击转化率

2.将空间管理层级提高,刚点击进入我的页面后空间管理处增加动效设计。使剩余储存/总储存/已占用储存更加可视化。

3.积分领取、活动中心、分享赚钱等运营功能位于第一屏页面中屏,Icon进行3D化设计,解决参与度低于预期

4.未开通、已过期、开通会员后页面感知感和差异化降低。


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



3/4  漏斗模型

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


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


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



1/3 AIDMA模型

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


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

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

🌰蜜雪冰城

2021年火爆全网的蜜雪冰城系列、得物抖音广告、网抑云地铁广告等!


2/3 AARRR模型

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


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


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



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


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


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


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


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


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


3/3 AISAS模型

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


🌰最近被百度网盘的周年庆活动“理性”消费了一波然后我带动了好友也消费——————飙红提示哈哈哈哈



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


🌲Attention:在进入百度网盘后会在首页和我的页面均有9周年活动年SVIP会员活动的入口,App如果也进行了9周年的标志。


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


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


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


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



4/4  5W1H模型


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


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


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


🌲WHY:为什么要做这个,原因是什么


🌲WHO:设计给谁用的,对象是谁


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


🌲WHEN :什么时候开始做'时间节点呢


🌰实例说明——一款电商产品详情页(H5)的改版


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


邮件营销页面


详情页页面

1⃣️Who:那类型用户为产品主要用户?

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

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

(3)还有少部分的老用户


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


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


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


2⃣️Why:用户为什么要点击进来产品详情页?

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

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


3⃣️When:用户会在什么情况下点击链接进入本产品?

—闲暇时间打开电子邮件后进行浏览

—在平台刷动态时进入本产品

—在独立站点购买后感觉不错,选择进入主站点


4⃣️Where:链接入口在哪里?

—社交平台上的产品应用场景/产品优惠活动等

—电子邮件内部产品链接

—手机App


5⃣️What:本次商品详情页内应该有哪些板块?

—商品主图

—商品详情板块

—用户评价板块

—更多商品板块

—用户保证板块


6⃣️How:怎么设计本次商品详情页?

—功能上对比竞品详情页,列出优略进行功能对比

—视觉上由于推广平台的因素,平台更多的是年轻化用户,所以页面设计偏向于干净简约

—对于新的产品应给予用户更多的安全保障,所以可以把保障类信息板块提高层级



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

57
举报
|
160
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
空的平台平面和自然景观
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
城市园林平面布局航拍
古风平面仕女与瓷器
倒计时,海报,平面
海底世界插画
“知识宅急送”外卖,快递,平面,海报,素材,教育
牛奶乳液层次平面平铺平面
平面男孩喝咖啡插画设计
平面插画设计女孩喝咖啡
金色颗粒质地的平面
金色颗粒质地的平面
平面设计 吊牌设计
玄关入门地毯印花图案红地毯
平面人物插画
金色颗粒质地的平面
平面书法字手写
金色颗粒质地的平面
平面花卉图案扁平简约无缝拼接插画
平面插画情侣/矢量
城阙凡花
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
中国传统纹样创新图案设计
你可能喜欢
相关收藏夹
大家都在看
登录注册