同时也方便用户再次消费某个内容时，减少再次记忆和查找的成本。比如我喜欢做菜，但是年纪大了记性不好，每次做一道菜我都会打开我的某音收藏夹里找到视频教程，这个老小子的视频教出来的菜味道真不错。
收藏夹要解决用户什么问题
两个关键词：1.管理 2.分类
管理，就是我们所说的增删改查。“增”，我们需要在用户浏览信息时给该信息提供收藏功能，这里要注意的是收藏信息的颗粒度，什么信息可以收藏，一段话？一篇文章？一个用户发布的完整内容？还是一张图片？产品对收藏最小单位的定义要明确，因为会影响到对收藏内容的分类。例如微信可收藏的最小单位很多，有链接（包含文章）、文件、图片/视频、音乐、语音、聊天记录、笔记、位置，而像饿了么只能关注店铺，对任何菜品、用户评论等等都无法进行收藏。b站你可以收藏视频、漫画、商品，但是不能他人的动态。
删没什么好说的，再来说一下改和查。因为他俩会涉及到收藏的流程。我们知道不同产品的收藏流程是不同的，例如马蜂窝、闲鱼等产品，用户收藏内容后只给出收藏成功的toast/提示栏提示，并告知收藏到了哪里；
而腾讯视频、抖音、携程则是当用户进行收藏后除了给出成功提示还会给出收藏列表的入口；
最后，像知乎、豆瓣在点击收藏后直接给出滑出操作框让用户选择收藏夹或创建收藏夹以及是否要转发。
3种流程的区别
前两种我认为区别并不大，是否要在提示框里给用户进入收藏列表的入口，更多还是取决于产品是否想让用户离开这个场景，还是让用户继续浏览。之前我们提到过闭环，但是闭环一般针对任务而言，但是收藏严格来说不算是“任务”，而是用户的一种“行为”，感知起来区别还是很大的，因为任务是有明确目标的，比如给用户安排一个任务，让他对某个商品进行分类收藏，那么用户会根据这个分类收藏的目标去进行操作，任务结束后给用户相关的引导和出口。但是在用户自然的浏览场景中，对内容的收藏并没有具体目标，所以要不要给用户在点击收藏后引导进入收藏列表要具体情况具体分析。
其次是知乎、豆瓣，在用户点击收藏后给予是否要创建收藏夹的功能，相比于前两种，对信息内容的管理，更加明显了。首先为什么他们和前两种不同呢，像知乎用户是有KOL效应的，个人的收藏夹可以公开，他人可以查看他人的收藏夹，有点类似于花瓣的画板，同时对于这类知识、内容类的应用，对于分类的要求和需求更高更多，本身知识的维度就很多，颗粒度很小，所以在用户进行收藏行为时主动提醒用户可以创建收藏夹。
那淘宝是怎么做的，它在用户收藏的时候也给出一个菜单，用户可以选择收入到某个收藏夹，也可以默认不放入，还可以去创建并放入，这就是更个性化了。
但是咱们说前两种没有给在收藏时给创建功能的就不个性化了吗？也不是，个性化也要根据产品定位和用户需求来的，比如马蜂窝的一些机票车票、旅游产品，做一个收藏夹创建，好像没必要，因为可收藏的类型不多，个性化标签也不明显，显然是没必要的。腾讯视频、闲鱼显然也是。那我们再来聊一个细节。
知乎在点击收藏某个回答的时候，页面会唤起收藏模块，让用户选择你要收藏到哪里，但这里的体验不是很好，因为用户想要收藏某个内容必须先选择收藏夹，如果不选择则无法收藏成功？
无论你当前是否创建了收藏夹，都必须选择或点击完成，如果有创建过，那就需要经历：1.点击收藏图标 2.点击要收入的收藏夹 3.点击完成，如果没有创建过那么默认会创建一个收藏夹。而淘宝则不是，无论你是否创建收藏夹，只要点击收藏图表那就已经收藏成功，在这个前提下，你可以选择是否要收入到某个收藏夹还是新创建一个。
所以知乎、豆瓣的收藏单位大多以回答、帖子为主，这样的内容系统无法帮助生成标签，所以需要用户自己创建分类，在收藏时给予创建功能是合理的，但我认为知乎这样的设计还是不够人性化，但是站在业务角度看，就是想引导用户去创建分类，也是能理解的，虽然在体验和效率上并不是最优。
创建、分类、搜索都是帮助用户再次进入收藏空间时能够更好的查找想要的内容。同时不同产品会有不同的筛选标签，比如微信阅读，收藏其实就是书架，哦，应该说，书架就是收藏。筛选维度分为：更新、进度、购买、分类。所以我们在设计收藏功能的时候，要根据用户的筛选场景和内容来制定合理的筛选维度。
收藏和点赞还有加入购物车的区别
收藏的属性就是收纳、管理和分类，但是和点赞、购物车不同，点赞意味着认同，具有社交属性，同时也为了帮助产品记录用户个偏好用作研究，而收藏则是用户想对该内容进行收集，比如我正在准备一个辩论赛，我抽了一个反方观点，虽然我本身并不喜欢这个观点，但是为了准备辩论的素材和题目我会对这个内容进行收藏，但不会点赞，虽然收藏大部分时候也有对内容的认可，但不完全是。所以收藏更多的是用户个人对信息的单方面管理，点赞则一个即时互动。
收藏和购物车也是一样的，购物车承载的是更多消费、商品营销的表达、算价以及凑单活动，购物车和直接消费强关联，而收藏夹多关注与对商品的存储管理、搜索查找，虽然也有一部分需求重合，但用处、和场景还是有很大区别的。
最后，总结一下，设计收藏夹时，我们首先得根据产品定位和用户需求以及内容的维度来选择好收藏夹的颗粒度或最小单位，其次，根据业务或用户需求设定好收藏夹的收藏逻辑和流程，最后，做好用户对收藏内容的查找以及分类筛选的体验。
作者：应骏 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本次针对百度APP中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。
二、什么是「组合手势」
「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。
以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1交互信号→step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。
于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。
「组合手势」触发一般可分为三个阶段：step1交互信号→step2意图识别→step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。
由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。
三、「长按组合手势」激活快捷菜单
1.项目背景
百度APP视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。
随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。
2.竞品调研及选型
通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。
选型A
「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；
选型B
「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；
选型C
「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；
3.设计方案
1）长按手势交互扩容
针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。
但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。
那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。
基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：
step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；
step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；
step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。
「长按+向上滑选」快捷触发对应功能项；
「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。
2）容错性兼容
在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。
3）易用性打磨
差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。
我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了10+名不同年龄段的目标用户进行访谈测试。
测试访谈的过程中，被测用户在进行1至2次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。
同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。
3.1 ）扩展触发热区：
考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。
3.2 ）支持跟手触发：
长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。
3.3 ）实时提示及响应反馈：
灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。
方案上线及验证
以AB实验对本次设计方案进行定量测试验证：
「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；
「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；
小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。
「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。
「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。
二期扩展方案
随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。
四、「组合手势」拓展探索
手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。
以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。
1.「右滑返回手势」激活“小窗播放”
“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。
基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。
2.「双指手势」激活“满屏播放”
“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。
五、结语
便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速，很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法，以及其对应的优秀案例：
希望会为你带来更多的设计灵感。
通过将屏幕的布局进行分割处理，可同时呈现多项内容，让用户自由选择任务主次，同时处理多项任务。分屏设计很常见，但其中的体验细节却依旧值得研究和优化。
案例1
微信在 Pad 端的分屏布局考虑得很周到，看微信视频时支持分屏功能，还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸，体验顺畅，看视频、接微信两不误：
案例 2
bilibili 在移动端的视频通过小窗模式可以不间断播放，不仅可以在 App 内或外呈现小窗模式，正在播的视频，在被临时打断退出视频后，还可以用音频的方式继续播放：
案例 3
微信的新功能，在你阅读文章时依旧能看到朋友发来的微信消息，可以直接在当前页面回复消息，避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”，一会儿再做处理：
案例4
微信视频号改版后，点击视频号下方的博主名称和头像，下方弹窗会弹出该博主的主页和其他视频，而当前正在播放的视频会渐渐呈现小屏播放，视频内容不会被遮挡，既不影响观看，也不影响用户探索该博主的其他视频内容：
案例 5
在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频，既可以听内容，也不影响你继续浏览订阅号的其他内容：
产品可以让操作更容易被用户管理和掌控，在被打断后很容易被用户重新再续，给用户足够的掌控感。在一些特殊情况下，几件事可以交替、穿插地处理，同时进行。
案例 1
钉钉的移动端浮窗功能，向右滑动退出正在操作的页面时，就会出现添加浮窗区域，用于收录未做完的操作。同时显示出已添加浮窗的内容数量，最多添加 5 个：
案例2
微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容，在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章，可以更合理地掌控阅读节奏：
案例3
微信读书 App 会在你跳读到其他章节时，在页面下方显示“返回原进度”的按钮，方便你在跳读后回来继续阅读：
案例4
网易163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件，页面上方会增加一个类似浏览器标签页的 Tab，你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时，同时又收到了其他的新邮件，去查看新邮件之后，可以通过 Tab 直接回到邮件编辑页面，继续编写刚才的邮件：
案例5
使用钉钉发起会议邀请，如果中途退出，系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示，帮你续写内容：
用户可以选择忽略或隐藏并不重要的、正在进程中的任务，将更多的时间用在其他事情而非无法控制的等待上。
案例1
iOS 系统中，当你在不同 App 之间传递文件时，如果文件过大，弹窗的“取消”按钮会在几秒钟之后变成“隐藏”，用户点击后可以继续做其他操作，并不妨碍后台的文件传输。
案例2
微信在接收超大文件时，增加了“发送给朋友”的选项，你不必等待文件在自己这边下载完成后再发送，可以直接发送源文件给对方，同时下载：
案例3
微信拨打语音的界面，在等待好友接听的过程中，你可以看到对方朋友圈的动态，缓解无聊的等待，也为即将进行的语音聊天提供了话题：
作者：元尧
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
正如题目所说：细节决定成败，微交互就是利用细节提升产品体验和设立品牌标志。
直到今天，人机交互已经有很长时间的发展。从例如烤面包机的简单产品到银行应用程序类的复杂数字产品，我们每天进行上百次的交互。这些交互转化为产品的可用性，最终转化成用户满意度、信任度和产品整体体验。
在过去的二十年里，设计师们一直在关注这些交互（按钮、滚动、长按等）。从电脑大屏幕到移动设备、智能手表以及现在的可折叠设备，交互也在不断地发展。本文研究了微交互的结构及其与交互模型的关系，审美体验的不同驱动力，以及我们如何通过改变微交互的元素来优化体验。最后，我们讨论了自下而上的产品构建方法。
自灯泡、收音机、门铃等电气设备出现以来，微交互一直存在于我们的生活。微交互和技术共同出现、发展。在我们的日常生活中充满了与周围物体的微交互，例如使用烤面包机、解锁手机、将手机切换到静音模式、控制音量等。
从简单的按下按钮到摇动手腕激活智能手表，微交互随着技术的进步而不断发展。像复制文本或移动文件这类我们如今习以为常的、无形之中的微交互，都曾是新颖的微交互。观察微交互有助于设计师改进产品。
有趣的是，设计师将现实生活场景投射到产品来建立微交互，如剪切-粘贴、放大-缩小等。这些细节不仅提高了产品的可用性，也通过直观的互动降低用户学习难度。
我们如何准确定义什么是微交互，什么是交互？
论文《开启移动微交互》（Ashbrook，2010）将微交互定义为“接触设备开始到完成的时间不超过4秒的互动”。而《微交互》一书（Saffer，2013）将其定义为：“微交互是围绕着单个用例的产品使用场景——它们有一个主要任务。”整个应用程序或产品可能只是一个微交互，例如，天气应用程序（图1.1）或烤面包机，因为它们只关注一件事。
图1.1 天气应用程序能被看作是一个微交互，因为它只显示天气。
图1.2 LinkedIn 的“喜欢”按钮由两个微交互组成，（a）当你长按“喜欢”按钮时，它会打开一个空间展示多个表情符号以供选择（b）你选择表情符号发送给帖子。
一个功能可以由多个微交互构成，例如LinkedIn的“喜欢”按钮（图1.2），人们可以对帖子发送不同的表情符号。因此，微交互是一个功能模块，或者是整个产品。与产品互动时，微交互也许能帮助用户了解做什么，如何做，后续是怎样。精心设计的微交互使产品变得直观，优化了产品的用户体验。
当微交互打造了与品牌产生共鸣的特殊体验时，它化身为了品牌标志。专业术语称之为“标志性时刻——产品或服务中给人留下持久而难忘印象的突出互动”（Janhagen, Leitch & Judelson, 2020）。
Facebook的“喜欢”按钮是它的标志性时刻。微交互并不仅仅局限于视觉，它们可以是声音、触觉、实体硬件或手势交互。Snapchat的通知作为产品的标志性时刻是因其独特的声音。同样地，iPhone有一个中心按钮作为苹果的标志，它有多个微交互方式。
微交互通常首选（Narvhus, J.M. 2016）：
我们将在之后的章节中研究一些微交互案例。
在进入交互模型之前，我们将尝试研究心智和心智表征，以更好地理解人类如何与世界上的物体互动。(Newell & Card, 1985)文章谈到了三个不同的处理器：感知处理器、认知处理器和运动处理器是如何工作以理解周围世界。
认知处理器与长期记忆和工作记忆一起工作，从现有的知识中提取物体、感觉、行动等的表征，以理解来自知觉处理器的输入。一旦认知处理器完成处理，它就会向运动处理器发出信号，以特定方式对特定情况采取行动。心智表征是现实世界中事物如何运作的心智模型或理解。
唐-诺曼的七个行为阶段（诺曼，2013）（图2）是一种更清晰的心智学形式，解释了人类如何与物体互动以实现目标。目标可能是打开一盏灯或在移动应用程序上进行在线交易。让我们把手机解锁的简单目标分解成七个行动阶段。
在这个循环的每个阶段，都有一个输入->处理->输出的过程。在宏观层面上，我们也在遵循同样的过程来达到我们的目标。我们可以从行动模型的七个阶段推导出互动周期（Norman, 2013）（图3）。
交互周期包括执行过程和评估过程，前者是行动所需信息差，后者是行动发生时各类情况所需理解的信息差。整体用户体验取决于交互过程中互动周期的每个部分。微交互的目标是消除差距，使产品变得直观。现在让我们看看微交互的基础结构，了解它们如何帮助消除信息差。
微交互之所以强大，不仅仅是因为它们的细微交互差别或迷你尺寸，还因为它们构建的方式。微交互的结构包括四个部分（图4）（Saffer，2013）：开启微交互的触发器，决定微交互如何运作的规则，以及影响微互动的元规则——阐明规则、循环和模式的反馈。
触发器可以由用户触发，例如点击图标、填写表格等，触发器也可以由系统产生，例如低电量提示框，通知用户电池电量不足。
让我们以Duo应用中验证用户的微交互为例。
现在当我们解构微交互并理解其结构时，微交互的结构支持行动七阶段理论，最终帮助消除执行和评估之间的鸿沟。精心设计的触发器便于用户进行计划->指定->执行行动，精心设计的规则和反馈便于用户进行感知->解释->对比结果确认完成目标。我们将在下一节中谈论触发器、规则和反馈的设计，以了解微交互如何有效构建所需的用户体验。
我们回看心智部分，认知处理器不仅包含了不同事物如何工作的心智模型，并且随着我们在日常生活中对新物体的体验而不断地发展。从这些心智模型中，设计师可以创建概念模型。作为关于产品和功能运作的高级计划，概念模型一旦被建立就能被转化为行动模型的七个阶段，从而帮助我们创建对用户来说很直观的微交互。这是一种自下而上的方法，用于建立交互 -> 功能 -> 产品。
在上一节中，我们谈到了交互模型和微交互的结构，并探讨了它们如何携手使产品变得直观好用。现在我们将关注动态审美体验，以及微交互如何在产品的微观层面建立体验。
审美体验的韵律之舞有一个内在的、动态的结构。杜威指出了体验建立的相关过程，如累积、保存、紧张张力和预期，来指称体验的内部动态（McCarthy & Wright, 2004）。
完整的用户体验是这些动态的集合，它可以根据用户过往经验和知识认知而变化。过往经验和任何审美经验都取决于上下文：用户的过往和能力，人工制品的技术，以及互动发生的任一物理、社会空间（Petersen, Iversen, Krogh, & Ludvigsen, 2004）。当我们与物体/产品互动时，触觉、嗅觉、视觉和听觉都会唤起体验。
在过去的几十年里，设计师们一直在关注这些触发奇迹的交互。交互不应该仅仅是传达内容和完成任务，它应该引人思考，并鼓励人们以不同的方式思考变化。我们将展示一些唤起了不同审美体验的动态微交互案例。
1）积累：指伴随着体验时间展开的积聚。我认为谷歌支付作为微交互建立了用户体验，并包含非常优秀的展开界面和支付完成音效。
这个之所以判定为其微交互，是因为它只专注于一件事，而且建立了非常充实的体验。这个交互开始于点击支付端->选择银行卡->加载->支付完成（图6）。动画和音效带来了一步步徐徐展开的体验感受。
2）留存：指保留一些过往事物的趋势，不论体验还是内容。文本或信息的保存对优秀用户体验来说确实是必要的，毕竟这样能减少认知负担。在网站和应用程序上填写表格时，许多微交互都保留了之前的填写信息。
这类微交互的一个非常简单的例子是，当你复制一个链接并试图将其输入网络浏览器时，浏览器会显示直接粘贴链接的选项，甚至显示你复制的内容（图7）。我们在这此观察到与微交互的结构不同的是重点更多地放在了交互的反馈上，它传达的状态是：你复制的内容已保存，并可以用来搜索网页浏览器。这是一个展示了我们如何调整微交互侧重点来优化体验的优秀案例。
3）张力：指体验内和参与体验的人之间的关联。这是社交媒体和流媒体平台使用的一种技术，当用户期待在短时间内快速阅览内容时，用户不断下滑来反复触发刷新的微交互（图8.） 。微交互带给用户参与感以牢牢抓住其注意力。它带来的延迟满足，让用户在想快速浏览内容时耐心等待。
这个特殊的微交互的重点是方式：即在内容加载之前显示一个加载器。
4）预期：它包含两个时间阶段。第一阶段是用户在交互中开始期待，第二阶段是用户从交互中得到期望反馈。我想到的微交互是Google Pay India的刮刮卡奖励（图9）。
这个特殊的微交互为它在印度带来了巨大的成功。人们喜欢期待好事发生，即使期望没有发生。若是期望发生，那期待就是值得的。支付完成后，用户进入刮刮卡奖励界面，对刮奖产生期待，点击卡片进行刮奖。刮奖微交互的重点是动作的触发上，兼具有趣性和参与感，触发本来可以只是一个点击按钮，但他们设计了一个刮擦动作作为触发。
上文提到的各种例子可看出：通过调整微交互的元素来优化体验。微交互小而强的原因在于：它们是产品的差异化细节。好的微交互能让产品提升一个等级。
我们认识了精心设计的微交互在创造美好体验方面的力量，现在让我们来探讨一下，如果糟糕的微交互可能会引发什么问题。
我想到的案例是手机通知。并不是说通知很糟糕，而是它设计得如此之好，以至于它有违用户的意愿。通知是由系统发起的触发器，它仅显示部分信息来吸引用户点击。
每个人都会遇到这样的情况：明明只是想看看时间，但在看到通知时点击进入信息，无声无息之中半个小时就耗费了。这不仅仅耗费了时间，更严重的是人们在驾驶时也会分心看通知。
另一个案例是 Facebook 的著名的“喜欢”按钮。这个精心设计的微互动，是 Facebook 的标志，但没有人意识到一个微互动可以对人们的生活产生如此大的影响。近期 Instagram 停止显示帖子上的点赞数，因为它对用户行为产生了负面影响。上面的例子也显示出：小事情可以产生大影响。
微交互也会令人讨厌，例如，在填写表单最后点击提交时，弹出一个对话框（图10），说表单填写中存在错误。这里的触发器是提交按钮，规则是显示一个对话框，反馈是静态文本——“有填写有误”。
这里的微交互形式是错误的，如果填写有误，提示应该在出错点附近。而且这里的反馈是糟糕的静态文本，对用户没有任何用处，因为它没有说明出错的位置和类型。因此，微交互的使用和场景真的很重要。
纵观全文，我们探讨了什么是微交互，以及如何创建符合交互模型的微交互来消除执行和评估之间的差距。接下来，我们研究了动态审美体验，以及我们如何在产品的微观层面上用微交互创造美好体验。
设计师有几种方法来创建微交互，方法一是自下而上思考，把一切都想得越小越好后，再建立功能。另一种方法是把整个产品看成是一个微交互，如果你想增加另一个功能，那么就把它看成是另一个只包含一个微交互的产品。
我相信谷歌支付是以这种方式创建的，因为它是从支付开始，且只专注于支付，后来才引入了奖励和其他内容。
微交互有助于建立一个品牌标志和提升用户体验。我们喜欢或者讨厌产品的根源正是细节。细节是向用户展示你以用户为中心并为用户着想的方法。这就是微小的事情会带来巨大差异的原因。
作者：三分设
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
你有没有注意过，App底部的图标是如何变成选中的？大多数产品是将静态图标替换（硬切过渡），来完成状态切换。
当我看完上百个动态后，找到了更有趣的方式...
02 App底部导航构成
通常由图标、文字/点线装饰、和底板卡片组成，（当然也有些产品只使用图标或文字），但设计师在进行动态设计时则是针对这3部分。
03 Tab Bar动态类型
动态效果由弱到强，视觉层级由低到高依次排序：图标动态 — 装饰元素动态 — 底板卡片动态。（根据本文案例效果来排序，但效果不同会有所差异）
▍图标动态․
我们知道图标风格可以简单的分为：线性、面性还有线面。在这基础上通过修改颜色或造型，又能延展出更多风格。
最常用的是添加修剪路径（Ae的一种路径效果），你可以把它理解成托尼老师，可以通过调整百分百参数来控制线条生长。
但只是单色修剪，看起来很单调。我们可以在这个动画基础上再多复制几层，并分别加入品牌色，这样可以让视觉看起来更丰富。
也可以换一种方式，只调整不同颜色图标的位置属性，便能得到故障效果。
如果你觉得这些太浮夸，那么单个图标添加修剪路径，再配合位移、旋转等基础属性则是更好的选择。
通用的方法是调整不透明度，相比于硬切更柔和，且不会过多吸引用户注意力。但对于带有娱乐类属性的产品来说，可能会显得有些普通。
我们可以考虑使用遮罩来制作动态，首先在图标周围绘制几个圆，再将图标外轮廓，作为圆的遮罩，来控制其显示范围，最后调整圆的缩放即可。
在一些特殊的时间，设计师们可能会技痒，而将图标绘制的更加丰富，来营造氛围。
对于这类图标，只需要参考它们的物理状态[下方解释]，再遵循从下往上，从中心往四周扩张的原则来调整基础属性，便能制作出细节丰富的出场动画。
（物理状态：该物体在现实场景下的状态，上图奖杯真实世界状态通常是放置地面，所以出场方向是从下到上。但假如你的图标是锦旗，那么物理状态应该是挂在墙上，所有出场方向是从上到下）
当然如果去掉高光和投影，在制作一些动态时会更方便。
例如：复制一颗星，将其初始位置设定为一个奖杯的距离，并记录关键帧，然后整体再移动一个奖杯距离。耳朵则调整路径来完成移动和变形，这样便能营造出3d旋转的错觉。
对于结构复杂的图标，可以提前分层。其中线条依旧可以使用修剪路径（在Tab bar中，不同图标修剪路径的起始点方向通常相同，以便保持一致性），而填充只需要调整元素缩放，并借助蒙版限制其显示范围就行。
▍装饰元素动态․
如果你觉得前面这些方案不够新颖，那我们可以对装饰元素下手。（当然这类方案很少见，原因在于商业价值不足，实现成本高，所以这里也只是提供一些创意练习思路）
在一些年轻化产品中，如果图标含义很容易理解，那么设计师可能会用线或点来替代文字，让整体更简洁。
国外设计师Tubik，通过让点元素在移动时呈现心电图样式，让人眼前一亮。
通过动态效果，甚至能体现出产品行业属性。
尝试修改轨迹样式，然后为元素不透明度和位置添加动画，你能猜出这是什么类型的产品吗？
又或者再夸张些，将轨迹设计成电路图。其中线条添加修剪路径，再借助Ae路径跟踪方法，使圆点沿路径运动。最后通过蒙版来控制整体动画显示范围，这个方案看起来适合科技或游戏类产品。
通过调整元素路径来改变其造型，模拟液体滴落，再通过蒙版缩放，让选中状态下的图标出现。
假如你的图标设计的足够巧妙，我们可以提前绘制好关键笔画的运动轨迹，便能通过修剪这条轨迹来完成笔画的移动。
▍底板卡片动态․
这类动态少见的原因在于其动态效果面积大，视觉层级高，容易过度吸引用户注意力。目前也只是在个别产品中看过卡片凸起效果。
在Ae中要制造这样的效果，最先想到的可能是调整卡片路径，但这样的方式在制作弹性时非常麻烦。
我们有更简单的方法，先多画出一个圆，然后与卡片路径合并。
为了让边缘圆滑，整体添加高斯模糊和简单阻塞，分别加大参数，便能让边缘圆滑。（这种方式有个缺点：会收缩原有卡片宽高。所以添加效果后，需要借助参考线再次调整卡片大小）
完成圆滑处理后，修改其他元素的基础属性即可。
目前能记起的只有美团外卖看过这效果。但为了降低视觉干扰，其弱化了弹性次数。
这个效果灵感来源于Dribbble设计师（EuroART93），我们只需要将凸起案例中，圆与底板卡片的布尔运算模式改为相减就行，其他元素同样调整基础属性。
此方案目前还没有在其他产品中看过，究其原因还是效果太过抢眼。
看了这么多，其实不难发现。同一个图标，只需要改变不同属性或元素的运动方式，便能带来不一样的感受。
或许创意的产生，并不是脑袋突然迸发出全新的东西。而是许多我们熟知的旧有内容组合了起来。
正是它们之间这种奇妙的融合，给我们带来了新鲜感，或许这就是我们要的创意。
最后再说两句：
每个产品都有自己的调性和目标用户，动态效果也有强有弱。好的动态应该是能与其进行匹配，而不是根据某个产品得出一个绝对的答案。
本文演示了不同类型图标用什么动态，并不代表只能这样用。动态效果类型远远不止这些，而以上只是最常见的动态属性组合方式，所以请不要局限你的想法。
作者：幺零三 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在产品设计中，当有新上线的功能或隐藏功能时，我们通常会给予用户提示。常见的有小红点、角标、黑色遮罩+文字提示等这类静态提示。
而人类是视觉生物，相比于静态内容，我们的注意力更容易被动态内容吸引。
今天来聊一下页面中常见的动态引导。
当你看到这个页面时
我想你会先被色彩凸出的元素吸引，然后是面积占比大的元素，最后根据阅读习惯从上到下，从左到右，依次查看其他内容。（大致如下图）
而当页面元素都赋予细节时
假如我想让你关注到其中某个较小元素
其实只需要为它添加动态，便能使其脱颖而出，这就是产品设计中的动态引导。
▍新功能提示 ․
当产品上线新功能时，设计师们都会根据功能重要程度，来决定使用什么形式让入口元素和其他元素区分开来。常见的有小红点、标签、气泡这类静态点缀元素（通常这类形式只出现一次，当用户点击后就会消失）。当然，也有将上述点缀元素动态处理的。如果入口是图标，甚至可以为图标制作动画，这在很多电商产品的品类区经常可以看到。
动态处理的形式，比原本的静态更容易引起用户对元素的注意力（与动态方式有关），甚至传递某种情绪。由于是循环播放的动画，因此可以持续吸引用户注意力。
ps：据说，每当页面多出一个会动的元素，后台就会多出这样一些留言，捅了开发窝了[Doge]。
▍诱导用户操作 ․
动态引导还常常被设计师用来强调重要内容（有可能被产品、运营拿刀架脖子），来达成某些数据指标，通过利用动态诱导用户操作。
例如：在会员卡片中添加光效、在广告中让按钮进行缩放、为签到入口图标设置动画。
这些都能充分引起用户注意，甚至提升功能点击率。
▍隐藏功能提示 ․
我们知道，在大屏上有更多空间可以展示信息。但在移动端，受屏幕大小限制，设计师通常会折叠或隐藏不常用的功能，来保持页面简洁。
对于这些不可见的功能，在初次使用时需要进行引导，才能被用户感知与使用。
▍操作教学指引 ․
讲到引导，还必须要提的是手势引导，通过动态直观展示不同手势的作用，提示用户如何与产品进行交互。
这在游戏教学中就常常使用，它可以帮助用户快速理解游戏玩法。
回到视频 App 中，你是否留意到，当你第一打开视频时， App 会提醒你双击屏幕可以点赞，上下滑动可以切换视频。
在产品交互设计中，如果使用到一些新颖的交互方式，这类引导可以大幅降低用户学习成本，帮助用户快速上手。
▍信息高效传递 ․
动态叙述的直观性，使得我们可以减少对复杂信息进行大量文字描述。通过动态设计，我们可以创建视觉故事，这有助于将复杂信息以更简单、清晰的方式进行传递，从而帮助用户快速完成任务。
也因此，在一些含有复杂操作的弹窗中，渐渐开始应用。
但是需要注意的是，上述这些大多都只在第一次使用时才会触发。
当然有特例，例如：
在 App Store 每次下载应用进行验证时（面容解锁的情况下），系统会通过动态提醒用户电源键位置，并告知用户需要双击进行人脸识别。
在扫码时，弱光场景下出现的手电筒，通过动态引起用户注意，指引用户使用。
以及作为动态演示，帮助用户理解如何使用手掌滑动截屏
如何进行NFC感应等等..
动态引导像是设计师用来控制我们眼睛的法宝，有的人用它改善产品体验，有的人用它提升商业转化。
但法宝虽好，我们只有理性使用，才能避免用户迷失在这眼花缭乱的世界中。
感谢大家看到这里，我是幺零三，咱们下期见...
作者：幺零三 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、项目背景
语音搜索场景在功能不断迭代的同时，也在探索更年轻化的玩法、传递更多元的体验感受。在产品初期，我们尝试在语音搜索场景下增加AI伙伴的形象，虽然线上版本已经实现，但从产品形态以及用户反馈上看，还没有达到可情感互动的效果。所以在本次迭代上，我们着重从情感联结、闲聊互动的维度，对语音搜索进行创新性尝试。
二、设计挑战与目标
围绕项目背景，从现在语音搜索的用户行为与框架来看，有几个比较明确的问题：
因为前期在语音搜索的优化中，已经尝试在面板中引入AI形象，上线后用户反响强烈，用户的行为中聊天、互动的诉求也明显增加。由此可见，满足用户对AI伙伴的情感化诉求是十分有必要的，同时语音搜索引入AI伙伴是体现同行业差异化的有力创新点，从行业报告《2021年中国智能语音市场分析报告》中，也阐述了打造沉浸感语音搜索体验与引入AI是目前智能语音市场的发展趋势。
综合以上原因，设计团队在与产品讨论过后，达成本次升级的核心目标：
三、设计举措
1、构建认知 - 语音搜索基础框架升级
在旧页面中，语音面板限制了人物与按钮的展现，人物既要承载功能反馈又需要作为物理操作按键进行点击操作，与用户认知相悖且也不利于功能扩展。因此在新版本设计中，需要明确“人”在语音搜索里的属性，以及AI伙伴与语音搜索的关系。
我们将语音搜索页面框架分为主要功能与辅助功能区。从旧语音面板中剥离出人物，并保留收音球在面板中做物理交互功能（发起收音、停止收音操作），利用AI伙伴的人物属性，打造智能拟人的交互反馈，满足用户情感诉求。以“人”为中心，最大化展示AI形象，增强情绪传递感的同时保证框架可拓展性。
同时，将原堆积在面板中的功能与信息按优先级归位，确保页面信息清晰易读、功能操作热区无重叠、信息反馈区无干扰。新框架上线后，AI伙伴互动与语音搜索的认知关系更加清晰，语音搜索跳框量明显增加，AI伙伴带动面板整体导流增加，面板退出率下降。
2、引入情感 - 全场景情感化体验提升
除了通过框架层面进行认知优化之外，为营造更贴合“人”的互动体验与情感建立，我们又根据语音场景对每个状态进行了情感体验升级。改版上线后，用户闲聊诉求和互动点击行为均有所提升，从而验证情感化的体验提升，满足了用户互动诉求。
1）情感化引导提示：视觉上人物破框展示配合AI招手/比心的动作展示，不再是图片，而是可以对话的实体，同时使用年轻化的引导语气拉近与用户间的距离，增加数字人曝光，建立新用户心理预期，激发兴趣点提转化。
2）互动提示规则升级：围绕“人”的真实情感，通过弹出气泡的方式模拟AI伙伴状态，比如听歌、读书、游戏。以此引发用户点击或进行互动行为尝试。并且配合AI伙伴升级引导规则，使引导能够根据不同场景进行适配，保证其既可以承接语音常规引导功能，又可以承接负一楼聊天互动，点击气泡可跳转对应负一楼场景、联动数字人语境内容，避免造成场景情感化割裂。
3）增加“AI伙伴”情感反馈：增加人物动作、丰富情感化动态反馈，想要模拟更真实的“人”的状态，就需要满足更多拟人反馈。将语音搜索常见场景划分为聆听、识别解析、异常状态、指令响应、引导等5种状态。对应不同的状态，规划相应的数字人反馈动作或组合使用方式，可复用拓展其他相关场景，为设计与开发提效。
3、感知升级 - 营造沉浸视觉氛围
确定了产品主要改版方向后，通过对目标的提炼，提取设计关键点「年轻化」与「情感化」，配合AI伙伴形象，需要呈现出轻松活力的氛围感，设计中运用了大面积的毛玻璃质感，使场景更加轻盈、沉浸。通过对色彩的运用来演绎年轻的视觉效果，诠释语音搜索年轻化的设计突破。
1）定义视觉风格：围绕改版目标，定义设计关键词，由关键词延伸设计风格要点。
2）形色字构质动：从「形色字质构」5个方面提炼设计特征。
基于视觉方向及特征提炼，在质感、形状、颜色三个设计中改动最大的方向详细描述。
考虑到语音搜索场景日后的拓展，色彩上希望可以营造给用户一种轻松柔和的视觉氛围，并且元素的色彩需要与AI伙伴服饰相呼应，从而使AI伙伴形象更加灵动、场景搭配更加和谐生动。
①基础色彩范围制定：
以度晓晓为示例，遍历目前线上所有度晓晓服饰装扮，对色彩进行归类处理，从中提取主题色系，从搜索色库中对应选出主题色环。
②如何在数字人装扮中提取主体色：
我们需要把色彩量化，建立特定场景取色规则，根据规则层层筛选，我们可以从中获取N种主体侯选色。
③校正主体色，与搜索智库色彩形成映射关系：
通过对数字人装扮的色彩分类，我们以H值为标准，通过调整S值与B值，划分了12个色相，设定对应色系的H值区间范围，如智能取色色值在该色相区间范围内，且吸取到的候选色个数最多，就在对应的色库卡中选取主体色。
校正原则：色相必须保持是同类色、保持感官明度同频、保证视障人群的识别度
④建立辅助色搭配规则：
为了保持背景层的色彩氛围营造，保证其具有清晰的识别度，我们以主体色为起点，选择了颜色相对较多的邻近色，在色温上保持整体色调的一致性，其次利用对比色和互补色，选择更加丰富多元的色相，制造更强烈的色彩对比，以保证满足各种使用场景下对色彩的需求。
⑤组件化思维拆解页面元素：
在梳理了智能取色机制后，我们也在思考，语音面板涉及到的元素过多，往往会面临不同场景不同适配的情况出现，那么在做到视觉减负的同时，如何能灵活的替换对应元素呢？
我们以组件化思维去拆分设计，进行立体化的分层，将引导层（热词推荐引导关注）、信息展示层（承接语音各类状态与信息）、形象层（强化AI伙伴智能感知）、背景层（烘托视觉氛围感）罗列出来，各场景可根据需要进行颜色延展，保证视觉样式达成横向统一，呈现出更加丰富的视觉内容，避免审美疲劳。
总结本次语音搜索的改版升级，我们通过“构建伙伴认知、满足情感互动、增强沉浸体验”等手段，增强AI伙伴的曝光率，进一步向用户传达智能搜索的感知，从而促进搜索行为转化。
构建认知过程中强化AI伙伴形象，增强语音搜索功能拓展性；同时结合“情感化”等全场景引导手段，营造更贴合“人”的互动体验与情感建立，对每个状态进行了情感体验升级；最后重新定制视觉风格，围绕「年轻化」关键点对整体氛围进行强化，让语音搜索场景更加年轻、有氛围感。本次改版上线后，搜索行为、互动行为均有所提升，用户体验也得到了显著提升。
四、写在最后
我们正处于数字化快速变革的时代，传统工具的基础功能已不再满足用户的诉求，人们的感官也从现实空间延伸到虚拟空间，AI伙伴会逐渐融入人们的生活，未来语音搜索将不再是一个信息输入-结果输出的传统搜索工具，引入AI伙伴，可以让搜索更加智能，拥有人类一样的思维、表达、情感和学习能力，满足人们更高层次的情感诉求的同时，也可以让搜索更加简单有趣。
未来我们持续对语音搜索进行升级，将AI伙伴与搜索链接的更加紧密，提升用户体验，创造出更多有趣的、创新的、别出心裁的年轻化设计。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、前言
视频播放器中承载着极其丰富的内容画面和播控功能，尤其是在寸土寸金的移动端视频播放器中，为使内容更沉浸消费，需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下，合理的手势设计不但可为界面“减负”，还可帮助用户更快捷触达功能、提升操控便捷性。
视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知，如「单击 →暂停」、「双击→点赞」、「长按→快进」、「横滑→导航」、「纵滑→切视频」、「双指捏合→缩放视窗」等通用手势。
那么如何在保留用户对于常规通用手势认知的基础上，进一步对视频场景中的手势交互进行扩容升级？这也是我们接下来在手势进阶交互上的重点探索方向。
本次针对百度APP中的视频播放器场景，为提升手势操控效率，我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型，以探索如何在视频场景中构建便捷高效的进阶手势体验设计。
二、什么是「组合手势」
「组合手势」是基于常规手势的组合扩展，其通常由两种或两种以上的常规基础手势所构成，若组合方式及使用场景得当，可助力用户更便捷的触达功能。
以前述的视频场景常规手势为例，其触发机制一般可分为两个阶段：step1交互信号→step2执行任务，即用户通过某一基础手势发出交互信号，系统收到信号确认后便可立即执行任务，但整个过程是线性的，手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。
于是我们在现有常规手势两阶段触发机制的基础上，尝试引入「意图识别」环节，并梳理出「组合手势」的设计模型，以探索不同基础手势相互组合后的扩展可行性。
「组合手势」触发一般可分为三个阶段：step1交互信号→step2意图识别→step3执行任务，前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。
由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口，因此，其差异化创新具有较大设计灵活度，尤其需根据具体的使用场景进行综合考量。
三、「长按组合手势」激活快捷菜单
1.项目背景
百度APP视频场景早期的播控功能较少，如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。
随着后续视频场景的功能建设日渐完善，我们便在基础菜单面板中拓展了一行视频菜单，专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项，菜单面板弹出后还需左滑才可露出后面的功能入口，因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。
2.竞品调研及选型
通过对竞品进行调研，我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型， 分别为：长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。
选型A
「长按触发独立播控面板」：通过长按手势可激活从屏幕底部弹出的独立播控面板，此方案扩展性较强，但对视频沉浸观感体验有一定的打断感；
选型B
「长按触发浮层播控选项」：通过长按手势可触发置于视窗上层的浮层选项入口，一定程度上可延续视频观看的沉浸体验，但浮层扩展性有限；
选型C
「长按触发特定播控功能」：通过长按手势触发特定的某个播控功能（如长按“快进”），一定程度上可满足此功能的重度用户，但对于长按手势的使用效率较低；
3.设计方案
1）长按手势交互扩容
针对目前视频播控菜单存在的问题，经过和业务对上述三种长按交互选型方案进行综合考量，最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置，并探索一套更便捷的触发机制，以此对视频场景中的播控菜单进行设计升级。
但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据，用户对此功能的使用频率高、并已形成较深的操控认知，若直接下线“快进”功能则会对用户使用习惯产生较大影响，尤其是视频场景的重度用户。
那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢？是否有可能将“快进”和“快捷菜单”进行融合？这也是本次项目对于便捷手势体验的重要设计探索点。
基于此，我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义，通过「长按+滑选」的机制触发快捷菜单功能项，以缩短视频常用功能路径。对应到设计模型的三个阶段分别为：
step1：以“长按手势”创建一个新模式，即发出交互信号并唤出浮层菜单；
step2：若用户未松开手指，则系统默认开始识别用户意图，是否有以“拖拽手势”滑选至目标功能项以选择功能；
step3：用户滑选锚定至目标功能后，松手释放即可完成最后的功能执行确认。
「长按+向上滑选」快捷触发对应功能项；
「长按+向下滑选」快捷触发“快进”（一定程度上兼容老用户对于此功能的使用习惯）。
2）容错性兼容
在设定「长按+滑选」组合手势的同时，考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程，我们同时也支持点选的操作模式，即用户长按后若未产生滑选行为便松手，则松手后依然可通过点选的方式触发对应播控功能项。
3）易用性打磨
差异化的创新设计形式在前期总会面临质疑和挑战，本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式，于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试，以预期在上线前可先收集一波体验问题进行快速打磨优化。
我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本，并邀请了10+名不同年龄段的目标用户进行访谈测试。
测试访谈的过程中，被测用户在进行1至2次尝试操作之后，均可掌握如何使用「长按+滑选」的组合手势，这也为我们增添了不少信心。
同时，我们通过观察用户操作行为及用户主动反馈，发现仍有部分易用性细节可进一步打磨优化。
3.1 ）扩展触发热区：
考虑到单手握持手机的使用场景，可尽可能扩大定义长按手势的触发热区，屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外，其它大面积区域热区均可支持长按触发快捷菜单，以降低触发难度、提升易用性。
3.2 ）支持跟手触发：
长按后浮出的快捷功能项，其浮出位置支持跟随手指的纵向触发位置而浮出，可减少手指在屏幕上的位移距离、操控更便捷。
3.3 ）实时提示及响应反馈：
灵活判断当前手势触控状态（如滑入选择 / 松手触发），在界面中即时给出相对应的引导提示或振感反馈，以帮助用户快速适应新的手势触发机制。
方案上线及验证
以AB实验对本次设计方案进行定量测试验证：
「对照组」效果：长按触发“快进”（各播控功能入口仍归置于基础菜单面板之中）；
「实验组」效果：长按触发“快捷菜单”选项（支持滑选和点选模式）；
小流量实验上线后，经过近半个月的观察，大盘指标稳定、播放完成率等满意度指标稳步提升。
「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升，说明用户对部分高频功能的确有很强的快捷触发诉求。
「实验组」的“快进”虽多了一步触发步长，实验前期“快进”使用率不及「对照组」，但随着用户对于「长按+滑选」手势整体的使用占比持续走高，通过滑选触发“快进”的操作习惯也快速被培养起来，对于用户来说，长按快捷菜单带来的整体收益是大于折损的。
二期扩展方案
随着长按快捷菜单的上线推全，长按手势的渗透率也持续走高，用户逐渐对视频场景更多的播控功能有了长按触发的诉求，于是我们对长按菜单进行了二期的设计升级，在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能，用户通过长按后的可选播控项增多，播控功能整体的使用量得到进一步提升。
四、「组合手势」拓展探索
手势交互是用户在现实世界行为的映射，无论是基础手势还是组合类高级手势，都须符合用户认知习惯、并融入具体的使用场景中进行设计。
以「组合手势」设计模型为指导基础、并结合具体的项目实践，我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。
1.「右滑返回手势」激活“小窗播放”
“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。
基于用户的此种操控意图，我们以“右滑返回手势”发出交互信号而触发浮出小窗入口，随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图，若有短距上滑拖拽行为，松手释放即可快捷激活视频小窗，以提升观看体验的连续性。
2.「双指手势」激活“满屏播放”
“双指拖拽手势”可拖拽并清屏视窗画面，以此手势发出交互信号，若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为，则松手释放即可快捷激活“满屏播放”，以满足更沉浸视频浏览体验。
五、结语
便捷手势的设计出发点是为提升操控效率、缩减功能触发路径，从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发，后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。
————————————————————————————————————————————————————————————————————
感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。
也欢迎加入MEUX,视觉/交互/运营设计师可投简历至MEUX@BAIDU.COM(注明信息获取来源如：站酷）
关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。
MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
百度小说是百度APP内的垂直频道，拥有过亿月活和行业最全的正版书籍。随着著作权保护意识逐步上升，越来越多的用户愿意为优质的资源和阅读体验付费。2019年底，为了满足用户消费升级所产生的一系列需求，百度小说初步建立了会员体系。经过两年多的打磨，我们不断提升会员的服务体验，并进行了多次优化升级，现在将我们的设计经验分享给大家。
一、设计背景
2021年我国数字阅读用户规模达到5.06亿，同比增长2.43%，半数以上用户愿意为电子阅读付费，占比最重的人群为19~25岁用户，达到44.63%（数据来源《中国数字阅读报告》），“Z世代”已经成为我国数字阅读的主要群体。随着消费升级，用户对服务的需求不断提升，更看重信息之上的附加价值，如认同感、归属感和仪式感。
二、改版原因
2019年，由于时间紧、任务重，我们完成了小说会员从无到有、从0-1的基础场景搭建。但随着设计趋势的变化，当时小说会员的设计风格与主流用户的喜好不完全匹配，在使用场景中也存在易用性不足、内容缺乏吸引力等问题。下图是2019年小说会员的界面。
同时，我们对小说用户进行了视频访谈，搜集了用户在使用会员服务中遇到的问题，如会员福利少、找不到会员专属内容、购买过程有卡顿等，最终梳理为的三大核心问题：身份感知弱、购买路径长和资源内容少。
三、设计目标
在小说会员亟待改版的背景下，我们结合业务目标、旧版核心问题和用户诉求，推导出了本次改版的设计目标—品牌化、链路化和服务化。
1、品牌化—强化会员品牌
小说会员作为百度APP众多会员之一，设计团队希望能带给阅读用户一些不同的品牌记忆点。
1）设计关键词
基于会员的主流用户、产品属性和用户诉求，我们衍生出以下关键词：年轻、品质、尊贵、超值。年轻用户群体的占比越来越高，新版的设计风格力求更好满足年轻用户的审美需求。
2）会员符号
符号是最直观的视觉元素之一，能够以最快的方式传递产品记忆点。在会员品牌符号设计的草图阶段，我们从字母V、VIP、钻石、王冠和小说IP白嘟嘟等多个方向进行了方案发散。最终采用了白嘟嘟图形与尊贵感的V形符号相结合的形式。该方案既延续了小说的视觉符号，又与竞品的会员标识形成差异，从而加深用户的品牌感知和视觉记忆。
3）会员色彩
为了确定更加独特的品牌色，设计团队搜集了大量的尊贵氛围图片，提炼出了玫瑰金，牙金，赤墨等8个具有品质感的颜色。在视觉初稿阶段，我们选择了玫瑰金和黄金两种主色进行了方案尝试。最终根据整体效果确定主色为明亮、高贵的玫瑰金，辅色为黑茶棕，深支子和漆黑的配色方案。新的配色方案让用户感受到新颖、现代，焕然一新。
4）会员图标
在图形元素上，为了增强亲和感，我们选择了圆润的面形图标样式，通过大圆弧和小圆角的细节处理，传递给用户一种年轻、品质的品牌印记。
5）信息传达
我们对会员购买页和权益详情页进行了布局重构，采用深色的背景衬托卡片信息，使得产品框架层和内容信息层更加明确，突出核心内容。
在各类场景中，我们通过会员品牌色彩、图形、符号和IP形象的渗透，强化会员品牌印记。
经过分析研究和实践，我们完成了主场景的设计升级。
2、链路化—精细化运营
就会员体验而言，我们需要关注用户在各种时间和各类场合下的需求，因此我们将会员的全链路状态分为时机、场景和人群三个维度。
1）时机
在不同的时机状态下，我们需要传递给用户不同的信息。只有深入剖析不同状态下的用户诉求，才能为其提供更好的服务。接下来我们从购买前、购买中、购买后和即将过期四个阶段阐述：
①购买前—权益/优惠信息引导
在用户购买前，我们强化了低价和省钱信息，让用户直观的感受到购买会员后的价格福利。为此我们从三个方向上进行优化，在开通购买页，外露省钱金额，帮助用户了解开通会员可享受的收益；在会员频道页，采用外露多项权益，让用户快速了解会员权益；在章节购买页，采用突出会员折扣和会员优惠价，让用户感受到开通会员的折扣福利。
②购买中—优化路径流程
在用户购买中，我们在会员购买链路环节进行简化，采用当前页弹出半层面板替代跳转至会员聚合页的方式，缩短等待加载时间；在章节付费链路环节，将商品选择区信息结构进行优化，减少多章购买的页面跳转，使得用户能够更流畅的完成支付，提升付费体验。
③购买后—强化权益感知
在用户购买后，鉴于付费用户对商品和服务品质有着更高追求，为此我们通过在各类重要入口展示会员权益，包括省钱金额、去广告次数以及各类场景VIP状态提示等方法，以达到强化用户的权益感知。
④即将过期—轻引导续费
在即将过期前，为了避免对用户造成强付费的不友好感知。过期前3天，我们采用了轻量化的形式告知用户续费，通过各类引导信息的提示，让用户知晓会员服务期限届满。
2）场景
我们在入口和功能场景中也进行了精细化设计，让用户更便捷地使用会员服务。为了突出会员优质内容和服务，我们设置了会员专属的频道和书库，方便用户选择。
在各类功能场景中，为了方便用户在使用功能的过程中随时购买，我们设置了多个功能场景的会员开通入口。让用户快捷享受会员服务。
3）人群
通过小说用户数据分析，我们将用户人群分为会员用户、潜在用户、新用户和过期用户。
为了让会员用户能够体验到区分于普通用户的尊贵感，我们在付费页、批量离线、TTS播放页和签到页等场景均采用了会员定制化的配色方案和引导提示，这样使得会员用户在体验服务的各类场景中有更强的身份专属性。
所谓潜在用户，是指仍在犹豫是否购买会员的用户。我们通过限时优惠券、激励视频试用15分钟、书架省钱提示、挽留弹窗和降级版免广告权益等方式，让潜在用户不仅可以先试后买了解会员权益，而且可以通过各类信息提示通晓会员体验，更好地判断是否通过会员服务减少付费金额和提升阅读体验。
我们针对新用户建立了新人见面礼活动，用户在新手福利活动期内可享受超值折扣开通会员，低价体验会员权益。而针对已过期的用户，我们通过下发优惠券、强化特权等形式唤醒用户，以免错过各类福利和特权。
3、服务化—提升会员服务
在内容为王的时代背景下，为了增加会员产品的核心竞争力，我们持续扩充会员书库的数量和类目、拓展会员权益，让用户阅读到更加丰富的小说内容和体验到更多权益的会员服务。小说书库的付费和免费书数量大幅扩充，且书籍类型新增了有声书和短篇故事，增添了小说资源的多样性。
在权益上，对内我们持续拓展会员特权，从最初的4项扩展为10项，新增了有声免费听、免费读故事、整本离线、专属字体、签到1.5倍书币等权益；对外我们联合其他产品，推出了会员赠礼和联合会员服务，用户可以根据自己的需求进行购买，享受组合购买的优惠。
通过多个版本的迭代，我们完成了会员体系的设计升级和落地，用户体验得到了显著提升。
四、未来规划
提升付费产品的用户体验是一个体系化的研究课题，需要各个角色通力合作，合力同行，开拓革新。将来我们还会不断探索，通过不断优化体验细节，不断增加用户权益感知，不断尝试方案创新，形成设计组合拳，为用户提供更好的服务。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
写在前面
成熟的设计系统是一个强大的生态体系，在这个体系下，各系统部分协同运行，促进平台产品之间的一致性，为更大规模的产品提供“标准化”的工作流程，从而实现组织的运作效率的提升。
A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product. --Alla Kholmatova, from Design system
设计系统是指服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法（Kholmatova，2017）。
它既包含了可复用并组成界面的要素，也涵盖了如何在设计团队当中创建、提炼、使用和共享的方法。在2014年后，各大知名公司开始在界面设计领域纷纷构建设计系统。百度商业团队随着产品不断的发展和壮大，团队希望通过统一的设计和研发语言来提升产品的一致性，并实现团队协同效率提升，从而达到降本提效。在基于自身业务特性上，建设了一套Light设计系统并持续的发展。
目前在设计系统建设方面，各家有非常完备的建设方法与实践。当设计系统建设趋于完备和成熟时，如何更有效定位设计系统的发展方向、持续迭代成为我们思考的重点。
本文将以百度商业团队Light设计系统PATS度量体系的建设为例，分享我们如何探索设计系统度量的建构，与具体实践。希望通过文章能为大家带来新思考，并借此与大家进行交流与探讨。
1.为什么要做设计系统度量
度量是一种测量或评价特定现象或事物的方法，而体验度量则是一种可靠的测量或评价体验的方法与数据体系，使得体验可被测量、量化并以数据的形式表示出来（Tullis and Albert，2009）。
管理学大师彼得•德鲁克：If you can’t measure it, you can’t improve it.无度量、无改善。设计系统无疑是一个动态发展的，是不断演进的一个生态。在百度商业团队Light Design设计系统建设初步完善后，我们希望通过行之有效的度量，来进行可测量、可量化、可持续的监测，从而对设计系统进行全面评估，明确下一步重点的投入方向。这对我们设计系统管理和迭代非常有必要。
2.如何建立设计系统度量
2.1 现有度量模型研究
在构建度量体系之前，我们先回溯已有的度量模型。了解当前市面上以及学术上已有的成熟度量模型。并带着以下2个问题进行研究：
当前业界较为典型常用的模型体系：例如HEART + GSM模型、PTECH模型、《云计算软件产品使用体验质量度量模型及度量方法》。
通过对比分析模型维度、具体指标和方法，我们发现：
1）较为典型常用的模型是面向具体商业产品和用户，但针对设计系统的度量很少涉及。
2）常见度量模型建构的方法是有一定共性特征，我们可借此指导建构设计系统度量模型。
2.2 设计系统度量的建构
根据以上调研，我们认为：现有度量模型评估的对象、内容和方法是面向用户群体，并针对具体业务或产品；而设计系统的度量则是：通过全面科学的度量体系，评估设计系统在工作流程与业务侧应用的表现，验证其价值，并判断在应用中存在的问题。
我们基于百度商业团队Light设计系统发展和预期目标，构建了一套度量设计系统的评估体系。具体构建过程分四步进行：
Step 01. 盘点当前现状：
通过盘点对设计系统的各项内容、困惑问题等，以此明确设计系统需要度量对象和内容。根据设计系统标准化建立指南（Invision，2020）所提出：设计系统在不同发展阶段，需要到达标准的依据以及设计系统应包含的内容。结合我们设计系统当前发展的情况，将百度商业团队设计系统内容拆分为原则规范（Principle）、设计资产（Asset）、设计工具（Tool）、维护管理（Support）四大板块。由此，明确我们度量设计系统的具体内容，并将我们设计系统度量定义为设计系统PATS度量体系。
Step 02.制定度量维度：
在明确度量对象内容后，结合我们设计系统的目标，将度量体系聚焦五大维度：
Step 03.明确目标、信号与指标：
在不同维度下，依照GSM模型的方法具体推导出指标和度量方法。具体实施的过程是：罗列出度量内容在维度上所期望的目标，以及表现出的信号，来推到出具体指标。整个过程中，做到【贴近系统目标，紧扣度量内容】。
Step 04.选取度量方法：
对应上述的划分维度和指标，设计特定的度量问卷，采用主观评分的形式持续跟踪使用者们体验分数变化，从而监控设计系统在我们工作流程中的运行情况。并结合定性访谈，对薄弱内容深入探究，了解具体原因。此外，我们也引入客观度量方法，对组件应用表现的客观数据进行监测，来反映其灵活度情况。
3.PATS度量落地实践
构建设计系统PATS度量模型后，持续开展度量实践，度量模型与评估方法得到初步验证，确定设计系统度量体验分的基线；并了解当前系统发展不足的地方，明确短期解决方案以及⻓线行动规划。
第一次度量实践中，对比本次度量的平均分发现：易用性与可靠性维度远低于平均分，存在明显的短板。于是，重点针对短板问题，一方面，通过定性访谈对具体问题归因，找准痛点，制定出应对方案；另一方法，调研先进设计系统的建设方法，学习管理经验，给出具体的改善措施。
通过半年执行改善措施后，再次度量时，聚焦分值的变化观测到：执行相应的措施和决策后，分值有了明显的变化。例如，通过切换Figma工具作为Light设计系统相关资产的载体，利用其优势将设计系统内容根植到工作流程，使得易用性维度提升幅度非常显著。在一定程度上，验证了工具切换决策的价值。但易用性维度分值依旧较低，有可提升空间，还需持续优化。
此外，成立Light设计系统维护小组，制定维护管理建设机制，明确双周更新通知，统一日志记录模板，明确各项负责人等，推动可靠性维度得分提升显著。通过PATS设计系统度量，既为我们指明了下一步改善的方向，也对设计系统的发展决策进行验证。
总结：
在建立设计系统PATS度量后，实现了全面并精准的监控和管理，并指引我们提出可提升系统体验的决策与方向。而设计系统是复杂的，也是不断变化、演进的。未来设计系统PATS度量的方法也会随设计系统的发展而逐渐丰富，来获取更全面的数据。最终，帮助团队更好地推进设计系统的建设，提升设计系统的成熟度，推进设计系统向一个良性循环的方向前进。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com