最近美剧《风骚律师》第六季正式回归，本来想等着全部更新完之后在一口气看个痛快。但是豆瓣里一万多名用户给出了9.9分的评价，就让我有点坐不住了，势必要看看「律师」是如何超越「毒师」的，也弥补一下近期的剧荒
当我打开Netflix之后，引起我注意的是「超爱这部!」这个功能，第一眼看到的时候有些疑惑，这个功能的意义是什么？与点赞功能的区别是什么？我点了之后会怎么样？我一直理解Netflix的点赞功能和Youtube、Twitter和抖音类似，点击之后会推荐给我更符合口味的内容或者有收藏的作用。但是对于Double the Thumbs的疑问是，除了喜欢与不喜欢之外，还可以给用户带来什么体验？它是Like功能的进化体么？已经拥有18年历史的点赞功能还有可优化的空间么？借此话题，来和大家聊聊点赞功能背后的洞察与价值
早期的点赞把原本静止的内容变成了社交的媒介，用户间通过赞来简单直接的交流。我喜欢，我就点赞，蕴含赞同、支持和鼓励，此时的点赞更单纯与纯粹
2004年，社交新闻聚合器Digg的创始人Kevin Rose发明了Digg功能，用户从内容列表中查找自己感兴趣的内容并将其“Digg”出来——本意「挖掘」，你可以理解为「顶」——以表达自己对这篇报道的认可。当一篇文章得到足够的Digg之后，就会被提升到首页上，让更多的人看到
就像是一个朋友给你讲了一个故事，你十分激动。这个故事是你从来没有听过的，你记住了它并将这个故事分享给了其他的朋友
2007 年，社交聚合网站FriendFeed 将“Like” 按钮作为一项新功能发布并推广，两年后，随着 FriendFeed 被 Facebook 收购，这项功能也整合到了 Facebook 里。随后，各大社交产品纷纷效仿，同期的 Tumblr、Vimeo以及后来的 Instagram 都增加了这一功能。在国内，微信4.0版本推出的朋友圈，后来抖音的小红心、知乎的大拇指或者老铁双击666，不管什么样式的图标和表达方式，点赞即可满足用户的基本需求，又可以为产品实现商业价值，已经成为了社交产品的标配并且一直延用至今
去点赞
先问各位几个问题，你一天会给几条抖音、朋友圈或者知乎的回答点赞？你一天又会收到几个点赞？那你会记得一天跟多少人打过招呼么？
可能你会认为我很无聊，谁会每天统计点赞和打招呼的次数呢。可正是因为这些你根本不在意的数字，无意的一个举动影响着生活。在电梯里碰到同事你要点头示意，领导发了一条朋友圈你要点赞附和，朋友积赞领优惠券你要支持。你需要礼貌的简单问候，或是处于功利维护人际关系，点赞无非是门槛最低，负担最小的表达方式，是敷衍的象征。相比于转发显得太重，评论则需要输出观点，模糊不清的态度绝对不会承担责任，还可以维持住一定的距离感
在社交媒体里，我们点赞做的只是观察他们，表示认同，而不是向他们展示我们关心的事情，更别说用它加深友谊 「 Karen North - 数字社交媒体教授」
在传统的社交中，我们有点头之交的关系，然而互联网的出现让我们生活和工作中又出现了一种新型的关系“点赞之交”，它已经成为了网络社交的通用礼仪，虽然它无关紧要，含义不足以加深感情，但是想躲也躲不掉
被点赞
作为一名内容输出者来说我的体会更深，我的视频怎么没人看，为什么点赞还不到一百个，每十分就会拿起手机看十几次，内心的挣扎与惶恐开始纠缠着我，是不是话术太枯燥，是不是灯光太暗了等等的问题反复的问自己。就比如当你精心拍了一张照片，编辑好一段文案准备点击发布按钮的那一刻你在担心什么？你耗费几个小时发出自我感觉良好的的一条朋友圈之后，点赞数只有稀稀拉拉的一两个。原本的炫耀因为点赞数太少变成了日记本
相反，点赞数成倍增加的时候，大脑就会开始分泌大量的多巴胺肾上腺素飙升，同时，你可能将在更多的社交平台重复这一受捧的过程，以及无数次打开这条动态，进入一种高度的自我欣赏状态。一个必要功能的出现，也意味着它承载着人们必要的需求。点赞满足的就是人们「被关注被看见被认同」的底层需求
重要的指标
当产品经理们发现了用户的底层需求之后，如何让用户不产生疏离感，积极参与并且促进用户留存？点赞功能给了他们一个非常轻量级的机会，任何用户只要点个赞，就可以在整个社区的内容量级评定上贡献自己的影响力。另一方面，内容的生产者能够从点赞中获得更正面的反馈，进而更愿意进行分享实现转化，这是平台更愿意看到的
Facebook 2009年在全球推广点赞功能之后，用户发贴的数量和质量都随之提升，约 30% 的用户每天都会多次点赞。另外，广告商们马上解锁了「营销密码」，Facebook将数据售卖给广告商，打破了传统媒体市场的盈利模式，把用户的「喜爱度」拿捏的死死的。就连美国国务院在 2011 年 – 2013 年，只为在 Facebook 上获得更多的赞，就已经花费了 63 万美金
但凡事都有利弊，毕竟人性极端化是难以避免的。不知道各位有没有经历过可以在淘宝上给微博买粉买赞买评论的阶段，看似大把的流量在手其实都是流量造假，早期微博上的电影大V都是靠着一手盗版资源和买粉赚的盆满钵满，如果活跃度较高，很容易成为天选之子，平台还会亲自送你粉丝，这种效果显然与社交网络设计之初，希望通过虚拟社区增进情感联络的初心是相悖的，另外，造假产业环环相扣侵蚀了平台的利益，这就不是平台愿意看到的了，所以改善社区环境是必然
各个平台也做过努力，例如微信朋友圈在点赞功能发布不久，就对公众号集赞送礼品等诱导分享行为严厉打击。2019年左右Facebook、Instagram包括Twitter在内的 Demetrication（去数量化）顾名思义，就是将点赞数量隐藏，让用户看不到有多少人给帖子点赞，强制用户把注意力放在内容上。类似于教育改革落实“双减”政策将百分制改为ABCD的等级制，考试结果不排名、不公布，全面关注学生综合素质的培养。但是，有条新闻，一名老师大白天的拉着窗帘偷偷摸摸搞培训被社区抓现形的新闻想必大家都看过，贪荣慕利，众星捧月的潘多拉魔盒已经打开了，与用户的底层需求博弈注定不是短期就可以完成的
转眼已经三年过去了，海外的社交平台显然没有做到 Demetrication，技术手段根本完不成的任务。国内的社交平台则是把压力放在了创作者身上，利用起了用户底层需求，你想让作品在流量池里获得更多的点赞、评论和转发就要不断优化内容质量，寻找自身问题，或者花钱买数据，抖音的抖加和小红书的薯条都是社区平台迭代后的现状。既能避免黑产保护平台利益，又能给创作者来带可观的数据何乐而不为呢
更好的评分制
说回 Netflix 的 Double the Thumbs，官方给到的解释“这是一种让会员们了解自身喜好，更精准的看到想看的电影和电视的另一种方式”
其实就是通过更细微的分类比如导演、演员类型或者制作团队等等给奈飞的用户推荐相关的内容，只能说这很奈飞。从1997年开始卖碟片直到2006年转战流媒体，Netflix 的用户增长和商业成功的关键就是把猜你喜欢做到极致，这也是手握全球两亿付费用户的原因
不难看出Netflix更依赖用户，用户对于平台的反馈很重要。2017年Netflix抛弃了类似豆瓣一样的五星评分制，原因在于用户的打分并未遵从内心，评分较高的电视剧/电影会越来越火，不火的内容永远不会被用户看到，乱打分的现象频繁出现，Netflix不希望用户变成批判家，受到其他人影响，你只需要看你喜欢的内容就好。就比如说，周末你想跟女朋友去甜甜蜜蜜度过一个周末，舞台剧「莎士比亚」和电影「小时代」你会选哪个？我想大部分人都会选「小时代」，因为它话题性强，电影结束后可以在餐桌上和女朋友一起吐吐槽。但是，如果让你在平台上给两部剧评分，一定是「莎士比亚」高于「小时代」，问题就在于Netflix在乎的并不是评分，而是用户会看哪部剧
显示性偏好（Revealed preference）和是期望性偏好（Aspirational preference），这在日常生活中也很常见，比如一个决定中午吃轻食的人实际点了炸鸡，一个计划下午去图书馆备考的人实际仍躺在宿舍里刷剧，一个决定更温和些的人在面临类似的矛盾时仍选择发脾气 - 经济学家保罗·萨默尔森（P.Samuelson）
另外，Netflix与YouTube、抖音和B站又有所不同，Netflix全部都是PGC内容，都是自己花钱买的，流媒体版权的成本越来越高，被淹没掉的内容几乎失去了竞争力，对于平台的冲击巨大
Netflix不得不做出改变，只有不断优化推荐算法，向用户推荐更精准的内容才是王道，显然点赞/点踩对于用户来说更方便且选择单一，是获取数据最高效最精准的方法，在一项 Beta 测试中，Netflix 向全球数十万新用户推出了点赞/点踩手势，发现评级参与度上升了 200%
Netflix产品副总裁Todd Yellin指出这种无法完全准确洞察用户喜好的评级系统对Netflix当下原创内容的储备没有益处
如果各位很喜欢看美剧应该知道Netflix有非常多的自制剧，自制剧要比买别人的版权便宜的多，如果版权到期或者竞品的乘胜追击，也不会让自己处于被动局面。只有自制剧、自制内容才是平台的护城河，比如「纸牌屋」和「鱿鱼游戏」等等，这些优质的内容之所以能制作成功出现在大众视野，全部都来自点赞功能获取的用户数据
如今，Netflix在点赞/点踩的旁边增加了Double the Thumbs，改为了三星评分制度，从官方给到的解释“用户可以通过它告诉 Netflix，自己对某种特定内容情有独钟，包括主演、制作团队、角色类型、小众剧集类型等等，Netflix 的推荐也就能够更具体入微”，反之，Netflix可以通过更细微的分类来洞察用户喜好，一方收获了利益，一方收获了效率
作者：Hubooooo
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
对B端产品架构而言，一个合理的导航设计对能够解决，对团队内部：堆砌功能开发混乱；对外部用户：找不到功能的问题，所以本篇主要总结一下如何正确选取合适的导航。
从产品结构明确导航分类
B端后台的导航大类从产品架构层面来讲可以分为：全局导航（顶部、侧边、混合）、局部导航（菜单栏、面包屑、选项卡、步骤条、文字链接）、辅助导航、内嵌导航、友好导航和远程导航。
全局导航
表现为产品的一级导航，需要具有良好的稳定性和拓展性。
提示：清晰稳定的路径比起少点击一次更重要！
局部导航
局部导航包括：菜单栏、面包屑、选项卡、步骤条、文字链接。
特点：1、在同一个架构中，可以到这个节点的上下一级的通路；
2、有严格的父子级关系，局部导航与全局导航有层级关系，局部导航帮助用户进入更 加特定的页面。
通俗而言局部导航依附于全局导航，常作为二级导航出现。
辅助导航
提供用户在全局/局部导航不可到达的相关内容的快捷途径。
内嵌导航
也叫上下文导航，常用做对页面中的操作项进行解释；常见的有帮助引导链接等
友好导航
为用户提供便利的前进途径，常见于新手引导和帮助助手的场景，在不需要时可进行隐藏。
远程导航
指并不包含在产品结构中的功能入口；常见于网站地图、OA产品的工作台等。
如何进行合适的导航选择
1. 保证产品结构的稳定性
B端产品通常情况下都是复杂的，对用户来说具备一定的使用门槛和学习成本。所以导航首先要保证产品架构的稳定性，同时也要保证交互操作路径符合用户操作习惯。
重点：不可为了追求少一次点击而随便进行更改！
2. 便于后续扩展
在进行导航选择时需要考虑到后续产品的发展情况，在保证产品结构稳定性的前提下，为后续的功能扩展打好基础。
3. 操作清晰、易懂
在多层级的导航中要保证每一层级导航的视觉反馈清晰、明确。
4. 灵活适应
导航的功能选项可以根据使用场景需求来进行灵活添加，可以为了提升效率，在不同的导航选项下出现相同的功能入口。
5. 保持一致的交互规范
相同类型的导航控件，交互样式要保持一致；例如：飞书在面包屑的文字交互样式和文字链接的交互样式就做出了明显的区分。
6. 可不遵循层级关系
根据导航的定义而言，导航就是对信息进行分类，引导用户完成操作。
我们可以根据用户反馈和数据埋点可以将常用的操作功能进行前置，打破层级约束，实现对用户的操作提效。
根据场景，灵活使用导航
1. 顶部导航
顶部导航常用于官网类结构相对简单的产品
优点：节省空间、视觉干扰小，有沉浸式使用体验；
缺点：结构简单，拓展性低。
2. 侧边导航
侧边导航常用于操作比较复杂，专注操作的后台类产品；例如：SaaS产品等
优点：操作效率高、拓展性强、更容易进行功能收纳；
3. 混合导航
混合导航常用于操作很复杂，一级二级功能条目多的后台产品；例如：云产品（二级导航功能超多）
优点：比较综合
总结：
1. 一级导航需要具备足够的稳定性和拓展性
①、清晰、稳定的路径比少点击一次更重要
②、导航的排序尽量不要改变用户的操作习惯
2. 二、三级导航进行合理的分组收纳
利用分组控制导航的颗粒度。在二级导航只有一个时，无需设计分组
3. 判断功能是否应该作为全局导航
①、选择相对高频的分类，作为全局导航
作者：戴戴戴戴戴虎全
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
②、低频的分类，作为局部导航
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
随着移动互联网的发展，原本PC互联网连接商业支付、购买商品、浏览信息流等的能力已经转移到移动端，而PC互联网更加专注于其他领域的优势：
下面是我观察到的目前比较主流的交互设计点，与大家分享。分别是：
典型的案例就是苹果的Mac系统与Ios系统越发趋同，都采用了卡片化、模块化，整个交互规范、视觉感受都一致以达到多端统一。同时信息可以自由流转：比如在同一Apple账号下，Mac与IOS中复制的信息可以进行同步粘贴。备忘录、日历、提醒事项、录音中的信息进行流转，在任何一台Mac上登录Apple账号后都可以进行同步。
在国内，B站的网页端与App端的体验也逐步趋同，框架设计上更加卡片化与扁平化。信息流转上，手机上暂停的视频到网页端继续播放，实现了无缝切换。
淘宝首页：从过去复杂的信息流导航变为现在更加简洁的个性推荐卡片。整体体验与淘宝手机端一致。
总结：精简无关信息，关注最重要的核心任务，减少用户跳出，沉浸式心流设计。
许多网页接入腾讯、阿里的生态，支持扫码关注公众号/手机验证码即可完成注册。省去了用户编辑个人信息、输入邮箱、输入密码等复杂的交互流程。
心流式体验设计是这几年很热门的词，指的是通过优化用户体验让用户能够沉浸式地高效完成目标任务。这需要做到产品的交互习惯满足用户使用习惯，并且交互流程满足用户预期。过于频繁的弹窗打扰和页面跳转的等待时间都会影响用户进入心流。
比如，例如飞书审批，审批详情不需要跳转，点击卡片即左侧弹出详情页弹窗；让用户可以在同一个页面即可浏览信息，不需要进行跳转到新的页面进行查看，方便用户完成批量的审批任务。
再比如：阿里云，开通服务的时候不需要跳转，而是在侧边弹出订单弹窗，方便用户操作。
上面说到，频繁的弹窗提醒也会影响用户进入心流，用户在对表单、画布中的内容进行删除的时候，如果使用全屏二次提醒弹窗，会感到创作过程被打断。
钉钉宜搭：卡片画布类产品，删除操作时，不局限于大弹窗，而是用靠近按钮的小弹窗，使鼠标的滑动路径更短，操作更加简便；并且在不过多打扰用户的前提下，完成了目标操作。
复杂性守恒定律由Larry Tesler于1986年提出，也称泰斯勒定律。指的是“任何系统都存在其固有的复杂性，且无法被减少，只能设法调整、平衡。我们要考虑的是，怎么样更好地处理它，让用户简单、高效地使用它”。
很多的中后台系统中很多表单会存在大量的配置项，这些配置项是否可以简化，让平台变得更简单智能？大部分时候答案都是否定的，过度追求简化往往容易弄巧成拙。功能逻辑易于解释与理解才是更好的方案，当你试图简化降低复杂度，可能在其他地方埋了雷。
其中一个解决方案是将复杂度转交给系统，苹果公司的黑盒理论与此互通；就是用户不需要了解系统或功能背后的实现逻辑，只需要关注呈现在用户眼前的交互界面即可。如今数据智能化处理正不断发展，我们也看到了智能化在PC端领域的应用。
剪映相比于老牌视频编辑软件更加简单，提供各种在线特效模板，来降低任务复杂度。相比传统的PR、AE软件需要本地存储预设文件，或者手动编辑简单了很多。用户不需要知道背后的实现的技术原理，也不需要掌握过多的特效制作、调色技巧即可完成视频的剪辑、调色工作。
推荐组件功能：用户在进行流程搭建时，不需要从左侧组件区拖拽组件，而是点击连接线中间来添加组件。如果可以其实还可以更进一步，就是根据后台数据分析创建目标流程需要的组件，向用户主动推荐相关组件，以此来降低用户的创建门槛。
随着传统业务向互联网转型越发普遍，线下业务流程转到线上的需求场景越来越多，一个单一的系统不能完全满足所有的业务场景需求，由此需要一个更加灵活模块化的系统来针对不同的应用场景来应用不同的产品架构。而该系统中的功能框架、交互组件又可以重复利用，于是更加灵活、模块化、可自定义配置的系统后台越发受到欢迎。
飞书、钉钉易搭内的审批流程、会议系统、工单系统都可以通过模块化的组件进行高效搭建，不需要代码即可像搭积木一样实现用户的自定义需求。
阿里的天猫优品电器店线下门店设计平台，整理了线下门店所需的16个模块（前台、小家电中岛、洗衣机、橱窗、空调、吧台等），通过线上三维化场景直接进行可视化设计，所见即所得，并且能够模拟现场灯光效果，根据门店现场规格，直接在三维空间里修改，快速导出效果图;非常高效地完成了其他门店的需求化定制。
抖音网页端的用户体验沿袭了手机App端的风格，用户进入网页的核心目的就是看短视频打发时间，于是进入首页即可看短视频，不需要用户手动选择分类，并且手机端的用户偏好通过用户的账号同步至网页端，有了很顺畅的用户体验。
相比快手网页版，快手延续了常规视频网站的交互方式，将视频内容分为短视频、直播、同城、长视频、小剧场等多个类别，由用户自主去选择观看的内容，内容虽然更加多元，但确实路径过长，不够直接。
再举个例子，新版的淘宝网页端不再像个门户网站导航，而是通过数据分析用户喜好来主动推荐代替用户自己选择。用户来淘宝网页端，其实并不是买东西，大众用户已经习惯了在手机上进行支付，到了网页端反而会不适应。用户来到淘宝网页端的更多目的就是逛，看有没有自己想要的东西，遇到喜欢的，就点进去看了。于是新版淘宝通过个性化推荐把过去复杂的活动运营页板块、特价板块、品类板块替换掉了，让用户在网页端获得更好的“逛街”体验。
而京东，在首页做了复杂的流量分发设计，通过不同的频道、不同的板块将用户引流至相关的专题页面，再进行商品浏览。本质上来说，用户来到淘宝、来到京东的目的都是因为闲，而淘宝的通过数据智能，大数据精准推荐用户喜欢的商品，简化了用户的使用路径，并且使整体页面更加简洁。
网页的官网、首页承担着产品介绍、流量分发、增强品牌印象等的职责。我观察到越来越多产品官网都开始采用3D元素、视频背景、大图元素、微动效来让页面呈现更加具有质感和动感。
它是由Web3D技术的发展而兴起，能够给网页Banner带来更强的视觉吸引力，同时也强化了公司融合了AI技术的品牌印象。如法大大官网、腾讯云、阿里云的首页Banner展示。法大大首页Banner，鼠标滚轮向下滚动3D元素会相应产生变动，文案与元素一静一动，对比明显，也更易于用户注意到文案信息。
大疆官网首屏采用了全画幅大图的形式展示热门产品，下方的产品推荐页自动播放宣传视频，提升了页面的视觉冲击力，展示了其科技属性。
疫情时期，线上办公的需求和频率激增，线上协作兴起，许多办公软件都有了多人场景编辑功能。特别是对于复杂的项目，需要团队成员共同完成，协同合作的功能越来越受欢迎。
比如我们熟悉的figma，逐渐取代了传统UI设计软件ps、sketch等的头部地位，其中的项目协同功能更是广受欢迎。只需要发送项目链接邀请成员即可进行项目协作，还支持多人标注、语音沟通，大大提升了工作效率。
许多办公软件也都上线了类似的功能，比如幕布可以通过设置权限、发送链接或二维码来邀请协作者共同编辑文档，为产品的使用场景提供了更多可能。
曾鸣在《未来商业20讲》里说：“未来的互联网世界的两大趋势是数据智能、网络效应”。
这在PC端也得到了印证。淘宝网首页、抖音首页、哔哩哔哩网页端将PC端与APP端的数据进行互通，并对用户行为偏好数据进行分析，为用户提供更加精准的信息流的同时，还使得页面的交互更加简单，视觉效果更加简洁，过去依赖用户自主选择进行流量分发的形式将会越来越弱势。
在工具类产品中，利用数据智能化可以将用户操作上的复杂度转移给系统，从而降低用户使用门槛，提升用户体验。与此同时，工具类平台也越发灵活化化，通过模块化设计来自定义搭建不同用户的使用需求的产品，还能节省资源建设成本。
网络效应的部分应用体现在用户在使用工具类产品中，不再是孤单的个体，而是能通过线上协同，让用户与用户之间能够产生共同协作，共同交流，更加方便地完成任务。
作者：为美好而设计
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
会员权益上线后，为了让更多用户享受到更优质的糖豆使用体验，对于会员价格推出了一系列优惠活动。下面将简单介绍一下，在视觉表现层面，我们是怎样将活动的主要信息传达给用户。
首先，活动的主要信息的显示区域，是根据最小机型的屏幕尺寸制定范围，原因如下：
糖豆大部分用户的使用设备多为老旧的千元机，屏幕小、性能低是主要特点。为避免跨屏浏览，减少老年人的注意力分散，将主要信息一屏展示，信息精简的同事，防止信息过载。
同时一部分用户习惯不往下滑动页面，使得信息展示的不完全。在这种情况下，适当减少缩短头部修饰及氛围元素的显示面积，让活动的信息及功能在不做任何操作的情况下，能够清晰展示。
一开始弹窗的制作想法，是将信息视觉化，将加赠的部分独立展示出来，突出了此次活动的优惠价值。但这样的表现形式使得各个元素分散，从上至下的阅读轨迹在中间被斩断成从左至右，阅读成本剧增的同时，老年人也读不太懂。
最终的解决方案为一句话表示，通俗易懂，让用户一眼明白，在什么时间，什么内容，要做什么。
糖豆App与大屏端的图标视觉上差异不大，作为辅助图形，意义感知不强，用户无法从头图部分得知这是个关于什么主题的活动。且4.1折只是个概念，具体优惠金额多少没有直接体现，无法吸引用户的了解购买。
什么是超级会员？用具体的电视与手机展示的同时，标题“手机电视都能看”进一步作出了解答，我们用最直白的方式解释了什么是超级会员。
用户对价格非常敏感，尤其是中老年用户，如何体现价格的优惠力度是我们需要解决的问题。
中国人的阅读习惯一般是从左到右从上至下，于是将价格内容放到左上并且放大，突出第一层级的信息；优惠金额放到价格下方，这是第二层级；右边放上价格的组成及原始价格的辅助信息，整体简洁硬朗，清晰明确。
随着年龄的增长，伴随生理变化看不到的大脑老化，中老年人的注意力和记忆力会呈大幅度的下降。我们既要保证新鲜感的同时，又要注意用户的学习成本。
在玩法相同的情况下，只更改了视觉元素，活动信息/功能的位置保持不变。
作者：ANOTHERZOUZOU
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
沉浸式体验是让人专注在当前的目标，全身心投入并感到愉悦和满足，从而忽略时间的流逝。应用到界面上则是更强调聚焦内容，减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面，通过精细化的设计，在多样化的手机屏幕中呈现时，能够带给用户更为沉浸的视频观看体验。
视频播放器中视频画面当然是最主要的内容，以此作为突破点进行思考：
· 最大化画面视野：通过改变视频画面本身的大小，减少页面“留白”，让用户更聚焦视频画面，观看视频时更专注。
· 最佳视线观看位置：将不同高度的视频按照页面结构去布局视频画面，通过画面避让状态栏、顶底bar结构的方式，使画面更加整洁，减少
元素混乱带来的干扰，同时整体位置偏上展示，视线落点更加舒适。
· 观看体验连续性：视频浏览过程中，非必要不打断视频浏览，在进行如查看评论、临时退出播放器等行为时，保证视频播放的连贯性，方
便用户多操作。
01.视频画面裁剪
随着时代的发展，为提升消费者对手机的操作体验，智能手机逐渐多元化，手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端，手机屏幕尺寸的多样化影响到产出视频尺寸的多样化，同时用户可通过视频编辑工具任意编辑视频尺寸，最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达22万多种，用户使用机型近300种，在视频尺寸多样性及视频展现媒介多样性的现状下需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。
我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果，并最大化视频画面。减少环境干扰，给用户带来沉浸式感官体验。
视频宽撑满手机屏宽后，将视频尺寸分为四类：
1) 视频高度>手机屏高
视频画面宽度撑满屏幕后，视频整体居中于屏幕，居中裁剪视频多余画面。
注：不允许画面高度撑满屏幕，宽度自适应导致画面左右留黑效果。
2) 视频高度=手机屏高
视频居中于屏幕，刚好填满屏幕，不需要裁剪处理。
3) 1:1<视频高度<手机屏高
此类尺寸较复杂、难处理，于是将限制裁剪面积和展示位置相结合，保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果，反推定义最大裁剪面积，根据显示位置多次判断视频放大后是否符合既定裁剪面积，最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制，并且将裁剪面积云控处理，根据业务内不同时期的诉求限制比例来灵活调整展示效果，双端也可分端定义数值；横向协同及迭代成本极低，便于快速上线验证效果。
4) 横版视频（高宽比≤1:1）
横版视频在手机屏幕中面积占比较小，画面可识别度和饱满度稍有欠缺，轻微扩大画面视野，画面浏览更加清晰有冲击力。以不影响内容理解为前提，根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。
锦上添花，引入文字内容识别
为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题，发挥百度强大的AI技术优势，引入文字识别技术及视觉展现规则，进一步提升视频展现样式的可控性，同时能够通过尽量少损失画面达到画面放大的效果，平衡画面沉浸感和完整性的关系。
左右文字被裁剪情况：文字左右设置安全距离，保证安全距离在屏幕内。如果安全区超出屏幕，则按照上方描述的裁剪规则进行退档显示（满屏至不裁剪之间的档位），直至文字不被裁剪。极端情况退档至最后一档，视频画面不裁剪。
横版资源文字左右被裁剪情况：按照固定尺寸退档
上下文字被裁剪情况：文字上下设置安全距离，保证安全距离在屏幕内。如果安全区超出屏幕，则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示，此情况只会从全屏一档显示退至二档显示。
裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发，灵活配置到不同业务中，保证裁剪规则一致的同时又能针对不同业务进行定制展现，也可快速调整并支持上线实验，来验证适合自己产品的展示效果。
02.智能满屏
通过裁剪方式放大画面视野之外，还通过让用户自主交互操作再次放大画面视野，调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大，满屏方式更加激进极致，画面放大更多。开启方式通过面板功能按钮开启智能满屏外，增加便捷交互开启手势，用户可双指放大快速开启。
由于满屏是用户主动操作放大行为，可以接受文字内容被裁剪，但也需要有节制的放大，避免带来画面裁剪过多视觉体验不佳的问题。为了保证95%以上资源撑满全屏，达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例（根据自身业务视频资源判断），将视频资源细分为3类进行不同效果处理：
1.可继续放大至满屏的视频，则进行满屏展现。
2.不可继续放大的视频，如果继续放大会导致裁剪画面过多影响观看完整度与观看体验，则保持上方提到的裁剪规则，不做另外处理。
3.横版视频统一放大至固定尺寸，可根据自身业务资源进行放大尺寸的定义。
通过布局合理、舒适的画面位置，也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方，于是在设计中我们将视频画面放在屏幕偏上的位置，用户视线落点更加舒适，一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置，能减少下方标题等信息过多对视频画面的遮挡。
为了精细化处理不同比例的视频资源，竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。
竖版视频：高于1:1的视频，按照页面结构布局视频画面，避让状态栏、顶底bar操作，避免与页面结构冲突带来画面凌乱不美观的问题，同时能减少画面参差带来的干扰，增加沉浸浏览感受。
横版视频：等于矮于1:1的视频，画面按照屏幕高度比例展示在偏上的区域，高度比例可云控便于灵活调整。
01.视窗挤压
为了满足用户在视频场景多角度信息获取，在不打断用户视频浏览的基础上建设视窗挤压交互体验，提升观看视频的相对沉浸感。在视频场景观看评论时会弹起半屏面板，遮挡住视频内容，导致用户无法在浏览评论的同时观看视频内容。对短视频重度用户来说，对同时看评论和看视频习惯的用户有挑战。通过视窗上移动挤压功能，在浏览面板内容时不对视频内容打断，弱化面板内容给用户带来的影响。
视窗高度固定，画面宽高比越小画面内容越小，观看体验不友好，所以竖版视频对压缩后的显示尺寸进行干预，定义最小视频画面展示比例，尽量扩大画面视野，保证观看视频的舒适度。
02.悬浮小窗
在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验，旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放，同时也能在屏幕角落观看到缩略图大小的视频播放窗口，可以从任何页面中观看视频，我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感，提升用户使用体验的满意度。
沉浸式体验设计是帮助用户减少画面干扰，让用户专注于当前的视频浏览，忽略时间的流逝进入心流状态。我们通过放大画面视野，增强画面冲击力的方式减少干扰，并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下，保证画面效果的稳定和可控，并且不会受阻于未来手机机型的扩充发展，普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断，进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式，为用户带来更加舒适的观看使用体验。
作者：百度MEUX
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝 http://www.lanlanwork.com