在今天的 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.添加高光元素作为图形的亮点，拉升层次感
然后，通过这样的步骤，再来完成后续的两个图形，拆解完的效果如下。
然后，再用这三个修改后图标套用进原来的页面，并做出对应的修改，再来看看前后对比：
通过这个对比，我们就可以看出在这个复杂的首页头部中，轻拟物风格可以从一众平面中被凸显出来，且不会显得太突兀和复杂。
而这就是轻拟物在项目设计中的实际作用，当画面元素已经开始超负荷，且容易导致同质化的审美疲劳和主次不清时，就是轻拟物登场的时候了。
在如今的界面设计中，投影使用的范围和频次越来越高。无论线上项目或是追波上飞机稿，都可以看见各种各样的投影样式。
投影的使用，是 UI 设计师必须掌握好的视觉设计基础。投影远没有大家想象的那么简单，即使软件中可以设置的参数并不多，很多设计师始终没办法很好的应用投影来提升自己的设计质感。
所以，这篇文章就会详细讲解设计投影的正确姿势。
有了光，才有影。光影是美术和摄影最核心的基础。
如果没有系统学习过相关理论，对投影的认识会有失偏颇，会认为投影只是将一个物体的轮廓（遮挡光源的部分）完整映射在其它平面上而已，一个光源下只有一个影子，比如下图设计出来的情况。
但是，真实世界中的投影，却并没有这么简单，往往虚实即不统一，明暗也不一致。就像下面这个物体的阴影。
在光学原理中，不透明物体遮挡光源，所产生的影子有两个部分，本影和半影。本影是影子中间最暗的部分（还有伪本影的概念，我们暂时将它合并起来理解），而四周开始变浅变淡，有弥散质感的影子称为半影，就像下图所示。
现实世界中可见的投影都会形成这两种影子，因为光源有散射的特征，当光线照射在物体上时势必会产生非垂直角度的光线，于是其中作用最大，重叠最多的一部分形成本影，而其余比较极限的切线部分形成半影，如下图的案例。
通过案例我们也可以发现，当光源、物体、阴影面的距离不同时，产生的本影和半影面积也就不同。反过来讲，我们还可以通过物体本影和半影的面积，来判断它的空间关系，比如下方的两个物体，明显能感受到下侧悬浮的高度大于上侧。
或者，通过阴影来判断光源对于物体的方向和强弱。比如下图案例，就可以明显判断光源位于画面的左侧，所以即使摆入其它物体，阴影也会朝反方向延伸。
除此之外，投影还可以反应很多其它隐藏的三维信息，只要使用得当，它就可以帮助设计师表达呈现各种不同的空间位置。比如可以通过投影判断物体是处于悬空或者是平躺，以及物体的厚度如何。
根据生活的经验，我们已经对投影所产生的暗示习以为常，能根据投影的结果下意识的对界面内容做出判断。所以，设计师在设计过程中如果对投影没有进行很好的思考，就无法设计出符合规律和逻辑的投影，界面就会产生违和感，而作品也因此大幅降低了质感。
在进入了扁平化的设计环境后，投影有很长一段时间被抹除，因为大家认为那是拟物的遗毒，就怕设计里用到拟物元素显得不够时髦。
到了 Material Design 发布以后，谷歌在规范中增加了 Z 轴的概念，也就是为平面预设了立体的空间，设计元素可以定义与空间中水平面的距离，并通过投影来表现。
下图中，Z 轴数字越大，代表和水平面的距离越远，上升得越多。而带给我们这种感受的原因，就是投影的暗示，元素本身的 XY 坐标并没有任何改变。
即然增加了投影，那么谷歌的专业设计团队，肯定不会很随意的制定其参数。当我们打开谷歌的官方 UI kits 源文件进行查看时，就能发现其中的奥妙。它们为元素创建了两层投影，即本影和半影，有时也称为 top shadow 和 bottom shadow。
并且，还有一个在第一部分没有提及的要点，投影的深浅与元素的距离是非线性的，即中心到边缘衰减的速度是越来越大的，用坐标轴标示就是非线性的函数关系，而大多数软件中的投影只能以线性的模式呈现。
在 UI 设计师接触的平面类软件中，只有 PS 具备完美复现这种投影的能力，即控制投影的等高线。
上面出现的投影都是黑白灰，但在现在流行的设计作品中，最常见的是应用了彩色的投影，摄影中也经常会应用彩色的投影渲染氛围。
但是，投影中的这些彩色区域，并不完全都是投影，还包含了折射和漫反射等混杂的色光。为了简化（完整的阐述可以写一本书了），我们可以认为是光线穿透物体从而投射出带有物体本身颜色的投影。就像撑起一把绿色的阳伞，伞下的人头顶也会弥漫着草原的芬芳……
在开始展示具体的设计案例前，我们要先明确一个原则，即：优雅的投影是让你感受到它的存在，但不会吸引你去关注它！
一般的设计软件中，元素的阴影即是在元素的背后添加了一个相同轮廓的纯色矢量图形，我们可以通过 XY 轴移动它的位置，并使用模糊的参数来设置它的弥散度。
当元素距离水平面越近，阴影距离元素也就越近，即投影的 XY 值越小，模糊也越小，如果离得远则相反。
3.1 常规投影类型
第一种投影的类型，即假定元素平躺，光源正对着元素的平面，可以参考谷歌提供的投影方案叠加两层投影。第一层是 XY 轴坐标为0，只添加模糊的参数，透明度较低。第二层阴影使用相同的模糊参数，增加 Y 轴坐标，透明度较高。
在非 MD 设计中，它浓郁的投影参数会让整个界面变“脏”，变拥挤。我们要做的是要降低投影的透明度，这样才能让投影的表现更自然舒适。要牢记的是，当使用纯黑色做阴影时，透明度无论如何都不应该高于 20%，正常区间在 5%-15%。
既然知道阴影属性的规律，我们还可以复制这个矢量图层做高斯模糊也可以得到一样的效果，这种方法可以支持我们设计出更真实的投影。即将 Bottom Shadow 独立出来，缩小并向下移动。
如果想要得到彩色的投影，那么只要切换投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我们要凭感觉去调整它们的透明度。
如果感觉不得劲，阴影太少了，那么我们就让元素的 Z 轴上升。
既然前面提到彩色投影是由于光线穿透了元素，那么当使用了渐变色或者是图片的投影，我们在之前提到的复制出的那层充当 Bottom shadow 的矢量图形，就可以不使用填充色，而是直接用渐变或者是原图进行模糊和透明度调整。
3.2 非常规投影类型
光既然可以垂直于被照射平面，那么发挥想象力，我们还可以更改光与面的位置，让光线与平面之间的夹角变小，如下图所示。
在这个场景中，投影就作用在图片下方的地面，只有地面处于透视状态时，才能可以看见它的投影，所以，我们就可以得到下方的效果。
当然，我们还可以结合光源的类型，比如使用聚光灯等，那么阴影的轮廓就会发生变化。
我们甚至可以假设元素本身产生了一定的变形，如边缘翘起，那么就会出现独特的阴影形状。
我们可以从日常生活中的观察将各种不同的投影形式引用进我们的设计中，让我们设计中的视觉形式更丰富有趣。
学会正确的投影设计方式，并不是仅仅让我们局限在 UI 元素的设计上。它还能给我们带来很多意想不到的帮助，比如做设计作品的包装。
通过前面讲解的知识点，上方展示案例中应用的阴影方式相信你们已经可以看出端倪了，如果使用基础的阴影设置去创建展示的阴影，就会发现效果远远不如案例的高级，自然也难以带给别人良好的视觉体验。
最后，在项目中，想要将设计出来的阴影交付给开发，真正落地实现出来，无论安卓或是 iOS ，阴影的渲染和设计软件的参数是不一致的，这就需要大家自己钻研究了。
作者：酸梅干超人 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
头像，作为我们在虚拟世界展现给别人的形象，无疑拥有强烈的社交属性，还记得当年刚刚拥有QQ的我，隔一周就会换上自己喜欢的图片，通过头像还添加了好些拥有同样爱好的人。
但是随着年龄的增长，我们开始不太爱去设置自己的头像(有些APP甚至会将设置头像作为领取奖励的任务，可见大家越来越不爱设置头像)，一些不经常使用的APP都是习惯性的使用默认头像。
这时候设计合适产品的默认头像能够使产品整体更加和谐。接下来我们就来看看默认头像的7种设计方式。
单个无性别头像是最常见的默认头像设计方式，以无性别灰色或单色系半身人像为主，有些会使用宇航员的形象（也看不出性别），且一般只有一个。如下图：
特点：无性别头像具有更广的包容性，设计简单快捷适合比较赶的项目；但设计单一，单个无性别头像的社交属性不够强烈。
性别头像以男女性别划分，根据用户男女比例的不同有以下三种情况。
产品定位以男性居多，无论用户男女都仅有男性默认头像。
特点：只设计一个男性头像，比较快捷，但对女性用户不太友好
产品定位以女性居多，无论用户男女都仅有女性默认头像。
特点：只设计一个女性头像，比较快捷，但对男性用户不太友好
产品定位没有明显的性别偏向，分别设计男性和女性头像，需要注意的是该方式常常需要用户设置性别。
特点：分别设计男性与女性头像，能满足大部分用户，需要开发判定用户的性别。
吉祥物头像也是使用很频繁的，一般拥有吉祥物的APP都会采用该方式设计默认头像，设计1个或是多个。
常见吉祥物多以动物为主，也有以人物、拟人物为主的吉祥物，比如B站的看板娘萌妹子和黄油相机的一坨黄油。
特点：吉祥物头像更具辨识度，随时随刻加深用户对吉祥物的印象，便于制作延伸设计。
这里的logo头像是除去以吉祥物为logo的APP后，其他的logo头像。使用这种默认头像的APP比较少见，目前我看到的有悦动圈和开眼，如下图：
特点：logo头像能加深品牌的印象，但缺失了头像应有的社交属性。
头像中以文字为主，一般仅有两个字。以钉钉为列，它的默认头像使用用户姓名后两位作为中心，我认为其实钉钉的默认头像已经可以很好地帮助用户找到公司对应的同事，反而比起某些图片类自定义头像来的直接。
还有一种文字头像是以APP名称为主，比如叮当快药，它的默认头像取了”叮当“二字，和logo头像类似，同样能加深品牌印象。
特点：以文字为主，多为两个字。OA办公系统可借鉴钉钉以员工姓名为主。也可将APP名称置入头像中，能迅速设计出来，适合时间紧的项目。
多主题默认头像，常用在拥有强烈社交属性的产品中，APP给了用户更加丰富的默认头像选择，有了这些丰富的默认头像即便用户不自定义头像也不会对界面的层次感造成影响。
soul设置头像时可以选择多种画风的不同人物，男女分别有36个默认头像供用户选择，并且还可以改变背景色，使得默认头像变化丰富，具有一定的趣味性。
类似的还有B站的随机头像，共有11个以B站看板娘为形象的默认头像，可以帮助用户减轻因选择困难症不知用何头像的焦虑。
特点：为用户提供了丰富的默认头像，能减轻用户不知使用什么头像的选择困难，并且具有一定的趣味性，但设计花费时间较多，不适合时间紧的项目。
最后介绍的捏脸头像，追溯起来应该是从iOS12发布的Memoji延伸而来，这种可以像捏泥人一样任意改变的头像具有非常强烈的趣味性，甚至形成了一夜爆红专门捏脸的APP-ZEPETO。
捏脸头像的有趣不仅在于可以捏脸，它就像是我们在虚拟世界中的形象，可以给她打扮、布置房间等，更像是延伸出来的装扮游戏。比如淘宝点击个人中心的头像就会进入淘宝人生。
soul则将捏脸头像真正应用到了头像的制作中，在个人中心点击头像即可进行超级捏脸，捏好后就可以直接应用了。
特点：具有强烈的趣味性，可以延伸为单独的互动游戏，实现难度较大，不适合广泛的应用。
本文着重介绍了7种默认头像的设计方式，分别是单个无性别头像、性别头像、吉祥物头像、logo头像、文字头像、多主题头像、捏脸头像，我们在设计时可以根据项目时间、产品的定位、趣味性等选择合适的默认头像。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
数据可视化的表现形式现在也2D和3D（这里的2D和3D只是通俗的叫法，不具备行业普遍性，只是作为文章中的分析，进行表达），在网上还是有很多关于2D数据文章和教程，我觉得还比较具备行业的普遍性，所以今天我们就来聊聊3D数据可视化。
现状：3D可视化目前来说还是属于一个比较小众的设计群体，而且因为主要面对的客户大多是ToG或者ToB的项目，项目保密工作做的很好，对外发声较少，因此也会显得特别神秘，行业门槛也相对较高。但是由于政府和企业对于这类项目的需求大，再加上城市智慧建设、军事电子沙盘、智慧交通，项目多且广泛，也就导致了这类设计师较为稀缺。
通常所表达的就是通过3D的游戏引擎（例如：Unity3D）制作出来的数据可视化项目，他能够更直观的还原出所要展示数据可视化的真实场景，并且能够实时接入数据，使得整个项目更具立体、更具有科技感。使得项目在面对复杂操作时能灵活应对。
在我看来，虽然也是UI设计师，但是他和大众认知中的UI设计师又有很多不同，比如承载设计的屏幕可能大到16m*9m、小到只有iPad的尺寸，因此很考验设计师对不同尺寸屏幕下的设计方法。而3D数据可视化更多是向空间、建模形式的表达，因此对于三位的理解、空间的交互转变都尤为重要，我在下面来一一拆解需要哪些能力～
视觉能力：在设计当中，视觉也是最基本的能力，其主要满足这个数据可视化当中对于场景、物体的视觉能力、数据图表的视觉效果，对于地图、建筑、数据的视觉表达。通常风格以科技感的风格为主，因此考验的更多是我们设计师的想象力、对于科技产品的表达能力，因此对于FUI比较重视，如果平时能够多看科幻电影能够对这方面能力也会有所提升～
数据可视化能力：首先你需要具备很强的数据表达能力，即将用户想的数据现象通过你的数据化设计进行表现出来。同时需要去理解每个数据之间的真正含义，然后再去设计，因此对于图表的理解必须更加深刻。再次因为是通过3D的手法实现，你所更需要了解是我设计的这个图表，2D和3D之间到底存在什么差异，既然我用了3D，在图表层面上怎么和2D图表拉开差距、有所区别，这是我们需要去认真思考的。
三维交互能力：三维软件的交互和二维不同，虽然在移动端大家都提出了Z轴的概念，但是和现如今所需要的可视化的项目不同。
建模能力：因为在实际工作当中，很多建筑物不能够靠你的三维想象来进行设计稿的制作，因此通常我们也会使用c4d这一类的三维建模软件，这样能够保证快速出设计稿的同时，对于物体的表现又能非常到位。
对于接触数据可视化的UI设计师来说，最关心的莫过于这个项目你们是怎么落地。因为每个公司要求不同，我说的只是我们自己的做法，只是想说出来和大家分享分享～
一般我们产出的会几个东西：设计静帧图（包含静帧图、标注、切图）、视频demo、交互流程（看项目）
基本流程：这个是必须要的，首先项目会根据我们所出的设计静帧图进行和需求方进行对接，确定他们想要的效果和设计静帧稿上是否一直。如果双方理解存在差异，就会按照要求进行修改。修改完成后会将设计静帧稿交到建模师手中，3D建模会根据你这个静帧图进行建模。当然，我们设计师是不需要制作模型的，如果会，当然也是更好，能够方便建模师进行快速建模。但是因为每个项目的要求不同，对于我们这种设计师来说时间相对很紧。对于我们来说需要进行快速的出图，从而能够和需求方进行方案的确定。
设计静帧图：他最大的作用是和需求方进行沟通，以及和建模师进行效果确定。还有后续验收时会根据静帧图进行效果评定～
标注：字体、字号、颜色、位置、基本数据参数，标注和之前大家熟悉的思路基本一致。
切图：icon、图片，开发不能通过代码进行实现的
视频demo：会根据项目的难以程度进行制作，通常在较大项目中，会有时间进行视频demo的制作，同时demo也会给需求方、开发进行很好的演示，使得整个项目在开发当中能够更加明确。
交互流程：但是我们需要考虑到的是设计后整个效果是如何，以及设计后整个点击过后的交互，因此在基本方案确定后，静帧图会和交互方案
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：CE青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、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端系统当中，最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点，但是用户对于这个点的认知成本实在过低，也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后，要适当引导用户，解释这个功能的使用场景才不会让你设计的功能被淹没。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：CE青年 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
提起用户激励体系你会想到什么？积分体系？签到体系？或者是简单粗暴的现金优惠？
以上都不是，今天我想和大家分享的是任务成就体系中的勋章设计。
一、什么是勋章
我们先来看看勋章的定义： 勋章，是指授给有功者的荣誉证章或者标志。 古代欧洲为了区别在战场上的骑士，一个名为勋章的标志制度得以发展。每一个贵族都会设计出一个独特的标志，制作在他的盾牌、外衣、旗帜和印章上。（摘自百度百科）
上面这段话有三个词语是重点，有功者、荣誉、独特标志。有功者反应了勋章不是每个人都能获得的，而荣誉则反应了勋章是荣誉的象征，能带给获得者精神上的满足。独特标志则区分了获得者与其他人。
小到小时候得到的小红花，大到奥运会国家赢得奖牌，这些都算是勋章（不同产品的叫法可能不同，有勋章、徽章、奖章等）。
二、勋章的作用
上面我们说了勋章能带给获得者精神上的满足，那么延伸到互联网中，勋章设计的完善则能一定程度上起到满足用户的成就感，激励用户不断使用产品的作用，常用在内容类产品中，如视频类、知识付费类、阅读类产品中。
但是把勋章设计运用的最好的当属游戏类产品了，比如王者荣耀的勋章成就体系，借助获得难易程度不同的勋章，能使用户自主的不断使用产品，获得高等级勋章后还会被膜拜为大神，充分满足了用户的虚荣心。
三、勋章页的构成
勋章页大致由六部分构成。包括勋章页入口、勋章墙、勋章详情说明、进度展示、勋章图标。
1.勋章页入口
勋章入口一般有两个位置，一是放置在个人中心页中，还有一种则是放置在个人主页中。个人中心页只需点击底部tab切换即可看见入口，而个人主页还需用户再点击一次才可看见。
放置在个人中心
放置在个人中心的勋章入口大致也有两种样式，一种是以图标的形式跟随在昵称旁边，另一种则是放入个人中心列表功能入口中。如下图：
二者的选择主要是看个人中心的主要导航方式，一般宫格导航为主的个人中心页会采用勋章入口跟随昵称旁边，列表导航为主的则会将入口放入列表中。
当然，具体选择还是看勋章功能的重要程度，比如波洞的个人中心以列表导航为主，但勋章入口却是放置在顶部宫格中，我的理解是波洞的勋章功能层级较高，因此放在了更显眼的位置。
放置在个人主页
勋章入口多以图标形式跟随昵称放置在个人主页中，此类产品往往拥有较强的社交属性，用户拥有自己的动态主页，因此既能查看自己的，也能查看他人的勋章。
上图知乎的勋章入口还将用户拥有的勋章展示了出来，比起单个图标入口更能吸引用户点击进入
2.勋章墙
点击勋章入口进入的页面就是勋章墙了，勋章墙主要包括用户已获得的勋章信息以及产品包含的所有类别的勋章展示。
勋章墙展示几乎都是采用的宫格式布局，一般一行分布2~5个勋章，多以3个为主。
勋章墙中的已获得勋章信息包括用户总获得的以及不同类别勋章的单类获得数，显示总获得数的勋章墙会在顶部加入用户的获得信息，帮助用户一眼识别。
在勋章墙的设计中，注意要做好获取与未获取勋章的区别样式，重点是保证用户能一眼识别出获得与未获得的勋章，多是将未获得的勋章置灰处理。反面例子如下：
上图KEPP中，已获得勋章是将其正常颜色展示，而未获得勋章采用的浅紫灰色，我一眼看过去时真的没有反应过来哪些是未获得的。
3.勋章详情说明
勋章详情说明是在勋章墙展示中，点击勋章后以弹窗的形式展示出来的，包括全屏弹窗与非全屏弹窗两种展现形式。
全屏弹窗详情说明
勋章详情说明采用全屏弹窗能承载更多的信息，除了可以包括获取说明外，还可以承载奖励说明、获取进度以及获得后的分享炫耀按钮等。
上图中得到与咕咚的该勋章都属于升级类勋章，勋章本身有级别的划分，左右切换可查看不同级别的勋章，像这样有等级划分的勋章采用全屏弹窗会更加直观
非全屏弹窗详情说明
承载的信息较少，一般只包括简短的说明信息，更加简洁轻量。如下图：
知乎与开眼都采用的非全屏图片弹窗，视觉效果更加轻量。知乎虽然也有等级划分类的勋章，但由于采用的非全屏弹窗，等级切换采用的是点击切换，说明文字也更加简洁。而开眼则直接在文字中说明下一等级勋章，并不能直接切换查看。
4.进度展示
需要累积获得的以及等级划分的勋章还需要加入获取进度。我汇总了3种勋章进度展示的样式，包括进度条、数字进度、文字说明。
进度条
以一个横向进度条展示在勋章详情说明中，能够直观看出当前进度占比，对升级进度有一个大致的判断，占屏比较大，适合放入全屏弹窗详情说明中。
上图中咕咚进度条只展示了进度百分比，而波洞的进度条同时配上文字说明，升级进度更加精确。
数字进度
左边为当前达到数字，中间斜杠隔开，右边为该勋章获取总达到数字。升级进度精确，占屏比小，即可放入全屏弹窗详情说明也可放入非全屏弹窗详情说明。
文字说明
文字说明进度直接告诉用户还差多少具体的进度，没有总进度展示，进度也很精确，占比小，注意需要对文字进行字数限制。
5.勋章图标
勋章图标作为勋章设计中最重要的一环，需要UI设计师花费很多的心思。勋章图标目前多为图形图标，我只看到开眼是采用的图片类勋章。
在设计图形勋章时以现实生活中的勋章为灵感，多采用统一的勋章背景模板，保证整体勋章墙的视觉统一，便于多次复用。常用的形状有六边形、圆形、盾牌形状等。
切忌在设计图形勋章时采用复杂的背景模板，以免降低了勋章内部主体的层级。
四、划重点
本文主要为大家浅析了勋章设计的定义、作用以及勋章页的构成。
勋章的定义：勋章是指授给有功者的荣誉证章或者标志；
勋章的作用：勋章能带给获得者精神上的满足，一定程度上激励用户不断使用产品；
勋章页的构成：包括勋章页入口、勋章墙、勋章详情说明、进度展示以及勋章图标。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：人類君 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着跨设备跨平台的趋势不断显现，比如最近很火的鸿蒙，一部手机就可以完成办公场景到生活娱乐场景的转化，未来B端的管理系统不在局限于pc端，体验将不断向移动化对齐，使B端用户不再受时间和地点限制。
B端各个端口的特性：
在保证使用体验下。pc端、pad端、pc端的功能会是一个下放的过程，屏幕越小功能越简化。
比如有赞的美业工作台，手机端只有宫格功能入口，PAD端除了功能入口外，把工作内容也做了露出，PC端则展示了数据图表、快捷功能，以及其他提升效率的入口，内容交互更加的复杂。三端里，不仅屏幕尺寸不一样，使用场景和角色也完全不同，比如PC端店长使用频次更高，用于管理店铺查看经营状况。PAD端则普通员工频次更高，用于查看具体工作内容，需要接待的客人。手机端更通用，所有角色所有场景都会使用，有可能是在店里、家里、路上所以在设计移动端时要考虑如何在提升操作效率的同时兼容可用性。
B端的典型表单，由数据录入和操作按钮构成，往细拆解的话包含1.标题、2.标签、3.提示信息、4.输入区、5操作按钮。
标题：表单的主题，起到说明表单模块的作用，尤其是在分组的表单中格外重要。
必填提示：用于区分多个表单内容项的必填和非填项，一般使用红色的“*”表示。
标签标签：表单内容项的名称，说明对应表单含义以及向用户说明应该录入信息的类型。
提示：帮助用理解表单，最多见的是引导说明信息和反馈信息。
输入区：表单的核心区域，承载用户主要的交互。
操作按钮：完结表单操作的触发器，用于确认数据或者取消数据，表单越复杂按钮也会越多样。
大部分场景我们希望用户能尽快完成表格。但在有些场景呢又希望用户能放慢速度，使他们能够深思熟虑，比如下面的三个场景：
1.在一些资质审核的页面，希望用户能仔细填写。
2.小屏幕的场景，要求表单纵向或者横向最小化。
3.国际本地化的需求，表单需要适应不同的长度和多种语言。
这张图是医生端注册流程的竞品对比。他们哪种方案能更好的为用户和产品服务呢？接下来我们来看下三种典型的表单，能帮助你更好的理解。
1.左对齐标签
优点：如果用户不熟悉表单要录入的数据，或者是复杂内容，左对齐会更容易些。视觉动线会更符合人们阅读习惯，并能节省纵向的空间。
缺点：长标签会增加标签和输入框的距离，导致延长完成时间。
从马泰奥-彭佐在2006年进行的眼动研究里发现，左对齐标签速度是最慢的，用户眼动定位的次数最多的。如果希望用户能放慢速度，并仔细阅读表单中的每个输入框，左对齐会是一个很好的办法。特别是含有大量的可选输入框，或者陌生数据，比如像资质认证页、金融申请页等。
在左对齐标签里，内容也有右对齐的方案，如下图。这解决了长标签带来的适配问题，使空间能更好地利用。但关联度会降低，增加理解成本。并会导致眼动距离拉长，适合选择类的录入方式，缓解此缺点。
2.顶对齐标签
优点：有较多的横向空间，并且阅读效率快，对于国际化的设计或长标签特别有用。
缺点：会占用较多的纵向空间。
在同一个实验中，标签到输入框只花了50毫秒，比左对齐快了10倍。
以下是B端的典型列表，主要是信息的查看和操作。基本是由1.卡片、2.切换筛选、3.搜索、构成。
卡片：在移动端列表中更多的是以卡片式的形式呈现，卡片利于展示信息的深度和承载更好的交互。在移动app中我们可以大胆的尝试使用卡片式设计，不仅信息能够很好的突出，也能适应多端设备的展示。
筛选：筛选对于整个表单来说是非常重要的，它可以帮助用户在表单茫茫数据中进行快速的数据定位以及划分，缩短用户对于数据的寻找时间；
搜索：将想要查询的信息输入到相应的搜索器中，用户可直达任务目标。
贴近场景的设计可以舒缓数据页面带来的心理压力，拟物元素与表单的结合的呈现形式能够给用户带来愉悦感。
如下图的例子，途牛商旅用了差旅审批单粗细线条元素，医鹿用了病历本上面的钉扣，饿了么商家版模拟小票的设计。
B端典型数据页，他们基本是由1.数据统计、2.可视化卡片、3.筛选、4.数据明细构成。
数据统计：将用户所需关注的重点摘出来，并展示和业务相关的其他数据。通常是主数据+副数据的结构。
可视化卡片：数据分析里有一句话叫“一图胜千言”，当面对海量数据时（右图），利用图表可以帮助用户快速理解数据含义。
而图表是数据页面里的重要组件，经过图形化、通俗化、形象化后的数据可以帮助我们直观的理解数据。
激励性数据设计
2008 年，为了减少电力消耗，有一家电力公司向 35,000 名客户发送了一封带有简单图表的信，向客户展示了他们和邻居的电力消耗情况。
在图表中，可以看到一个条形图，代表 3 个不同组的功耗：节能的邻居、所有邻居和收信人的家庭。这向客户显示他们是否比邻居消耗更多或更少的电力。
最后这些收到信件的客户平均降低了 2% 的功耗 ，虽然就个人电费而言，这似乎很小，但对所有客户而言，这相当于节省了大量电力和百万美元。从那时起，全国其他电力公司都采用了这种方法。而这种方法也叫做激励性的数据设计。
移动端图表
实际执行中，要针对具体场景，选择合适的方案。比如在一个多折图表要选曲线的还是直角的，直角能精准的体现数据而曲线降低认知负担使视觉愉悦。
下图淘特首页设计中，需要在较少的纵向空间里设计可视化图表，可以看出这里简化了y轴的标签以及取值范围，最后反应到图表上会是一个较平滑的曲线。而这种设计方案上更多的是感知价值而不是精准的数据，这跟激励性的数据设计有相同的作用。
工作台是一个帮助用户快速掌握工作进度及进入工作状态的导航页面。也是用户感知产品价值的重要门面；所以首页工作台是体验规范和视觉风格的核心场景。
我们来观察下医蝶谷为什么这样改版。从原型的变化可以发现，这次改版更多的是去满足业务上的变化，我认为有以下几点
业务优化：
1.这样的改版体现了医蝶谷在业务策略上的变化。观察老版本我们发现，极速问诊占了首页的4/10。这个阶段更多是考虑患者订单响应时间，所以接单较慢的新手医生体验较差。
2.将极速问诊的内容进行收起，医生抢单的成本更高，并且将原本tab的问诊整合进了首页。使医生在首屏就可以快速掌握工作进度及进入工作状态。
视觉优化：
1.老版本的快捷工具图标颜色更丰富容易被用户发现，但是在医生常用的工作台里，又显得有些用力过猛，新版本弱化常用功能图标的视觉，让医生关注到更有价值的信息上。
2.在新版的首页里，因为极速问诊改变了位置，我们可以在设计上做一些差异化的改变，去适应新功能的承载。
前面提到了B端的表单、列表、数据页面、工作台的案例。为了表达透彻下面我跟大家分享下我在工作中碰到的案例。
医生这个职业对我们来说熟悉又陌生，在我们生活里每过一段时间几乎都会去和医生打交道。医生一上午可能就有多达几十位患者就诊，平均到每位患者仅有3～4分钟的诊断时长。在这短暂的时间内，要完成病症的诊断处置、病历填写，还要面对来自病患各种问题，难度可想而知。而这种场景映射到互联网上也是同样的，何况大部分还是兼职医生。所以我们要做的是让产品更易用，降低流程的复杂度。
通过医生调研发现，医院排班并不按照周循环，平常临时突发事情多。所以一日的排班里，时间会有一定的跨度。
举个例子，大家去看病时候时候一定遇到一个场景，是医生让你去拿报告，在回来的时候你不是重新排队的状态，医生需要在这时候对你进行干预。
设计应当顺应医生的工作特点，考虑在特殊场景上的使用，我们提出的以下策略。
精简布局，提升屏效
1.在前文B端列表有提到，列表顶对齐的方式用户阅读起来效率是最高的。所以这里将时间标签调整到内容上方，同时调整卡片里任务名称和时间的权重。
2.优化前任务排序结构是按时间规律往下排布，一小时占用一行。因为医生平日事情多突发，排期上无法按照一定的规律。如果需要查看下午、晚上的排期交互步骤则会被增长。所以在设计上将无任务的时间标签进行收缩，这样在首屏也能看到在晚上的排期状况。
利用色彩，少即是多
色彩是最具本质影响力的表现因素，在设计即简单又重要。研究表明，人们只需 90 秒就能对一种产品做出下意识的判断，而其中高达 60%以上的判断仅基于颜色。
排期表借助色彩关系，提高用户查找效率和传递更多的信息。如下图一开始的想法是按照患者端的逻辑，依据业务图标进行区分，但两端统一要考虑的因数比较多，不适合复用。最后考虑采用颜色标签的形式进行区分
优化路径，去繁化简
从前期的调研的结果来看，医生的排班是无规律多突发的，会出现在一天里添加多个不连续时段的场景。所以我们针对医生的排班的设置做了以下优化
优化前添加一个时段需要4步，添加一天不连续的3个时段需要3x4=12步，需要用户判断复杂的逻辑，而优化后添加一个时段需要3步，添加一天不连续3个时段需要4x1=4步，逻辑简单明了
这是医生端其中一个案例，可以看到一个视觉、交互上的优化都是针对医生实际的工作场景去设计的，在医生这个行业，有着很大的行业壁垒，需要我们逐一去调研给出设计方案。这也是B端设计中需要重点关注的地方。
代码框架
B端设计师最常接触的设备就是PC，而要做移动B端基本上也是会通过H5、RN等技术实现。这样方便多平台复用，下面我以web为例子，讲述我们该如何理解前端的页面结构
提升开发效率
设计的过程中，好的工作流程可以帮助开发节约工时。如果公司有交互的基本是能做到提前开发的。没有的话，我们最好有框架思维，先搭好框架，截图给开发参考，开发会根据你提供截图，进行基础模块搭建，最后在根据标注文档进行css上面的调整。
降低服务器成本
我们将切图给予到开发以后，开发会将其传到服务器上面。
用户在访问我们的页面时其实是相当于发送一次请求，将服务器里面的图片下载下来，如果图片的数量太多或者文件太大，会占用大量用户的带宽带来极差的体验。
而服务器的空间也是需要公司付费购买的，所以尽量一张图在多处使用。如果是非常高清的图片，可以将图片里的人物切出来，在不同的场景去复用。实测一张4k的官网banner，人物单独切出进行复用可以减少banner50%的大小。
占位符
在一些需要实现文本换行的效果里，开发很难去通过去写间距，因为会有换行的关系。一般会通过占位符的方式去实现，而在占位符里有分为好几种，下图我列举了最常用的三种占位，分别能实现三种不同的间距。
字重
字重的功能是为了在文本种突出重点强调内容，在文本中常采用3种规格的字重（regular，Medium，Smlbold）。但在h5的环境里，只有字体标准和粗的还原效果。在标注文件里也能发现标准体和粗体在标注文件里都会显示字重为500，而500在前端里的显示和标准体是是没有区别的，我们需要写好规则，和开发约定，以后只要看到medium就写成600字重。
如何推动规范
通常在一个版本我们就算把开发大佬的头搞秃了，都很难吧所有规范改完，因此我们需要将自己作为PM的角色，针对现有的需求进行拆分，并排出优先级、分版本迭代进产品，并同步需求。
另外在推动规范的过程中，有可能会出现上图的情况。这里可以使用表格的方式进行推动上线，可以好的避免以下情况。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：丸子说设计 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
其实说到设计的价值，它是非常大的，可以从很多不同的维度去出发，每一个小点都可以作为闪亮的发光点去助力产品获得价值，并且现在互联网时代，多元化思维越发重要，我们不仅需要在本职范围内去发光，还需要拓展更多的能力。
但是我也发现目前普遍存在一个很严重的问题，有很多小伙伴设计一个红包也能扯出一堆增长模型，这也是因为随着全链路、全栈设计的噱头出现，以及一系列的模板化思维体系所影响。
设计思维本没有对错，但是需要合理的运用，并且将设计点需要落在实际的内容上，像我们常见的用户画像、体验地图、情绪版等等，那么我们应该如何有效的将设计点落实在内容上呢？
众所周知，在整个产品设计中，视觉感受是最直观的，也是我们作为一名UI设计师能直接去影响的，而视觉层面的内容基本可以划分为六个点，也就是我们常常所说的 - 形色字构质动
在很多的设计运用场景中，这六点都是作为比较基础的内容，像一些视觉语言制定上，而产品设计的过程中，纵使有再多的方法论和思维体现，最终都需要通过视觉的表现，所以我打算利用这几点去深入挖掘，也许可以找到更多的设计发力点。
形也就是设计中最基础的图形元素，在平面和品牌设计中经常可以见到，像一些点线面、图形构成等等，而回到产品设计中呢，最典型的形就是我们经常见到的图标，那除此之外，形还有哪些体现方式呢？
图形的设计表现中，我第一个联想到的就是插画，但是插画的类型和使用方式也分为很多种。
首先我们先设想一个场景，当我们接触到一个新鲜的事物时，我们首先需要快速的了解他，我们可以通过产品说明书、产品结构图，场景使用模拟等不同的方式来表现。
因此在一些服务页面或新功能介绍中，都会适当的融入功能插画，而这种表现形式可以使得界面展示更直观，快速的让用户理解所描绘的功能含义，减少用户学习成本。
像一些页面中还可以利用场景插画去表现，不仅可以打造内容的差异性，还可以快速让用户融入到场景中，进一步提升用户的情感体验。
品牌设计的目的就是为了利用图形化的元素，去加强用户的记忆，而随着产品发展成熟，为了可以非常有效的去强化品牌，形成产品间的差异性，设计在表现层可以利用不同的形式去强化品牌。
设计表现上可以赋予产品非常明确的设计风格，例如抖音的故障风格，在图标、插画、活动页面都有很好的延展，这也赋予了很深的产品印象，甚至有很大一部分用户看到故障风格就会联想到抖音。
除此之外也可以利用品牌元素进行一定的延展设计，像Logo图形可以用到很多的图标和默认图上，或者也可以使用品牌形象，在一些界面的提示信息、内容引导、以及一些插画绘制上，都可以进行有效的融入，进一步达到品牌延展的功能。
那么说到延展，其实我们也可以针对一种元素进行适当的延展，将所需要体现的内容进行强渗透，从而进一步打造内容的专属调性，以及强化用户的心智。
下面的案例来自携程精选榜单，而在整个入口、详情页，均采用钻石元素贯穿到整个页面当中，不仅可以使得画面更加具有视觉冲击力，也可以使得钻石品质的氛围在页面中多次露出，进而加深页面品质感。
图形的表现还有一个非常重要的内容体现，那就是数据图表。在一些工具型或B端产品中，都会有着大量数据，而为了让产品使用更高效，我们可以利用这种形式来展示。
但每一个结构不同的图表，所侧重的功能都是不一样的，有的偏向于于数据对比，有的偏向于连续变化数据，有的偏向于占比情况等等，因此在使用的过程中需要区分内容的侧重以及用户对数据使用的倾向。
在现实中，颜色赋予了这个世界缤纷多彩，它是我们肉眼最直观的感受。在设计中，颜色是尤为关键的一部分，它赋予了内容不同的表现形式。
颜色的学问也比较广泛，除了我们常说的色彩关系、颜色搭配等等一系列之外，色彩上到心理学、下到用户体验，涉及的范围十分全面，那接下来我们就来感受一下色彩的美妙吧～
生活中有着不同的颜色，例如黄昏与清晨、深夜与极光，都有着不同的色彩倾向。除此之外，色彩心理学中介绍，不同的颜色给予用户不同的心理感受。
例如我们常常所说的金色表示尊贵，这就好比现实生活中的金银铜牌，他们利用不同的颜色去体现内容的品质，我们恰好可以利用这种颜色运用到会员、勋章等内容中，去凸显会员的尊享感、情感化，进一步强化用户的身份感知。
颜色的感受也可以利用到全局的设计配色上，我相信大家肯定都非常熟悉前段时间非常火爆的暗黑模式，这就是利用不同的颜色来打造特殊的模式，而暗黑模式可以使得用户在黑夜也能舒适的使用产品，并且一定程度上节约手机的电耗。
但不是所有的深色系产品都是暗黑模式，我们也可以利用这种颜色搭配打造不同的产品氛围与特色。例如抖音、MOO音乐等等。
并且随着互联网的发展，用户群体逐渐庞大，其中也有部分身体有局限的用户，对于他们来说更加迫切通过互联网获取信息，因此越来越多大公司注重到这一方向，而这也是我们作为一名设计师，更应该去优化的方向。
可以采用无障碍色系，以及颜色的色差处理，针对性的服务于色盲和色弱群体，使得他们可以在信息阅读上更符合他们的习惯，从而进一步打造更人性化的产品体验。
色彩搭配讲究颜色统一、协调，在一些界面中，我们可以利用这种色彩技巧去营造氛围，可以有效的提高界面沉浸感，但是产品中由于内容的差异无法固定颜色，而这也会导致颜色统一性较难处理，因此可以利用代码的能力判断封面色彩倾向，从而进行填色，例如豆瓣app。
不仅如此，我们也会市场看到头部背景图和banner图的色彩也会统一处理，这是单独配置了一张背景图，从而达到页面头部的协调性。
字体在设计中占有很重要的一部分，在UI设计中也是最为关键的信息传递载体之一，而关于字体的内容也是十分广泛的，下面我将从字体排版、字体设计和字体内容三个方向来分享我的心得。
字体排版中的字体行高、间距、段落等等，这些都是一名设计师必须去掌握的基础，但是有一些看似简单的规则，却常常会被忽略。
例如下面案例中的结尾标点符号在首，这个是避首位法则中最关键的内容，那为了解决这种方式，我们可以利用「推出式避头尾」，这也是目前主流的方式之一，利用这种换行的形式避免问题，但是往往会形成句尾参差不齐。
因此我们可以利用「优先推入式」标点挤压的方式，将标点符号进行空间挤压，这样可以在很大程度上确保文字在合适的版心内整齐一致。
空格是我们平时接触最多的一种字符了，常使用与内容分割中，但是在排版中有很多场景也会用到空格。
例如英文排版中的点号后面需要加空格，不然会导致语句之间过于拥挤，而中英文结合的时候，之间也是需要空格进行分割处理，除此之外中文和数字之间也是如此。
字体的类型分为很多种，而常规的界面信息展示中，一般都采用无衬线字体，但个别产品利用特殊字体去传递产品的气质，例如阅读产品中采用衬线字体。
除此之外， 大厂也纷纷设计属于自己的专属字体，通过这样的方式去强化自身的品牌感。
一年前的MIUI11版本更新，最重磅的内容即是推出动态字体，用户可以自由选择字体粗细，同时为了让界面的美观度及文本识别性不会被破坏掉。
既然聊到字体，那我们顺便再来谈谈近期比较火的微文案，虽说内容听起来侧重于文案策划，但是其目的是为了优化用户体验，甚至提高转化率等等，那么作为一名设计师，我们更应该去关注这样的内容。
而微文案的体现也分为两个部分，例如下图中所展示的情感文案，百度网盘的会员到期提示，拟用“藏头诗”的形式，渴望留住用户。
除了上面所描述情感文案外，我们还可以利用文案内容来影响用户行为，往往是这种越细节的地方越是存在着成就或破坏用户体验和转化率的因素，而这些文案一般出现于，提示文案，引导文案，弹窗文案等等，不仅可以解决用户的疑惑，还能进一步引导操作。
说到结构，我们一般都会联想到用户体验五要素中的结构层，他在产品设计中更多体现于信息布局和内容结构布局，而对于我们设计师来说，更多的感觉就好像画面中的布局与排版。
结构的内容相对来说还是比较广泛的，我主要是围绕界面布局来进行分析，讲一些我觉得还不错的优秀案例，希望从这几个角度出发，可以带给大家一些启发。
场景化设计是体验设计中较好的发力点，也是我最近一直在研究的方向，后续有空我会单独写一篇文章再进行深入分析。总的来说呢，场景化设计分为多个侧重点，今天分享的内容主要围绕着用户分层，为不同的用户设计。
像我们常见的一些首页布局中，其实有也简单的分层，我们可以根据用户不同的目的来进行布局拆分。
下面的案例从上到下依次为，目的明确的搜索用户、分类明确的用户以及只想随便看看的用户，这样的话，可以有效的服务与不同用户的目的，也可以快速实现流量分发的作用。
而这两个界面都属于功能服务类界面，用户去完成某件事的行为也可能会存在差异，所以我们也可以对于功能进行合适的分层布局。
下面的案例从上倒下依次为，想快速申请贷款或者快速完成任务获取现金的用户，我们提供了直接操作区域，并且置于头部进行业务属性强化，中间融入了更多的分类与内容引导，进一步激发用户的兴趣，最后可以再通过不同的形式适当的减少用户顾虑，例如优惠券的福利（强化申请贷款），为新用户提供发帖示例（确保社区的内容品质）
虽然两个界面的内容差异较大，但是结构拆分的方式以及目的都是大同小异的，主要还是为了满足不同行为的用户，进一步辅助他们完成功能服务。
而关于用户分层的场景设计中，我们还可以区分用户不同的状态/身份来对界面进行差异化布局，下面的案例来自于百度网盘会员界面。
我们都了解会员他分为很多不同的阶段，而不同阶段的用户，对于内容的关注上也存在很大的差异的，我们可以从这个角度出发，区分用户的会员状态，进一步来进行差异化设计。从而有效的提高不同阶段用户的行为决策。
论最出色的界面布局结构，那滴滴的 xpanel 必定让人印象深刻，它是一个将卡片附着于第一信息架构层级上，内容上分为“消息卡片”“主体卡片”“拓展卡片”三个维度，通过这种方式将一屏内抢占的空间通过简易的交互模式补偿回来了，这样既不打破用户的核心体验，同时又增强了运营、功能的玩法与拓展。
所以我们会发现在大部分的打车、导航产品中，均会采用这样的结构布局，这也是对特定场景垂直领域的深耕和挖掘，寻找“接触点”，帮助获取更多的功能、内容、服务，实现业务的“有效增长”。
而对于一个设计点，在历经了一段时间的发展后，也演变出了一系列的其他内容，我从这个点深入出发，围绕着内容和布局进行延展。
众所周知，产品和运营都希望我们能在有限的空间中去展示更多的信息，并且有效的给其他功能进行导流，因此我们可以根据长尾效应，在无限长的信息流当中，利用不同的卡片布局，给予不同的活动、功能进行导流。
上面所说到的xpanel，是将卡片附着与信息之上，跟着这个思路发展，我们便产生了下图所示中的半模态卡片布局，虽然追波之前出现一大批叠上叠上叠中叠的布局，但通过线上的实际使用最终发现，叠一层才是比较合理的方式，而这种布局有着良好的空间收纳能力与信息拓展能力。
质感是设计师在表现的时候最直观的体现，也可以称为设计风格，但风格近几年间也发生了很大的变化，从起初的拟物到扁平，而最近也有很多不同“流派”的质感表现，下面我将举例给大家欣赏一番。
前段时间流行了一段时间的新拟态，一度被扣上有望成为未来趋势主流的设计风格，但由于质感表现上细节过多，影响信息内容，并且局限性太大，因此并没有被广泛流传，但是在视觉设计上，是一个不错的设计表现。
磨砂玻璃的质感表现其实很早很早在iOS的界面设计中就已经存在，但当时并没有广泛普及，而最近这种风格又以一种全新的姿态回到我们的视线中，他给我们最直观的感受就是虚虚实实。
在用户界面中，这种虚实的变化可以有效的创建视觉层次结构，增加自然精心的细节，并且在多复杂内容中能让用户全面感知与处理信息，有效传达信息，让信息可阅读、易阅读。
随着大屏手机的兴起，单屏显示高度也明显增高，而大部分页面内容并不能占据一屏空间，因此利用设计手法去强化页面头部，除了元素装饰外，就是这种淡淡的色彩渐变效果，起初只运用于少部分页面中，但慢慢的这种效果开始流行起来，越发广泛。
动效设计，顾名思义就是动起来的效果，这种表现形式使得静态的页面可以更加灵活的动起来，不仅可以使得操作体验更加顺畅，也可以在某种程度上吸引、引导用户。
在动效的编排中，转场是非常关键的一部分，我之前也专门写过一篇《交互动效-转场的那些事儿》，感兴趣的朋友可以再碰个场，支持下。
用户操作进入新页面后，通常会比较关注入场元素，像一些金融产品、数据图表，都会采用短暂的动态效果，强化元素的展示效果，进一步吸引用户关注数据与内容。
在很多优秀的设计网站上，我们可以发现大多数交互动效都是对持续元素进行特殊处理，他们不仅可以让动效更加特别，还可以提高产品的流畅度。
例如下面的案例，前后页面的内容关系比较大，因此操作后可以采用持续效果，进一步引导用户的视线，提高视觉体验，强化交互流畅感。
在整个动效编排中，除了关注入场和持续元素之外，停留元素也是非常值得关注且可以深入打磨的内容。
例如下面的案例，在整个搜索体验的链路中，我们可以发现搜索框提示文字、输入的单词等等均在进行了停留处理，确保在页面切换时，减少用户的视觉跳转，可以有效提供用户的专注度，打造更加轻松的体验。
产品设计中都希望在足够的空间内可以展示更多的信息，但这样往往会带来信息过载的问题，因此我们需要在设计的过程中对信息展示进行区分，利用行动触发结合动效的形式，辅助信息布局更合理。
下图的案例来自vivo全新的原子随身听，利用现实生活中音乐播放器的样式，将同类app进行收纳，完美的体现了，在较小的空间布局下如何展示更多的内容。
与此同时也会发现很多产品中利用容器来承载信息，典型的案例就是FAB按钮，用户操作后再利用动效的形式进行反馈，其实和上面的相差不大，只不过他属于不同信息共用同一区域。
网页端有一个不同于移动端的交互，那就是hover，因此我们可以利用这种交互方式，去处理信息的重要层级，然后根据用户的操作再进行详细露出，很大程度上优化了信息空间展示。
随着产品体量越来越大，功能繁多的同时，页面结构也变得十分复杂，为了确保用户体验过程中，更清楚页面层级，以及操作后的流程，所以我们可以通过动效合理安排交互流程，助力用户的舒适体验。
我之前也专门写过一篇《交互流程中的三大重点》，感兴趣的朋友可以再碰个场，支持下。
利用动效的形式，提升用户在交互流程中的操作预知，例如下图的分类图表，充分的体现内容的含义，进一步强化用户操作前的预知性。
在一些结构复杂的页面中，我们可以通过合理安排交互动效，转场方式、状态反馈等等一系列的设计，有效的对界面层级路径梳理。
其实设计师的发力点不单单只是我们平时看到的产品分析、用户画像、体验地图，其实从设计的角度出发，也有很多价值点，我们作为一名设计师，更应该根据产品现状去制定明确的设计目标，深入挖掘，利用有效的设计价值观，正确的驱动设计前行，最终通过设计去提高产品体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：三石设计 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大家有没有遇到这样的问题，当你面对非常复杂的信息时，在进行信息整理设计时，往往会陷入比较纠结的场面，不知道怎么把这一堆信息进行比较好的排列。如果你刚好也有这部分疑问，这篇文章适合你继续阅读。
本篇文章会提供一种解决排列问题的简单底层逻辑，我们可以围绕这个逻辑去排布我们的页面，从而让整体排版变得更加清晰合理。
信息层级存在于我们目前看到的每一个画面。它本质上是信息组织的一种方式，通过信息的放大缩小和对应的位置，能够将复杂的信息分为不同的模块呈现在我们的视野中。
大家先简单看一下图中两个画面，你就能够直观感受到信息层级对于用户认知的作用。
不好的信息层级就像左图一样会让画面比较杂乱，难以进行视觉上的识别。而优秀的信息层级就像右图一样能够让我们快速且准确的识别出画面想要传递的信息。
因此信息层级的排列不仅影响视觉上的美观度，更影响人们在检索信息时候的效率。尤其是对于B端复杂场景，我们不仅需要考虑清晰传递业务价值，合理的信息层级划分也是提高产品体验的重要部分，好的信息层级则意味着更好的使用体验。
既然信息层级对于使用体验比较关键，那么怎样做好页面的信息层级则显得尤为重要。而目前网上的资料也是参差不齐，我也曾为此类问题查阅了大量资料，想要找到一个简单高效的答案。
但目前查阅到的资料几乎都在讲排列的四个基本原则：对比、对齐、亲密、重复。不可否认的是这四个方法对于我们排布信息层级确实起到了很大的作用。但也阐述得太过宽泛，让人很难在实际中更有效地利用。
即使我对排版四个原则非常熟悉，在面对复杂层级排版时仍会面对困惑。因此我对目前页面上比较好的页面排版进行了进一步的探索：
经过线上页面与概念的整体研究发现，他们在遵循排版原则的基础上，本质上都存在一个简单的逻辑：那些优秀的页面设计都把主内容的层级控制在了三层左右，如下图所示。
因为三层左右的层级是最容易被用户感知，且视觉上不易混乱。超过三层后随着层级越多复杂性会相对增加。
比如我们看下面这两个例子，左边层级因为特别复杂，造成用户获取信息效率变低，而通过层级的转换，我们可以将其变得更简单且易读。
再举一个例子，我们在大部分场景见到的纯文字排版基本都离不开以下几种形式：
因此，我们需要在排版时需要首先思考一个逻辑：那就是尽量将我们的内容层级控制在三层左右。且这三层内有比较明显的对比关系。
有同学看到这肯定要问了，这个道理我也懂啊，可是在实际业务中大部分时间拿到的信息太多，根本做不到保持在三层以内。别急，这篇文章的重点当然不是告诉你这么简单的道理，而是在面对复杂层级的时候，我们应该怎样去控制它的层级表现，从而让它在最终呈现上保持在三层左右，让用户获取信息的效率更高。
其实我们在实际中的大部分优秀页面，在本身的信息层级上可能都非常复杂，但我们可以通过一系列的方法，去减轻这种多层级的影响，从而让我们的页面即使承载了很多复杂的信息，也能变得更加简单清晰。那我们接下来就阐述一下对复杂层级的处理方案。
这可能是被很多人忽略的一点，就是信息的前置处理。我也曾遇到过某些信息很复杂导致排版很困难，但却忽略了这些信息是否真实地被需要。这就需要我们从源头上进行第一层的判断。
源头降低的本质就是判断我们当前所要呈现的信息是不是必要的。其实这也是在目前工作中遇到的场景，比如某些时候产品给到了我们很多信息，但我们并不一定会全盘接受，而是通过当前页面的业务场景去进行判断。确定每个信息的合理性，从而可以决定有些元素是否可以删减，提高整体信息设计的一致性。
1. 当前的所有信息真的需要存在于页面中吗，如果去掉某些信息有无影响。
比如当你在进行打车的时候，当你输入目的地之前，一切其他的信息都无需呈现。当你输入目的地后，车辆的相关信息和价格才会进行呈现，当你打车后，司机的相关信息才会进行呈现。这些都是按照用户的使用场景来进行对应的呈现。
2.当前信息的重要程度是怎样的，对于某些不重要的信息是否可以通过隐藏的方式展现。
当你拿到一堆信息，信息的重要程度就决定了我们需要将哪些信息作为主体，哪些信息作为次要辅助信息，哪些信息甚至可以收起或者省略。比如当你浏览新闻的时候，标题永远是最关注的，而评论，作者，简介等都是可以忽略的信息。
上述两个问题的确认，会影响我们对后面的信息排布。因此我们需要在源头，比如去和产品或者业务沟通，弄清楚该信息呈现的缘由以及必要性，这样能够帮助我们最后理清楚信息层级。
信息排布的本质是通过我们对信息进行排列上的调整，来将多余的层级融入到三层以内。从而让我们整体的页面显得更加简洁。
通过目前的实践总结，我觉得目前可以有以下五种方法来帮助我们更合理地安排信息层级。
信息分组是大家在设计时都能够想到的形式，分组能够将复杂的信息打散，从而降低页面整体的复杂度。比如我们常用的分组方式有三种方式：间距、分割线、卡片。
那么这三种方式有没有区分呢，VIVO设计团队曾经就这个问题展开过用户调研，但结果表示，如果纯粹从用户的角度来讲，对其变化感知不大。但这三种分割方式会影响我们在呈现信息时的整体视觉观感，因此我们可以根据当前信息的复杂度作出以下规则：
通过这三种场景的区别，我们可以根据信息复杂度更好地选择分割方式，让界面的表达清晰明确。
组件其实是目前大部分设计师在进行信息排布时必备的部分，因此对于这部分设计师的熟练度也是最高的。而本篇想要强调的是，目前这几种组件对于我们信息层级的划分起到了比较重要的作用：树形结构、表格结构、步骤条、选项卡。
▍树形结构
对于有关联性的多层级非常适合，可以将复杂的层级结构进行收拢，从而能够显著降低信息的复杂度。
▍表格结构
对于信息多且关联性不大的复杂信息，可以聚合到表格来进行呈现，但表格的呈现方式不宜滥用，需要根据我们场景来进行选择。
▍步骤条
步骤条则对场景要求非常明确，我们可以将多个场景通过分布的形式进行呈现，从而减少当前页面的复杂度。
▍选项卡
选项卡更适合与同级的数据，对于同类型的结构可以更好地将页面进行拆分，从而让当前页面更简洁。
由于组件这一块大家的认知已经比较全了，在这里就不进行更深入的讲解了。如果有需要的同学可以通过浏览各大厂的组件文档去进行更细致的查阅。
通过改变布局的方式，我们可以将多层结构的样式通过拆分布局来将其控制在三层内。这句话什么意思呢，举个简单的例子：
从上图中你可以看出目前的层级较多，尤其是两层tab的叠加，视觉上就会显得稍微有点凌乱。我们可以通过将第二层tab换个布局，从上下结构变为左右结构，达到从视觉上简化层级的作用：
当然以上只是举了一个简单的例子。这里底层逻辑就是当遇到相对比较复杂逻辑时，我们可以考虑通过改变结构来减少其复杂度，比如上述的两栏结构，甚至三栏结构，从而让整体变得更加简洁。
我们可以利用信息融入的形式来减弱其对层级的影响。信息融入从本质上讲就是将某两种层级信息通过不同的组合方式，让其融入到同一个层级中。比如我们看下面这一个例子，Coding产品设计中将标题与tab利用分割排列在一起，从而变为同一层级，这个时候就不会出现四层的复杂结构，页面还是保持三层结构，通过这种方式有效降低了页面的复杂度。
信息融入这个方法，当我们在进行B端布局时，用得比较多。比如我们最常见的标题、搜索和按钮等都放在同一行上。这样既能够节省视觉空间，还能够降低信息层级的复杂度。
但在进行信息融入的过程中，我们需要注意的是：如果放在同一层级会造成理解上的误解时，这个时候不要采用该方案。比如搜索框的位置，放在哪个层级决定了对应的搜索范围。
信息弱化的原则是，将某些超出层级的部分进行弱化。比如有5个层级，但其巧妙地将功能筛选融入到了当前的结构中，使得即使超过3层我们也不会觉得其特别复杂，我们再看一个例子：
可以看到TAPD将「另存为视图功能」与「缺陷统计」进行了弱化，虽然还是有4种层级，但从视觉感知的层面上不会觉得视觉凌乱。
在很多时候，我们觉得信息混乱的原因，就是页面要素太多太花哨。比如工作中的一个小卡片，也就是利用信息弱化去减少画面的复杂度：
因此我们需要学会对信息分级，不重要的信息就进行弱化，这样整体的表述上会好很多。
通过上述5种方案：信息分组、利用组件拆分、更改布局、信息融入、信息弱化，我们可以将大部分层级过多的复杂信息简化在三层以内，从而让我们最终的页面呈现不会太过复杂，更容易被用户理解。但不可否认仍会有更复杂的页面，即使缩减也仍有过多层级，那么这个时候就一定要记得最开始的从源头去追溯这些所有信息是否必要。
在研究的过程中，也总结了目前在进行信息层级排布过程中比较纠结的一些细节点，也分享给大家。希望对遇到相同问题的同学一些帮助。
大家对「对齐」并不陌生，它存在于我们的每个页面。但在对齐的过程中，我们可能会忽视一个小细节点，那就是沿着字的轴线对齐。比如下图两个例子：
在看见左图时，总觉得哪里会有点奇怪，但又不知如何表述。而右图看着就会相对更舒服。经过对比过后明显发现右边的图整体相比于左侧会更整齐，而这就是说的沿着字的轴线对齐。这主要是由于相似原则引起的：那些明显具有共同特性(如形状、大小、颜色等)的事物会被我们的视觉组合在一起，即相似的部分在感知中会形成若干组。
而左侧因为标题字和底部字没有形成对齐，因此会显得更加凌乱一点。所以沿着字的轴线对齐会让我们在整体的页面呈现中显得更整齐。
这是我平时在做设计呈现时也会纠结的一个问题。当你想用卡片来呈现视觉时，你有没有纠结过到底是用线框卡片还是背景色填充呢。
我就曾陷入这种纠结，但在去搜索查阅时，发现目前其实关于这块相关的资料，因此在大部分情况下都是由设计师自行决定的。但经过线上产品的调研发现，这块内容其实也包含着一定的规则：
1.取决于卡片的数量
对于卡片少的其实可以用色块来呈现，对于卡片多的可以考虑用线框来进行。这其实主要是从一个视觉的维度来进行呈现，举个简单的例子：
通过coding和飞书的卡片对比，你会发现卡片过多时线性设计会让页面显得更整洁和清新，色块设计就会让页面显得更厚重。右侧整体的呈现行会显得更好一些。
2.取决于页面的视觉重心
这里页面视觉重心的含义是当你整个页面都全是线框时，你可以利用色块的卡片来达到突出页面重心的效果，让整体页面没有那么单调，可以看到下图的例子，右侧的页面会相对更稳重一点。
在进行色块时，时常会纠结用灰色底还是彩色底来进行。那么这两者到底有没有界限的区分呢，我们应该何时使用这两种色彩呢。
我们先看一下案例：
可以看出目前这两种颜色的运用更多的是功能上的区分：
1.彩色背景更适用于「想要引起用户注意的界面」，比如一些功能引导或者营销性质的页面。从表现性质上来讲更重。
2.而灰色背景更适用于「利用灰色背景来区分层级关系」或者一些微弱提示的信息。从表现形式上来讲更轻。
所以我们可以根据当前的信息场景来选择合适的色彩，后面再面对时就可以不用那么纠结。
本期的内容到这里就结束了。关于这期的信息层级内容，真正需要深入了解的是控制信息层级背后的方法。很多时候我们看见的优秀页面并不是因为它本身就简单，而是通过我们合理的信息层级控制，让最终呈现上显得不复杂，这其实也是我们在实际工作中需要注意的很重要的一个点。
本文重点内容再回顾，当我们遇见复杂的信息层级时，需要分三步：
1.明确当前所有信息的必要性和重要分级，需要从源头去深入了解；
2.运用五个方法可以有效减低信息层级：信息分组、组件拆分、更改布局、信息融入、信息弱化
3.同时在运用过程中需要注意影响层级的小细节
以上是本文关于信息层级的另一种角度的描绘，虽然没有提及四大基本原则，但在实际运用中也是很重要的。最后，虽然进行了很多资料查询，但在在阐述过程中不可避免会有阐述不到位的地方，欢迎进行反馈。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945
作者：进击的M 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com