元素 互动 用户 前言当我们提及“动效设计”这一词，第一印象往往是那一类炫酷的极具视觉表现力的动效，而有一类动效，它们如春风细雨般融入了用户交互过程的点滴之中，为打造符合用户心智的流畅体验默默做着贡献，它们就是「交互动效」。本文将从以下三个方面展开介绍——「什么是交互动效」「为什么要重视交互动效」「交互动效的设计流程和方法」，带领大家了解交互动效的基础概念，以及具体的设计流程方法，希望大家看完后能够对交互动效有更加清晰的认知。更多动效设计干货：新手科普！交互动效基础知识入门什么是交互动效界面交互动效：用户与界面进行交流互动时以动效的形式进行信息传达。阅读文章 > 一、什么是交互动效？交互动效指的是那些用于引导和响应用户交互行为的动效，它们与用户的交互行为密切相关，起到帮助用户理解、提供操作反馈、提升感知流畅性的作用。与视觉动效不同的地方在于，交互动效主要作用于产品的基础体验和功能体验层面，为用户营造更加自然流畅的体验。而视觉动效除了在功能体验层面能帮助用户降低理解成本之外，更多作用于情感体验，增加产品趣味性、传递产品调性，目的是引起用户的情感共鸣，调动用户的正面情绪。交互动效&视觉动效示例交互动效与视觉动效的影响范围差异二、为什么要重视交互动效？在实际的项目中，交互设计师往往会先处理任务流程和页面信息设计。在设计工作量大、时间紧张的时候，很可能遗漏掉需要增加交互动效的细节，到点检验收的时候才发现这些问题，这种情况在新人设计师中较为常见。在验收阶段，由于项目排期时间紧，开发有别的 bug 要改，可能没有时间去处理动效方面的优化，从而导致了线上出现体验问题。验收阶段才发现动效问题的尴尬必要的场景缺失动效直接上线，可能会产生以下的体验问题：不符合预期，产生理解困难：交互动效用于传达页面变化过程，如果过程缺失，可能会导致变化不符合用户预期，使得用户产生理解困难。感知卡顿：缺失必要的手势动效会导致用户操作的不流畅，缺失必要的转场动效则会影响视觉观感的流畅性。动效缺失产生体验问题例子总的来说，不注重交互动效将会给产品体验埋下各种体验问题隐患，加上进入互联网下半场后，互联网产品将会更加注重设计上的精致精细度。由此来看，掌握系统化的动效设计方法，已然成为设计师们的必修课。三、交互动效的设计流程和方法1. 动效评估在设计之前，我们需要先判断是否真的需要做动效？不能为了做动效而去做动效。① 场景聚焦首先，我们需要知道，什么样的场景适合做交互动效？可以总结为以下三类场景：三种适合做交互动效的场景「场的变化」指的是用户需要从产品中的一个「场」到另一个「场」，发生在页面间的转场、或页面内的转场。「场的变化」相关例子「内容的新增或减少」指的是由于用户的交互行为，导致页面中的内容（模块、组件、元素等）产生新增或减少。「内容新增/减少」相关例子「元素的属性变化」指的是由于用户的交互行为，导致页面中的元素属性产生变化，例如位置改变、状态变化、值变化等。「元素属性变化」相关例子② 优先级评估筛选出适合添加交互动效的场景后，我们需要评估在这个场景中做动效的优先级。判断做动效的必要性，可以从以下四个维度从高到低的维度去进行优先级评估：「一致性」——如果某个场景已经有定义好的动效规范，原则上需要遵循规范进行适配，以确保全局动效体验的一致性。这一个维度对于那些存在动效语言的产品是非常重要的，一致性是为整体产品调性和品牌所服务。例如iOS在全局都保持了高度统一的动效体验，如果某一个组件缺失了用户习以为常的动效，很容易被用户感知到且产生对品牌的负面评价。「帮助用户理解」——不加动效是否会影响用户对当前页面变化的理解？如果因为缺失动效，在元素关系、页面层级、状态变化上造成用户较大的困惑，影响了用户体验，那么在该场景下添加动效的必要性是较大的。「提升流畅度」——不加动效是否会影响视觉层面和操作层面的流畅度？即视觉上是否会产生闪跳、突变等卡顿感，操作上是否实时反馈、符合用户预期。「引导注意力」——页面中的元素是否需要通过动效来引导用户的注意力？会不会对用户造成不必要的打扰？有时候产品会出于业务诉求希望通过动效的手段来引导用户注意力，达到业务的目标，但是我们需要站在用户的角度去思考用户的注意力是否应该被引导，不让动效成为对用户的干扰。动效优先级评估2. 动效设计① 动效原则设计原则用于指导我们设计动效的方向，确保不偏离正确的方向。结合行业内的各类动效规范的设计原则，我们总结出以下六个通用性较高的设计原则： 舒适：动效需要符合现实世界的物理属性，贴近用户的心智认知，感知上舒适、同时兼具视觉美感。高效：高效响应并减少过长的位移和时间，使动效触达不拖沓。流畅：不卡、不闪、不跳，帧率稳定、响应及时、跟手操作是动效流畅体验的基础要求统一：同个产品内的动效体验感知统一，体现在相同的控件动效保持一致、相似的动效编排一致。简单清晰：界面元素运动尽可能少且简洁，减少路径及不必要的元素，确保动效过程清晰、重点突出。克制有度：控制出现频率，不增加额外操作，不干扰用户，确保动效有意义。交互动效设计原则② 动效属性变化一个完整的动效是由不同元素的不同变化组成的，常见的变化类型有：位移、透明度、大小、旋转、3D 旋转...动效常用变化类型时长小于 200ms 的动效不易被感知，多于 1000ms（1s）则让用户感到缓慢，交互动效时长一般在 200ms-500ms 之间，我们在设计时长时，可以从以下几个因素进行考虑：i）复杂程度：复杂的动画比简单的动画需要更多的时间来表达动效复杂程度对时长的影响ii）区域范围：动效运动在一定的范围内进行，小范围内比大范围的运动所用的时间相对更短动效区域范围对时长的影响iii）入场/退场：一般来说，退场的动效时长要比入场短，让用户更把注意力放在后续的内容中动效入场/退场对时长的影响曲线曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。以下是三种常用的曲线类型：i） 加速曲线：适用原本在视线中的物体，需要消失或退场，逐渐加速符合退场行为特征，例如弹窗/浮层退出、卡片删除等。加速曲线示意ii） 减速曲线：适用原本在视线外的物体，需要出现或进场，逐渐减速符合进场行为特征，例如弹窗/浮层出现、页面进入等。减速曲线示意iii） 缓入缓出曲线：先加速后减速，适用于运动前后始终在用户视线范围内的物体，符合物体启动和停止的真实规律，例如图片缩放、tab 切换、开关等。缓入缓出曲线示意③ 动效编排动效属性是针对单个元素进行设置的，那么如何对多个元素进行动效组合和编排？下面提供一些动效编排的技巧： 淡入淡出淡入淡出是通过透明度变化来实现过渡转场，也是最简洁实用、最常见的一种类型。其分为「单向淡入淡出」、「交叉淡入淡出」和「错开淡入淡出」i） 单向淡入淡出：在前后层叠的场景中，只有前景元素进行淡入或淡出动作，下方元素无变化。单向淡入淡出示意ii） 交叉淡入淡出：存在退场元素与进场元素的场景下，一个淡入视野，另一个淡出。在整个过程中，会存在两个元素和它们后面的内容同时可见的时候。交叉淡入淡出示意如果退场元素和入场元素在视觉样式或者布局结构上差异较大，交叉淡入淡出可能会带来视觉上的混乱，这时候可适当错开出场元素淡出和进场元素淡入的时机。可通过错开元素进出场时机避免带来视觉混乱iii） 错开淡入淡出：在入场元素淡入之前，将退场元素完全淡出。这种方式可以规避视觉上出现重叠元素，但是可能会造成有一瞬间出现容器内容为空的情况。错开淡入淡出示意 一镜到底一镜到底是通过共享元素、容器和动势来进行转场过渡的一种编排方式，有助于提升用户操作任务的效率，增强视觉的流畅感，是转场设计中重点推荐的编排方法。i） 共享元素共享元素是转场前后持续存在的界面元素，是在转场发生后希望用户关注到的焦点元素，它增强了转场的连续感。共享元素转场示意ii） 共享容器当一组元素在过渡时包含明确的边界，可使用容器来让转换过程有连续感。容器通过大小、高度、圆角等属性进行补间过渡转换，容器内的元素可通过淡入淡出或共享元素的手法进行过渡。共享容器转场示意在使用共享容器转场时，有以下原则需要注意：原则 1——尽量减少独立移动的元素数量。多个元素运动会争夺并分散注意力，我们可以通过淡入淡出减少元素移动，让注意力更聚焦。原则 1：避免过多独立移动的元素原则 2—— 避免焦点元素在运动过程中和其他元素重叠。焦点元素和其他元素运动轨迹重叠会产生杂乱无章的过渡，同样地，可以用淡入淡出来简化运动。原则 2：避免焦点元素运动轨迹和其它元素重叠iii） 共享动势无法通过补间变化来实现柔和过渡，可以提取出可用的共享转换属性，来实现前后的平滑过渡。常用的共享运动属性有位移、缩放、旋转等。共享动势效果示意其它编排技巧i） 运动路径如果转场中的元素沿对角线移动，线形运动路径具有简单而实用的风格，而弧形运动路径则创造了更加强调和戏剧性的风格。线形和弧形运动路径差异对比ii） 振荡一般情况下，转场动效在到达终点时会结束。当添加振荡时，过渡路径至少超过其端点一次，然后反向返回端点。振荡可以用来表达一种更加俏皮和充满活力的过渡风格。有无振荡差异对比iii） 纵深变化一般情况下，背景内容在容器变换过渡期间保持静态。可以通过动画背景内容的比例来强调纵深变化。这种通过强调前景和背景内容之间的距离，使过渡看起来更加生动。有无纵深变化差异对比iv ）交错一般情况下，入场元素会打包为一个组进行处理。「交错」是指通过对组中的元素应用短延迟，创建一种级联效果，将注意力非常短暂地集中在组中的每个元素或个别元素上。通过交错将注意力短暂地集中在每一项上交错还有可以用于强调页面元素，将需要强调的页面核心操作或元素在其他元素入场完毕后完成入场，能够吸引用户注意力，完成视觉引导。通过交错突出核心元素③ 动效落地尽管我们把动效设计得再精美，最终还是要靠开发大哥们把它还原出来。交互动效需要开发通过代码来实现，因此动效标注如何让开发看得懂且能理解，就尤为重要。这里推荐大家使用参数化的表格来进行标注，转场动效的标注文档中需要包括以下要素：动效 demo 附件：方便开发直接查看整体的动效效果触发条件：说明动效发生的条件，即用户通过什么行为触发该动效元素示意：将动效中发生变化的元素进行拆解，通过图示清晰示意变化属性：元素的什么属性发生，例如透明度、位置、大小等等动效时间：「延迟开始时间」表示元素从触发条件发生后延迟多长时间开始执行，「持续时长」表示该变化持续发生多长时间变化值&贝塞尔曲线：描述属性具体的变化值范围，以及相应使用的贝塞尔曲线参数转场动效标注文档示意手势动效的标注和转场动效略有不同，因为手势动效是跟手的效果，不像转场动效是在固定的时长内完成，因此不需要描述时长相关的参数和动效曲线，取而代之的是需要描述清楚页面元素跟手的联动关系。手势动效标注文档示意在动效验收的时候，如果发现有还原问题，那么可以将没有按照设计标注来做的地方在表格中圈出来，帮助开发快速定位问题，提高沟通效率。在验收环节运用标注文档定位问题结语交互动效作为提升产品精致精细度的必不可少的要素之一，也是作为设计师不可或缺的技能，本文给大家讲解了从动效评估-动效设计-动效落地的全流程方法，希望能对大家了解交互动效、上手交互动效设计有一定的帮助。当我们希望给用户带来不一样的惊喜和极致体验时，不妨试一试从交互动效入手。参考资料及部分示例图来源：material.io/design/motiondeveloper.harmonyos.com欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/interactive-effect-design-guide
互动 用户 贴吧 本文搭建“信息更易懂”、“路径更顺畅”、“玩法有惊喜”互动系统设计方法，焕新 19 岁贴吧互动体验，提升用户活跃。往期改版案例：上亿人使用的百度贴吧，是这么做设计改版的！随着产品的发展和用户群体的演变，用户对产品的认知也在发生变化，当用户认知和产品形象发生偏差时，体验升级就势在必行了。阅读文章 > 大厂出品！百度数字人设计改版实战复盘通过构建伙伴认知、满足情感互动、增强沉浸体验等手段，增强 AI 伙伴的曝光率，进一步向用户传达智能搜索感知，促进搜索行为转化。阅读文章 > 前言良好的互动氛围是社区产品的核心，贴吧作为一款近二十岁的社区产品，设计师秉承年轻包容的产品理念，始终在探索属于贴吧的特色互动形态，在这过程中，希望通过互动系统设计方法，升级贴吧互动体验，培养用户心智，形成良性互动链路，最终提升用户活跃。一、探索互动系统的设计方法较为简单的互动形态为作者生产内容，浏览者为喜欢的内容点赞、回复，甚至私信创作者，这些互动行为会激励创作者继续生产内容。基于以上互动形态我们搭建了循环互动系统，创作者为浏览者供给内容后，我们需要在互动环节引导互动行为发生，在触达环节优化互动信息触达，在反馈环节引导参与互动反馈，从而形成正向循环。结合实际的项目经验我们发现互动系统运转离不开“信息更易懂”、“路径更顺畅”、“玩法有惊喜”这三个要素。二、寻找贴吧互动设计机会点贴吧的角色是由创作者—楼主、浏览者—吧友组成，良好的产品运转模式为：创作者向浏览者生产供给内容，浏览者对其互动激励。但贴吧多年来互动链路中断，导致从互动到供给无法形成正向循环。1. 特色场景洞察问题贴吧的场景及形态广泛，与其他产品有所不同，具有内容形式多样、浏览场景独特、互动类型广泛、回复逻辑精细、互动玩法多元等特点，通过走查上述特色场景发现诸如链路中断、功能缺失、结构混乱、内容丢失等问题。2. 下探设计机会点基于以上问题的共性，我们可以从中总结出核心体验断点：看不懂：回复列表内容结构不合理、收藏后看不懂更新的楼层内容；看不到：Push 通路不稳定无法触达用户、大多用户关闭推送 push；没意思：赞、回复等互动方式老旧，刷贴、签到行为重复，没有特别的玩法。下面会使用上述总结的互动系统设计方法，对贴吧现存问题进行体验升级，提高用户的互动积极性。三、 互动系统设计方法应用举例1. 信息更易懂贴吧的回复场景多，逻辑复杂，创作者与浏览者在看到对方的回复后，内容展示需要易读易懂，彼此才会有意愿回复反馈。① 查看列表—优化结构查看评论列表的旧体验存在回复对象错乱、内容缺失的问题，新体验根据语境自由展现原贴、楼层、楼中楼三层结构，承接上下文关系，降低用户理解成本，并将其复用在查看点赞、查看@ 等场景中。② 查看详情—精准定位点击列表页后的精准定位也是易懂的关键，我们对内容被折叠、定位不准旧体验问题进行优化，新体验默认展开原贴及楼层内容，细化点击贴子、楼层、楼中楼后的定位逻辑，帮助用户精准看到想看到的内容。③ 继续消费—延长步长用户从回复列表进入查看详情页后，旧体验只展示当前的评论楼层，看不到上下文内容。新体验在定位楼层前后增加楼层内容，同时通过“查看之前楼层”和“加载之后楼层”方式继续浏览，延长步长。2. 路径更顺畅产品的推送 Push 向用户推送感兴趣的信息，需要稳定的触达用户且有意愿打开，才能达到召回用户目的。① 打开推送开关—场景引导旧体验引导开启 push 场景缺失，方式过于生硬，新体验选取贴吧高频互动场景，在用户签到后、回复后、发布后选择合适形态展现引导，提高推送通知打开率。② 展示推送—有吸引力旧体验互动 push 内容表述凌乱，新体验将 push 内容结构化，以“用户昵称+动作+互动对象”的结构展示推送内容，并强化互动用户的头像，适当展示互动详情，吸引用户点击。3. 玩法有惊喜贴吧点赞、回复等互动方式存在多年，缺乏新颖性，用户互动心智疲软，急需通过轻量、有趣的创新玩法，刺激浏览者互动。① 新增动态表情结合贴吧元素，补充单击、长按、双击的递进互动点赞方式，给予用户感官刺激，提升点赞爽感。结合时效性运营活动，增加高考、劳动节、618 活动点赞，营造惊喜感。首次私信提供贴吧 IP 表情，助力用户关系破冰。后续私信增加开香槟、丢炮竹以及丢炮竹炸滑稽双向互动玩法，持续提升用户互动意愿。② 新增潮流表态虚拟形式是近几年受用户喜爱的潮流表态玩法，探索虚拟形轻互动方式，互动后通过私信触达，并沉淀社交货币资产，进而引导双向互动。小结文本搭建的“信息更易懂”、“路径更顺畅”、“玩法有惊喜”互动系统设计方法，已将其运用在贴吧的特色互动体验升级中，并取得正向数据和用户反馈，希望该项目的设计方法及经验能为大家提供参考。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/tieba-design-revision
语音 互动 情感 通过构建伙伴认知、满足情感互动、增强沉浸体验等手段，增强 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
直播间 用户 互动 直播长久以来一直是互联网行业最快速且强大的变现方式，在中国，直播行业起源于 2005 年，爆发于 2016 年，迄今为止尚不足 20 年，但期间已经经历语音到视频、多人交友转向个人秀场、PC 端到移动端 、网红秀场转向垂直精细化的生活领域等多个重大转变。目前网上有的对直播的分析，要不然过于宏观地讨论整体行业状况，要不然过于片面地介绍本品功能，实属王婆卖瓜自卖自夸，极少有文章深入地、横向地从体验层面去聊这些问题：如今我们看到的直播间为何是现在的模样？是什么影响了我们的直播体验？直播设计的发展是体验设计适应新兴技术与新兴需求场景的一个缩影，本期我们将从交互的角度，将直播起源与发展总结为 4 个阶段，从每个阶段都选取数款代表产品，深入分析其布局特征，带大家领略一下直播间的发展历史、浅谈一下直播在中国发展的这 17 年。直播起源中国直播行业起源于 2005 年，当时网络游戏盛行，CS、魔兽世界、红色警戒、大话西游等大型综合游戏霸占着网民们的娱乐生活，因游戏需要团队配合，互动的及时性非常重要，而传统的文字交流会影响到手指操作效率，进而影响游戏体验，所以用语音软件“开黑”便受到广大游戏玩家的追捧。这时一个语音交流平台应运而生：UT（UC talk）。UT 是新浪网推出的一款主要面对游戏玩家的即时语音通信产品，凭借着强大的语音通讯功能和最早进入市场的巨大优势，迅速在游戏玩家市场崛起并广受追捧，当年 WOW 的工会上流传着一句话“不能上 UT 的不要入会”，也从侧面反映了 UT 的“江湖地位”。玩家在 UT 上通过创建频道、加入频道来实现局内即时语音交流。同时 UT 也支持添加好友、在频道内使用文字、表情进行沟通。观察 UT 早年的界面，可以发现 UT 受当时盛行的文字通讯软件 QQ、MSN 影响颇深。产品虽打着“即时语音通讯”的称号，界面上却将大幅面积仍旧用于支持文字通讯功能。我们把早期 QQ、UT 与近年来常见的即时语音通讯工具的交互框架拉出对比，可以很容易发现这十几年来即时语音通讯工具的进步：现在的即时语音通讯工具将界面内大面积服务于语音通讯，及时展示当前发言人和在线语音用户的发言状态文字与表情通讯则作为辅助工作在角落中呈现无文字发言则不出现虽然调整音量与麦克风虽看似语音通讯的重要能力，但由于其为一次性操作，因而在如今的语音通讯页面中也不会直接平铺大面积呈现除 UT 外，03 到 08 年也诞生了许多其他语音平台，如聊聊、久聊、IS、爱聊、盛大 ET，如今仍是直播界扛把子之一的 YY 也是在这个时代出现的。语音平台的出现，让游戏更有社交性。久而久之，玩家也不再满足于单纯的开黑打游戏，平台内开始催生出许多娱乐玩法。同时，随着网络技术的进步，实时视频技术也得到了实现，人们不再满足于语音社交，互联网开始进入视频时代。直播诞生一开始，转型即时视频通讯的语音平台们还只是简单地在频道里增加视频区域，喜欢社交和表现自己的用户开启摄像头主持、聊天、唱歌，直到 9158 的出现。2005 年，9158 的创始人模仿韩国在线交友的“十人房”模式，一上线就将产品定位为“秀场”。9158 的名称也是取自“就约我吧”的谐音。所谓“秀场”，就是将个人秀搬网上，培养一批“主播”，他们通过视频的方式在互联网上展示自己的才艺，观众可以与主播进行互动，并花钱购买礼物对主播的表演进行“打赏”。9158 是最早将美女、异性交友等字眼带入互联用户视线中的线上聊天室，是直播行业最早的形态，多以聊天室和 K 歌为主。因其模式新颖加上内容多数打着“擦边球”，吸引了大量用户持续消费，赚得盆满钵满，9158 甚至在 2014 年抢先一步比当时同在杭州的阿里更早上市。在 9158 叱咤互联网的 2008 年，以“成为中国的 youtube”为愿景的视频门户网站六房间在金融危机的重创下无奈开始转型，同样在 2009 年推出“秀场”的产品，与 9158 模式相同，一大批擅长才艺的年轻主播在六房间展示自己，与粉丝互动，通过粉丝赠送虚拟物品如鲜花、跑车、飞机等获得盈利。而几乎是同一时间，获得了 IDG 融资的 9158 不知是因为资本的介入，还是为了解决长尾效应，从“秀场”的定位变成了“在线 KTV/聊天室”，从明星表演模式变成了房间内用户排队轮流上场表演娱乐。转型后的 9158 从此不必再去担心当家女主播被同竞争对手挖走后带走一批高 ARPU 值的用户。虽没有找到 9158 初始秀场的界面截图，但从六房间后续转型的秀场与 9158 在线 KTV 的功能截图中也能看出现在直播间的影子，例如当时的秀场框架上就已包含房间名称/直播昵称、视频内容区、聊天/送礼互动区、观众列表。这基本已经构成了当今所有直播间的要素，后续几年的直播发展都是在这样的直播间框架上进行更细致垂直的功能升级。当六间房已经在做直播的概念时，9158 依然按照房间的概念来运营。直播的好处是能容纳更多的人数，可以做到上万人在线，9158 相对六间房，略显封闭。因为每个房间的人数会有控制，也有上限。虽然 9158 在转型前后的概念上都还是多人视频社交房间，但直播间该有的产品能力一个不落：既有礼物区，也有大型道具跑道，可视为现如今礼物托盘和礼物特效的起源用户列表对应如今直播间的在线观众排麦、点歌、调音、文字输入等操作对应如今直播间的操作互动区公共聊天记录对应如今直播间的评论互动区当然也有一些从传统文字社交聊天室承袭下来与直播“水土不服”的个人聊天记录，已经在历史迭代中销声匿迹。无论是六间房的秀场，还是 9158 的在线 KTV，虽然当时已经主打即时视频能力，但还是将大面积给了房间内观众的公共互动区，除了受“多人社交”定位的影响外，也和当时流行的产品理念有关。当时业内盛行非付费用户数量多少会影响付费用户的付费意愿之说，因此产品会期望通过放大公共聊天区，做好普通用户的互动体验，吸引并促活更多非付费用户，以此让付费用户消费更有成就感，更愿意消费，转化更多付费用户。在 9158 与六间房均实现转型的那一年，YY 才刚在广州成立，直到 2011 年，YY 才开始涉足直播行业，但由于其雄厚的语音技术能力，很快在直播行业发展起来，与 9158、六方间一起并称当时直播行业的三巨头。YY 直播时期，PC 端直播间开始将主播画面作为直播间内最重要的内容去重新构建交互框架，主播生产的即时视频内容作为最重要的元素在直播间中间大面积展示，左侧为观众列表，右侧为评论互动区，对比一下现在的 PC 或平板版本的直播间，对信息的重要性排序基本没有大改动，只是对观众列表和评论互动做了更极致的精简和收起。“秀场”这块巨大的蛋糕很快就被资本市场相中了，秀场的蛋糕随着资本的介入被疯狂瓜分。2012 年-2014 年，酷狗繁星、酷我秀场、56 秀、网易 BOBO、炫舞、优酷来疯、爱奇艺奇秀等直播产品也迅速加入秀场的直播战局。同时，直播龙珠、熊猫 TV 也迅速进入游戏直播市场意图瓜分游戏直播版图。又因为主播是直播内容的核心，有很强的头部效应，各平台在争夺主播的过程中使得这份职业的薪资水涨船高。这段期间，PC 端直播需要面对竞争对手持续入局和耗费巨资抢占头部主播两大难题，竞争激烈至白热化。正当大家以为 PC 直播还有一场漫长的较量时，智能手机的普及和 4G 网络把直播的战场从 PC 端拉到了移动端。千播大战移动端的时代，直播门槛迅速又降低了一个台阶，原本至少需要一台电脑、麦克风、摄像头和一个适合且稳定的环境才能开启的直播，现在只要一只手机就能轻松实现。直播门槛的降低与资本的介入，迅速推动了直播行业的发展，一大批直播 app 如雨后春笋一般出现，被媒体渲染为千播大战。起初，移动端直播间内只有直播画面、弹幕/评论区和在线观众，值得一提的是，转移到移动端战场后，直播间多了「分享」，甚至「分享」高优于营收向的「送礼」更早出现在移动端直播间，猜测除了想在新战场迅速抢占市场份额外，还可能有以下几方面原因：1. PC 端习惯通过复制分享（复制网址、复制频道号，即使是现在 pc 端也习惯复制 qq 号而不像微信直接分享名片），而移动端没有复制网址一说，展示直播间号+复制，让被分享人再粘贴搜索，效率远不如单纯的「分享」高2. 战场转移到移动端后，因为手机随身携带，用户之间的线上关系比原本在 PC 端时更紧密，所以通过关系链获取用户比在 PC 端时更方便快捷（这或许也是分享裂变之说在移动端时代才大行其道的原因）3. PC 时代用户对内容的获取更多依赖主动行为（用搜索引擎搜索关键字），主动搜索已经能够获取大部分信息，转移到移动端后，由于或技术或竞争关系导致 app 之间有信息壁垒，用户无法靠搜索跨 app 获取信息，需要靠用户自发的人工搬运。此后的一段时间内，移动端直播间都是在“搬运”PC 端直播间的产品能力，如送礼、K 歌、美颜…当时移动端的交互尚在探索阶段，手机屏幕也没有现在这么大又长，因此右下角的操作黄金区还没有在业内达成共识，可以看出最开始底部的互动操作并没有很符合现在直播间的排布习惯，有些直播间甚至会把关闭放在右下角，而现在的直播间右下角基本都是送礼、点赞等一些强用户需求或强产品策略的操作。在其他 app 都适应手机开播而将直播画面占满手机屏幕、操作置于画面底部时，YY 及其专门负责游戏直播业务的虎牙直播却采用了完全不一样的直播间布局。虎牙直播因其专攻游戏直播的定位，独有直播画面多为横视频的特点，横视频适配竖屏幕时，会有较大的留白，这些留白区域正好可以用来填充原本在 PC 端就外露展示的一些功能（评论等）。虎牙直播、熊猫 TV 等游戏直播 app 和“秀场”直播 app 在搬运 PC 端直播到移动端时采用的方法正好是我们在日常需求中遇到首屏位置不够的两种常用处理思路：收起做入口和分 tab。除了搬运 PC 端能力外，移动端直播间也发展出了一些 PC 端没有的功能：由移动端特性衍生出的功能：例如因为直播间内功能越来越多，UI 和动效都越来越多且杂，为了不影响直播内容消费，移动端直播间比 PC 端多了清屏功能。PC 复古功能：如语音直播、语音聊天室、多人连麦，又由多人连麦发展出了帮助直播营收更上一层楼的直播 PK。礼物方面，结合在线观众围绕金主权益持续优化“榜一大哥”的看播体验，规划礼物价格梯队，对礼物托盘和礼物特效做规范。还有一些“时代的眼泪”，如频道直播间，现在已经鲜少看到这个能力了。由于直播盛行，且市场在朝“钱”发展的路上缺少国家和平台的监管，导致直播乱象丛生，长时间被冠以“低俗”的标签。国家网信办于 2016 年 11 月公布《互联网直播服务管理规定》，对直播平台资质、主播实名、内容审核等方面做了详尽的规定，又于 17 年 4 月下架了 18 款直播类应用。加上苹果强行收取 30%过路费，BAT 也开始入场直播领域，许多小平台因分不到流量、自身能力不足而被迫离开直播市场。千播大战最终以少数几家取得直播双许可证的 YY、虎牙、映客笑到最后告终，直播市场陷入一片惨淡。但是，在被称为中国直播元年的 2016 年，有几个种子悄悄地埋下了，不仅给几年后的直播行业带来了新东风，也改变了未来互联网的趋势：2016 年 9 月，一个叫 A.me 的 app 诞生了，三个月后改名为：抖音短视频；淘宝也在这一年开通了直播，某知名带货女主播成为平台首批主播。直播融入生活，多领域精细化发展虽然直播行业经历过众神打架的“千播大战”，连续几年处于互联网浪潮的浪尖上，但一直以来都只囿于“秀场”形式的才艺展示和电竞，并未深入到每个人的日常生活之中，长期无法破圈，直到电商直播的出现。最早做电商直播的并不是淘宝，而是蘑菇街这类导购平台。蘑菇街在当时作为最火的电商导购平台之一，每年能从淘宝拿到巨额佣金。淘宝决定不再扶持导购平台后，蘑菇街不得不转型走上自建电商的道路，在淘宝京东这样的巨头中夹缝求生的它抢先看中了直播，第一个把直播引入了电商。蘑菇街从入场直播领域到完成电商直播间建设（在直播间内提供完整的消费链路）仅仅用了 2 个月的时间。此后的电商直播间也再没有较大的改动了，大多用红或橙黄的购物袋和购物车代表商品列表入口，购物入口会在直播间内作为第一优先级的操作做动效强化，因为电商直播不需要依赖送礼盈利，且礼物特效会干扰商品的展示，有些专攻电商直播的平台甚至已经不在直播间内显示送礼入口，与传统秀场直播形态分道扬镳。19 年，李佳琦魔性洗脑的口头禅“OMG，买它！”突然爆火，因为这句 2019 最火流行语，李佳琦带领电商直播实现破圈，之前对直播了解仅限于“秀场”的人们这才发现直播的“新形式”。紧接着负债 6 亿元的罗永浩在抖音开启了自己的带货首秀，3 小时带货 1.1 亿元，让大家重新认识了直播在送礼体系之外的收益点。2020 年，在疫情影响下，直播带货、线上教育与线上会议全面爆火，直播行业迎来了新一阵东风。此外，2018-2019 年，抖音的爆火彻底改变了移动端用户的使用习惯。从 PC 端到移动端，互联网从业者们的设计思路一直都遵循“先推荐再消费”，而抖音激进地采用了“先消费再推荐”的思路，并取得了出色的成绩，从此互联网产品们纷纷踏上了“先消费再推荐”的设计之路。另一个改变用户习惯的设计是沉浸式无限流，抖音之前互联网产品的设计思路都是进入一个空间（可以理解为页面、直播间、具体功能流程），不符合预期就返回，再从上一级选择另一个空间进入，再返回，再选择…如此反复，抖音教育了用户用简单的下滑手势从一个空间迅速切换到下一个空间，无需经过任何中间页。当然这样的设计是非常大胆的，如果推荐不可靠很容易流失用户。为什么“先消费再推荐”能取得市场及用户的认可？理解起来也不难，早期 PC 端依赖搜索时，我们可以理解为需要用户做填空题，用户需要先思考自己想要的“关键字”，再填入搜索框，最后获取需要的内容。后来到了移动端，每个 app 都有一个固定的推荐首页，用户从做填空题变成了做选择题，从平台给的 ABCD 选项中选择自己更喜欢的消费内容。而“先消费再推荐”则是从选择题变成了对错题，我要，就留下来，不要就刷走。从填空题到选择题到对错题，一步步地帮用户减少了思考成本。手势交互也并不是 18、19 年才出现，早在智能手机普及的时候手势交互就被反复研究，只是多数产品急于从新功能中获取“数据收益”，不敢也不愿意教育用户使用更先进却更隐晦的交互方式。不得不佩服抖音对于“创新”的思路和胆魄。这两个使用习惯的改变对直播间交互的影响几乎是全行业统一的，现在几乎所有的直播间都可以通过下滑直接切换直播间（除了虎牙直播因为搬运功能时使用了 tab 而非入口，导致 tab 内滑动操作与直播间下滑互斥而无法实现），还有很大一部分平台也选择了进入即消费且在右上方提供更多直播选择的交互形式。除了电商直播这个超级风口，前几年因为在线教育的兴起，也有很多人投入了知识教育直播板块，付费直播教学也成为了直播重点垂直领域之一。如今人们早已对直播脱去了“低俗”的标签，也接受直播融入我们日常购物、教育、音乐、交友、追星…等生活诉求之中，甚至官媒也会在直播平台进行新闻报道了。直播已经做到了融入人们的日常生活，人人皆看直播，人人皆可直播。未来，直播还会覆盖到更多行业，也会越来越精细化、规范化。今天关于直播的分享就到这里，对于直播你有什么看法或见解？欢迎留言一起探讨如何做好直播的情感化设计？从5个方面掌握互动仪式链「互动仪式」一词最早来源于美国社会学家戈尔曼，是指一种表达意义性的程序化活动（大到国家在特殊节日举行的大型庆典，小到定期的家庭聚会、公司团建等活动）。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/broadcast-design
游戏 用户 互动 存量市场下如何维持产品的活力，成为各个平台的重要任务。互动小游戏为何能够成为当下热门的互联网营销工具。互动小游戏是无需下载软件即可体验的一种游戏方式，在网页或者小程序点开即玩且不占用内存。它的发展时间并不长，早期的互动游戏绝大部分是依托于 flash 的富媒体技术。在 2008 年初，网页游戏市场开始日趋火爆，像 Facebook、MySpace 国内的校内网、QQ 空间等一大批 sns 社交网站的崛起，互动小游戏几乎成了这些网站留住用户的不二法则。抢车位、开心农场、QQ 餐厅等也是一大批 80、90 后的青春记忆。随着技术的发展 flash 的弊端也渐渐显露出来，浏览器的运行效率不高、访问电脑资源不方便、个人信息泄露等，加上 flash 技术由 Adobe 公司一家独大，导致各大公司都相继不再支持 flash 应用，而转投到了 H5。最终 Adobe 公司决定在 2020 年终止 flash 技术的提供，这项划时代的技术落下帷幕。近些年随着移动互联网的发展进入下半场。市场增速放缓，流量红利逐渐消失。存量市场下如何维持产品的活力，成为各个平台的重要任务。互动小游戏作为当下热门的互联网营销工具，它的效果远胜于传统的营销效果，成为各平台的公共选择。1. 娱乐体验佳相比冰冷单薄的营销页面，游戏化的互动形式更容易让用户接受，提升用户的参与度，让内容营销变得更加生动有效。和直接派送优惠券给用户相比，让用户参与到游戏中，付出时间成本再获取相应优惠券时，用户的使用度更高。2. 传播效果好无缝连接各种终端，在任何一款浏览器或者手机、平板电脑中都能够访问游戏。开发成本低周期短，便于分享传播。这种广泛性是之前的游戏难以媲美的。游戏自带的竞争性，也能够让用户自发地进行传播，传播成本低效果好。3. 需求植入易互动游戏的趣味性、竞争性以及灵活性，能够让平台更容易将业务诉求融入其中。让用户在游戏过程中潜移默化地接受产品内容。在电商领域也有效解决了价格歧视的问题游戏将优惠券的获取和兑换难度拆分为多个阶梯难度，通过游戏的趣味性降低消费者对价格的感知度。1. 促销类小游戏2009 年双十一后，节日大促层出不穷。各大平台在促销期间通过推出各种主题玩法的小游戏来为活动造势，以此链接平台与用户。S 级节日互动游戏植入游戏玩法对于像双 11 这类的 s 级大促，已经成为标注化配置。通过游戏弱化掉价格歧视，同时用户参与游戏付出的沉没成本，也能够促使他们在大促当天使用来之不易的红包优惠券，实现收益最大化。游戏主题通常与平台理念/IP 形象/大促主题紧密相关，巨额红包池多品牌联动，玩法简单但规则复杂，注重 aarrr 全方位的设计。19 年双 11 盖楼浅析：盖楼组队 PK 机制放大了用户间的胜负欲，但输的的队伍不仅耗费心神，还要倒贴门票红包。负面情绪氛围越来越重，买卖楼风气盛行。虽然使游戏热度大涨，但同时也导致不少用户放弃，影响平台拉新转化的效果，社交平台非常多的差评也有损品牌形象。常规互动游戏玩法简单、耗时短。相比直接领取优惠券，加入互动游戏后以奖励形式发放，券的使用率更高。这是利用了迷恋小概率事件效应。在概率论中，经济学家把在大量重复试验中出现的频率非常低，甚至接近于 0 的事件，称之为小概率事件。对于小概率事件，用户往往都抱着侥幸心理，而且会放大这份心理。“万一中奖了呢”所以用户对得来的奖品格外的珍惜。2. 日常小游戏轻互动的游戏方式与各大平台都能够有较好的适配性，通过互动游戏吸引用户打开 APP，提高打开率和活跃度，进而完成用户行为的转化；互联网巨头也纷纷开始在 APP 内尝试能够与日常运营相结合的游戏方式。常见的是养成签到类，种树几乎成了各个平台的标配。下面我们用“上瘾模型”来对蚂蚁森林和多多果园进行拆解，探索一下互动游戏如何帮助平台实现增长。2016 年支付宝通过立足于公益事业上线蚂蚁森林2018 年拼多多上线以真实水果作为奖励的多多果园，老套的玩法融入各种社交裂变营销，简单的创新使拼多多 2019 年一季度达到 5000 万 DAU，引爆了各大平台做养成游戏的潮流。互动游戏的趣味性、强互动能够很好的和各平台业务相结合。通过游戏化的方式，使用户参与到平台的营销活动中，能够产生真实的裂变效果，实现业务增长。在制作互动类游戏时，可以借鉴比较经典的 flash 小游戏（4399 沉淀了大量的经典小游戏）。通过对经典小游戏的拆解，沉淀游戏范式，再将不同游戏的亮点剥离出来进行优化创新融合。 但创新并不是单纯的模式复用，融合也不是机械地拼装。要结合实际业务，将游戏和商业诉求保持一个平衡点。 注重用户体验，让用户迅速进入心流状态。今天先到这里，希望大家能够多多发表自己的看法，一起交流。下期我们聊一聊互动游戏的设计。大厂出品！如何通过游戏化设计助力直播互动？游戏就如一位魔女，在她魔力所制造的幻境中，我们全身心沉浸在幻境里自由释放本我，你所经历喜怒哀乐，其实都是精心设计的哦。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/growth-of-interactive-games
用户 互动 形式 前言评论区是一个神奇的地方，它可以拉近用户间的关系，也能增强用户与产品的联系。那么好的评论区该如何设计？本篇文章将通过三个维度、九个考量点对评论区的设计进行拆解，希望能对大家有所帮助:-)评论区设计的三个维度&十个考量点从产品维度定义评论区类别当拿到构建评论区的需求时，别着急出方案，先看看自己的产品是什么类型、适合什么样的评论区；公众号的评论是被作者选择性地“晒”出，生鲜超市类 app 的评论区是只能看不能回——产品类型不同、其评论区类别也不一样，这里有三种评论区类型供大家选择：从产品维度看评论类别1. 单向评论区单向评论偏向于让用户发表自己的观点，重点在评论内容本身的浏览上，用户与用户之间不可互动。如应用商店、外卖 app 的内容详情页中，评论内容是用户后续行为——下载应用、下单外卖的影响因子之一；2. 双向评论区双向评论多应用于作者与用户之间的留言互动中。如公众号的文章留言区，用户发表观点、作者可选择性地进行回复。双向评论更强调作者、读者之间的关系，整个评论区（留言区）的互动性不强；3. 多向评论区多向评论区顾名思义，用户可以在评论区发表自己的看法、也可与他人进行交流互动，这在社交 app 上、新闻资讯 app 等较为常见；设计师需要根据自己的产品特性，在设计之前，先来选取最适合的评论区类型。“看评论”时的五个设计考量点在确定了评论区类别之后，就可以去设计用户“看评论”的体验了；这里可以通过以下五个考量点来分析： “用户看到了什么” ——关系着评论区内容元素、展示形式、排序方式的呈现； “用户怎么看到的”——同正文与评论区间跳转方式、以及一级二级评论的跳转方式有关。“看评论”时的五个设计考量点1. “看评论”之内容元素评论区内容元素主要分为两部分，评论区入口+信息展示：评论区入口——通常是评论icon、评论量数字、“评论“二字说明，设计师按照产品的调性直接设计即可；评论区信息展示——分为说明类信息（e.g.评论内容）和互动类信息（e.g.点赞、回复)；设计时需注意各类信息展示的位置，以确保信息看起来动线流畅、用户操作起来移动距离最小。“看评论”·评论区内容元素之信息展示2. “看评论”之评论展示形式app 评论区常用的大致有四类展示形式——主题式、平铺式、盖楼式、引用式，这些“XX式”是什么意思，又适合在什么场景下用呢？主题式：如下图，用户对正文内容发表的一级评论在上，他人的回复则折叠在下方；因为一级评论通常以热度的形式排列，所以“主题式”可使优质评论获得更多的曝光，更容易吸引其他用户查看、并参与讨论中去；平铺式：对于“平铺式”的展示形式来说，评论和评论回复都处于同一个层级上，视觉上没有明显的层级区分；以朋友圈为例，在熟人社交圈子中，大家评论回复的层级是相同的，朋友圈的用户可以通过时间的先后顺序直接浏览；旧版某乎的精选评论页也为“平铺式结构”，当用户对某条精选评论感兴趣、进去详情页浏览时，只要从上往上依次阅读即可；盖楼式：如同字面意思，评论区用户之前的互动内容像在盖楼一样，一层一层向下堆砌。应用盖楼式展示形式的典型例子就是某易新闻——用户可以按照楼层依次向下浏览，虽然看得时候比较清晰，但因“盖楼式”的结构比较复杂、所占面积较大，在移动端上屏效会相对较低，可能影响用户的阅读效率；引用式：从名称上大家可以理解，用户 B 回复用户 A 时，B 的回复内容下方会显示 A 的评论内容。“引用式”的好处时便于读者理解，但劣势同“盖楼式”一样，移动端使用该样式会影响用户的浏览效率，在 PC 端上会更为适用；主题式、平铺式、盖楼式、引用式..展示形式虽然多样，大家可以根据自己产品的需要来选取合适的展示形式。3. “看评论”之评论排序方式不仅评论区的展示形式有四种，评论内容的展示顺序也有四种排序方式：评论按时间正序排列：按时间正序排列意为内容按照发布的时间由旧至新排列，其排列方式符合用户阅读时的逻辑顺序，用户可以通过时间线将大家的讨论内容串联起来，方便阅读、减轻了认知负担；评论按时间倒序排列：与评论正序排列相反，倒序排列会将新评论在上、旧评论在下，更适用于强调内容时效性的场景中；评论按热门程度排列：大家常看到的“精选评论”便是按照热门程度排列的——后台会计算出各条评论的“热度值”，衡量维度通常有评论的点赞数、回复数、或负反馈数等等。为了避免马太效应，热门程度的排列公式中通常也引入“时间衰退因子”，这对强调时效性的资讯app来说比较重要；评论按混合式排列：混合式排列方式简单理解可为上方评论“按热度”——展示精选评论，下方评论“按时间”——展示最新评论；这样排序使得用户既可以感受到热评的趣味性、专业性，也更有意愿来参与大家的讨论。看完了这些，你的产品评论区适合什么样的排序方式呢？4. “看评论”之正文、评论区的查看方式分析讲完了用户“在评论区看到了什么”，那我们就再来讲讲用户“怎么看去看评论”。首先是正文与评论区间的跳转，通常会用以下四种方式来实现：“看评论”·正文、评论区的跳转方式锚点定位、跳转至评论区：这种是比较常见的交互形式——点击评论icon后，通过页面的锚点定位直接跳转至评论区；待用户浏览完评论区内容之后，用户可再次点击评论icon返回至正文位置；上滑页面，评论区跟随在正文后：很多资讯 app 的评论区都跟随在正文尾部，在浏览完正文后，用户通过上滑页面便可以看到评论。对于用户的行为路径来说，这种方式是符合用户先阅读、后查看讨论、参与讨论的逻辑，但为了营收与数据，正文、评论区之间会夹杂了相关推荐与广告，会对用户的正常浏览造成一定的干扰；手势滑动、进入下一级页面查看评论：以某讯新闻为例，用户可以左滑直接进入评论页浏览；手势交互的好处是便于用户操作，但也具有一些的小“缺点”，如滑动进入下一级页面的操作是否符合用户认知、滑动手势是否在所有场景下都会适用等；评论内容以弹层形式呈现：在用户点击评论 icon 后，评论区以弹层的形式弹出——这是大多数视频类app常选用的，也是本次vivo浏览器评论区优化所采取的跳转形式。从手机屏幕的空间利用上，“正文内容”处于二维的x、y轴上，评论区以弹层的形式在z轴空间里交互，提高了手机屏效；从用户操作上来说，弹层的使用提高了操作效率，同时因弹层交互的普适性，用户的学习成本也较低；从内容的底层逻辑上来讲，评论属于资讯详情的一部分，用户通过弹层来进行资讯的延伸阅读，这种分层交互也符合详情页浏览的逻辑结构。“看评论”·评论区以弹层形式呈现5. “看评论”之评论、回复间的跳转方式分析对于“用户怎么看评论”，除了“怎么查看评论区”，也还有“怎么查看评论与回复”；后者的查看方式整理后大概有下图三种：1）在原位置直接展开更多“回复”：以美版某乎为例，其优势是操作成本、浏览成本都很小，弊端则是会影响到用户阅读下一条评论（屏幕滑动距离更长）；2）在下一级页面里再展示完整的“回复”；3）以弹层的形式来进行“回复”的完整呈现。“看评论”·评论区展示形式之评论、回复间的跳转方式根据以上五小考量点，大家可以根据自家的评论区特点及现状，选取合适的方式方法去做用户看评论的设计体验。“评论互动”时的三个设计考量点当完成了“看评论”的设计分析，那下一步就需要进行评论区互动时的设计分析啦。大家可以通过以下三点来考量：功能支持、手势操作、评论输入。“功能支持”以大家各自的支持产品功能为准，本文就不再赘述；这里就为大家简单讲解一下后两点的分析。1. “评论互动”之手势操作分析下面是对在不同类型的产品中，用户进行单击、双击、长按、滑动等手势操作反馈的整理：单击评论区内容：不同类型的产品，单击评论区内容的操作反馈会有所不同。如社交类 app，除了“评论”，也有“转发”等其他与之同等重要的功能，所以点击该类型产品的评论区内容时，会弹出“更多功能”弹层以让用户选择功能的使用；对于新闻资讯类 app，评论区是用户交流想法的地方，所以当用户点击评论内容，弹出输入框和键盘会更符合当下的用户预期，便于用户的操作使用；双击评论区内容：在社交 appIG 中，双击点赞的交互手势在产品的各个模块是通用的，用户自然而然就会有评论区“双击可赞“的认知。然而其他产品中，“双击赞”可能并不具有通用性。如果大家要在自己产品中选用双击手势的交互，可能要注意引导用户学习噢~长按评论区内容：通常情况下，长按是去使用评论区的更多功能。如下图，用户长按评论区，可以进行复制、分享、负反馈、翻译等操作，以满足用户在评论区的期望型功能的使用；2. “评论互动”之评论输入分析发评论路径分为了输入的“前、中、后“三阶段，大家设计时需注意以下三点：“评论互动”·评论输入之三阶段输入前告知：评论框里的默认文案可以起到引导用户评论、提示评论用语等的作用。如“说点什么吧”，可以促使用户去发表看法；如“有爱评论，说点儿好听的~”，可以侧面提示用户要文明评论等。大家可以结合自身的产品调性、设计目标，选择适合自己的文案风格；输入时协同：评论输入时，设计师需要考虑到不同场景下用户的评论诉求，提供合适的功能以提升用户的操作效率、使用体验。如团购 app 发评论时，输入框会提供“环境”、“服务”、“菜品”等标签，既降低了用户评论过程中的难度，也使得评论多维度、更丰富。同时，评论输入时大家也要注意异常场景下的防错设计，比方说误操作、键盘收起时，用户的编辑记录要帮他留下来喔；输入后反馈：发送评论后，产品需要给予用户明确的反馈结果，常见的有 Toast 反馈、评论区跳转定位等。大家注意啦，做评论区跳转定位时要给文本背景一个颜色变化的提示噢，避免用户在茫茫字海中迷失～总结以上内容就是评论区设计时需要掌握的对产品类别、看评论、评论互动三大维度、总计九个设计考量点的阐述。设计师们可以酌情参考文章内容，通过在各个考量点的打磨、创新、组合，打造适合自家产品的“最佳评论区设计”。轻松3招搞定评论区设计风筝KK：评论区在 APP 中有着不可或缺的地位，评论区又主要分评论入口、评论展示、评论排序三个方面，不同属性的 APP 评论区侧重点又都不一样。阅读文章 > 欢迎关注作者微信公众号：「VMIC UED」本篇来源：优设网原文地址：https://www.uisdc.com/comment-section-design
曲线 动画 互动 从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。但是自己感觉学得不够系统，只是能做需求，做得还不够好，所以最近几天我都在学习研究 Material Design 交互动态系统规范。从整体框架和细节入手，我结合日常业务设计思考总结了几点，也输出了一套动效标注模板，希望对大家有帮助。这次总结主要是分享交互动效的相关干货，方便自己沉淀设计经验，大纲如下：动效的作用设计原则持续时间缓动曲线动效风格动效标注动效的作用相信很多设计师在日常业务中都会主动挖掘机会点，来为产品增值赋能。机会点可以是交互动效，但是我们该怎样和产品同学沟通推动才更有说服力呢？如果只是说提升用户体验，说服力是很弱的。因此，我深度学习了 Material Design 动态系统规范，结合界面案例总结了几点作用：1. 使用更愉悦，微体验更好比如标签栏 tab 切换、下拉菜单出现，加入动效，符合现实场景动态，界面更加生动，还能缓解用户对内容的枯燥感。2. 让不同界面的元素更具有关联性，易于理解层级比如收件箱消息列表和消息详情的转换，过渡流畅。3. 提供强提示的反馈和展示当前界面状态比如键盘输出完成，动画显示操作是否成功；列表占位符，加入动画表示正在加载中。4. 教育用户，帮助用户了解如何操作比如滑动打开的手势动画，使操作行为易于理解。动效原则好的交互动效，会给人愉悦的心理感受。设计过程应当遵循以下几点原则：1. 自然在现实世界中，物体的速度会受到自身重量和摩擦力影响，不会突然运动，也不会突然停止，因此要使用缓动曲线，平稳过渡。2. 及时反馈动画持续时间适当，响应迅速，有助于用户了解 UI 变化。不宜太快，人的大脑容易反应不过来，处于很懵的状态。也不宜太慢，用户一直在等待，会产生枯燥不耐烦的心理感受。3. 简单明了动画过渡要简单明了，保持连贯，避免多个元素交叉重叠，显得混乱。4. 一致性遵循尼尔森十大交互原则中的一致性原则。整个产品应当使用统一的动效标准，比如运动速度、缓动曲线统一，使用户体验一致。持续时间在及时反馈原则上，Material Design 规范对于手机端的动画持续时间，提供了三个层级建议：小范围过渡的元素，建议时间是 100ms，比如开关按钮动画。中范围过渡的元素，建议时间是 250ms，比如半屏面板展开。大范围过渡的元素，建议时间是 300ms，比如悬浮按钮转化为全屏面板。这个时间我们只能参考，具体动画时间还是要看界面效果来确定。缓动曲线缓动曲线，调整过渡元素的速度，按物理规律自然地加速或减速，这样动画才会显得自然愉悦。在不同的平台或软件，缓动曲线可能会有不同的命名，MaterialDesign 规范定义了四种：1. 标准曲线标准曲线（也称为 EaseInOut）是最常用的缓动曲线，元素从静止开始快速加速，缓慢减速到结束。这种缓动曲线适合屏幕内的元素在屏幕内的运动，过渡自然，可以用在悬浮按钮转化为面板的动画。2. 强调曲线强调曲线（也称为 EaseInOut）是标准曲线的拓展，元素加速时间减短，减速时间加长，强调过渡的结束。这种动画效果会稍微俏皮一些，对于办公产品要慎用，也避免曲线样式太多设计师无法清晰地区分使用。3. 减速曲线减速曲线（也称为 EaseOut），元素从屏幕外快速进入并逐渐减速，在静止时结束。这种缓动曲线可以用在半屏面板出现的动画。快速进入，可以迅速响应用户的操作行为；当用户大脑收到即时反馈后，为了避免高速移动带来的紧迫感，元素需要缓慢减速到静止。同时，让用户在等待过程中可以提前识别和接收内容信息，动画结束后可以第一时间操作。4. 加速曲线加速曲线（也称为 EaseIn），元素在屏幕内静止，逐渐加速离开屏幕。这种缓动曲线可以用在半屏面板消失的动画。用户操作关闭面板，表示已经不关注面板内容，这时动画就需要快速响应，加速移动屏幕，避免用户出现等待的焦虑感。动效风格设计师了解完动效原则、持续时间、缓动曲线后，当业务需要定制一套动效标准时，我们需要结合产品调性制定动效风格。工具类产品专注内容，可以使用直接、简洁的风格；娱乐类产品，可以使用俏皮、活泼的风格。影响动效风格主要有几点：速度、运动路径、缓动曲线、海拔高度，我们可以看下对比效果。1. 持续时间 300ms 的标准缓动和 650ms 的强调缓动的对比。2. 如果元素沿对角线移动，运动路径可以是直线或弧形，看下对比。3. 默认过渡和弹跳过渡的对比。4. 默认情况下，背景内容在动画过程是静止的。为了动画更生动活泼，可以调整背景内容比例来强调海拔高度。从对比效果来看，持续时间较短、斜向移动的直线路径、默认过渡、默认海拔高度的动画风格直接、简洁，及时反馈，专注内容；持续时间较长、斜向移动的弧形路径、弹跳过渡、变化的海拔高度的动画风格强调动画的过程，俏皮、活泼、生动有趣。如果是办公产品，需要克制下，不要盲目强调动画。动效标注设计师完成交互动效 Demo 后，就要输出一份动效标注交付开发实现。在实际项目中，我有遇到过一些问题：有些设计师反馈文字表格不直观、不易编辑，有些开发同学反馈动画曲线看不懂。为了解决这些协作问题，我结合动效标注的项目经验、参考 Material design 规范动画曲线和咨询开发同学的意见，最终搭建了一个 Sketch 动效标注模板，组件化搭建编辑，比较方便。（有需要的同学可以在文末和开头下载）总结以上就是我对 Material Design 交互动态系统的学习总结。理解交互动效的具体作用，我们才能更有说服力地和产品沟通推动落地。在设计过程中，我们应当遵循自然、及时反馈、简单明了、一致性的原则，结合产品调性打磨出一套自然愉悦的动效标准。还需要注意一点，要恰当使用持续时间和缓动曲线。由于个人还没经历过整套产品交互动效系统的搭建，还有许多不足之处，接下来会继续学习！腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」 文件名 如何下载使用 文件大小 提取码 下载来源 交互动效标注模板3.36M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/material-design-system-conclusion
飞翔的企鹅
落霞与孤鹜
张大湿
在路上
