随着媒体发展，商业广告和产品运营活动设计中，五花八门的创意层出不穷，那么如何衡量商业广告和产品运营活动设计的创意质量，如何向受众准确的传播产品的理念，如何判断用户是否接收到了产品的理念，是设计中所面临的重要挑战。因此我们需要通过用户研究来对设计效果做出衡量，在广告传播领域，针对品牌创意广告，有相对成熟的方法论实践，MEUX用研将通过本篇文章聚焦广告前测用户模型，分享该模型的指标体系及应用方式，为设计和研究工作提供借鉴思路。
一支广告片的诞生通常需要经过一个漫长的阶段，从创意产生到初版动画广告，再到成片拍摄及投放，这其中的成本动辄几百到几千万。进行广告前测会为品牌营销节约大量资金，对沟通和广告创意的研究可以有效提升传播效果，避免拍摄出来的广告“自说自话”，而且在越早的阶段介入其产生的收益越大。
所以很多品牌会在初版广告成型时，会在消费者端进行测试，通过消费者对于广告的反馈和建议，来进一步修改和调整方案，最终输出广告成片和投放市场。据凯度BrandZ统计，使用广告前测的品牌比未使用广告前测的品牌每500GRP（收视率）可多卖出180万单位，且长期品牌价值也在持续增长。
既然广告前测对于品牌如此之重要，那么我们要如何衡量广告创意的好坏以及如何完善和修改呢？接下来跟大家介绍广告前测的用户研究框架：
通过三个关键维度可对广告进行诊断：信息传递、广告穿透力、说服力。
· 维度一：信息传递
衡量广告成功与否的一大基石就是创意需要与品牌以及所要传递的信息紧密联系在一起。消费者的思维容量是有限的，所以只有最显著的最相关的信息才会被记住，因此我们要确保信息是故事线的核心或者是整支广告中最有趣的部分，这样才能使品牌/产品信息感知及记忆程度更加深刻。
信息传递通常可以问卷或访谈的方式，向消费者在提示状态下（以及无提示状态下）对信息的回忆状况来进行评估：
无提示印象：请您把这个广告的所有内容从头至尾,包括您所看到的、听到的,以及整个故事情节是如何串连起来的,都详细地描述一遍好吗？
提示后印象：这个广告留给你的关于这个品牌的印象中最深刻的是哪一个？广告还留给您其他什么关于品牌的印象吗？
· 维度二：广告穿透力
广告穿透力指标是由品牌关联度、喜欢程度、投入程度三个细分指标组成。品牌关联度是这支广告是否具有穿透力的基础，喜欢程度和投入程度则是好的广告的区隔点。
品牌关联度通过广告是不是吸引人，品牌是否能够让人记住，是否与品牌很好的连接来判定强弱，较强的品牌关联度是造就广告强大穿透力的基石；具体的实践通常使用问卷打分方法计算。
喜欢程度是通过这个广告是否使人愉悦，是否能够带动消费者的情绪来判定；具体的实践通常使用问卷打分方法计算。
而投入程度则通过是否激发了消费者的兴趣和投入感来判断，具体的实践通常使用面部编码（facial coding）方法计算，受访者越投入，面部表情对广告的反应就越多，可以直接通过受访者观看视频的面部表情来衡量他们的情感反应，针对不同的情绪（如惊讶、厌恶、微笑、傻笑等），会有各自的表达力曲线赋予不同的分值。
当我们得到品牌关联度、喜欢程度、投入程度三个维度分数之后，通过将分数拟合，得出广告穿透力指数(Brand impact Index)。
· 维度三：广告说服力
广告说服力由短期购买意向和长期品牌影响两个细分指标组成。
短期购买意向通过询问消费者广告对其考虑该产品的购买会产生怎样的影响来衡量，具体表现在价格考虑（Persuasion Price）、行动意愿（Call to Action）维度。长期品牌影响通过询问消费者看过广告后对于品牌的印象来衡量，具体表现在品牌吸引力（Brand Appeal）、品牌独特性（Distinctiveness）维度。
最后通过将分数拟合，得出综合的说服力指标(Persuasion Score)。
当我们得出广告穿透力指数(Brand impact Index)和说服力指标(Persuasion Score)之后要如何衡量呢？如何知道广告是否能够投放的标准呢？这时我们会将两个指标放入九宫格中进行验证，通常落在“非常好“区域的广告对于传播效果和市场份额均有较大的正面影响。
更进一步，我们也可以通过不同的细分人群来确定这个广告是否更受我们的目标人群（Target Audience）喜爱。例如某广告分别测试了不同性别的用户对于广告创意的反应，发现该广告在男性数值落在了“非常好“，但是女性数值落在了一般，这说明广告目前的创意对于女性消费者来说接受度比较低，仍然需要进一步改进。
改进的方向可从各个细分维度当中寻找线索，比如在上述例子中分析发现，在投入程度的面部编码微笑曲线中（如左图），女性消费者对这支广告中产品的呈现方式不太能接受，会感到害羞，因此大部分微笑曲线低于男性消费者，而相对来说厌恶曲线（如右图）比较高，从而导致穿透力指数较低。
以上是广告创意前测指标方面的一些分享，这套方法论既可以成套使用在品牌视频广告创意中，也可以在其他的设计创意中酌情提取部分指标单独使用，我们也将秉持探索精神，随着调研目的、用户需求和市场发展变化不断迭代更新模型和方法论，更科学有效的提升设计和研究价值。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
刷刷手机看看今天又发生了什么热点大事，已经成为现代人茶余饭后消遣时间的主要方式，而搜索热点区别于其他社区类产品，最大的优势是能够把大家关注的事件始末及相关知识服务快速聚合起来，帮助用户更全面的掌握信息。设计师作为连接用户与信息之间的纽带，在项目实践中也进行了系列的设计探索，除助力平台高效聚合呈现信息外，并以更丰富的设计层次诠释热点，帮助用户更便捷的获取所需。
我们先要去了解用户是如何消费热点内容的，基于用户情景认知链路分析用户在事件消费的链路，可以分为三个重要节点：1.热点环境的感知；2.热点事件的理解；3.事件观点的产生。
结合用户的消费路径，我们将设计逻辑框架拆分为三个层级：
1.氛围背景层：分层呈现热度氛围，辅助用户感知热点环境；
2.信息内容层：精细化拼装管理，帮助用户理解热点事件；
3.功能互动层：轻互动玩法设计，激发用户参与抒发事件观点。
从氛围表现层面，助力用户更快速的辨别事件的热度及重要程度。设计师结合搜索热点使用场景以及业务时效性配置诉求，归类了两种设计表现层次：1.日常热度氛围 2. 大事件热度氛围
1）第一个层次：日常热度氛围
主要应用于热点新闻场景，时效性要求高，同时事件热度也会在：“发酵--爆发--消退” 间实时变化，设计根据热度“强弱”程度需求，划分两档视觉展现阶梯，以自动化的方式展现，满足热度的实时变化需求，辅助用户感知当前事件热度。“低热氛围”弱标签设计用以展现上升/今日热点，“高热氛围”色彩背景通顶效果+上榜标签用以展现上榜热点。
如，“马斯克收购推特”，搜索热度持续上升，以第一阶梯-标签方式展示低热氛围；在 “马斯克收购推特” 的事件热度不断增长，成为热榜事件后，以第二阶梯 - 高热氛围自动匹配 ，通过背景及榜单标签的呈现，明确告知用户当前事件的火热程度。
2）第二个层次：大事件热度氛围
主要应用于热点大事件或运营活动场景，个性化展现要求高，同时事件关注度及重要程度也不同，设计根据事件的关注度及重要程度划分为两档阶梯，以人工配置的方式展现，超强的运营氛围，可以让用户充分感知当前事件的重要程度，“A级氛围”头部叠加场景元素设计用以展现大事件，“S级氛围”整页沉浸式视觉设计用以展现重大事件。
如，冬奥会，重大事件，选用第二阶梯 S级氛围，打造超强的运营大事件会场认知。
近几年我们不断的经历各类突发大事件，如：疫情/暴雨/名人逝世等等，每次突然发生的事件都让设计师措手不及，匆忙产出运营氛围设计方案紧急上线，保时效就很难保障质量，因此我们在想能不能总结事件类型提前储备设计，以备不时之需。
不同突发事件会牵动网友不同的情感情绪，比如河南暴雨，我们为受难同胞担心，为救助工作加油，为逝者哀悼；火箭发射成功，我们骄傲喝彩；名人结婚，我们送上温馨的祝福。不同事件带来不同的情感情绪，也要求设计师要用准确的视觉语言表达。
因此我们在前置设计时也充分考虑了事件情感因素，通过对近一年突发大事件的归类梳理，并推导不同细分场景下的用户情绪，通过情绪分类的方式，总结两种视觉设计表达形式：1.实景图合成效果满足严肃/庄重/权威场景情感需求；2.手绘效果满足积极/欢快/庆祝场景的情感需求。结合以上思路我们共储备6大类20个子分类场景的前置氛围+金刚位等运营物料设计，保障突发热点运营设计质效。
截至22年Q1，前置设计已在38个热点场景应用：
为满足用户不同事件场景下的信息需求，设计结合百度搜索：主要内容区（主要需求满足）+ 延展内容区（延展需求满足）的综合聚合能力，通过组件分区布局+精细化规则管理，为热点场景内容的高效拼装打好体验基础。
1）主要内容区
主要内容区，能够帮助用户快速了解事件的主题、时间及主要内容，结合热点事件长期的需求沉淀，设计将主要内容区又细分为主题区域及内容区域。主题区域可承载拼装事件主题、事件倒计时、会场分发导航等主题类组件；内容区域可承载拼装图文/视频/直播等事件主体内容分发组件。通过不同区域内组件拼装规则的制定，业务可以快速选择所需组件进行页面组织拼装，达成分场景个性化满足用户主需求的目标。
如：元宵晚会，热点主要内容区 以“ 晚会直播时间倒计时+ 各卫视晚会分会场导航+图文内容 ” 组件支撑起重大晚会预热期的事件主需求满足。
因为有设计拼装规则，不同大事件活动，各场景内容可个性化满足需求，交互布局设计上又可兼顾横向一致性。
2）延展内容区
延展内容区，能够帮助用户了解事件相关知识信息或提供事件相关服务。业务可根据事件场景需求，选择多个延展内容模板与主要内容区进行拼装，搭建完整页面以呈现不同热点事件内容。
如：俄乌战争-战事场景，脉络卡帮助用户快速了解事件进展 ；冬奥会-赛事场景，数据卡帮助可视化呈现赛事进展；博鳌亚洲论坛-会议场景，百科卡帮助用户科普相关名词知识。
通过氛围打造和内容组织，已经达成用户需求满足的目标，但到此截止，搜索结果的体验还是理智疏远单向的，搜索场景与用户、用户与用户间也无法产生对当前热点的讨论与态度表达。因此设计师对用户的互动行为认知习惯进行分析，并采取具体的设计策略逐步引导用户参与互动。
1）互动唤醒 - 吸引围观增强互动意愿
优化前的热搜结果页，用户的讨论内容都是隐藏在资讯落地页评论区内，需要点击进内容落地页内才能参与“围观”或“讨论”，除互动氛围已脱离当前场景外，也削弱了用户对此事件表态的参与积极性。
通过弹幕滚动+输入框组件组合外显的交互设计方式，将用户讨论外露，不仅丰富热点事件搜索场景的内容维度，同时基于从众心理，进一步刺激用户的参与欲望。弹幕结合事件类型配色来更好贴合热点事件整体环境氛围。
2）情绪抒发-轻互动玩法降低互动门槛
而投票表态+弹幕轻互动组合效果设计，能进一步降低用户交互心理门槛，让用户动一动手指就可以参与其中。在表态/投票抒发情感的同时也可以发弹幕聊聊对当前热点事件的看法，使用户互动情绪表达更充分。
3）惊喜反馈-强化视效打造记忆点
原有设计风格，无法在去世祭奠、颁发勋章等庄重严肃场景精准的表达视觉情感，无互动反馈状态仅有互动前后状态变化。
结合热点场景积极外放情绪及庄重内敛情绪，视觉主要从形/质两个维度进行优化升级，并增加互动反馈动效，同时运营可结合具体事件主题配置，综合提升互动惊喜效果，打造产品记忆点。
视觉层：通过更立体的形态和更丰富的层次质感，更精准的表达情感
动效反馈层：以主图形+辅助元素，通过符合场景氛围的动态效果设计，更充分的表达情感
运营主题配置：在日常反馈基础上，增加运营主题配置层级，为特定主题场景提供定制反馈效果
通过热点环境感知分层呈现、内容组件合理布局拼装满足等设计手段，助力搜索平台以更高效丰富的内容展现形态应对全年3万+热点大事件运营。会场拼装呈现系统的应用场景也在不断扩展，如营销活动、品牌造节等。设计不会止步于此，我们将基于用户需求不断探索深耕，为用户呈现更快速、准确、全面、有温度的搜索热点体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
你是否每天都在使用QQ音乐收听歌曲，但是你有没有观察到QQ音乐的播放页其实藏着很多功能。一个小小的播放页，虽然看上去那么的不起眼，仿佛它的功能只是用来切歌、看歌词和单曲循环，但随着QQ音乐社交化、娱乐化的发展，如今这个播放页已经成为了一个重要的聚合页入口。本期「设计大侦探」的「细节猎人」，为你解剖QQ音乐播放页的37个功能，11种分享方式以及17种歌曲海报。
一、歌曲
「歌曲」是播放页的默认分类，这个分类的功能比较多，所以我把它拆分为「个性化设置」、「听歌场景」、「音乐工具」和「分享方式」四种类型。「个性化设置」和「音乐工具」为用户提供多种音乐偏好的设置，满足各类用户需求，特别是音乐发烧友；「听歌场景」则是根据场景划分听歌需求，用户可以K歌、发起跟听，甚至邀请好友一起听，把听歌的行为社交娱乐化；「分享方式」则是利用腾讯强大的社交生态优势，为用户设计了丰富多样化的分享方式和个性化海报，吸引用户分享，传播，从而拉新引流。
1.1 个性化设置
1.1.1 银河音效
「银河音效」是为了满足各种耳机发烧友对音质的追求。「银河音效」按照重低音、环绕、曲风等类型进行分类，多达数十种，完美解决各类用户人群的需求。平台还推出独家定制音效，支持适配各类品牌耳机、音响和汽车，吸引用户购买VIP会员，激活变现。另外QQ音乐还推出一个「声音实验室」的栏目，包含了智能煲机（帮助耳机快速达到最佳状态）、4D震动和动感闪光，黑科技赋能，让音乐更有趣。
1.1.2 播放设置
「播放设置」是一个为用户提供对音乐播放进行个性化设置的功能，包括无缝播放、淡入/淡出、音量平衡、智能音质增强等功能，可以满足某部分有特定音乐需求的用户。
1.1.3 播放器样式
平台为用户提供了多种播放器样式，包含了黑胶唱机（深、浅）、静态方形、旋转圆形、静态圆形、歌手写真等样式，还支持智能光效和音乐影片的播放背景，满足各类用户对播放器样式个性化设置的需求。
1.1.4 个性主题
「个性主题」为用户提供了丰富多样的主题装扮和头像挂件，包含明星、星座、影视、文艺等各种主题，当用户使用以后，整个QQ音乐的界面风格都会随之改变，这就像以前的QQ空间装扮，一键换肤，个性又时尚，深受年轻用户喜欢。「个性主题」作为为QQ会员独家专享打造的板块，是实现商业变现的重要手段。
1.1.5 收藏和屏蔽
当你喜欢某首歌曲的时候，你可以点击收藏，自动添加到你的默认歌单，这样对用户建立自己的歌单非常有帮助，从而提高用户留存率。而如果你不喜欢它的曲风，或者特别讨厌，你只需要点击屏蔽，平台在播放时会自动跳过，非常方便。
1.2 听歌场景
1.2.1 唱歌
「唱歌」是直接跳转到腾讯的另外一款音乐产品全民K歌，当用户听歌的时候突然想唱歌，那么可以直接进入全民K歌，有效降低用户的流失率，满足用户多场景的需求。
1.2.2 跟听
「跟听」是一个非常有趣的功能，用户进入跟听模式以后，可以邀请朋友加入自己的播放列表，也可以跟听其他用户的歌单。「跟听」为听歌增加了社交互动的属性，目前功能还比较简单，但让听歌的场景变得有趣、好玩。
1.2.3 一起听
「一起听」是一个社交互动式的听歌功能，用户可以邀请好友一起听歌。当朋友进入后，还支持发表情，就像一个聊天室。这就像是专门为一些年轻小情侣量身定制的听歌场景一样，平台还会为用户生成听歌记录，比如一起听歌的时间，听过的歌曲等，甚至还会生成一个心动等级，激发用户为了更高等级使用这个功能。
1.2.4 驾驶模式
「驾驶模式」非常简洁，系统会自动检测用户听歌的环境自动切换。这个功能的设计充分考虑了用户驾车时候需要换歌的场景，提供了语音找歌、个性电台、我喜欢的歌单、最近播放和电台，省去了用户开车时候不方便换歌的痛点，用户体验非常友好。
1.2.5 评论
一边听歌一边看评论已经成为现在年轻用户非常喜欢的听歌方式，在评论里，可以找到这首歌很多感人的故事，引发共鸣，勾起回忆。用户进入评论后，除了可以看见其他用户的精彩评论，还可以进入歌手的扑通小组（类似贴吧），和其他歌迷一起交流，从而增加用户时间，提升用户留存率。
1.3 音乐工具
1.3.1 片段播放
「片段播放」提供按歌词选和按音轨选两种形式，用户可以自由裁取需要循环的片段反复收听。这有点像过去我们使用MP3或复读机收听歌曲那样，功能虽然简单，但可以满足某些特定场景使用。
1.3.2 倍速播放
用户可设置歌曲播放的倍速，支持0.5x到2.0x播放，这个功能在听书的时候特别实用，非常方便。
1.3.3 定时关闭
用户在音乐播放中可开启定时关闭功能，比如15分钟、60分钟等，这个功能在助眠的时候非常方便，当你慢慢睡着的时候，音乐也随之关闭。
1.3.4 设备投放
「设备投放」就是支持音乐投放到电视等其他电子设备，当一群朋友在家里为你过生日的时候，你可以把你的歌单直接投屏到电视，让大家一起陶醉在美好的音乐夜晚。
1.3.5 设置铃声
当你觉得某首歌曲特别好听，想把它设置为铃声的时候，你不用去应用市场搜寻其它工具，你只需要进入「设置铃声」，你可以自己截取喜欢的音乐片段，系统也会自动智能截选一段精彩的铃声。在右上角提供了详细的铃声设置流程，教程非常简单。其次QQ音乐还有一个铃声专区，里面提供了海量的铃声选择。
1.3.6 查看曲谱
查看曲谱是一个非常实用的功能，对于很多音乐爱好者来说，当在某个夜晚抱着吉他想弹奏某一首歌曲，你只需要打开「查看曲谱」，里面包含了智能吉他曲谱、智能尤克里里曲谱以及五线谱/六线谱/简谱。进入曲谱后，你还可进行自由编辑，比如编辑和弦、更改时值等。这种实用不起眼的小功能，对提升用户的满意度非常有帮助，可以抢夺用户时间，降低用户流失率。
1.4 分享方式
1.4.1 分享给好友
用户可以把歌曲分享给微信好友、QQ好友，还可以通过私信方式分享给QQ音乐好友。
1.4.2 设置听歌状态
利用腾讯强大的产品生态，用户还可以把听歌状态同步到微信和QQ，这不仅可以满足年轻用户个性化的追求，还能通过外部触发拉新引流。
1.4.3 分享到社区
用户可以把歌曲分享到朋友圈、QQ空间、扑通动态和新浪微博，吸引用户分享传播，拉新引流。
1.5 歌曲海报
1.5.1 音乐卡片
「音乐卡片」为用户提供了8种精美的风格，有复古怀旧的磁带、CD风格，有黑白胶唱机风格，还有专属的VIP会员专享风格。卡片内容包含歌曲的封面、歌名、歌手、音乐指数和过去24小时收听人数等信息，目的是为了吸引更多的用户扫码听歌，其次VIP会员卡片还加入了QQ音乐豪华绿钻音乐卡片标识，彰显VIP会员地位。
1.5.2 歌词海报
在以前磁带、CD时代，抄歌词是广大音乐爱好者最美丽的回忆之一，「歌词海报」就是利用这样的分享场景，支持用户选择任意歌词，然后生成个性化的海报。「歌词海报」不仅提供了海量的背景图片，还支持用户自己上传，甚至还提供歌词字体选择，吸引用户主动分享。
1.5.3 高光视频
「高光视频」就是一段30秒的音频，提供了6个精美的模版，用户保存到手机后，可以短视频的形式分享到视频号、朋友圈等平台，和静态的海报不同，这样的传播形式更能引起其他用户的关注，从而拉新引流。
1.5.4 微信状态卡片
「微信状态卡片」为QQ音乐绿钻会员专享，为会员提供了多种精美的状态卡片，用户需要选择两行歌词，然后才能生成。这样个性化的设置同步到微信状态后，更能引起追求个性的年轻用户关注。
1.5.5 歌词视频
「歌词视频」相比高光视频，功能更丰富，首先不限制用户选择歌词数量，其次提供了风景、科幻、自然等不同主题的视频模版，而且还支持用户自己拍摄。用户还可以选择音乐播放的起点，添加视频动效和滤镜。通过这样短视频的方式吸引用户分享到视频号以及更多的短视频平台，传播拉新。
二、歌词
3.2.1 弹幕
听歌弹幕就像视频弹幕，用户可以边听歌边发弹幕聊天，这是一个年轻用户非常喜欢的功能，用巴甫洛夫效应来解释，这就是用户对源源不断弹出的弹幕充满了期待，从而增加了听歌乐趣，提升用户使用时间。
3.2.2 歌词动效
「歌词动效」为用户提供了多种个性化模版，满足年轻用户的各种个性化需求，其次也是实现商业变现的方式之一，用户需要开通SVIP才能享受更多精美的动效模版。
3.2.3 歌词设置
用户可以调整歌词的字体大小、简繁转换、调整进度，还可以制作歌词海报进行分享。其中歌词海报支持静态图海报和视频海报制作，还提供了多种精美模版，吸引用户分享传播。
三、推荐
3.3.1 歌曲信息
用户可以查看歌曲详细信息，包括歌手、专辑、发布时间以及详细的制作详情。
3.3.2 音乐指数
「音乐指数」是一个非常创新的功能，QQ音乐根据用户听歌的次数、搜索的次数制定了一个官方的指数评级。用户可以从这个页面看到歌曲的实时数据，包括今日、昨日音乐指数、全站排名、上升趋势和歌曲成就等。
3.3.3 相关推荐
根据歌曲的曲风，平台会推荐相关歌曲，这有点像私人电台；其次平台还收录了歌曲的各种演绎版本，这真的非常方便，你可以轻松切换自己喜欢的版本；最后为用户推荐包含此歌曲的歌单、节目和视频，彻底抢占用户的时间。
四、总结
QQ音乐的播放页设计，可以说把腾讯系产品设计的风格发挥得淋漓尽致。为用户提供各种丰富多样的个性化设置和音乐工具，播放器样式、银河音效、个性主题、歌词动效、曲谱、铃声，只有你想不到的，没有QQ音乐无法提供的。然后当你想要享受更多特权，你就需要付费开通VIP，这简直就是腾讯系产品的杀手锏，准备了一千种方式和场景让你很自然的掏腰包。
其次把社交基因发挥到极致。跟听、一起听、弹幕这些都是为了活跃度最高、消费意愿最强的小情侣、小年轻用户准备的。也许有部分用户会质疑，我从来不使用这些功能，但作为一个月活超过2亿的平台型产品，QQ音乐拥有众多各年龄阶段的用户，这就像上期我们分享的《顺丰速运为用户准备了18种寄件方式》一样，看似多余复杂，但其实是为了满足各类用户人群的特定需求。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：廖尔摩斯 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这里指的页面之间的呼吸感，比如模块之间的间距，栅格的间距等，在2020年之前很多App在设计侧边栏的时候大多都是在留12px（1倍图）的间距，但是随着现在业务的不断拓展， 产品内可能会出现很多业务模块我们如果继续留12px就会造成没有张力。
随着ios15系统的到来，苹果设计系统也对页面进行了大间距、大留白的定义，因此我们未来设计时可以适当的加大页面的侧边距。
一般在页面首屏无任何操作时顶部都会具有标题，当用户进行操作时候，我们可以进行缩小或者隐藏，这样的话在交互过程中增加页面展示空间，并营造出呼吸感。
我们在改版或者优化页面时，都会卡片的角度，不同的度数能传达出不同的感觉，像直角卡片传递的感知正向为：严谨、沉稳、高级，反向：危险、尖锐，而圆角则传递出柔和、安全、轻量，不同的产品在定义风格时需要慎重考虑，这与后续的设计联动较大。
直角卡片风格适合金融理财、高端制造、珠宝方向等价值上较高的产品
而圆角卡片大多能兼顾很多产品风格，只需要调整圆角的大小，如餐饮、工具、教育等等，例如产品是针对的儿童圆角可以进行加大处理。
人是视觉动物，UI设计中的图像可以分为两种，照片和插图，在设计中我们可以尽可能的使用插图传达信息，插图的视觉效果大于纯文字和图标，并且插图的信息传达效率也大于文字。
动效可以在信息传达上更加直观，并且能够展示出产品页面之间的细节，一个好的动效在情感化上也可以触动人心，在设计的过程中如果可以添加动效，我还是建议使用一些微动画去表现，如加载、空状态等无聊的页面，就可以通过动效方式减少用户枯燥的感知。
用户越接近里程碑（例如完成任务、达到目标等），他们就越快地朝着目标努力
心理学家曾经做过个有趣的实验，把老鼠放入迷宫里面，出口放置老鼠爱吃的甜点，结果发现，越是接近目标老鼠跑的越快，人类也有这样的现象，还记得我们上大学时都会测跑步时长，每当剩最后几百米时同学们都会疯狂冲刺，这就是所谓的目标梯度效应，越接近目标动机就越强，反之如果让人感觉距离目标很遥远，就很难有动力。
在互联网产品中拼多多就把目标梯度效应应用的非常成功，如果我们在拼多多上购买商品时到结算完成后会弹出一个分享领现金的弹窗，而这个弹窗上的内容展示是通过进度条的模式告诉用户你还差百分之几就能够领现金，当用户看到这种情况时大部分会选择分享，努力的完成最后百分之几，相信大家都收到过父母好友等分享的砍一刀链接，在这个过程中拼多多就通过了物质的刺激，运用目标梯度效应刺激用户产生分享行为，从而达到裂变的目的。
下图中的飞书官网，banner处就使用了梯度效应，告诉用户还需要多久到达目标，不需要用户在进行滚动或者点击，对广告来讲用户在得知目标的时候会耐心等待，从而避免用户直接跳过
当然也会出现弊端，当频繁去利用用户的目标梯度效应时，并不能帮助用户达到目标，久而久之就会对产品失去信任，会损失用户的忠诚度。
它指出计算机与用户的互动速度都不需要双方等待时，效率就会提升。
1979年IBM的，Walter Doherty提出系统响应时间每减少一秒，用户进行下一次的操作思考就会降低，这种现象与个人注意力的持续时间线相关，在1979年之前计算机的处理性还处于相对较慢的阶段平均高响应时长为2s，因此在1979年之前用户普遍认为2s的时间是最有效的时间，而1979年后计算机性能方面迎来提高，系统响应时间降到2s一下。
在1979年IBM公司的Doherty和他的团队通过3年的时间在1982年就《系统响应时间对经济价值影响》的课题进行研究，研究的主体主要以用户操作系后，响应时间作为变量，对多维度产生结果的影响。
结果发现，计算机处理请求所用的时间与用户的响应时间高度相关，即计算机响应时间越短，用户的思考时间就越短，而其中一组研究数据就显示一现象，一旦系统响应时间超过400ms左右时各项指标数据会产生较大的波动，于是IBM公司就此提出研究结果系统响应时间低于400ms效率就会提升。
在产品设计中多尔蒂阈值如何运用，我们要明白400ms是个范围值并不是一定要卡在400ms，而是在响应时间低于400ms范围，我们可以理解为是一个上限，那么有上限就有下限，响应时间并不是越快越好。
IBM在系统响应时间规范中强调了‘过渡时间’概念，虽然越快越好，但是用户在使用产品中需要理解结果和过程，这里可以理解为有效延迟，像我们在做UI中涉及的一些弹窗反馈这类通知形的元素，在做交互时间时对于用户越快越好，像一些轮播banner需要用户手动滑动的时候同样是响应越快越好，如果延迟超过400ms用户就会感知到明显的卡顿不流程。
而《过渡延迟》则需要在一些具有明显目标的场景进行使用，如我们做UI的过程中涉及到的TAB切换，这里则需要刻意的延长时间，目的是帮助用户感受到页面之间的变化，反而会感知上会更加流畅，对于用户而言有助于用户思考：我点了什么、结果是什么。
小场景内：过渡时间100ms左右
中型场景：过渡时间250ms左右
大型场景：过渡时间350ms左右
系统响应时间的目的是进行关键指引，因此并不是越快越好，多尔蒂阈值是一个范围值，而在这个范围内如何利用则需要根据具体的场景、产品目标、用户目标等多维度思考
户的大部分时间都在浏览其他网站或app，因此用户希望你所设计的网站或app能够像他们已知的网站或app一样运作。
雅各布定律是一个描述用户学习的定律，降低用户学习成本要求尽可能依据用户既有经验进行任务和流程设计。
例如在UI设计中我们强调一致性，从大的页面、组件到小的一个按钮元素，我们都要做的样式和交互的统一，这里除了说要保持一致性才去规范页面组件，还有一个就是因为我们要遵循雅各布定律，相似的内容、相似的操作方式能够让用户体验你的产品时更快的适应设计模式。
这里举个我工作中的例子，在去年的时候我帮助团队另一位设计做一个牛客web端的产品改版，由于产品的业务错综复杂，一个网页端承载了招聘、学习、社交、工具等多项业务。而整个产品的设计风格还还存在16年之前，这次做跨时代的改版对于当时的我们而言也是比较棘手的，因为市场上并没有像我们的产品这么业务复杂，每一个业务板块单独来拆解都是一个大的方向，并且竞品也是很多，用户群体来讲分层也是比较严重，像使用招聘业务的用户并不会去社交或者学习刷题。
因此我们当时就想到雅各布定律让用户决定产品的风格，本着这个思路我们去进行用户问卷调研，通过对用户日常使用什么网站的频率次数进行调研，通过对用户日常使用的网站进行统计，找出数量最高的前三位，以此再针对性的调研设计风格和形式，最终确定我们自己的产品风格，这个方法也是当时我们为了避免不同业务的用户群体对新风格的接受程度，最后用户的反馈也是符合我们的预期。
雅各布定律告诉我们在进行设计时，要延续用户已经习惯的认知，其次从产品自身业务出发进行细化，像一些同类型的产品，他们无论从功能还是设计上都大同小异，因为对于用户来讲，用户对这个行业的产品已经具备一定的认知，例如做电商的产品去用户做金融产品的思路来进行设计产品，那对于用户无疑就是增加认知成本。
像下图中的医疗软件，从功能和板式上首屏都高度相似，三个核心功能icon，紧接着是各个科室的入口，然后就是一些内容推荐，而右边的音乐产品又是另一种结构风格，试想一下如果我们目的是在去找医院，结果看到了音乐类产品的布局结构，这就打破了认知，虽然有创新但是在用户认知成本上就会非常大。
最后总结一下，用户会把使用其他产品的习惯转移到另一款相似的产品，我们做设计时金尽可能的避免非必要的创新，这样会让用户更快的适应产品。
霍桑效应是一种理论，它描述了一种反应性，在这种反应性中，个体根据被观察的意识来修改他们行为的一个方面，所以又被称为被“被试效应”。
霍桑是20世纪20年代位于美国芝加哥的一家电工厂，虽然设备先进、福利优越，但是工人们还是不满意，生产效率低下，为了研究这一现象，美国科学院专门进行了工作条件、设计会因素和生产效益关系等系列研究，最后发现是实验中效应，称为霍桑效应。
你是否有过这样的经历你们公司的大boss或者是某位重量级领导人物总是会时不时得“经过”你们办公室，搞得所有人都迅速进入战备状态，当有人要造访你家时，你是否会确保房间处于干净、整洁状态，并且会确保孩子们在客人来访过程中都展示出最佳状态，这些行为都是霍桑效应。
在产品设计时利用霍桑效应就能够激起用户的效率和产品数据，比如产品签到流程，在用户进行累计签到时给予特殊奖励，在连续签到过程中给出鼓励的话术，根据霍桑效应给予人们足够的尊重或者让人们感受参与其中会提升明显的效率，在签到过程中给予鼓励能够让用户感受到尊重，让产品更加人性化。
霍桑效应中讲到从旁人的角度，善意的谎言和夸奖真的可以造就一个，那么在产品设计的维度来思考这句话，我们在设计中是不是可以去不定时的夸奖用户呢，比如下面中keep在新用户进行一项运动结束后，会弹出称成就勋章给予支持鼓励，提升用户自信心和参与感
当用户由于先前投入的资源（时间、精力、金钱等）而继续做某事时，他们会体验到沉没成本效应。
沉没成本，是指已经付出且不可收回的成本，在日常生活中，沉没成本可以是已经花费的金钱、等待的时间甚至是付出的感情等。
比如我们去电影院看电影，过程中发现电影内容过于无聊、枯燥，大多数还是坚持看完，他们内心的想法是钱都花了怎么也要看完，在比如用户购买88元课程，赠送各种辅助服务导师指导、问题答疑、课后作业等服务，对于企业来讲这些赠送的服务就是对冲用户购买88元课程的沉没成本，既利于销售又增加企业的信任感。
而在产品设计中，不同的用户在不同的场景中也都会遇到沉没成本的抉择，帮助用户减少甚至隐去抉择、降低厌恶心理在一定程度上不仅提高用户体验，甚至能提升产品数据。
人们总是会对已知的损失耿耿于怀而造成判断的偏差，这来自于每一个“非理性人”本能性的恐惧，每个人损失厌恶，相对于收益所得往往更在意损失。试想当我们无意中获得一笔百元的收益时，我们因此兴奋的时间可能也仅限于当天甚至更短；而若自己不小心掉落一百元或因为决策失误损失一百元费用时，则将会捶胸顿足好长时间。
在产品设计中运用较多的是电商产品，例如京东的购物车中除了展示商品信息和价格外还会把赠品铺列出来，如果是多件商品，还会帮助用户计算好预计可节省多少钱，这些赠品和节省的钱都是沉没成本，用来刺激用户进行下单消费，提高平台的活跃度。
除此之外社交产品中也可以在情感方面减少用户的损失厌恶感，例如在一些直播产品中当用户进入直播间在聊天区域会通知主播，而同一时间用户退出直播间则不会提示，这个过程主播的感知几乎为零，不通过仔细对比很难发现，这样的手段对于产品而言能让主播在直播的过程中增加积极性，避免情绪上低落的表现，同时也能够帮助产品提升信任度。
上面说的是正向的沉没成本，而反向成本效应也可以帮助产品带来信任感，增加用户记忆提升用户增长，如下图中的京东的商品页面，用户下单后并不直接扣款，当7天过后用户没用进行售后退货等行为，平台将自动扣除，
在这7天内用户可以进行随意退款。
其实很简单，心理学目的是了解用户真实的想法，希望设计师在注重页面美感的同时也要注重用户的使用，做产品设计最终目的是为了给公司带来价值，给公司带来价值的前提是要给用户带来价值，这就需要我们去了解心理学当然不需要精通，每个心理学如果要去吃透他，需要耗费非常大的精力，对于设计带来的帮助不成正比，所以只需要了解各个心理学法则在产品中如何应用就OK了。
本次继续分享10个心理学的知识，将从心理学的背景定义、重点解析、设计运用、详细案例4个维度进行深度解析
简述定义：保证用户在使用流程中的高峰处和结尾处保持较高的愉悦体验
简述定义：用户对未完成的事情、被中断的事情记忆更加深刻
简述定义：基础的信息组织原则，主要提升用户获取信息的效率
简述定义：用户会更加珍惜已经获得的服务、物品等
用户同时思考两件事情以上时，思考效率和准确性会下降，做事情难以专注。
用户在使用一个产品流程时的高峰体验和结尾体验。
用峰终法则提升用户在整个产品上或某个功能上的体验，需要先对用户在整个产品上或某个功能上的使用行为与想法进行分析，并绘制出用户的情绪曲线，根据情绪的峰值节点和使用流程的结尾，这两个“关键时刻”，进行体验上的重点打造。
2002年的诺贝尔经济学奖得主、美国心理学家丹尼尔•卡尼曼经过深入研究，发现人们对体验的记忆由两个因素决定，即高峰（无论是正向的还是负向 的）时与结束时的感觉，这就是“峰终定律”。关于峰终定律有这样一个实验：让两组人员听相同时间的强噪音，然后一组停下来，另一组接着再听一段时间的弱噪音，就实际遭遇来讲，后一组比前一组受了更多的折磨，但是听到更长时间噪音的后一组的痛苦指数却要比前一组低很多，原因就是对于两组人员来讲，结束时刻的噪音给他们留下的感受最为深刻，因而他们的痛苦指数主要是由噪音结束时的刺激程度所决定的。在另 外一种情况下，令两组人员听相同时间的噪音，其中一组的噪音强度较高，另 外一组的噪音强度较低，但是其中某一时刻听到了极其刺耳的超强度的噪音， 结果就是，后一组的痛苦指数要高于前一组，尽管就总体而言，后一组所听到 的噪音强度要低许多。
这体现的就是感受过程中的“高峰”一刻的决定作用。依照峰终定律，高峰和结束时的体验主宰了人们这段感受的性质和强弱的 程度，而跟感受的总的比重以及体验时间的长短无关。也就是说，如果在一段 体验的高峰和结尾，体验是愉悦的，那么对整个体验的感受就是愉悦的，即使 这次体验更多的是痛苦或不愉快的感受。
用户根据体验的高峰和结束来判断产品体验是否好坏，并不是根据用户使用产品的每一个节点感受的平均值来判定，我们可以理解为结果比过程重要。
就像我们看电影时，一个电影2小时前1小时都枯燥无味，突然中间有5分钟让你的情绪上升，此时你可能觉得这个电影还行，至少让你达到了情绪高潮，当你继续观看时电影片段又变得枯燥无味，突然最后10分钟和结束时出现了电影彩蛋，并且这10分钟的内容特别符合你的胃口，这时候你就会出现一种“嗯，这个电影不错，结局挺好”这样的心理暗示，此时会发现接近100多分钟的枯燥内容都被你忽略掉了，或者你也记得但是你默认了电影90%的枯燥。
一些app里在用户购买成功后，将已购商品以一种具有仪式感的收藏卡形式展示给用户，给用户惊喜的体验，在盲盒星球内购买盲盒成功后会弹出卡片，把用户获得感拉满，在网易云音乐直播间内如果是新手用户就会弹出新人见面礼，通过视觉的表现形式把氛围拉拉满，当然还有一种反向峰值，当有一些产品进行抽奖时，如果用户未中奖会弹出情感化弹窗，对用户进行安慰降低用户的挫败感。
上面讲的偏向于业务弹窗，还有一种是功能性弹窗， 当用户使用某个产品流程时，这个流程可能通过多个维度才能到达最终的节点，在最后用户完成操作时通过情感化弹窗进行提示，又或者在版本升级时需要引导用户进行更新，使用情感化的表现，能够将产品与用户产生情绪共鸣，增加趣味性，提升体验。
当用户使用产品去完成目标时，突然中间步骤出现网络波动、网络断开等不可抗拒的因素，此时在页面中添加一些情感化设计，会缓解用户焦虑情绪，甚至可以在空状态中添加动效来提升趣味性。
近期在工作中做了一个直播项目，其中的一个功能就涉及到直播抽奖，因为产品奖品比例较多且轮数也多，用户的中奖几率也比较高，所以导致用户在中奖后基本就退出直播间，因此在做设计的过程中为了避免这个问题，我在中间弹窗上做了优化。
通过情感的中奖弹窗形式来强化用户的感知度，在直播过程中提升兴奋感，提升用户观看的直播的欲望。
在讲一个案例，去年我们做一个刷题功能的体验优化，用户在刷题场景下会面对几十道甚至上百道题目，整个过程非常漫长，并且旧版的功能交互上并没有展示总共还有多少题的这个提示，用户在刷题过程中会非常焦虑，为了解决这个问题，通过这三个手段改进，1）我在刷题过程中以进度条的形式去实时告知用户刷题进度，减少用户焦虑，2）用户在最后几题的场景中会添加鼓励话语，强化用户峰值，3）在结果页面为用户展示直观的数据变化，强化用户的满足感，同时激励用户进行持续性刷题。
用户只记得使用过程中体验高的场景和结束时的场景。
无论是在交互还是视觉上我们都可以利用峰终定律帮助用户达到好的使用体验。
蔡格尼克记忆效应（Zeigarnik effect；又称蔡加尼克效应、“契可尼效应”） 是一种记忆效应，指用户在完成一件事的过程中被打断，他会持续关注这件事，记忆更加深刻。
简单理解就是用户对没有完成的事更关注。
该效应由苏联心理学家蔡加尼克在20世纪20年代提出，有一次她在酒馆用餐，遇到了一位记忆力过人的服务生，她不用笔记就能记住所有客人下单的菜肴，奇怪的是当菜肴上齐之后，蔡加尼克再次询问服务生，她竟然完全不记得菜单了，这就是由于她的工作完成之后，紧张状态消失，记忆水平随之下降了。
我们生活中也会遇到相似的场景，考试我们都经历过，在过程中某一道题没答上来，在答后后面的时候脑子里一直会想那道未填的题，而前面填过那么多题，我们却不容易记住。
看综艺大家经常都知道，看到关键节点的时刻总会有广告插入，但是我们又舍不得换台生怕广告结束，错过了什么关键内容，广告商其实就是摸透观众心理，让你又爱又恨的看广告。
生活中还有很多场景，像晚上刷抖音一直想着刷两条就赶紧睡觉，一抬头发现凌晨了...打游戏赢一把就不玩了，但当到了赢一把时一看时间过了好几个小时...小时候买方便面集里面的卡片....
为什么我们会对未完成的工作事项记忆深刻？
假如我们把事项分为三类：1）我们允许其正常完成，2）我们再完成的过程中打断，过一段时间在接着进行，3）在完成的过程中打断，并且不允许完成。
稍加思考其实会发现，正常完成任务后是没有任何心理负担，完成事项的过程中被打断，这时候人的心理的会时刻记忆这件未完成的事项，就像我现在写这篇文章，如果某个段落我没写完去做一些其他事情，我就会时刻想着我文章的小段还没有完成，那么假如我在写文章的过程中，被打断并且不允许我写后续的文章，我的注意力可能就会完全在写文章这件事，我要去想怎么才能继续写，或者怎么才能让我继续写，这恰恰验证了人们对于未完成且无法继续的事项心理负担是最重的。
在一些教育产品或者签到产品中都会有一些进度型的提示，像下面“开言英语”的课程报名页面，在侧面添加了进度条，时刻告知用户当前进度，并且在进度末端提示未到达节点，对用户进行心理暗示，引导完成未来事项。
在新用户注册页面时很多产品会收集用户基本信息，通常会使用分段形式把信息分开，减轻用户心理负担，并且在完成任务时会给用户明确当前进度，同样在一些其他场景例如认证信息场景中，哪怕用户中途因为其他时间被打断，回来后也能够很快的定位到未完成事项。
很多日历产品中会添加代办事项的功能，这个功能就很好的利用了《蔡加尼克效应》有些用户会通过在日历下面添加每天的计划以此来督促自己完成，如果某一天的事项发现没有完成就会有很重心理负担，哪怕到了第二天也会回过头来把错过的事项给完成，像我经常就会使用《滴答清单》来督促自己完成什么事情，如果有哪一天的事项没有在清单上打上勾，我可能好几天都在关注这件事。
前几个月的时候我在公司做了一个新用户注册登录的流程，在过程中我主要是负责UI和UX的工作，在这个过程中就使用到了蔡加尼克效应，当时接到的需求是公司战略目标扩张，需要在移动端更针对性的收集新用户信息以此进行内容推荐，提升用户留存。
在得知业务目标是提升用户留存时，我就思考设计的发力点，通过倒推的方式去一步一步拆解，在这个需求场景内，用户留存取决于内容推荐是否准确，内容推荐准确度取决收集的用户信息是否准确和用户信息填写率，用户填写的准度度需要产品侧通过内容的方式进行发力，而如何让用户信息填写率增长则是设计目标。
设计目标已经很明确了，那么如果去优化呢，当时我是先把旧版的问题给拆解出来。
1、交互上旧版把用户信息都堆积在一个页面上，并且对于业务目标上很多信息是无效的并且还在视觉核心位置，如用户头像、用户昵称等这些信息对于内容推荐没有任何作用。
2、视觉上没有核心聚焦区域，用户进来后会措手不及不知道从哪开始下手填写，并且按钮的样式也不够直观对用户造成不可点击的假象。
首先从交互上开始优化，因为会新增很多信息填写内容，所以为了避免用户在同一个页面看到很多的表单，把交互流程拆解，按照业务维度把表单拆分成多个页面，在每个流程内给用户传达出这个填写是个简单的事情，从而避免用户从第一步就抗拒。
这里面还涉及到【沉没成本效应】当用户在填写第三步四步的时候会因为前面已经填写了那么多信息花费了时间并不想放弃，沉没成本前面几篇文章讲过设计心理学-5种用户体验法则，这里不详细讲了，其次就是【蔡加尼克效应】用户在每个页面看到当前进度的时候就会产生必须完成的暗示，然后这个心理暗示就会持续推动用户完成剩下的内容填写。
后期我们针对旧版和新版的优化做了可用性测试，结果上也非常正向，新版的步骤虽然被拉长了，但是每一个步骤都比较简单用户填写起来没有门槛，所以填写效率上大于旧版，详细过程之前有复盘过一篇文章感兴趣的可以了解一下注册登录可用性流程最后用户的信息填写率也是非常有效的提升。
上线之后数据也是正向增长，当然不止这一个场景才能用到蔡加尼克效应，比如像一些用户成本要求比较高的健身打卡、学习打卡等任务可以使用一些阶段奖励来激励用户持续完成。
五架帽理论简称为LATCH原则，它定义了在好的组织性信息才能提升用户体验，使设计更易于理解、灵活和可维护。
LATCH的概念最初由Richard Saul Wurman在他的设计原则和设计模式中提到，后来在他的《信息架构》的书中重新定义了五架帽概念。
LATCH即是Location位置，Alphabet字母，Time时间，Category类别和Hierarchy视觉层级组成，这五种方式目标都是通过高效的信息呈现来提升用户体验。
理论上讲的是通过位置来组织信息，其实比较好理解，我们可以理解为你本人所在位置是一个坐标点，所有的信息形成都是围绕你的坐标点来组成的。
例如地图软件中你的当前位置不断变换，手机屏幕中不断加载出新的地标建筑，在一些游戏场景，例如绝地求生，随着你的位置变换，不同的建筑环境、人、道具等都会随着在你周围出现，当一些信息组成对用户非常重视时则会优先出现，比如驾驶过程中当前位置不变，地图会优先加载道路信息，其次是建筑信息（网络波动的时候比较明显）。
并且随着VR/元宇宙等技术，基于位置变换组织信息已经是非常重要的一环。
总结：通过位置结合时间能够给用户展示高效率的信息
与字面意思一样，按字母顺序排列信息，当数据量很大时，它是组织信息的最佳方法之一，在产品应用中常见的就是像通讯录、目录等能够快速的定位到信息，通过这种方式延伸出其他场景的排序方式，例如电商产品中的侧边分类，就是利用英文字母的逻辑把商品类别进行分类，在一种就是按照时间的维度进行信息分类。
当信息具有相同性需要排序的时候，使用分类的方式能够最快的提升用户筛选效率，在我们生活我们每个人都有分类的习惯，如电脑桌上会放置一些小物件或电子设备相关的，衣柜里统一都放衣服每一层放不同季节的衣服，每当我们想使用到某件物品时第一时间就能定位到它的位置。
在产品中使用最多的是分类和导航，例如同样的鞋子可以用品牌分类，也可以按照季节分类或者性别分类......音乐可以用流行、摇滚、民谣等等分类......
类别是该理论中比较关键的一环，它定义事物按照分类的方式能够让用户快速的查找信息组织。
上面位置、字母、类别都是提高信息查找效率，视觉层级与字面意思相同，当我们满足基本的查找效率后可以使用不同的视觉层级来凸显重要性。
例如在产品设计中可以从颜色、大小等方式来满足我们想要的层级梯度，让产品/用户的核心价值快速的让用户察觉到。
上面只是对每条规则单独拆出来解析，实际中它们是可以共存的，如位置结合时间能够让用户第一时间看到重要信息，类别结合字母就出现了我们看到的通讯录，类别结合视觉层级能够让分类更加重要等。
五架帽理论最终目的都是为了提升用户使用产品时的信息效率，它的五条设计规则也是在产品设计中的必须要遵守的，为什么说要遵守，因为设计中我们可以仔细回想下，基本上每一个页面的诞生都与这五条规则相关，一但违背，这个页面的可用性或者美观就会有所缺失。
当一个物品用户没有拥有时，对他的价值感相对较低，当用户拥有时会高估和珍惜物品的价值。
心理学家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 对禀赋效应进行了实验，并在他们 1990 年的论文“禀赋效应和粗略定理的实验检验”中展示了这一概念，这一现象可以用行为金融学中的“损失厌恶”理论来解释，该理论认为一定量的损失给人们带来的效用降低要多过相同的收益给人们带来的效用增加。因此人们在决策过程中对利害的权衡是不均衡的，对“避害”的考虑远大于对“趋利”的考虑。出于对损失的畏惧，人们在出卖商品时往往索要过高的价格。
比如我们过生日收到的礼物，在没有得到这件礼物之前，我们对他的价值或者吸引力往往没那么高，但是当这件礼物通过生日的形式送给你的时候，他就具有一定的意义并且这件礼物是属于你的，假如此时有人花市场价购买你的礼物，内心更多的想法是不舍得卖，因为这件礼物已经属于你了。
讲个自己真实的故事，我自己是对一些财富手串、事业手串等等相关的东西不感兴趣的，哪怕他很便宜我也不会去买，但是有一天女朋友从雍和宫帮我求来一个财富手串并且还是开过光的，以后我就每天带着这个手串形影不离，有一次放在某个地方找不到了，当时我就很焦虑，感觉自己损失了很大一笔钱，这个其实就是禀赋效应作祟，因为这件东西通过很特别的方式才到我手里，我已经认定这就是我的东西了，所以他对我的价值是极其高，哪怕我之前对这种手串不感兴趣。
最常见的产品设计场景中就是分享的场景，例如我们常见的一些分享都是底部弹出一些第三方链接方式，那么想一下这样的方式分享率极低，我们可以利用禀赋效应去强化产品的价值感，在学习产品中把学习数据融入分享页面中提升让用户感受到学习的价值增加分享欲望，在旅游产品中一般都会记录用户的旅游足迹，此时把用户经过的城市以地图的形式融入在分享页面中，激发用户的旅游价值，禀赋效应在分享产品中不止这些玩法，商品收货时、贵重物品分享时等等。
诱导即是向用户赠送免费的东西，通过这种方式提供免费试用服务或者是一些优惠礼包等，当得到免费服务或者优惠时由于禀赋效应用户可能会去进行付费或者深度使用，让用户感受到这是它自己的东西，对产品的价值感加倍。（但是我感觉这种方式效果提升不是很明显，但是确实可以利用这种心理去尝试可能会有意外收获。）
诱发禀赋效应的另一个重要因素是用户的主人翁意识，在一些产品中会有一些个性化的设置，用户可以根据自己的喜好去进行设置，这样可以让用户与产品产生价值联动，比如谷歌浏览器的背景和同步功能就是我一直使用的原因，虽然其他浏览器也有同样的功能，但是在互联网初期谷歌可是用这个功能吸引了不少用户，在比如app中常见的换肤、换色等功能。
有正向的也就有反向的，反向指的就是厌恶效应，人们对自己所拥有的东西更加珍视，所以对于损失所表现出来的厌恶要比获取收益表现出的愉悦强烈得多，我们往往会对所损失的东西更为敏感，有心理学家实验过，股票下跌的损失要用双倍的涨幅才能挽回心理痛苦，在产品中常见的就是会员试用服务，当我们给用户7天或者30天的试用期后，时间一到大部分用户都会选择付费，因为他们默认这些服务已经拥有不愿损失。
情绪和社会会影响一个人的决策，因此根据行为经济学，当我们了解这些因素时，我们可以构建设计来帮助用户做出可能的最佳决策，产品设计师可以通过使用价值赋能、个性化、免费试用等简单方法，利用这种效果来提高产品的留存率和渗透率。
指的是用户同时思考两件事情以上时，思考效率和准确性会下降，做事情难以专注。
我们日常工作的时候，如果好几件待办事情同时需要处理，我们自己也是很难去说专注某一件事完成，做设计师的都知道，在设计时如果被别人打扰很容易打断设计思路，我们应该都经历过好不容易沉浸下来去做某个需求，忽然中间有个紧急的需求插过来让我们完成，当我们把紧急需求完成后，再去做被打断的需求发现思路被打断了，这就是《干扰效应》的影响。
人们在处理事情时大脑会给传递出目标信号，根据人的本能认知进行操作，处理收到的反馈信息，最后在反馈给大脑，当多个事情需要处理时，大脑需要同时传送不同的目标信号，身体的各项部位进行执行，这时候我们往往跟不上大脑信号，因为《想》和《做》是跟人能能力反应相关。
人们处理事情就像电脑运行软件一样，同时运行多个软件时，电脑的效率就会出现发烫、卡顿等问题，人处理多项事情时效率就会变慢，无法专注某一个事情。
看下图中这两组金刚区图标，首先第一组的问题是虽然颜色很丰富，但是没有进行很好的分类，增加用户的思考时间，干扰性太大。
再看第二组金刚区图标，虽然很精致且有食欲，很符合外卖平台的调性，当然有好也会有坏，这么多复杂的图标同时出现，当用户目标很明确的时候，这么多的图标就形成了信息干扰，用户需要配合文字才能减少筛选效率。
下面这组某生鲜的金刚区也是同样的问题，虽然把商品实物图作为信息传达的元素，但商品过于复杂，在移动端屏幕上很难看到细节，这需要用户对商品的认知非常明确，例如一用户来卖水果，如果是第一次使用这个产品可能很难通过图标来找到入口。
我们看下面的美团首页，他的金刚区入口有15个，他们的处理方法在结构上是进行了层级区分，把重要切频率高的5个入口重点突出，使用频率较低的入口弱化，通过层级和减少复杂度避免用户出现迷惑行为。
个人中心是承载功能入口较多的页面，很多功能用户一般很少用到，每个用户的功能使用频率都根据用户习惯而定，在设计上个人中心常见的就是把功能按照维度分类，如设置类、功能类等便于用户查找。
还有一种像站酷这种列表布局也是比较效率的布局方式，这种布局方式按照用户的习惯，由上到下的顺序进行浏览，干净简洁的页面，某种程度是减少了干扰。
先看一张对比图，简单讲下我是如何运用干扰效应进行设计。
这是去年我对我们产品的个人中心页进行改版，左边是旧版页面，旧版页面无论是视觉上还是交互上都不符合用户认知，在功能层面也是紊乱不够简洁，整个改版流程呢分为分析用户目标、问题梳理、针对优化、结果验证。
这里主要讲下如何针对用户目标进行优化，用户目标分两个维度，一是个人中心作为管理内容进行使用，二是通过个人中心查看投递简历的进度，其中投递简历对于产品价值是相对较高。
提一嘴当时的用户是技术类居多，大多是求职、学习目的。
无论是视觉上还是交互上问题都是比较多，并且结构比较混乱，把一些用户不常用且对产品没有价值的功能点放置层级较高，过多的就不写了，总之都是问题。
作者：爱吃猫的鱼___ 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
有效的颜色应用技巧是每个从事视觉合成相关工作的，包括插画家和UI设计师，都必须具备的。随着扁平化设计和material design的普及，具备色彩理论知识变得更加重要。
目前鲜艳的颜色和渐变出现在不同数字产品的用户界面上：从好玩和有趣的到商业应用和网站。然而，关于明亮的颜色对用户体验的影响还有很多讨论。本文对丰富多彩的用户界面设计的优缺点进行了深入的分析。
增加可读性和易读性
我们之前的一篇文章中，介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩运用的基本因素。提醒一下，可读性是指人们阅读文本内容的容易程度，而易读性则定义了用户在特定字体中区分字母的速度。
鲜明的颜色足够的对比度有助于增加可读性和易读性。有对比的布局元素会变得可区分和引人注目。然而，高色彩对比可能并不总是有效。如果文本内容和背景颜色对比度太大，将很难阅读或扫描文本。这就是为什么推荐设计师创建一个温和的对比度，只用高对比度颜色突出元素的原因。
对任何数字产品来说，视觉层次是打造清晰导航和直观交互的核心要素。UI组件就是这样被组织起来的，这样大脑就可以通过这种包括颜色在内的物理差异来区分物体。
颜色有自己的层次结构，这是受用户思维的影响所决定的。有大胆的颜色，如红色和橙色，以及弱的白色和奶油色。明亮的颜色很容易被注意到，所以设计师经常用它们来突出或设置对比度。此外，将一种颜色应用到几个元素上，表示它们在某种程度上是有相关性的。例如，您可以为购买按钮选择红色，以便人们在需要时直观地找到它们。
大脑对大胆的颜色反应强烈，这就是为什么明亮的颜色组合很容易被注意和记住的原因。色彩丰富的用户界面设计，在众多颜色较轻的产品中容易脱颖而出。颜色的选择需要基于目标受众的喜好和市场调查。
此外，如果一个公司拥有明亮的企业颜色应用于商标和品牌项目，那使用同样颜色在其网站或移动应用上也是一个好方法。这种方式连接公司所有的沟通渠道，创造了一致性的视觉解决方案，并且提高了品牌知名度。
为了传达正确的语气、信息和号召用户做出预期的行动，设计师需要知道颜色会影响我们的情绪和行为。我们的大脑会对颜色做出反应，而我们通常不会注意这点。这项名为“颜色心理学”的研究表明，当我们的眼睛感知到一种颜色时，大脑就会向内分泌系统发出信号，释放负责情绪变化的荷尔蒙。
适当选择颜色有助于让用户处于一种促使他们采取行动的心理状态，并设置合适的氛围将正确的信息传递给用户。比如，如果设计师设计了一个与自然或园艺相关的产品的UI，很有可能会选择用绿色和蓝色。通过这种方式，设计将从一开始就与一种产品或服务类型相关联。您可以在我们的文章《颜色对用户行为的影响》中找到对颜色含义的具体描述。
明亮的颜色和渐变，是UI设计中的最流行的趋势。如今，可以在不同类型的数字产品中看到这种运用，而严格的商业风格的限制似乎被抛在了一边。
明亮的渐变色彩在用户界面上可以带来一种现代化感和新鲜的想法。结合最新趋势设计的APP或网站往往引人注目，尽管竞争激烈，仍能吸引用户的注意力。
那些认为颜色能靠直觉和审美随意混合的观念是错误的。如果你想要创造和谐的视觉构图，那么关于颜色如何起作用以及它们如何协作的基本知识是必不可少的。
在UI中应用的颜色越鲜艳，搭配就越困难。为了让用户感到愉悦和舒适，设计师努力将平衡和和谐融入到用户界面设计中。色彩协调是指在设计中以最吸引人、最有效的方式来安排色彩，以供用户感知。和谐的颜色组合有助于对网站或APP获得一个不错的第一印象。颜色理论定义了一些基本的颜色方案，下面这些配色方案被证明是有效的。
单色，色彩和谐是基于一种颜色和它的各种色调。
类似色，该方案适用于颜色轮上相邻的颜色。
互补色，它是在色轮上相互放置的颜色的混合，目的是产生高对比度。
多色互补，这个方案与前一个方案相似，但是它使用了更多的颜色。例如，如果你选择蓝色，你需要取另外两个相邻的颜色，表示黄色和红色。
三元色，它是基于三个独立的颜色，在色轮上是等距的。专业人士建议使用一种颜色作为主调，其他颜色作为辅助。
四色，tetradic配色方案使用四个颜色从车轮是互补的。如果你把选中颜色上的点连起来，它们就形成了矩形。
大胆的颜色可以作为在UI中进行重音的工具，但它也可能成为重音消失的原因。许多鲜明的颜色在一个单一的视觉组成会带来了失去突出元素的风险，因为他们成为一个色彩种制造混乱的一部分。
这就是为什么推荐设计师使用60%-30%-10%的比例。最重要的部分应该是主色调，三分之一的构图采用第二色，10%的部分应该选择有助于形成重音的颜色。这样的比例被认为是令人愉快的，因为它允许逐渐感知所有的视觉元素。
创造数字产品的核心阶段之一是用户研究。定义和分析目标受众，使设计师了解他们对网站或应用程序的期望。年龄、性别和文化会影响潜在用户的喜好。例如，孩子们很喜欢黄色，但当我们长大后，黄色通常看起来不那么有吸引力。男人和女人通常喜欢冷酷的颜色，如蓝色，绿色。不像女人，男人通常喜欢白色、黑色和灰色。
明亮的颜色也是如此。即使您是设计一个有趣的APP，也需要考虑目标受众的具体情况。中年人通常更喜欢轻松的用户界面，他们可能不喜欢屏幕上很重的颜色去分散注意力。
正如我们上面所说，明亮的颜色可以产生大量的对比度，帮助突出重要的UI元素，并提供良好的易读性和可读性。然而，过多的对比度可能会起到不好的效果，尤其是在移动界面上，因为它们的空间有限，可以在不同的环境下使用。
小屏幕、环境光和明亮的字体使对比度高的图像在用户眼中显得很难看。这就是为什么在移动UI设计中使用明亮的颜色需要注意颜色之间的对比度，这样人们在阅读文字时会感到舒服。
颜色是大师手中的一件伟大的工具，和其他任何工具一样，它也有它的优点和缺点。为了有效地使用它，需要考虑它的所有方面，以便能够找到适合设计任务和目标的解决方案。
作者：爱设计的狐狸 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
「尼尔森十大原则」又称为「用户界面设计的10种可用性启发式」，是由雅各布·尼尔森（Jakob Nielsen）提出的10条交互设计一般原则。之所以将其定义为“启发式”，是因为它们是广泛的经验法则，而不是特定的可用性准则。
在官方2019年的描述视频中将原则定义为「十大UX设计试探法」，运用这些原则有助于我们试探设计的边界，探索设计的可能性，千万不要让原则成为束缚我们设计的枷锁。
“保证元素对象，操作选项的可见性，以此降低用户的记忆负荷。”
这个原则直译文过来的话有点拗口，其实就是指尽量减少需要用户记忆的东西，特殊情况下提供可选项让用户在此确认信息。特别是在一些较为长流程的页面流转中，一定要注意上下文的关联性，以此协助用户进行回忆，而不是从头开始记忆。
1. 选项可视性
最常见的运用，将选项以用户最能理解的方式呈现出来，不让用户疑惑。
在平常练习的飞机稿或者一些风格独特的产品中我们经常会看到只使用了icon的tab栏，虽然美观，但是当用户量达到一定程度，且用户属性较多的情况下很容易造成识别上的问题。目前市面上较多的产品还是选择了文字+icon的展示形式，通过文字与图形加深用户的识别，高德则选择了使用表意最为明确的文字。
2. 页面可视性
页面标题也是最为常见的运用形式，产品需要清晰的告知用户目前所处的位置。特别是在一些需要长时间停留，存在操作被打断的界面中标题尤为重要。
目前市面上常见的产品都会在用标题来告知用户当前所处页面，有段时间特别流行类似APP Store这种刻意放大来突出页面标题。值得一提的是，在IOS中如果从一个APP跳转至另一个APP左上角则会出现上一个APP的名称，切点击可以快速返回。如上图中的淘宝页面，我是通过微博点击广告链接后跳转进入的。
3. 交互通用性
只要是用户熟悉的交互形式，用户就不用浪费时间去记忆，即使不用文字说明，也能有效的保证用户的识别。
在文字阅读或者编辑的时候，长按可以拷贝/粘贴，即使不用说明，绝大部分用户也能get到，还有就是预览图片时候，使用手指交换进行缩放。
4. 历史记录
提供最近访问项可以帮助用户恢复他们未完成的任务以及难以回忆的任务。
最常见的莫过于浏览器的历史记录，可以帮助用户回忆寻找某个时间节点的内容，微信的聊天记录划分了更多的维度来帮助用户搜索相应的记录。淘宝浏览商品不稳定性较大，有时用户会因为某个宣传而点进某个商品，通过足迹可以查看浏览记录，这样就不用特地去记店铺名称或者加入收藏夹了。
“用户看不见的加速器（快捷方式）通常可以加快专家用户的交互速度，从而使系统可以同时满足经验不足和经验丰富的用户。允许用户定制频繁的操作。”
系统需要同时适用于新手用户与专家用户，对于新手用户来说，需要尽量降低他们的学习成本，帮助他们快速上手，而对于专家用户来说，他们需要的是快捷以及高效。
1. 千人千面
在注重用户数据分析的今天，很多时候已经不用用户自己手动去设置自己的偏好，产品便能像你所想。
左图的滴答清单是最为常见的为新手用户准备的引导方式，右图支付宝的财富界面，如果是新手用户，那么金刚区下方则展示现金红包，基金推荐等吸新人，如果是基金老用户了，则会展示更加专业的数据字段来帮助用户决策。
2. 重复操作
对于熟悉的产品，一般来说用户更希望一切趋于稳定。
在外卖这种使用频次较高选择项较多的产品中，很大一部分用户不愿意冒着风险尝试新的菜品，或者点餐决策时间较短（比如开会），他们很多时候会选择“再来一单”。
3. 快捷方式
在操作同一款软件时，专家用户的屏幕只有一个预览窗口，而我…恨不得屏幕再大点，塞下所有工具栏。
在各种软件中都会设置快捷键便于专家用户的高效操作，比如专家用户的Photoshop和我的PS。
“对话中不应包含无关紧要或很少需要的信息。对话中每增加一个信息单元都会与相关信息单元竞争，从而降低其相对可见度。”
我们在设计一个页面的时候，如果其中的元素都想突出，最终只会导致没有任何突出的元素。这里可以参考“信噪比”的概念，即相关信息与无关信息的比例，用户的注意力是有限的，降低不必要的视觉噪音，才不会过于分散用户的注意力，提高用户效率。
1. 文字内容
资讯类产品中最为常见，如果一大段文字又臭又长,那么就很容易影响到想要传达给用户的核心思想。
36氪在快讯页面中会将重点资讯标红来突出，此外默认情况下只展示资讯标题，方便用户快速浏览，如果遇到感兴趣的资讯可以再选择展开浏览详细信息。
2. 视觉元素
利用这个原理，现在的产品会在一些视觉元素处理上做出区分，不仅能引导用户快速完成预设的操作路径，且对产品本身业务也是相当有利。
淘宝的结算页面中，为了促使用户剁手不受干扰，会将付款btn与其他做高反差处理，同理Airbnb在首页中将搜索房源作同样的的处理，只要促使用户搜索了，那就提高了剁手的转化率。
“错误信息应该使用简单的语言表示，准确指示问题并建设性地提出解决方案。”
原文中特地强调不要用代码去表示错误信息，即用用户能够理解的，通俗的，接地气的词汇，千万不要用一些专业性术语。用语尽量礼貌，不要责怪用户，让他们觉得自己是个傻逼，这样很容易让他们产生挫败感。
得道在使用手机号登录的时候手机号少输入了一位，以至于登录btn一直无法点击，虽然诊断了错误，但是没有明确的告知用户错在哪。Behance在这方面就显得更为完善，会实时判断状态，并且实时告知原因，协助用户进行改正。
“即使可以在没有文档的情况下使用系统会更好，但可能仍需要提供帮助和文档。任何此类信息都应该易于搜索，着眼于用户的任务，列出要执行的具体步骤，并且信息量不要太大。”
每个用户的背景都有所不同，所以很难确保所有用户都能畅通无阻的使用自己的产品。无论什么类型的产品，都尽量给用户提供一个帮助的途径，对于那些只需要一句话就能概括的，可以考虑在附近进行简短的说明，而对于需要复杂说明的，最好统一一个帮助入口，且放置于用户易于找到的位置。
在IOS的设置中，会在一些设置项下添加简要的说明，以此来帮助用户更好的理解。印象笔记与普遍的产品一样，在菜单栏上有帮助的入口，而且提供精准的搜索功能，帮助用户更快的解决有可能遇到的问题。
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
筛选可以说是我使用比较频繁的一种交互形式，比如我点外卖，会选择满减优惠力度大，同时我也可以选择在哪一个价格区间内的产品，这就会用到筛选，而到了B端产品上来，一个CRM系统当中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的逻辑，也为设计本身增加了很多难度。因此，今天我们就来讨论讨论筛选控件
筛选存在的对于整个表单来说是非常重要的，它可以帮助用户，在表单茫茫多的数据当中进行快速的定位；可以对表单进行快速划分，缩短用户对于数据的寻找时间；能够满足用户在工作中，实际业务场景的筛选。
对于实际B端场景来说，筛选是日常数据分类的一个重要途径，我们先来看看实际场景到底有哪些？
比如今天作为一个电话销售人员，想要联系最近注册的用户时，通常会通过筛选来选出最近几天注册过，同时又没有销售更进的客户，进行一个优先级的排布；
再比如说，在销售周报当中，销售主管可以通过筛选得到每个人这周完成的状态，也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等，这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用
筛选可以通过多个筛选条件进行多维度的寻找，而导航、搜索只能通过单一条件进行指定筛选。
虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索，但本质上区别不大
所以在B端项目当中，如果你有表单，那你就需要筛选
我们将筛选分为基础筛选和高级筛选两种，两种筛选会根据业务场景不同，在不同的页面去使用
基础筛选一般为系统预设好的筛选字段，具有很强的业务和场景的需求。基础筛选一般分为四个部分：
筛选条件：是指用户可以筛选的范围
筛选项：是指用户可以选择的筛选项目
已选项：是指用户已经选中的筛选项
备选项：是指用户还没有选择的筛选选项
基础筛选更多作为用户快捷筛选的一种方式，因为一般使用场景当中用户几个筛选逻辑为“且”
同时筛选的逻辑也为简单筛选，所以在使用场景上只适合在对筛选要求不高的场景下使用。
高级筛选一般为筛选中含有运算符，同时筛选当中包含条件关系，比如且关系或者否关系。一般高级筛选包含以下几类关键词
筛选关系：是指几个筛选条件之间的关系，一般为 且、或关系，即 且 关系为几个条件之间的交集；或 关系为几个条件之间的联集（并集）
筛选字段：是指在筛选当中，所要的筛选项，一般为表单当中的所有可筛选的字段
筛选操作：是指筛选字段和筛选值之间的关系，常见的筛选操作有：大于、小于、是、否、包含、不包含、为空、不为空等等。
筛选值：你所需要筛选的数值
高级筛选一般满足更多的用户场景，为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。
当在筛选器条件少于5个的情况下，最常使用的就是上下布局，这样筛选能与网站保持统一的情况下，上下布局也更方便用户进行阅读
当筛选器过多的情况下（一般在5-15个之间），筛选器过多，需要滚屏才能看到筛选结果，用户使用起来会很别扭。所以在5-15个的情况下，一般会将筛选项进行收折，这样保证筛选整体面积不会太大，同时将用户常用的筛选放在前面，可以满足用户基本的业务需求和使用场景
左右布局在PC端一般是以字段选择进行筛选，通俗来讲就是将用户可以筛选的所有字段全部罗列出来，然后通过勾选选，择出你需要筛选的字段，进行筛选器的使用
左右布局的好处是能够将筛选的所有条件都直接的展示出来，可以适应很多场景，在筛选器用15个以上时。通过左右布局的方式，能够让筛选条件进行滚动，在最大限度保持用户使用体验
在日常的B端产品中，筛选的形式有哪些？筛选到底应该怎么设计？接下来为大家总结梳理一些在 B端产品 中的筛选玩法，希望为你开启新大陆。
平铺型一般为用户搜索结果数据量过大，使用户搜索出来的结果与其预期差距过大，用户然后可以通过筛选对数据的再一次分类，使用户能够精准寻找其想要的结果。
平铺型一般为筛选条件少于6个，这样能够通过1行或者2行去展示筛选项的结果
多用于信息量大的产品，比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式，将所有的筛选条件列出来。
平铺型的好处是将筛选项的结果全部或者部分放出，能够帮助用户快速理解筛选项以及快读找到自己想要的结果。
缺点也是很明显，平铺型的控件占比大，需要占据大量面积展示平铺出的筛选结果。
比如淘宝PC端，搜索一个产品后花去40%的面积去展示所有的筛选条件，其实就是想引导用户，淘宝搜索过后spu的数量仍然过大，想通过进一步的筛选，让用户明确自己对想要东西。同时因为面积占比大，通常平铺型都是以收折的状态，只有在搜索触发后才会完全展开
收折型筛选是一种简单直接的筛选形式，将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框，这种形式看上去很简单，但是在B端场景中，下拉框对于用户来说认知成本低，操作性也较强，同时在用户重度使用时，又能给用户很好的使用体验的一种方式
用户可以直接对其常用的字段筛选进行一步操作，并且没有复杂的筛选关系，全部都是“且”的筛选逻辑，能够保证用户进行快速的筛选选择
将所有信息全部平铺展开，信息量过于冗杂繁多，同时在做通用性产品时，这种方式很难做到通用性
单侧筛选是一种更通用的筛选形式，通过对于你想筛选的字段进行勾选，勾选完成后就会出现筛选条件，然后选择筛选字段、筛选操作、筛选值，一般选择完成所有筛选后，还需要点击查询，筛选操作才算完成。
整个单侧筛选，大量的筛选条件可以放置在表单的左侧或者右侧，通过表单纵向空间，去承载大量筛选条件。
节省空间、通用性强。因为在很多Saas系统、Paas系统当中，无法针对每一个客户进行设计，就要考虑到系统通用型高，做一些大而全的功能。在每个表单也所需要定制化修改的地方很少，同时能容纳的信息量可以很大。
就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中，要通过不断寻找，来满足我的筛选需求，操作麻烦。
我们产品在某一次改版就将筛选由收折式修改为单侧式，因为我们用户使用筛选的场景非常的多，用户每次筛选都要多进行2、3步操作，导致用户进行了大量的吐槽，后来进行修改，将筛选顺序支持手动调整顺序，用户吐槽的次数才慢慢减少。
表头筛选是一种复杂筛选的形式，其最开始是来源于Excel的筛选形式。点击表单的筛选按钮，可以将表头的筛选字段直接带入，方便用户。之后在后台产品的发展中，得以借鉴过来。
可以通过表头的点击，使用户更快捷进入到自己的筛选条件，在通常情况下，在表单越左的数据显然是越重要的，也是使用筛选去筛频率最高的，因此高频的筛选场景基本还是得到满足。
用户第一次进入系统很难理解这种交互形式，且在每个表头都会有一个icon，影响用户对于表头的识别。
通过点击筛选按钮，展现出筛选弹窗，进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd，在其中筛选不是很强的一个功能，同时也是系统中十分有必要的。
是能够在节省面积的情况下，可以进行很复杂的筛选，同时可以支持复杂情况下的筛选
弹窗会遮挡一部分表单数据，会影响筛选人的判断，其次筛选条件的添加也相对更加繁琐。
在我们一系列筛选的调整过后，我们团队也总结了对于我们来说更重要的条件和形式，来和大家分享探讨一下。
我们认为影响筛选控件最重要的是用户的使用频率，因为用户的使用频率和使用方式，直接影响到我们筛选是用普通筛选or高级筛选，也会影响到筛选的形式。
筛选功能的做法，取决于我们产品未来是想往哪一个方向发展，如果想把功能做的强大，就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。
在B端系统当中，最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点，但是用户对于这个点的认知成本实在过低，也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后，要适当引导用户，解释这个功能的使用场景才不会让你设计的功能被淹没。
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
关于树形选择，我们必须先知道它的基础概念，“树” 究竟是什么？我们先来看看树状结构的定义
树状结构其实是作为一种层次结构化的表达方式，它能够将树的抽象出来表达完整的构造关系，为什么叫做树，是因为它更像是一个上下颠倒的树，根部在最顶端，枝叶反而变为下方。
同样在对树状结构的整体命名上，也遵循了与之类似的表达方式：
节点（Node）：是树状结构当中的基本单位，使用节点可以表示 不同数据间的 组成关系（从属关系与并列关系）通常节点会分为几类特殊情况。
1.根节点：整个树状结构的开端被称为根节点。一个树状结构一定只有一个根，在思维导图中，根节点就代表着它的开端，用于延展出更多的树状结构。不过在目前的树形选择当中，因为对易用性的要求，通常会隐藏根节点，只展示子节点。而根节点隐藏在 标题、选项文本 当中。
2.子节点：根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制，在树形选择当中是直接展示出来的部分。
3.叶节点：没有连接到其他子节点的节点。叶节点属于一类特殊的子节点，它是整个树状结构的最末端节点，在树形选择当中是一个重要的概念，下面会展开来讲。
分支（Branch）：节点之间的链接，在我们树形选择当中，分支的线条可以选择显隐。其搭配的使用方式也有所不同
同时我们还会用到节点的几个基础的概念：
节点层级：指当前节点所在的层级，比如根节点为第一层级，根的子节点为第二层级，以此类推；
节点高度：对于某一节点的高度，便是该节点下所有叶节点从上到下的个数；
节点深度：指该节点到根节点的唯一路径长度，深度与层级较为类似。
树状结构究竟出现在生活中的什么地方呢？树状结构对于我们又有什么用呢？大家可能理解上会觉得很枯燥，我给大家举一个例子：
回忆一下我们小学使用字典时的场景，首先我们是先通过声母，去确定这个汉字的大概的页数范围，然后通过韵母去确定这个汉字的详细位置，最后通过音调找到想要寻找的汉字：
其实字典的设计，便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等，这些都是使用了完整的树形结构。
采用树形可以快速进行结构化的表达，其目的是为了用户能够快速地增删改查，想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》，里面讲了非常多的逻辑化思维、表达的方法与内容，内容比较多，而这种思维其实在我们工作生活中都能够用到。
1.层级缩进
为了将树的整个结构完整的表达出来，会使用层级缩进的方式进行区分，通常会使用 8px 对下一级节点进行缩进，这样能够表达更为完整的层级关系。
这里要注意，如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下，可以见解 Coding 编辑器的思路，即：将缩进内容使用“分支线”进行表达，更明确清晰。 这里使用层级线后，折叠图标也会有所不同，下面有明确解释。
2.折叠图标（节点按钮）
主要是将节点下的所有树叶与子节点进行展示，在整个树的结构中，折叠图标一般分为两种：三角折叠、方形折叠
三角折叠：为页面层级较少时使用。因为在较少的层级下，用户不用特意去思考当前节点所在层级究竟在哪。
方形折叠： 更多与页面层级线进行配合使用，通过层级缩进，将页面层级线标识清楚，能够更好的在多层级情况下进行合理区分。
3.选择控件
整个树形结构依旧是在选择录入框架下，分为单选和多选。因此需要对其类型有所展示，特别是在多选的场景下，一定要标明它的类型，方便用户进行理解使用。
通常这个控件可以在单选的时候进行隐藏，这里先按下不表，我在树形选择的类型当中深入给同学们进行分析理解。
4.选项文本
注意字数限制、超出后如何处理即可，我就不做过多介绍。
在讲树形选择之前，我先为大家讲解关于与其相关的同类型产品，为了方便大家的记忆，我选择出了两类不同的组件进行对比，感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解，相信大家在看完之后一定会有所收获。
单选树只能选择叶节点，也就是需要将每个树展开过后才能进行选择。
它是一个较为传统的选择方式，因为它的选择热区较小并且理解成本较高，因此这种方式不太满足现如今对于B端产品效率提升方面的要求，并且要求十分特殊，因此使用较少，现多以单选节点树为主。
单选节点树与单选树最大的区别在于其能够选择子节点，这样可快速选择该子节点以及其各种叶节点。
同时传统的单选节点树中是采取单选按钮的方式，随着对B端要求的不断提高，并且在树的功能越发的复杂过后，几乎取消了 单选按钮 的形式，取而代之的是将整个 文本标签 作为选择的热区，用户点击过后即可进行选择。
因此在树形选择当中，逐渐将单选节点树演变成由两部分热区所组成的一个控件：
在左侧，主要以树类型的展开折叠操作，热区通常就是图标折叠图标这一部分；
在右侧，以选择该选项、节点的操作为主，热区范围以整个选项文本作为基础，进行延展即可。
这里还是提示以下新读者，这类选择一定要进行 Hover 状态处理，不然用户无法根据光标的变化判断是否可点击，当然老读者跳过就行～
大家在对比单选与多选时会发现，为什么不会存在多选树？不存在只选择选项的多选呢？
思考时间又到了，别忘下划，自己先想想呢～
虽然在理论上会存在多选树的情况，但是它存在的价值比较诡异。首先在树的节点当中，我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点；或者说它选择了该节点下的多个选项，因此在实际情况中这类场景过于的少，更多会用多选节点树进行代替。
当然，多选节点树与单选节点树在结构上是十分接近的，就是将复选框展示出来，方便大家进行选择。考虑到大家经验不足，建议这里复选框放在折叠图标前侧，原因有二：
在树形选择后续的拓展当中，经常会遇到选择增加一些操作功能，比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧，导致之后的操作无法进行更多的拓展，随之崩溃，对树形选择又是一顿乱造～
现有的基础架构基本都是沿用了这类设计，可减少前端同学的工作量，同时也减少他 BUG 的产生。
多选节点树的使用场景非常多，我举一个大家在树形选择中都会犯的例子，希望大家能够多理解其中存在的特殊逻辑：
比如在一个大型上市公司当中，我作为老板会去设定整个“设计部”的权限，并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师，很容易就会使用多选节点树，将整个组织架构进行选择，但是这样的选择与用户实际想要的内容是存在较大差异的。
在产品设计中，对于上诉的“设计部”这个概念其实是一个动态数据，即在之后新增到“设计部”的所有员工，我不必再去权限管理中重新配置。我们遇到动态数据的情况时，首先不建议大家采取树形选择，因为首先对于这个概念的理解成本很高，无法通过树形选择这样的方式让用户理解；同时系统对于这类动态数据的情况都建议特殊处理，至于怎么处理，大家可以在评论区讨论，我也会在后续文章当中为大家进行讲解。
易理解：
因为树状结构本身就已经存在很久，早在 DOS 计算机时代就有它的影子，经过长期累月的发展，用户在理解上也会相对更加容易
快浏览：
在数据量特别大的时候，能够根据子节点优先找到自己想要的叶节点，从而提升选择效率，与《选择录入02》当中讲到的 Tab选择十分类似，没看过的同学建议先去看看。
看结构：
结构，能够辅助人们进行快速记忆，从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知，从而更快了解业务。
首先对于树形选择本身的控件形式，你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。
当数据量过大时一定会出现异步加载、数据分页等诸多情况，因此在设计中，需对这类情况进行设计。
全选功能本身较为简答，无外乎就是一个复选框的事情，但是在上面提到的数据量过大 + 全选的存在，会有些问题还需要大家进行留意。
在树形选择当中，都可以采取键盘操作从而提高效率。基本规则是：
↑键：向上切换同级节点；从第一子节点，顺序返回父节点；
↓键：向下切换同级节点；顺序进入已展开的第一子节点；
←键：关闭当前级别节点；返回上一级父节点；
→键：展开子节点列表；顺序进入已经展开的第一子节点；
回车键：提交当前 foucs 的节点选项；
树形选择是较为常见的一类方式，但由于大家对 基本的树形结构 认识不足，导致对其设计会有许多误区。
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com
