最近看到很多美妆博主都在出什么红黑榜，其实就是在说哪些产品是有问题，不推荐大家使用，有哪些东西是可以安利的好物。
想着B端设计当中，也会存在这一情况。然后我在打开 Ant Design ，浏览完所有的组件，你会发现：“组件当中也会存在红黑榜~”
今天就趁着 618 刚过的这个时间节点，我也来“带带货”，说说B端组件当中的红黑榜
首先我先说一下关于红黑榜的定义
1.使用频率高：也就是这个组件我们平时会频繁的使用
2.黑榜：在使用过程中，会遇到诸多问题，导致无法正常使用
3.红榜：往往会更满足B端产品的实际需求，对于组件有更深的认识
通过我的分享能够给大家有一个初步的认识，当然整个组件都是基于我平时的设计观察与使用，目的也是想和大家分享、避避坑，如果有什么疑惑，欢迎在评论区我们一起讨论~
树形选择在B端系统当中的出现频率非常高，比如我们常见的：表格、表单、各类详情页，只要涉及到 层级结构的选择，都会有它的身影（注意，这里主要说的是树状的选择类组件）但是作为设计师，树形选择在使用的过程当中，会出现很多意想不到问题
尺寸无法确定
因为树形选择本身这个组件的特殊性，它的大小需要通过内容当中的高度与宽度共同决定，而在设计过程当中，高度与宽度究竟为多少就要仔细的考虑
因为在使用树形选择时，需要思考每一个内容的具体尺寸，太高太低都不行
如果太低，展开树形选择就会非常的麻烦；如果太高，则在数据量较少的时候，会给人数据很空
横向空间也是同理，也就造成了在设计时，需要深入思考
树形选择，作为基础组件，在应付复杂的选择需求时，很明显的会感到“力不从心”，无论是从它显示选中时的内容，还是大量的数据时的选择难度，树形在适用性上，都会大大降低，当遇到这类情况时，建议采取更多 “业务组件” 的方式来对选择进行优化
分类表单（也可以叫Tab表单，不过只是代称而已~）在B端产品当中也非常常见，它出现在复杂的表单当中，但是作为设计师，在真正去使用分类表单时，你就会发现会有非常多的问题需要我们去处理
对于用户而言，分类表单不能够完整的查看表单信息，每一个都需要来回切换。也就意味着填写表单的时候，我们不能通过滚动查看所有数据，而是要去点击每一个单独的分类里面，通过分类了解具体的表单内容
同时必填项的提示，在分类表单也非常难以处理，因为其每一个独立，而作为用户，其实是不清楚具体哪一个分类里面有必填项，也会导致填写的效率过于低下（其实会有处理的办法，只是大家对于这类提醒都不太满意）
分类表单在编辑状态时，同样难以处理。当提交完分类表单后，我们还需要考虑数据在详情页里的展示形式，因为表单与详情页的映射关系，这时候在设计时，应该提供某一分类下的数据编辑，还是整个分类表单的数据编辑？
其实这种情况，特别是初级B端设计师，处理起来也是非常棘手
顶部导航非常特殊，虽然在我之前 导航菜单 的文章当中提到过，但在使用顶部导航的过程当中，还是会面临很多问题
顶部导航最大的局限性便是展示数量太低，毕竟在空间布局当中，横向空间与纵向空间的差异其实是非常大的，顶部导航的高度设定不能过高，同时 二级、三级菜单 只能够使用下拉菜单，也就导致在导航菜单的设计当中局限性过大，并且项目一旦发展过后，不容易解决问题
当然，顶部导航并不是一无是处，在许多工具型产品、官网 当中，顶部导航都有着它的一席之地，其实这类形式，更多是以内容为主的网站结构，才会采取顶部导航，也就是上下结构会更加合理
栅格严格意义上来讲不算是组建，但是由于很多设计师 误用、乱用，导致设计师为了栅格而栅格
因为在常见的移动端设计当中，是不存在栅格（主要是移动端横向空间小，使用不频繁）
在桌面端的设计当中，并不是说栅格不好，而是很多时候设计师使用栅格往往会非常盲目，举一个简单的例子，在表格当中是否需要使用栅格？
答案是：“不用使用栅格”，其实这类问题就是目前很多设计师的问题，因为会盲目使用，也就导致了我在做设计的过程当中，出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方，希望大家别盲目使用
至于栅格应该如何使用，在我之前的文章当中都有提到，可以自行点击历史记录查看
滑动输入条在很多概念设计当中都会经常出现，特别是在 Dribbble 上的桌面端设计当中，是每一个设计师的标配，但是在实际的B端项目中，特别是桌面端的B端系统当中，滑动输入条是非常不合理的一个组件
因为B端产品当中，大多数的产品都是需要精准录入，并且数据的区间非常大，因此也就造成了滑动输入条，使用起来给用户的感受是非常糟糕的，并且由于大多数用户的预期还是以直接输入为主，这也就造成了现如今B端产品很见到滑动输入条的原因
面包屑导航在实际工作当中经常使用，因为在常见的B端系统当中，导航菜单以及信息结构，一定是非常复杂的（除非你的系统里面就只有一级导航菜单，并且没有其他的页面层级逻辑）
因此通过面包屑导航，能够让我们清晰知道整个页面的信息结构，通过面包屑又因为其 小巧、灵活，无论你是在一个完整大页面当中，又或者是一个小的气泡卡片当中，面包屑都能进行承载，并且它还能够起到 返回 的作用，又能够清晰的展示页面的路径信息，是一个可以一举多得的组件
穿梭框相比大家的不会陌生，在设计B端产品的时候，或多或少都会有所涉及，与此同时，由于穿梭框本身复杂，再加上很多设计师会觉得它占比过大，因此不会去使用
今天安利穿梭框，其实是想安利这一类的穿梭类的组件，你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变，比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置，这些都是传统的数据选择过后一步一步演变而来，因此这类穿梭框型的数据选择
其实更加体现的是设计师基于目前的组件所进行的优化，而分析它为何这样做，这样做的原因，成为了穿梭框上榜的理由
折叠面板就像一个大的“盒子”，当产品经理在你的身后说着：“这个信息我要放，那个信息也不能落下的时候”，拖出一个折叠面板来解决这个问题
其实在折叠面板的使用过程中，主要是在详情页以及表格当中，因为折叠面板本身可以容纳很多信息，并且能够交代具体的层级关系，因此使用折叠面板能够有更多展示数据的可能性，即插即用，非常方便
在页面当中的任何地方，蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中，经常使用的一个组件，因为它能够容纳下任意的内容，小到一串文字、大到一个视频，都能够在气泡卡片当中进行使用
并且在信息当中，气泡卡片作为一个信息补充的组件，因此在系统当中，需要展示但是又不是那么重要的信息，使用气泡卡片，就会更加的方便
最后一个，自然逃不掉我们的锚点导航。感觉在我的疯狂安利下，越来越多的产品都开始使用锚点导航。因为B端产品必定是复杂且多的信息，自然而然我们在使用的过程当中要更多考虑信息的承载
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
按钮是任何用户界面当中（无论是桌面还是移动用户界面）必备的交互元素：甚至可以说，如果页面中没有一个按钮，整个页面设计将是不完整的。在日常生活中，按钮也是随处可见的，一个电灯开关、遥控器按钮，现实生活中按钮反复的出现也可以帮助我们不断去理解屏幕世界中按钮应该如何操作，从而衍生出屏幕世界中的按钮的具体形态
人机交互中最重要的就是把我们从小到大对于这个世界的认识映射到屏幕世界中，比如苹果最为经典ios的滑动解锁
而到了屏幕世界中，控件的设计更应该与物理世界保持相对的一致，这也是按钮设计中，尤为重要的一个环节
最近常问身边的朋友，按钮究竟是什么？
因为对于他们而言，按钮不就是一个操作区域加上文字，没什么特别的，也正因如此，对于按钮的具体构造也不太了解。这篇文章主要是根据自身的工作经验，结合当下对于按钮设计的理解，去分析如何进行更合理的按钮设计
对于每个设计师来说按钮并不陌生，在每天的设计中，都会使用按钮进行页面设计；但又不是每一个设计师都能够将按钮设计好，因为它存在三个方面的复杂性：
使用场景过多：
不是每个场景都需要相同的按钮，比如在登录页当中，登录和注册就是使用不同的按钮形式。这些情况特别在B端产品中，业务在每个步骤中需要突出和强调的点不同，导致设计师很难通过具体场景进行按钮设计；
出现频率太高：
B端产品中，每个页面当中都会有按钮不停的重复，而高频的出现会让我们感到麻木，导致很多设计师都将其忽略；
形式太多：
在我总结的按钮形式当中，一共分为10类，且情况多种多样，很多时候都没有意识到不同形式之间的差距，导致乱用混用
因此一个看上去小小的按钮，其实经常会困扰着我们，如果刚开始没有将按钮进行整体的梳理，那么在你的设计过程中，按钮会经常打断自己的设计思维，为了让大家能够对按钮有更深的理解，我将按钮进行系统的拆解，结合实际案例，能够使按钮更浅显易懂
在文章按钮类型的分析中，我将按钮分为两大类、十小类，将其分类也是为了更好的为大家去分析每一个按钮所涉及到的状态，当我们理解按钮之前，你需要了解它的内部构造
首先，抛出一个问题给大家，下图中，共有几种按钮形式？分别是什么？给大家五秒钟时间思考
如果你对上图的按钮形式并不完全了解，建议你拿好小本本，做好笔记～
在开始讲常见按钮类型前，我们必须要搞清楚一个重要的知识点：按钮状态
按钮状态：可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断
常见的按钮状态分为：正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)，下面分别对这六大状态进行拆解
正常状态 (Normal)：除了其他五种状态外的情况都是正常状态，它是按钮最为常规的状态形式，也是设计师必须设计的一种状态
聚焦状态 (Focus)：主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎，我来讲他背后的原理，主要是方便一些键盘使用的用户，可以使用Tab键或者方向键来对网页进行访问输入
比如在Mac OS 以及 Windows的使用中，通过点击Tab，便展示出文件的Focus状态
Focus状态是一个非常重要的交互形式，但是很多设计师都会忽略，甚至在很多网站，直接就是将这个样式所去除，导致使用Tab键无法获取聚焦的反馈，比如常见的百度、Google再到各大操作系统都会有这类反馈，去除这类反馈，会导致用户无法用方向键控制光标位置，在很大程度上降低用户使用的可能性
悬停状态 (Hover)：在桌面端的设计当中，即使用户知道它是可以点击的，但是你还是需要设计悬停状态，表明鼠标现在正在按钮上。平板电脑和移动端的设备上用永远不会展示悬停状态，因为你的手指是无法在屏幕上进行悬停的（虽然IPad OS 更新了13.4版本后，会有Hover态的出现，但是是通过鼠标进行操作，因此这里不予以讨论）
激活状态 (Active)：激活状态因为叫法不同，在有的地方也称之为Press状态，它的表现就是将按钮按压下，将颜色变深同时会涉及到内阴影等效果的出现
禁用状态 (Disable)：按钮禁用状态作为最难设计的状态之一，主要在于禁用状态的表现形式以及禁用状态与激活状态之间如何的切换，我具体来分析一下两个难点
难点一：禁用状态在颜色上首先会给人灰色块的感觉，行业里也称之为置灰，在设计上，也需要注意光标移动时需要展示禁用光标，即让前端大哥将Cursor的hover状态更改为not-allowed，你可以优雅的在前端面前装个X（之后会出一期，简单聊聊我与前端如何协作如何装X）
难点二：禁用与激活状态的切换，比如在一个注册页面中，需要姓名与电话必填，当用户没有填写完成姓名与电话时，应该将按钮置灰，提示用户不可以点击，当用户填写完成必填字段后，将禁用按钮转变为激活按钮，提示用户可以点击登录
加载状态/Loading：按钮需要时间进行加载的一种状态，通常会被用户忽略，但是在B端产品中，Loading状态尤为重要，这里有很多细节和小技巧，展开讲篇幅太大，在文中4.3小节（按钮细节）会详细解答
主按钮为页面中按钮区最为核心的操作，在日常场景中，主要按钮一般都为新建、编辑、保存这一类正向的操作，强调页面中最为核心的功能，能够让用户一看到主按钮就明白大致在页面中需要如何操作
但在主按钮的使用中，要遵循以下两个原则：
1.在页面当中，按钮区域的主按钮最好只有一个，否者会对页面的主要功能造成干扰
2.并不是每一个页面都需要有主按钮，不要因为页面缺失主按钮而强行加上。因为在实际使用中，时常遇到按钮之间为平级的关系，强行添加，容易造成页面层级混乱
在主按钮中，按钮状态的设计也会跟随物理世界进行相应的映射，因此在设计时需考虑现实生活中的状态
比如用户的Hover时，一般都将按钮抬起并亮度增加，其目的是为了提示用户可以点击，而用户在按下时，用加黑来表示用户按下的状态，与现实生活中按钮的状态类似，因此按钮状态也应该映射物理世界
次按钮在页面中出现最为频繁，在日常使用中，如果你不太确定使用何种按钮时，那使用它，大概率没有错。因为它运用广泛，出现频率也最高，因此也被人们称为标准按钮
在次按钮的设计形式中，我们团队将设计形式分为两类：
此按钮整体以文字+边框的形式，这类形式在视觉层面上感知较弱，适合几个按钮同时展示，在B端项目中，字线型也是在使用中最为频繁的形式
字面型更偏向表达按钮整体，常见于各类移动端的按钮当中，整体的表达也更适合移动端这类屏幕尺寸较少的设备当中，更符合卡片化设计的思路，反而不太适合桌面端的设计
文字按钮为页面中视觉层级较低的按钮形式，因而可以在页面中大面积的重复使用，文字按钮与链接（Link）基本一致，且没有太多区分，所以在设计上，文字按钮与链接基本相同
文字按钮重复的出现，以表格页面当中的操作列表最为突出，因为表格当中常用的操作最好能够直接展示出来，因此表格中基本都采取文字按钮的形式
图标按钮为页面中控件占比最小的按钮，所以在页面中的使用也是最为高效的。因为没有了文字元素，会导致用户在图标的理解上出现偏差。为了解决这一问题，主要是通过用户在Hover时使用展示Tooltip提示按钮的含义，同时建议在图标按钮的使用上多为高频且易理解的图标
我举一个简单例子：
在桌面端产品中，帮助文档一定是非常重要的一个入口，当用户对页面中的功能有所疑惑时，可以通过此来帮助用户进行理解，通常需要在大多数页面当中展示帮助中心的入口，这时图标按钮就变得最为合适
因此，我们可以得出图标按钮的应用场景通常为：当页面中需要高效的展示一个或几个图标时，同时图标按钮的展示最为频繁时，当同时满足以上两点，使用图标按钮就是一个更优的解决方案
按钮菜单为页面中许多操作的集合，通常是将高频的操作以及一些低频的操作进行整合，组成的按钮菜单。这样既能够减少页面元素的冗杂，同时也能够满足业务对于功能的需求
举个例子，在表格页面当中，B端设计师最常见到的按钮菜单就是新建，这类新建按钮其实是必不可少的，同时业务需要，还需要多个业务按钮进行展示，按钮菜单的出现，帮助用户进行按钮的整理，同时也满足业务需求
这其实是主按钮的一种衍生，通过图标对主按钮的含义进行解释，从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调，那便可使用在按钮中添加图标，这样既能够强化图标的含义，同时也加深了用户对于按钮的印象
在六个常见按钮形式中，我们根据重要的优先级，给常见按钮进行一个简单的排序：
危险按钮在删除操作中最为常见，通常是为了警告用户，这个数据删除不可恢复，让用户谨慎考虑。在常见的删除操作中，都需要用户进行二次确认，避免用户误操作
当然，在实际业务中，危险按钮不宜过多，如果业务当中无法避免，需要展示多个删除按钮时，推荐采取图标按钮进行展示或者Hover过后将其呼出
幽灵按钮，看它的名字就能想到它的作用：像幽灵一般透明的存在
它没有使用复杂的颜色、样式，而是用线条表示外部轮廓，证明它还是一个按钮。同时内部只用文字展示按钮名称。它只出现在按钮背景复杂的页面当中，比如：渐变色、纹理、动态图片背景的情况下，幽灵按钮能够完美融入到环境当中
而现如今，传统意义上的幽灵按钮已经很少，毕竟在现如今的官网当中，幽灵按钮已经不再流行，更多的是出现在复杂页面的“实心按钮”，而在某种意义上讲，这类按钮才是幽灵按钮现在的状态
在形式上，幽灵按钮和次按钮看来起没有并什么不同，因此会有很多疑惑，那我什么时候用幽灵按钮什么时候用次按钮呢？
首先幽灵按钮是属于特殊按钮体系中，因此它不会受整个按钮体系的束缚，比如我在一个设计系统中，分别定义了常规按钮的尺寸分别是24px、32px、40px，但是我在一个官网落地页当中需要有一个46px的按钮出现，次按钮就完全不合适。其次幽灵按钮边框粗细、字体大小都是和常规按钮体系不同，因此幽灵按钮就和次按钮有所不同
第二个方面在次按钮的设计形式中，不仅仅只有描边按钮这一种形式，因此幽灵按钮与次按钮它们可能会有交集，但是属于两种不同类型的场景，因此也不能将它们混用
在Material Design 出现之初，悬浮按钮受到了很多人的追捧，它也是安卓设计的代名词。主要是用于页面当中最常用的操作，是整个APP中最核心的按钮，能够代表这个产品的核心功能，比如印象笔记的新增笔记（安卓）、滴答清单的新增清单等等...
但沉浸式设计的出现，使得移动端寸土寸金的地方，需要固定一个按钮的情况就变得更加少见
而在B端的设计过程中，逐渐衍生出了B端行业特有的方式
悬浮按钮在B端场景中，主要是帮助用户进行辅助咨询的功能，例如在一些用户需要得到帮助的页面中，可以通过悬浮按钮，使用户的又疑问的页面进行快速提问，帮助用户能够进行快速的跳转，在飞书的应用列表中，其实用户刚开始理解应用列表其实存在一个理解成本，就可以通过悬浮按钮进行展示
行为号召按钮简称：CTA按钮
主要目的是为了号召人们在某些特定的页面中使用此按钮来提高转化，比如立即购买、联系我们、立即订阅等等...
大多数时候，CTA按钮都是成对出现的。“是与否“ 、“登录与注册”、“确认与取消”等。因此，分析清楚CTA按钮后设计出视觉层级合理的页面称为非常重要的点。在设计中，一般会采取渐变色、主题色、主题色的互补色等等，它经常独立出现
在B端软件的场景中，官网是CTA按钮出现最为重要的页面，一般在官网中，使用CTA按钮将用户引导从潜在客户向付费客户进行转变（点击过后一般是一个联系表单进行信息的填写），这也是在B端产品中非常重要的指标：潜客向付费客户转变。可以引导用户进入到下一个阶段，如果CTA按钮设计不好，人们对于官网只是浏览，不会有任何转化
因此，在设计CTA按钮的形式与位置时，需要与产品、设计、运营等共同确定并讨论使用，大家站在不同的立场希望得到一个完美的方案，因为设计出清晰的结构层次将直接引导用户朝着理想的使用路径前进，从而极大提高转化率
在我们日常设计中，常常会遇到一些棘手的文案问题：登陆、登录、确认、确定、发送、发布，在许许多多的工作场景中，犹豫究竟应该在按钮上使用哪种文案，这就需要我们通过具体的案例场景进行展示相应文案
登陆（Land) ：这是网络中错别字最为频繁的用此，很多人都会把登陆放到登录页面中，其实是错的。这个词里的“陆”字，就是陆地的意思，其基本含义只是登上陆地而已，拓展出来还会有“登陆到某一个市场”，但登陆网站的说法是绝对错误的
登录（Login）：这是“登记记录、记载”的含义，我们正常输入账号密码就是为了去记录我们的一个信息，一般为官网登录页
确认（Confirm）：这是带有一些不可逆我操作的提示，一般用于用户配置、选择项等
确定（Yes）：这是询问用户是否进行某项不可逆操作，一般为一个单独的操作
发送（Send）：这是尽快传递对方的聊天消息，一般为即时性的聊天发送
发布（Publish）：这是用于用户填写的观点、意见、文章等反馈信息发布到一些正式场合，如论坛、社区等
这些细节的文案就是帮助用户去理解页面中所传达的真正含义，多将文字放置到场景中，文案也更好的辅佐他们作出抉择
圆角在每一个软件中，随处可见。圆角大小所带来的不仅仅是视觉表现，还更多影响着用户的使用体验以及对于产品而言的整体的认知，如果在开始设计之前，没有对按钮圆角有具体的规划，很容易踩坑，如何设计好圆角，我们来进行系统分析
在下文中我们将按钮的圆角大小，分为以下三类：直角、圆角、半圆
直角：
按钮四角的方向，具有很强烈的引导性，看上去也会更加刺眼，使得在页面当中注意力会减弱。同时，直角在按钮排列当中看上去更加统一，相同的东西在视觉上不太能引起我们的注意
圆角：
相比与直角按钮，在使用圆角的按钮中，视觉上总是给人一种柔和亲近的感觉，当几个圆角按钮进行排列时，能够感受到圆角按钮更容易被点击。因此在使用的按钮中，建议添加圆角的细节元素
为何直角的物体会给人更严肃的感受——每一个人都认为圆角会更好，但是并不是每一个人都能够解答为什么圆角更好
在巴罗神经病学研究所对拐角的科学研究发现，“拐角的感知程度随着角度线性变化。锐角比钝角产生更强的幻觉显着性”。换句话说，拐角越尖，则感觉越亮，拐角越多，越难看
圆角还有另一种解释，是因为现实生活中有圆角的物体会更友好。从小，我们就知道尖角的物体会让人受伤，圆角的物体会更安全。这就是小孩在玩皮球与刀的时候，家长的反应完全不同。
小朋友玩刀会让家长十分的紧张，赶紧让孩子放下；而小朋友玩皮球时，家长则是非常的放心。这激起了神经科学所谓的尖锐边缘“回避反应”。因此，我们倾向于“避免锋利的边缘，因为在自然界中它们可能会构成危险”
通常在移动端场景中，半圆按钮随处可见，移动端手指触摸操作上，对于圆角的影响小之又小；而到了桌面端的场景下，鼠标的使用，半圆按钮就会有所不妥
如果相同面积中，按钮的圆角增大，相应的对于按钮的可操作区域就会随之减小，在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作
当然，麻烦事还不仅仅于操作区域，在结合实际业务，我们的按钮常常作为原子（原子设计理论）用来组成为下拉菜单进行联动，半圆按钮在下拉菜单的设计中，也会因为半圆的局限，使下拉菜单的设计会更加困难，同样在设计上，半圆角对于下拉菜单的适配也会相当突兀，因此在考虑这方面设计时，需要你多去思考之后的业务场景
按钮的状态中，Loading状态通常不会对用户进行直接展示，因为大多数情况下，Loading状态就发生在一秒钟以内，但是对于B端场景中有很多重要操作，在长时间等待中不展示loading状态，会导致用户在使用时犯下错误
当按钮响应时间小于1秒时，通常正常反馈即可
当按钮响应时间长于1秒时，我们通常会采取加载动画，减缓用户等待的焦虑感
举个例子：比如一个确认提交的按钮，由于网络或者服务器等原因，需要长时间加载资源，而用户不知道我刚才按下的按钮是否有效，这时用户慌张，想要多按下几次这个按钮，系统就会不停提交数据，最后网络变好时，窗口就会一瞬间疯狂展示，导致用户体验下降
为了防止这类事情的发生，需要在设计师考虑到按钮在加载一秒以后的状态，应当提示用户在网页已经收到请求，正在加载，同时在按钮状态中应该为不可操作状态。同时会给出加载转圈的动画，缓解用户的焦虑
当你完成了第一步的设计后，想想在按钮的状态中，是否更能够帮助用户进行体验上的提升呢？
这也是在面试某大型互联网公司时，被问到过的一个问题～敲黑板
对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何，减少不确定性；并引导他们在正确的方向上交互，而不是浪费精力在重复操作上
在Loading的加载过程中，等待焦虑一直是用户想要了解到的，为了缓解类似情况，可以将等待的进度状态进行展示，使的用户在等待的过程中，能够清晰的清楚自己的按钮目前处于何种状态，我大概还需要等待多久，缓解用户在等待过程中的焦虑
以上两个方式均是尼尔森十大原则的内容，能够在按钮Loading状态中，缓解用户在按钮加载过程中、重复提交、等待焦虑的问题，通过一些设计小细节，帮助产品提升用户体验
通过上文对于按钮的解释，大致明白按钮在设计中的作用，接下来我结合一个工作中的实际案例，来看看我们应该如何优化常见按钮在页面当中的设计
项目背景：在桌面端，我们需要对整个导航栏进行设计改版，但其中涉及到对于导航的一个整体优化，主要是由于业务功能发生变化，我们需要在导航栏上增加快捷添加入口和通知中心，来满足导航的后续的功能需求，由于保密协议的原因，就不放自家产品
在桌面端中，浏览模式大致分为两类，F型浏览模式、Z型浏览模式（下方知识拓展会有讲到）
首先，因为导航在整个页面的顶部，结合两种浏览模式在顶部时统一都为从左到右的浏览顺序
因此确定整个导航按钮初步的按钮重要层级排序
我们对于用户的按钮层级有着明显的划分，因为在整个导航右侧，又因为其的特殊性，我们把操作空间分为三部分：
左侧为操作路径最短的区域，因为桌面端的产品需要通过鼠标进行交互操作，而其中移动鼠标的长短直接决定用户是否愿意点击这个按钮，因此，靠左的按钮适合放置用户最常使用的操作
中部为按钮内部区，可以放置一些低频，但是又必须出现在这个区域的按钮操作（比如：帮助中心、通知中心等等...）
右侧为按钮最为重要层级最弱的区域，同时它也有一些特殊性
一般在浏览器的右侧，为用户最容易定位的操作区域，因为靠近边缘导致在用户定位当中能够帮助用户进行快速选择
回到页面中信息层级较高、同时需要精准定位的按钮就会将个人中心放置在最右侧，方便用户进行快速定位
因此我们讲导航当中按钮重要层级进行简单排序，得到下图：
通过亲密性原则，我们将除去左右两侧确定好的按钮之外的按钮进行简单分类，将有关联的按钮进行组合，形成较强的关联性～
视觉调整作为最重要的一步，主要是为了在最后的按钮重要层级上，将一部分按钮突出、一部分按钮弱化，达到我们想要的整个层级效果
通过团队内部讨论，将我们的新增按钮定位CTA按钮，因为它关联到我们每个使用系统的人都会用到，属于最高频的操作按钮，也因此将其突出
F型浏览模式：
是新闻平台、博客等文字为主的网站布局所采取的阅读模式
该阅读模式由尼尔森团队的眼动追踪研究结果从而进行普及，在这个研究中记录了超过200位用户浏览网页时，发现用户的主要阅读行为在许多网站和场景中表现得相当一致。这个阅读模式看起来有点像字母F，因此也被叫做F型浏览模式。
首先用户以水平方向进行阅读，通常是在阅读区域的上半部分
接下来，他们在屏幕左侧垂直浏览，寻找段落开篇几句中感兴趣的内容。当他们找到感兴趣的内容时，他们在第二个水平方向上快速浏览，通常这块内容区比上一个内容区更短小、更简洁。这部分元素形成了F的下半部分
最后，用户在垂直方向上浏览内容的左侧区域
Z型浏览模式
是扫描滚动的网站的典型模式
正如你所期望的，“z”型模式的布局遵循字母Z的形状。“Z”型模式的设计跟踪了人眼扫描页面时的路线——从左到右，从上到下：
首先，人们从左上角到右上角进行扫描，形成一条水平线
接下来，向页面的左下侧扫描，链接成一条对角线
最后，再次向右转，形成第二条水平线
当观众的视角以这种模式移动时，它形成一个虚构的“Z”字形
在实际工作中，经常遇到自己设计的按钮与开发实际还原的按钮差距很大，一些没有经验的设计师会和开发说，你看我设计稿，每一个按钮都要按照设计稿的来，这样设计师与前端开发之间的矛盾就会越来越深。其实在按钮设计的细节中，开发怎么完美的还原，里面还有很多细节
首先要想让开发完全还原你的设计稿，就必须了解开发实现的思维方式，针对它的思维方式进行相应的思考。
又由于Sketch与开发常使用的VScode之间逻辑上存在较大差异，导致设计师设计出来的很多设计稿开发根本无法实现，这也是B端设计师摆在你面前的第一个问题
对你没看错，无法实现，我举一个例子
这是一位同学问我的一个问题，他说我这个按钮为啥实现不了，前端不就是多几个代码去适配我的设计稿就可以了吗？
如果你看了上图也有很多疑问，那就接着看下去～
在按钮当中，通俗的理解Padding就是文字与按钮之间的间距
因为Sketch等软件在按钮的设计中，只有图形位置的概念，没有内间距Padding的概念，因此需要对按钮还原要明确的描述
比如上图，前端同学在开发是就会将Padding设置为24px，所以整个按钮长度便为24px*2+20px（文本宽度）=68px
而为什么说上面的设计规范实现不了，因为对于前端而言，Padding通常都是统一且固定的，只会根据按钮文字长度进行相应的调整，比如我上面举的错误栗子，其实在前端同学面前这类设计是不能够被共用，而且对前端同学项目会变得越来越不能维护，所以按钮设计应该更规划
但是如果真的需要去实现两个文字按钮长度和四个字的一样怎么办，需要去设定按钮的最小宽度
按钮最小宽度的设定一般为4个字文字的长度，假设字体大小为16px，左右的Padding为24px
最小宽度为：88px，因此在按钮的标注中，需要展示最小间距为88px，方便前端进行CSS开发
在我们的sketch中，按钮边框有三种，内边框、居中边框、外边框，默认为居中，但是在前端的CSS代码中没有居中边框，没有居中边框，没有居中边框（重要的事情说三遍），默认为内边框，如果需要调整为外边框，最好能够标注
作者：CE青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
信息无障碍，是指任何人在任何情况下都能平等地、方便地、无障碍地获取信息和利用信息。随着互联网覆盖越来越广，对于身体有局限的群体而言，更加迫切通过互联网获取信息，而这就需要互联网产品进行信息无障碍的优化。在我国其受益人群至少包括：8500多万残障人士，2亿多60岁以上的老年人，数量庞大。率先考虑信息无障碍能为产品增加优势而带来更多用户。
如今智能手机掀起了一场无障碍辅助工具的革命，而站在这个关键点的互联网设计师，也要开始行动起来，先从以下这几个容易实现的事情开始着手进行无障碍的优化吧。
对视障用户来说，是用听取读屏语音来了解你设计的界面信息的。读屏软件就像他们了解互联网世界的眼睛，它的原理是直接读出界面里的文字，如果icon按钮未加无障碍标签读屏会读为"无法发音"，那么视障者就无法获取这些信息，自然也就无法使用你设计的功能。
解决的办法是:
1.需要在产品代码中添加无障碍标签(Android :contentDescription ; iOS:accessibilityLabel在对应的开发者文档里很容易找到，可以发给你合作的研发同学)。
2.装饰性icon可隐藏标签不读，提升读屏效率。不建议不做处理也不加标签，那么用户听到的就是“无标签”，这样会让用户以为这里有什么重要信息读不到而感到不安。
3.标签语义简短准确，尽可能使用动词。
4.必要时需要走查焦点顺序，确保不会被错误的焦点顺序误导页面含义。
并且最好由设计师进行语义的标注，因为设计师才是对页面里图形应用最了解的人。避免出现“搜索”被写成“放大镜”、或者是“searchBtn_123”之类的情况。
颜色可以用来区分信息数据的类别和维度，也可以帮助传达情绪等重要信息。然而，世界上有超过8%的男性和0.4%的女性都被色觉障碍的问题困扰。我们通常笼统的称这类人群为“色盲”，他们是典型的识别颜色有问题的群体。
"色彩"的目标是"易于感知"，指的是互联网产品的内容信息的色彩对任何人来说，都应该拥有足够高的辨识度和舒适度，我从以下4个方向进行介绍。
1.更安全的配色
a.色盲人群：
设计师在进行设计配色时应时刻自测，避免明度相似的橙黄绿两两配色和明度相似的红绿配色，因为这样的配色势必会造成色盲用户的可读性问题。并且，红色在红绿色盲眼中并不是一种明亮醒目的颜色。相反红色对他们来说显得非常深，而暗红色则几乎接近黑色。因此色盲人士很难分辨出文章内的深红色的强调字，从而遗漏关键信息（设计时，可利用此插件模拟色盲眼中的颜色：Color Oracle） 。
b.文化差异：
因为色彩在不同国家文化中代表不同含义,所以对于国际用户来说也是存在障碍的。在西方文化里，红色通常用于表示消极趋势，而绿色则表示积极趋势，但在东方文化中却正相反。
c.特殊群体：
临床医学研究表明对于部分自闭症患者来说，高饱和高对比度的颜色，甚至只是黄色都会让他们感到不舒服和不安，因此在自闭症康复中心是不会出现过于对比刺激的颜色的。
另外，老年群体随着年龄的增长，晶状体变黄变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力下降明显，如果你的主流用户是老年人，请尽量避免将蓝色运用到重要的按键中去。
2.更强的文本对比度
文本对比度与可读性息息相关，它测量的文本颜色和背景色之间的明度差。WCAG AA对于文本对比度的规范是：4.5:1，若字号够大（>18pt，或粗体>14pt）时，标准可降到3:1。如果满足4.5:1这个标准会让你的页面视觉看起来不那么优雅，可以尝试局部加强可视性的方法：
关于可读性其他需要注意的点：尽量不要在图片上叠加文字，除非你能保证图片背景颜色单一且对比度足够高。
Material Design设计规范建议，需要淡淡的遮罩确保上层文字的可读性；并且不建议极高对比度的文本，因为这样会使一部分视障者看到的字旋转模糊。
3.更多样的视觉变量
颜色是数据可视化中最常用的视觉变量之一。但是对于无法辨别颜色的用户，如果颜色作为的唯一的提示信息，他们可能将无法理解你传达的信息。那么有什么改善的方法呢?
a. 不让颜色成为唯一的视觉变量：除颜色外，我们可以追加图标、纹理或者文字来加以标注。
b.色盲模式：Trello作为一款工具产品，在标注信息时，提供色盲模式可打开和关闭，并用不同纹理加以区别，色盲友好模式是一个很好的范例，它可以有效帮助色盲，又不会妨碍非色盲用户。
c.以明度饱和度为度量：虽然色盲人士对色相的辨识能力较弱，但却对明度、饱和度非常敏感。我们可以使用明度或饱和度区分信息。看这个例子：传统热力图习惯用暖色代表热力高冷色代表热力低，Google Analaytics的热力图采用深蓝色显示热度高的时段、浅蓝色显示热度低的时段，简单有效。
控件可以是按钮、链接、输入框或任何带有事件监听器的HTML元素。控件太小或彼此太靠近可能会给用户带来糟糕的体验问题。
比如对于无法用指尖精确定位的用户（有颤抖疾病的用户），或因年龄而导致灵活性降低的老年用户，都会难以点击过小控件。
为了给用户足够的间距来准确选择控件，Material Design建议至少48×48dp，iOS设计系统将目标热区尺寸最小值定为44 x 44pt，而WCAG对WEB的规范则建议至少44×44px。一个控件可以在视觉上是24 x 24px，但是在所有边上都会有一个额外的填充使它达到44×44px。并且太靠近的控件可能会因误点击而带来挫败感，所以同时还建议控件之间的空间足够远以减少误触。Microsoft给pc的建议是至少有8px的间距，而Material Design推荐的控件至少间隔8dp。我们可根据以上规范来审视自己设计的控件。
1.文字大小：
有视觉障碍的用户可能会把字号调得很大。你需要保证你的设计在大字号的情况下内容不会溢出或排版错乱。做设计的时候，可以使用2倍以上的字体测试你的设计。
在互联网早期，设计了字号在9-14px之间的网页，如今已与20年前不同，浏览器已经可以在任何尺寸设备上使用，小到智能手表大到4K荧幕，我们不能再使用固定的字号来设计产品了。字号应该与设计本身一样具有响应性。例如可以允许用户自定义字号、行高或字间距等以达到舒适的阅读水平。
2.文字样式:
文字作为传达信息的重要载体，对于许多用户来说，装饰字体或草书字体都是比较难阅读的。且用过细的、过小的、斜体和全大写文本，也会降低识别度。
有效的动画可以给页面带来生命感，但如果滥用动效不仅会分散用户注意力，严重的话对某些用户来说来说可能是致命的（光敏性癫痫的临床诱因之一就是闪光图像的刺激）。
1997年的一天，日本电视台正在播放《精灵宝可梦》第38集“电脑战士3D龙”，但就在这天晚上发生了600多名儿童昏倒在家中集体送医事件，轰动了动画界，任天堂的股价也随之大跌。原来，为了达到震撼效果，3D龙的背景运用了“蓝-红-蓝”的快速闪烁来表现爆炸，这样高频率的闪烁刺激了孩子们脆弱的眼睛，导致他们集体患上了急性光敏症。也因为这件事日本开始着手对动画片的制作制定规范。Twitter在2019年为了保护对闪烁图像敏感的人员安全，也采取了禁用APNG动图格式的措施。
另外WCAG 2.3.3官方说明，一些用户会因滚动页面的动效（例如缓动和视差滚动）而触发大脑前庭疾病从而产生头晕的症状，所以iOS、Mac、Windows 10都具有关闭动效的功能。
为了避免给特殊人群造成困扰，设计师在开始做动效之前，应该看看以下四条是否满足：
1.动效每秒闪动不超过3次，发生的闪光区域不超过超过25％否则，光敏癫痫患者会有发病的风险。
2.避免过于夸张的视差和运动效果，因为大脑前庭失调者会引发眩晕。
3.避免有多个元素通过不断移动、闪烁而分散注意力，因为这可能会让注意力缺陷者产生困扰 。
4.如果有上述情况，需提供一些控件或选项来暂停、隐藏或者更改任何动画或效果的频率。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
作者：大秘密mimi 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
————— 目录大纲 —————
作者：大秘密mimi 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
我们的眼睛很奇怪常常误导我们，但是如果理解了人类视觉的特殊性，就能创造出更好的设计。格式塔理论解释了我们的眼睛和大脑如何处理不同的图像，而设计师常常需要在实际工作中使用这些理论。
400px宽度的正方形，与400px直径的圆形，哪个更大？
几何学来说，它们的宽度和高度是相等的。
但是看下面的图，我们的眼睛立刻感觉到正方形大于圆形。
带参考辅助线的版本如下：
让我们再看一组正方形和圆形。你觉得他们的视觉重量相同吗？
好像差不多～？这是因为我增大了圆形的直径。
把这两个例子里的正方形和圆形重叠起来，我们可以发现：
左边400px的正方形比400px的圆形有更大的面积。这就是为什么我们觉得它显得更大～
右边圆形和正方形是平衡的，因为它们的面积相似，虽然实际尺寸的宽度高度不同～
在菱形和三角形上也有同样的效果。
为了在视觉上与正方形保持平衡，它们的实际尺寸应该增大，以保证面积相似。
保证「面积相似」的方法，对于处理简单的形状特别有用。
在实际的UI界面设计中如何应用这个理论呢？
举个例子，当设计一组图标时，我们需要保证它们都看起来很平衡，不会有某个图标看起来过大或过小。
如果我们直接把每个icon的实际尺寸拉成一样，那越接近正方形的icon看起来就会越大。
对于视觉上看上去比较小的icon，可以适当放大到参考线框之外。
对于视觉上看上去比较大的icon，可以适当缩小留白。
用这样的方式来保证不同形状的icon达到整体的平衡感。
一些视觉平衡的实际案例～
现在知道为什么icon的切图框总是比实际形状大了吧，
就是为了预留出空间，让那些奇形怪状的icon，看上去不比正方形icon要小。
验证视觉平衡是否ok最简单的方式就是模糊大法。
如果模糊后你的icon变成差不多的糊糊，他们的视觉重量就差不多了。
看个案例：
在放社媒图标时，脸书和IG的图标是方形的，而Twitter是一只小鸟的轮廓。
所以Twitter的图标就要大一些，这一看起来整体会比较平衡。
另一个案例：
一个圆形按钮和方形文本框放在一起。
如果圆形按钮的直径等于文本框的高度，那么按钮视觉上看起来会显得更小一些。
当你把它放大一点，整体会显得更平衡。
但是如果改变按钮的样式，就不需要放大了。
在下图中，按钮和文本框都是80px高，但因为填充了黑色，看起来就不显得那么小了。
视觉平衡是人眼感知物体大小的方式，不一定等于实际的像素大小。
圆、菱形、三角形和其他非正方形需要加高加宽，才能与正方形在视觉上保持平衡。
设计时需要预留一些多余的空间用于视觉平衡，对于一组icon来说看起来平衡一致很重要。
作者：大秘密mimi 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
字号大小对比是大家都知道最常见最容易的方法。重要的信息字号放大，次要的信息字号缩小。但一个界面里字号种类的数量不建议过多，否则会显得凌乱，这时候就可以采用文字粗细对比、颜色对比等其他方法配合使用。
小tip：
1. 字号种类控制在3～5种，保持克制。
2. 文字颜色种类控制在2～3种，保持克制。
3. 字重通常2种就够了，普通和加粗。
小tip：
1. 当背景为纯色时，可以靠降低白色文本的不透明度来调整前景文字和背景之间的对比度。
2. 当背景带有图片或图案时，半透明的文本会影响可读性，需要根据背景色手动挑选适合的文本颜色。 
投影在垂直方向设置一些偏移量，会使投影显得更加自然。
由上而下光源偏见也叫做“上方照明偏爱（top-lighting preference）。大脑之所以会认为从上方照下来的光线更自然，是因为我们生活中始终有一个巨大的来自上方的光源：太阳，漫长的进化已经在我们脑中刻下了“由上而下光源”这样一个强大的偏见。因此来自上方的光源照射会让物体显现的非常自然。
相反，来自下方的光源会让物体看起来怪异不自然，设计师可以利用这个原理来制造一些恐怖怪异的氛围。（题外话）
下图来自名侦探柯南
当你需要分隔一些信息群组时，不要一直用描边去分隔，过多的描边会使界面显得过于琐碎凌乱。
增加组与组之间的间距，留白也是进行信息分隔的一种常见手法，不一定需要通过线框来分隔。
不知道大家有没有发现，下图蓝色的说明文本看上去比蓝色的按钮更亮，但明明颜色色值是一样的。右边通过使用略深的蓝色，神奇地解决了这个问题，视觉上更和谐统一。
米勒-莱尔错觉：这个视觉现象表明，将一个V型记号放到线段两端可能造成其显得比实际更短或更长，长短取决于V型记号的朝向，这个经典的错觉证明了人类感知错误。
左图的胶囊型按钮的边缘给人向内收拢的感觉，虽然像素上和文字对齐了，但视觉上按钮显得偏右了。右图通过将按钮往左侧微微移动来修正不对齐的错觉。
亚马逊的logo中，字母“a、m、o、n”同样因为圆形的外缘，有向下收拢的感觉，因此需要微微上移，与字母“z”达到视觉效果上的平衡。
最经典的播放按钮的案例：把一个三角形放在圆形中直接居中，会使它看起来居中位置不对。为了使三角形视觉居中，需要通过计算等边三角形腰的中点与对角顶点连线的交点，来找出三角形的质点，这才是真正的中心（重心）。
作者：大秘密mimi 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
归根结底是因为设计师在设计过程中，更多关注页面本身，而很少去思考页面在呈现过程中何时会出现白屏状态，都是后知后觉去补充完善。加载作为必备的一环，却总是被忽略。目前很多B端产品在这方面都没有一个系统合理的规划，导致系统的加载体验缺失或者不统一。
因此希望这篇文章能够讲清楚中后台加载出现的场景和规则，对需要深入了解加载以及在制定加载规则的设计师朋友们带来一些帮助。
加载通俗来讲就是用户从触发页面操作，到页面最终呈现的一个等待过程。这个过程始终存在不可避免，只是时间有快有慢。快的加载只需要几百毫秒就结束，但慢的加载就可能会达到几秒甚至十几秒，让人产生焦虑。
而为什么会有如此大的差距，这就需要从页面渲染的整体过程来进行说明。当我们从浏览器输入网址，再到我们看到完整页面的这个过程，网页到底经过了哪些步骤呢。经过资料查询和与前端确认，整体过程可以阐述如下：
从这里我们可以看到页面的呈现是程序经过了一系列操作才最终呈现到我们面前的。在这里可以将其简化为四个阶段：用户操作功能→页面向服务器发送请求→服务器接受并返回数据→页面呈现。
而决定整个页面加载快慢的就在于请求与数据这里。一般我们可以将页面的数据分为2种类型：静态资源和动态资源。
静态资源：前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。可以简单理解为你页面上的固定字段和结构。这种页面一般加载速度比较快，比如我们看到的展示型官网一般都是前端写好的静态资源。
动态资源：而对于页面上的动态变化的，需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，比如表格数据、统计数据等称为动态资源，这种都需要调用后台接口来进行返回，因此加载速度相比于静态资源就会更慢。
而它们的区分点用下图可以表示：
可以看到静态资源基本是直接返回，而动态资源还需要连接数据库调取资源，尤其是在遇到数据库调取较慢时就会花费更多时间。而我们加载缓慢的大多数问题，也基本上更多出现在动态资源的获取上。
当我们清楚加载形成的原因，接下来要做的就是在需要加载的地方对其进行处理。这也是在设计过程中我们经常遗漏的地方。我们先看一下目前常见的2种处理方式：「默认处理」和「使用进度指示器」
当我们对加载过程不进行任何处理时，程序就会以默认的方式进行-即根据资源获取速度一步步呈现。可以看到嘿店后台的处理过程就是一种默认处理方式：
但是这种做法就会导致我们在页面加载过程中会出现空屏状态，比如上图切换到概览时出现了空屏状态，尤其是当遇到了网络缓慢的情况，会造成在加载时页面停留在当前状态下不动，往往会让用户陷入到「系统故障」的错觉。
这个名词说起来可能比较陌生，它指代的就是我们平时经常看到的加载动画、骨架屏或者进度条等。进度指示器的作用就是告知用户当前页面并没有故障，而是正在读取数据。
通过添加进度指示器来对空屏状态进行承载，能够减轻用户的焦虑感。目前很多B端产品更通用的形式是添加动画来过渡。
但是在体验过程中很容易发现一个问题，就是在产品的整体加载过程中，某些空屏状态是没被加载动画覆盖到的。当这些没被覆盖到的加载过程过长时，很容易出现焦虑感。比如神策数据在左侧列表切换时的加载过程就没被覆盖：
想要更全面的把加载动画覆盖到所有页面，我们就需要弄清页面在哪些状态下会出现空屏状态，从而制定统一的加载动画规则。这个问题可以先思考一下，后面解答。
在制定统一加载规则之前，我们需要明确一个概念，就是加载的模态与非模态。
模态加载的含义就是当前加载会中断用户其余操作，用户在这个期间只能等待加载而不能进行其他操作（有的模态会提供取消按钮）。如果你的页面涉及到以下2种情况，可以考虑使用：
1.用户当前的操作本身不能与其他操作同时进行。比如系统更新，或者工具类的导入导出相关操作，我们只能等待更新、导出完成才能继续进行后续的操作。这时候可以使用模态加载来承载，比如protopie的导入操作；
2.当用户进入到一个全新的页面时，这个时候页面什么都没有，我们只能等待页面加载完成才能进行后续的操作，因此在这种情况下也可以采用模态加载，比如我们刚进入Asanan产品页面看到的首屏加载动画：
除了上述2种情况外，你也可以根据你的业务场景来进行模态加载的选择，但建议是尽量少用模态加载，其会对用户的打断和干扰性比较强。
非模态加载的话，这种加载通常只会出现在需要加载的部分，不会中断用户其他操作。对用户干扰比较小。比如我们常见的功能切换加载、数据筛选加载等都属于非模态加载。
非模态加载相比于模态加载会更轻量，因为用户随时都可以打断也不会影响到其他操作。因此建议在大部分情况下都可以使用非模态弹窗来进行承载，比如飞书的左侧栏切换操作：
接下来我们进入正题，在这里我从加载的角度将网页整体加载过程分为呈现加载规则和操作加载规则。
我们先谈页面呈现规则。前面已经明确加载产生的原因和类型后，我们就可以开始为我们的产品制定统一的加载规则，以保证后续页面加载的一致性。
在拆解页面的加载过程前，我们进一步阐述之前提到的渲染原则，从前文中提到最后会经过「解码」和「渲染」2个步骤，这也是决定了我们看到的页面的最终呈现顺序：
我们看到的页面是由HTML、CSS和JavaScript来进行构成的。HTML可以看作最简单的框架、CSS则是赋予了框架样式，JavaScript则是负责页面中的交互(当然JS也可以控制样式，这里只描述主要功能)。
页面在「解码」阶段，拿到的HTML文档会被解码为DOM树，同时将CSS文件解析成CSSOM，这两者结合后一起渲染页面，JS一般是在最后渲染。所以逻辑上就是框架和样式一起渲染，最后渲染交互。视觉的角度来讲就是先看到元素样式，然后才能进行对应操作。
由于浏览器渲染顺序一般会根据代码的顺序进行渲染，而代码在页面中的构建一般也是按照页面的上下和左右的顺序去写的，因此我们看到的页面的视觉呈现顺序也是遵循从上到下，从左到右。
所以几乎所有的产品都是先看到顶栏，然后左侧边栏，然后其他内容。因此我们可以通过这个原则来拆解对应的页面，我们按照页面常规结构可以将其分为三个加载部分：顶栏、左侧导航栏、内容区域。而其加载顺序如图所示：
当知道对应页面的渲染顺序后，我们就能够清楚在页面渲染的过程中哪些地方会出现空屏了。因此将页面加载过程拆解为如下顺序：
我们的加载动画需要承载的就是上述这些白屏的地方，从而将加载细化为三种场景的拆分：全局加载+局部加载+内部加载。如图所示：
通过这三种加载就可以涵盖页面所涉及到的所有部分。接下来详细阐述一下这三种类型的定义和用法。
如上图所示，全局加载的目的是为了覆盖用户从输入网址到页面的资源渲染的这个中间过程的空屏状态而存在的。而这种状态会涉及三种场景：
1.通过网址进入到一个新的页面时；
2.通过鼠标右键或网页刷新按钮对该页面刷新时；
3.通过页面操作需要新开页面时。
该全局加载的动画构成为：
1：覆盖整个页面的加载，由纯白色+加载动画构成；
2：加载类型为模态加载，因为用户在这种页面状态下并不能进行其它操作。
但在这里我们需要注意全局加载的开始和结束时间：
开始时间：当进入页面时立即呈现加载动画；
结束时间：当页面加载出顶栏的时候，此时停止加载。
为何要这么处理结束时间，原因其实图中已经给出了。这里再解释一下原则：只要有页面资源返回，我们的全局加载动画就会结束，随后启用局部加载来承接后续的状态，避免用户在当前状态长时间等待。而顶栏在一般情况下都是最先加载出来的，所以以顶栏出现作为结束全局加载的标准。当然如果你的结构没有顶栏，可以以左侧栏来作为结束标准。
局部加载是用在页面整体框架加载的过程中，承接在全局加载后。局部加载的使用场景可以概括如下：
1.顶栏加载结束后，用在剩余框架的加载效果（具体体现为左侧边栏和右侧内容区域）；
2.对于涉及到局部页面的切换操作都会进行局部加载（比如左侧边栏的切换）；
光看文字可能不是特别清晰，在这里可以举一个动态的例子来帮助理解：
上述展示的是在页面呈现的时候一个完整的局部加载。在这里需要注意的是我们首次渲染和第二次渲染在加载动画上是可以有区分的，可以通过程序控制让这种加载动画只在初次加载时出现。
第一次加载时出现是因为我们需要有加载动画来承接框架首次加载的空屏时间：
但第二次的时候由于有缓存（缓存会加载我们的静态资源，能够让我们的页面框架在第二次时更快显示），这样在读取框架时基本不需要加载，我们就可以通过程序来直接去掉其中的局部加载动画，直接显示框架来进行呈现。
目前在飞书和钉钉等B端产品后台均采用了这种处理方式。可以看到图中我在第一次切换到角色管理时是有碰撞小球的局部动画存在的，而第二次再次进入时则直接出现框架。这样既能够保证加载动画能够覆盖所有的空屏状态，又避免了局部加载动画的频繁出现。
内部加载是用在页面内部不同模块数据间的加载。当框架都已经加载结束，但某些数据由于接口比较慢，此时还没有返回，这时我们就可以用内部加载来进行承载。这应该是我们更常见的加载情况：
在进行内部加载的时候，需要注意，内部加载的时候一般标题是存在的，因为标题基本都是固定的，所以能够很快被拉取。比如Zoho的内部加载，加载时标题已经出现了：
通过这三种类型的加载，能够覆盖从用户输入网址，到页面渲染完成这个页面呈现过程中的全部加载场景。
说完页面的呈现规则，再谈页面操作加载规则。页面的操作其实对应的是页面控件的反馈。而我们的常用的控件比如有按钮、tab切换等。我们不仅需要考虑控件本身的加载状态，而且需要考虑到控件影响的其他页面范围。
控件的加载并不是随时都需要，我们要根据实际的数据量大小及业务场景来选择性使用。目前我们需要考虑的控件及其加载状态主要有如下：
比如图中的按钮的加载状态是必备的，在很多场景下都会用到。但是下拉列表和级联列表，在一般的场景下都不太需要进行加载，当遇到列表中的数据特别多或者调取特别慢时就可以考虑为其加上加载状态。
这种控件比如日期筛选、表格筛选或者保存等操作，当你切换筛选条件后所有与其相关的页面元素都会发生变化。在这种情况下我们需要考虑到被影响元素的状态。目前的设计实现上有两种做法：
1.被影响元素不可被操作，且该区域有遮罩+加载动画来覆盖；
2.被影响元素可进行操作，无任何动画，但操作并不会影响之前提交的结果；
这两种方案一种是利用遮罩防止用户无效操作，另一种则是保持了足够的操作自由性。个人在这里更倾向于处理方式1，我认为被影响的元素是需要有遮罩+动画的，来避免用户在加载期间对其进行无效操作，比如示例中方案2后面修改的名称是没有被系统保存的。
需要注意的是如果在产品中使用方案1，我们的遮罩区域只需要覆盖被影响的元素就可以了（保存这种可以将按钮一起覆盖），比如通过筛选导致图表数据发生变化，这时只需覆盖图表区域，而不用覆盖筛选区域。这样的好处是当某些筛选数据出现加载过慢问题时，用户可以通过切换筛选项来打断当前加载。
上述描述的操作都是针对于当前页加载。当控件导致页面刷新或者跳转时，则整体遵照页面呈现的规则进行加载。
上面阐述的加载已经完全能够覆盖我们页面整体的加载，但是还是需要提及一下骨架屏和进度条这两种加载形式。
先说骨架屏。实际上骨架屏的使用效果体验是优于加载动画的体验的（骨架屏的加入使用会让用户感觉网页出现的更快）。那么为什么在大部分的B端业务页面中没被用到呢，主要有2点原因：
1.每种骨架屏都需要进行对应的定制开发，需要与加载后的页面框架保持一致，这会增加了开发成本。
2.中后台的业务界面对来说固定结构的页面会较少，这对于骨架屏的使用机会就相对较少。
个人认为在前期可以以统一加载体验为主，在后期业务相对成熟后，可以针对固定结构，通过骨架屏的使用优化加载体验。
再说进度条。我理解的进度条的使用条件：对于加载时间较长的规定场景可以考虑用进度条来承载，比如我们常见的游戏加载中进度条就用得比较多，因为游戏一般资源比较大。还比如figma在进入设计文件的过程中也采用了进度条加载也是因为设计文件可能会很大。
进度条在特定场景下能够缓解用户焦虑，让用户知道进展。但进度条在多数情况下都抓取不到程序的真实进度，这也会导致有时候我们看着加载到99%，那最后的1%迟迟加载不出来的的原因。目前很多中后台产品对于进度条加载使用相对较少的原因，很大程度是没有那种加载特别长的场景。
因此这两种加载场景的使用会更加定制化，如果需要使用请根据具体的业务场景来进行选择。
如果把加载动画等比作页面加载的外在，那么缓存和加载策略则是页面加载的内核，合理使用缓存和加载策略可以从根本上提升我们页面的加载速度，让用户更快速地看到页面。
大家肯定听过缓存这个概念，前后端都可以使用缓存。缓存就是数据交换的缓冲区（称作Cache），是存贮数据（使用频繁的数据）的临时地方。在这里主要讲一下浏览器缓存：
从这张图可以看出，服务器在请求数据时，会进行缓存的判断，如果有缓存则首先读取缓存，如果没有则从服务器中拿取。调取缓存会在很大程度上提升页面的加载速度，缩短了从服务获取数据的时间。通常浏览器会主动对页面的静态资源进行对应的缓存，这也就解释了我们第二次进入页面会比初次进入页面时加载快的原因。
但程序其实也可以对动态资源（也就是需要从数据库等拿到的资源）进行缓存的，并且可以设置缓存的过期时间（比如设置过期时间为1小时，那么1小时过后就会重新拉取新资源）。对于某些动态资源拉取过慢并且更新频率不高的我们可以采用动态资源缓存的策略，从而提升整体的页面加载体验。
现阶段我们常用的主要有下列6种加载策略：
加载策略的本质就是通过对应的加载设置来缩短产品与服务器交换数据的时间，接下来我们详细看一下每种加载策略的具体使用策略：
懒加载是当内容落入视窗被用户看到时，才会进行加载。这种比较节省资源和减轻服务器压力。对于当前页面内容很多的可以采用这种加载策略。而这种加载策略的设计，能够让用户更快看到当前屏幕内的内容，减少等待时间。
比如苹果官网的加载策略就采取了这样的一种方式。我们可以看到右侧的资源只有在我们向下滚动出现在屏幕中时才会进行对应的加载，这样能够保证用户在进入网页第一时间看到首屏内容，并且用户几乎感知不到这种加载延迟。
预加载是在页面空闲的时候就把用户即将用到的资源加载完存到缓存中，等用户需要使用时，通过缓存直接调用呈现。比如用户在看A页面的时候，就可以通过预加载来准备用户需要的B页面资源。当用户需要B页面的时候，立刻就可以呈现。
比如某些页面在实际中加载比较慢，这个时候就可以考虑是否用预加载的策略来提升网页整体加载速度。比如知乎的视频和文字在都进行了对应的预加载。即使当你处于断网状态（图中我将页面网络切换为断开状态），可以看到依旧可以点击全文进行查看和视频的部分预览。
当页面中有文字和图片时，优先加载占用网络资源小的，比如文字资源，然后再进行占用资源较大的加载，比如图片资源。通过分步加载也能有效减少页面等待时间。比如大众点评等图片很多的网站往往会采用这种加载策略。
分页加载是我们目前很常见的方式，比如我们常用的百度和谷歌等搜索引擎都是使用的分页加载，分页适用于数据量比较大的内容，比如表格数据或者大数据搜索场景可以使用。
分页加载可以理解为当前获取到100条数据，但是将100条数据分别拆成5页每页20条数据提供给用户，这样也可以让用户减少等待时间：
在目前还有一种滚动分页的加载，就是不提供视觉上的分页，而是当用户进行滚动时，自动加载一定数量的内容，这样从用户的视角看就是一个连续不间断的数据展示。比如一些资讯类的网站就是采用的这种加载策略，有的也把这种滚动分页的方式称为自动加载。
这里讲的延迟加载更多的是一种防护加载机制，一般延迟设置的时间为300ms。这里的延迟加载有2种使用，第一种多用于搜索，通过延迟加载能够让用户更好进行连续输入，避免搜索结果被高频率刷新，同时缓解服务器压力。如下图，可以看到我在输入1后会有个延迟才出现加载列表，并且我在连续输入12306的过程中是没有对结果进行更新的，当我输入完后才更新。
第二种则是通过延迟加载可以更好防止反复操作。当用户在同一组件上面进行切换时，如果该操作小于300ms,则只记录最后的点击操作。这种情况可以用在我们的表格翻页和开关等状态上，防止用户疯狂点击导致数据反复请求和屏幕闪烁的情况。我们可以通过下面这个组件演示例子来进行对应的感知：
延迟加载更多用于上述2种场景，对于其他情况的加载，直接加上就可以了，并不需要刻意设置延迟。
这里想要表达的含义是当用户在操作后，客户端立即反馈操作成功，然后把请求放到后台与服务器交互，这一过程用户不需要了解，不需要等待。无论在什么网络环境下你基本上都能操作成功。比如微信的朋友圈发布就是这样的操作，即使你在断网的情况下都能够立刻发布，但实际上这个时候并没有发送成功，还需要上传到服务器后才你的朋友们才能看见。
这样的好处是用户使用起来非常流畅，但是坏处就是，当操作不成功时，用户并不能及时进行感知，仍然以为操作已经成功了。所以这种场景我们也需要根据场景进行对应的判断和选择。对于复杂的B端场景个人建议慎用或者不用这种操作，毕竟很多发布的功能会同时影响很多业务线。
这里就拿微信的朋友圈发布来进行举例，下方手机状态都为断网状态，可以看到微信立即发布，而贴吧在这种状态下提示网络错误。
通过这些加载策略的选择性使用，能够在特定环境下提升我们系统的整体使用体验。因此我们需要对这些加载策略有一个比较全面的认识，这样我们不仅知道加载慢的原因，还可以利用加载策略去提升页面性能。
在整体的加载过程中，别忘了考虑加载异常的情况。在通常情况下我们会我们会遇到网络速度过慢或者突然断网这两种状况让页面一直加载不出来，这时我们需要考虑对长时间的加载过程进行处理。
通常做法是我们要对加载状态有一个最长时间的限制，一般为加载不超过10s，超过最长时间后就进行异常状态显示（提示语+刷新按钮）。这样用户可以选择重新加载或者离开此页面，而不是一直等待。
在这里还想到一点，就是对于编辑页面，我们应当加入网络连接是否异常的判断，比如当进入到编辑页面后，如果遇到网络断开，需要在页面的顶部加上常驻提示条【当前网络连接断开】，这样用户能够及时进行察觉并修复。避免在无网环境下继续输入。这对于某些需要输入很多内容且并不提供本地保存的页面来讲是非常有必要的。
加载在设计中是非常容易被忽略的模块，因为在大部分情况下网络速度都较快，人们很难深刻地感受到加载过程。但加载却在产品运行中起着不可或缺的作用。通过这篇文章想要告诉大家的有几个点：
1.我们需要明白加载为什么会出现，这个过程是怎么样的；
2.加载的通用处理手段是怎么样的，非通用处理方式有哪些；
3.通过缓存和对应加载策略能够让页面加载速度有本质上的提升。
这样当我们在页面上遇到加载速度慢的问题时，在为其加上动画承载过渡的同时，还应该思考其加载缓慢背后的原因，是因为数据量太大还是加载策略的相关问题，是否可以将其进行懒加载或者分步加载，这时我应该去找前端或者后端如何沟通。从源头上解决加载时间长的问题，才是后续产品设计过程中的长久思路。
作者：进击的M 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
四个色彩趋势：霓虹渐变、轻量渐变、高饱和度色系、梦幻色/幻彩色系。从现实图库入手，总结出该色彩趋势对应的关键词以及色彩特征。对部分案例进行了解析，更深入地了解其运用方向以及实现技巧。希望这些内容可以起到抛砖引玉的作用，欢迎大家探讨。（图片来源于网络，原作者可提供原图链接进行标注）
现实生活中，炫彩夺目的霓虹灯效果常被应用于广告牌、灯箱的展示中，在暗夜的烘托下，霓虹灯展现出光影陆离的光影效果，吸引着人们的眼球，留下强烈的视觉冲击。如图所示，暗夜中的霓虹灯效果，为霓虹渐变的现实灵感来源。
夜色下的霓虹灯
1、以紫色、蓝色、洋红为主的冷暖色搭配；
2、整体颜色对比度高；
3、以冷色调为主，局部暖色调，搭配霓虹光感对比色点缀；
4、背景用暗色调更能凸显霓虹效果；
5、根据霓虹灯的灵感，采用了霓虹灯发光的效果。
近年来，强视觉冲击的渐变色被广泛应用在各个领域，包括宣传海报、综艺节目、游戏等等，其中最为瞩目的是霓虹渐变，设计师通过将这种高饱和度的渐变色与暗色调背景结合，形成强烈的视觉冲击，突出主体，渲染氛围，使整个画面的色调更加活力化、年轻化。
最近较火的综艺节目“这就是街舞”，其宣传海报通过高饱和度的霓虹色渐变，与人物及背景形成强明暗对比，结合对人物本身的光影细节刻画，突出人物主体，增强画面视觉冲击力。
2020年7月，由Veewo Games发布的一款游戏「霓虹深渊」，画面以紫色、蓝色、洋红的冷暖色搭配为主基调，通过明暗色的对比，以及大面积的紫色光影渲染氛围，营造出极强的未来科技感，而霓虹光感的使用以及涂鸦风格的融入，使得游戏更加时尚、自由。
页面整体以紫色，蓝色，洋红为主，冷暖色搭配，营造出层次感，活泼生动且年轻化；偏暗色调的霓虹渐变色背景烘托出专题页的内容主体，使得页面运营氛围更好、更强；同时在一些重要的、需要用户操作点击的部分使用了暖色调的霓虹色渐变，使得内容主体在冷色调的环境下更为突出，提高了用户体验。
以暗色调背景作为烘托，搭配紫色、蓝色、洋红为主的冷暖色，是霓虹色渐变经典的应用方式。在暗色背景下运用霓虹色渐变，通过明暗的强对比突出页面关键元素，对用户进行视觉引导，同时丰富页面层次，增强页面的视觉冲击力及艺术感染力。
暗色的背景与撞色霓虹搭配的插画手法使得界面看起来更加的酷炫和高科技，整体页面在霓虹色渐变的使用下更富层次性。通过主体与环境色的呼应、冷暖明暗的对比，展现出主体光源对空间层级的变化效果。此组合用来作为web头部页面，冲击感十足，科技感也非常的棒。
通过高饱和度的霓虹渐变色彩，结合外发光、叠加、模糊等多种技法，塑造出更加丰富的光影效果，不仅增强图标视觉表现力及空间感，更凸显了图标的风格化与趣味性。暗色调背景的烘托，使霓虹色渐变图标更加有质感，更加突显。
通过大面积的霓虹色渐变结合迷彩渐变的绘制手法，构建不同色彩鲜明的矩形图案，暗色调的背景烘托与颜色用冷色为主暖色为辅、点缀，画面感极强，极具视觉冲击力。
霓虹色渐变在暗色调的背景烘托下，撞色的冲击感使得画面更加具有科技感、潮流感；对于霓虹色渐变使用比较频繁的赛博朋克风、故障风，也是现下较为流行的风格，通过丰富鲜明的色彩与背景作强对比，营造出极具视觉冲击力的画面效果；同时霓虹渐变色也被广泛的使用于app、web、插画等领域，虽然它出现已久，但其大胆、强烈的配色风格给画面带来的冲击感以及潮流、自由感，使得它仍然成为当下一种比较流行的色彩趋势。
通过对2021年色彩趋势分析发现，渐变色的运用仍然非常流行。相较之前运用较多的强视觉冲击类——对比色渐变，轻量渐变在色彩运用上变得更加理性与克制。主要特征为轻量、柔和、层次递进，营造一种舒缓、治愈的沉浸感。
色彩上的渐变是指某个物体的颜色从明到暗，或由深转浅，或是从一个色彩缓慢过渡到另一个色彩，充满变幻无穷的神秘浪漫气息的颜色。根据强弱程度分类，渐变主要分为强渐变和弱渐变，轻量渐变属于弱渐变范畴。在过渡的过程中，轻量渐变特点为渐变色彩邻近，幅度轻柔，节奏缓慢，融合感和细腻感较强。
轻量渐变是一种简约且高度可用的元素，它可以创造出一些时尚的氛围，但是又不会有信息过载的担忧，这使得轻量渐变成为一种富有感染力又非常实用的设计解决方案。轻量渐变特点之一为明度高、饱和度低，色彩轻量而透气。在轻量渐变的使用过程中，同色系、邻近色系较多，其过渡自然柔和。
透过今年各大设计网站上的作品不难发现，较多的视觉设计师将轻量渐变的色彩趋势与毛玻璃的质感趋势结合，运用在界面中。下图画面中，轻量渐变的柔和属性搭配上毛玻璃的朦胧感，营造一种视觉感官的舒适感与呼吸感，已成为2021年UI界面设计趋势之一。
当轻量渐变与3D碰撞时，则会产生更加趣味的视觉化学反应。画面中使用的3D效果可以最大限度还原现实世界的材质与光效，呈现极具脑洞的“超现实”效果，为用户呈现不可思议的异度空间，吸引用户眼球。画面中的背景使用了轻量渐变来创建出多彩的模糊背景，为3D素材创造出另类维度的空间感，增加了画面深度，使设计更具真实感。
自如app最新的首页风格采用轻量渐变+毛玻璃效果，金刚区应用最为明显。图标的色彩选用低饱和邻近色，遵循3色系原则，使得整体色彩统一且不失丰富。从单个图标看，色块部分采用单色渐变，通过easing gradient插件工具调整渐变值，以达到最佳效果。毛玻璃特有的通透感，会将渐变色块透映出来，故制作毛玻璃效果时，需添加环境色使其融合。
两个启动页中均采用高明度、低饱和度外加一些毛玻璃微透质感的表现手法。第一个界面主要传达安全、简洁、可靠的情感，第二个界面则表现的是活动主题的梦幻感。这两个页面虽目的不同，但却均体现了柔和、细腻、轻量感的视觉感。设计师发现，使用者在经历过传统大色块、大面积、较强冲击力渐变的视觉后往往更加想追寻视觉上的宁静，所以视觉负担相对较小、相对轻量的微渐变色彩和可以利用微透质感减弱色彩冲击力的毛玻璃相结合的视觉效果越来越多地被运用。
在界面背景中，使用少量的邻近色渐变来做通栏背景，使整体氛围更加柔和、富于层次感，同时起到强调头部的作用。卡片处采用透明毛玻璃效果，利用毛玻璃特有的通透感，透映出底部渐变，使卡片兼具质感与美感。
卡片中采用同色系的轻量渐变效果，营造融合、舒适的视觉观感。卡片的颜色根据色彩情绪进行选取，增加辨识度，进而增加点击率。
渐变之所以每隔几年就会成为设计流行趋势，很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的轻量渐变，更多从用户的角度出发：减轻界面给用户带来的视觉负担，为其提供更轻盈的视觉体验。在应用的过程中，轻量渐变与毛玻璃、3D等流行表现形式相结合，可创造出全新的、有趣的视觉体验，不仅在外观上起到美化的作用，在功能上也达到了强调、醒目的作用。
在过去的两年中，高饱和度色系的应用已经是重要的趋势之一。年轻人作为移动互联网的主力军，他们青春，活力，有朝气，因此，代表年轻活力群体的鲜艳，高饱和度色彩成为视觉主流趋势之一。偏高饱和度色彩更易吸引注意力，烘托主体，影响用户情绪，提高品牌的识别性，增强品牌影响力。
1、颜色饱和度高，艳丽；
2、色彩丰富多样；
3、视觉冲击力强；
虽然高饱和色彩视觉冲击力强、更容易传递情绪，但在使用时仍需克制使用。原因在于：1.过高的饱和度，容易产生视觉疲劳；2.高饱和度的颜色并不适合所有的用户群体。
这里说的高饱和度的颜色，并不是一味追求高饱和刺激性颜色，我们在使用时候，仍需对颜色的明度，饱和度进行合理设置，这样才能保证我们视觉上的舒适性。
在综艺海报中，高饱和度的半插画+实物的表现形式，让画面极具趣味性和视觉吸引力，获取了大批流量。
偏高饱和度的色彩，在UI设计应用中，往往更容易脱颖而出。而一些品牌的品牌色往往就是偏高饱和度的颜色，比如UI设计中品牌色的运用，在一定程度上可以将品牌影响力扩大化，品牌影响力，也会让用户增加信任感。
例如，微信的绿色，饿了么的蓝色，美团的黄色，淘宝的橙色......等等这些品牌色，都深入人心。
高饱和度品牌色
活动营销类弹窗，以及运营类的H5，运营专题，促销类的BANNER中经常运用高饱和色的视觉刺激以达到强调、引流的作用。
高饱和度色系以其绚丽、强视觉冲击力等特点，在UI设计中一直被广泛的应用。它可以更好的营造氛围、传递情绪、增强视觉层次结构、提高品牌的可识别性。撞色、插画+半实物、手绘等各种新式流行的表现手法使得高饱和色的运用上更加丰富多样。
广义上，我们将富于想象力的色彩，或者说体现人生丰富多姿的色彩称之为“梦幻色彩”，像泡沫、像天使、 像梦境、像糖果...
梦幻色在颜色面板中处于中间偏上部分，即特点为中纯度、高明度。
配色方面和谐，视觉效果相对温暖柔和。常以简单、干净的背景为衬托，烘托主体物以及主色调。色彩场景偏向幻想、天马行空的自由世界，给人以浪漫的色彩感受，容易令人沉浸在画面的温暖氛围中。
现今，色彩作为重要的视觉语言而被越来越多的设计师所关注，而在实际设计作品输出当中，颜色也扮演着将产品理念传递给用户的媒介⻆色。可见，完整的设计作品是离不开色彩的表现的，那么了解色彩趋势就会显得尤为重要。而在众多颜色中的梦幻色，更是极具前沿性和突出感的色彩。
色彩倾向明快轻量，采用颜色烘托主题的表达方式，较能抓住用户眼球。塑造了色彩多变的视觉风格，适用于多种品牌调性，给用户温暖、轻松且焕然一新的感觉。
在下图插画案例2-绚丽配色中，能发现绚丽配色类插画通过光的运用，让画面呈现出细节更丰富的视觉效果。 一些光晕的重叠使用，使得画面变得朦胧，更显梦幻特点。另外，梦幻色还可以营造神秘的氛围，在网站首页使用的梦幻色彩，搭配引人入胜的画面，神秘感的体现更加突出。吸引用户的点击，从⽽提升⽹站的浏览量，实现流量变现。
在材质-塑料质感中，大面积的梦幻色彩渐变，形成很强的视觉冲击。塑料的质感配合灯光与彩色渐变，显得非常梦幻；透明的气泡材质，整体质感给⼈轻盈、透亮。这种流动的色彩呈现出了源源不断、生命不息的美好愿景，带给观者美好的想象。
梦幻色应用于3D物体中，整个画面更加丰富多彩，温暖、轻松氛围下的物体仿佛将从屏幕的束缚中挣脱出来，拉近了画面与观者之间的距离。
这是一组描绘田野间的手绘插画，为观者提供感观上的愉悦。一切事物在自然中的蓬勃生长以及梦幻色下烘托出的神秘感，使得整体画面有种超脱现实、游离人生的美感。形成了以自然景观为主导的唯美风格。
虽然梦幻色没有特别靓丽夺目的色彩特点，但在梦幻色的使用中所烘托出的特定氛围，不但突出了不同产品的特点，也更加满足了用户的情感需求。色彩趋势必然与时代潮流以及用户喜好紧密结合，作为设计师的我们需要了解，并能与我们的设计产出进行结合。
日新月异的生活是色彩趋势的灵感来源，这使得色彩的流行趋势不断更新变化着。作为设计师的我们，要保持一颗敏锐的心，不断从现实生活中捕捉灵感，将自然赋予我们的宝贵灵感运用于作品中，从而增强设计的原创性，给设计行业注入新鲜血液。其次，趋势是方向，不能盲目追随，需要不断思考总结沉淀升华，并将其合理运用至自己的作品或项目中。设计就是在实践中不断探索与总结！这是我们写这篇文章的初衷，最后也欢迎大家积极探讨。
作者：贰元 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
“ 设计思维是一种以人为本的创新方法，它借鉴了设计师的工具包，整合了人们的需求，技术的可能性以及商业成功的要求。”
设计思维
关于设计思维的文章我们也看过不少，也听过大佬们讲什么是设计思维，可都停滞于带我们了解初识阶段，并没有教到我们怎么去践行设计思维。设计思维 (Design Thinking) 是一种设计方法，提供基于解决方案的方法来解决问题。解决方案是什么？究竟要解决什么问题？如何去解决？在参考了大量的文献后，更多的是在阐述设计思维是什么，具体的分类和步骤，更偏向于介绍和展示相关的知识。比如 Google 的 Design Sprint 方法论，比如 IDEO 首席执行官 Tim Brown 提出的可行性三原则，比如斯坦福大学哈斯普拉特纳设计学院（d.school）提出的五阶段设计思维模型，而根据 d.school 提出的五阶段设计思维模型，大部分公司都基于这个模型进行变量修改后作为自己的设计思维模式，这五阶段设计思维模型为：同理心 (Empathise) - 定义 (Define) - 假设 (Ideate) - 原型(Prototype) -测试 (Test) ,几乎大部分的设计思维都基于这五阶段模型做的改变。
用同理心代入 (Derivation) 定义，用同理心建立 (Build) 原型，通过原型反推 (Reverse) 原型的成立，最后用测试结果证实 (Validate) 定义的正确性。
现在对设计思维有了大致的认识，这里也不花太多篇幅去描述，但是全部看下来感觉自己脑袋晕乎乎的，那究竟我们在具体的工作学习中，要如何尝试性代入且应用设计思维来做设计呢？通过一些项目的经验我总结出关于如何运用设计思维做设计的方法，就是通过寻找产品之间的共通性和异样性，深挖出关键性的问题所在，最后去解决这个关键性问题。
共通性与共同性
共通性和共同性在意义上有根本的区别，共通性是指相通或者适用于各方面的东西，比如共通的道理，共通的方法；共同性则是指彼此都具有相同的性质，比如大家共同的目标，共同的性格；产品与产品之间也是有共通性和共同性的，只有找准产品的共通性，才能深度挖掘到核心问题的所在，从而通过设计手段解决核心问题。
与同类竞品分析不同的是，竞品分析需要通过大量且快速的对比找到各类产品之间的共同处和差异处，而寻找产品的共通性，则需要对逐个产品进行深度剖析，挖掘共通的点 (Point)，然后把这个点透过三原则：可行性(Feasibility)，可取性 (Preferability) 和创新性 (Innovativeness)分析来设计产品解决问题。一款产品或者某个功能模块，只有在可行性和可取性中产生交集时，才可以在此之上进行创新设计，可行性可以理解为开发可实现，或者和业务需求没有冲突的模块，可取性是指性质上可以取用。
举一个简单的例子，某个模块希望通过弹窗的形式提升某二级页面的跳转率，那么提炼出业务诉求关键点：
1.提升二级页面的跳转率；
2.通过弹窗的形式展现；
那么可取性就是【弹窗】这个 Piont，而可行性同样为弹窗形式，那么他们共同的交集之处就是弹窗顶部的氛围层和行动点，设计师就可以在这两个交集处做自己的创意发散，比如在弹窗头部氛围做的很强烈吸引用户，或者把行动点设计成带有动效的按钮以此来吸引用户点击等等。产品设计中通过共通性挖掘问题，而承诺和顾客的体验达成共同相通，这是为了赢得用户信任和尊重的需要。
产品的共通性
做产品第一步就是找出同类竞品之间共同之处，把他们共同的地方记录下来并做出统计。比如我需要做一个关于 UGC(用户原创内容)的内容社区，那么我前期得搜集同类竞品，比如 MONO、新草、Lofter等等，找出他们共同的地方。首先来解释为什么要寻找共同的地方，根据模块出现的频率排列出模块的优先级，这是一款产品从零到一必须要经历的阶段，但往往很多产品到这一步就停止了，然后像堆砖砌瓦一样，它有的我 Duang 地加上去，另一个它有的我也要 Duang 地加上去，我全都要！最后导致产品做出来架构不清晰，目标不明确。这就是为什么老有设计师疑惑：为啥总是左改一版右改一版业务方/老板就是不满意，这在战略层就出现了的问题，跳到执行层上改来改去，肯定怎么改都不会有一个满意的结果。这时候就需要将搜集到共同的地方做分析，找出它们各自存在的性质，然后挖掘产品的共通性。
通过各类竞品搜集下来可以看出关于社区模块的内容大致分列为：话题标题占比18%，统计信息占比18%，话题说明占比16%，心智氛围占比8%，内容分级占比4%以及其他内容填充占比36%，具体归类成A.标题&统计、B.话题说明、C.心智氛围、D.分级信息和 E.其他信息，然后排列优先级顺序为：A>B>C>D>E，最后一步就是分析各自独有的性质：
A.标题&统计信息：话题标题和统计信息属于必要模块，标题显示话题主题，统计信息展示话题关注度等信息，增强话题氛围；
B.话题说明：是对话题进行的补充说明，也可增设相关活动等文案；
C.心智氛围：心智氛围的增设用于对话题主题的传达以及突出用户的参与感；
D.分级信息：分级信息对用户的筛选起到至关重要的作用；
E.其他信息：其他信息皆为用户提供UGC或者平台提供PGC。
而这类性质可以统称为社区类模块产品的共通性，提炼出产品的共通性有什么用呢？如果一个社区类产品上线后发现用户参与感热度不是很强，那么就可以从心智氛围模块去分析是否问题出在这里，是否应该加强话题的心智氛围，或者是否可以通过投资邀请专业的人士通过生产 PGC 来带动社区的热度等等，只有先去了解产品之间的共通性，然后找出关键点提炼出关键问题，在战略上提出解决方案，才能从根本上解决产品问题。
就好比一个人捂着肚子冲进诊所，医生首先了解捂着肚子的性质，是阑尾炎？是胃痛？还是其他的疾病，只有先熟悉各类疾病的性质原因后，通过排查筛选找出根本的原因，才能提出是做手术还是药物治疗的解决方案；同理，回到之前的那个问题：为啥总是左改一版右改一版业务方/老板就是不满意，都没查出究竟是什么原因导致肚子痛，就开始开刀手术或者胡乱吃药，运气好了胡乱吃药吃对了解决了，运气不好被折腾凉了，最后的结果就是产品模块下架撤离，所以无论是从零到一的产品还是业务改版，都需要找到产品之间的共通性，才能找出具体的解决方案。
设计细节的共通性
我们不难发现市场上很多出自于同一业务下的产品都有着自己的设计细节，而在这些母舰上都有着各个模块的附属模块，比如在QQ产品里的兴趣部落、NOW直播、微视等模块，比如在淘宝产品里的天猫、聚划算、飞猪等模块，那么在这些母舰下的附属模块，在设计细节上自然而然要和母舰保持一致性。举个很明显的例子：手淘设计语言中卡片的圆角为24px，手猫设计语言中卡片的圆角为10px（基于750px尺寸下），那么手猫其中的模块自然是要遵循手猫的设计语言——圆角的尺寸为10px，但是如果这个模块获取到手淘透出的资源，那么在设计上，就要遵守手淘的设计语言——圆角尺寸为24px。
那么你会问了，这样最多只是相同啊，有什么性质意义呢？这和共通性又有什么关系？不同的产品所面向的用户群体是不一样的，所以主打心智也不一样，设计上的细节传达给用户的心智一样的不同。众所周知，淘宝主要面向的用户群体是大众的，天猫主要面向的用户群体是追求更高质量或者品牌的，那么在细节上，24px的圆角卡片带给用户的心智是友好亲切的，10px的圆角卡片带给用户的心智是偏向更精致更高质感的；其次，如果用户通过手淘的场景进入天猫的模块，一会儿24px的圆角一会儿10px的圆角，长时间下去用户自然会分不清当前场景是天猫还是淘宝，这是在产品一致性上做的共通性协调工作。所以如果是同类系的产品或者是模块，在设计细节上一定要注意，保持模块与模块之间的共通性。（有的人可能不会注意到这些设计细节，设计细节既然是细节，个体本身影响力不是很大，很容易造成忽视，但是如果个体增多形成量级的话，造成的视觉影响是很直观的）
差异性
差异化策略是从改变产品的“绝对差异化”到改变认知的“相对差异化”，越来越着眼于“人”的视角。在如今发展迅猛的网络营销时代，“人”的因素更是被置于产品运营和品牌营销的核心位置，不过，这并非表明“定位”理论变得越来越重要了。这点做品牌的朋友相信有更多的感触，但是无论你是做产品的，还是做品牌的，要想脱颖而出，首要的策略就是“差异化”。大家都知道平台产品的最终目的是实现商业价值，可是如何实现商业价值，就是要通过产品之间的差异化来寻求突破点。
产品的差异性
依旧拿上面那个社区产品当例子，同类对比我们发现，大多数的社区产品更多的是流量引进来营造平台氛围，无论是通过 PGC 的形式还是对内容的打造，但是在商业价值化层面上则很少有渠道介入。那要如何通过设计表达出差异化并且实现商业价值，就需要对实现商业价值有一定的了解。当社区把流量引进时，实现商业价值常见的几种方式有：
1.广告宣传的推广；
2.电商平台的转化；
3.流量引导产品模块的介入等等。
以电商产品举例，我这个社区模块将流量引进后，需要致使用户通过 UGC 或者 PGC 种草的内容去购买所对应的种草商品，知名的社区电商产品的确也是这样做的，比如小红书、Lips等等，但是不难发现此类产品都有一个共同的弊端：用户需要先记住种草商品的内容后，自行去购买采购商品，这样可能就去了淘宝、京东等等更加知名的电商平台，最后为他人做了嫁衣，那么这一块就是关键突破点。
通过寻找差异性找出关键突破点问题所在，并推导出相关的设计策略：平台可以通过招商的形式发布社区话题，并且可以通过“参与话题送 xx 额度的优惠券”、“参与话题并分享给好友获取 xx 限量商品”等形式刺激用户参与话题，并且也给用户很方便的渠道入口直接进行商品购买，防止流量丢失为他人做嫁衣；商家通过入驻平台提供话题，平台流量导入参与话题，商家通过参与话题给予优惠等活动引导用户购物，用户通过平台参与话题了解品牌获取参与感；类似线下商场搞一些活动，品牌店给一些优惠券之类的当作参与活动的奖励，然后客人可以去到品牌店消费，最终实现三方获利的商业闭环！
不难发现，通过寻找产品之间的差异性来挖掘出关键点问题，然后在此基础上解决问题做出创新。追求差异化，是产品基于竞争角度永恒的主题。这种差异化甚至贯穿了产品生命不断迭代的全程，也贯穿在与品牌相关的一切要素中——产品、包装、广告、价格、渠道、视觉、代言人等等，每种要读的动态演变，都是一种创新，具体需要那种要素在哪些时刻做出何种改变，既要考虑到竞争，也要敏锐觉察用户的需求、态度和行为的变化趋向。
设计细节的差异性
设计细节用共通性同样也有差异性，而细节的差异性有时候往往能起到产品的关键性作用。这里使用之前做的一个实际项目做例子：淘抢购模块 v4.0.1的改版。（保密性原则不透露任何数据）因为淘抢购 v3.9样式太过老旧，根据手淘语言更新的淘抢购 v4.0在投放过程中发现，成交量和成交率比 v3.9降低了很多，所以在 v4.0.1的改版中最主要的是解决这个问题。
根据用户采样调研数据分析我们筛查和对比发现，成交量和成交率下降的根本原因是用户在页面丢失，而用户丢失的原因则是因为淘抢购 v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一个，对的你没看错，就是因为这么一个商品坑位的细节原因，导致 v4.0的成交量和成交率比 v3.9降低了很多，以至于引起重视从而需要解决问题。
找出关键问题后就要去解决问题，那么如何解决问题是关键。此处需要保证在不改变新版设计语言的基础上对首屏 Sublist 的坑位透出做调整，那么只需要坑位透出3.5～4个坑位就能到达预期的效果，如何在有限的空间里解决这个问题，做了很多版本的尝试。
通过各类尝试得出ABCDEF六种方案后，这时候需要从设计细节的差异性逐一分析然后进行取舍：
A.此方案为目前 v4.0实行方案，可以明显看出单屏的效率只能展示3个商品坑位，因此是造成用户在浏览的过程中会流失的根本原因；
B.此方案计与 v3.9通栏无太大差异，所以问题就是：1.版式陈旧老化；2.信息过多整体会导致页面看起来杂乱无章；
C.此方案除了版式陈旧信息过多问题外，图片变小导致用户对信息细节辨识度不高，直接pass，所以通栏的方案在当前场景中完全不可行。
D.此方案基于 v4.0上，缩进了卡片内信息的距离，更加突出“抢购”的紧凑感氛围，同时单屏能显示3.5个商品坑位，解决了屏效的主要问题，同时数据显示比通栏式设计曝光点击率有所提升，也符合淘宝的设计风格规范，但是单卡片样式商品与商品之间分割感太强烈；
E.此方案将所有商品坑位包含在一个大卡片内，解决了商品与商品之间的分割感，商品信息细节也比小卡片展示得更完全，但存在问题就是：每个商品之间的间隔存在的分割线导致间距过大，屏效又回到旧版只能展示3个的问题，不能解决主要问题，所以pass；
F.此方案在大卡片设计上进行了优化，取消了分割线的设计，缩进了商品与商品之间的间距，解决了小卡片式商品与商品之间分割感强烈的问题，图片的大小信息细节也能给用户良好的体验，最主要单屏显示3.5个商品坑位，解决了最主要的问题，也符合最新的淘宝设计规范和风格，此方案为最佳方案。
最后采用了F方案，也就是目前我们线上看到的效果，在灰度上线和 A/B test 后数据反馈，淘抢购 v4.0.1的成交量&成交率相比 v4.0有很明显的上升甚至超出了 v3.9的数据，这是通过寻找设计细节上的差异性来解决问题最好的案例。再次证明：设计思维不应被视为一种具体而不灵活的设计方法，细节的差异性有时候往往能起到产品的关键性作用，所以设计师从设计层面上去解决问题的时候，要不断通过寻找产品之间的差异性，培养自己设计思维中的差异性。
动效差异性的运用
产品设计中，动效作为一种辅助手段，帮助设计师传达具象的意愿，帮助开发理解交互手段，是一种锦上添花的表达；前面的内容更偏向于战略层，而动效则偏向于表现层，同一种想表达的心智不同的样式表达的效果完全不同。如何做好动效在产品中的表现，我们就需要了解不同的动效所带来的性质传达。
举个例子，某个弹窗需要对行动点通过动效的展示进行强化，但是同样是强化行动点，如果产品是需要体现出质感、高端等心智时，那么在动效上的处理上就应该体现出高品质高质感的动效，如果产品主要用户为女性或者年龄偏小的用户，则需要体现出可爱、亲切感的心智。那么在动效的选择上，就需要通过平时对动效的收集积累，然后熟悉不同的动效所表达的性质，才能从中选择最优的方案。比如 Q弹缩放的动效看起来亲切感更强，闪光的按钮看起来质感更加强烈一些。
动效向来是产品的辅助，动效应该是克制的，只有了解动效的性质，通过动效的差异性，完美地契合产品，才能发挥出动效的最大作用。
总结
在如今网络时代和社会化媒体的大潮下，产品设计差异化的力量不仅仅基于竞争，更要基于消费者需求的敏锐察觉和捕捉；设计思维的共通性和差异性，在今天也比以往任何时代都显得重要。识别和竞争的需要决定了产品一定要差异化，而诚信和责任要求产品必须做到共通，差异性是产品价值的基础，而共通性则是产品价值的保障。设计思维不应被视为一种具体而不灵活的设计方法，而是需要设计师们通过自己的经验积累，刻意地培养设计与产品之间差异性和共通性的意识，总结归纳出一套适用自己的设计思维。
作者：雨灰 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com