三个方向带你了解场景化设计

前言

——

随着科技的进步和互联网的发展，过去机械的单向交互方式逐渐被打破，用户使用移动端的场景越来越丰富，设计师也开始需要通过主动的观察用户所处的不同场景，感受用户情感，预判用户意图，来为用户提供更智能更便捷更贴心更高效的服务，场景化设计已经融入互联网设计的方方面面，下面的文章当中，我将从三个方向去阐述和列举场景化设计。

随着移动端的不断发展，从固定电话到移动电话，移动端的设计渐渐的融入在用户的身边，深度的跟随着用户，陪伴着用户，慢慢的，开始观察用户，感受用户，在这个过程背后当中，场景设计逐渐产生，设计师通过针对用户所在的实际场景来设计，建立用户与场景之间的联系，给用户带来更贴心，更高效的体验设计。

1-1  基于不同用户的场景化设计

——————————————

腾讯视频 - 播放器护眼模式

如今各大产品都在上线了“青少年模式”，越来越多的产品关注到了成人与儿童这两个不同的用户群体，腾讯视频在青少年模式中推出的播放器护眼模式，通过摄像头来获取用户当前距离手机屏幕的距离，当用户离屏幕太近会有提醒并停止播放，当用户位置在正常距离以后，提醒消失。帮助青少年养成合理观看手机，爱护视力的好习惯。

滴滴打车 - 关怀模式

滴滴打车新增了“关怀模式”，在关怀模式下，整体的页面字号放大，在功能上，更极简的打车模式，将复杂的任务拆分为拆分为目标清晰的子任务，并提供清晰的反馈，来方便用户的使用，关怀模式更有利于老年用户以及视障用户使用产品。

产品在体验上的提升不应该仅仅是针对主要群体，跟多的是考虑到特殊群里的体验，以上两个案例，根据不同的年龄人群“青少年和老年”，适应了不同的产品体验模式，让更多的用户群体都能够得到更好的产品体验。

腾讯地图 - 左手操作功能

当用户在腾讯地图设置中开启左手操作功能，首页地图上的侧方操作控件会移动到屏幕的左侧，方便左手用户点击和操作，人性化的设计容纳了拥有不同使用习惯的用户。

高德地图 - 视觉障碍模式

在地图软件当中，我们通常都会用红色表示路段拥堵，绿色表示通畅，在色盲色弱人群当中，红绿色盲也是比较常见的色盲类型，所以在高德地图中，为色盲色弱用户做了专属的路况配色，贴心的考虑到了特殊人群的体验。

优酷视频 - 色弱模式

优酷视频在更多模式选择中，为用户提供了“色弱模式”，并有不同色弱人群的细分“红色弱”“绿色弱”“蓝黄色弱”

饿了么 - 无障碍色盘

在饿了么送货骑手中，约8%受色盲色弱的困扰（全国男性群体中红绿色盲色弱占比达8%-9%，饿了么骑手男性占比90%），为此饿了么设计团队在2019年对app的进行了重新设计，包括使用WCAG无障碍色彩对比度，以及无障碍色盘，以及调整字阶，使用辅助图形等设计手段来解决部分骑手在送货途中使用APP的痛点问题。

1-2  基于不同时间的场景化设计

——————————————

美团/美团外卖 - 不同时间段展示不同推荐

外卖行业本身就具有一定的时间属性细分，用户早中晚点餐上肯定会有不同的诉求，美团外卖在不同的时间顺应用户的不同诉求来推荐不同的内容，帮助用户挑选在该时间段内的用餐。

美团在一些周末和特殊节日上，用户在不同时间的诉求不同的，相关推荐也会有所不同。

QQ音乐 - 不同时间的个性化push推荐

QQ音乐会根据不同的时间，给用户推荐不同的个性化push通知，早上是“每天起床气一句”“最气不过起床气” 冬日是“冬夜需要”。结合用户当前时间段下推荐相关的push，不仅增加了用户的点击欲望，也拉近了和用户的距离，让用户时而暖心，时而感到有趣，这么可爱的push通知，也是辛苦QQ音乐的运营小编了～

1-3  基于不同地点的场景化设计

——————————————

iOS - 勿扰模式新增位置属性

在iOS12系统当中，新增了地点勿扰模式，长按勿扰模式的按钮，可以选择“直至我离开此位置”，用户在看电影，会议或一些特定的地点可以灵活的使用该功能。

大众点评 - 首页根据地理位置个性化推荐

在使用大众点评时，当我的地理位置在我的常驻地北京时和将地理位置切换到“重庆”时，首页展示的信息和内容框架都发生了变化，产品根据我的地理位置推断出我现在搜索的目标地不是我的常驻地，预判到我可能存在即将出游到当前定位的城市，会直接给我推荐一些攻略，和一些“怎么玩”“”订住宿“”游景点“的旅游攻略向内容。

1-4  基于不同环境的场景化设计

——————————————

iPhone -  接听功能

iPhone在用户接电话的场景下，根据用户所处环境不同，适配了不同的方案。不同的当iPhone处于息屏状态接电话时滑动接听，防止误触；当iPhone在使用时接听电话为按键接听。减少用户操作成本。

支付宝 - 收款码功能键盘

在支付宝的收款码扫一扫功能中，用户向他人展示收款码时，手机向下倾斜后，扫码的提示文字和用户的头像会发生旋转，其他功能会相应弱化或者直接消失，以便方便付款人阅读，充分考虑到了现实中的操作环境，保证了双方的使用体验。

支付宝等金融类产品 - 后台运行下模糊处理

支付宝等金融类的产品，在用户开启后台后，会对页面进行高斯模糊处理，避免了后台场景下用户无意中泄漏自己的信息，也防止了被偷窥。（支付宝在页面底端还添加了温馨提示：支付宝全力保护你的信息安全）

1-5  基于不同事件的场景化设计

——————————————

支付宝 - 停车缴费功能

在输入车牌省份时，会直接弹出各省/直辖市的缩写专用键盘，并且可以直接进行大写字母与城市简称的切换，降低了用户的输入成本，提高了整个功能的使用效率。

百度键盘 - 横屏游戏模式

百度键盘在游戏模式下，会接入游戏快捷回复语并自动开启和谐模式，增加趣味性的同时方便了我们在游戏进程中的快捷输入，将九宫格按键进行等比缩小展示，方便用户点击。

iPad OS键盘 - 浮动式键盘/速滑输入

Pad OS键盘在使用中，可双指捏合可以快速缩小键盘，然后将它移到合适的位置，即能单手打字，又能给你的app留出更多的空间，并且增加了快速输入的功能，只需要在键盘之前轻扫，即可打字。

情景预判的交互设计是建立在整个产品的框架上和对用户深刻理解上的细节迭代。预判设计主要有两类目的：一是在用户初次体验某种功能时引导用户，避免用户陷入困惑；二是提前判断用户行为，缩短行为路径。新功能引导更倾向于产品功能本身的逻辑和价值，这次我们主要主要讲第二点，提前判断用户行为。

预判设计强调主动性和智能性,是决定产品是否体贴、聪明的重要因素，是走向人工智能的基础，对微交互中的预判设计进行分类研究有助于加深对其了解和认识,进而在实践中应用以提升用户体验。预判设计可以很好的在用户的操作过程当中进行简单高效的引导和预判，帮助用户更流畅舒适的使用产品。

2-1  顺应用户行为的预判设计

——————————————

在互联网发展中，产品功能的流程越长，操作步骤越多，越要求用户的理解能力和学习成本更大，耗时也会相应增加。因此体验设计师在理解用户行为的交互设计的基础上能够做到减少冗余步骤，简化操作流程。顺应用户行为的预判设计也可总结为四个字：以简驭繁。抛开繁杂的操作过程，运用更少的任务和行为来达成用户目标。简约不仅仅是视觉的形容词，同样适合行为。

支付宝 - 转账功能

聊天页转账：在支付宝聊天页，很多时候我们想给对方转账，会习惯性的在输入框中输入相应的数字，但在操作错误之后，支付宝会在输入框上方弹出相应数字的转账，点击之后会直接进入转账页面进行操作。对我来说，这个功能已经不是简单的帮助用户纠错，现在更像是一个快捷键一样方便着我们的操作。

手机号转账：当我们复制手机号后打开支付宝转账功能，会弹出该号码的转账气泡引导，提前判断了用户通过手机号去转账的路径。用户可以点击气泡一键跳转到转账页面。

消息页 - 找人转账：在消息页面，当用户开始上滑操作时，会出现「找人转账」的气泡提示，点击进入用户列表的简约页面，去掉了一些生活号服务号企业号等无用的对话框，提高了用户寻找的效率。

一个转账的功能，在不同的页面不同的场景下，支付宝在体验上把用户情景预判设计做到了极致，事实上，用户的行为中渗透了意识。从用户的行为推断用户意图，将用户的意图结果化，结合用户的使用场景，顺应用户的行为，缩短用户的路径，才能给用户带来最流畅的交互体验。

正如《一目了然》中所说，“当一个软件设计得很糟的时候，我们往往能立刻指出哪里做的很差；但一个优秀的软件，你却往往难以解释优秀从何而来”，因为沉浸式的流畅体验为你减轻了很多思考的路径与时间。

淘宝 - 智能填写地址功能

在新建收货地址的场景下，填写复杂的地址信息的过程往往都是繁琐而费时的，而设计师在此场景下考虑到用户需要地址的多样性，以及用户行为背后的含义，当用户复制了一段收货地址，打开新建地址页面时，App将主动提示弹窗“是否粘贴刚复制的信息”点击“确认粘贴”即可粘贴收货地址到对应列表项，这种预判设计对于用户来说是自然且让人愉悦的。我们不仅顺应了用户的操作行为，还在其中大大的帮助用户减少了很多操作。

2-2  分析用户行为的预判设计

——————————————

预判设计的主体是用户行为，从用户的视角出发，分析用户行为，是设计师建立在整个产品的交互里路程和功能框架上，对用户的行为深刻洞察后进行细节的改进。

Mac - 鼠标放大功能

当我们使用电脑时，总会发现找不到鼠标位置的情况，iMac设计师在识别到用户开始连续晃动鼠标时，分析到用户当前的状态可能是在寻找鼠标的位置，会对鼠标做一个放大的效果，帮助用户快速定位到鼠标的位置。

抖音 - 刚刚看过功能

在抖音我们刷到一些连载视频后，我们都会去进入作者的个人页去寻找上下集，在作者个人页作品很多的情况下，可能要寻找好久，抖音在个人页的作品卡片上添加“刚刚看过”的提示，方便了用户在浏览中能够更快速的定位到刚才的视频。方便继续衔接观看。虽然一个小小的功能提示，我们从用户行为，预判到用户的需求，带给用户更方便更快捷的体验。

美团外卖 -「再来一单」和「相似商家」

在美团外卖中用户可以在订单页面直接点击「再来一单」按钮选择和上次一模一样的商品加入购物车，如果一家店没有营业的话那么则会显示一个「相似商家」按钮。

结合实际我们操作的场景，外卖产品，我们重复下单的频率会比较高，当我们来到这个订单页面，「再来一单」的按钮可以更方便更快速的帮助我们下单，但当商家休息的时候，这个时候继续展示「再来一单」按钮对用户来说也是无效的，我们往往会回到首页去搜索相关类似的相关产品，然后再重新下单，而这时候「相似商家」按钮直接帮助用户一键定位到后续的一系列操作，真正的做到在分析用户行为中，预判用户操作。

2-3  符合用户行为的预判设计

——————————————

设计师做需求时，往往需要考虑在特定情景下，用户行为背后的思考与需求。因此符合情景的预判，我们也可称其为“符合用户感知的预判”。思考用户使用产品的情景，及时而高效的迎合用户对于当前场景的需求。

墨迹天气 - 降水雷达图

墨迹天气的降水雷达走势图，进入之后，放大、缩小屏幕就可以查看全中国的云图了，墨迹天气的云图可以查看到降水情况、闪电、积雪（冬天才有的功能），并且伴有文字提示，在未来两个小时的天气情况，方便了有出门需要的同学实时查看天气。

微信聊天 - 用户撤回消息/避免误点删除

在微信聊天功能中，我们可以对两分钟以内的消息进行撤回，但相信大家都有跟我一样的尴尬经历，发了错误的内容想要撤回，却一不小心点了删除，再也没有机会撤回了。

微信在这个功能上做了很好的改进，当我们的发出的消息小于两分钟时，该消息只能撤回，去掉了删除功能，在该消息超过两分钟后，则撤回按钮消失，只能进行删除操作，两个功能进行了互斥处理，很好的避免了这个场景下用户会误触。

淘宝 - 评价操作

当我们选择好评的时候，会自动勾选到“公开状态”，当我们勾选差评时，系统会自动取消”公开“状态勾选，默认匿名发送该评价，很好的保障了差评用户的人身安全问题和个人隐私问题。

淘宝 - 搜索结果页标签展示

当我们在淘宝搜索电脑包时，展示的内容下方会自动展示商品的容量标签“可放14寸电脑”，帮助用户在列表页面就能筛选到更合适自己的商品，当搜索玩具时，也会展示当前商品适用的年龄段。产品根据用户搜索的内容，自动匹配能够帮助用户进行筛选的标签。

小结

——

预判设计当中我们从三个层面进行了分析，从顺应用户行为的预判设计，到分析用户行为的预判设计和符合用户行为的预判设计。一个好的产品，往往会更多的使用用户语言，通俗易懂地让用户可以对整体的使用方式一目了然，而不是产生一系列的问题，迫使用户停下来，进行不必要的思考。用户的每一次停顿对我们来说可能都是一次用户流失。而预判设计要做的，是根据用户的行为/用户所在的场景，让功能主动找到用户，并让用户与之产生自然的交互。

场景化设计中，以情感化为目标的设计同样需要具体场景具体分析，通过细节上的改变使得产品在当前场景下能够与用户产生更多共鸣，主要从细节出发满足用户在当前场景下的情感需求，让用户感动，给用户惊喜。

其实用户在使用产品的过程中，同样渴望在使用产品时能够得到情感上的互动，这反映在设计上即是产品情感化设计。情感化把握得好的产品往往更能抓住用户的心。

3-1  本能层的情感化设计

————————————

躺平 - 空状态页面

躺平是一款阿里旗下的生活方式APP可爱的小人和拟人的语气，设计师让每一个空白枯燥的空页面瞬间变得可爱和有趣起来。

快手 - 节日开屏设计

快手在每一个特殊的节日都会给用户送来精美的开屏祝福，让用户在节日当天打开app就能接受感受到产品满满的心意和祝福。

B站/快手/网易云音乐 - 生日祝福

在用户生日的这个特定时间和特定场景下，很多产品都给予了用户不同的生日祝福，B站是一张有关于星座的动漫海报，快手给用户定制了专属生日开屏，网易云音乐的每日推荐为用户献上生日快乐歌，不同的产品结合自身不同的产品属性，给一位用户都带来了不同的生日祝福。

3-2 行为层的情感化设计

————————————

腾讯视频 - 夜深了提示

想必大家都有熬夜刷剧的经历，在腾讯视频中，在全屏模式下点击退出清屏模式下，页面上方的时间旁边会显示夜深了，只是简简单单的三个字，这深夜在这个场景下，感觉内心也有一瞬间被人关心的触动，体验了一个产品的人文关怀和对用户的体贴。

QQ音乐 - 会员到期弹窗

QQ音乐的绿钻到期挽留弹窗真的是别出心裁，推荐了4首歌曲，连起来就是VIP我们舍不得重要的你，用歌曲的的名字来表达对用户的诉求，趣味化的设计让这个小小的挽留弹窗不仅没有感觉到打扰，还感觉很有趣。

美团外卖 - 订单页面的天气

当有特殊天气时，我们打开美团外卖的配送页面时，页面会在页面中做当前天气的拟实物效果，下雨天整个页面也是下着大雨，下雪天整个页面飘着雪花，甚至雾霾天气整个页面是是伴着黄黄沉沉的云，设计师预判到用户打开该页面是想看外卖到了哪里，看到外面的天气如此糟糕，大家都不忍心催促外卖小哥了，大大减少了特殊天气下配送不及时的投诉率。

Bibilibi - 密码输入

在B站输入密码的时候，页面上方的小人会遮住眼睛，潜台词：我不看，你放心输入吧。在输入密码的情景下，设计师用趣味生动的卡通形象给用户带来了更信任更安全的感知。

Bibilibi - 黄油相机加载动画

黄油相机的加载动画，是一个可爱的切黄油的小人，并且加载当中的文案，会告诉用户当去前正在加载的内容是什么，能够让用户对于加载的时间有预期，让等待加载的过程不会枯燥。

3-3 反思层的情感化设计

————————————

苹果 - 残章人士emjio

苹果新增 13 个与残障人士相关的 emoji，包括导盲犬、轮椅、义肢、戴着助听器的耳朵等。有意思的是，苹果不仅按照以往的做法为涉及人物的 emoji 按照性别和肤色提供多个版本，而且在表示辅助器具的 emoji 中还做了细节上的区分，比如轮椅有手动和自动之分，不同导盲犬的导盲鞍样式也有所不同。

回看历年苹果emoji的更新，从肤色平等，到性别、性向平等，再到为残疾人设计，这让我想起了苹果为残章人士做的广告 - 科技属于任何人

豆瓣 - 悼念已故用户

最近，快手B站豆瓣等都陆续上线了“纪念账号”，产品的意义不仅仅是留住生者的精彩瞬间，更多的也是留住逝者的人生印记，对已故用户的账号进行保护，豆瓣在已故账号上做了悼念用户的活动“在他/她的头边放一束山茶花”的方式来纪念已故的用户。

腾讯公益 - 404页面

腾讯公益的404页面，这个项目的灵感源于欧洲失踪儿童联合会主导的，名为“NotFound Project”的网络公益工程。就是利用404页面展示那些被拐卖儿童、失踪儿童的信息，帮助那些孩子重新找到家人。

丁香园 - 404页面

丁香园404页面界面展现了因恶性医患遇害的医生同道，文案是“你所访问的页面就如那些遇害的同道，已离我们远去。”下面还会有这些白衣天使的照片和名字。以这样的方式悼念亡者，也侧面展现了丁香园的社会价值。

在页面走失的这种特殊场景下，404页面视作可被利用的空间，来呈现公益信息，这种方法暂时减弱了用户对产品页面走失的愤怒，将注意力转向对弱势群体或社会问题的关心，侧面感受产品的社会价值，这种方法适用于社会公益性质或相关业务的产品。以上的腾讯公益和丁香园对于这块的设计都是很好的案例参考。

快手 - 搜索页负面情绪引导

在快手搜索一些负面的情绪词汇时，会提示用户“别怕，我们都在”。并附有24消失免费心理危机咨询热线，从推荐位banner点击后会进入一个群聊，里面都是其他用户留下的暖心话语，这些情感化的设计让那些正在经历困难，或者想要终止生命的人传递以温暖。我们可以帮助你，你并不是孤单一人。微信/知乎等搜索引擎下都有不同的对于该情况的情感化设计。

京东/淘宝 - 搜索页面濒危动物保护

在京东搜索穿山甲，会直接挑战到保护濒危动物页面，传递出了一个企业对动物的保护意识。页面中的穿山甲≠治病，向全民科普濒危动物的现状和对于人们对于野生动物的错误认知。淘宝更是对野生动物保护启动了绿网计划，搜索穿山甲/象牙等都会进入到该活动页面。

小结

——

情感化离不开场景化设计，上面四个案例分别是两个404页面以及两个搜索引擎的不同设计，不同的产品赋予了不同的含义。不同的场景下设计师也需要有不同的思考，陪伴产品一同进步。

情感化设计更多的是带给用户瞬间感动，很难形成长期的用户激励或用户增长，因此情感化设计主要目的是通过情感累加，提升产品品牌形象；产品不仅是所有功能的集合，他们真正的价值可以是满足人们的情感需求，而其中最重要的需求就是建立自我形象与社会地位。 反思层是包含并超越前两个层次，我们要经常思考，为什么同类型的产品，我们要选择它，为什么它给我留下了很深刻的印象，这都是反思水平的设计需要做的。

总结

——

身为用户体验设计师，立足于用户真实使用场景，在理性价值层面上，打造可用、易用、高效的设计；在感性需求层上赋予情感上的愉悦性，在反思层面赋予意义价值。我始终认为，设计师的天职不仅仅是把页面做的精美，更多的是你赋予产品的价值，你带给用户的体验。移动端的不断发展催生着我们不断进步和前进。2021一起加油～

参考文献：

用户行为预判的交互设计研究：https://uxren.cn/35899/

场景化设计的4个步骤：http://www.woshipm.com/ucd/3048752.html