作为UI设计师，虽然现在做了很多项目，但是实际上每一次想要做好，过程都还是很痛苦的。尤其是前段时间，身心俱疲，时间、心情、精力都不在线。但恰恰接到的又是一个重头的急活，产品方也不清楚自己想要什么效果，所以一开始改版的心路很渺茫。
不过也由于这次的经历也让我更加明白设计方法的重要性，越是短时间内，越需要理性分析。在实际工作中，产品有时候因为项目急需上线，给我们的时间会非常有限，根本没有太多的时间去给你思考，就比如我这次，只有半天时间去思考设计。那么如此短的时间，如何提出有效的设计方案呢？
以这次为例，学习圈页面刚上线不久，当时也是设计了许多方案，都被pass了，如下：
产品方提出页面上方的发布按钮需要重新设计，那我就要搞清楚具体是谁提出的意见，为什么要重新设计，这样才不会让自己处于完全被动状态。
由于项目刚上线，数据库也因为某些原因还不能检测点击和转化量，无法得知哪种按钮点击量高。产品方也不清楚想要什么效果，需求方向不明确就着急去动手设计，那对于设计师来说无疑是效的，问明白需求后再通过竞品分析、产品体验、用户喜好等方式去突破。
所以接下来需要我们主动出击引导产品方，得出一些需求具体的方向。那怎么去引导？反向思维法，既然需要改动的是不确定的，那么我们可以确定那些不需要改动的地方——通过排除不需要改动的，来确定需要改动。
需要排除的是：整体页面排版布局、按钮设计方向（扁平、立体、简洁、卡通等方向）、动效方向、背景（颜色元素）。
通过沟通后明确的是：
在第一版时已经对相关竞品做了分析，基本是一个纯色背景上加一个具象化大按钮，发布功能使用加号、笔、照相机等元素来制作按钮，原则：按钮凸显，背景元素比较少。其实按钮如果用照相机这种结构复杂点的元素去设计会更有方向，但是我们左上角会有拍米币的功能，用相机会更直接一些，而加号笔画过于简单，可延展性不强，所以改版的话最终决定还是使用铅笔作为图标设计元素。
关于整体颜色方向，上一版颜色设计原理是背景用产品主色（蓝色）+白色按钮，不过产品方提出太过冷静，一开始我想用色肯定要跟整个app的主色相关呀，就跳不出蓝色背景的思维，后来决定先跳出来，配色思维反过来，背景不局限在主色，按钮及周边装饰元素可使用产品的主色。
时间紧急，当时想到的是常用的太空元素（有空间感、好延展、符合用户喜好），于是背景就选了蓝紫色（据研究，紫色也是小学生最喜欢的颜色，性别倾向相对偏弱，在色环上是蓝色的邻近色，协调又会有对比。）
在设计前，我先在心里大致分了两个设计方向：
以下便是常规大按钮设计稿：
非常规按钮设计稿
在尝试的这期间，对于有疑问的地方一定要跟需求方及时沟通，及时反馈，确保自己的设计在功能上没有遗漏。比如我这次，是通过询问一个产品经理，才得知，按钮上需要加文字，才在后面加上了。
大体方案出来后，通过优缺点分析对比，同产品方选出最适合的方案。
1. 常规按钮设计稿
优点：容易被用户所熟知，用户的学习成本低，更容易点击
缺点：对于小学生来说吸引力不够，形状上偏规矩，不够活泼，另外上方第一个元素稍微有一点抢主角的光环
2. 非常规按钮设计稿
优点：配合动效会更有吸引力一些
缺点：用户的学习成本比较高
通过对比，大家一致倾向非常规按钮，那就在气泡与星球这两者中选出最终方案。在APP的任务页面也有星球的按钮，用户已经对星球有了一定的点击感知，减少了学习成本，最终选择了星球。
优化方向：
1. 颜色调整
现在看着球跟背景区分不是很明显，整体偏灰，需要加强对比，球的颜色需要调亮调纯。我们看下色环：
90度以内的邻近色，搭配在一起和谐又不失活泼。所以可以尝试将球的颜色改为背景蓝紫色的邻近色：红色或者天蓝色，如图：
红色的球虽然跟背景拉开了对比，但是过于鲜艳，大家反应有点类似于心脏。
所以相对来说蓝色的球比较适合，也跟APP的主色相呼应。
2. 细节元素调整
球的环境色过于明显，需弱化一些；周边增加几个小球，四周边缘的球太抢，也需要弱化 ；文字“写一写”由常规字体改为大一点的手写字体：
3. 添加动效
鉴于上线版本的动效反馈说不明显，按钮点击感偏弱，所以这次动效优化点需要凸显星球本身。第一想到的就是呼吸效果，但是只有一个呼吸有点单一，周边可以添加一些社交鼓励的元素，如鲜花、笑脸、太阳，动效一开始想着是从球两边飞出来，但是经过对比就参考了直播送奖励的形式，相对来说辅助性稍微好一些，视觉上不会过于太抢主角，如下最终呈现结果：
如果有限时间内想要让需求方得到满意方案，所以以下两点我觉得是挺重要的：
好啦，文章写到这里，如果大家有更好地意见也欢迎留言
文章来源：优设网 作者：麦芽糖
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在互联网公司中，运营Banner往往是由不同的运营团队去完成，甚至在一些跨国企业，运营Banner是由不同国家的运营团队完成的。那么如何保证大家输出的运营Banner在保证视觉冲击力的同时，还能输出以及体现统一的设计语言呢？甚至不用设计师也能轻松替换Banner组件？想要解决这种难题的最好方法就是设计Banner组件库，Banner组件库的四大优点能够完美解决以上的问题。
根据设计师个人及每个公司业务的不同需求，我一共把Banner组件库分为两大类别：
1. 设计师及设计团队操作的Banner组件库：
这类组件库面向的操作人群是设计师，仅有设计师才对其有操作权限：
案例部分效果演示：
2. 非设计师操作的Banner组件库：
这类组件库面向的操作人群是非设计师人员（运营、销售、子公司员工等），是设计师根据运营的需求特制的Banner组件库。
我当时制作这个组件库的原由是因为母、子公司经常都会有相同的模板化设计界面替换，而每次替换都需要花费设计师很多零碎的时间，所以我们干脆就直接设定好Banner组件库，让运营人员自行替换，我们先教会母公司的主运营操作流程，主运营再去负责子公司的操作流程培训，这样一套下来省去了运营人员与设计师的沟通及修改过程，运营人员可直接输出成品，从而提升了整个团队的生产力，也让设计师专注于设计上的创意与用户体验。
案例部分效果演示：
不管是建立哪一类别的Banner组件库，想要设计好它，那么首先就要清楚的了解Banner中的基本构成以及设计原则，从底层逻辑出发去构建Banner组件库，我构建Banner组件库的思路主要依据以下四大知识点：
Banner层级拆分的主要目的是为了组件的设定，我们通过层级拆分可以有规律的把每一个层级都设置为可替换选项，在Banner组件库中可分为5个层级：
案例：
在组件化的Banner设定中，我们可以用点、线、面来划分画面的整体层面，我们要罗列出哪些层级是用点来表达，哪些层级是用线或面来表达，这样不仅有利于组件库的快速建立，也有利于Banner整体画面的视觉表达。
点、线、面是相对存在的，点可能在画面中成为线、面，线也可能在画面中成为点、面。
“点”越大就可能会变成“面”，“点”发生规律性变化也可能成为“线”。
当“线”在画面上显得短小时，可以把它看成“点”，当把“线”加粗一定程度，那么我们就会把它看成“面”。
当“面”成为未封闭状态时就会成为“线”，当“面”在画面中的比例缩小时我们可以把它看成“点”。
我们在组件Banner时要事先把层级的点线面归纳好，这样才不会在我们设计相同元素时出现杂乱的现象，层级与点线面的常规关系图如下（这样的常规组合关系有利于建立组件库）：
需要注意的是在Banner组件库中点缀层与标签层并非一定要存在于Banner中。
Banner的版式复杂多样，而我们的组件库想要达到轻量化，所以更适用于下面三种常规的版式，如下：
组件库的建立必须遵循Banner设计五大原则：对齐、统一、对比、留白、结构平衡。
对齐
Banner的内容都要有一个对齐的准则，特别是文案层面，每个元素都有自己应该处于的位置，要有秩序化，才有舒适感。常见的对齐方式有左对齐、右对齐、居中对齐，建议一个板式只使用其中一种对齐方式。一个小小的Banner版面，如果使用了多种对齐方式，实际上在用户看来这些信息都是零散的，增加了认知成本。
统一
字体以及字体颜色最好不超过两种，内容元素设计风格也必须一致，太多容易导致内容杂乱，干扰过强。
对比
了解各项信息的权重大小，重要的信息要加强显示，次要信息可以弱化。
留白
要为Banner留出一定空间，让Banner多一些呼吸感，这样也更容易聚焦重要信息。
降噪原则
在Banner设计中不要使用过多的字体、颜色或者过于复杂的图形，这种不断做“乘法”的行为，实际上是在增加用户认知的“噪音”。
字体使用规范
在字体的使用中，我们要确定字体类型以及字体的大小。
颜色使用规范
为了保证Banner拥有较强的适应性，我们可以不规定精准颜色，用颜色明度的使用区间来代替。(颜色规范仅限于主色调，并不包含特殊用色：如标签、点缀元素)
版式说明
制定版式的整体尺寸、元素间距、排版、字数限制。
设计师应用的Banner组件库可以用Sketch制作，也可以用Figma制作。
如果是用于外包设计或公司设计师仅有一人，那么建议用Sketch制作；如果设计团队人数较多，那么建议用Figma，我这里就用SKetch给大家讲解一下制作流程。
第一步：根据层级与点线面设计Banner中的元素
第二步：把每一层级的元素组件化
在Sketch中只用选择想要组件的图层（或组），点击按钮即可立即生成组件，如下图：
在组件层级时我们需要注意从哪里开始，到哪里结束。例如我做的这个宠物Banner案例，第一层是Banner样式切换，接着才是样式里面的层级切换，并不是把内部所有层级都组件完后就结束了，可能层级中还存在更多的小组件切换，比如在样式2中我没有把点缀层合成一个组件切换，而是分为三个组件切换，甚至在三个切换里你还可以设置它们的颜色切换，全部设置完后这样才算真正的组件结束，下面是我组件的层级图：
第三步：设计可替换组件
在完成元素组件化后，我们就可以在组件库里添加更多可替换组件的样式，添加方式如下图：
当把可替换的组件全部设计完后就可以使用了，如果发现内容不够用还可以往内部再次添加，下面是Banner样式1的切换效果展示：
Banner样式2的效果展示：
注意要点：
运营人员应用的Banner组件库的建立需要用到的软件是PS与Excel。
在设计这类组件库时我们一定要多从操作人员的角度出发去设计，最简单化，下面案例来自于之前在老东家做的PS组件。
第一步：根据层级与点线面设计Banner中的元素
第二步：设计可替换元素组件
在设定前我们需要了解以下几点知识：
通过以上4点可以得知我们需要设计的元素仅仅只有背景图片，而其他元素可以通过变量来达到效果，下面是设计的4张不同颜色的背景替换图：
第三步：定义变量元素
只是给需要变量的元素打标签，具体该如何变量在第四步
定量步骤：选择想要定量的图层-图像-变量-定义
注：PS会自动识别定量元素，如果是组，那么只有可见性选项（可见性选项的意思就是可显示可隐藏）；如果是图片，则会多出像素替换（替换图片）；如果是文字则会有文字替换（替换文字）
在定义时为了避免操作错误，定义名称就为图层名称，定义完成一个就按“下一个”按钮，直到全部定义完成再按“确认”按钮，案例中的Banner一共定义了6个元素，分别为商品图（像素替换）、商品名（文字替换）、原价（文字替换）、优惠价（文字替换）、特价标（可见性）背景图（像素替换）
第四步：制作Excel表格
我们所有的数据修改都是在Excel里面进行的，Excel表格制作非常简单，第一排为定义的名称，我们只需把刚才定义好的6个名称输入到表格的第一排。
如上图，建议大家多加入一个编号定义，在PS里把编号定义的图层隐藏就行了，目的是为了选取数据组时更直观，操作如下：
除了第一排，下面的排列都是输入性定义，如果要改变商品名的文字，就可以在下方输入修改的文字；
如果要替换图片，就要输入替换图片的名字及后缀，仅支持png与jpg格式的图片，并且图片必须与源文件在一个文件夹内。
如果要显示或隐藏某个元素，那么就可以输入大写的“TRUE”或“FALSE”。
当把表格信息都填完后，最后一步就是把表格存为.csv格式。（注：.csv文件必须与PS源文件、图片文件存在于同一文件夹内）
第五步：导入操作
当全部设定完后，我们就可以在PS内导入切换不同的数据应用。
操作路径：图像-变量-数据组-导入数据组-选择数据-应用-确定
这五步下来我们的Banner组件库就顺利完成了！
特别提醒：避免运营人员操作失误，建议把PS内部的所有图层锁定。
第六步：培训运营人员
通过上面的组件建立，运营人员只需添加Excel文件的子列表，并在PS选中导出即可完成操作，可以让运营人员把PS看成图片导出工具，可以非常轻松的完成。（机械化流程）
因为考虑到运营人员可能无法理解设计逻辑，所以很可能会出现操作失误或不知道怎么操作的情况，所以建议通过直播以及视频文件、PDF文件、GIF文件来引导运营人员操作。
下面是员工PDF操作步骤图示：
Sketch组件库源文件：
PS、Excel组件库源文件：
下载链接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取码：e3li
文章来源：优设网 作者：黑狮力
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当今是色彩的世界，物体颜色的不同，带给我们的情绪也截然不同。想要掌握颜色，首先就要研究颜色的本质。
颜色分为光学三原色和颜料三原色。
1. 光学三原色
光学三原色由：红、绿、蓝组成。
色值分别是：
2. 颜料三原色
颜料三原色由：品红、黄、青组成。
色值分别是：
理论上，原色可以调制出绝大部分的其他色，而其他色都调不出原色。
那么，这两种有什么区别呢？
3. 区别
光学三原色和颜料三原色最主要的区别就是他们的混合原理不同，分为相加混色和相减混色。
光学三原色为相加混色（可以理解为光的叠加），混合后颜色的明度提高，三色混合即为白色。
相反，颜料三原色采用相减混色（可以理解为光的吸收），混合后颜色的明度和纯度都会下降，三个混合即为黑色。
在设计中我们可以区分为 RGB（光学三原色）和 CMYK（颜料三原色）。
RGB 模式本质上与 CMYK 模式没有区别，只是产生颜色的方式不同。显示器采用RGB模式，就是因为显示器是电子光束轰击荧光屏上的荧光材料发出亮光从而产生颜色，当没有光的时候为黑色，光线加到最大时为白色。而打印机呢？它的油墨不会自己发出光线。因而只有采用吸收特定光波而反射其它光的颜色，所以需要用减色法来解决。
运用场景：
冷暖色由三种原色、三种间色和六种复色组成的系统就称为十二色环，从紫色至黄绿为冷色，黄色至紫色为暖色。
冷色可以让人联想到海洋、天空、雨雪等，让人产生理智、寒冷、沉寂的感觉。
暖色可以让人联想到火焰、太阳等，让人产生温暖、热情、开放的感觉。
实际案例中，冷暖色调的搭配，直接决定了观赏者的第一感官。观赏者第一眼的情绪感触，就由此而来。
颜色的三个属性分别为：色相（Hue）、明度（Brightness）、饱和度（Saturation）。
1. 色相
色相指的是这些不同波长的色的情况。波长最长的是红色，最短的是紫色。
色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉。色的不同是由光的波长的长短差别所决定的。把红、橙、黄、绿、蓝、紫和处在它们各自之间的红橙、黄橙、黄绿、蓝绿、蓝紫、红紫这 6 种中间色——共计 12 种色作为色相环。在色相环上排列的色是纯度高的色，被称为纯色。
2. 明度
明度是表示色所具有的亮度和暗度。计算明度的基准是灰度测试卡。黑色为 0，白色为 10，在 0~10 之间等间隔的排列为 9 个阶段。
色彩可以分为有彩色和无彩色，但后者仍然存在着明度。作为有彩色，每种色各自的亮度、暗度在灰度测试卡上都具有相应的位置值。彩度高的色对明度有很大的影响，不太容易辨别。在明亮的地方鉴别色的明度比较容易的，在暗的地方就难以鉴别。
3. 饱和度
饱和度是用数值表示色的鲜艳或鲜明的程度。
饱和度为 0 时，就是黑白灰。有彩色的各种色都具有彩度值，无彩色的色的彩度值为0，对于有彩色的色的彩度（纯度）的高低，区别方法是根据这种色中含灰色的程度来计算的。
1. 单色
单色指的是某个颜色纯度的变化，就是在原有色上叠加 10%~90% 的白色/黑色得到的一个颜色。
这种方法运用到产品中，会给人一种朴素、低调干净的感觉；同时，也会给人一种单调的感觉。单色的颜色搭配适合沉浸式的产品中使用，不会因为色彩而打乱用户的体验。
产品案例：MUJI
2. 互补色
互补色是指在色相环上对立（180°）的两个颜色。
色彩中的互补色有红色与绿色互补，蓝色与橙色互补，紫色与黄色互补。
补色并列时，会引起强烈对比的色觉，会感到红的更红、绿的更绿。
互补色是很难把控的一种色彩搭配。由于色彩冲击力极强，用好了可以达到视觉峰值，反之则会很“村气”
3. 邻近色
邻近色是指在色环上相邻的两三个颜色，在色相环上相距 60°
它们色相彼此相近，冷暖性质一致、色调统一和谐、感情特性一致。邻近色是选择相近色彩时很不错的方法，可以在同一个色调中制造丰富的质感和层次。一些效果不错的色彩组合有蓝绿色、蓝色和蓝紫色，还有黄绿色、黄色和橘黄色等。
4. 对比色
对比色是人的视觉感官所产生的一种生理现象，是视网膜对色彩的平衡作用。指在相环上相距 120° 到 180° 之间的两种颜色。
对比色能使色彩效果表现更明显，形式多样，极富表现力。需要注意的是，互补色一定是对比色，但是对比色不一定是互补色。
1. 光源色
物体只有在光的照射下我们才能看到他们的颜色。
发光体发出的光，形成了不同的色彩，我们将这些色光称之为光源色。
2. 固有色
固有色就是我们平时看到物体的颜色。
比如在正常光照下我们看到一个物体是红色，那他的固有色就是红色。
3. 环境色
环境色是物体周围环境的颜色。
环境色对我们看到物体颜色的影响非常大。大家平时肯定也遇到过一个物体在不同的光照下，呈现出来的物体颜色也不尽相同。比如，一个在蓝色天空下的苹果会呈现部分淡蓝色，就是环境色的影响。
1. RGB
RGB 色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB 即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
2. HSB
在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示明度。
3. HSL
在 HSL 模式中，H(hues)表示色相，S(saturation)表示饱和度，L（Lightness）表示明度。
4. HSB 和 HSL 的区别
HSB 和 HSL 都是表示色相、饱和度和明度，不同的点在于应用开发中，不同开发语言下可调节的明度值名词不同，所以这两个格式不用过于纠结哪个用的更多，具体使用中就是需要哪个用哪个。
1. 黑色
黑色代表着品质、权威、严肃、稳重、高级。它是所有颜色中最有力量的，黑色+金色凸显高贵感，黑色+红色凸显时尚感。
黑色是永不过时的颜色。
2. 白色
白色代表纯洁、信任、朴素、简单。黑色和白色经常会被用作无色，这两个颜色没有色彩倾向，属于中性色，所以常常被忽略掉。在界面设计中，白色常常被用作背景色，提高画面明度，凸显其他内容，提高文字的易读性。
3. 红色
红色代表喜庆、热情、奔放、自由、欢乐。它是很强势的颜色，一出现就会使人热血沸腾，常常出现在电商活动中，让人有购物的冲动。同时，红色也有一种警告的含义。一些产品高危操作的 Button，都是用红色来提醒用户。
4. 蓝色
蓝色代表冷静、商务、未来、科技、安全，它是一种比较理智的颜色，在色彩心理学的测试中发现，几乎没有人对蓝色反感。主色调用蓝色的太多了：知乎、Twitter、Behance、钉钉等，蓝色的运用给用户一直安全、放心的感觉。
5. 黄色
黄色代表辉煌、高贵、信心。它的明度极高，虽然没有红色给人那么强烈的感官，但是黄色给人一种警示的意思。黄色经常会以高贵的含义被用到：网站的 VIP。
6. 绿色
绿色代表健康、活力、生命、安全、和平、宁静。绿色可以治愈心灵，当你不开心的时候，看一下绿色的东西，会让你的愉悦值增加。它在生活中用到最多的含义是安全：绿色通道、绿灯等。
7. 紫色
紫色代表浪漫、时尚、性感、梦幻、创造力。紫色+粉色经常在女性化妆品被用到，紫色在自然生活中很少看到，所以也有一种稀有、高贵的感觉。
1. 数量
一个页面中尽量不要超过 3 种颜色（黑白除外），颜色过多会让用户的兴奋值上升，不易长期查看。
2. 统一性
每一个产品都有自己的主色调，所有的页面的色彩搭配都要和主色调呼应，主色调的合理运用直接关系到用户对产品的信任值。同一组件、场景中，颜色使用要保持一致，切忌“自由发挥”，毫无规范可言。
3. 60-30-10原则
60%、30%、10% 的原则，是达到色彩平衡的最佳比例。在 60% 的空间使用主色，可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个 App 的视觉焦点和色彩关系；30% 的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；最后剩下 10% 的空间为点缀色，可以用在一些不太重要的元素又需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。
4. 颜色禁忌
禁用纯黑、纯灰，纯黑和纯灰会使用户陷入负面情绪中，可以在黑色和灰色中加入一些色调，让颜色看上去更柔和，另外纯黑色看时间久了会使人疲惫，在实际产品中，也很少有用纯黑的。
5. 文字中的使用
超链接颜色用蓝色，为什么呢？
最早期电脑中用的是深灰色背景+黑色字，那时候能用非黑色最深的颜色就是蓝色，所以这个习惯一直延续至今。这种用户习惯非常一致的情况下，尽量不要去改颜色，因为改成别的颜色就会颠覆用户认知，学习成本就会增加。
6. 卡片阴影
一定不要用纯黑色阴影，阴影的颜色会受到环境色和固有色的影响，对于有颜色卡片的背景，尽量使用比卡片更深的同色系颜色来调阴影，会使得阴影更干净、整洁。
1. Wbgradients
网站链接：https://webgradients.com/
Wbgradients 是一个在线调整渐变色的网站 ，可以根据你想要的调整效果，同时支持复制 CSS 代码，可以更好的与开发对接。
网站链接：https://www.grabient.com/
Grabient 是一个非常漂亮且实用的渐变配色网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。
3. Color Grid
网站链接：https://www.0to255.com/740941
该网站随意选色值，它自动换算出已选色值的 32 种明度色值，简单易用。
4. Eva Design System
网站链接：https://colors.eva.design/
Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。
5. Color Hunt
Color Hunt 是开放的调色板集合，可以添加到 chrome 浏览器，方便随时随地使用。
文章来源：优设网 作者：友设青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前文的原子设计中我曾经讲过，原子是构成所有元素的最小单元，没有办法再被细分。它通常对应着产品设计中的通用样式及构成组件的最小颗粒。而颜色，作为整个设计系统中极为重要的原子之一，在心智模型中占据了关键的地位。
我们看到红色能够感受到热情、兴奋和危险，看到绿色时往往就感受到安全、自然和平静。可以说，颜色调动我们的情绪只需要一瞬间，而且它在我们的记忆中可以停留更久。
接下来，我结合公司目前的业务CROV Dropshipping（以下简称DS），来进行色彩体系的探索，以输出一整套的色彩方案。但愿这次探索能够给予各位一点启发。
大纲走起：
CROV DS是针对美国市场的线上一件代发平台（类似阿里巴巴的一件代发业务），属于跨境电商B2C行业。平台帮助用户无需任何初始成本、无需囤货即可顺利开展电商之路，时间灵活可控，让用户专注于销售本身。
目前CROV DS业务日益繁杂，但是除了品牌色之外，辅助色的定义过于随意。而且随着业务场景的扩展，临时增加的颜色很容易被遗漏在某个不知名角落的画板中，导致一次性用色的风险。（tips：一次性即前一篇我所讲到的用完即扔、未被复用的设计）
而且用色本身的随意也导致研发还原结果的不统一，一处地方色彩各异的现象比比皆是。
因此，我们需要基于我们自身的业务特征来产出一套足够完善的色彩体系，让业务从用色上达成基本的一致统一。
我们设计师在定义颜色时，更多的是直接在色板上进行取色，但这样的取色方法存在诸多弊端。
增加决策
可能很多设计师选色时会有这种情况，一会觉得这个颜色脏了，一会又觉得那个颜色太刺眼了，有时候完美主义作祟，为了得到一个满意的颜色甚至花上大半天。这种情况尤其在多色搭配时更为严重。
其实这和不用网格系统来布局是一个道理。（注：网格系统是一种能够极大提升布局效率的方法，后面会讲～）
色板中取色的范围趋近于无穷。如果将HSB模式下的单个H、S和B作为一个最小单元格，那么我们可以选择的格子高达数百万个。颗粒度过细的情况（其实根本就没有颗粒度）导致我们在取色时往往会被迫进行反复的微调和尝试。
缺乏秩序和逻辑性
直接在色板中取色主要依赖的是”直觉“这种相对感性的存在。
比如一个按钮的状态可以包括normal、hover、pressed、disable等多个状态，如果我们仅仅靠自己的直觉自由调整明度和饱和度，最后的配色方案其实缺乏内在的逻辑性和秩序性。
难以复用
对于B端这些偏后台工具、场景复杂的业务，颜色运用得往往也比较广泛，如果我们没有一套完善的色彩体系，那每次一遇到新的项目及业务场景需要用到新的颜色时，之前定义的颜色难以复用，导致我们需要重新定义颜色。而且这种相对主观的方法也缺乏说服力，难以体现专业度。
而如果设计师提前定义好一套色彩体系，一方面只需要在对应的色板中选择即可，大大减少了设计决策。另一方面色彩体系所提供的不同色彩梯度也便于各个需求、业务场景的复用。而且色彩体系富有逻辑和秩序，因此从中挑选的颜色也同样是这样，显著降低设计师依赖”直觉“所带来的主观和不可控。
Alipay Design团队提过：
以同色系配色为主导，多色搭配为辅。
同色系为统一的色相，使用中可以加深品牌色的感知，可以让界面更有层次，同时可以让界面保持色彩上的一致性；由于业务的多样化，我们需要多色搭配为辅；多色的辅助颜色，也可称之为功能色，可设定不同的任务属性和情感表达；再搭配中性色黑白灰，赋予更多的变化和层次。两种配色通过主次、使用比例，可灵活运用在业务的各个场景中，具有非常好的延展性。
接下来我以DS项目为例进行色彩体系探索——
首先，所有的色彩模型统一采用HSB模型进行，正如Ant Design设计团队说的那样，这个模型利于调整色彩时对颜色有明确的心理预期，同时便于团队沟通。
这里再简单普及下HSB模型。H指的是色相（Hue），S指饱和度（Saturation），B指明度（Brightness）。S控制颜色混入白色的量，S值越高，意味着混入白色的量越少，颜色也就越“纯”。B控制颜色混入黑色的量，B值越高，意味着混入黑色的量越少，颜色也就越“亮”。（通俗点说，它们分别代表了明色区域和暗色区域）
Crov Dropshipping基于其时间自由灵活、可兼职副业、成本风险低的业务特征，使得对应的用户群越来越多的集中在年轻一代的e-tailer（线上零售商）当中。他们不同于我们常规认知里那类传统的retailer（线下实体零售商），大部分的DSer拥有自己的事业和工作，为了赚取外快，将其当做自己的副业。因此，年轻化是这类用户群的主要标签。
所以，我们采用了高饱和度、偏向蓝色色相的紫色，来作为crov dropshipping的品牌色。它的HSB值是 （250，80，100）。
为了覆盖掉Crov DS本身复杂的前后台业务场景，需要额外搭配各类型的辅助色。我们想要提取24类色相，所以直接通过360/24得出了色环中每类色相的基本角度15°。
因此，这里以品牌色色相为基础，在HSB 360°色环中，对色相（H）正向和反向各自±15°，饱和度（S）和明度（B）保持不变，得到24色的色环彩带。
后续我们的颜色体系就在彩带上的24个颜色上面进行提取。
品牌色同色系是指，根据品牌色不同的饱和度和明度变化，生成不同深浅、不同明暗的一组颜色。同色系配色不仅传达了品牌性，多个梯度的变化也能够适应及通用尽可能多的业务场景，也便于多信息的层级划分。
而同色系配色的输出则遵循了antDesign发明的tint/shade 色彩系统算法，说人话，就是在颜色中分别加入一定比例的黑色或者白色来更科学地生成色阶。
sketch中可以直接将这套算法可视化处理，便于设计师直接生成所有颜色的色阶。需要注意的是明色区（就是上方横向的那块取色区域，白色至纯色时S由0过渡至100）和暗色区（右侧纵向的取色区域，纯色至黑色时B由100过渡至0）遵循了两种不同的规则，具体规则见下：
当S饱和度变化时（明色区域），S值以S/5的结果值为一个增量进行递减，B值以(100-B)/5的结果值为一个增量进行递增。我们品牌色的S和B分别是80和100，所以这里的两个增量分别是16和0。
品牌色在明色区的下两个色阶对应的HSB参数就是（250，64，100），（250，48，100），以此类推。
而当B明度产生变化时（暗色区域），S值以(100-S)/5的结果值为一个增量进行递增，而B值以B/5的结果值为一个增量进行递减。得出的两个增量分别为4和20。
品牌色在暗色区的下两个颜色对应的HSB参数即（250，84，80）、（250，88，60），剩下的所有颜色以此类推。
根据这两个定义规则推导出全部不同梯度的色阶，我们就可以将其作为品牌色同色系配色。
我们使用品牌色来传达品牌价值，还需要辅助色来满足多样化业务场景的需要，对用户进行不同的情绪引导，同时也可以缓解用户对单一主色产生的视觉疲劳。
辅助色的定义就可以直接用到我们之前基于品牌色所衍生出的24色“彩带”了。我们通过色环形式，来迅速得出品牌色的同类色、类似色、邻近色、中差色、对比色和互补色。
结果见下：
首先，由于相差15°的同类色与品牌色差距过小，色相对比感微弱，传递的调性过于相似，所以这里直接pass。而邻近色生成的粉色和青色在界面中基本不会作为功能色使用，这里同样直接舍弃。
类似色
类似色即色相差在30度左右的颜色，属于较弱对比色。我们基于品牌色的色相各自±30得出类似色。由于H280的类似色调性与品牌色类似，并且色彩体系中需要一个典型的冷色来覆盖一些场景，所以这里使用了H220的颜色作为冷系的辅助色。
中差色
中差色即色相相差90度左右的颜色，属于中等对比色。H340偏粉，与常规红色相差过多，所以这里借鉴了alipay的辅助色校正原则“色相差值不能超过15”，对H340进行了色相校正，调整至H355。
对比色
对比色即色相相差120度左右的颜色，属于强对比色。最后得出的H130调性与中差色的H160过于类似，直接舍弃。H10与H340调性类似，但是可以向橙色系发展，所以微调到同类色进行色相校正。
互补色
互补色即色相相差180度左右的颜色，属于高强度对比色。最后得出的H70偏绿，这里同样进行了色相校正，将其调整为H55。
最后，得出了共计5种辅助色。不过这些辅助色并不能直接使用，还需要进行感官明度的校正。
感官明度校正方法来自支付宝设计团队，这是是确认辅助色的最后关键一环。每种颜色都有属于自己的“感官明度”，即发光度。品牌色即辅助色的发光度不一致，就会导致视觉上会有明显的明暗差别。所以，我们需要通过发光度来进行最终的颜色校正。
明度较高的灰色意味着高发光度，明度较低则意味着低发光度。保持品牌色发光度不变，我们对其他辅助色进行微调。
我们只需要将那些视觉明暗差距明显的颜色进行调整。注意，并非所有的颜色都要调整到品牌色的感官明度，这些值仅仅是一个参考。最终的校正依然取决于我们的视觉！比如黄色感官明度本身很高，但是视觉缓和、不像绿色那么刺激，所以基本无需校正。
最后得到校正后的如下辅助色。蓝色、绿色、黄色以及红色在界面中可以作为功能色使用，可以分别代表常规、成功、警告和报错状态。而橙色则可以用作突出类的提示信息，它比bold字重要高出一个层级。
与品牌色一样，使用tint/shade规则推导出全部辅助色不同梯度的色阶。具体过程不再赘述～
CROV DS的文本色并非纯粹的中性色，我们通过加入一点点品牌色来让文本呈现色彩倾向，以此提升页面的活力及年轻感，同时也可以让界面更加耐看，减缓B端产品长期使用时的视觉疲劳。
具体方法就是，分别在#222、#555、#888、#b3b3b3的一、二、三级中性文本色代表的色块上，覆盖一层10%透明度的品牌色。最后得出了四个层次的文本色。当然，中性文本色你也可以参考antDesign中通过透明度进行定义的方法，不一定需要按照某个具体色值来。
我们必须要承认的现实是，设计师所定义出的色彩在mac上看上去是很出彩，但是这并不能代表所有用户。也许在用户中依然有一部分人群，他们的显示器配置低和老旧。而且我们无法判断用户们的使用环境，有可能是在刺眼的阳光下、有可能是在昏暗的环境中。如果色彩不去做可用性测试，在很多的情况下存在体验降低的风险。
而WCAG（Web Content Accessibility Guideline，Web内容无障碍指南）解决的正是这些障碍问题。WCAG中的POUR无障碍原则包括了：易于感知的（Perceivable）、便于操作的（Operable）、稳定理解的（Understandable）、稳定耐用的（Robust）。
而颜色则正是对应了易于感知的这一无障碍原则。网站中的文字和图像应该具备足够高的色彩对比度，使之更易被用户感知识别。
WCAG颜色对比度无障碍的两个标准分别为：「1.4.3条例：最小对比度标准」和「1.4.6条例：加强对比度标准」，分别对应着AA级和AAA级。
AA级的定义为：普通文本的视觉呈现与背景至少要有4.5：1的对比度，大文本与背景至少有3：1的对比度
AAA级的定义为：普通文本的视觉呈现与背景至少要有7：1的对比度，大文本与背景至少有4.5：1的对比度
（这里的大文本即≥18pt常规字重的文本或者≥14pt加粗字重的文本）
这两个条例被大厂们广泛运用到了产品的颜色标准当中。
比如MD规范中的文本移动性规范标准中的数据就是来自WCAG的1.4.3条例标准。
同样，阿里巴巴在前不久发布的B-Design中的无障碍色acs指标和WCAG本质上也是一样。
1. 颜色对比度验证
那该如何验证我们的颜色符合这俩标准呢？
easy。这里直接上个网址，https://contrast-ratio.com/#%23373247-on-%23fff
我们分别在背景及文本录入色值，即可得到最终的对比度数据。比如我录入了白色和一级文本色数值，最后的12.28即两者的对比度，嗯，达到了AAA级标准。
一样的步骤，分别测试了其他文本色的对比度（产品无暗色模式，所以此处仅验证白色背景下的颜色对比度），分别达到了7.59、4.71和2.38。可以看出除了2.38外，其他文本色的对比度均符合可见度标准。
不过WCAG中指出，一些特殊情况下的文本无对比度的限制，其中就包含了表单字段的占位符（placeholder）。而2.38对比度对应的文本色主要用于暗提示，因此这种情况就可以无视掉了~
色彩体系的初步探索到此结束了，不过篇幅原因并没有面面俱到，比如渐变色、实际落地效果等等。另外，一些地方我自己也在摸索阶段，因此很多分析也可能存在不足，文章仅作参考。
文章来源：优设网 作者：转行人的设计笔记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
孙子兵法有云：知己知彼，百战不殆。知天知地，胜乃不穷。
“知己知彼”说明了解自己和竞争对手的重要性，“知天知地”则强调了了解行业竞争环境的重要性。能通过竞品分析达到知己知彼、知天知地，是设计师的必备技能。
竞品分析是对市场上存在直接或间接竞争关系的优质产品，进行分类、组织、对比、刨析，总结竞品、以及自己产品的优势和不足，为下一步决策提供帮助。竞品分析维度包含但不限于市场调研、盈利模式、战略定位、产品功能、交互流程、页面框架、视觉表现、文案内容、运营方式等。
竞品分析和市场分析、产品分析、产品体验分析的关系如下：
对设计师来说，竞品分析在了解行业现状、熟悉功能、了解竞争对手、了解用户习惯、明确自己产品定位等方面都有帮助，具体如下：
竞品分析有这么多好处，那么设计师该如何做竞品分析？
“知己”即了解自己产品处在哪一个阶段，有什么问题，接下来打算怎么做或达成什么目标。然后根据产品当前问题确认“要通过本次竞品分析获得什么？”。竞品分析一定是为自己的产品服务的，是通过了解竞品来达成自己产品的某种目的。不能盲目地为分析而分析。
大多数工作流程中，设计师进行竞品分析一般有以下几种场景：
场景一：在产品需求确认之前，通过竞品分析对某功能进行调研，了解行业中该功能的具体设计。
如设计师了解到产品计划对帖子详情页面进行改版，产品需求还没确认。此时进行竞品分析的目的可以是：了解竞品帖子详情页面的设计共有哪几类表达方式，每一类表达方式的优缺点各是什么。
场景二：.在产品需求确认之后，通过分析产品需求，推导出设计目标。此时竞品分析是为产出能满足设计目标的方案服务的。
如产品的设计需求是“提高帖子详情页的点赞数、留言数、评论回复数”。此时推导出的设计目标可能是“营造详情页互动氛围、提高回复评论的效率、减少操作步骤”，对应的竞品分析目的可以是“总结竞品营造社区互动氛围、提高活跃度的方式。掌握竞品回复评论功能中操作步骤少、效率高的设计方式及总结背后原因。”
场景三：产品大改版、重新设计，或者孵化新产品时，通过竞品分析对行业内的产品有一个整体的了解，从而得出自身产品的差异化定位。此时竞品分析的维度会更多元：可以从用户体验的5个要素逐级进行分析，或使用SWOT分析、波士顿矩阵分析等。
场景四：竞品的动态跟进，主要是跟进竞品的迭代情况，以保持长期的“知彼”状态。可以定期（如2周或一个月）对竞品迭代信息进行一次整理。App Store或七麦数据等网站可以查到竞品每个版本的迭代内容。
竞品可以选择直接竞品或间接竞品。直接竞品指市场环境、商业模式、目标用户、产品功能都相似的产品。间接竞品可以是市场环境和目标用户相似，但商业模式和产品功能当前不同、未来可能相同的产品。如果只对产品交互流程、页面框架、视觉表现等进行分析，还可以选取功能相似，或者目标用户相似，用户体验好的产品进行分析。
建议通过易观千帆、七麦数据、App Annie等平台了解竞品的数据情况，选取数据排名靠前的产品进行分析。
了解竞品的定位、公司战略、盈利方式和用户画像，有利于我们理解竞品功能的背后的逻辑，利于我们分析竞品为什么设计成这样。竞品分析不只是分析表面看到的功能，还要分析更深层次的原因。
1.了解竞品定位、公司战略途径有：竞品官网、维基百科、拉勾网、天眼查、IT桔子 、Questmobile、App Annie等
2.了解盈利方式的途径有：36 氪
2.了解竞品用户画像的方式有：竞品官网、移动观象台、百度指数、艾瑞咨询等网站。
竞品分析的目的不同，选用的竞品分析方法也不同。以下介绍几种常用的竞品分析方法：
竞品画布是一个简易的竞品分析模板，用一页纸包含了竞品分析的9大问题，如下图。
适用条件：
1.竞品画布可以用在竞品分析之初，用来梳理竞品分析的思路，是竞品报告的MVP（最小可用产品）2.竞品画布包含竞品分析的6个关键步骤，可以让新手快速上手竞品分析。
操作步骤：
按照竞品画布模板上的问题依次的分析解答。竞品画布中包含了SWOT分析，注意优势、劣势是对产品或公司内部的分析，而机会和威胁是对外部环境的分析。另外，在分析第3点分析维度时，建议结合分析目标说明选择这些方式的理由。
优点：竞品画布相对其他方法来说视角更全面，可以结合其他分析方法一起使用。
缺点：对UI/UE来说，针对性不够强。
矩阵分析法又称知觉图，主要是通过二维矩阵分析2个关键要素，以了解自己和产品的定位及竞争优势。
适用条件：
矩阵分析法主要用来帮助产品做2个关键要素方面的定位决策。如自营电商平台可用矩阵分析法来决策平台定位是售卖高价格、优质的商品平台（如寺库），还是售卖超低价格、质量一般的商品的平台（如拼多多）。以及帮助产品评估自己的竞争优势，判断产品是否需要重新定位。
设计师还可以用矩阵分析法分析竞品的视觉风格，以辅助定位自身产品的视觉风格。如下图为视频app logo风格的矩阵分析
操作步骤：
（1）确定两个关键竞争要素。这两个竞争要素应该是用户最会关注、会影响用户决策的关键属性，如价格和配置。
如果是设计师用矩阵分析法来分析竞品视觉风格，可选取两对意思相反，对视觉风格有较大影响的关键词。如严肃—活泼、扁平—拟物
（2）绘制横纵坐标轴，把两个对关键竞争要素作为横坐标和纵坐标填入。
（3）针对竞品关键竞争要素的表现，把竞品放到4个象限的对应位置。并思考自身产品在4个象限中的位置。4个象限的空白区域可能存在机会，而4个象限中竞品较多的区域，用户群可能更广泛，也意味同类公司更多。
优点：矩阵分析法的优点在于聚焦于关键的两个要素，可以直观的表现出用户对自身产品和竞品在关键要素方面的认知。
缺点：矩阵分析法的缺点是只能从两个要素进行分析。如果要分析多个因素，可以使用雷达图分析法。
雷达图分析法本身是对企业经营情况进行系统分析的一种有效方法。我们可以将它运用到互联网产品用户体验分析上，用图示化的方式对竞品多个维度的优势、劣势作出直观的展示。下图为对母婴类产品拍大肚照上传功能进行的雷达图分析：
适用条件：
分析竞品多个维度的优势、劣势（一般选6个维度分析）。
操作步骤：
（1）定义分析维度
定义分析维度主要是确认从哪几个角度分析具体功能，如选择可用性、防错设计、易懂、一致性等。分析维度的选取也可以参考尼尔森的十大可用性原则，具体选取什么维度应根据分析的功能来定。
（2）对竞品的每个维度进行打分
定义好分析的维度后，我们依次对竞品的每个维度的表现情况进行打分评估，每个维度满分为100分。
优点：雷达图分析法的优点是相对直观、可以分析多个维度的优势，劣势。
缺点：雷达图包含多个维度，每个维度的满分和量级指标是不一样的。需要分析者心中对每一个维度的满分有个大致预期。如流畅度怎么样算90分，怎么样算80分？有可能同一个产品A同学认为流畅度80分，B同学认为流畅度90分，因此分析可能带有一定的主观性。
表格法主要是用表格来统计竞品功能元素的有无。
适用条件：
1.当我们想较为全面的了解一个功能的概况，或较为宏观的把握竞品的现状，可使用表格法。2.当我们思考某个功能元素是否需要保留，可使用表格法分析竞品的做法。
操作步骤：
（1）画出一个N行M列的表格，首列填入功能元素的具体名称，首行填入竞品的具体名称。
（2）对每一个竞品的具体功能元素进行统计，若某元素存在则在表格上对应位置打勾，不存在则空着。
（3）进行分析小结。
如果某一列功能元素所有竞品都打了勾，则说明该功能元素竞品都有，是个普遍元素，优先级可能较高。如果某个功能元素是某个竞品独有的，则可能是该竞品的差异化功能，可能是竞品的特色。使用该方法时要注意：即使是其他竞品都有的功能，自身产品也不一定要有，最终自身产品功能元素如何定，要根据需求来分析，不可盲目照搬。
优点：表格法的优点在于可以清晰展示功能细节的有无。
缺点：如果页面元素过多会显得杂乱，且表格中没有显示元素的优先级。
适用条件：当产品功能较复杂，要统计竞品功能元素、全面了解竞品概括，可用该方法。
操作步骤：在表格法的基础上，将功能点拆解成一级功能、二级功能、三级功能，再进行比较分析和总结。具体形式如下图：
优点：可以清晰的展示一级功能、二级功能、以及功能的子级。
缺点：如果层级太多，或者元素太多表格会比较庞大杂乱。
用户路径分析主要是把自己假想成用户，体验用户操作某软件中某功能流程，并记录过程。如下图是对亲宝宝拍摄照片用户路径分析：
适用条件：适用于要分析某一个功能的具体交互流程。
操作步骤：
（1）把自己想成小白用户，给自己布置一个小任务，并用竞品软件操作，完成这个任务，如完成上传照片。
（2）操作时按照：发现入口—了解功能—操作上传—跟进操作反馈的步骤进行。
（3）记录自己在体验功能时的感受，如哪一个步骤觉得疑惑，哪一个步骤觉得爽。
（4）梳理一下该功能的用户路径，看看产品设置的路径中有哪些是自己在体验时主要操作的，它们是不是该功能的主要路径？哪些是自己体验过程中忽略的，是竞品有意弱化或者其他，并总结结论。
优点：专注于操作流程中的细微体验，聚焦于发现体验问题。
缺点：自己的操作习惯不一定完全代表用户的操作习惯，带有一定主观性。
产品视觉表达分析指对竞品某个模块的页面表达元素进行拆解分析，并总结每种表达方式体现的内容优先级和规律。
适用条件：适用于设计师横向分析某个功能模块的表达方式，及掌握每种表达方式的适用场景。
操作步骤：
（1）将选择竞品具体模块功能进行截图并对比。
（2）提取每个模块的表达元素，并在截图的下方用色块表达提取的元素。
（3）总结共有几种表达方式，每种表达方式的突出对象是什么、适用条件如何、视觉优先级如何。下图为母婴类产品问答功能视觉表达分析。
优点：可以聚焦于单模块的表达方式分析。
缺点：不适用于流程的纵向对比。
5Why分析法又称5问法，即看到一个现象不断的去问“为什么”来寻找根本原因，以找出解决某个问题治本对策的方法。该方法最初由丰田公司提出并在丰田公司广泛采用。
适用条件：
适用于深挖某个功能表现背后的根本原因。也适用于帮助我们在做竞品分析时养成透过现象看本质的思维习惯。
操作步骤：
（1）把握现状。主要是为了确认问题，调查基本的表现、数据情况等。
（2）原因调查。针对明确的问题，探究背后原因。找到浅层次的原因后，再问为什么，找更深层次的原因，问5次为什么。原因调查过程中要注意：一定要以事实为依据去探究背后原因，不可主观臆想。另外，5why分析法也不一定都要问满5个为什么，重要的是通过多次提问探究到根本原因。
（3）实时措施，纠正问题
（4）吸取教训，从源头上预防错误再发生
5Why分析法用到竞品分析上，重点是在前2步，即把握问题和原因调查。我们不一定要完成5Why分析法的所有步骤，但我们要有问“为什么”的意识，不断的问自己竞品这么做的目的和原因。
优点：聚焦现象背后深层原因，利于我们培养透过现象看本质的思维。
用户体验5要素分析指从战略层、范围层、结构层、框架层、表现层5个层级，逐级的去分析。
适用条件：适用于要全面系统地了解某个产品时，对该产品进行全局分析。
操作步骤：
可以按照用户体验要素的5个层级从上到下分析，或从下到上分析。每个层级的分析可以使用不同的分析方法，在此不赘述。需要注意的是使用该方法分析时要避免追求大而全，建议站在竞品分析目的角度，分析时有一定倾向性。
优点：分析较全面，对产品理解会比较深入。
缺点：要真正执行并好不容易，需要对用户体验的5个要素有比较深的理解。
以上就是设计师常用的竞品分析方法的解析说明，我们要根据分析目的灵活选择方法。各方法的对比如下图：
除了对竞品进行分析，我们还要关注竞品的用户反馈，了解竞品用户在使用产品过程中遇到的问题，了解用户觉得竞品好在哪里。要对竞品的问题进行规避，对好的使用体验进行分析并学习借鉴。
可以通过网站 https://appbot.co/ 查找App store上的用户反馈。如下图为亲宝宝产品的用户反馈:
不论使用哪一种分析方法，分析完之后都应输出分析小结。在所有分析结束之后，还要输出整体的分析结论。结论可以由定性或者定量分析得出，可以既包含客观分析的结论又包含主观分析的结论。
客观分析的结论如行业市场布局情况、竞品数据情况、界面操作反馈、产品包含的功能点（普遍功能、特色功能、实现程度如何）等。主观分析的结论如竞品的可用性、易用性、操作体验等。
竞品分析是通过分析竞品，得出要解决的问题的结论过程。所以，了解自身产品当前处在哪个阶段，有什么问题相当重要。通过当前问题推导竞品分析目标，再跟进竞品分析目标灵活运用分析方法。竞品分析方法可以有很多，但确认好分析目标才是关键。
参考文献：
《有效竞品分析：好产品必备的竞品分析方法论》——作者：张在旺
《步步为赢 交互设计全流程解析》——作者：董尚昊
《电商类APP：商品卡片竞品分析》——作者：白鹭漫谈
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
通过这篇文章，你将全面了解2021UI趋势中最热门的Glassmorphism风格
图标在UI设计体系中，是重要......
（此处省略1000字）
直接上图！
上图是我以前绘制的一套图标作品，
感兴趣的话就一起来了解一下我平时是怎么创作一套图标的吧~
1、搜集+临摹+原创
积累素材是设计师必备的“基本功”，同时也是“职业病”。
平时我会有意识的在速写本上绘制一些简易的图标，如果在一些APP中看到比较好的图标，我也会临摹下来。
下面给大家随机展示一些我平时绘制的图标。
除了绘制图标以外，我平时也喜欢绘制一些其他的图案。
2、反复打磨
将绘制好的图标利用电脑矢量化后打印出来，根据打印稿用笔标记出不合理的地方，比如：线条太粗了，重心不稳.......对不合理的地方进行反复修改，再次打印，再修改，循环多次后直到得到自己满意的效果，最后定稿。
下面这幅手绘图就是文章一开始给大家展示的图标成品的手绘最终稿了。
需要强调的是，这一次图标的绘制，有一个特殊的地方，其中一个图标是有实物的。（左：实物图；右：对应图标）
3、图标插件化
最后，将图标上传阿里的iconfont网站，制作成字体图标。
然后将字体图标做成插件（我演示的是ps插件，也可以做成其它xd/sketch/figma插件）
制作过程就是给每个图标赋予关键字，然后利用正则表达式，可以方便的搜索所有图标。
不过这个步骤我就不详细解释了，因为
转自：站酷
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“由理有剧”系列以”我们怎样理解暗黑模式“为开篇，缘由作者正在任职的工作是 TO B 产品交互及界面设计，入职时正值公司整体产品线升级迭代，用户界面从浅色模式向暗黑模式探索的阶段。这个探索阶段面临的本质问题便是“到底什么是暗黑模式”，同时“我们为什么要用暗黑模式”的问题也随之而来。
为了给公司同事阐述这两个问题，作者搜集了大量资料，翻阅了相关产品系统所给出的设计文档，重点围绕“什么是暗黑模式”展开，逐步推敲其中的理论原理，总结出便于理解的文字内容。这样做的目的简单有二，一是与产品、开发、测试方面的同事能够达成向暗黑模式优化升级的共识；二是能够让我们的各个产品线更从容地去拥抱暗黑模式的到来。
文章大纲
1、是什么？
2、为什么？
随着 iOS 13 和 Android 10 的正式发布，“暗黑模式 (Dark Mode)”一词逐渐走入了我们的视野，“暗黑模式是什么？”这个问题也一度霸占了Google搜索榜首。想要深入了解暗黑模式，也许我们可以换一个角度，从用户界面的演进历史中寻找线索，从而帮助我们更好地理解暗黑模式。
作者自从拜读了《苹果三剑客》，对于用户界面的前世今生才有了更深的了解，苹果的产品发展史，某种程度上也可以称为用户界面的演进史。废话不说，下面让我们一起简单聊聊。
计算机诞生的早期，其显示器一直以“暗黑模式”面向操作者，其缘由是早期的显示技术一直被CRT主导，CRT释义为“阴极射线显像管”，在19世纪末被研制出来，因为制造原理相对简单，所以CRT一直是早期电脑显示的主力，但在上世纪80年代之前仅支持单色显示。
下面两图分别为苹果公司于1977至1980年间生产发售的 Apple II 及 Apple III 型计算机
图中显而易见，两款计算机的显示方式均为单调的黑底白字或绿字，呈现出一种“暗黑模式”的视觉效果。苹果公司的 Apple II 和 Apple III 两支产品线一直以这种“暗黑模式”面向用户。这也反映了早期的计算机以输入代码执行数字运算作为主要功能，但是这从另一方面反应出：未来计算机会借助不断成长、成熟的电子技术，必将掀起一场接一场的变革，用户界面也随之不断地革新。
上个世纪80年代之后，CRT彩色显示技术成熟，逐渐流行普及到各个电子行业，但当时主流的计算机操作系统并没有“图形界面”这个概念，所以大部分计算机产品依旧延续了先前黑色背景的显示方式。
直到1983年1月9日，在年度股东大会上，苹果宣布了两款将在未来的计算机行业中占据关键地位的产品：一款叫 Apple Lisa （丽萨，老乔的第一个女儿），苹果第一台（也是全球第一款）基于图形用户界面（GUI）的计算机，也就是 Macintosh 的前身；另一台叫 Apple IIe ，是已获高度成功的 Apple II 系列的新一代进阶产品。
Apple Lisa 向主流个人电脑行业介绍了一种全新的鼠标控制的图形用户界面，宣布向单调的黑白用户界面告别。
运用形象的图标、方便的下拉菜单和重叠的窗口，替代了此前一贯使用的输入文字命令，Lisa的图形用户界面开启了消费者与个人电脑交互方式的革新之路。尽管Lisa存在诸多缺点，如定价过高，功能缺失、运行缓慢等，但它的图形用户界面依然给它赢得一阵喝彩。
Lisa的GUI影响如此深远，以至于诸多电脑制造商纷纷加入鼠标控制的GUI领域，争相模仿。就在Lisa首次亮相十个月后，微软于1983年11月推出了Windows操作环境。（对于此事，老乔总是公开谴责微软的盖茨抄袭他的产品创意，甚至想让盖茨吃官司，两位大佬一直不合也是业界皆知，跑题了...）
///一个有意思的事儿：今年7月份，一位外国的苹果粉在Twitter上发布了一条关于 Apple IIe 型计算机的动态，内容展示了自己使用 Apple IIe 型计算机进行智能化任务的过程，如发送推文、在Evernote中写作、发送电子邮件，甚至控制智能家居（如下图）。要知道，这台计算机生产发售至今已有37年的时间。由此感叹，不得不说苹果对于产品的品控做到了那个时代的。
1984年，苹果发布了个人计算机 Macintosh（麦金塔），Macintosh 延续了 Lisa 的图形界面语言，并向世界普及了图形用户界面（Graphic User Interface）的概念，从而开启了以白色为底色的图形交互时代。
Lisa获得的一些成就在 Macintosh 上体现的淋漓尽致，包括灵活的鼠标、点阵影像图、桌面的布局、形象的图标、相称的字体、屏幕上方的下拉菜单和重叠的窗口，这些也得益于日益成熟的显示技术和不断进步的计算处理技术。形象生动的图形设计和界面交互一直是老乔最引以为傲的杰作，不得不说，老乔对于计算机行业甚至是设计行业都有着极高的敏感度和先于旁人的前瞻性。（当然，这里的主语应该是苹果）
Macintosh 产品的成功，不是苹果一味地迎合计算机消费市场，而是利用创新的方式引导市场，引领计算机行业向人性化的用户界面发展、迈进。
至此，我们也彻底地向“暗黑模式”说了再见，全面拥抱“浅色模式”的到来。
麦金塔搭载的 System 1 打破了字符终端的模式，浅色的界面风格一直持续到 System 6 都没有显著的改变。直到1991 年的 System 7 开始引入彩色，图标也增加了隐约的灰色，蓝色和黄色阴影。System 7 系列中的 7.6 版本正式被苹果公司改名为 Mac OS ，而这一年是1997年。
与此同时，微软的 Windows 从黑屏的 DOS 发展到全屏幕的 Windows 1，再到较为成熟的 Windows 3，最后演变到奠定当今 Windows 界面基础的炫丽多彩的 Windows 95。用那个时代的眼光来看，微软的变化是相当惊人的，微软俨然成为了一匹计算机行业的黑马，一路赶超苹果成为行业霸主，而苹果因为因循守旧，在界面设计上从领先掉到了最后。
此后，从 Mac OS 8 到 Mac OS X Server 1.0 ，苹果一直专注于改善操作系统和优化界面表现，直到2001 年 3 月，经历了四个开发者预览版和一个公共测试版之后的 Aqua 界面终于跟随 10.0 正式发布，发布后改变了人们对计算机界面的印象，在随后的10年里苹果一直沿用这套界面风格。
OS X 系列用户界面较大的更新来自于2007年10月发布的 10.5 Leopard 豹，虽然基本的界面仍为 Aqua 和其糖果滚动条，但新加入了一些铂灰色和蓝色，另外重新设计的 3D Dock和更多的动画交互使得新界面看上去 3D效果更强，此外还改进了 Finder、半透明菜单条并新增了最初只用于 iTunes 的 Cover Flow界面。
整体来说，Mac OS X 10.5 Leopard 豹 这一版本的用户界面相比之前有了翻天覆地的变化，灵活生动的图形语言和交互体验重新得到了用户青睐，苹果也以此，再一次走上了引领潮流之路，使得多彩的“浅色模式”成为用户交互界面的主流。
苹果开创性的界面图形语言也延续到了移动设备领域。
2007年的初代iPhone作为苹果公司第一个移动设备产品（iPhone1代）首次亮相市场，惊艳了整个行业，iPhone搭载的 iPhone OS 和后来更名为 iOS 的系统，延续了 Mac OS 用户界面的设计语言。在历代iPhone上可以看到没有物理键盘侵占空间的屏幕，精美的的方块图案整齐的排列开来，颜色丰富且耐看。
依稀记得当时的我们，还玩着黑白屏幕上的俄罗斯方块，还敲打着物理键盘上的九宫格，挪鸡鸭也表示永不为奴。
2010年堪称iPhone史上最重要的一年，苹果推出了“改变一切”的iPhone 4，并对其用户界面进行了革新。
生动的拟物化设计风格正式成为业界潮流，这也使得UI行业逐渐热了起来，苹果的界面设计规范也顺势成为了主流的移动端设计规范。
苹果以此作为移动端界面设计的基础，沿用到之后的iPhone系列中，期间iOS系统的风格保持依旧，只有 iPhone 5S 搭载的 iOS 7 做出了图标由拟物化向扁平化的改变，但整体都以“浅色模式”作为主流的用户界面视觉模式。
在 Mac OS 的系统上，用户可以通过“通用设置-外观”来对整体界面进行浅色、深色的切换，可以看出，苹果早已把“暗黑模式”纳入到他们的开发队列中，也就是说，“暗黑模式”的概念主要来源于苹果的 Mac OS，这也为“暗黑模式”的正式登场埋下了伏笔。
自从有了这个概念之后，很多网站都为用户提供了“浅色”和“深色”两套界面，便于用户根据自己的习惯或爱好进行切换。在 Mac OS 之后，很多 App 和 Android 定制 ROM 也加入了所谓“深色模式”的支持，其中也不乏 Web 端的网站、系统等。
北京时间2019年6月4日，果粉期待已久的苹果WWDC19如期而至。
发布会上，库克一如既往地优先调侃了Andriod系统一番….（苹果一直喜欢用数据说话，想了解的同学可以回顾一下发布会的视频）
言归正传，在发布了一系列硬件之后，库克终于介绍了大家期待已久的 iOS 13。新发布的 iOS 13，除了提升系统流畅度和增加系统稳定性外，还介绍了其他提升用户体验的优化。
其中，最为引人注目的“暗黑模式”即将亮相于新系统。
发布会表示，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。
“Wow，beautiful！”、“That’s beautiful！”、“That’s so beautiful！”发布会的主持人一边演示使用在暗黑模式下的App应用，一边不由自主地发出赞美。这也许也受到了老乔的影响，犹如在剧场舞台中心的话剧演员，有着一种无可比拟的自信和气场。
但有意思的一点是，主持人展示了 iOS 13 暗黑模式的开发团队合照，从极客穿着到赛博朋克式的暗黑摇滚装扮，这一戏剧性的变化似乎在告诉大家：“玩，我们也是认真的。”
发布会上简单演示了暗黑模式下的漂亮界面，虽然没有过多地阐述暗黑模式的开发细节，但是这标志着暗黑模式“重新”登上历史舞台。
我们从苹果产品发展史中，不难发现苹果对于用户体验的理解是具有创造性的，总是能先于用户发现用户的潜在需求。苹果产品的发展史也可以称之为用户界面的演进史，从早期黑色背景的计算机桌面发展到以浅色为主的用户界面，再到 iOS 13 正式发布的“暗黑模式”，这一过程貌似是在“返祖”，但这些始终是围绕以用户体验为中心的改变和突破。
“暗黑模式”是什么？抛开技术理论，简单理解就是降低用户界面在设备上的亮度，以深色的背景、较低的对比度、灰阶的色彩来呈现用户界面，提升用户使用产品的体验。
上面我们提到了，根据 Apple 官方的说法，暗黑模式可以“改善电池寿命，改善视力不佳和强光下的人的可视性，以及在弱光环境中更好地使用设备”。
我们可以围绕这个说法，结合我们与设备、环境的关系进行探讨。
随着人们对智能设备的依赖性越来越强，设备使用的时间也高频覆盖了白天到黑夜，夜晚使用的频率更是与日俱增，所以暗光环境的使用需求被实实在在地摆到了台面上。以设计职业为例，在阿里巴巴 UCAN 2019 设计大会上分享的数据结果显示：设计师群体夜晚的工作时间通常在5-6个小时…
不是在加班就是在加班路上的我们更习惯于在夜间工作，夜间安静的环境更能让我们专注设计、灵感爆棚。但这也在另一方面表达了我们需要设备更加符合我们在弱光环境下的视听需求。
Dark Mode 由此应运而生，使用暗色模式可以缩小屏幕显示内容与环境光强度的差距，可以保证使用者在暗光环境下使用设备的舒适度。也就是说 Dark Mode 可以降低屏幕的整体视觉亮度，降低对眼睛的视觉压力，再也不用怕夜晚的设备屏幕刺瞎我们的双眼了。
但这里我们要理解一个概念，“降低对眼睛的视觉压力”并不等同于所谓的“护眼”，夜晚使用暗黑模式的设备，实际上并没有改变屏幕的“频闪”问题，所以说用户看屏幕的时候依旧会有视觉疲劳的症状，所以各位大佬还是晚上少看屏幕，多爱护眼睛吧。
想象一下，我们在电影院看电影时，为什么要全场关灯？
甚至有些APP， 在影片的下方也会有一个模拟关灯效果的按钮，来让整个手机屏幕变黑， 只剩下视频画面的部分，这都帮助我们可以更专注、更沉浸在当前的内容下，也就是所谓的“沉浸感”。
这其中的原理就是色彩本身是具有层级关系的，深色会在视觉感官上自动后退，浅色部分则会向前延展，这样对比强烈的层次关系可以让用户更注重被凸显出来的内容和交互操作；尤其在信息负责界面内层级关系的合理拉开对操作效率都有明显的促进作用。
这一点在股票交易软件上就是最好的验证，目前来看全世界绝大多数的股票软件采用的都是负极性，也就是暗色底的设计方式。红色和绿色代表的涨或跌（不同国家颜色表示可能不一样）在这样的深色背景下就会特别显眼，还有一些颜色比如蓝色用于某些数据的走势图。这样的显示帮助用户更好地集中精力在数据获取上，更快地做出决策。
这里所提到的消费品味是来自用户层面的潜在心理需求。
从心理学角度而言，颜色可以影响观者的感受和情绪，这直接影响到用户对于一个事物的判断和选择，这就像我们消费购物一般，有时候我们的消费不完全是为功能、实用性买单，而更加看重的是一个产品的外观属性，当产品的外观符合我们的消费审美甚至超越预期时，我们往往会更快地做出消费选择。
而黑色在积极层面的外在直观表现为高贵、庄严、镇定、神秘，这代表着黑色相比其他颜色存在着更多的可能性，这也造就了黑色成为百搭色，可以作为其他颜色的底色、陪衬色进行使用。暗黑模式也存在同样的心理暗示，沉稳、神秘的黑色会让用户联想到产品的稳定和高级，提升用户的心理信任度，迎合用户的消费品味。
最后才探讨耗电功效方面的问题，算是一个压轴问题了，在某种程度上说，智能移动设备目前最大的矛盾是性能与电池功效的博弈。如果去微博等社交网站进行搜索可以发现，为了省电而使用深色主题或者说黑暗模式的用户大有人在，尤其是一些中高端采用 OLED 屏幕的手机。这是为什么？
暗黑模式省电的作用来源于 OLED 这种材质的特性，这种屏幕经过多年发展如今已经取代了 LCD 在中高端手机上的地位。和 LCD 依赖于背光不同，OLED 自发光的特性使得屏幕能够独立控制单个像素是否发光，也就是说画面越黑，采用 OLED 屏幕的手机就越省电。下图做了一个简单的理解示例，每一列的格子代表亮度，在不同亮度下有相对应的耗电量显示，闪电的亮度代表耗电量的多少。
理解了简单含义，我们再来看一下Notebookcheck上对于OLED功耗的专业研究数据。在使用 OLED 屏幕时，屏幕上显示的内容决定了功耗。当屏幕基本全黑时（OLED <1% White），OLED 屏在任何亮度下的功耗都保持恒定。显示了白色内容的屏幕，功耗曲线会随着亮度提高而逐渐变陡。
上面的可视化图表相对来说可能需要一定的理解时间，让我们翻译简化一下。
上图显而易见，OLED屏幕的耗电量不仅受到亮度高低的影响，关键在于在OLED屏幕显示了什么，有多少区域是浅色甚至是白色的，有多少区域是深色甚至黑色的，深色区域占比越高，相比较之下OLED屏幕也就越省电。这也就证明：OLED屏幕在使用以深色为主的显示模式时，能够降低耗电量，提升供电效率，也就是改善电池寿命。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
让我们先来回顾一下表格的基本构成，最上面的为表头，横为行，纵为列，内容区每一组展示数据区域为单元格。
表格的设计，虽然看似简单，但是作为用户最常用的组件之一，我们需要对视觉和交互的精准把握，才能保证用户在使用表格时更加。
这里我推荐表格的”四维自检法“，对我们设计的表格是否合理，做出一个标准的判断。
分别是：信息降噪、呼吸适中、易读、详情查看。
精简表格内容
当表格的字段非常重要时，一定要将字段全部展示出来让用户更清晰地了解数据。
如果你的用户只需要了解部分字段，那么全部展示是没有必要的，只需展示最重要的字段即可。
自定义字段展示
不同用户想看的的信息侧重不同，有时候我们无法准确判断用户看重哪些字段，还可以让用户自定义展示字段。
精简字段名称
当我们去设计表格的时候，通常会发现表格需要承载的信息量是非常大的，有时候为了表现出字段的准确含义，在定义字段名称时往往会非常的长。但是当这些字段同时出现在一个表格里时，过长的字段名称，又会显得冗余，让本就不大的页面空间更加杂乱。
所以当我们设计表格的时候，我们可以分析字段名称，对字段名称做精简，看看是不是少一个字用户就无法理解字段的含义。
添加字段说明
当字段名称过长，又必须展示，才能有效的理解字段含义时。我们可以定义一个专有名词代替，并且在字段名称后使用添加字段说明的形式，来对字段加以说明。
这样一来用户既可以清晰的理解字段含义，又可以在有限的页面空间下获取到更多的数据信息。
简化表格样式
早期表格的设计，出发点主要以拟物形式，以最接近现实表格的样式去设计。
但是随着互联网的普及度加深，极简的表格设计，使界面更加轻盈，让用户更加专注于数据内容。
去除纵向列的分割线，仅以浅色的横向分割线区分行，但是要注意分割的颜色不能过于浅而缺乏辨识度，部分人群对颜色的辨识度会偏低，显示器的硬件性能也会影响颜色的可辨识性。
减少不必要的颜色区分
表格设计中一定不要使用过多的颜色区做状态或操作的区分，过多的颜色细分会使表格变得更加混乱，影响用户体验。
对状态的区分，仅用轻量的颜色区分即可，操作栏保持主色按钮色。
如何定义单元格的高度
了解单元格的结构，以及实现单元格的基本逻辑，有助于我们更好的去把控我们的设计。
单元格内的可控尺寸包含：单元格高度、文字字号、文字/段落行高、文字上下间距。
我们基于视觉呼吸感，赋予各个元素合适的尺寸，我在这里给出一套参考方案：
如何定义列的间距
首先我们要了解列的两种类型，第一种是定宽列，第二种是自适应列。
顾名思义就是它的宽度是固定的，比如：第一列我们设置宽度为200px，第二列我们设置为300px，五六七列分别设为100px，那么我们这个列表的宽度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的这个列表都会保持这个宽度不变。
就是列会随着分辨率变化而产生宽度的变化，比如：列表有五列，我们定义列表的宽度为界面宽度的50%，假定界面宽度为1200px，那么列表宽度就为600px，而每一列的宽度则为120px。此时我们将界面的宽度缩小到600px时，那么列表的宽度就为300px，而每一列的宽度则为60px。
在实际设计案例中，我们往往会面临由于每一列的内容不同，所需要的宽度也就不同，我们希望在列不多时可以保持宽度自适应，但是如果每一列都做成自适应列的话，内容多的列无法展示全内容，内容少的列空间又会很大。
所以，固定列 + 自适应列的综合运用，可以让我们更好的实现我们想要的设计方案。
然后，我们一起来了解列的结构。每一列分为内容区和左右间距区，在固定列里面内容区和左右间距区都是保持不变的。但是在自适应列却不同，它的内容区是随界面分辨率变化而变化的，左右间距区的宽度是保持不变的（在代码里间距区被叫做Padding）。
当表格字段数量不确定时，通常我们会为自定义列的内容区写一个最小值(min-width),以确保字段很少时可以自适应宽度，字段较多时仍然能保证完整展示表格数据，不影响对内容的阅读。
当表格的列过多又必须全部展示时，固定必需固定的列(如姓名、任务名称、操作项等)，其他字段横向滚动。
列的对齐方式
基于人的惯性浏览顺序，设计每列合理的对齐方式，能够辅助用户更的完成工作。
不留空白格
从心理学的角度讲，人对未知事物会产出恐惧情绪。我们在设计表格的时候，要考虑到表格的各种展示情况，非特殊情况不要出现单元格空白。
没有数量用“0”表示，没有该项内容用“-”表示。
选择合适的分页器
表格是一种可以承载大量数据的组件，当数据行数很多时我们通常会选择分页器，使用分页器有哪些优点：
收起低频的操作项
当界面空间有限、表格列数很多时，如果表格的操作项过多，会占用很多页面空间，需要有选择的展示，将低频操作项收起，用点击更多按钮去触发选择。
如果是1.0的产品，我们可以和产品经理沟通，分析每个功能按钮的优先级。
如果是上线的产品，我们还可以通过按钮点击PV(页面成功访问次数)，来了解按钮的使用频率，做出按钮优化。
行的排序
如果产品没有特殊需求，那么默认最近创建的在最上面。可以用带有排序的表头，让用户自定义排序。
详情入口
如果表格的内容项很多，我们通常会在表格上只展示部分重要数据，而其余数据放在详情页面展示。
作为详情页面的入口，通常会有两种设计方式：
详情页的展开形式
如果详情内容不多，没有新开页面的必要，我们可以采用展开行、弹窗、抽屉的形式，但是要注意尽量减少过多的样式，给用户增加疑惑感。如果详情的内容很多，而且有编辑的需求，建议采用新开页的形式。
建议根据详情页信息量的多少，以此采用展开行、弹窗、抽屉、新开页的形式。
数据过滤是表格页很重要的组成部分，包含搜索、筛选、标签页。
这一部分的主要作用是帮助用户，梳理表格数据信息，精准定位所需的数据项。
1. 搜索
模糊搜索
模糊搜索是指在用户搜索意图不明确时，搜索引擎将用户的查询与待检索的内容进行模糊匹配，找出与查询相关的内容。模糊搜索无法理解用户的查询意图，返回的结果中可能包括了一大批用户不想要的信息，所以在使用模糊搜索时一定要结合自己的实际场景，慎重使用。
搜索
搜索是指用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。根据业务场景不同，我们会查找某一字段，或者是用标签切换不同字段来查找。
筛选器主要是针对内容较少的字段进行查找的一种方式， 通过筛选器的选择可以快速定位所需的数据，取消用户输入的过程，提升查找效率。一般筛选有两种形式，第一种是下拉筛选，第二种是平铺式筛选。
下拉筛选
下拉筛选就是将需要筛选的内容放置于选择器当中，通过点击选择器下拉，来选择需要筛选的内容。
平铺筛选
平铺筛选就是将筛选项的内容，直接展示于页面之上，通过点击选择的方式直接进行筛选。或者可以通过自定义内容的筛选。
如何合理的使用筛选项
当数据内容需要的筛选类目过多时，如何合理的摆放，才能提高用户的使用效率。
如何判定筛选项的使用频率呢？通常会有两种方式：
标签页又叫选项卡，在组件中我们通常叫Tabs，指的是分隔内容上有关联但属于不同类别的数据集合。
默认展示常用项
在使用标签页时，有一点我们要特别注意，通常在B端设计中，我们会把标签页的位置定位在最常用的一个选项。
增加数据条目
如果是订单一类的分页，我们还可以将数据条数，展示在标签右侧，用来帮助用户快速了解到待办数据量。
数据操作即对表格的数据进行操作，首先我们对数据操作进行分类。
按控制范围分:
按操作属性分：
第一步，先判断控制范围
第二步，判断摆放位置
第三步，优化信息层级
以上是操作项和筛选项较多的情况，那么不多时，我们还是要合理利用空间，灵活设计
以上就是《如何设计表格？》的全部内容了，后续还会努力更新更多B端设计分享！与君共勉
文章来源：优设 作者：三斤
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
