腾讯出品！大屏数字人的设计实践复盘 收藏
前言 1. 数字人 服务分类 随着 元宇宙 概念的大热，作为基础建设元素的数字人在去年出现了井喷式的爆发。但实际上数字人并非近几年的产物，如果从世界上第一位虚拟歌姬林明美算起的话，数字人已经产生了近 40 年。
这些年来，各界对于数字人的定义和分类尚没有统一的共识。从广义上来讲，任何以数字形式存在且具有类人外观和行为的数字化资产都可划为数字人范畴。依照此类定义，我们尝试将市面上的数字人服务进行归类。从下图可以看出，数字人依照应用形态大致可以分为三类。除了由来已久的 IP 型数字人以外，市场中还出现了以完成服务为目标的业务型数字人，以及以真人为原型强调替身属性的分身型数字人。
从5个方面，帮你了解什么是虚拟数字人 大家好，我是 Clippp。
阅读文章 >
像洛天依、AYAYI 这类虚拟偶像和博主可划入到 IP 分类中，此类方向更关注数字人个人特性以及世界观的塑造，通常会采用 3D 高保真风格和手 K 或高精动作捕捉来确保整体形象的质量。而虚拟分身型则是以现实世界中的真实人类作为原型，为其在数字世界中赋予新生命。像 Travis 与堡垒之夜合作，在游戏世界举办虚拟演唱会就是此类虚拟人的一种应用。伴随着元宇宙概念的流行，相信定位在分身赛道的产品会致力于形象制作成本的进一步降低，从而让虚拟分身能力成为新数字时代公民的基础配备。
而笔者所在团队打造的数字人则是第三种–业务型数字人。与前两类不同，业务型数字人通常使用 AI 驱动来完成人机交互。面对此类型数字人，如何发挥其拟人性的优势，打造真实的服务体验是本次设计的核心要点。接下来我们将在以下篇幅中介绍业务型数字人的设计实践。
2. 数字人带来的体验变革 “数字人”作为信息载体 服务趋向透明化
传统的交互方式将界面中不同的元素，通过最优信息组合与层级堆叠，来承载用户与计算机之间的交流，如同翻译一样让双方彼此理解。但这样固定行为路径的信息结构，对于用户来说需要适应和学习，丧失了一部分自主能动性。诺曼（Don Norman）曾提出“无界面的界面”，界面设计追求透明性，以将对人机互动的干扰降到最低。所以从本质上来看，界面是以一个“具体对象”的身份出现的，既连接又分隔人与机器，以最自然的方式牵引与反馈信息与服务。而数字人正是界面服务本身的载体，让用户脱离界面本身的屏障，用更原始自然的方式面对界面，通过自然对话牵引服务。
界面成为关系的动态空间 信息流动在“人”与“数字人”之间
当系统的对话由“数字人”来进行承接后，界面的价值变成了推进“数字人”与“人”之间的互动，建立连结。我们发现相比较传统的线性交互逻辑，数字人的界面信息更偏向根据当前环境与用户状态的动态推送，除反馈当前对话结果外，也会根据场景中用户不断变化的多维信息为用户进行引导与推荐，同时为了保证服务场景的真实性，也需要与当前的交互环境无缝衔接，就此可见，界面不止是任务效率工具，同时也模仿人与人之间关系构建的方式，建立了人与机器互动的人文情怀。
以线下银行客服为例的设计实践 1. 项目背景 用户与客户价值双驱动 为虚拟客服落地提供势能
在探寻数字人产品落地场景的过程中，我们发现，需要将数字人的核心特性在特定领域中发挥核心价值，才能在市场中落地生长。因此低成本高转化的线下银行虚拟人客服，成为撬动金融行业的首选落地场景。
就客户价值而言，线下服务场景每天有大量人工客服机械回答同样的问题，企业要为这些重复劳动支付巨额人力成本。且服务人员素质、知识储备参差不齐，现场表现不稳定，迫切需要低成本高质量的服务工具。虚拟人本身作为信息载体，保留人与人面对面沟通方式的同时，大大提升了沟通效率与服务稳定性，且平台灵活的配置能力可支持业务实时更新，省去大量人工培训成本，成为企业信息人工服务的新触点。
就用户价值而言，角色身份上，面容亲和衣着职业的客服人员更能获取用户信任，引发用户交互兴趣。互动形态上，虚拟人打破了传统界面交互框架，将人作为信息交互对象，让服务有了具体“身份”，更易上手，信息获取更自然，让信息化程度不高的用户也可以摆脱设备恐惧，实现零门槛交互。
2. 场景关系构建 打破设备隔阂 让 “职业形象” 等候在 “ 职业场景 ”
大屏设备仅仅作为承载数字人的媒介，我们希望界面在具体场景中 “隐身”，让数字人真实站立在场景中，获得用户亲和信任感，专注与她面对面沟通，不感到违和与侵扰。为达成这个目标，我们需要探究以下几个问题：
如何塑造金融客服的职业形象 如何营造自然真实的对话场景 A.如何塑造金融客服的职业形象
塑造数字人的形象，我们一般会从人格特质与职业特质两个方向分别对数字人的外表、情绪动作进行综合考量：
① 外表维度
即构建数字人的脸型五官、发型、妆容服饰。对于业务型数字人，我们需要从人格特质与职业特质两方面来思考他需要拥有什么样的面容、五官特征以及服饰要素。
人格特质：银行客服需要表现出聪明专业的职业特点，同时又具备与人亲和的性格。参考相关面相心理学研究，浓眉大眼、脸型略尖的外表会给人聪明的印象，而嘴角上扬、眼型略弯，脸型棱角不凸显的外表会更亲和讨喜，在模特的选择上我们也尽量靠近这些特点。
职业特质：偏分扎发是银行客服常见的职业发型，妆容不易过浓，显得干练有精神又平实亲和。在衣着的选择上，除职业工服外，为保障不同银行品牌的服务通用性，我们在工服上添加了品牌露出位，透传客户品牌形象。
② 情绪动作维度
即构建数字人情绪动作的选型与表现。因业务型数字人主要承载效率型任务，我们在情绪动作的选型上弱化了数字人人格特质的表现，更偏向于职业特质的表现。
职业特质：为体现数字人职业特性，我们观察了线下银行客服的标准职业动作，选择了双手交叉于上腹部，丁字步站立的默认站位体现职业素养，同时减少无意义的动作设计，利用数字人的动作表情传达有效信息，如点头表示聆听，挥手表示内容推荐与指引，动作表现上选择幅度小、中性、自然的动作，以在表现鲜活灵动的同时不过分侵扰用户注意力。
B.如何营造自然真实的对话场景
为了能让用户在真实的线下场景有效且愉悦的体验服务，我们观察了线下银行的服务链路与空间设计，思考数字人全链路的进店服务体验，就以下两方面进行了思考与拆解：
① 舒适安全的社交距离
为了让数字人真实存在于场景中，与用户建立舒适安全的沟通，我们需要探究合适的人物身高与大小以保障用户与虚拟人之间距离适中交互自然。以 2019 年中国人平均身高作为参照，将 168cm 作为数字人实际身高，以便与用户建立平等沟通的视角。通常人与人在进行一般社交活动时，会保持 1.2m 左右的礼貌距离，在大屏的使用场景中，用户与屏幕需保持 50cm 左右的操作距离，根据成像原理我们发现数字人的实际身高需要进行适当缩放才可以真实模拟礼貌社交距离。
我们采用真人模拟的测量方式，让 2 位 168cm 身高的同事面对面站立保持 1.2m 距离来进行大小观测，将真人模拟感受到的变化移植到虚拟人的大小调整上，做出相对舒适安全的社交距离。
② 高效流畅的场景体验
关于线下场景体验的拆解，我们主要思考两个方面，一是如何让大屏界面能够完美融入线下场景，数字人能够真正站立在场景里；二是拆解从用户进店到服务结束全链路体验，区分近远场的不同诉求精细打磨体验。
场景模拟。 关于数字人背景的设计，我们模拟了真实的线下客服场景，设立咨询柜台，本次方案中考虑到后续适用不同品牌银行接入，在品牌透出的视觉元素区位均可快速配置与替换。
近远场体验拆解。 Endsley 提出的三层情境意识（SA）模型，为信息处理提供了较为成熟的方法论，该理论分为三层：1.对当前情境中成分的感知；2.对当前情境的综合理解；3.规划预测该情境的未来情况。
将情景理论与远近场相结合可将用户认知与设计要素做如下拆解：
远场：建立认知，引导靠近
根据上述的情境意识的三层模型，在情景获取阶段，重点在于为用户提供明确的元素，帮助用户快速建立有效认知。界面中所传递的信息包括：动态的、模拟真实身高且身着职业装的真人数字人，模拟银行前台的柜台，银行 logo 以及“空闲中，欢迎咨询” 的状态字样；进入情境解释阶段，对上述的元素进行整合诠释，用户能够明确建立起“智能的、可咨询、可信赖、可使用”的认知，此时结合用户咨询业务的需求内因，能够激发体验冲动；到情境反馈与预测阶段，用户会预测能够与数字人进行互动，解决需求，因此主动靠近，由远场转为近场。
近场：建立关系，引导行为
银行柜台使用人群数字化程度不高，交互方式上尽量符合用户自然对话的惯性认知，实现新手的无感过渡，降低学习成本与认知负荷。我们在具体交互方式的构建上，总结出以下交互设计思路供参考：
主动服务 当用户进入与数字人的交互区域，大屏自动通过图像人脸识别获取用户信息，数字人进入服务状态，主动说话并推出服务卡片，让用户能够快速建立服务认知，聚焦任务操作。
指引明确 触屏用户天然习惯点击操作，在信息输入方式上，对于不同类型的任务需要引导用户使用 GUI 操作还是语音输入表达诉求，强调：“试试说 ” 与 “选择” 的引导差异。同时在交互中的每一个状态下，都需要让用户明确我现在可以做什么，如何做，可以获取什么结果。要求数字人与用户交互的每一个节点明晰，引导通俗易懂，操作简单。
渐进式引导 为减少用户理解成本，我们在信息与操作的引导上采用单一路径，用户只需要跟随虚拟人的逐步引导，傻瓜式操作即可流畅完成服务。
分支处理 在一问一答的语音交互中，有很多潜在分支需要处理才可以还原自然体验。比如用户在服务进行中长时间未给出明确操作，至少会有两种情况：1.我们认为用户可能存在困惑，虚拟人会主动引导用户进行限定内容选择或聚焦提出问题。2.本身反馈内容较复杂冗长用户未操作则可能是还在消化信息，虚拟人需要延长等待时长等等。
3. 交互式数字人大屏的设计要点 A.交互式大屏的功能分区
交互式大屏有自己独有的特性，本质上是一块超大触屏，但从交互方式与信息焦点两方面与传统触屏差异很大。在交互方式上，从手指的点按变成的整个手臂的移动，点触以多指拍按与扫动为主。在信息焦点上，用户曲臂操作屏幕，距离大屏的距离在 0.5m 左右，平视可接收的信息焦点有限，更多信息需要转动眼球或头部，那么用户的视线需要被引导与定位，信息需要按区块划分优先级，让用户更舒适流畅的获取信息。
最佳操作区的设定
我们根据人因工程学，确定出大屏的最佳交互区域最佳可视区，来展示核心卡片信息。以 55 寸大屏，1.68m 平均身高用户来进行方案探索。依照人体站立不屈膝，右侧大臂可旋转横向和纵向角度计算出最佳交互区域。
根据最佳交互区，我们可以将核心交互卡片放置于此，次级交互放置于外沿，边缘区域不适合放置操作内容。
最佳可视区的设定
垂直可视区域：在用户保持站立时，最大视区为视平线以上 50° 和视平线以下 70°。视平线以上 25° 至视平线以下 30° 范围内为最佳眼睛转动区，能够以放松的状态识别信息，所以展示内容的最佳垂直视角在标准视线以上 25° 至以下 30°。
水平可视区域：双眼区域大约在左右 60° 以内，观察超出左右 60° 的物体时，则需要集中精力才能识别物象，因此核心内容区域在左右 60° 视角内较为合理。
根据最佳垂直视角与水平视角的人因特点，结合头部小幅度垂直向下 15° 转动扩大视角，我们计算得到 3 个可视区的划分，核心可视区展示主要对话流信息；次级可视区展示次要的状态信息，如收音反馈状态；最大可视区内尽量不放置信息。
基于对交互区和可视区的计算测量，在页面布局中，我们将信息卡片最大程度的置于有效视区和次级交互区的重叠区域，用户可以最舒适的状态进行阅读和操作；将结束服务按钮放置在次级交互区外延，减少对核心内容的注意力分散；将音波引导动画放在次级可视区，通过色彩与动态变化对用户进行引导。
B.交互式大屏的视觉设计
文字清晰易读
考虑大屏的尺度与真实的使用场景，界面中内容也需要相应的放大以适配大屏体验。在金融产品场景下，界面中最主要呈现的内容是文本信息，所以设计中要充分考虑文字的辨识度。合理运用字阶与对比度，能够有效提高信息的可读性，通过对比多种字号在不同距离下（远场、近场）的测试效果，对字体进行了标准化定义，阅读舒适的字号应不小于 36px，辅助说明的文字可降至 24px。
除了字号大小，合理的对比度也对文本的易读性起到至关重要的作用，参考 WCAG（Web 内容无障碍指南）中对比度的不同级别建议，考虑公共的使用场景及部分中老年使用人群，因此将常规信息对比度设定为 7:1 以上，辅助信息不低于 4.5:1。
视觉焦点一致
用户在浏览内容需要头部有上下小幅度转动，为了让用户形成相对稳定的阅读模式，减少视线的跳跃感，我们将内容区的信息展示设定为用户输入和客服回答相对应的两条内容，且将它们的位置固定展示，这样用户在每次阅读信息时，视觉焦点可以保持由同一位置开始。
数智人合理展示
数智人作为服务温度与情感连接的对象，信息的展示要尽可能避免对数智人面部的遮挡，我们将信息的最大显示区顶部设定在数字人下颌向下 10cm 处，确保数字人能够较为舒适的呈现在用户面前，当页面发生滚动时内容与数智人的展示也较为合理。
但也存在有大量信息展示的需求，为了满足高密度信息的有效传达，针对图片内容进行弹窗式扩展展示，在该场景下，将弹窗高度设计为完全遮挡数字人的方式，避免卡片高度跟随内容变化而遮挡部分数字人面部的情况出现。
次级可视区信息强化
用户对于次级可视区的信息获取效率有所降低，且该区域对于颜色和动态的获取更为敏感。因此想要提升该区域信息的传达效率，可通过强对比颜色及增加动态的方式进行强化。本次设计中语音输入的引导信息放置在次级可视区，因此通过采用大面积深色蒙层，强化收音区信息有效露出，较为明显的状态切换，能够从视觉上让用户对语音输入的引导高效获取。
关于未来思考 在数字人未来场景的应用中，会越来越趋向于实时的自然交互。计算机视觉、语音语义理解等 AI 服务能力日益精进成熟，多模态信息输入使得数字人的感知能力逐渐增强，我们在复杂信息的拆解与应用上，需要从用户作为人本身的需求与高效完成任务两方面出发，深度思考数据加工与应用逻辑。在交互反馈上，数字人与 GUI 的配合方式也是值得研究的方向，对不同的应用场景，在“人”与“ GUI ”的信息通道选择侧重会有很大差异，比如娱乐场景更偏向于人本身的情感化表现，而任务场景更侧重于信息高效传达。对于虚拟人本身生动性的表现上，也应该更多的考虑虚拟人相貌、情绪、动作、表情在人物世界观、生命感、人格化、业务属性等方面的映射与表现，真正实现人与“人”的连接。对于以上方向我们也都在探索的路上，期待 AI 与人类能日益共生共荣，共创未来。
欢迎关注作者 微信 公众号：「腾讯设计族」
