作者：蓝蓝
表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。
UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。
一、基础的表格设计美化
基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。
为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。
可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。
二、特别宽的表格怎么设计？
有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：
方法一
如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。
方法二
如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。
表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。
方法三
大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。
上图：大表格里面嵌套小表格
方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。
一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。
第三 与表格配合的部分设计
第一种 “搜索查询”和“过滤”部分的设计
大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。
过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。
上图：搜索和卡片式信息的组合
第二种 表格操作部分的设计
对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。
也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，
还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。
第三种 表格和卡片式设计、统计图的整合切换
表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。
有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
原创艺仁 蓝蓝设计 2020-12-18
其中，3D成为2021年的主要趋势，我们在所有的设计类型中都可以找到它。2021年3D的新颖之处在于应用在了UI界面上，而在此之前，UI界面一直被平面设计所主导。即将发布的Mac新操作系统Apple Big Sur也让3D在UI设计中得到更频繁的使用。
ios14的界面更新将影响所有的UI设计。ios14新推出的Widgets小工具分为大、中、小三种尺寸，用户可以自由布置界面。因此设计师需要设计3种样式的Widgets小工具图标。
线稿填色这种插画风格的流行在2020年已经初见端倪，在2021年也将继续流行下去。
近年来3D风靡设计界，有一些精致的插画给我们留下了深刻的印象。简约而配色鲜明的3D插画将成为2021年插画的流行风格之一
时尚是个圈，70、80年代怀旧风漫画将在2021年重回潮流。这种经典风格的插画特点是使用轮廓、简单的形状和一些细节填充。
这种风格的插画非常像凌乱的涂鸦，乍看未完成，但所有的细节都是经过深思熟虑的。重叠的形状和强烈的色彩让这些插画与众不同，同时能有效激发灵感。
VFX或视觉，是将现有的镜头与计算机生成的图像相结合，创造出逼真的场景。随着众多方便友好的软件出现，VFX开始在视频和短片中会变得更加普及。
3D影响了所有的设计领域，我们甚至可以说，2021年，它主导了几乎所有的数字设计。随着虚拟现实在越来越多的App、网站或软件中的应用，3D也将越来越重要。而设计师们可以将3D和摄影或2D结合起来，创造出一种不同的设计效果。
动态logo已经出现了好几年了，但现在他们被更多的品牌使用，因此非常值得我们的注意。打开App之后，我们首先看到的就是logo，将logo与动效结合能给用户留下深刻印象，从而更容易记住品牌。
因为疫情隔离，很多公司开始投资AR技术。在未来，我们可以看到，在人工智能和机器学习的帮助下，增强现实技术将大规模应用于各个领域，无论是医药、艺术、商业、客户服务还是导航。
排版是设计中最重要的元素，有经验的设计师甚至可以只使用文字排版来设计视觉标识。排版对于建立信息、建立强大的视觉层级、传递信息以及为用户创造良好的体验都很重要。
从上世纪初开始，几何形状就已经用于视觉艺术中，尽管这不是一种新的设计趋势，但在2021年的平面设计中，无论是海报、印刷品、包装还是品牌识别，都将聚焦于几何形状。
线条艺术充满魅力，并可以在各种设计领域内应用。
疫情让人们对环境保护格外重视，因此包装行业必须开始采取措施，减少对环境的影响，使用可生物降解的材料。
经过深思熟虑后设计的独特插画可以为你的品牌故事产生广泛影响。因此你必须谨慎地选择能够传达你的品牌故事的插画。它们必须是有意义，并给品牌带来一致性的。
在销售产品时，用优质的包装设计讲述有关品牌的迷人故事，能有效激发出购买欲。包装上的所有元素都应该为客户带来独特的体验。
在人人都离不开手机的时代，包装也可以和手机产生互动，比如使用AR等手段创造品牌知名度。
权威色彩机构 Pantone 公布了2021年度双流行色：灰+亮丽黄。
这是继2016年水晶粉+宁静蓝之后，第二次推出组合年度色，寓意光明，传递力量与希望。灰+亮丽黄这两个独立的色彩，联手打造出梦寐以求的色彩组合，像是自然风化的岩石上浮起的日出，带来了一种更深层的体贴和踏实感，同时也表现了对未来充满希望的乐观精神。
当人们期望寻求能量来强化自己，克服持续的不确定感时，坚实可靠而又热情洋溢的色调，恰好能够满足我们对生命力的追求。
在过去几年里，潘通的选择充满了社会意义，被看作是对全球情绪的捕捉。
目前，已有相关设计产品使用了潘通2021流行色：
本文蓝蓝设计着重介绍一个未来可以配合3D设计趋势的全新设计风格-新拟态设计。
光是人眼感知世界的媒介，温和柔美的光影变化辅以精致优雅的配色纹理展现出真实世界原本物体的丰富质感。光影的把控影响着事物的情感表达，光影的流转变化传递出不同的情绪，同时也影响人对事物空间感的判断。
新拟态是一种图形样式，其原理是通过简单富有层次的光影变化为界面的UI元素赋予真实感。新拟物算拟物风格的一种，只不过表现形式相对特立独行，最早出现在国外网站dribbble上,之后陆续被收录在2020设计趋势预测中，在2019年的年末慢慢被大家熟知，讨论，重视起来。
在2020年2月11号举行的三星视觉发布会使用新拟态的设计手法作为设计海报。带有渐变的浅灰色背景，结合富有层次感的光影渐变，充满未来感。相对克制的色彩选择和多角度的光影变化，强调出产品丰富的质感和科技感，简洁而神秘。
这是一款多平台记录工具，有道云笔记的拟物化设计风格相对谨慎，主要的操作按钮部分，均采用了“拟物化的”风格，但是在大面积的展示区域和非功能性按钮依然沿用了简洁的扁平化设计。在保证“新拟物”质感的同时，保证主体内容的可阅读性，和整体页面的清爽感。
蓝蓝设计也在设计项目中结合目前流行趋势进行探索设计，容器元素通过光影的变化，展现出不同的状态，通过模拟物理层面“高程”的不同，形成不同的组件状态，从而演变成承载各式功能的基本元素。
在扁平风大行其道的当下，公众审美难免已经疲劳，设计风格再次回归拟物化，或许已经是主流趋势。未来，3D设计，轻立体设计将与扁平化的设计风格相结合，产生新的设计语言和领域。
从轻拟物风格到Glassmorphism风格，拟物化设计的演变进程已然开启，未来，无论是3D设计的加入还是扁平风格的延续，“质感”都将成为设计过程中被着重强调的风格。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一般进行软件首页的设计，我们先思考：
首页要放什么内容？哪些是核心的，用户最在意、最常用的。
软件产品提供什么样的核心价值？
用户常用的功能是哪些？
未来1到3年软件会增加什么重要的功能？发展方向？
需要借助软件产品传达哪些企业价值观？
在交互上和需求上先和软件公司做一些交流，双方达成一致再进行。
设计后的效果图
1. 理解用户所需，优化交互，增加部分内容。告警事件除了原型中的时间线按顺序发生外，加了用户头像，已处理、待处理、紧急任务统计数字，让用户可以总览全局，做到对工作量心中有数。
2. 数据中心信息，秉承着信息简单易懂，界面引导友好的理解，把信息分组，4个关键信息总数并列2排，设计了相应的拟物化图标，美观整理有秩序。在线和离线位数增加了表达当前比例的横向柱状图，用户从绿色和红色的区块长短中可以轻松感知，比原型的表达方式又多了一个纬度。
3. 本机系统信息，将单个的数字转化为仪表盘，可以表现出高中低预警和正常的多重含义。通过轻拟物的表现手法，增强驾驶舱的沉浸式体验，营造中控管理氛围的真实感。
4. 所有的设计，都是基于对业务的理解，回到本质，思考用户是否需要多层次信息的统计分析，不同的纬度呈现结果。最终以感性、直观、优美的方式视觉表达，并考虑到数据可视化的控件类型和实现难度。
这个案例比上一个案例更加整体，重大的项目应该采用这种方式来进行。
1 同类产品APP对比：
蓝蓝设计观察了20家流量类的App。通过在应用市场监测流量平台类app的下载量，我们选取以上三家为竞品。
『流量宝』中国电信出品。
『流量银行』中国联通出品。
『流量来了』，世纪龙信息网络有限责任公司出品。
分析内容：
1. 界面布局对比
2. 核心功能对比
3. 色彩对比
4. 首页印象对比
5. 界面设计优缺点
2 产品洞察 明确产品的定位和发展方向
按照用户对于流量的认识、了解、使用的程度，通常流量经营可以分为三个发展阶段。
在流量消费培育阶段(2008-2012年)，随着智能手机的快速普及，客户上网频率逐渐加大，对于网络的使用逐渐从PC互联网向移动互联网转移，其标志就是智能手机用户在2013年超过了PC保有量。这个阶段主要以前向流量客户经营为主，采取流量包月甚至流量免费等方式驱动流量增长。
在流量理性消费阶段(2013-2014年)，流量消费习惯逐渐养成，运营商开始改变甚至取消流量包月无限量使用策略，用户开始感受到流量的费用压力，开始对自身的消费行为和内容进行整理，逐步回落到用户能够承受的流量消费水平。而流量经营主要收入来源依然是个人客户。
在流量后向经营阶段(2014年-)，随着运营商发现流量收入增速放缓的现象，运营商开始尝试定向流量、后向流量捆绑、流量800等面向后端企业的运营。至此，运营商正式迈入流量平台化经营时期。
产品不断的迭代，使我们的产品在不断的完善。 流量平台的定位也在不断的跟随行业的变化在不断的变化，才能使我们的产品得到用户的认可。
功能方向：使产品向货币化、社交化、媒介化转变。
增加用户使用率，创造可以长期登录使用的情景和功能。
基于个人：监测自己的手机流量及使用情况，提醒自己：少了可以买，也可以把多余的流量转给家人、朋友、同学、或充入手机、
基于社交：比如：发红包、赚流量、做任务、签到送流量，流量兑话费等、是可以尝试的方向，使我们的产品向货币化、社交化、媒介化转变。
视觉方向：使我们的产品更加的年轻化、拥抱90、00后。
交互方向：减化路径、清晰简洁
3 基于产品分析策划进行主页的交互设计
在不断的思考、对功能的深入理解后，交互设计师对首页构图了三个方案，希望能契合产品定位并在布局和表现形式上与竞品区别，展现出爱流量的。
团队讨论思考后，认为将“流量监测和流转“做为首页目前重点，赚流量做为以后发展点。确定第二种布局(中），进行视觉设计。
4 视觉设计成果
主页设计风格确定后，就可以进行其它页面的视觉设计啦。
软件的优化设计是一个长久的的事，挑一些典型页来设计是基础的部分。
目前国内都在进行数字化升级进程，这一二十年来，从不知UI为何物，到企业纷纷重视，每个企业都有自己的设计师，重点的项目再外包给专业公司。关注整个用户体验，用体验地图触点做设计，在中小型的项目上存在认识不够或目前达不到应有的预算和精度。未来发展中，相信会渐逐把重要软件的整体用户体验设计、服务设计、品牌设计的融入做为增长点。
蓝蓝设计公司有一个群，每天都在分享好的UI设计，如果你有兴趣，请报上姓名和公司职位，我们共同成长和学习。请加微信ben_lanlan, 标注“想加入设计分享群”.
2021年产品体验日记，小目标365节，第016~030节。
前言
在互联网产品日趋成熟的今天，APP同质化越来越严重，使得设计不够精致、没有气质及品牌感。一个设计精致APP不应漏过任何一个细节，美观、可用和的界面设计都需要花费大量的时间从细节上去打磨，并从多方面钻研并创造出打动人心的UI/UE设计。
2021 | 第02篇分享目录（016~030）
016.「QQ」手势力度决定页面展示范围
017.「高德地图」地点打卡-未来回忆曾经的足迹
018.「优酷」会员转化-击溃用户最后一道心理防线
019.「网易云音乐」播放中的歌曲快速定位
020.「boss直聘」多个入口-简化二次操作流程
021.「菜鸟」备注-快速找到列表中的包裹
022.「虾米音乐」符合产品特性气质的标签栏
023.「QQ音乐」触手可及的选择性MV播放
024.「微信读书」提升操作效率的进度条控制
025.「哔哩哔哩」信条-承包笑点的逆向弹幕
026.「淘宝」应对意外退出的通道
027.「微信」行为预判-提升操作效率
028.「抖音」搜索-抚慰每一个被情绪困扰过的灵魂
029.「京东」送礼物-更是一种神秘和惊喜
030.「叮咚买菜」一顿吃光-减少食材的浪费问题
016.「QQ」手势力度决定页面展示范围
产品体验：
QQ聊天的表情列表版块，系统会根据用户上滑的力度来确定表情选择区域的大小，力度越大，列表区域占比就越大，同屏可供选择的表情就越多。
设计思考：
经常使用QQ表情包的用户都知道，其更新频率非常快。比如社会上的最近发生的大事件、互联网当前流行的热词，甚至在疫情期间，凡是跟疫情相关的表情包都在不断变化，从开始的安全防护到后面的线上办公等，以至于深受广大用户的喜爱。
QQ的表情功能其中还有一个细节，用户在选择表情时，系统根据向上滑动的力度来确定表情区域所展示的范围。滑动的力度较大时，考虑到用户可能需要在更多的表情包中选择的情况，固增大显示的区域，便于用户在同一屏界面中可浏览的范围更大，同屏展示更多的表情包让用户在更短的时间内找到自己所需，所见即所得，对用户进行的定性操作十分友好，从细节处理方面提升了用户体验。
017.「高德地图」地点打卡-未来回忆曾经的足迹
产品体验：
在高德地图的足迹功能里，可以对我们所在的地点进行打卡，系统就会以亮光形式显示我们去过的城市，并留下“✔️️”标记，点击可以查看自己的打卡时间和具体位置。
设计思考：
我们在高压的生活下及忙碌的工作中，曾经去过很多地方游玩或者路过，随着时间不断的流逝，这些都成了模糊的记忆。当有一天静下心来细想，好想去过的地方很少，甚至回忆不起来。
高德地图APP的足迹打卡功能可以帮助我们记录所去过的每一个地方，分为自动和手动打卡。在设置中开启自动打卡后，当用户使用导航的目的地属于名胜古迹、美食地标建筑等类型的地点，导航结束后，即可自动完成打卡，如有特别需要，还可以通过手动打卡记录每一个点。打卡功能虽然在表面上并非用户硬性需求，但在未来的某个时间看到自己曾经的足迹时也略表欣慰，还可以满足部分用户的虚荣心，也许在无意间就能抚慰认为自己去过的地方太少、较为伤感的幼小心灵，给与温暖的安抚与力量。
018.「优酷」会员转化-击溃用户最后一道心理防线
产品体验：
优酷普通用户在看影片前面的广告时，倒计时后面会提示xxx元可关闭广告，广告下方通过展示会员特权以鼓励普通用户升级会员，且定时滚动展示刚刚已加入会员的文字提醒。
设计思考：
不管哪个影视平台，无论何种设备，非付费会员用户在看影片前都需要先经过长达几十秒的广告，这是任何人都无法避免的一堵墙，广告除了可盈利之外，还能起到激励普通用户开通付费会员的用处。
优酷视频激励普通用户开通会员的的手段可谓是拍案叫绝。
①、利益引诱：在广告倒计时的后面直接展示开通会员的金额， 通过优惠等利益刺激手段，吸引用户继续完成对产品的消费。较小的金额可以降低用户的经济成本，同时增加用户对会员价格的心理接受程度，减少其防备心理，有很大的几率吸引用户产生开通会员的动机，促使用户行动增强转化（除了首次开通连续付费业务，所付出的金钱成本较低外，其他情况下价格并无优惠，不过一旦让用户产生了付费动机，这些都是后话）；
② 、增加说服力： 广告下方罗列了部分比较重要的会员功能，围绕开通会员后的特权并强调效果，以此证明会员内容的质量与真实性，吸引用户去了解，为用户增加开通会员驱动力；
③、羊群效应：提示****刚刚加入了会员，利用从众心理，因为用户的想法和行为容易受到周围人们的影响，往往会胜过自己的理性认知。通过前面的用户已做了前驱和后盾，不断的引导和刺激用户去开通会员（羊群效应在现实生活中遇到的很多。比如：大部分用户出去吃饭，对空无一人的饭店没有动力，往往会选择里面已经坐了一些人的店铺；走在外面，哪里围的人多，就想挤进去看个究竟）。
019.「网易云音乐」播放中的歌曲快速定位
产品体验：
在网易云音乐播放当前列表的歌曲后，当界面存在上下滑动的操作行为时，右下角会出现定位图标，点击可直接定位到正在播放的歌曲位置，如无任何操作，3秒后图标自动消失。
设计思考：
我们在听歌时，如果是无目标的行为，基本都会进入到某一个类型的列表或收藏歌单，进行顺序播放，比如飙升榜、新歌榜等。如果有兴趣，可能会在列表中上下滑动来看看是否有自己熟悉的歌曲，等最后要回到正在播放的歌曲位置时，就尴尬了，需要花费更多的时间来找到，在自己收藏的歌单中就更不用多说了。
网易云音乐在歌曲列表中增加了快速定位按钮，当系统检测到正在播放的歌曲列表中有滑动操作时，图标会自动出现，点击快速定位播放歌曲位置，方便快捷、省时省力。如果你的歌单中添加的歌曲太多，又无法找到播放的歌曲时，不妨试试右下角的定位按钮吧，此功能真的很人性化。
020.「boss直聘」多个入口-简化二次操作流程
产品体验：
在boss直聘求职关键词页面，单点复选框选中/取消，底部同时提供已选中关键词，可进行单个删除或通过左下方的清除按钮一键删除。
设计思考：
在用户的常规认知里，选项条件为数不多的复选框操作都是单点选中/取消，这种操作方式基本也成了用户的惯性思维，若站在用户体验角度深挖细节的话，即使是大众用户都认可，其实也没有最好，都还有上升的空间。
boss直聘的求职关键词选择，在这方面就做的更好，除了常规的单点选中/取消外，其底部还提供了已选中的关键词条，用户可在小范围内清楚的知道已选中的内容，让需求更加集中，便于进行统计、对比或删除等操作，避免在页面多个目标中寻找而增加时间成本。另外左下角还提供了清除按钮，需要重新选择目标的用户，可一键删除，节省了之前多次点击的重复步骤，简化二次操作流程。
021.「菜鸟」备注-快速找到列表中的包裹
产品体验：
菜鸟的包裹列表，左滑其中的一个，可通过包裹备注修改名称，方便用户在包裹较多时有目标的查看。
设计思考：
网购已成为用户的日常习惯，没事的时候淘宝逛一逛、京东走一走、不急用的就在拼多多砍一砍。但网购平台何其之多。我曾经碰到过这种情况，在不同的平台都买了商品，其中有急/不急用的。最为难熬的就是等待物流了，频繁的奔波于各大电商平台个人中心的订单页面查看最近物流状况，步骤繁琐不说，还浪费大量的时间，手机差的还会闪退卡顿，相信这也是很多网购用户的苦恼，直到菜鸟包裹的出现......
菜鸟定向的集合各大物流平台的包裹数据，通过手机号码，将单个用户的包裹归类到一个地方，非常方便。在使用过程中，还有一个很友好的设计细节，包裹名称备注。在包列表中，可选中其中的一个包裹左滑，对名称进行备注，便于用户包裹过多时需要对其中部分包较急的包裹进行频繁的查看，备注之后一目了然，能降低因误点造成重复操作的可能性，快速找到想要的包裹，方便用户有目标的查看。
022.「虾米音乐」符合产品特性气质的标签栏
产品体验：
虾米音乐顶部标签栏的选中状态，文字放大的同时配合一段起伏较大的音频波纹动效，彰显行业产品特性。
设计思考：
标签栏是APP界面中较为常见的控件之一，在视觉表现方面，只有选中、未选中两种状态，其设计也比较简单，通常会在文字颜色/字重大小上进行变化，标签下方加上小长条来区分两者的状态，用户对于这种表现方式也是高度认可的，如果不想被同质化，未在细节上下足功夫，就很难设计出彩。
虾米音乐的标签栏选中状态除了文字大小对比非常明显外，下方是一段音频波线动效，跳脱出较为常见的设计规范限制，从行业属性中获取灵感，把用户在现实世界中物理认知的“声波”形象来源作为产品特性，提取出具有独特气质的视觉音频波纹样式替代选中状态的小长条，这样能建立起视觉上的联系，让用户产生由内而外的一致感受，既有设计感又符合产品特征。
023.「QQ音乐」触手可及的选择性MV播放
产品体验：
在QQ音乐播放页封面图的右下角，会显示该歌曲相关的视频数量，点击则展开视频列表，通过左右滑动选择想看的视频，可直接进入视频播放。
设计思考：
有人说：听音乐是一种情绪，也是一种心情，能从不同类型的音乐中听出共鸣，去发现一些事物的美好。当我们发现自己喜欢上一首歌曲时，有没有想打开该歌曲MV一睹演唱者的风采，或者边听边看去感受歌曲意境和内容所带来的一些理解上的辅助。
QQ音乐将歌曲的MV展示在播放页封面图片的右下角并提示数量，近在咫尺，便于用户在听歌的过程中对视频选择性的播放。一般音乐类型的应用在都是一首歌对应一个MV入口，需要先通过页面的跳转才能对视频进行选择，QQ音乐的这种交互路径能避免用户在听歌过程中选择视频时造成中断，通过左右滑动选择想看的视频，选中即可直接进入视频播放页，优化了操作路径，减少操作步骤，触手可及且不打断沉浸式的音乐享受。
024.「微信读书」提升操作效率的进度条控制
产品体验：
打开微信读书的进度控制条，点击游标左右滑动，除了页面内容变化外，进度条上方会显示当前页码/总页码，并提示章节及标题；长按游标可单独对书本的页码进行精准化的切换。
设计思考：
读书就是和世界各个行业的人物进行一对一交流的过程，如果想通过读书收获成长，就要靠自己看书、学习、思考，并把知识用到自己的工作和生活中，不断让自己做出改变，因此也诞生了很多读书类型的应用，线上看书不仅能适合多样化的环境，还能节省经济成本。曾经有人感慨，电子书是线性的，而纸质书是立体的，想看前面有联系的内容就可以随时返回去再读，而电子书只能通过目录和书签来解决，要经过多次的操作和页面的跳转，且书本的内容都是通过数据传输、每次都要刷页面才能看到内容，有可能会打扰用户看书的思路，相对纸质书籍，看书效率和吸收程度就低了许多。
其实并非全是如此，微信读书考虑到体验方面，针对用户在读书过程中可能出现的前后频繁翻页的问题，在进度条控制细节上做了很多便捷化的设计。用户可通过点击或长按控制条上游标，根据自己的实际需求进行前后长/短距离的滑动，就能轻松满足自己所需要的页面转，并伴随明显的小窗文字提醒。此功能相对纸质书籍虽然不能堪称完美，但足以解决用户线上读书时最基本的需求，让操作流程变的更加简单，大幅度的提升了操作效率，节约时间成本并提成产品的易用性。
025.「哔哩哔哩」信条-承包笑点的逆向弹幕
产品体验：
在哔哩哔哩看《信条》电影，播放到时间发生逆向片段时，弹幕的文字及方向也发生逆转，即逆向弹幕，两者结合在一起非常应景，网友几乎被“惊掉下巴”。
设计思考：
有很多用户喜欢开着弹幕看视频，弹幕有可能是视频内容的良好补充，大部分视频是不能牢牢抓住观众，也不需要观众死死盯着看的。各种神弹幕、刷屏本身就是内容的重要组成部分，所以看着弹幕可以给我们在看视频的过程中带来更好的氛围及愉悦的体验（部分不爱开弹幕的用户除外）。
最近被一个脑洞的弹幕方式吸引到了-逆向弹幕。B站在《信条》电影里隐藏了一个很有趣的彩蛋，正负时间线穿插（片头也逆向了）的情节发展，设计了让人惊艳的逆向弹幕，跟电影的逆向片段组合在一起时非常应景，神奇且趣味化的弹幕方式让用户几乎“惊掉下巴”，看完电影后仍能记忆犹新。有人直言“当时在电影院看完信条后，是不是倒着走出来，影院就把买票的钱给退了”。
026.「淘宝」应对意外退出的通道
产品体验：
在淘宝的其他功能页面发生闪退或意外结束应该进程时，再次进入首页，会提供“打开上次访问的页面”的快捷入口，如无需要，几秒后入口自动消失。
设计思考：
智能时代，每个人的手机中应该都装有不下几十个APP软件。当我们正沉浸在某个APP当的内容时，因设备或其他原因意外的结束了应用进程，当再次打开时，需要凭借自己的记忆多番操作才能回到原来的内容处，甚至永远无法找到，为此真的是很苦恼。
淘宝针对软件意外退出的情况则留了一手，当用户在使用过程中，APP因意外情况退出时，下次进入，可通过首页提供的“打开上次访问的页面”入口，快速回到原先失踪的页面，再也不用担心内容丢失了，看似一个简单的入口，但通过细微的改进能给用户带来更好的操控感和易用性，便于用户通过短时间记忆还原。
027.「微信」行为预判-提升操作效率
产品体验：
我们在手机的其他界面发生截图行为时，打开微信对话框的工具栏，系统会把刚刚截取的图片以缩略图的方式展示在右侧，暗示询问用户是否有发送此图片的需求，几秒后会自动消失。
设计思考：
我们不管使用何种应用，在交流过程中有发送图片的需求时，除了应用本身提供的图片之外，其他都绕不开系统相册功能。如若深究用户体验，进入相册的操作路径是可以减少的。
从微信对话框页面打开工具栏，如在相近的时间内系统检测到有截屏行为时，会把刚刚截取的图片以缩略图的方式展示在屏幕右侧，点击即可发送，通过行为感知并帮助用户解决可能有发送此图片的需求，提前预判用户的操作，以提升选择效率。若无此需求，几秒后自动消失，丝毫不影响用户的其他操作。
028.「抖音」搜索-抚慰每一个被情绪困扰过的灵魂
产品体验：
在抖音搜索较为极端且消极的关键词时，比如：抑郁、服毒、不想活了等，系统会出现较为温馨的爱心画面，并通过情感化的文案鼓励以及提供心理援助渠道，以此来提高用户的积极情绪。
设计思考：
人们通常会借助于欢乐、开心来表达自己的愉悦，同时也会面临悲伤、忧虑的情况，需要表达心中的苦闷。如果没有得到有效的疏解、排遣，使得内心一直处于郁闷状态无疑是很糟糕的。尤其是目前处于高度压力下的年前人群，在环境因素、心理与生理创伤、家庭环境等情况的影响下，导致一些人因为心中的苦闷，得不到很好地宣泄、发泄，走上了极端的想法，其解决问题的方式不管是线下、线上都是从心理上入手。
抖音APP在面对极端且消极的关键词搜索时，并非跟其他应用的搜索结果雷同，而是以情绪激励的统一样式展示结果。首先通过温馨的爱心画面缓解较为消极的用户情绪，并通过积极正向的文案鼓励用户；其次，基于用户在心情低落时要得到安慰或鼓励的需求，平台提供了心理援助热线以及消极心理的疏导建议，帮助用户进行缓解或改善消极行为。作为一个短视频平台，虽然没有明确的义务去抚慰用户，但这种做法可以用温暖的方式传递爱与力量，也抚慰每一个被情绪困扰过的灵魂，让用户感受到亲切放松的氛围，是巩固用户粘性与忠诚度十分巧妙的方式。
029.「京东」送礼物-更是一种神秘和惊喜
产品体验：
在京东商城购物礼物时，可以通过商品详情页的“送礼物给TA”，节省很多中间步骤，直接在线上完成包装、贺卡、寄语和快递等“一条龙”服务，将礼物送到对方手中。
设计思考：
部分用户在特殊情况下，都有送礼物的小习惯，不管是礼尚往来、男女朋友还是送基友，有时甚至不需要理由，只想把最好的东西送给TA们。这时候可能去会店里（线上/线下）买一个对方喜欢的东西，然后经过包装+寄语，再快递给对方，因为整个流程的复杂，有时候不可避免会出现一些突发性的状况，难免造成尴尬。
在京东APP购买礼物则省去了一些列的麻烦，只需要选好礼物，即可完成从包装、贺卡、寄语和快递等“一条龙”服务，免去不必要的麻烦以降低出错的可能性，将操作流程和路径都进行了简化，让整个送礼的过程更。通过选择合适礼物的包装风格，制造出礼物的神秘感，送出的不仅仅是礼物，更是一种浪漫和惊喜。
030.「叮咚买菜」一顿吃光-减少食材的浪费问题
产品体验：
在叮咚买菜分类的“一顿吃光”列表中，菜品会根据专业厨师建议一顿的常规用量进行组合搭配包装，包括分量较小的调味品类也进行了小份装的贴心组合，避免食材偏多造成浪费或损耗。
设计思考：
“一粥一饭，当思来之不易”，勤俭节约，珍惜粮食是我国的传统美德。随着互联网带来的便利，很多人足不出户便可在线上平台完成食材的购买，但买菜也存在的很多困扰，比如买少了不够吃，买多了又浪费，没有一个确切的方案可以让买的一顿食材刚刚好，因此会造成食材的浪费和更多的金钱成本。
叮咚买菜推出的“一顿吃光”栏目，用倡导勤俭节约的用餐理念与生活方式，筛选出用户经常购买的食材搭配，再根据专业厨师对食材配比，进行分量、包装及动态调整，以最大化满足消费者需求，减少食材的损耗，在很大程度上解决了买菜很难确定食材分量的问题，不仅让用户每餐都吃得新鲜健康的同时，尽可能地减少食物浪费。
结语：
设计师需要养成体验产品的好习惯并将优秀的产品细节记录下来，加强自己的记忆，不仅能提升自己的语言组织和总结能力，也为日后输出优秀的作品当铺垫，对自己的能力提升以及未来的职业发展带来便利。
本期产品设计细节分享结束，我们下期再见。
转自：站酷
作者：大漠飞鹰CYSJ
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
