用户 情感 产品 我们每个人，都会与身边的服务或产品建立起某种情感上的联系，首先我们通过以下 3 个小故事来理解一下。一、3个故事故事一：爱购物的女人你有没有发现这样的一个现象：身边大多数女性会买回很多不一定会穿用的东西，这是为什么呢？那是因为他们购物的过程中，已经享受了购物过程带给她情感上的快乐，比如享受了试穿、被他人服务、被他人赞美的过程。故事二：给美女主播打赏的工人据相关数据调查，很多人会拿出个人工资的 80%给女主播打赏，为什么呢？那是因为他们在直播当中喜欢与美貌女主播互动，在这过程中能够带给他情感上的满足感。故事三：购买保健品的老人另外还有一个现象，很多老人宁可省吃俭用也要买很多无用的保健品放家里，也不一定会吃，因为保健品能给老人情感上的安全感。以上三个故事向我们表明：商家在面对个人消费者的时候，通过满足人情感需求的方式，让人感受到幸福快乐或避免恐惧忧伤，从而达到赚钱的目的。同样，我们产品的目的也是服务于人，也需要满足用户情感上的需求。美事是 58 沟通协作的办公管理平台，作为一款 B 端的工具型产品，相比 C 端产品在设计上会更理性和更严谨些，但给产品注入更好的情感设计，是任何产品都需要考虑的，因为它不但可以增加用户在体验上的愉悦感，也能向用户传达它的品牌价值。那什么是情感化设计呢？唐纳德·诺曼在他的设计心理学提出：情感化设计是指以人与物的情感交流为目的的创作行为活动，旨在引起用户注意、诱发情感反应以提高执行特定行为的可能性设计。简单理解是：它是一种顺应或唤起用户内心情感的设计方法，旨在让用户产生积极的用户体验和行为。更多情感化设计干货：17个优秀设计案例，帮你快速了解情感化设计情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。阅读文章 > 二、前期分析1. 项目背景&目标基于美事 6.0 全新升级之后，产品界面的还有部分品牌视觉不统一、基础体验待优化的问题，于是我们启动了以“情感化”为设计方向，打造更精致的品牌视觉体验，来增加用户对美事新品牌的认知以及提升产品的基础体验。2. 应用场景梳理首先我们对市面产品可以做情感化的设计场景进行了大致梳理，包括：缺省页、操作反馈、引导浮层、表情包、闪屏、皮肤、生日弹窗、登陆页面、loading、下拉刷新等。由于 B 端产品和 C 端产品在各方面都存在较大的差异，B 端产品使用情感化的前提必须是在不影响产品本身的功能性与可用性的基础上，之后才能去考虑怎么从情感化的角度去优化这个产品。3. 建立情感化设计模型诺曼根据人类心理特征，将情感化设计分为：本能层、行为层、反思层，我们通过这三个层次，结合设计手段及用户心理搭建一套情感化设计模型。首先在本能层，通过感官的传递，在视觉上呈现给用户的感受是美观的、愉悦的，唤起用户对产品的喜爱；其次在行为层，通过简洁易用的互动模式，引导用户完成他的操作目的，建立起用户与产品直接的情感关联；最后在反思层，在本能层与行为层的共同作用下，通过运营设计手段来加强用户对产品的情感连接，并带来情感上的共鸣，以此来赢得用户对产品的认同。4. 关键词提取结合情感设计理论和我们的目标，进行提取了 4 个关键词，分别是愉悦性、趣味性、品牌化、情感共鸣。三、6个技巧接下来我们会通过围绕 4 个关键词及结合情感化设计模型，将情感化设计完美的应用到产品当中。1. 品牌符号化，传达品牌印记在本能层上，我们希望传达给用户的视觉感受是轻松、愉悦的，因此在设计启动页的过程中，先通过赋予美事 logo 更多的含义，以 logo 图形+内容的组合的方式来诠释美事产品的特点，来提升用户对美事品牌的感知；另外画面做轻量化处理，既能让用户的视觉更聚焦，也更能突出品牌来加深印象。2. 创意图形与文字，增加用户愉悦感插画和文字都是传达信息的重要手段，同时也是情绪的重要载体。因此在美事缺省页设计的时候，我们采用了创意的插画表达形式，再结合风趣幽默的文字，当用户遇到阻碍时，通过增加产品的流畅性和愉悦性能很好的减少用户不良情绪。这种良好的情感化设计，不仅能帮产品更好的传达品牌，还能引发用户的情感共鸣，为用户带来更愉悦的体验。3. 沟通互动，拉近用户情感美事作为沟通工具，表情包是用户沟通中最常用的表达方式，也更容易唤起用户的情感，并能有效的缓和或带动气氛，拉近用户之间的距离。4. 注重仪式感，创造氛围与意境反思层次的设计，在于更高层次地满足用户的精神需求，为了让用户感受到更多人文关怀，因此我们在新员工入职、生日、司龄的时候，会送上祝福和礼品，营造温暖舒心的工作氛围，向用户传递品牌温度。在职天数场景也都能加深品牌对用户的情感触达，让用户感到温暖。5. 打造设计周边，渗透品牌文化通过对美事表情包元素的提取，设计创意的礼品周边，既能有效渗透美事的品牌文化，还能大大提升用户对于产品的好感度。6. 情感运营，加强用户粘性年底通过盘点用户数据，为用户营造一个个性化、情感化、有温度的视觉感受，打造一份具有仪式感的专属年度报告，易拉近用户间与产品的距离。另外在可通过制造些话题，形成一定范围内的传播效应。总结到尾声，简单做个总结：在整个项目过程，我们从用户角度出发并关注用户情感的多样性，洞察更多用户的真实诉求，从而不断优化我们的产品体验设计。为了给用户提供更愉悦的体验，我们思考如何更好的将情感化设计应用到产品当中，简单来说可以分为以下三个步骤：首先明确项目的目标。这点非常重要，这能让我们在后面的设计过程中不跑偏方向。然后梳理情感化设计的应用场景。根据自身产品的需求，可以对应用场景做个优先级，慢慢迭代设计。最后通过符合或 IP 融合到设计创意并贯穿整个产品的设计中。拟人化的 IP 传达的信息，更容易引起用户共鸣。以上是我想跟大家分享的有关情感化设计的一些思考，希望能给大家带来些启发，也借此与大家一起共同探索、学习成长，欢迎大家在评论区留言。最后感谢大家的阅读。欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/emotional-design-skills
用户 情感 产品 情感化设计，由唐纳德·诺曼在 《情感化设计》 一书中完整提出，书中其由浅入深的将情感化设计分成了三个层次：本能层、行为层、反思层。相关的概念你可以看这篇：关于情感化设计，这篇干货带你快速入门这个知识点！小溜Epik：情感化设计是完善产品，提升用户体验的关键，在当今移动应用泛滥的时代，只有存在情感化设计的产品才能脱颖而出。阅读文章 > 接下来，我们就从案例中分析，作为设计师该如何在这三个层次中做好情感化设计。一、本能层 —— 感官刺激对于本能层，设计师可以在符合功能需求的前提下，尽力给用户带来听觉、视觉、触觉的感官刺激，促成用户与产品的 “一见钟情”。作为一款国民级应用，支付宝出行功能下的每个 icon 都做得很用心，小动画让交互更有趣：Airbnb 在北美登录界面的长按钮，按钮的颜色会随着鼠标移动而产生变化，让交互感受更加深刻：语雀 App 在生成长图进行分享和转发时，有不同的卡片样式可以选择，图案随机像开盲盒一样，促成用户尝试分享：在淘宝搜索商品，可以看到页面右下角的“花瓣图标”，点开后是拼接图效果来展示商品。每个小图可以是视频，也可以左右滑动翻页，视觉展示效果明显，挑选商品也更加方便：在互联网时代，表达哀悼也有了新的方式，很多产品都使用首屏去色黑白化，来缅怀领导人的离去：二、行为层 —— 细节引导对于行为层，设计师需要对用户的行为进行预判和引导，利用细节处理打动用户，让用户对产品产生信任感和依赖感。使用 “微信读书” 在读到一本书的 50% 的时候，页面顶部会显示剩余阅读量，并会根据你之前的阅读速度估算剩余时间，鼓励你继续读：高德地图利用树木和楼高的数据，配合天气太阳角度的计算，在夏天时为选择骑行的用户提供有林荫和楼阴的“清凉导航路线”：在一些车辆限行的城市，高德地图增加了“添加限行日提醒”功能，根据不同城市有定制化的规定。在添加车牌号时，键盘默认开启大写字母和数字组合，方便用户输入：微信的搜索推荐，会用一些小脚标来吸引用户点击，比如“互联网精英都在看”，应该是根据文章阅读的用户画像来做的精准推荐：美团外卖在用户给订单打差评时，会自动开启匿名开关，保护用户的隐私：钉钉会在你长时间（约 3-4 小时）未读某人发的单聊消息时，再次发出通知提示，避免你错过重要消息：微信群聊天，大家通常都会设置“消息免打扰”，但也很可能会错过很多重要信息。微信可以在群聊设置中选择关注的群成员，这样这几个被你关注的群成员在说话时候，你就可以接到通知提醒：三、反思层 —— 认知共鸣对于反思层，设计师要调动用户最深层的记忆和感知，将视觉效果、产品功能和用户认知紧密结合，形成用户对于产品和品牌的深刻认知。英雄联盟的微信广告植入别具一格，将游戏用语、社群平台和用户很好的连接到一起，你只要发送 “亚索，听我口令…” 这段口令，就会唤起动画效果和小程序：饿了么的搜索推荐，使用滚动条状态，并配有古灵精怪的形容词，还会有 IP 形象不断的加词加戏：网易云音乐的播客功能，在切换主题内容时使用的是模仿老式收音机调频的方式，有趣的是，你能感觉到手机随着滑动调频而产生明显的震动感：花小猪 App 为了缓解用户等待平台派单时的焦虑感，将等待进程设计成红包进度条样式的样式，等的时间越长红包越大，让用户舍不得离开：Google 浏览器首页的 Logo 涂鸦变体经常会和实际事件相呼应，比如在某年的月食日时曾使用过的涂鸦小动画，点击后则会跳转到与月食知识相关的百科页面：欢迎关注作者微信公众号：「长弓小子」本篇来源：优设网原文地址：https://www.uisdc.com/emotional-design-2
语音 互动 情感 通过构建伙伴认知、满足情感互动、增强沉浸体验等手段，增强 AI 伙伴的曝光率，进一步向用户传达智能搜索感知，促进搜索行为转化。数字人设计实战：Blender 实战！3D卡通虚拟数字人角色设计完整流程（中）着色是卡通数字人角色设计的重要元素之一，它对于角色有着基本的色彩表现和结构表现等造型作用，并且能够表达角色的情感、塑造角色的性格，甚至通过其象征作用赋予角色某种特殊属性或成为角色的缩影。阅读文章 > 一、项目背景语音搜索场景在功能不断迭代的同时，也在探索更年轻化的玩法、传递更多元的体验感受。在产品初期，我们尝试在语音搜索场景下增加 AI 伙伴的形象，虽然线上版本已经实现，但从产品形态以及用户反馈上看，还没有达到可情感互动的效果。所以在本次迭代上，我们着重从情感联结、闲聊互动的维度，对语音搜索进行创新性尝试。二、设计挑战与目标围绕项目背景，从现在语音搜索的用户行为与框架来看，有几个比较明确的问题：数字人引入后，发现用户对人物的点击行为和聊天诉求均有增加，但由于功能受限，数字人没有办法给到及时回应。用户情感抒发得不到反馈；用户一搜即走，不会停留在语音搜索场景探索其他可玩功能。因为前期在语音搜索的优化中，已经尝试在面板中引入 AI 形象，上线后用户反响强烈，用户的行为中聊天、互动的诉求也明显增加。由此可见，满足用户对 AI 伙伴的情感化诉求是十分有必要的，同时语音搜索引入 AI 伙伴是体现同行业差异化的有力创新点，从行业报告《2021 年中国智能语音市场分析报告》中，也阐述了打造沉浸感语音搜索体验与引入 AI 是目前智能语音市场的发展趋势。综合以上原因，设计团队在与产品讨论过后，达成本次升级的核心目标：构建伙伴认知：强化“AI 伙伴”认知，激发语音搜索行为。满足情感互动：完善语音搜索场景情感化互动体验，满足用户期待。增强沉浸体验：打造可搜索、可互动、可操控、可定制等沉浸式语音搜索场景。三、设计举措1. 构建认知 - 语音搜索基础框架升级在旧页面中，语音面板限制了人物与按钮的展现，人物既要承载功能反馈又需要作为物理操作按键进行点击操作，与用户认知相悖且也不利于功能扩展。因此在新版本设计中，需要明确“人”在语音搜索里的属性，以及 AI 伙伴与语音搜索的关系。我们将语音搜索页面框架分为主要功能与辅助功能区。从旧语音面板中剥离出人物，并保留收音球在面板中做物理交互功能（发起收音、停止收音操作），利用 AI 伙伴的人物属性，打造智能拟人的交互反馈，满足用户情感诉求。以“人”为中心，最大化展示 AI 形象，增强情绪传递感的同时保证框架可拓展性。同时，将原堆积在面板中的功能与信息按优先级归位，确保页面信息清晰易读、功能操作热区无重叠、信息反馈区无干扰。新框架上线后，AI 伙伴互动与语音搜索的认知关系更加清晰，语音搜索跳框量明显增加，AI 伙伴带动面板整体导流增加，面板退出率下降。2. 引入情感 - 全场景情感化体验提升除了通过框架层面进行认知优化之外，为营造更贴合“人”的互动体验与情感建立，我们又根据语音场景对每个状态进行了情感体验升级。改版上线后，用户闲聊诉求和互动点击行为均有所提升，从而验证情感化的体验提升，满足了用户互动诉求。① 情感化引导提示：视觉上人物破框展示配合 AI 招手/比心的动作展示，不再是图片，而是可以对话的实体，同时使用年轻化的引导语气拉近与用户间的距离，增加数字人曝光，建立新用户心理预期，激发兴趣点提转化。② 互动提示规则升级：围绕“人”的真实情感，通过弹出气泡的方式模拟 AI 伙伴状态，比如听歌、读书、游戏。以此引发用户点击或进行互动行为尝试。并且配合 AI 伙伴升级引导规则，使引导能够根据不同场景进行适配，保证其既可以承接语音常规引导功能，又可以承接负一楼聊天互动，点击气泡可跳转对应负一楼场景、联动数字人语境内容，避免造成场景情感化割裂。③ 增加“AI 伙伴”情感反馈：增加人物动作、丰富情感化动态反馈，想要模拟更真实的“人”的状态，就需要满足更多拟人反馈。将语音搜索常见场景划分为聆听、识别解析、异常状态、指令响应、引导等 5 种状态。对应不同的状态，规划相应的数字人反馈动作或组合使用方式，可复用拓展其他相关场景，为设计与开发提效。3. 感知升级 - 营造沉浸视觉氛围确定了产品主要改版方向后，通过对目标的提炼，提取设计关键点「年轻化」与「情感化」，配合 AI 伙伴形象，需要呈现出轻松活力的氛围感，设计中运用了大面积的毛玻璃质感，使场景更加轻盈、沉浸。通过对色彩的运用来演绎年轻的视觉效果，诠释语音搜索年轻化的设计突破。① 定义视觉风格：围绕改版目标，定义设计关键词，由关键词延伸设计风格要点。② 形色字构质动：从「形色字质构」5 个方面提炼设计特征。基于视觉方向及特征提炼，在质感、形状、颜色三个设计中改动最大的方向详细描述。质感：设计趋势不断变化，半透明磨砂质感是近期流行的视觉风格，透过表层可看到背景模糊形态，有强化品质感、突出层级以及营销氛围感的特点，同时匹配视觉方向「轻盈」的特征。形状：在形状的设计上，整体界面元素保持大量带有弧度的形状运用，提高面板、按钮、图标、弹窗等元素的曲线比例，让界面始终保持年轻态，给人圆润、亲和的感受。颜色：颜色的运用为本次改版的重中之重，是打造年轻化氛围感知的基石。考虑到语音搜索场景日后的拓展，色彩上希望可以营造给用户一种轻松柔和的视觉氛围，并且元素的色彩需要与 AI 伙伴服饰相呼应，从而使 AI 伙伴形象更加灵动、场景搭配更加和谐生动。基础色彩范围制定：以度晓晓为示例，遍历目前线上所有度晓晓服饰装扮，对色彩进行归类处理，从中提取主题色系，从搜索色库中对应选出主题色环。如何在数字人装扮中提取主体色：我们需要把色彩量化，建立特定场景取色规则，根据规则层层筛选，我们可以从中获取 N 种主体侯选色。校正主体色，与搜索智库色彩形成映射关系：通过对数字人装扮的色彩分类，我们以 H 值为标准，通过调整 S 值与 B 值，划分了 12 个色相，设定对应色系的 H 值区间范围，如智能取色色值在该色相区间范围内，且吸取到的候选色个数最多，就在对应的色库卡中选取主体色。校正原则：色相必须保持是同类色、保持感官明度同频、保证视障人群的识别度建立辅助色搭配规则：为了保持背景层的色彩氛围营造，保证其具有清晰的识别度，我们以主体色为起点，选择了颜色相对较多的邻近色，在色温上保持整体色调的一致性，其次利用对比色和互补色，选择更加丰富多元的色相，制造更强烈的色彩对比，以保证满足各种使用场景下对色彩的需求。组件化思维拆解页面元素：在梳理了智能取色机制后，我们也在思考，语音面板涉及到的元素过多，往往会面临不同场景不同适配的情况出现，那么在做到视觉减负的同时，如何能灵活的替换对应元素呢？我们以组件化思维去拆分设计，进行立体化的分层，将引导层（热词推荐引导关注）、信息展示层（承接语音各类状态与信息）、形象层（强化 AI 伙伴智能感知）、背景层（烘托视觉氛围感）罗列出来，各场景可根据需要进行颜色延展，保证视觉样式达成横向统一，呈现出更加丰富的视觉内容，避免审美疲劳。总结本次语音搜索的改版升级，我们通过“构建伙伴认知、满足情感互动、增强沉浸体验”等手段，增强 AI 伙伴的曝光率，进一步向用户传达智能搜索的感知，从而促进搜索行为转化。构建认知过程中强化 AI 伙伴形象，增强语音搜索功能拓展性；同时结合“情感化”等全场景引导手段，营造更贴合“人”的互动体验与情感建立，对每个状态进行了情感体验升级；最后重新定制视觉风格，围绕「年轻化」关键点对整体氛围进行强化，让语音搜索场景更加年轻、有氛围感。本次改版上线后，搜索行为、互动行为均有所提升，用户体验也得到了显著提升。四、写在最后我们正处于数字化快速变革的时代，传统工具的基础功能已不再满足用户的诉求，人们的感官也从现实空间延伸到虚拟空间，AI 伙伴会逐渐融入人们的生活，未来语音搜索将不再是一个信息输入-结果输出的传统搜索工具，引入 AI 伙伴，可以让搜索更加智能，拥有人类一样的思维、表达、情感和学习能力，满足人们更高层次的情感诉求的同时，也可以让搜索更加简单有趣。未来我们持续对语音搜索进行升级，将 AI 伙伴与搜索链接的更加紧密，提升用户体验，创造出更多有趣的、创新的、别出心裁的年轻化设计。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/baidu-digital-human-role
张大湿
飞翔的企鹅
