在今天的 UI 设计领域，由扁平化设计风格占据主导地位，已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外，对设计师而言就是设计的难度大大降低了。
一个界面的 UI 视觉元素，仅仅只需要图片素材、矢量图标、几何、文字，UI 设计师的工作仅仅是对内容进行组织和排版，涉及到原创的也仅仅只有少量的图标（大多数人还画不好）。
这种状态持续了很多年，看起来岁月一片静好。
但是，这两年市场发出了一些不同的声音，那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。
比如新拟态风格在年初炒了一波热度，各大平台和公众号都铺天盖地的发文和介绍，介绍它的设计理念和设计方法。
还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标，引起设计圈的热议。
首先讲讲新拟态设计，之所以之前只字不提，是因为我对这个风格实在没什么好感，有种对纯拟物借尸还魂的味道，且它的样式对于信息密度高的应用是完全不适用的，只能活在飞机稿里。
而国内大型应用开始在实际项目中上线拟物图标，意义就不一样了，证明这样的设计是经过几个大厂团队认可，且有共识的。
当然，这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。
今天的互联网和过去不一样，用户的增长留存不再是过去一样通过裂变和口碑完成，一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的，而互联网产品又层出不穷，佛系的等待用户临幸是没有出路，这种现状也被称为互联网的下半场。
佛系不行，当舔狗更不行（成本太高），所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高，运营活动越来越密集，广告和强提示也越来越多。比如刚打开了三个应用，进入的首页大家自己意会……
有点扯远了，回到话题上。在这种掠夺用户注意力的思路指引下，再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后，那么进一步在一些细节处应用拟物就成为必然的选择。
而拟物的应用并不可能铺设到整个应用中去，因为完全拟物化的设计降低信息浏览效率是必然的，所以它只适合做局部的视觉强化，来加强用户对特定区域的感知。
最常见的需要被凸出的要素，就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配，相信大家已经很习惯了。
只是，这些图标开始在脱离运营活动的状态下，也开始使用非扁平模式，那就不再是运营设计师的工作职责，而是 UI 设计师们绕不过去的槛了（知识盲区）！
且除了 APP 外，其它领域对于拟物设计的需求也会开始逐渐提升，尤其是目前越来越复（fu）杂（kua）的大屏数据展示、车载界面、定制系统等等。
作为新世代的 UI 设计师，多数人对拟物的设计可以说是完全空白的状态，所以是时候要重拾拟物设计这个传统艺能了。
前面我有提到，拟物主要应用在关键的图标上，但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物，而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。
首先我们看看，过去优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。
这种图标单看起来确实很好看、细致。但是，把它丢进我们当前的页面中是非常违和的，因为它们细节实在太多了，而且画起来非常耗时间，不利于项目整体的推进。
所以为了符合画面的质感，又要考虑项目效率，轻拟物这个概念开始被提出和应用，作为一个折中的解决方案。
它和纯拟物设计的共同点在于，也表现光影、结构、透视，但它尽可能精简了轮廓的复杂度、肌理和层级，呈现出更概念化、理想化、易于辨识的拟物图形。
所以，我们主要去学习的内容是轻拟物的设计方法，而不是徒手画照片（这个可以缓缓）！
而轻拟物虽然 “轻”，但它依旧也还具备拟物的基本特征，是有实体质感的。但是扁平从插画到图标设计经过多年的改版，有各种叹（hua）为（li）观（hu）止（shao）的设计，应用大量的渐变、投影、模糊的效果，比如下图案例。
这在我们之前图标的系列干货中有提过，这类设计是面性图标的进阶版，它们依旧属于扁平风格的范畴之内，不能和轻拟物划上等号。
对于这几年才开始学习 UI 设计的新手来讲，拟物已经变成一个很陌生的事物，这对行业来说是比较悲哀的一件事。
因为拟物的设计不仅仅是画图标而已，对它的学习可以全方位的提升设计师的基础素养，不仅包括对传统美术（结构、光影、色彩、透视）知识点的剖析，还包含对 PS 使用的深入探索。
可以说，自从拟物不成为必修题材以后，九成以上的UI设计师是不会用 PS 的，这极大的限制了他们自身的可能性和作品的多样性。
轻拟物本身也是拟物，所以它的核心基础和拟物设计师一致的，只是省略了更多复杂的细节。而对于整个拟物的体系来讲，最重要的东西实际上只有2个，形体、光影。
形体的表现，就是对图形外轮廓的样式的呈现。在过去我们写的图标分享中，有写过面性图标进阶的设计中，可以包含更多的细节、内部元素，而不是仅仅只有外轮廓。
轻拟物的形体设计就要处于进阶面性图标或者更难的水平之上，即你要把这个图形的内容有明确的示意并画出来，而不是用抽象的图形做填充而已。
比如大众点评的快速入口图标，虽然看起来很复杂，但是那是配色上的复杂，而不是形体轮廓上的具象化。
换句话说，拟物插画的图形基底，类似扁平插画风格图标，不能表现得太抽象，也不能增加过多的细节，需要一种恰到好处的平衡（玄学），这就非常考验设计师的判断和经验了。
并且，在描绘轮廓的时候，新手尽可能的采取正视图来进行绘制，而不要通过俯视图、侧视图、斜视图等方法来呈现图形的多个面，这样难度会大幅度上升，比如下面这种情况。
除了形体外，光影就是整个拟物的灵魂了。
当一个完整的图形完成填充色时，它是扁平图案，如果完成光影呈现的时候，它就是三维空间的立体图形，比如下面这个圆的案例：
在拟物的设计中，我们对光影的定义是至关重要的，所以首先就是针对该图形确定光源的方向，是上方、前方、左上还右上，这对后续的设计有一连串的影响。
如果对光影没有正确的解释，那么在制作细节的渐变角度、投影的使用上，就会产生错误的设计，造成光影视觉冲突和矛盾。
在创建了光源以后，物体受到光线的影响就会产生明暗面和投影，可以简单划分成4个部分，高光、亮部、暗部、投影。
这和我们学习的素描有一定的差异，美术中对光影的表现害会包含明暗交界、反光面，这对于轻拟物的来说负担太重，所以我们要去掉它们，接下来重点讲讲高光和暗部。
高光是物体作为受光物对光源的直接反映，比如人像摄影中人眼眸中的高光就是对闪光灯的镜像表现，再或者一拳超人中男主光头上长期存在的高光配饰（多数动画的光头角色都有）……
高光可以非常有效的增加画面的层次和对比性，让物体看上去更有冲击力和观赏性。
而暗部，则完全是为了正常表现物体结构和弧度增加的示意，因为不在受光面，所以颜色会变暗。在实际操作过程中，我们可以通过渐变的方式开控制明暗的表达，但尽量不要直接手动设置一个渐变色出来，而是为它叠加暗部或亮部的黑白透明度渐变。
了解这几个特性以后，下面，我们就通过一个实例来讲解一下轻拟物设计的过程吧。
作为轻拟物的演示，直接画个图标讲一遍怎么操作是没什么用的，我们要从实际场景出发，用它来解决一些真实的问题。比如看看下面的 KFC 官方 APP 首页：
总结它的问题，不难发现首页顶部业务功能太多了，顶部图标就包含30个（加滑动的），虽然每个模块图标单看都没有硬伤，但堆积到一起，就使得顶部缺乏足够的信息层级和对比性。
我们要做的，就是通过轻拟物的方式，调整快速入口最大的三个图标，凸显它们的重要性以及和其它图标的视觉差异性。先从第一个图标开始，讲解一下如何完成轻拟物化设计的升级。
第一步：确认轮廓造型
第一个操作，即确定图标本身的轮廓。根据原有图标的样式我做了一些改动，包括加粗车头，减少高度，增加车灯等。并对每一个模块进行纯色的填充，定义它们的色彩和做出区分。
形体的重要性在于要对图形本身有比较合理的呈现，不要让比例失调和图不达意。
第二步：完善图形细节
这一步，就要在原有基础上，进行下一步的深入。包括对一些细节交代得更清楚一点，增加一些有趣的小元素等等，完善它的具体样式。
第三步：增加基础的暗部表现
在这里，我们就要开始为图标增加高光了，高光从右上角打下来，那么有叠加关系的元素就会产生一个向下的投影。并且反向暗部的表现，让整体的立体感稍强。
这一步在软件中主要使用蒙版功能，通过蒙版在背景上方创建一个图层，然后添加深色的透明度渐变，就可以表现出对暗部和投影的效果。
第四步：增加高光效果
接着，就是最后一步，将高光添加到画面中来，讲整个图标的质感进行拉升，
通过上面的演示，我们可以将整个拟物设计流程精简成：
1.确定图形基本轮廓、外形比例、模块色彩
2.丰富细节样式增加趣味性和适当的拟真感
3.通过蒙版添加暗部来完善表现的明暗和层级关系
4.添加高光元素作为图形的亮点，拉升层次感
然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。
然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：
通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。
而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。
最后的总结，学习轻拟物就是增加我们完成界面视觉输出的可能性，为视觉创意增加一些储备弹药，以应对越来越复杂的互联网产品和职业要求。
我们只在这篇罗列了制作的顺序和思路，并没有把软件的操作完全放出来，一方面是因为时间上来不及（偷懒），另一方面是希望大家不会被软件的使用框柱。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 还是 Affinity 等软件都可以做出来。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— “七秒钟定律”：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这 9 个区域的场景划分，可以帮助我们非常高效、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
主色：应用的核心色彩，品牌色
辅色：丰富页面视觉和传达效果的次要颜色
中性：没有色相的文字、背景用色
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于 —— 你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越极致，比如我们之前整理的，发在站酷的一篇总结：
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 “角度原则”，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足 RGB 的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 “中性曲线”。
掌握对于主色、辅助色、中性色的选择方法，那么对于 UI 配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们应用如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，在分别看看它们对应的案例：
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫 APP 改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太应用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
最后放一张阿玛尼的配色格言，我们下一篇再贱！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
01、腾讯视频，色觉障碍优化
腾讯视频在播放视频时可以通过辅助功能调节色觉障碍优化，针对色觉障碍的用户提供了相应色彩画面的选择。通过优化视频色彩来提高画面辨识度，更加人性化的照顾更多用户群体。
代代 摘录
02、腾讯视频，重回后继续播放的小细节
当用户观影过程中需要暂停退出当前窗口，当重新切换回来时，视频播放进度会自动调节到暂停前 3-5 秒。这样的处理可以让用户可以更好的对剧情进行重新衔接，延续离开时的记忆，非常人性化的细节处理。
代代 摘录
03、高德地图十一期间不一样
高德地图节日期间在左上角新增了“景区随身听”服务，打造千人千面的全新语音导览体验，首批覆盖全国逾500个热门景区，为高德用户带来不一样的十一假期体验。
黑马青年 摘录
04、剪映，拖动试听音乐有助于选择
剪映在添加音乐时，可以通过拖动音频来快速试听该音乐，快速跳过缓慢的前奏部分，直接试听音乐高潮部分。根据当前素材选择最适合的高潮部分配音，可以节省用户选择配音的时间。
Liaju 摘录
05、高德地图，截图生成长图
搜索好目的地之后如果选择公交地铁出行，为了防止可能由于网络不佳等因素不能及时查看交通信息，可通过截图功能，保存完整的路线指引图。保存图片后可在相册中查看长图，也方便分享给好友，非常人性化。
疏晶晶 摘录
06、企鹅 FM，左滑到底直接删除收听记录
企鹅 FM 最近收听记录中，不仅可以左滑配合点击删除，还可以左滑到底直接删除当前操作内容。
许文娟 摘录
07、携程旅行语音导览
在携程旅行 APP 中，针对部分景点介绍有设置语音导览的功能，初次体验你可以选择该旅游景区的三个景点进行试听。对于很多游客来说只是看风景，如果不了解景点背后的故事，是很难有代入感的，这个功能可以让你对景点有个初步认知。
黑马青年 摘录
08、微信读书，想看啥摇一摇
微信读书，摇一摇！它会根据用户的阅读记录推荐类似的书籍。当用户不知道看什么书的时候就摇一摇，以有趣的交互解决用户选择困难症。
代代 摘录
09、bilibili 漫画跨页拼贴阅读
一般的漫画都是在一页之中进行分镜，在手机上阅读时不会有什么障碍，但是当出现一些比较大的跨页插画时，手机上的观看体验就不是那么友好。而当出现跨页时，bilibili 漫画可以通过向下滑动来进行拼页，将跨页拼成一页来进行观看，优化了阅读体验。
住住 摘录
10、叮咚买菜购物车领券激活用户购买欲
随着生活方式的不断变化，现在买菜这样的家常小事都可以服务到家。
最近在体验叮咚买菜 App 的时候，发现购物车顶部会有领券提示，通过满减、优惠券等形式可以更快的激活用户购买欲。空状态的购物车可以激活用户进行商品添加，已选择商品后会看到满减提示，激活用户选择更多的商品达到满减权限，一举多得。
黑马青年 摘录
11、微博动漫，不一样的性别设置
点击右上角的男生/女生头像便可直接替换角色，区别于常见的输入形式，简化用户操作步骤，并且推送内容会根据用户性别进行差异化推送。
Cherry 摘录
12、记账城市，游戏化记账玩法
对于我们这一代的年轻人来说能坚持记账的估计相对较少，一些互联产品的引入相对可以激活这一部分人群。最近体验的记账城市让我影响深刻，将游戏化的场景引入产品设计中，你记录一次就相当于为自己的虚拟城市进行一次基建，带入了几分趣味性。
也可以点击拍摄图标进行照片记录，调整好需要展示的城市场景，点击拍摄时模拟了类似拍立得形式的照片打印。整个体验不仅年轻化、游戏化，也结合了趣味性，在细节的处理上面也非常到位。
黑马青年 摘录
13、美图秀秀以营销思路引导登录
通常访问个人中心都需要用户登录账户，如何引导用户创建账户是产品不断思考的问题。美图秀秀以红包微动效替换默认头像，以登录领红包引导用户创建账户，也算是一种不错的以营销思路作为引导的方式。
黑马青年 摘录
14、骨骼，绘画人的热爱
很喜欢这款解析人体结构的 App，设计很大胆，有个性。点击右上角“显示插针”会显示插针在某个部位，点击插针还能出现对这个部位的解释。还能对骨骼进行360旋转，深入解剖每个部位。
功能操作控件放在上下左右四个角，内容的布局打破常规设计，左下角的“滑轮”操作，当你滑动时就会在“显示界面”跟“隐藏界面”之间切换。
Liaju 摘录
15、Keep 不一样的任务设置
Keep 的任务设置采用 H5 的形式，区别于其他大众的常规任务形式。没人喜欢做任务，用讲故事的方式去设置任务关卡，会增加用户的参与度。
“卡路里工厂”在取名上就增加了不少趣味性与点击欲望，进入“卡路里工厂”界面用星球、星空等元素设计，画面具有神秘感，让用户觉得是在探索星球中完成任务。结合游戏化的形式更有趣味性，因而提升用户参与度。
Liaju 摘录
16、音兔，音乐智能推荐
音兔 App 在进行图片和视频编辑时，音乐的类型会根据图片和视频的内容进行推荐，如发的风景照就会推荐旅行相关的音乐，发的猫咪照片就会推荐猫奴的音乐，方便用户在进行图片和视频编辑时更快捷的选到适合的音乐。
Xindy 摘录
17、微信读书滑到头还能无限场
卡片式滑动翻页现在非常普及，起点通常是无法滑动的，但是微信读书打破了你的思维局限。在开始时允许你向右滑动，此时便可进入无限场，带给你不一样的互动体验。
黑马青年 摘录
18、招商银行双重刷新相结合
招商银行 App 进入社区状态下 icon 变为刷新样式，可以手势下拉进行刷新，也可以点击 icon 进行刷新，操作更加便捷。
Cherry 摘录
19、网易云音乐，生日祝福
生日那天，网易云音乐的每日推荐图标会变成一个蛋糕图形，每日推荐的第一首歌是「祝你生日快乐」。这些小细节是不是很暖心呢，反正我是被俘获了。（Android Version 6.3.2）
無休 摘录
20、Space FM 通过音乐交友
Space FM 模拟宇宙太空，把每个用户比作一个宇航员，宇航员添加喜欢的歌曲，形成自己的音乐星球；宇航员可以带着自己的星球在太空漫游，每隔30秒匹配新的宇航员，如果双方都停留下来，可以听对方的歌曲，还可以打招呼、聊天，聊得来可以收听对方的音乐，即可私聊。
以太空星辰为动态背景，播放着自己喜欢的歌，营造了一个轻松的氛围。在与陌生人打招呼，有了音乐为话题引子，不会显得唐突尴尬。
無休 摘录
21、猫耳 FM 的闪屏启动音
猫耳 FM 增加启动音的设置，区别于传统 App 闪屏启动，加入声音的闪屏启动音更增趣味性。推荐的启动音也非常符合产品二次元的调性，让用户在进入 App 时有声优体验的沉浸感受，每一次的打开都是一次惊喜的体验。
“欢迎回来，主人”、“早安，大小姐”…等声音录制来自不同动漫的经典重现，能抓住一部分特定用户人群的喜爱，也是非常棒的运营策略。
老白 摘录
22、京东商城添加活动日历功能
京东商城在首页添加了活动日历的功能，用户可以了解到未来一周的优惠促销活动。可添加活动提醒，这样用户就不会错过好的优惠活动，同时也提高了平台的转化率。
逆光 摘录
23、腾讯视频，播放短视频中推荐正片
观看短视频的时候，播放大概 5 秒左右，视频下方标题栏会变成正片内容导航，避免用户找影视名字的繁琐，既能满足用户需要，又能增加产品需求。
皓月长歌 摘录
24、酷狗音乐，透视立体翻页设计
酷狗音乐歌单页，头部推荐歌单采用透视立体翻页效果呈现，增强视觉画面感，主体内容更突出，也区别于平铺卡片形式。头部的背景颜色也融合当前卡片的色调，整体更协调。类似这种呈现简单立体翻页效果的表现手法，在 UI 应用场景中也越来越常见。
Liaju 摘录
25、途家民宿，未完成订单的设计呈现
当用户有未完成的任务订单，在“首页”和“我的”以显著位置提示用户完成订单。多个订单“首页”以轮播形式进行展示，“我的”以上下滑动形式展示并提示用户。
皓月长歌 摘录
26、QQ 夜间模式下的 icon 设计
切换 QQ 夜间模式，底部标签栏消息选中模式下的 icon 结合睡觉打呼的情景设计，符合夜间场景。贴合场景的细节设计，带给用户更好的体验。
Liaju 摘录
27、马蜂窝旅游，详情页照片展示处理
马蜂窝旅游在文章详情页展示作者拍摄的景点照片时，不会对照片进行裁切等处理，而是以宽度固定高度自定义的方式进行呈现。展示出照片本身的原始状态，不仅方便作者拍摄不同比例的照片，也方便用户从不同的视角观看景点。
黑马青年 摘录
28、毒汤日历，点赞也要扎心
一款毒鸡汤产品，觉得很丧就打开看看，说不定丧丧就好了。点赞 icon 设计也是带“扎”的，恰好符合产品属性；当你想翻过明天的时候，会提示“明天，怎么翻也翻不过去”。
Liaju 摘录
29、百度翻译，通过引导互动完成信息采集
引导页在产品中比较常见，从静态、动态、视频等不断演变到互动式新形式引导设计。
在百度翻译 APP 中，通过引导页和用户进行互动，来了解用户群信息。通过这样的互动形式可以更好的被用户所接受，并进行相应信息的选择。
疏晶晶 摘录
30、抖音，背景图编辑预览更人性化
在抖音设置个人主页背景图，更换图片来自个人相册，在进行图片编辑时，可以预览基于布局结构上的呈现效果，便于用户截取需要的图片显示区域。
疏晶晶 摘录
31、编辑微信朋友圈动态试试长按照片
编辑微信朋友圈动态过程中，如果选错图片通常大家都是点击图片预览时删除。还有一种长按拖拽删除可能容易被你忽略，不妨试试看，通过长按拖拽删除照片更能方便用户操作。
疏晶晶 摘录
32、酷狗音乐，30 秒副歌播放
通过 30 秒的副歌播放，为你快速筛选是否喜欢这首歌，30 秒缩短了用户试听歌曲的时间成本。也会提示用户下一步操作，如果 30 秒不够可以增加 30 秒。
Matilda 摘录
33、QQ 音乐制作视频歌词海报
喜欢的歌词可以制作成动态海报，还可以自定义拍摄视频，符合当下流行的小视频。将喜欢的歌词歌曲同时赋予视频的记忆，听觉+视觉体验结合，给人更加丰富的情感体验。
Matilda 摘录
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑马青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、什么是大标题设计风格？
大标题导航栏是从iOS11发布后，开始在中国的UI设计师中急速流行的一种设计风格。其实这种风格最早在2016年就在硅谷盛行了起来，源自一位叫Michael Horton的设计师发表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章，这篇文章提到的Complexion Reduction这种设计风格(下文简称CR)就是大标题导航栏的起源，即大、黑、粗的标题。
CR这种风格有四个明显的特征：
1.删除多余的颜色；
2.又大、又黑、又粗的标题；
3.简单、可识别的图标，也不要使用颜色(常用黑灰色)；
4.留白留白留白，更多的留白。
下图是比较典型的使用CR风格的APP（分别是爱彼迎、ENJOY、火球买手、MOO音乐），大家可以结合CR风格的4大特征感受一下：
不知道小伙伴们有没有发现，这几个APP的功能会比较单一或是某一垂直领域，且视觉上都给人一种高品质，超极简的感觉，人们会更多的关注界面中内容本身，对内容的要求也会更高。
二、中西方的差异
那么问题来了，为什么这种CR风格鲜少出现在中国特有的淘宝类电商APP中呢？
国外的APP大都是小而精致的，一般一个APP只能做一件事，功能比较单一，而国内的淘宝类电商APP，携程类的综合旅游APP所包含的业务与功能都非常广泛，在狭小的手机屏幕上展示更多的商品就显得尤其重要，CR风格提倡的大标题大留白无疑不是在挑战老板的底线。
实际上即便使用大标题风格也不要盲目采用iOS11官方的大标题导航，其原因在于中英文的差异。
英文大标题一个单词有大小写的变化，富有一定的层级变化，而中文如果使用iOS11给定的68px（二倍图下）的字号，那真是大到闪瞎我的眼。中文一个词语每一个字都是差不多的大小，没有层级上的变化，太大的字体在整个界面中看起来会很奇怪，如下图：
三、合理使用大标题
虽说iOS11那么大的标题不适合大部分的APP，但并不是说大标题风格就不适合大部分APP了，实际上目前大多数的APP依然使用了大标题的风格，不过进行了一定的改良。
以下参考尺寸均是二倍图下的尺寸
1.大标题导航栏
大标题导航栏大致有两种样式，一种是延用iOS11的大标题导航栏，一种是稍微改良使用的大标题导航栏。
1）iOS11大大大标题导航栏
iOS11的大标题导航栏标题字号约为68px、栏高192px(二倍图)，大标题对齐导航栏左边，页面滑动时转换为常规的导航栏。
国内使用这种大大大标题的APP比较少，标题文字实在太大，若只作为导航标题占位，会极其浪费屏幕空间。
使用这种大大大标题时，导航标题一般都有一定的意义，如下图:
饿了么的订单页详情页使用了这种大大大标题，但是标题赋予了订单状态的意义，比起单纯的“订单详情”，这样有一定意义的标题文字则可考虑使用iOS11的大大大标题。
2）改良大标题导航栏
某些APP在使用大标题导航栏时，在iOS11的大标题导航栏上进行了一定的改良，最常见的就是一定程度缩小了标题的字号，如下图:
这三个APP的标题字号都没有到68px，常用40px~48px的字号，陌陌与天猫是固定在顶部导航栏的，而Kepp会随页面上滑变为常规标题导航。
一般这种固定的较大标题都会隐去导航栏的分割线，显得导航栏更高，更有呼吸感。像是天猫的大标题导航栏使用的色块，与下方模块又比较近，就显得很拥挤。
2.Tab栏大标题
Tab栏的文字标题切换样式最常见的就是颜色变化，加小短线等，随着大标题风格的流行，Tab栏的切换样式也出现了大标题的选中样式，选中字号通常采用40~48px（甚至更大，如虾米音乐的72px），而非选中标题通常则是采用的28~32px，如下图：
使用这样的Tab栏，能够迅速帮助用户辨识自己所在的位置，就差指着自己说“这儿”了。需要注意的是一个屏幕内尽量只在一级Tab使用大标题切换，与二级Tab做出区分。
3.模块化大标题
大标题的风格除了应用在界面顶部导航，在模块化标题上应用的也非常多，有些APP即便顶部导航不使用大标题，却会在模块化标题上使用较大的字号，如下图：
这种模块化大标题常配合留白分割的界面使用(这也符合了CR风格的特征)，模块化大标题在留白分割的界面上能够更好地帮助上下模块做到层级区分的作用。
4.文字变大变粗变黑
抛开大标题不谈，不知大家有没有发现，现在越来越多的APP的内容标题、正文内容的字体也在逐渐变得更黑更粗，甚至更大，毕竟我们的手机变得越来越大了。如下图：
即便是拥有复杂业务的淘宝与飞猪，在某些内容标题上也变得更粗更黑，一眼看过去用户能更容易找到自己想看的内容。
四、划重点
· 大标题设计风格源自Complexion Reduction这种设计风格，CR这种风格的特征就在于颜色少、标题大黑粗、图标通用简单、大留白；
· 由于中英文字体的差异，中文使用超大字号没有英文富有变化；
· 合理使用大标题，做一些适当的改良。常见用于导航栏、一级Tab选中标题、模块化大标题以及内容标题。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：卡洛设计铺 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1、标签栏是什么？
2、为什么标签栏要放于底部？
3、标签栏的三大规则
4、标签栏的基础规范
5、标签栏的图标样式
6、标签栏的展示样式
7、赋予标签栏更多内容
标签栏也叫Tab Bar，是移动端应用程序中最常用的UI元素之一。标签栏出现在应用程序屏幕的底部，可以让用户在应用程序中的不同部分之间快速切换。标签栏可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些选项卡，则最终的可见选项卡将变为“更多”选项卡，该选项卡将在单独屏幕上的列表中显示其他选项卡。
标签栏在任何目标页面中的高度是不变的，iOS 规定它的高度为98px(iOS @2x)。但因为 iPhone X 之后的全面屏手机引入了 Home Bar ，所以在进行界面适配的时候，请务必要加上 Home Bar 自身的68px高度。别让Home Bar遮挡标签栏中标签的展示，这会让两个控件发生操作手势冲突。
史蒂文·霍伯（Steven Hoober）在对移动设备使用情况的研究中发现，人们会根据自己的设备，需求和背景以多种方式触摸手机，触摸手机屏幕或按钮的用户分三种基本方式：抱着手机的人占36%、两只手使用手机的人占15%，而49％的人依靠一只手在手机上完成事情，除此之外75％的用户仅用一个拇指触摸屏幕。
在下图中，出现在手机屏幕上的图表是近似覆盖图，其中的颜色表示用户的拇指可以接触到哪些区域以与屏幕交互。绿色表示用户可以轻松到达的区域；黄色，需要伸展的区域；红色区域，要求用户改变握持设备的方式。
这意味着：
将常用的“行为”放在屏幕底部很重要，因为只需一键式的交互即可轻松到达这些“行为”。
底部标签栏设计应当遵循三大原则：结构合理、位置清晰、可预测行为。
为了让标签栏表现清晰，两大平台在规范里都对标签数量给出了相同的建议：建议标签栏内的标签个数为3个至5个。因为标签过多会使每一个单元标签的可触空间降低，人们在物理上（手指）难以点击或误触，除此之外还会增加应用程序结构的复杂性。
注：如果你因为产品结构非常繁杂，标签数量想要达到更多，那么在 iOS 中就会给你强硬处理，iOS 人机交互规范告诉产品设计者们：标签栏虽然可以包含任意数量的标签，但可见标签的数量会根据设备的大小(平板或手机)和方向(竖屏或横屏)而自适应变化。如果由于水平空间有限而无法显示某些标签时，最后的一个可见标签将被会被系统强行转换为“更多”选项，需要用户点击“更多”选项之后，系统才将在单独屏幕上的列表中显示其他被隐藏的标签。
“我在哪里？” 是用户成功导航所需要回答的一个基本问题，我们应当采用适当的视觉提示让用户知道目前所处的位置（选中状态）。在APP应用中我们常见的处理方式有4种：改变图标样式、改变大小、改变颜色、改变展示样式。它们并不一定是独立存在的，可以同时作用于一个标签。
选取每个底部导航选项都有通向它的目的地，底部导航应当将用户直接引导到相关页面，不应该打开菜单或其他窗口。如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。我们要确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。例如造作新家APP，当用户处于未登录状态时，就不能查看底部标签“我的”信息，当我点击标签“我的”，就会弹出快捷登陆界面，这样就能让用户明白不能使用的原因是账号未登陆，从另一层面讲也很好的引导了用户注册与登陆。
注：不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件，如果需要提供控件，请使用工具栏。
在设计标签栏前我们首先要了解它的基础规范，在保证基础规范合理的情况下再去进行设计。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，下面就以常用的24x24为大家举例：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
最后加入图标的keyline，keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
标签的数量以及标签的展示形式决定了标签的布局形式，标签的常见布局一共有2种：屏幕等分、图标左右间距相等。
屏幕等分是最常见的标签布局形式，因为不管它存在多少图标，都可以用它进行屏幕划分，计算方法也十分简单，屏幕的宽度除以标签个数就是每列宽度。采用此等划分的案例有：懂车帝、今日头条。
图标左右距离相等多用在标签数量为3个的情况下，计算方法是先去除中间图标的尺寸，然后再左右平均划分等距。相对于屏幕等分，图标左右间距相等划分更为紧凑。
根据菲兹定律，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。标签栏作为向用户展现产品框架的关键控件，热点区域（可点击区域范围）的设定一定要合理。底部图标尺寸较小，如果将图标作为热点区域，那么可点击区域就偏小，很可能出现用户点击不到的情况，正确的做法是以标签栏的布局作为基础设定，在标签相邻的部分划出一定区域作为不可点击区域，以免用户误操作，参考如下，红色为可热点区域，蓝色为不可点击区域：
在产品设计中，不同样式的图标会给人不同的感受，随着APP风格越来越简洁化，标签栏图标风格紧紧地跟着界面的风格而改变。经过长时间的沉淀，标签栏图标常见的默认设计样式一共可分为四类：线性图标、面性图标、线性+面性图标、轻质感图标。
线性图标通过线来塑造轮廓，在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2px、3px、4px，不同的线条粗细所带来的视觉感受也不同，我在“如何让你的图标具有说服力”文章中提到过，线条越粗那么图标的性格就越活泼、粗旷，线条越细图标性格就越精致、商务，图标使用描边的粗细可以根据产品的气质来决定。
选中状态：当选中状态为高亮线性图标时，选中状态的图标颜色会与默认状态的图标颜色形成较强的反差，但由于线和线的差异性并不强，线性图标没有面性图标更具吸引力（引导性），即使加入了高亮色识别度也不及面性强。airbnb在处理线性图标选中状态时就考虑到了这一点，选中状态下不仅对图标的颜色做了较大变化，还加大了图标及文字的描边粗细，从一定程度上加强了图标的引导性。（注：线性状态的图标选中状态也可以变为面性图标或线性+面性图标）
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感，面性图标的承载信息相对与线性图标来说更重，更具有引导性。
选中状态：面性图标的选中状态为高亮面性图标，颜色可以为纯色、也可以为渐变、透明。爱奇艺的选中状态就采用了高亮面性图标的展现方式，除了把图标底色及文字的颜色加深以外，还加入了品牌色，甚至为了让“会员”标签更加突出，还单独对“会员”标签的颜色进行了修改。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
选中状态：线性图标的选中状可以为高亮的线性+面性图标。懂车帝在处理标签选中状态时就把图标底部加入了高亮黄色圆形块状，即保存了线性也添加了面，加深了选中状态的视觉重量，更加明确的让用户感知自己所处的位置。
轻质感图标层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。轻质感图标在标签栏中运用的较少，在特殊情况下才会使用，例如盒马，就把轻质感图标用在了首页标签与盒马小镇标签，首页标签的引入是为了让用户加强对品牌形象的认知，而盒马小镇标签的引入则是为了加强图标的引导性。
*图标样式的常用变化（选中与未选中）
在我调研上百种应用程序中，发现主流的APP标签栏样式变化大致分为六种：线性-线性、线性-面性、线性-线+面、面性-面性、面性-线+面、线+面-线+面。虽然标签的样式变化繁多，但是使用率最多的是“由线性转面性”标签。
标签栏的不同展示形式会给用户带来不同的使用习惯和使用感受，常见的标签展示形式有四种：图标+文字、纯图标、纯文字、舵式。
图标+文字是最常见的标签展示形式，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。正因为有文字提示，所以没有必要过于担心图标的识别性问题，那么图标就可以得到更深的延展，可以做的更有趣，更具有产品气质，甚至可以代入更深层次的动效。
例如东家·守艺人APP，专门售卖各种手艺人的亲手制作的各种艺术品，面向的对象是喜欢传统文化的人群，在这样的背景下东家结合宋体的笔画（笔画拆分）把图标设计的更加传统、古朴，创造出具有东方韵味且极具形式感的图标设计。
采用纯图标展示形式的产品比较少见，纯图标样式的最大缺点就是识别性低，没有文字说明会导致用户很难找到自己想要去的位置，也不明确自己所处的状态。所以我们如果要设计纯图标形式，那么必须要考虑到图标的识别性问题，间接的舍弃掉图标更多的延展性，让图标变得更规矩。（识别性的提升我之前写的图标文章中提到过，主要可以从大众认知隐喻与真实世界映射两个方向出发去提升）
使用纯图标样式的产品特征：产品单一、领域垂直、小众化、用户群体接受度高。即使满足这些条件下产品使用纯图标标签，用户第一次使用往往也是比较迷茫，需要等用户熟悉后才会得到好转，所以一定要慎用。除此之外不太建议用于电商、视频、学习、社交等领域。
对于我们设计师来说使用纯图标样式的产品中最为熟悉的就是花瓣了。
采用纯文字展示形式能够更直观的让用户进行操作，遵循简单易用的原则。适合用户群体跨度较大的产品，多用于直播类、内容类、简单工具类APP中。缺点也显而易见，图标样式比较单一，没法加入更多趣味化、具有产品特性的元素到标签中。
采用纯文字展示形式的产品有很多，最熟悉不过的就是抖音，抖音的标签默认状态下采用了纯文字形式，选中状态则把文字高亮显示，并且底部加入了圆角矩形，对于用户群体跨度较大的产品，这样的展现形式再好不过了。（抖音在途中改用过图标+文字格式，不过后面也放弃了，我当时用着图标+文字类型的抖音，的确感觉太奇怪！）
舵式标签可以看为底部标签式导航的一种变体。它在后者的基础上，突出强调了一个标签并且放在中间的位置，样子看起来像攒了一个舵，所以取名为舵式标签。一般舵式标签的颜色、大小等视觉表现会被设计得和其他普通标签有所差异，通过视觉对比的方式吸引用户关注。舵式标签通常和产品框架体现无关，大多数应用程序使用舵式标签是用来承载系统功能。起初是因为社区类APP为了激励和方便用户随时随地地输出UGC内容，所以把触发用户创作/发布的功能按钮放置在标签栏中。
因为舵式标签可以很好地承载产品的重要功能，而被许多的应用程序设计所采用，经过越来越多的应用采用舵式标签，使用的形式也越来越多样，它现在并不再单一地用于承载产品功能，而是配合营销场景、付费场景，给产品的变现、拉新赋能。拼多多就把它拉新的主要入口作用到了舵式图标上，并且为了让图标更加显目，甚至把图标做成了轻质感的形式体现，同时也通过2像素的线性图标减弱其他4个标签的引导性。
标签栏不仅是向用户展现产品框架的关键控件，还可以贯穿整个产品的商业价值的体现，它是连接着整个产品最重要的顶层信息。如果想要让标签变得更加丰富，想要标签内容中含有更多的情感需求、 商业需求、运营需求，那么我们可以重点从这两个层面考虑：视觉层面、交互层面。
在视觉层面上我们可以迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅能够很好的向用户传递着产品调性还能吸引用户关注以及引导用户进行操作。
装饰性图标仅仅是用来提升整个界面的视觉体验，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极。
整体装饰性图标的出现往往是为了满足情感需求与商业需求，整体装饰图标并不是一直存在的，它的特点是季节性与周期性，并且它并不具备任何功能性。
从情感需求出发设计装饰图标：例如世界杯火热进行时，优酷为了满足用户的情感需求，就把标签栏的图标全部替换为带有世界杯元素的图案，让用户与其产生情感的共鸣。
从商业需求出发设计装饰图标：现在的年货节，之前的双十二、双十一、618等，每到节日促销活动的时候，很多电商应用都会换上装饰性图标，例如一号店，在过年前就把标签栏图标全部改为含带过年气息的元素，提前来预热活动，引导用户消费。
单个装饰性图标的出现大部分都是为了满足运营需求，运营为了推出某个活动或功能，往往会单独装饰某个图标的设计视觉，以便于提高图标的引导性，最直接的例子就是我刚才提到过的拼多多。
我们可以在标签中加入更多的品牌基因，让其与品牌产生联动性，这一形式是大部分应用程序都在做的，我们可以从这6个层面加入品牌基因：品牌颜色、品牌LOGO、品牌元素、品牌名称、品牌性格、品牌吉祥物。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的LOGO印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO，同时也使用了品牌颜色。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，它并没有把它的品牌LOGO直接放于其中，而是通过大众所熟知的音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备识别性与引导性，必须配合文字一起出现，这样才能让用户理解标签的真正功能，我们不能为了设计而设计。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
现在大部分品牌都会含带吉祥物，我们可以在设计图标时提取吉祥物的外形，把它用于产品的标签中。例如盒马，它就把吉祥物做为了底部标签，不过需要我们注意的是如果吉祥物的风格与我们的图标风格差别较大，我们就需要对它做风格化的处理，不然看起来就十分突兀。（盒马对吉祥物做了轻质感的风格化处理）
让用户自定义的标签现在越来越常见，而每个产品对其思考的层面也都有所不同。自定义标签往往出现在个人中心，它会根据用户上传的头像或用户的捏脸生成图标。
目前市面上很多APP都把用户上传的头像作为了个人中心标签展示，例如我们常用的百度网盘就采用了此方案，当用户注册未上传用户头像时，会默认显示系统标签，当用户上传完后就会显示用户头像，并且如果你是会员，还会把会员标示显示在标签的右上方，彰显会员用户的尊贵性。
我们可以很明显的发现百度网盘的底部标签默认状态为线性图标，而个人中心不管默认状态还是选择状态都为面性图标，所以如果你想要加强个人中心的引导性，那么可以采取此方案。
捏脸功能作为SOUL的一大特色，捏脸的虚拟形象赋予了真实人格属性，加强了社交的传播性，所以SOUL决定把用户自定义的捏脸放于个人中心标签中。
除了对标签做视觉的提升外，我们还可以对其加入合理的交互效果，一方面可以提升用户在使用产品过程中的乐趣，另一方面还可以为用户提供更多便利，从而增强用户体验。
在不同的状态下点击标签的功能也不一样，一个标签可承载2到3个功能，可以满足不同状态下的用户需求。
SOUL的广场标签（进入选取页+刷新）
SOUL的广告标签承载了2个功能，当你处于其他标签时，点击广场标签则直接进入到广场页面；当你处于广场页面中时，再次点击标签则会刷新整个页面。
有货的发现标签（进入选取页+上传图片）
有货的发现标签也承载了2个功能，在设计上运用的非常巧妙，当你处于其他标签时，点击发现标签则进入到发现页面；当你在发现页面时你的发现标签则变为了上传图片标签，可以点击上传图片。
淘宝首页标签（进入选取页+刷新+置顶）
淘宝的首页标签同时承载了3个功能，当你处于其他标签中，点击首页标签则直接进入到首页页面；当你在首页页面第一屏时，你点击首页标签则会刷新整个页面；当你滑过3分之1屏时，首页标签的功能则变为置顶。所以在不同状态下首页标签也会具备不同的功能，并且每种状态下的标签样式也是不同。
爱奇艺首页标签（进入选取页+到达指定位置+置顶）
爱奇艺的首页标签也是同时承载了3个功能，不过它与淘宝有些许不同，爱奇艺并不能刷新页面，而作为替换的功能是直接到达指定位置“猜你喜欢”。
我们做的设计不要仅限于视觉所看到的，还要考虑到所触摸的、所听到的，我们可以利用触觉与听觉去辅助用户确认自己的选择，当然我们一定要合理利用，反之则会让用户感到十分反感。
西瓜视频与今日头条在点击标签栏图标时手机就会发出轻微的震动，给予了用户很好的点击反馈。
SOUL点击星球标签时手机就会发出恋爱铃声，在SOUL的产品报告中，SOUL主要面对女性用户，女性用户约为男性用户的2.4倍（女人更偏感性），并且它的主要需求是满足测试、匹配、交友，所以恋爱铃声能够很好的引起用户的情感共鸣。不过铃声有利有弊，当你在特定场景下使用SOUL时，点击到星球标签周围人也都能听到恋爱铃声，实属尴尬，所以我在特定场景下使用SOUL时都会默默的关掉声音。
精彩的图标动画，对整体的设计具有画龙点睛的作用，降低标签切换时的枯燥感，提升操作的愉悦度和期待感。甚至可以通过 tab 的动画设计给用户传达出整个 APP 设计的品牌及理念。标签动画往往都比较简单，主要有：缩放、旋转、颜色过渡、位移、抖动、填充、线性轨迹、结合容器、元素介质等。接下来我们来看看SOUl、虎牙、汽车之家是怎么做的。
SOUL的底部标签栏运用到了弹性动画、结合容器以及线性轨迹。带有弹性缩放的标签反馈，让整体的设计更加具有趣味性，相比线性缩放也更有视觉冲击力。图标的运动规则：先从 0 放大到最大（数值根据实际情况设定），然后再回弹至正常大小。除了弹性动画外，它还结合了容器的元素对内部进行了颜色的替换以及单线条的轨迹动画。这样的处理不仅趣味性十足，还强化了选中当前状态，整体标签切换的一致性也较高。
虎牙一直是我比较喜欢的直播平台，它的底部标签动画也是非常值得借鉴，运用到的动画形式是抖动与趣味表达。抖动是通过图标的左右、上下快速位移或旋转形成，整体的动画效果节奏较快，具有一定的速度感，使整个标签切换的情绪表达较为俏皮、可爱。除了抖动外还在切换过程中代入了更多小元素的趣味表达，赋予了图标更多的性格，对我们的设计进行再升华，从而提高整体设计的质感和趣味。
因为用户群体的不同，汽车之家在标签动画的设计上也相对简单、严谨，它的动画形式主要是结合容器与细节晃动。选中效果由线切换为面，并加入了品牌底色，这样能够清晰的给用户传达当前页面。并且为了不使整体的切换效果变得生硬，在切换过程中采用了透明度与弹性缩放，让其过渡的相对柔和。在细节的处理上也是非常用心，每个图标都带有笑脸的形状，间接的给用户传达“笑脸”信息，在选取标签时内部形状会轻微晃动。整体来看汽车之家的标签动效虽然偏向严谨，但是在细节上也给予用户传达了更多的情感。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一.什么是选择器
选择器是一个输入字段， 用户必须在其中选择一个（或多个）选项，这与文本字段中用户可以自由使用的输入区不同。选择器具有各种不同的形状和形式。下拉菜单，复选框，切换按钮，滑块等都是不同类型的选择器，但它们看起来彼此并不相似。这些类型的选择器之间的主要功能差异是用户可以选择的选项数量：一个或多个。
二.选择器的类别
-单选选择器
-多选选择器
1.单选选择器
单选选择器按效果又可以分为：点击选择器、滑动选择器、多联动选择器、开关选择器、可搜索效果的选择器、地图选择器。
特点：同一时间只能选择一个选项，当你已经选择完一项后，准备选取另一项，那么后选的一项会立刻使先选的一项被取消选择。
1-1点击选择器
点击选择器可分为两种状态，状态一为立即触发，当你点击后会立即跳到下一步操作；状态二为再次确认触发，当选中某项时，不会立即触发操作，而是需要再点击别的触发类组件（如保存按钮）后，再执行操作。
-立即触发式：
特点：直接进入，并没有再次确认的按钮，可以让你快速到达想要的目的。
建议：虽然目的能快速达到，不过也很可能会造成误操作，所以在设定这类选择器时要多考虑手指的触碰区域以及每个选择元素的距离，同时正因为是直接跳转，所以应当加入一些操作提示。
举例：汽车之家在用户选择二手车时就会出现此选择器，当我在汽车之家想要选择二手车时，它会弹出立即触发式选择器控件，我们在控件上可以看到有7个圆形选项，分别为：汽车之家诚信联盟、准新车、奥迪、奔驰、宝马、三厢轿车、分期购车，当我点击“奥迪”选项时就会立即跳转选择后的页面，为了让用户知道自己选择后的状态，在跳转页面时还会弹出非模态弹窗的文字提示“共找到1943辆车”。
-再次确认触发式：
特点：这是最为常见的选择器类型，当所在选项选上，除了选择另一个选项之外，便没法取消选中状态。（选且只能选择一个选项）
建议：在设定此类选择器时我们应该从产品的角度去考虑是否给用户一个默认选项，甚至是否考虑给出一个重置按钮。
举例：我刚注册小红书时，在小红书填写信息页面中，它的默认选项是“男”，我点击“女”，则会自动取消掉“男”，它们两者并不能同时存在，并且只有我点击下一步按钮时才会正式确认我选择完成。
1-2滑动选择器
特点：滑动选择器是将需要选中的内容滑动至中部，然后点击确认按钮确认选中后返回选中内容。大多数运用在选择时间或地址上。
建议：滑动选择器的展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用它。为了保证手机屏幕触控精度，以免发生误触，滚轮选择器建议控制在5列以内。
举例：在小红书填写年龄信息时，我们只需用手指在区域内滑动即可选择想要的选项。
1-3多联动选择器
特点：多联动选择器是由两个或两个以上的中继器制作而成，第一个中继器选择后，一般会对第二个中继器进行筛选，不过因为显示的区域有限，所以当你要切换时，还只能挨个切换，效率低下。
建议：可以通过数据以及功能来减少选择时间，例如在选择地区时，根据当前GPS定位地理位置，定位相关省级信息及名称，减少滑动操作。
举例：如下，当我选择了内蒙古自治区，那么2级内容就应该筛选掉内蒙古以外的城市，比较适用于省份-城市或者品牌-产品这种类似的选择，当然下面第一张多联动选择器也结合了滑动选择器。
多联动选择器展示的方式非常多，不仅可以用滑动形式展示，还可以用点击、平铺列表等形式展示。
在左图选择城市时，我们必须要先选择省份，再选择城市，最后才能选择县；
右图则没有先后顺序，不过当你首先选择颜色时，如果没有相同尺码的衣服，缺货的尺码则不会被选中，先选择尺码也是相同道理。
1-4切换开关选择器
特点：切换开关选择器有且只有两种选项，用来在开和关两种状态之间切换。开关属于触发类组件，拨动开关时，它所指挥的某个操作会立即生效，常见的使用就是授权。开关的默认状态并不都是关闭的，还要从产品本身的设定上来决策。
建议：如果某开关的功能是用户经常使用的状态，那么可以在默认状态下打开开关，不过需要注意的是在某些特殊的开关按钮需要打开时，必须要提前告知用户。
举例：当我打开UC浏览器的设置时，它的辅助功能就使用了切换开关选择器，切换的开关只需要点击即可。
1-5可搜索选择器
特点：可搜索选择器一般用于选择项较多时，特别是对于电商购物类的APP搜索选择器是必不可少的，搜索选择器会根据用户输入的内容，对中继器进行模糊的搜索，让用户快速找到并选择内容。
建议：在搜索区域输入文字时，可给予用户更多的文字提示以及以及引导类信息。
举例：小红书在搜索时就会出现数字化的信息提示，这样能够很好的引导用户进入到想要的搜索结果：笔记或者商品页面。
1-6地图选择器
特点：作为最特别的选择器，它的功能是复杂的，它的操作方式也是多样化的，地图选择器的操作可点击、可拖拽、可放大缩小等等，它多用于生活类APP。
建议：可以在选择器中加入更多趣味、互动、可感知的设计，如加入过节元素、车辆行驶路径、热门区域、甚至选取后手机的震动等。
举例：
打车类APP必用的地图选择器，滴滴出行的用户可以实时看到车辆信息，可以采用点击、拖拽、放大等操作来选取上车地点，选取后还有文字信息提示，让用户确认操作是否正确。
贝壳APP则用地图选择器来让用户选择二手房，同时也采用了联动式的效果，第一步是查看区域，可以明确看到区域的售房套数，点击选择区域后我们可以看到每个路段的房子套数，点击路段后就可以看到每个楼盘的套数以及均价，直到点击楼盘就会弹出详细信息框。这样有助于用户在选择二手房时从大数据分析二手房的情况，有更好的对比性与选择性。
2.多选选择器
当单选选择器不能满足用户需要时，这时我们就可以采用多选选择器，一般常用的多选选择器都是采用点击的方式，当然也有滑动类型的多选选择器。
2-1点击多选选择器
特点：当用户想要选择多个类别的情况下，我们就可以用点击多选选择器来展示提供给用户选择，通过屏幕点击选中或取消选中该选项，它不会立即触发操作，需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：从用户的角度来讲尽量不要强制用户选择数量或者默认全部数量；多选项时触碰区域不能太小，以免造成误操作。
举例：小红书在选择感兴趣的内容时就采用了点击多选选择器，不过在选择兴趣时它就强制用户至少关注4个兴趣，而对于单兴趣或者少兴趣的用户来讲，这无疑会造成用户体验的不佳，被逼再次从中选择次要的兴趣。
2-2滑动多选选择器
特别注明：从用户的角度来看，它可以选择多个区域段的内容，所以我把它分为多选选择器中。
特点：当系统给出的选项不在自己的选择区间时，可以很好的自定义选择区间，把定义权限交在用户手里。同样，它需要再点击别的触发类组件（如保存按钮）后，再执行操作。
建议：在用户滑动操作期间要有明确的操作提示，让用户时刻感知目前处于的状态；滑动区域尽量不要超过100刻度，如果刻度距离太小，用户在滑动时也很难精准的选择范围。
举例：在汽车之家APP中，当我要选择汽车价格范围时就会出现此选择器，我们可以用手指滑动来选取它的价格区间，相对于上半部分的单选价格拓展性更强，用户可以自行选择上半部分的单选选择器，也可以选择滑动多选选择器，给予用户更多的选择。
三、选择器的十大应用要点
1、简单易懂
标题易懂：
在选择器中标题一定要简单明了，很快的让用户知道他在为什么做选择（如：当你关注某烹饪的APP后，它会让你勾选喜欢的菜谱，你的标题就可以用“选择菜谱”四个字，简单明了）
文字标签易懂：
一般使用短语而不是句子，也并不需要用标点符号来结尾。（如：当选择想要的菜谱时，菜谱后的文字不需要加入标点符号）
选取状态易懂：
用户能够明确感知什么是选中状态，什么是未选中状态，什么是禁用状态。（如：选中状态为高亮显示，未选中为普通显示，禁用状态为灰度显示）
反馈提示易懂：
当你在选择中遇到选项限制或是否需要确认操作时，反馈提示一定要一目了然。（如：当你选择某衣服时，S码不能选择，则会用灰度显示的文字代替，甚至可以用中横线划过文字，明确告诉用户不能选择）
2、基本排序
从逻辑顺序：
逻辑排序能让用户很快很准的找到自己需要的选项，特别是对于选择地址/时间/个数等常规的选项时，可以按照字母/远近/大小来进行排序。例如下面在选择地址时，就是按照A-Z字母排序，这样可以大大节省用户选择的时间。
从产品利益角度排列顺序：
当然为了产品自身的利益也可以自己优化排序方式，选项的顺序可以说服用户进行选择，用户可能因为第一个选项在列表中的位置而选择了第一个选项；可以辅助用户，也可以让用户向着产品所希望的方向倾斜。例如你在选择菜谱时，产品为了让用户选择更加优质的菜谱，就会把用户评价高的菜谱放在前列；当然商家也会这么做，例如你要去买某款商品，商家会在选项中把热门、优质的产品放在最上方，让你优先选择。
从用户体验排列顺序：
从用户角度来说哪些对用户体验好，那么就把它排在前面。例如汽车之家在进行车辆类别的排序中就把用户量最多的轿车排在第一位，而把用户量最少的轻客放在了最后一位；同样它在汽车品牌选择中，单独列出了热门品牌把它放在前列，让用户进行快速选择。
3、一致性
视觉布局一致：
每个元素之间的对齐、元素与元素之间的间距、按钮不同状态的视觉体现。一般情况下移动端更倾向于左对齐，这样有利于快速读取选择内容，可以提高用户的浏览效率并减少错误。
图片/插画风格统一：
在图文结合的选择器中，我们一定要保证图片（插画）的优质以及风格的统一。
4、合理运用默认选项
默认选项是选择器的开始状态。在不同的选择器中有不同的默认方式。
默认未选中：
这是最常见的一种状态，特别是对于选择年龄、生日这些个人隐私信息，系统也没有办法进行默认选择。
默认选中其中一个选项：
要想默认其中一项，必须考虑两点因素，因素一：你想要潜意识的像用户传达信息，在单选选择器中默认选择一项后，就可以潜意识的向用户传递信息必须要在这组单选项之中选择一个。因素二就是产品的倾向，例如此产品的性别9成都是女性，那么建议默认选项为女性。
默认选中全部：
其实默认选中全部在用户体验上来讲真的不是那么的友好，例如微博这个选择器界面，刚进这个界面时已经全部勾选中，并且当你没注意习惯性的点击下面的按钮时会生立即效，没有返回的余地。（吐槽：有些APP甚至没有一键取消功能，要一个个的点击取消...）这也是为了产品牺牲掉了部分用户体验吧！
5、给用户更多选择
单选选择器的更多选择：
如果用户不想做出选择，那么应该提供一个中立选项，为用户提供一个明确的方向，中立选项比勉强选择要好。例如在选择行业领域时，以上并没有你所处的领域或你不确定你的领域，你就可以选择“不限”或“其他”。
多选选择器的更多选择：
在多选选择器中，如果不能把控到用户的准确选项区间，那么可以考虑滑动多选选择器，让用户有更多的选择区间，不管是汽车之家还是懂车帝在选择车辆价格上两者都是采用的相同方式。
6、控件状态
选择控件在操作过程中必须更改其状态/外观，要明确让用户知道是否能选中，是否被选中。控件状态一般分为三种：未选中、选中、禁用。
未选中
选择器的开始状态，向用户表明，可对该选择控件进行操作。
选中
用户操作选取状态，选择控件处于被选中的状态。
禁用
一般情况会为灰色显示，用户将无法与选项进行交互。
7、操作提示
指的是用户在操作中让用户得到相应的反馈，用户根据这些反馈可以判断当前状态以及操作后状态。在选择器中，操作提示一般用辅助文案提示及非模态弹窗提示。
辅助文案提示（选择前与选择中）：
辅助文案指的是在选择控件主体之外另外放置一些文案信息来充当说明，例如下面是地区选择，我在选择不同层级的区域时，它的上方会出现辅助提示文案，让你明确的知道你上一层级选择的是什么。
同样，当我在选择价格区间时，滑动选择器的左上方一样有文字类的提示：
非模态弹窗提示（选择后）：
非模态弹窗一般出现在用户操作完的跳转页面中，为了让用户感知所选的选项在页面的状态，如下，非模态弹窗告知用户一共有7辆车符合标准。
当然除了非模态弹窗外，还有模态弹窗，但是用户体验极差，目前很少使用，所以就不列出来了。
8、合理使用操作区域
扩大点击区域：
在选取按钮类的操作时，容易出现点击不到或误操作的现象，我们可以通过扩大点击区的交互区域来提高易用性，例如下图，虽然按钮在左边，但是可以把横向区域都列为可点击区域。
当然我们也可以从设计的角度来扩大视觉范围，从而也提高了点击范围，这样的处理不仅提升了视觉层面，还提升了交互体验。（图文结合方式）
注意交互间距：
在元素与元素之间一定要有合理的交互间距，不然很容易出现误选的情况。
合理利用有效区域：
在选项较多的选择器中，我们可以利用好选择主体控件之外的区域，例如在选择城市/品牌时，我们可以做A-Z index式字母交互区，帮助用户快速找到想要的选项。
9、趣味性
让用户选择本来就是一件枯燥乏味的事情，如果让这件事变得有趣那么会极大的提升用户体验。
从文本层面：
例如当用户填写性别信息时，你给予用户的文字信息并不是“男”/“女”，而是“帅气的boy”与“酷酷的girl”，这样会让用户觉得这是一件比较有趣的事情，而不是被动选择。（注：这样的取名一定要符合产品的特性）
从视觉层面：
加入可玩儿性的选项，例如汽车之家的头像切换，可以选择自己喜欢的头像。（头像并不是强制选择的，如果不进行操作则是默认选项）
从交互层面：
让用户去享受选择。例如Soul的星球首页就做的非常棒，在未选择状态他的人物会360度围绕着转动，当然你也可以快速拖拽，或者放大缩小，可玩儿性十足，并且在内部设定了最匹配/新人的高亮显示，协助用户去选择。
10、合理使用选择器
不同的产品在使用选择器时都各有不同，因为每个选择器都有他的利弊，而真正要怎么去选择还要根据产品本身来定。
那么我就拿目前市面上最常见的5个地址选择器的类型来分析一下利弊：
1/多联动选择器（平铺式）
货车帮采用的是多联动平铺式选择器，它最大的特点就是能够一眼就看清楚所有地址，不过地址多时需要花时间去找，只是当你经常使用此功能时便会形成记忆，再此搜索的时候就能形成记忆点击，效率很高，并且在操作外还有路径提示，不仅可以帮助你记住层级选项，还可以实时返回路径进行重新选择。
手势操作：点－点－点
2/多联动选择器（列表跳转式）
闲鱼采用的是多联动列表跳转式选择器，这个选择器最大的缺陷就是选择三级之后用户可能会忘了上一级的内容，那么就又要切换到上一级，闲鱼采用它的原因是因为它只有二级联动，不存在遗忘现象，不过这样列表式的选择效率并没有平铺的效率高，人眼习惯扫视横向内容，所以横向的内容获取往往要比纵向的多，在地址选择器上我个人是不太建议采用多联动列表跳转式，因为并不高效也不直观。
手势操作：滑－点－点
3/多联动选择器（列表式）
转转采用的是多联动列表式选择器，它的优点是可以根据右侧字母来找城市，数据偏大也能够很快的查找。不过如果在层级的选项中出现错误，同样就要切换到上一级，并且在操作中没有辅助信息提示。
手势操作：滑/点－滑/点
4/多联动选择器（下滑式）
安居客采用的是多联动下滑式选择器，这种形式的选择器不会遮挡后面的主要内容信息，在选择完地址之后能立即看到地址的筛选结果。优点是能快速选择多级地址，并且层级分明，扩展性较强可以做成地址多选。缺点是不适合3个层级以上的地址选择。
手势操作：点－滑/点－点
5/地图选择器
美团外卖采用的是地图选择器，这个选择器一般用在需要精准定位的生活类APP中，它的优点就是能够快速精准定位，并且自动录取定位信息，它的缺点也显而易见，不能含带层级并且对范围也有约束。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：黑狮力 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
新冠疫情后，如“健康宝”这类的小程序逐步成为大家生活中必不可少的应用工具，并且大量线下商业场景如教育培训、百货购物等通过小程序方式快速实现了线上“营业”，使得“小程序”这类商业解决方案，更加被大众认可并获得新一轮快速发展。
而小程序的快速发展离不开其“生态土壤”——“分发平台”的助力。作为分发平台，为了满足C端用户的多元化需求，必然要在供给端市场上争夺优质B端商户。为衡量分发平台对B端商户的吸引力，需要用一套完善的评估机制。
这种评估的衡量主体不再是我们熟悉的C端用户产品，衡量范畴也不应仅局限在功能易用、体验流畅等传统用户产品体验维度上；而是转化到平台与B端的生态视角，分析内容或服务供给者与分发平台之间合作流程、合作意愿，以及分发平台的生态健康度。
那么如何开展面向B端的“生态评估”，如何设定合理且全面的评估指标，如何客观的解读评估结果，本文将从这些方面与大家分享我们在ToB视角下评估中的若干发现。
///
1、『评什么』评估体系建立
| 明确目标：理解B端商户诉求
传统意义上，一款C端产品主要为了满足用户的某项特定需求，诸如搜索、购物、社交或地图导航等，其产品目标往往聚焦在完成一系列特定操作，并注重提升可用、易用、好用等维度的体验感知，从而提升用户活跃、留存等数据结果，及品牌口碑。因此C端产品评估的核心指向是“体验”，体验是产品必须重视且保障的“红线”。
而在小程序生态中，B端商户作为小程序分发平台上服务或内容资源的供给方，最核心的诉求是以其独特的服务或内容资源，在分发平台获取对应的流量，从而产生订单、广告线索等商业利益。体验不再是唯一重要的评价维度，有时甚至会让位于对商业利益的考量。同时分发平台为获取B端商户丰富优质的服务或信息资源，功能布局必然导向满足B端商业利益的实现。因此对B端商户的诉求应该从合作“伙伴”视角去理解，评估的核心指向是“利益”，在利益之下体验成为“可选项”而非“必选项”。
理解了ToC与ToB两种业务的需求差异后，我们将更容易明确ToB指标设定和解读的重点。
| 设定指标：梳理生态产品内在的复杂结构
围绕着ToB业务中商户与平台间的利益共赢的底层逻辑，并通过对行业中多类B端分发生态产品的评估体系进行桌面研究及规律总结，我们认为以下三个链条可以描述B端分发生态产品的复杂结构：
1、流程操作层：“账号入驻-上线&迭代-数据分析-信息互动等”的操作链条，指向商户日常运营操作的CRM系统，建设目标是流程顺畅、操作便捷；
2、规则秩序层：“审核要求-规范建议-等级体系-权益激励”的秩序链条，表现了平台意志及价值观，定义了商户做什么被奖励，做什么被惩罚，构建了以权益为中心的成长激励体系，形成了奖惩规则秩序，建设目标是规则清晰、秩序井然；
3、资源能力层：“分发获客-私域沉淀-运营召回-变现转化”的收益链条，指向服务和内容的分发能力，及触达用户后私域沉淀及运营能力。建设目标是流量资源充沛，运营能力及工具有效，能带给商户实际利益，代表的是生态平台的实际吸引力。
由上，依照上述三个链条，对应的评估体系如下：
///
2、『如何评』评估方案制定
| 划定填答内容：明确“谁”可以“回答什么”
由于评估主体是商户，不像传统C端用户是“决策”与“执行”的统一体，商户内部存在决策层（CEO/小程序负责人）和执行层（商务、产品、运营、研发等）的角色分离，导致不同角色能贡献的信息并不相同。
具体而言，决策层通盘考虑公司的战略目标及布局，关注能带给商户实际利益的“资源能力层”指标，如流量，私域运营效果等。执行层更聚焦在目标实现中的执行效率、体验，可回答“流程操作层”、“规则秩序层”的指标，如流程操作的顺畅性、审核要求和规范建议的适用性等。
如错邀决策层回答执行层面问题，将无法得到细节问题的症结所在；如果错邀执行层回答决策布局问题，也不可能得到准确全面的答案。因此明确“谁”能回答“什么”问题至关重要。
同时，决策层会依据分发平台提供的商业价值，对比所付出的执行成本，确定是否继续投入。因此两者间的信息存在相互验证关系，引入多角色评估有利于得到更全面的视角。
| 做好抽样方案：长尾分布下分群抽样
B端商户作为生态中的供给“群体”，具有内在群体结构，每个商户为生态提供的价值并不均匀，在生态内可获得的资源也不均匀。符合“贫者愈贫，富者愈富”的马太效应。
少数行业头部商户，自身体量规模大、品牌效应强，如家政行业的58到家、快递行业的顺丰等，属于各自行业内寡头玩家，可为生态提供该行业内绝大多数优质甚至独有资源，通常可获取流量扶持。
而大量长尾商户，自身体量规模较小、品牌效应弱，如社区保洁公司、区域性物流公司等，可供给的资源稀薄、质量参差，多数情况下只能自生自灭。虽然长尾商户个体对平台价值贡献很少，但群体数量巨大，种类繁多，可保障平台供给的多样性，满足用户多元长尾的需求，因此也是生态中必不可少的供给者。
因此，考虑到两个群体在生态内价值的差异，评估需分别取样，并对两个亚群各自赋予结构权重，以便将各自评估得分拟合为统一得分。
对于具体结构权重拟定方式，则需依据平台不同发展阶段的目标重点而定，如发展初期依赖行业头部资源保障用户体验，则头部权重更高；而发展成熟期依赖大量长尾商户保障供给的多样性和丰富度，则长尾商户更高。
///
3、『评出啥』评估结果分析
接下来，我们将引入两个例子介绍评估结果的落地应用。
| 分析各板块得分差异
在不同发展阶段，平台生态建设的目标重点也不同。通过横向对比各指标差异，能够判断出现阶段短板问题，确定后续优化方向。
如上图1，有大量体验问题暴露在“流程操作层”，导致该维度得分低，这是一个典型的处于发展初期的平台生态特征：其基础功能尚未完善，商户入驻/上线等流程操作体验不佳；但早期受益于流量扶持等优待政策，外加开发者尚处于平台摸索期，其对规则秩序和资源能力的满意度相对较高。当前阶段，平台应将精力重点投入在基础流程的建设上，优化基础体验问题，以加速生态规模的扩大。
如图2，当基础流程逐步建设成熟后，开发者对于平台的各类分发场景、运营规则有一定的实践经验后，更容易挑战“规则秩序”和“资源功能”等板块的得分，此时说明分发平台已经进入细致打磨分发场景、运营工具、奖惩规则及权益体系阶段，精力重点应该放在深入理解不同类型的行业打法，拓展分发场景并配以适合的运营玩法的奖惩规则及权益体系，以提升开发者的主动运营意愿。
| 关注不同生态群体得分差异
平台发展初期往往需要扶持头部开发者，打造标杆案例吸引更多开发者入驻，因此这一阶段头部得分往往高于腰尾部。而随着生态进一步完善，腰尾部逐渐找到生存方式，逐渐缩小与头部的差距。而如果腰尾部得分持续低迷，则说明平台后续的发展潜力不足。同样，如果头部从始至终都没有腰尾部得分高，说明示范作用没树立起来，优质资源有流失的风险。这两种都是生态健康度不佳的表现，需要业务加强警惕。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：百度MEUX 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
为什么同样尺寸的圆形看起来比方形的小？
字体设计师不会把所有字母都设计得一样高。他们会注意到人类视觉的特殊性，所以他们会使用光学技巧创造一个和谐的、可读的、平衡的字体。
在上图中，一个正方形、一个三角形和一个圆在几何上是相等的。然而，我们的眼睛却认为三角形和圆形偏小。这是因为这三种形状有不同的重量。从字体上讲，就是黑色的数量分布并不均匀。
有两种方式能够使得它们保持视觉平衡：
A. 计算两个形状的面积，并保持它们相等
我不喜欢使用这种方法，因为它只适用于简单的形状，如三角形、圆形和菱形。这种方法对于复杂的视觉效果不太有效。
B. 使尺寸更大、超出和模糊形状是测试视觉重量最简单的方法
现在你应该明白了为什么非方形/图标看起来比方形小，让我们看看真正的图标和 UI 元素如何使用这些光学原理变得更好。
在设计整套图标时，确保它们的平衡是至关重要的。为了保持平衡，在图标背板和图标区域之间留出额外的空间，并允许非方形图标超出图标区域。
另一个例子是一个矩形的UI元素和一个圆形按钮放在一起。如果圆形按钮的高度与矩形UI元素相同，那么圆形按钮看起来会更小。基于光学校正原理，你需要区别对待这两个元素。
看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你觉得哪一个更正确?请在留言区发表你的看法。
还有比正方形更正方形的吗?
我们的眼睛有古怪的视觉感知，我们看到的事物与现实不同。下面是一个类似的小测试，你觉得哪个圆和哪个方更标准?
在这些椭圆和矩形中，一个是正圆，一个是正正方形。我已经修改了正确的，但他们似乎更对称了，这是因为垂直-水平错觉。(彩云注：右边是调整过的，看起来会更圆和更正)
大多数几何字体不是几何图形。字体设计师通过牢记人类的视觉感知来设计高质量的字体。他们几乎在每个字母中都使用光学原理，以使字体保持平衡。
你从上面的测试中应该明白了我的意思。要了解更多，请看下面的图片。我把字母“O”从几何字体Futura放在一个完美的圆圈旁边。你觉得哪一个看起来更对称?
你甚至在底部文字出现之前就猜到了，对吧?来自Futura的字母“O”比完美的圆更宽，但看起来更对称。原因是，我们的眼睛倾向于看到的垂直区域比水平区域要长，即使它们是相同的。
让我们看看这个错觉是如何出现在字母“T”上的。
在上图中，水平笔画的粗细要小于垂直笔画的粗细，以避免产生错觉。你可以在设计方形图标、方形背景或头像边框等时使用这个技巧。
如何使驾驶尽可能平稳?
设计字体字形就像开车。当我们开车时，如果已经在弯道的起点时，我们不会转动方向盘，只是在到达弯道前稍作自然转弯，以免发生意外。
字体设计者不依赖于图形编辑软件的预设弧度。他们会调整曲线使其更平滑，因为他们知道人眼可以立即注意到直线突然变成曲线的点。
让我们看看这两种曲线：纯几何和微调。试着观察哪一个干扰了你的眼睛，哪一个是光滑的。
让我们看看在UI设计中我们可以在哪些地方融入这种学习。
你可能已经注意到右边的按钮、图标和框架看起来更赏心悦目。而左边的曲线有一个很硬的从直线到曲线的过渡。
我们如何修正曲线呢?在设计时，可以进入形状编辑模式，手动调整曲线手柄的大小，如下图所示。
为什么眼睛的判断比数值参数更重要?
间距是字体设计中最关键的部分。字体设计师根据字母的形状对字母进行组合，并以不同的间距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它们一起出现，那么它们之间的间距会有点宽，需要减少间距。这有助于形成和谐的字体。
字体来源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
现在，让我们看看如何将这个知识点运用到视觉设计的其他方面。你可能已经注意到，在圆形或矩形容器中放置三角形图标会使图标显得不协调。这仅仅是因为当用软件来对齐的容器中，三角形的面积两边是不相等的。看看下面的图片，可以用视觉解释来理解它。
为了使三角形在其容器内具有光学中心，我们需要平衡两边的重量。对于三角形，你可以找到质心，并将其与容器的中心对齐。现在，如果三角形是用形状工具创建的，Adobe Illustrator会提供质心的提示。
如果没有看到质心提示，也不要担心。质心可以通过简单地画线从任何两个边的中心到它们对面的顶点来定位。查看下面的图片来更好地理解它。
这种方法只适用于几何形状。对于其他更复杂的形状，你需要依靠你的眼睛判断，而不是数学参数。
需要记住的是:如果你为开发者切图时，你需要在图标周围保留一些区域，这样他们就可以将图标放在背景的中央。
从图标的质心画一个圈，留下它周围的额外区域。
让我们检查一下，可以在留言区讨论下到底哪个公司使用了错误的资源？
如何平衡?
你有没有仔细注意过字母“B”?它的底部被设计得比顶部大。如果我们设计的两个半圆在数学上是相等的，它会看起来不平衡(检查左图)。这是因为我们进化到从“视角”的概念来处理物理世界，在这个概念中，远处的物体看起来比附近的物体更小。（彩云注：可以理解为当你在山脚时看到的山脚物体要比看山顶的要大，透视原理）
在印刷中，这意味着要使字体同样平衡，就需要在底部画得更重。
让我们通过翻转字体中的几个字母来看到明显的区别。
字体来源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap
同样的概念适用于其他水平对称的字母形式，甚至在字母“H”的交叉杠是放在实际的中心以上，使它看起来更平衡。
所以，下次当你设计一个水平的图标或标志时，使用这种底部重的技巧来让它在视觉上更加平衡。
这种错觉也被称为“波根多夫错觉”( Poggendorff illusion)，这是一种奇怪的现象，会扭曲我们对形状相交角度不是90°的感知。出于某种原因，我们的大脑很难推断出一条被其他形状部分覆盖的线，从而导致连续性的中断。为了更好地理解它，先看看下面例子中的左边的图，看看哪条线是连续的，A还是B?然后检查我缩小了封面线的右边的图片。我希望你明白我的意思。
在拉丁字体中，' X '或' x '就是这种错觉的受害者，需要特殊处理使其看起来更自然。字体设计者稍微偏移对角线，以矫正X或X的光学效果。(彩云注：右边是调整后的，视觉上看更加连续)
如果你在为其他语言设计字体或为APP设计图标集时遇到类似的问题，你可以尝试像在字母“X”中那样偏移斜线。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：彩云Sky 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
设计不是拼图，深入下去，有很多细节需要推敲，而这些细节的背后的逻辑与意义更值得关注。产品主要强调的是与人的交互，用户通过对产品的操作来实现自身的目的，比如双击，滑动，常按等，而操作一般建立在产品的功能基础上，产品的功能细节体现在产品的业务逻辑中，产品所提供的功能是否更好的满足用户的需求，操作细节与功能细节密不可分，功能影响着用户的操作，而操作细节更多体现在用户的感受。
061.「淘宝」让优惠券合理使用的优先级设置
062.「QQ」消息图标-“摸一下”就能拉近距离
063.「百度地图」未来出行-提前规划行程变得轻而易举
064.「高德地图」出行前-人性化的天气提醒
065.「微信」公众号文章在看-让你看个够
066.「QQ音乐」跑步电台-让枯燥的运动变的更有趣
067.「腾讯视频」暖心的提示建立信任的桥梁
068.「躺平」动态IP插图-促使用户进一步行动
069.「爱奇艺阅读」会“冒泡”的TabBar栏
070.「美团」更明确的视觉传达-减少用户思考
071.「网易云音乐」遇见陌生人-听歌交友
072.「酷狗音乐」再也不用死死盯着歌词页面了
073.「微信」8.0浮窗-没有最好、只有更好
074.「Boss直聘」绑定微信-重要消息再无遗漏
075.「QQ」自习室-换种方式学习，不一样的收获
061.「淘宝」让优惠券合理使用的优先级设置
产品体验：
在淘宝的红包卡券列表页，可根据自身需求的实际情况设置优先使用类型，以达到优惠券的合理化使用。下单确认时，系统会自动选择事先设置好的类型，依次对订单金额使用优惠券进行减免。
设计思考：
只要我们出门走上街头，就会看到各种各样的优惠券在向我们招手，逛一圈回来，手里能攥一大把优惠券。即便是在家，楼梯道、门把手上、门缝下面都会有优惠券塞进来，多券在手，我们总是会去琢磨怎么花费最划算。不只是线下如此，线上更是夸张，每注册一个电商平台，都能收到一堆优惠卡券，而且还是日更新的。
商家都知道，在打折促销日渐平常的今天，消费者很难会再有强烈的购物冲动，单纯的打折降价已经不能给消费者直观的感受了，额外的优惠才能对消费者更有吸引力。为了提高店铺转化率，吸引流量，商家或平台都会发放一些优惠券，让消费者有“实惠”的感觉，更有利于拉动二次进店，以驱动用户买下更多的商品。其实优惠券发放给消费者之后并非不闻不问，还需要考虑通过何种方式发放、如何提醒、如何促进消费转化都值得深究，如果优惠券过期，表面上看是用户的损失，实际真正得到损失的是平台/商家。
在淘宝的红包卡券功能里，可设置优惠券的使用优先级，便于用户在下单时按照自己想要的方式让优惠券合理化依次使用，比如依据过期时间的先后、优惠力度的大小等，便于达到最大化利用。在消费者的心里，优惠的金额即自己赚到的金额，不仅能让其感受到优惠的强度，还能有效避免优惠券的浪费，有利于平台/商家发放的优惠券最大程度的使用，提高消费下单转化率，达到消费者、平台、商家三方共赢的目的。
（PS：如果每次都是平台默认选择，难免浪费，比如一张8折优惠券用在10元的商品上，远远不及用在100元的商品上划算：用户的消费思维）
062.「QQ」消息图标-“摸一下”就能拉近距离
产品体验：
双击或按住QQ下方消息小图标往四周拖动，就会变换各种不同的小表情，俏皮可爱的表情非常有趣。
设计思考：
Tab栏的作用主要是做内容分类，节省设备的空间，在用户需要的时候随时可以点击。可以想象一下，如果没有tab栏给大的模块分类，应用的功能全面铺开，就像进入了一个大型垃圾场（轻量型应用除外），乱糟糟的感觉。Tab栏本身就是承载多个功能集合的一个入口，其点击量影响着用户的使用频率和操作深度，直接关联着转化率的问题，所以很多应用也会在视觉呈现样式、交互手势、情感化、微动效等方向下功夫，用来吸引用户去点击，为其增加点击量及操作频率。
QQ的Tab栏消息图标就使用了趣味化的微动效样式，双击、或轻触图标往四周摸一下，图标就会变换各种不同的小表情，真的是让网友震惊了，通过趣味性的表情变化，也可让用户的心理情绪也随之改变，俏皮可爱的图标样式在保证识别性的前提下增加了亲和力和趣味性，拉近与用户之间的距离。趣味化的表现方式且与年轻人生活圈接轨，体现用户时尚潮流的文化基因，时刻用户保持着新鲜感。
（PS：上图中只是举例了其中几个表情，如果想了解更多，请进入QQ应用中体验）
063.「百度地图」未来出行-提前规划行程变得轻而易举
产品体验：
①、使用百度地图自驾出行，选中其中一条路线后，点击左下方的出行建议，设定出行日期及时间，系统以每15分钟为一个时间段，计算出每个时间段出行预估的耗时，并推荐最优出行线路。
②、选择公交/地铁出行时，除了应有的路线指引，还提示了未来的时间段用该出行方式存在的故障及延时信息。
设计思考：
出行驾车如何避开堵车高峰？如何选择合适的时间打车？公交/地铁常用线路何时会出现特殊情况停运晚点等，这些很多无法确定的时间经常困扰着大家。眼看着春节假期就来临了，这么好的旅游机会可不能在家中“躺尸”式的荒废度过，想必有很多人已经相约着去游玩一番的准备，不过经常会碰到途中堵车、路线封闭、交通工具停运等问题的出现，真的是让人“头大”。
①、百度地图的“未来出行”功能，自驾可提前设定出行时间，查看未来出发时刻的相应耗时，未来时刻以每15分钟为间隔，滑动时间柱就能了解哪个时间点出发耗时最短，还可以向下滑动页面，进一步了解每一段路程的详细用时，让周末出游的用户，提前规划行程变得轻而易举。
②、还可以精准预估“地铁进站”、“公交候车”的耗时，以及预估公交地铁的拥挤情况，让用户出行更添安全感，提前了解未来搭乘公交、地铁时已确定会出现的突发状况，便于提早预算换乘交工工具，节约出行时间，提高出行效率，还能方便用户下班回家避开晚高峰。
064.「高德地图」出行前-人性化的天气提醒
产品体验：
进入高德地图首页，如果是雨天，页面视觉会显得比较暗，能看到乌云及明显的雨滴落下，3秒后回到正常状态。
设计思考：
不知小伙伴们是否碰到过这种情况，带着雨伞从来不下雨，下雨的时候都是没有带雨伞；打车后前往上车地点发现在下雨，要么取消订单，要么去买雨伞，总是那么的事与愿违。变化不定的天气是最为影响出行的一项因素。而面对忽晴忽雨的天气，如何才能顺利出行呢？
使用高德地图，进入地图首页时，界面会出现天气动效，提示实时的天气状况，尤其是下雨天，可以提醒用户出门记得带雨伞，还便于用户根据实际的天气状况选择合适的交通工具出行，不论是打车、公交还是骑行，都可以随意调整，在用户出行之前通过视觉强调提醒，非常实用。
065.「微信」公众号文章在看-让你看个够
产品体验：
在微信公众号的文章底部，点击在看，底部会展开一个新版块“喜欢此内容的人还喜欢”，给用户推荐相似文章。
设计思考：
阅读量怎么样，要看标题起的吸不吸引人，文章内容质量怎么样，要看转发量的多少。我们都知道，微信有很多公众号都会产出质量较高的文章，所以也被誉为继线上看书之后的又一个知识发源地。将公众号的文章拉到底部之后，“在看”也是一个不错的数据统计，点击过“在看”的读者，不仅预示着对文章的肯定，同时也能增加文章的阅读量，形成二次传播，
在微信公众号的文章底部点击“在看”后，会出现新增的相关文章推荐版块，并提供公众号名称、文章标题、点赞数和文章封面图片等，对公众号主和自媒体的人来讲，文章曝光和阅读量的提升又多了一成机会，为读者推荐与原文相似或者同频的文章类型，既能满足引导用户继续探索的目的，还能通过所有公众号相互串联，让其他公众号的文章都有机会增加曝光和展示，进行流量分发，两全其美。
066.「QQ音乐」跑步电台-让枯燥的运动变的更有趣
产品体验：
在QQ音乐的设置里，通过跑步电台选择适合自己跑步速度频率对应类型的歌曲播放，一边跑步一边听歌，为自己提供跑步节奏和坚持的动力。
设计思考：
基于现在快节奏的生活状况，很多年轻人在午餐后直接睡觉、晚饭后常坐不起，这就是大批年轻人无法控制自己身体、越来越胖的原因。“喜欢”跑步的的人群越来越多，但众所周知，跑步需要极强的耐力和自律来控制自己坚持下去，但大部分人都挨不过三分钟热度，定下跑步目标时来势汹汹，放弃时就借口连连。
如果在跑步过程中感到非常无聊，就不妨用下QQ音乐的跑步电台，选择一首适合自己跑步的神曲吧。QQ音乐的跑步电台根据自己跑步的频率推荐适合的音乐，有适合慢跑的、快跑的、节奏感强烈的、专业人士的推荐......再加上QQ音乐本身带强大的歌曲库，在跑步过程中可以听到不同曲风的好歌，让跑步停不下来。用户在跑步之前一般都会设定时间或距离目标，在跑步时不停的查看数据（类似小时候在学校上着40分钟的一节课，经常查看还剩几分钟下课），播放着跑步电台的音乐，能引导用户的思维偏离设最初计定的目标，将部分思维想法转换到音乐的节奏中，给自己提供更多的跑步动力，则坚持的更久。另外，还可以设置“按步频匹配音乐”，免去手选，系统根据实时的运动频率，自动为用户精准推荐符合该频率的歌曲，让原本枯燥的运动变的更加有趣。
067.「腾讯视频」暖心的提示建立信任的桥梁
产品体验：
在零点以后打开腾讯视频，横屏观看影片，顶部以“夜深了”温馨的提醒，暗示“熬夜党”以身体健康为重，放下手机早点休息。
设计思考：
在几年以前，就报道过关于网吧通宵熬夜猝死的新闻。而如今互联网时代，基于电脑、智能手机的普及，去网吧上网的人的确少了，但相同的悲剧新闻却更多了，比如躺在床上熬夜逛淘宝、刷抖音、嗨聊、追剧等，一夜过去就没再醒过来（这绝不是玩笑，可能就发生在我们身边），只不过换了种方式，去的很“安逸”而已。
使用腾讯视频观看影片，在横屏状态下，到了深夜零点以后，屏幕上方会显示“夜深了”，通过暖心的文案提醒用户放下手机早点休息，表达出对用户的关切之意。语言是情感化设计最直接的利器，这种提示虽然没有直接中断用户观看视频，却很直接的将用户线上思维转换至现实的场景之中，充分的考虑到用户的身心健康，以情感化的方式引起用户警觉，促使用户结束观看，表面上看似缩短了该用户的使用时长，实则跟用户之间建起了一座相互信任的桥梁，以提升用户后续的使用粘性，增减其忠诚度。
068.「躺平」动态IP插图-促使用户进一步行动
产品体验：
进入躺平APP关注（首页）页，当页面数据为为空时，Tab栏上方会出现IP插图，通过动态的指引方式引导用户进入发现页关注躺友，以获取内容信息。
设计思考：
在我们使用的众多应用中，大部分的空数据页面都仅仅只提示页面状态，甚至有的一片空白，无任何提示都，并没有合理的引导用户如何去获取数据信息，会导致用户疑惑或焦虑，对产品产生不信任感，从而造成用户流失，因用户量的减少直接影响整体业务运转，得不偿失。
躺平APP的空状态利用IP打造了一套颇具独特风格的视觉形象，用一种“贱贱”的表现方式，映射出了主流用户最真实的姿态，可谓是“人贱人爱”。
进入躺平首页，当没有好友、页面数据为空时，通过动态IP插图明确的行动指令引导用户去关注躺友，以获得数据内容，能让用户快速地进入到产品使用中，减少用户的疑惑和焦虑感。同时，动态的表现方式更具点击欲望，让交互行为更加活泼有趣，不仅能正确的引导用户，也是转化用户进一步操作好方法。
069.「爱奇艺阅读」会“冒泡”的TabBar栏
产品体验：
点击爱奇艺阅读Tab栏的冒泡图标，除页面切换之外，图标还会向上冒着气泡，动态呈现方式非常有趣。
设计思考：
APP的Tab栏作为第一触点，对整个应用模块的分类起着不可替代的作用，还能检验应用整体的设计是否精致，其重要性不言而喻。很多设计师都会在图标风格及造型上下很大的功夫，但却常常忽视另外的一个关键点，即tab触发时的动效设计，合理的动画效果，能起到画龙点睛的作用，但在设计过程中一定要考虑什么样的动画效果更符合该产品的调性，传达出设计品牌及理念。
点击爱奇艺阅读APP底部tab栏的“冒泡”图标，图标以动效方式呈现，其上方还会冒着气泡，2秒后自动消失，能降低页面切换后、内容刷新时需要等待的枯燥感，提升用户操作的愉悦度，且动态的表现方式相比静态更吸引眼球，以趣味化的方式增加视觉关注度，因此在切换 tab 时具有更强的视觉冲击力。动态的气泡结合tab栏“冒泡”标题，则更加真实形象，更好的传达寓意，也能给用户留下深刻的印象。
070.「美团」更明确的视觉传达-减少用户思考
产品体验：
使用美团酒店/住宿选择入住时间，在日历中设定好起止日期后，除起止日期用了明显的提示外，中间夹带的时间也用了浅色填充提示，截止时间上方还提示了入住天数统计。
设计思考：
在我们外出需要入住酒店时，选择住店截止日期是必不可少的一步，因目前可供住宿的应用比比皆是，在用户体检方面稍不留神，用户就可能选择其他应用。设计师需要在设计时下功夫，比如减少操作路劲、节约用户时间成本、明确的视觉传达等，只要多站在用户的角度思考，都能带来更好的用户体验。
在美团APP上使用住宿，选择起止时间时，并非常规的设置好起止时间就完事儿了。在起止日期范围内的时间里，系统使用了淡淡的底色填充显示在日历中，用更明显的视觉传达，让用户更明确自己所选择的日期及范围。截止时间上方统计了用户的入住天数，因为涉及金钱成本，在用户可能会自己计算的情况下，系统已经通过自动统计时间来减少用户的思考，节约时间成本，便于用户在更快的时间内做出决策，达到转化的目的。
071.「网易云音乐」遇见陌生人-听歌交友
产品体验：
使用网易云音乐的一起听功能，除了能分享给好友外，还可以选择“遇见陌生人”，系统自动匹配兴趣相投的陌生人并添加进来一起听歌。
设计思考：
自网易云音乐“一起听”上线以来，深受广大用户的好评，原来听着寂寞的歌曲并不会寂寞。基于不同的需求，心情不好时，邀请闺蜜一起听；有新歌发行时，邀兴趣相投的好友一起听.....，但是，并非每次都那么方便，需要好友资源、相同时间、同一个音乐应用等诸多条件，有时候邀请发出去之后，收到的只有尴尬。
网易云音乐的一起听最新版本上线了“遇见陌生人”功能，这个功能能够让两个彼此之间不认识的人同时收听一首歌曲，对于有很多心事的人而言，这的确是一个可以让你袒露心声的好机会。和陌生人一起听歌，还能通过听歌来交友，实现了更多有趣的交流模式，让用户在听歌的过程中找到志同道合的好友，不得不说，这个功能真的很贴心。
072.「酷狗音乐」再也不用死死盯着歌词页面了
产品体验：
在酷狗音乐设置中可开启桌面歌词，按住歌词卡片拖动调整摆放位置（限设备四角），还可以通过滑动使其吸附在设备两侧，待需要时再拖出来，点击卡片关闭按钮，歌词关闭，歌曲也随之停止播放。
设计思考：
曾几何时，智能手机还未普及，我们偶尔听到一首喜欢的歌曲，赶紧回去打开电脑，开着桌面歌词，跟着学了起来。看着桌面歌词，跟随节奏，可能是学歌最快的方式了，在KTV看着屏幕唱歌就是最好的例子。随着后来智能手机的普及，听歌/学歌确实方便多了，任何地方、任何环境（耳机）随时打开APP就行，不知大家有没有发现，虽然听歌的次数、时间都增加了，很多歌都能哼上几首，但正经起来，好像什么歌都不会唱，要想学还得盯着APP播放页的歌词，太过局限，很多人都不想浪费这个时间。
酷狗音乐的桌面歌词就方便了很多。从设置中开启桌面歌词，用户在听着歌曲时逛淘宝、聊天、看书都可以随时浏览歌词，如果歌词卡片遮挡了手机内容，拖到边缘隐藏即可，非常方便有查看、摘录歌词的需求的用户使用，同一时间做着几件事情，省时省力，何乐而不为呢？
073.「微信」8.0浮窗-没有最好、只有更好
产品体验：
微信上线8.0版本，浮窗由之前的“边缘吸附-只显示标题”调整到了“左上角-显示网页预览图”，多个浮窗更清晰。
设计思考：
记得以前，使用微信浏览网页时，如果中途退出，下次就得重新打开，真心麻烦，用户在此痛点的诉求下，浮窗功能便诞生了，从此，聊天/刷朋友圈、看文章不再艰难，中途停止，用浮窗挂在屏幕边缘就行了，其方便程度自然不用多说。
微信一直致力于用户体验而不停的探索，正所谓没有最好，只有更好，即使上线了某个能让用户开心尖叫出来的功能，其团队也不会止步于此。微信8.0版本在上了一波“吊炸天”的功能后，也顺带优化了浮窗功能，不得不说：比以前好用多了。入口固定在了左上角，解决了之前悬浮设备两侧遮挡内容需要拖来拖去的问题，有多个浮窗时，也不用花太多时间回想哪个是自己想要的网页（之前只显示标题），通过缩略图就一目了然，能有效减少用户思考而带来选择性困难的问题，极大方便用户使用，考虑真的很人性化。
074.「Boss直聘」绑定微信-重要消息再无遗漏
产品体验：
在Boss直聘设置功能里，进入通知和提醒，按照提示绑定微信并开启消息通知，就可以通过微信接受Boss直聘引用里的沟通信息了。
设计思考：
对于现在的白领技术人才，很大一部分都是一边工作一边求职，以求某得更好的前程或更高的薪资，毕竟很优秀的公司还是在少数。不管在一个企业做了多么久，只要实力相当，跳槽涨薪远比待在一个公司提薪来的快，这是一个被业界公认又不会被挑明的真相。基于本身就在工作的原因，求职不会那么的明显，投递简历之后，更不会长时间停留在求职应用里，等到下班去看时，因为长时间未回复消息导致机会稍纵即逝。
Boss直聘的微信“代收消息”能帮助用户解决这个难题。通过设置中的消息与提醒，绑定微信，方便用户能通过微信及时收到重要的求职沟通信息，再也不用担心错过重要消息了，十分方便，为心中有“小九九”的求职者提供了很大的便利。
075.「QQ」自习室-换种方式学习，不一样的收获
产品体验：
在QQ的“动态”Tab功能里，进入自习室，能看到正在学习的人数，“点击加入”便可跟其他小伙伴一起学习了，学习中可相互够沟通、点击他人头像“充电”等，很有仪式感。
设计思考：
不知大家是否有过这种经历：想每天早上起来跑步，可没坚持两天就被各种理由征服；想决心减肥，可控制不了自己的嘴巴和食欲，连减肥的想法都没有了；想睡前看书，可抖音、游戏、追剧一直刺激着自己的大脑神经，最后书本只能放在家里吃灰。想努力的人总是能给自己定下每天的学习目标，做好学习计划，但是没过几天就坚持不下去了，没有意志力，整个人总是陷入焦虑的状况，放弃，又不甘心，重新开始又放弃，这样的恶性循环持续下去，可还是在原地打转，有没有想过换种方法试试。
进入QQ的自习室，我们就可以和更多小伙伴一起学习学习交流、互相鼓励，虽然是在线上，感觉有些虚拟，但针对自制力不强的同学却能起到获得坚持下去的动力，一群人在一起学习比一个人更有学习氛围和仪式感。
（不要抬杠，报过网课同学都清楚，看直播课通常会有更强的吸收能力，而课后看回播不仅会把时长翻上两倍，其吸收能力也比较差，直到看不下去放弃为止，少数自制力很强的除外。同样的道理，在图书馆看书比在家看书的效率也能翻上好几倍）
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：大漠飞鹰 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com