祝愿大家在新的一年，有一个新的开始，更加有活力，更加有生机，生活像亮丽黄一样靓丽而多彩，像灰一样静谧而不失优雅。
为什么ui要有一致性设计
大家有没有听说过一次性设计
一次性设计就是，我今天投入成本完成了一个界面或者营销需求，但也只是完成了这个需求而已，今后再碰到类似的需求依然吃瘪，还得重新投入一轮成本。这种设计就好像一次性的碗筷，用后即扔，非常非常得低效，它不仅没有办法复用，而且无体系、非模块的处理方式非常摧残设计师的精力。
所以保持一致性设计也是可以提升操作的一致性、提高工作效率、延续品牌定位……而且一致性设计是UI和开发交接的一种很好的办法。
一致性设计的好处
1.复用资源，降低设计成本
很多不同的界面中会用到同一个资源，如果见一个重做一个，会很大程度浪费设计的人力资源
2.产品风格及体验不易出问题
因为资源的复用，能基本保证整个产品的风格不跑偏，而在用户体验上，也起码能保持在一贯的水准
3.新人可以快速上手
比较大型的项目中如果人员流动率较高，一致性就相当有必要了。新人先阅读规范后更容易展开工作，根据一致性也能更快了解当前产品
4.程序能提高开发速度
主要也是因为能够复用自用资源，有些界面和控件，程序甚至无需找设计出资源，在产品策划指导下可直接开发
1.对界面和功能操作的认知统一，学习成本低
熟悉过主要界面/功能后，在其他界面/功能中能基本自由操作
比如在北京开车是靠右行驶，到上海你不用学就知道也是这样。因为中国道路交通相关法律中对此是做了统一规范的。要是这一点不一致的话，到上海突然让你靠左行驶，你肯定要适应一段时间并难免犯错.....
2.提高操作效率
在降低了认知成本后，用户很容易就熟悉了产品的设计风格，那么操作起来自然也更容易上手，效率也更高
3.加强对产品（品牌）辨识度
别人一看很容易辨识出：哦，这是某某等那个产品
常见的产品中保持一致性设计的例子非常多，相信各位天天见，我就不啰嗦了。
一致性的规范提现在哪里
设计规范是一个老生常谈的话题了，网上相关的文章也非常多，但我相信有很多设计师对设计规范的理解还是比较模糊，认为设计规范指的就是字体，颜色，控件规范那些，这种理解其实是比较狭隘的。
于我而言，设计规范用一句话总结就是：设计规范是针对特定产品所制定出来的一整套产品标准，包括流程标准，技术标准，设计规则等等。
今天就只来说最基础的几个小方面（也算是干货满满了）
颜色
字体
组件
交互
其他的一些需要大家根据自己的产品定义
颜色
颜色的搭配和选择影响着产品最后呈现出来的视觉效果，合理的颜色配比能加深用户对品牌的印象。色彩无处不在。
那我们如何去定义颜色规范呢，下面本人分享一套规范，小伙伴们可以根据自己的产品进行套用（如果不对大佬勿喷，一起学习）
首先要定义基本色。理想情况下应该有1-3个基本色与产品相关联。
基本颜色的使用场景主要是
突出显示重要的界面状态或信息
在交互方面：如文本字段切换、复选框等
根据数据反馈60%+30%+10%是是整体画面最有平衡感，也是用户最满意的方案引导用户的视线从一个CTA区域平滑移动到另一个区域。
60%的空间用于主色调
30%是空间辅助/次要颜色
如图
按其他顺序搭配，它仍然有效
3.了解受众
好的用户体验的关键是理解受众。颜色在这里起着重要的作用，因为颜色的选择会影响用户与产品交互时的感受和情绪。
你需要考虑的问题
谁是你的目标受众？
他们的年龄？
产品的专业化是什么？
你想让产品唤起什么样的情感？
注意：与团队讨论选择时，请始终关注这些问题。
如果你想把用户的注意力集中在特定的操作上，最好使用强对比度的颜色来帮助用户找到焦点。
通过这种小技巧检查颜色的饱和度，能看到别人看不见的东西。
另外分享一些将图像生成调色板的实用工具：
Coolors.co/image-picker（Web app）
Alembic(Sketch插件)
Image-Palette(Figma插件)
字体
在项目中文案风格也要和产品定位统一，各个界面出现的文字提示等要风格统一。
主要从五个方面入手
类型
字号
字重
行高
行宽
iOS设备的系统默认字体，中文为苹方，英文&数字为SF UI Text。
Android设备系统默认字体，中文为思源黑体，英文&数字为Roboto。
不同的使用场景，文字的字号也不相同。文字的主使用场景分为：一级标题、二级标题、三级标题、正文和提示文字 。
通常最小字号为12px也有文字最小字号为11px的，特殊情况下，字号为10甚至可能更小，例如标签里面的文字。
字重就是指字体笔画的粗细。字重的等级是用来标明同一字体家族中不同粗细笔画的字型。
UI设计中，常用的字重有两个，一个是常规（Regular），另一个是中黑体（ Medium）。
正常文字使用常规体（Regular）。当需要突出层级展示，增加对比时使用中黑体（ Medium），中黑体（ Medium）常用于标题。
字号大小等于文字高度，如下图所示，字号为16时，行高设置为16，那么其行高也是字体本身的高度（16pt）。
如下图所示：行间距距离文字上方为3pt，行间距距离文字下方也为3pt。字体高度为16pt。
举个例子，设计一个标签时，当字号为14时，行高为20，那么为了保持视觉上字体到四周距离相同，那么上下间距为4，左右间距为8。
因为行间距的存在，不能将上下间距和左右间距设置相同。
如果行高设置为14（文字本身大小），那么上下间距应该也为8pt，而非4pt。
下图是Sketch默认字号和行高对照表
行宽=字体宽度+两侧距离字体的宽度
将行宽拉长，代表着设置了文本内容范围，文本距离右侧语音图标为12pt，表示当文字内容距离语音图标12pt时，文字打点或截断展示。
组件
组件的使用场景有很多今天借一个例子来分析和总结，让大家了解和认识组件的使用和规范。
那就来个最基本的：顶部栏设计
组成
变化
交互方式
来认识组件的模式和规则
顶部栏的常见样式
顶部栏是什么样子，它由什么组成？
通常，顶部栏提供有关此页面总体的信息，以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示：
顶部栏中常见的组件包括：标题、容器、操作项、导航图标等，接下来为大家逐一介绍各个组件的使用。
顶部标题通常与底部导航一起使用，共同解释页面的信息。
如果一个页面中底部导航只有图标没有文字解释，用户有可能不了解图标的意思，那么解释页面信息的重任就落在了顶部栏的标题上。
大多数情况下，标题位于顶部栏的中间，有时也会在左上角有一个很大的标题作为导航（IOS应用中）。除了解释页面的目的，大标题还可以用于品牌推广。
标题也可以解释用户在这个页面上执行的操作。例如，当用户想修改个人资料时，标题会显示“edit profile”，用来解释操作。
有时，在顶部栏主标题的下方会有补充文本，这样方便为用户提供更多的信息。
容器的趋势越来越不明显。容器通常是灰色或者不饱和的颜色，有时容器也会使用品牌主题色，起到宣传和推广品牌的作用。
操作项通常以图标和文本按钮的形式出现在顶栏上 ，当需要时可以在顶栏上显示0-4个图标或文本按钮。
在不同的页面中操作项可能代表不同的含义，但一些常见的图标/操作遵循着一定的规则：
1、返回：当用户进入第二/第三层级页面时，“返回”通常出现在左上角。单击“返回”图标可引导用户回到原始页面。
2、关闭或取消的位置不固定，可以在左侧也可以在右侧，具体取决于是否有其他操作。
这里讨论一个常见的问题，顶部栏中“返回”和“关闭”分别应该在什么情况下使用：使用“返回”：当用户在一个漫长的探索过程中需要不止一步的操作，或者在该页面上没有一个简短而明确的目的时。使用“关闭”：表示一个完整的单页操作，它有明确的起点和终点，在页面上执行特定的操作实现特定的目的。
3、个人资料或帐户有时会出现在顶部栏上，以方便用户编辑个人信息，设置或切换帐户。
4、添加或搜索可帮助用户浏览更多内容或者扩展他们感兴趣的区域，通常出现在右上角作为易触摸的目标。
需要注意的一点是，为了避免引起不必要的关注，顶部栏上的图标/文本按钮通常是线性图标而不是填充图标，并且是非饱和颜色。除非它们确实想吸引用户的注意，或者为了提示用户进行操作。
使用App时我们会发现，有的页面顶部栏中没有标题，而是增加了一个搜索框(淘宝首页)。
根据特定的需要，可以将搜索用在不同页面的顶栏上，因为它在用户浏览内容时为用户提供了更多的价值。
什么时候放弃使用顶部栏？
当顶部有很多内容时，一些App会让顶部栏变得非常简单甚至完全舍弃。
在Robinhood顶部显示最重要的用户信息——每日投资增长，右上角只有一个提示文本按钮，用来邀请好友。
放弃使用顶部栏的常见案例是个人资料页面。这样做的目的是自我暗示，这个页面自己可以掌控，个人信息在顶部占据了很大的空间。
一个页面中可以有很多交互发生，有时顶部栏需要通过改变样式或内容来反映交互动作。
反映滑动位置
下滑出现顶部栏:当顶部栏有许多重要信息但又占用大量空间的情况下，顶栏的内容可能会根据滚动位置而变化。当用户下拉页面以获取更多内容时顶部栏会出现。
下滑隐藏上拉出现:另一种形式是在Google搜索中，用户向下滑动顶部搜索框会隐藏(Google猜测用户希望集中精力浏览内容)，但是只要用户向上滑动，中止浏览过程，顶栏搜索框又会出现。
不管交互形式如何，这类顶部栏能在用户需要时快速显示：
用户可以进行搜索功能或常见操作；
标题/重要信息作为参考，提醒用户在哪个页面。
下滑隐藏顶部栏:对于那些不会影响用户需求和操作求的顶部栏，通常会随着页面的向下滑动而隐藏。
星巴克顶部有一个令人愉快的问候语，当用户向下滑动并尝试选择要喝哪种咖啡时，它会随着页面滑动而消失。
Airbnb会在顶部展示房屋图片，以便给用户留下深刻印象，但是当用户向下滑动时，顶部的图片也会跟着滑动。
反映当前页面的变化
有时，顶部栏的信息会根据内容的变化而实时发生改变。
最常见的案例是收到消息时的反馈：在微信中，顶部标题会显示用户收到信息数量的变化；Instagram通过顶部小红点的变化来展示收到的消息。
作为页面中必不可少的一部分，交互式顶栏减轻了页面中其它元素的负担。除了常见的图标或文本按钮(添加、取消、后退)的变化，在顶部栏中还会发生哪些有趣的交互？
互动标题
有的产品服务非常依赖于用户的偏好、位置，例如常见的外卖或打车软件。
在这种情况下，App通常依靠用户的初始输入来决定显示的内容，用户也可以直接在顶栏标题上编辑信息。
交互式图标/文本按钮 交互式图标/文本按钮意味着用户可以在顶部栏上执行某些操作，而不必离开此页面。在robinhood中用户可以在不用切换页面的情况下，直接选择购买股票要用的计算方法，或者把页面上的股票添加到自己的收藏中。
顶部导航
有的App希望在一个页面中能显示多个平行的内容，所以会在顶部栏上设置多个选项，实现更方便的导航。
常见的顶部导航包括分段控件和标签导航:
分段控件导航选项一般不支持左右滑动,选项较少，；标签导航选项的设计更多样，支持左右滑动切换。
https://www.xueui.cn/experience/app-experience/top-bar-ui-design-patterns-and-rules.html
研究过程可能会花费很多的时间和精力，却能让我们真正受益。
总结
一致性设计大方向为产品有更杰出的体验，在保证用户体验良好的同时，我们需要与同类产品做出差异化竞争设计，这就需要我们平时多观察互联网设计趋势，国外设计趋势，集合自己品牌去打造一套好用的产品。
这里推荐几个必看的大厂设计规范官网，建议收藏。
苹果iOS设计官网：https://developer.apple.com/design/human-interface-guidelines
谷歌Material Design设计官网：https://material.io/design
微软Fluent Design System设计官网：https://www.microsoft.com/design/fluent
IBM设计官网：https://www.ibm.com/design/language
Facebook设计官网：https://design.facebook.com
蚂蚁金服设计官网：https://ant.design/index-cn
其实，规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化，又要在设计的过程中给用户制造惊喜。比如，整个UI的配色和字体需要保持统一，但在一些图形，动效上可以做出亮点，让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是需要一个动态平衡的过程。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
作为一名UI设计师，图标设计是我们刚入门就必须学会的必备技能之一，它是用户界面中绝对不可或缺的元素。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。随着扁平化设计风格的普及，图标的风格越来越简约，看似简单的图形，实际要准确的表达含义，也是需要注意很多细节的，在如今大同小异的图标中，如何让你设计出的图标具有说服力也是一门学问，今天就给大家全面的剖析一下图标的知识，让你做出的图标有理有据。
1、图标的定义及分类
2、图标的设计规范
3、图标的性格走向
4、图标的评判标准
5、总结
图标是具有高度概括性的、用于视觉信息传达的图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。
在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。
释意性图标是用来解释和阐明特定功能或者内容类别的视觉标记。它并不是一定被点击可交互的UI元素，在很多时候只是有辅助解释其含义的文案。在不搭配文本的情况下用户会借助这些图标来获取信息。不过有时候图标表达的含义可能还不够完整或者清晰，所以会将图标和文案搭配起来一起使用，这样可以大大降低误读的可能性，释意性图标一共可以分为以下三类：
2-1-1纯图标：
例如火球买手APP中的店家“特定标签”，以及图文展示下的“观看数量图标”与“收藏图标”，它们并不需要用文字去解释，用户也知道它表达的是什么。
2-1-2图文结合：
例如造作APP中的“购物车图标”与“收货地址图标”，为了让用户能够很好的明白图标的意图，所以在图标下方会配有文字提示，这样就能大大的降低误读的可能性。
2-1-3纯图标（图标内含文字）：
例如开眼APP中视频封面左上角“开眼精选图标”，它把图标与重要文字结合在一起展示给用户，看起来不仅十分具有个性，而且用户对其理解性也非常强。
交互图标的最大意义在于可以引导用户进行交互行为，是在产品中不可或缺的组成部分。它们可以在用户不同的操作手势下帮助用户执行不同的交互过程，这种类型图标也是APP中最常见的，常见的交互性图标如：搜索、底部标签、返回、点赞、收藏、扫一扫等。
装饰性图标仅仅是用来提升整个界面的视觉体验，它并不具备任何功能性。这类图标往往是为了迎合用户的偏好与期望，通过丰富视觉体验的方法来增加内容的观赏性，这样不仅可以吸引并留住用户，还可以让整个用户体验更加积极，最为大家所熟悉的就是滴滴出行APP中的“小车图标”。
图标基于基础样式（线、面、线面结合）+表现手法（颜色、透明度、投影、叠加...）划分，一共可以分为20种类型，每种类型的展示方式也都各有不同。
线性图标通过线来塑造轮廓，在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。
线面结合图标相较单一的线性图标或单一的面性图标样式更加丰富、也更富有趣味性。从设计的角度上说，由于元素的多样化，设计更容易获得好的效果。相反，如果运用不当会显得图标非常杂乱，如何有效的把控好两者之间的过度是关键。
这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，用户可通过对现实事物的联想，快速领会图标表达的意图。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰，所以现在拟物化的图标很少运用在APP界面之内。
相较于拟物风格不会有太多复杂的视觉元素，层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计，这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉，在界面设计中，一般在面积比较大的区域我们会使用加入轻质感的图标。
合理的遵循图标规范可以有利于设计师之间合作使用，指导设计师如何规范的去设计图标，以确保企业所有产品图标风格的一致性和可用性达到统一，同时也是为了后续产品更新迭代有可参考的地方。
为了保证图标的尺寸大小一致性，我们往往会建立基础的网格尺寸来进行绘制图标，常用的网格绘制尺寸为：16、24、36、48、64、128、512、1024。这些尺寸并不是固定的，在设计中也会存在特殊的尺寸，例如谷歌在台式机上设计图标，当鼠标和键盘是主要输入方法时，就会使用密集布局，基础网格就会缩小到20。
下面就以常用的24x24为大家展示：
网格包含2px出血位。这样可以确保图标在导出时将保留其所需的比例和周围的空白区域，同时还能够很好的平衡图标的视觉重心。
*在使用常规图标时避免一部分在出血位。
*在使用多个元素的图标时，避免图标拥挤我们可以让其部分出现在出血位，确保它们之间有足够的空间。
keyline由圆形，正方形，矩形，正交，三角形和对角线组成。它可以为您提供图标集中基本形状或比例的一致大小。这使创建视觉上的稳定变得更加容易，并有助于在设计相似比例的图标时有共同的参考准则。
在24尺寸下的keyline构成如下（24尺寸下的出血区域为2）：
当把图标画在网格上时可以很好的规范图标，让它们从整体的视觉上看着统一规范。
在设计一整套系统化的图标时，我们一定要注意图标的像素大小，要运用相同的网格尺寸设计相同线条粗细的图标，包括曲线，角度以及内部和外部笔划。这样图标看起来才更统一，也有利于后期图标的迭代更新。
当然，描边像素的粗细并不是绝对的，如果我们要做一些密集型的图标时，可以考虑适当的缩小线的像素大小。如下，我们设定的系统图标线条粗细为3px，当你用3px作用于指纹图标上时就会显得非常拥挤，并且在视觉上比其余图标更重，这时我们就可以把它的线条像素降级，设定为2px。
我们在用矢量工具绘制图标时，要仔细看好图标的网格尺寸和图标结构尺寸，避免产生小数位。
曲率简单来讲就是图标中带有圆角的边角度数，只要是带有圆角的矩形就都会有一定的曲率。在图标中曲率的呈现方式有两种：外曲、内曲。
外曲与内曲并不一定同时存在，在特定情况下内部结构可以是直角（无曲率）。如下图：当内部结构都是圆角时会发现整个图标稍显臃肿，这时我们可以把部分内部圆角直接变为直角（也可以改变曲率大小），改变后就会发现图标的整体结构会显得更加协调。需要注意的是如果一个图标做了这样的处理，在同等情况下的图标都要做一样的处理，不然图标会显得非常杂乱，不统一。
根据像素的网格线来设置两条对角线，会让你的图标看起来更清晰。在倾斜的角度选择上，不要出现7.8°、14.2°这样的奇怪数值。我们可以将15°的增量用于倾斜角度（也可以采用其他有规律的角度方案），这样会使得整体的图形变化显得更加规律，也能够满足不同图形的角度需求。
在做很多图标时都会用断点的缺口来打破“全包边图标”的沉闷感，使图标具有透气性，如果想给图标添加断点，那么要保证断点的形态保持一致。
确保图标内每个细节和元素都有足够的空间，图标的相邻元素之间的空间在整个图标中不应太小，我们可以定义最小间隙以避免轮廓“粘住”，在24px尺寸下的间距不得小于1px。
如果在做图标时牵涉到了透视需求，那么就一定要保证图标的透视角度一致。
非中心对称图形物理对齐时视觉上会有偏离感，多个不同形状的图标视觉重心并不在一条水平线上，需要微调才能保证平衡感。
在图形的处理上，不要留有多余的节点，干掉多余的节点，保持图形的整洁。
ICON命名要求较为严格，涉及到我们切图给开发，所以我们命名争取做对，且需严格遵守规则，正确的命名原则：类型_位置_功能_状态_大小
每个App应该有自己独特的产品气质，同样图标性格也应当与产品气质保持一致。图标性格一共分为了4个走向：粗旷（粗直）、活泼（粗圆）、商务（细直）、精致（细圆）。
图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为直角。
粗旷类图标让人看起来非常饱满、刚正，它更多适用于男性、潮流、有格调类型等产品中。例如VSCO，它的底部标签栏图标全部采用了粗线条的直角设计。
图标结构特点：线条较粗（或面性图标、线面结合图标）、拐角为圆角。
活泼类图标让人看起来十分容易接近，能让人感受到温暖、舒适，它更多适用于电商、社交、母婴、二次元、娱乐、直播、美食等产品中。例如闲鱼，不管是在LOGO字体的处理还是APP内部的图标处理，都是采用了线条较粗的圆角设计。
图标结构特点：线条较细、拐角为直角。
商务类图标让人看起来十分规矩、严谨、值得信赖，它更多适用于新闻、政府、商务、工具等产品中。例如工具类的思维导图APP，它的可操作按钮都是商务类的图标。因为这类图标的特性，所以目前我们很少在移动端上看到它，它更多适用于PC端的后台界面中。
图标结构特点：线条较细、拐角为圆角。
精致类图标让人看起来非常干净、柔和、显得高级感，它更多适用于旅游、品、艺术、领域垂直等产品中。例如airbnb，在APP应用中大部分都采用了精致类图标。
当图标设计完后，我们应该如何去评判一个图标的好坏？很多设计师并没有完整的评判体系，其实我们可以从这五个维度对图标进行评判：识别性、图标气质、协调性、一致性、品牌调性。
图标最主要的用途就是辅助用户理解信息，特别是对于当图标单独存在时，一定不能让用户产生疑虑。要想图标达到高识别，我们可以从这2个方向入手：大众认知隐喻、真实世界映射。
在互联网普及的今天，许多界面的隐喻图标已被广大用户熟知认可，对于这类隐喻图标用户不用思考身体就已做出反应，我们在设计图标时可以从隐喻图标中添加修改部分元素，从而形成新的图标，这样既能保证图标的识别性，也能做出差异化。
选择真实世界中的物品映射，能使人下意识对图标的作用有近似预期，降低学习成本，提高识别度。
每个App应该有自己独特的产品气质，而我们所做的图标就是要跟随产品的气质。例如当你要做一款二次元产品，你的图标气质就应该偏活泼、可爱、萌、青春，而不是刚硬、严谨、规矩。
一致性是图标的基础，我们在绘制整套图标时要确保它们的基础属性全部一致，细节统一，图标内容的统一在视觉上也更加和谐美观。图标是否具有一致性，就要从以下七个方向去评判：尺寸大小、图形角度、拐角（曲率）、描边、间距、透视、颜色。
3-1 尺寸大小：网格大小是否统一、是否遵守图标的keyline规则。
3-2 图形角度：是否遵循设定的角度规范（15°的增量用于倾斜角度）
3-3 拐角（曲率）：拐角的曲率是否统一，如果图形太多且复杂，那么我们可以根据图标的特性去设定曲率的规则，例如可以设定当边角像素在1-2px时内外曲率为2px；当边角像素在3px时内外曲为2px，内曲为1px；当边角像素大于或等于4px时，外曲为2px，内部则为直角。
3-4 描边：描边大小是否一致。
3-5 间距：是否遵守间距规范。
3-6 透视：透视是否一致，避免在同一套图标中出现正视图/侧视图混杂的情况。
3-7颜色：在图标的配色上要保持一致的规律，采用相同的颜色是比较常见的配色方式。如果采用不同色相的配色方式。也需要保持整体的配色协调，避免出现饱和度、明度反差过大的配色。
一致性代表的是图标的基础，而协调性则代表图标的整体状态，协调性的呈现状态是验证一致性是否合理的标准，当协调性存在问题时，我们就要反过来查看一致性存在的误区并给予修改。在图标的协调性上我们主要审视这三点：视觉大小、饱满度、透析感。
视觉大小对标的是一致性的尺寸大小与描边大小，当你发现图标视觉大小不对等时，你就要回过去查看你的网格与keyline是否运用正确，确保正确后再查看你的图标是否按照keyline的规范绘制以及描边大小是否一致。（同样尺寸下的图标，从光感上来看描边粗的图标视觉偏大）
饱满度对标的一致性的间距，当你发现图标不够饱满时，你就要去查看你设定的间距值是否偏大，是否合理。
透析感简单来说就是留白区域。透析感对标的也是一致性的间距，当元素的描边过大时，我们就要合理的设定间距的最小值，不然整个图标就显得非常臃肿。
品牌调性是我们经常提到的纬度，我们打开很多APP都会发现他们的图标设计都非常普通，没有任何特色，过于大众化，虽然都做了一些形式上的改变，但总是与品牌缺乏联动性。其实我们可以结合品牌调性，在图标上做更多的联动、创新。
色彩是图标设计中重要的构成元素之一，我们可以直接提取品牌色作为图标设计视觉元素。例如站酷，站酷的品牌色是黄色，标签栏的图标（选中状态）就提取了品牌的黄色，让其与品牌调性高度一致。
当然品牌颜色除了可以直接用外，还可以在提取时适当调整色彩的饱和度、明度，做更多的形式变化。例如懂车帝，就在原有的黄色基础上做了些许调整，图标采用黄色透明渐变的处理方式，在与品牌颜色呼应的同时，使得整个图标更加精致、有活力。
提取品牌LOGO是最常用的使用方式，我们从品牌中提取出来的图标一般运用在APP首页标签。因为首页是APP中最重要的页面，也是进入APP默认的页面，把首页图标替换成品牌LOGO，能反复加强了用户对App的logo印象，这样不但使App内外形成了视觉联系，同时也二次传递了品牌形象。例如大众点评，它的首页标签就用了品牌LOGO。
我们可以在品牌中提取它识别性较强的局部元素作为图标。例如虎牙直播，它就提取了品牌卡通形象的外轮廓作为首页图标。
品牌提取的元素并不只是所见到的品牌视觉形象，还可以提取与品牌内容强相关的元素。例如QQ音乐，就把音符作为首页图标。
如果你的品牌还不为大众所熟知，那么为了强化用户对品牌名称的认知，可以把品牌名称直接放入标签栏中。例如MONO，就把它的名称分为四个字母分别放在了4个标签内，需要注意的是这类图标不能单独出现，因为它本身不具备引导含义，必须配合文字一起出现，这样才能让用户能易理解。
图标风格可以与品牌性格保持一致，一套带有浓厚品牌感的图标，会让人记忆犹新。例如：每日故宫，它的图标就非常具有特色，结合了品牌的性格以及定位，加入了众多的古代中国元素，整体看起来有股浓浓的古韵之风。
如果品牌中含有吉祥物，我们可以提取吉祥物的外形，把它用于产品的图标中。例如盒马，它就把盒马的吉祥物做了风格化的处理，放于APP的首页标签。
设计师对自己做出的所有设计都必须要有理论支撑，图标也不例外，一套优秀的图标是设计师不断沉淀的结果。看完本文章后，如果大家想要去练习图标，建议找大厂的图标放在keyline里临摹，真的会让你收获不少。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天想要和大家分享的是一个 Ant Design 的设计资产「列表」。它是企业级产品页面中重要的组成部分，几乎所有的产品都会用到它。
随着企业级产品复杂业务场景的增量，Ant Design 的列表覆盖度也受到了很大的挑战，很多设计师说现有的组件和交互模式无法满足他们的业务场景，导致他们需要重新设计列表，带来了额外的设计和开发成本，同时对于全域产品的体验一致性也带来了挑战。因此，我们决定一探究竟，去看看列表的底层基因到底是什么样子，我们应该如何提高通用性和覆盖度。
表格、列表、卡片列表的区别
在研究列表之前，我们首先将表格、列表、卡片列表这三个资产，从用户的交互行为、使用场景、资产结构三个维度进行了分析，并尝试做了明确的定义和区分，避免后期在使用过程中的概念混淆。
（1）表格的定义
表格通常是以矩阵式布局呈现，强调信息的浏览性，趋向于展示多而复杂的数据。数据按照矩阵布局对齐，方便横纵浏览以及研究数据之间的关系。
（2）列表的定义
列表通常以线性结构呈现，能交互式地展示众多数据结构相同的条目，且扩展性强。通过列表，用户更容易纵向扫读来获取宏观信息，横向浏览来了解单个条目的细节信息并进行相关操作。
（3）卡片式列表的定义
卡片列表通常以网格布局呈现，用于承载数据间相互独立的信息，扩展性大且个性化强。通过卡片列表，用户会更聚焦于单个卡片的概览内容，且很少会进行卡片间的数据对比，而是对单个卡片的数据信息进行查阅，并决定是否进行操作。
列表的构成
在清楚的定义了什么是列表之后，我们开始去思考一个列表的底层结构到底会是什么样？经过几轮的讨论和试错，我们得到了如上图所示三层结构，它们分别是容器层、容器功能层、内容层。
容器层：容器层像一个盒子，它的大小、形状决定了这个容器承载内容的体量，因此我们将列表的容器层默认值定义为一个宽1184px，高为44px的矩形。用户可以根据业务需求调整其高度和宽度。
容器功能层：容器功能层象一个盒子的手提带，用户只要提起这个带子，整个盒子就会被拎起来。也就是说，这个容器功能层是整个列表的全局操作。
内容层：内容层像放入盒子里的各种物件，用户可以根据自己的需求在这个盒子里填满各种东西，并在盒子外面贴上一些标签，来告知盒子里都有些什么，当用户需要查看具体的东西时，就可以打开这个盒子。
通过三个层次的划分，我们可以清晰的定义每个层次的内容及具体的职能是什么，这有利于我们后期面对复杂业务场景和海量信息内容时，可以更好的去归纳和组织信息的呈现，于此同时高度结构化的组织形式也是保持资产内在一致性的关键要素。
模式化设计方法 — 元素穷举
在列表的构成中，我们清晰的定义了列表的底层结构以及其对应的职能，到目前为止，你可以把它想象成是一个空盒子。当然，仅有这样一个空盒子是远远不够的，接下来，我们要在这个有边界的空盒子里合理的规划物件的收纳，以及思考对这个盒子，用户会有哪些操作诉求。因此，我们有了许多新的疑问，例如：
企业级产品通常都会在这个列表中放些什么内容呢？
这些内容是否可以能被抽离出一些共同的特征和展示形式呢？
我们应该如何更好的组织这些内容，提升用户的阅读和操作体验的同时更好的解决通用性和覆盖率的问题呢？
为了解决这些疑惑，我们尝试了很多种方法，最终总结了一个新方法：Ant Design 模式化设计 — 元素穷举。（关于 Ant Design 模式化设计方法详情，请查看此处。）
如上图所示，在元素穷举之前，首先我们尝试思考了一个问题：当用户看到一个列表时，它的浏览顺序和阅读习惯会时什么样子的。通过分析发现，在信息浏览的场景中，通常人们会以从左到右，从上至下的顺序进行信息的浏览。于此同时，人们在获取信息时，更习惯于先了解信息概要，再查看细节，最后作出判断或决策。那么，基于以上两个维度的分析，我们尝试将单个列表条目的内容层进行区块的划分，得到了如下图所示的三个区域：主题区、关键信息区、操作区。
主题区：主要呈现的是一些信息概览，包括标题、时间、备注等信息，用户看到这里就可以快速的对当前列表产生信息的认知。
关键信息区：该区是对列表中详情数据的高度提炼，主要呈现一些关键信息，帮助用户对列表内容进行知悉，辅助其更好的进行下一步的决策与操作。
操作区：基于业务的需求，放置相关的操作按钮，从而达到产品的运作和流转。
在完成区块的划分和具体的职能之后，我们开始思考，每个区域应该要有什么样的元素才能够更好更直接的展示列表信息，在此期间，我们例遍了上百个列表页面，并开展了一次脑爆会，对每个区域的内容进行了元素的穷举。
如上图所示，我们在上百个页面中梳理并抽取了每个区域可能出现的元素，并整理出一些通用性强，覆盖率高的元素进行组件化。保证后期设计师在结合不同场景使用时的拼装和灵活替换。此外，三个区的元素都有各自明显的特征性，例如在主题区中的元素更加简练、概括和基础。而在关键信息区，展示的元素相对更加丰富，如我们会通过 Mini Chart 来向用户展示一些数据信息，通过进度条来向用户展示数据处理进度，通过标签来向用户呈现数据的分类或重要程度等。在操作区，我们也设定了一些展示规则，例如纯字段的展示、图标的展示以及弱化操作的展示方式等等。
梳理完内容层的信息之后，我们也对容器功能层结合业务场景，进行了穷举，赋予了四个常用功能，分别是：排序、勾选、展开和置顶。如上图所示，我们将对条目容器全局性的操作放在了条目的最前面，这有利于对多个条目进行批量操作，于此同时也和尾部的业务操作做一个显著的区分。
基于元素穷举的方法，我们系统全面的梳理了列表在内容层和容器功能层的底层元素，通过这些元素的自由搭配组合，就可以生长出基于业务场景下的不同列表。他们有着相同的底层逻辑和规则，却有着不同的外在视觉和功能。
列表的布局及交互规则
（1）内容层的布局规则
通过元素穷举的方法，我们更清晰的梳理了不同区块可能出现的视觉元素和信息内容，更合理的排布了整体的信息展示顺序。到此为止，我们可以很好的解决内容层的覆盖度问题。但是，我们发现，除了内容层的样式以外，还有很多细节问题有待解决。例如：并不是所有的业务都需要将单个条目分为3个区域。基于这个问题，我们制定了一系列的排布规则，详细的说明内容层三个区域搭配的具体规则，如下图所示。
动态演绎
（2）容器功能层的布局规则
为了保证这四个功能的摆放不影响主题区的信息展示，我们制定了一系列的间距规则，保证在四个功能都存在的场景下，有一个较优的展示方案。具体内容如下动态演示图。
列表的视觉案例
根据以上的交互规则和相关的组件元素，设计师可以根据自己的业务需求进行拼装优化。如下图所示，动态演绎中展示了单行条目的一些规则变化。你可以添加图标、添加Tag；在关键信息区你可以增加进度条等。
当你需要展示的信息较多时，可以对容器层的高度进行扩展，变成双行甚至是多行。如下图所示，动态演绎图中展示了两行的列表是如何展示数据的。
单行列表的展示样式，如下图所示。
总结
以上就是本次分享的全部内容，相信大家看完之后可以理解“表里不一”的概念了。所谓的“表”是指在UI层面的视觉元素表现，我们通过元素穷举的方式，来抽离通用性强、覆盖率高的元素，将这些元素设计成一个个的UI组件，设计师可以根据自己的业务场景自由拼装组合，得到一个幻化万千的的外表。
所谓的“里”指的是资产的内在结构和交互规则，我们可以将其定义为是一个设计公式，其包括了对列表的区块划分、间距规则、响应式规则等。大家可以通过这个公式来制定自己的资产规则，从而保证产品的内在体验一致性，交互一致性，减少用户的学习成本和试错成本。目前整套规则和资产已经在蚂蚁内部的企业级产品开始推行使用了半年，整理来看，设计师通过以上的规则以及相关组件的自由搭配组合，业务场景的覆盖率能够达到80%以上，大大提升了设计的效率，于此同时，结构化的交互逻辑和标准化的组件与开发形成了精准的同步，提升了研发效能，从而促进整个产品研发效率的提升。
最后，感谢你的花费宝贵的时间阅读这篇文章，希望可以给你带来一些启发。我们非常期待设计师体验和使用Ant Design 4.0 的设计资产，同时也能全面了解这些资产背后我们的思考和一些小经验。当你发现我们的设计资产无法满足你的业务场景时，也可以通过这些方法和步骤，创造属于你们团队自己的设计资产。
文章来源：站酷 作者：Ant_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
信息组织是我们在日常生活中经常会遇到的问题。各式各样的信息是如何被组织编排到一起，又是以何种方式把信息呈现给用户呢？
全文阅读约 5 分钟， 主要分享 Ant Design 在页面信息组织策略上的探索思路。
人们是如何组织信息的？
在 Ant Design 的界面设计中，会包含大量的信息组织和编排工作，我们常常会遇到这样的问题：
· 一个详情页面里应该包含哪些信息？
· 什么样的信息应该放在卡片里，什么样的信息应该平铺显示？
· 一个页面内的信息该怎么让用户快速找到重点？
· ···
信息组织是我们在日常生活中经常会遇到的问题，商场里的楼层导航、机场车站的标志指引、餐桌上的菜单、手机里的通讯录等等，各式各样的信息是如何被组织编排到一起，又是以何种方式把信息呈现给用户呢？
在解答这些关于页面设计的问题之前，我想先给大家讲一个生活中的小案例：
动线设计
逛过宜家的人，应该会注意到宜家类似迷宫的动线设计，这种动线设计能够让消费者不知不觉逛完商场的各个角落。踏入宜家门口时，就会被一条隐形“向导”默默地引导着向前走：一条曲折宛转的主线依次引导至客厅家具、客厅储物室、卧室、书房等各个主区域，直到一个不落地走完才抵达出口。但在这个主线之外，为了确保一些消费者在购物中，能够快速离开或快速去往感兴趣的区域，每个主区域间都有一些较隐蔽的捷径作为辅动线。
这种动线设计一方面能够把所有商品按照路径有效的串联起来，另一方面又能让消费者不知不觉的沿着这个路径去了解商品。
商品布局
动线布局是宜家的隐形骨架，而真正让宜家卖场丰富起来的，还是琳琅满目的商品。宜家的卖场和大部分零售卖场不一样，它不会把同类型产品进行大集合，而是根据人们的正常生活场景来分类，不同类型的产品在同一区域组合陈设，构成生活中的一个小场景，一方面能达到对各个商品功能的完美诠释，另一方面，一个产品尽量不会重复出现，尽可能减少商品展示的复杂性。
在整体商品布局上，有两个很有意思的地方：第一，在居家体验中心，样板间的陈列顺序完全是按照消费者回家后的场景而布置：客厅、餐厅、厨房、书房、卧室、卫生间......，第二，在家居用品中心，则会根据消费者在家的日常起居行为进行摆放：做饭、休息、读书、收纳......
现实生活中的这些例子，对我们的界面信息组织有什么启发呢？
关于动线和布局的思考
在宜家的案例中，关于动线，映射到人的行为上，有一个比较专业的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最优体验心理学》中对“流”的定义：当人们全身心投入到某个活动中时，会对周边干扰视而不见，这种状态被称为“流”。宜家的动线设计很好的营造了这种状态，让消费者完全沉浸于商品浏览，并且尽量不去打断这种行为流。
经过研究发现，构成“流”的行为动作，其前后必然存在某种连续性或者关联性，例如回家的行为动线，日常起居的行为关联等。这个概念在界面设计中依然适用，很多界面设计都在有意无意的去创造“流”的状态，带给你用户沉浸式体验，例如各类短视频应用会根据用户浏览习惯推荐相关联的视频内容，让用户沉浸其中无法自拔。
关于商品布局，映射到信息组织上，《韦氏大词典》 中提到一个词“编配”（orchestration），对应的解释为“和谐的组织”。这个词能比较好的表达信息组织的含义，宜家的商品和谐的组织构成一个场景，它向消费者传递的不仅仅是商品本身的功用性，更是在传递一种搭配建议或者一种生活方式。这种商品组织方式能非常有效的降低消费者对信息筛选的复杂程度。而在界面设计上，表单页的和谐组织能够帮助用户快速完成信息录入，详情页的和谐组织能够帮助用户快速理解一个描述对象......
各种各样的信息总能以某种关系组织到一起，而如何根据这种流为用户去组织和呈现信息呢？
“流”的本质其实是一系列具有关联性的行为动作串联，而“编配”的目的则是为了降低串联信息呈现的复杂程度。有了这两个基础的概念之后，我们可以做一个初步假定：所有的信息是否都可以通过关联性和复杂度来进行组织编排？针对着这两个维度，我们又进行了更深层次的研究和验证，并得到基本定义：
· 信息复杂度：信息量的大小，包括种类、数量等。
· 信息关联性：信息之间的潜在关联或者相互影响。
我们设想，这两个维度能否运用到界面设计上的信息组织呢？
页面信息的组织方式
信息关联性
界面信息之间的潜在关联或者相互影响，通常体现在「逻辑关联」和「视觉关联」两个层面。
逻辑关联
顾名思义是指一个事件中的所有信息之间的关系，在界面设计中，无论什么样的信息，总能以某种方式进行分类和编排在一起，例如手机通讯录中的人名，可以按照字母顺序从 a 到 z 进行排列，电商网站的商品导航会根据类别进行分组，待办事项可以根据时间进行排序等。
如何找出信息之间的逻辑关联性呢？
被称之为信息架构之父的 Richard saul wurman 在《信息焦虑》一书中将信息组织方式用“五顶帽架”来概括：
· 地点（Location）
· 字母（Alphabet）
· 时间（Time）
· 类别（Category）
· 层级（Hierarchy）
简称LATCH。这五种方式基本可以涵盖所有的信息组织策略，信息是无限的，但是信息组织方式却是有限的。
视觉关联
任何一个界面呈现给用户的时候，用户都会下意识的去判断界面上什么信息是最重要的，接着会去关注这些信息都有什么关联，因此，除了按照逻辑去组织信息之外，还应该合理的去呈现信息的视觉层级关系。
视觉层级关系有几种常见的区分方式：
· 强调：使用基本视觉元素（颜色、形状、大小等）区分层级
· 亲密性：位置接近的元素通常是有关系的，而且位置越近，关系越强
· 图胜于言：视觉符号和对象关联，例如：齿轮或扳手=设置，垃圾桶=删除
· 浏览顺序：根据浏览顺序，从左到右（部分地区）或从上到下信息重要程度依次减弱
· ···
如何验证界面元素的视觉关联性是否合理呢？
眯眼测试
《About Face 4: 交互设计精髓》 中提到了一个很有意思的测试，为了确保界面视觉信息有效的拉开层次关系，图形设计师经常会用到一个方法“眯眼测试”（squint test）。闭上一只眼睛，眯着另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成组，哪些元素看上去零散。从多个角度去观察，总能够发现之前没有注意到的布局和构成问题。
信息复杂度
通常以信息量的大小或样式多少来衡量，这两个维度实际决定了信息的浏览时长。例如一个详情页面内都是纯文本信息，但是信息量较大（超过三屏），则认为这个页面的复杂度较高，或者一个详情页面内同时包括文本、表格、代码展示、图表等元素，也会认为这个页面的复杂度较高。
信息的复杂度和关联性并不是两个完全独立的维度，根据关联性去组织信息，本身就是为了降低信息呈现出的复杂程度。而对复杂度的研究，可以帮助我们如何选择合适的方式把信息呈现给用户。
页面信息组织实践 - 详情页设计
具体到界面设计层面，信息体量大、复杂度高常常是中后台界面设计的难题之一。以详情页为例，详情页内的信息该如何合理的组织信息并有效的传达给用户呢？
根据关联性和复杂度的概念，我们抽象出一个简单的「复杂度模型」，用来判断信息复杂程度和关联性对页面结构的影响。
横坐标表示页面信息之间的关联性，纵坐标表示信息的复杂程度，两者交叉组成的色块代表不同的信息等级。靠近原点最浅的色块，代表复杂程度低且关联性强的内容，例如一段纯文本的产品描述信息；远离原点颜色最深的色块，代表复杂程度高且相互独立的信息，例如一个发布流程中的集成测、预发环境测试、灰度测试、上线等各个阶段信息展示。
与之对应的，我们对信息展示方式也进行了维度划分，用来解决在复杂的企业级产品界面设计中，何时使用卡片区分，何时拆分为 tab 等布局问题。
根据承载信息复杂程度的不同，我们对容器组件也进行复杂度划分，用来解决在不同页面布局中，不同类型的信息用何种方式呈现的问题。
这个模型可以帮助设计者在决策布局组件时，有章可循。最终让用户感知，当用户来到一个页面时，即可对页面的信息量、信息的搜寻方式有统一的预期。我们尝试将复杂度和关联性模型在界面布局中落地：
关于以上的模型在实际设计中该如何操作，这里提供一个推荐步骤可以参考：
· 「复杂度判断」明确设计对象信息量的大小
· 「关联性判断」判断各个信息之间的关联性，并合理分组
· 「组件选择」选择合适的容器组件来呈现信息
· 「模板选择」选择合适的页面模板，组织编排信息
· 「眯眼测试」检查整体布局是否合理（仅参考）
文章来源：站酷 作者：Ant_Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
天猫海信中央空调旗舰店-双十二主页面
已于双十二更换使用
本来是双十一建的模使用的，页面都做好了，后因配合线下活动修改了页面，使用了线下海报改版的页面度过了双十一，所以就不上传双十一的图了，抱着既然做了就不能浪费的原则，双十一改成十二就上线使用了。
（PS：第一次使用C4D，一边百度一边建模，一边百度一边打光调材质做的。。。）
仅用于展示，未经允许，请勿用于任何用途
转自：站酷
作者：杜失忆
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
做To B的同行都知道，降本增效一直是企业中后台绕不开的热点话题，现任公司业务涵盖仓（WMS）、运（TMS）、配、人（HRM），所做项目虽功能各异，但是有一个共同点-大量使用表格。本文受有赞设计师@美芳的启发，将我日常工作通过优化表格来提效的思路整理成文章，一方面是对企业后台的数据表格作一个简单的阶段性总结，另一方面给部门做一个年终分享。
表格是展现数据最为清晰、的形式之一，它也是B端产品和设计师每天接触最多的组件，常和排序、搜索、筛选、分页等其他界面元素一起协同。在企业级中后台中，常应用于：
一次性浏览大量信息-很多图表类型无法展示数据特点，而表格是组织大量信息通用性最高的一种表达方式，既可陈列信息，又可以表达信息之间的关系；
信息之间需对比-表格的归纳与分类，便于用户快速查询其中的差异与变化和关联；
快速确定并执行多种复杂操作-如对信息进行搜索、筛选、增删改等。
通常表格的组成元素以及相关元素会有多个部分，根据不同粒度的用户目标将其解构为三部分：
数据查看：表格的核心-显，用户用来阅览、对比和分析数据。
数据过滤：辅助作用，承载表格的查功能，将数据过滤，方便用户快速查询定位数据，一般位于表格上方。
数据操作：辅助作用，承载表格的增删改的功能，比如常见的“新增”、“删除”、“编辑”按钮。
首先，我们要明确，什么是一个好的表格？笔者认为好的数据表格可读性要强，应便于用户对信息进行快速的扫描、查询、过滤、分析等操作，以获取数据并快速准确地完成目标任务。一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度，拆分到表格的设计目标就是：易读、易查找、易操作。
数据检索区可以看作表格的导航，按预定目标过滤出某种具有特定性质的数据，将操作者所关注的数据展示到前面，便于快速查看查看、对比、分析信息的操作过程。从用户角度出发，按不同粒度的数据检索方式分为3种方式，分别对应不同程度的用户。
搜索：当用户有相对明确的选择目标时，需定点查看，数据多且杂乱无规律；
筛选：用户目标相对比较模糊，游离于一个大概的范围时，通常用于一些有清晰分类的数据；
标签：查看无交集的数据内容，通常伴随时间、状态的流转。
搜索可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。由于考虑到用户需要手动输入，很难保证精准搜索，原则上所有搜索均为模糊搜索，必要精准搜索的地方使用筛选功能，给用户提供筛选选项。通常上端搜索栏不被限定搜索范围，可以全部搜索。
优点：减少精准搜索带来的记忆负担
缺点：容易把不相关的
优点：搜索匹配精准度高
缺点：不方便，每次只能对单一条件进行搜索
筛选可以帮助用户缩小数据范围，逐步找到想要的内容；或者当用户的目标就是查看某一范围的数据时，筛选将是一种十分快捷的方式。在企业级中后台产品中，筛选的使用场景通常是后一种。
优点：空间利用率高，起到了很好的收纳作用
缺点：无法直观看到所有筛选项
优点：操作效率高，筛选项一目了然，支持输入更多筛选条件
缺点：空间利用率低，不适合选项太多的情况
优点：筛选当前列，更直观，一般情况下表单左侧数据筛选频次越高
缺点：筛选的内容仅限于特定、单次列的筛选，对于首次使用者来说陌生，交互形式需要学习
使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容。主要样式有基础、卡片、胶囊等。
优点：根据标签，可以很清楚知道划分，切换tab就可以筛选内容。
缺点：分类需覆盖选项，并且保证每一项没有交集，分类不能过多，超过7±2个选项可选择下拉筛选。
提升用户体验的一个小细节：默认用户最关注的选项，而非全部，这样可以缩短查询路径，同时给出条目，让用户清晰明了每个选项的数量，便于操作。
在企业级中后台中，用户查看的数据往往属性较多且不唯一，通过简单的检索方式很难定位到目标数据，所以，在实际使用时，常会将大量非交叉关系的属性进行罗列，搜索、筛选、标签切换组合出现，形成多属性组合检索。这种检索更适合于专家用户，他们对于目标数据有明确的定位，知道可以通过哪些属性定位到自己想要的数据。
平铺显示
选用对用户决策有意义、操作频次高的属性作为直接展示的组合检索条件，建议数量最好不超过5个（7±2法则）。
优点：大而全能最大限度避免检索条件疏漏的可用性问题
缺点：易用性不高。大而全可能为用户带来繁杂的第一印象，都是重点等于没有重点，增加用户的决策时间。
折叠展示
如果多属性组合检索中的一部分检索条件不是高频率使用的，但又是必须存在的；则可通过折叠的方式将这部分检索条件隐藏起来，将高频率使用的、数据覆盖面广的1-3个属性直接展示出来。
在设置组合检索项时，应考虑每一项检索甚至是多属性组合检索是否有必要。需从实际场景出发，根据用户对各个检索项的使用频率及组合检索项的数量，来决定组合检索项是直接展示还是折叠展示；以及哪些属性直接展示，哪些属性折叠展示，为各检索项安排合理的展示方式。
产品现状：前言中提过，我司业务涵盖WMS、TMS、HRM，业务极其复杂，数据种类字段众多，使用的检索方式为组合筛选平铺展示，一半以上的页面筛选项超过了9个（不符合7±2原则），大而全的检索方式一方面占据首屏大部分空间，导致首屏屏效低；另一方面用户在寻找具体筛选条件时，仿佛大海捞针，增加了用户决策时间。因后台数据涉密，将下图-招聘中可公开的页面作为案例来可大家分享。
设计优化方向：
业务目标-提升招聘人员的检索效率 ；
设计目标-缩短检索路径，减少检索区占用的屏幕空间，提高首屏屏效，将展示区域更多留给表格；
设计策略-按照用户场景检索路径、检索频次设计信息
但还有2个关键问题：用户场景有哪些？查询路径是什么？哪些检索频次高？依据从何而来呢？通常有两种方式：
依据一：数据埋点，每个操作埋个PV（点击量）,一个月后再看每个操作的数据量；
依据二：用户调研，通过【问卷投放】或【用户访谈】，深入理解用户真实使用场景以及与业务之间的关系。
我采用的用研方式是用户访谈，原因是由于招聘人员和我们产研人员在一个园区，调研方便，得出数据的时间比埋点短；而相比【问卷投放】，用户访谈能细到具体某个字段在场景中的作用。访谈的过程因为篇幅原因就不在此具体讲述，大家可根据自己的实际情况选择适合的用研方式。
访谈中了解到，招聘人员的工作是发布岗位信息，快速招到合适的人。因此他们在该页面的TOP场景就是对岗位上下架，即【新增】和【删除】，而检索的TOP场景有哪些呢？
1.对上架中的已招满的岗位进行下架处理，完整的检索路径为岗位状态>岗位名称>项目
2.设置岗位佣金，因佣金会根据需求方要求及紧急程度动态变化，完整的检索路径为岗位名称>佣金排序
3.汇报招聘进度，对于个别需求量大、急聘的项目，领导特别重视，经常需要导表。完整的检索路径为急聘>岗位名
通过场景得出高频检索为【岗位状态】、【岗位名称】、【急聘】，其他如【项目】和【城市】检索条件只是当岗位名称重复时来进行组合筛选，但该场景在我们业务中很少遇到，如【仙林店诚招配送员】，门店重合率很低。
访谈中我们已经得到了用户对各个检索项的使用频率，那信息排序的原则是：按使用频率，用户目标高于业务逻辑，而改版前并非是按照使用频率排序的。再回到用户场景，在汇报招聘进度时需要检索的【急聘】并不在检索项中，需要和产品经理反映这一点
直接展示高频检索项【岗位状态】、【岗位名称】和【急聘】，其他低频项折叠至高级筛选，【项目】、【城市】
【创建人】作为下拉筛选，查询路径较长，同时将字段组合放置在搜索选项中，采用带标签的搜索，因【岗位名】频次远高于其他字段，默认展示【岗位】
优化后如下图所示：
数据查看区主要用于数据的显，用于对比、浏览，而B端后台的表格中展示的数据往往多且杂，数据种类、字段众多，10-20字段很普遍。这就需要我们在设计的时候先一步对数据进行梳理归纳，提高数据的易读性。我在对我们后台表格进行优化时，会先通过四个维度来自检，然后再有针对性的进行优化。
在讲提升数据查看区的易读性前，我们先来看看该区的结构。数据查看区主要由表头、行、列、单元格四个部分组成。
表头：说明数据的内容，可以包含筛选、排序等功能起到数据解释作用，
行和列：对本行/本列数据的描述，可以理解为是表格的骨架，是用户快速扫描并接收表格布局的关键要素
单元格：表格的主体内容，承载用户的每一条数据，也是整个表格的核心
表格设计的本质是信息内容的有效传达，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上，多做减法。
基于对实际业务需求、目标用户诉求及其行为的理解，列数尽量控制在7±2，列举用户更为关注的数据，用户需要的非重点、辅助性信息可以在详情中展示。
如果不同用户想看到的信息侧重不同，可以让用户自定义列的展示。在默认情况下仅展示最常用、最重要的几个指标（如下图）。这样做的好处是，首先，用户能在表格上方看到所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况；其次，用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰。但需注意系统应记住用户上一次的自定义列设置，减少用户重复操作。
表头，概括每列的主要信息，在用户使用表格中，起到数据解释作用，让数据能与之进行匹配，使用户能够看懂。表头在能够概括的情况下，尽量简炼、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用。
一个简单的检验表头是否精简的方法是：少一个字不可，通俗易懂的说法就是字数再精简用户就不明白意思了。可以让其他同事体验产品，看有没有一些名词定义让用户产生误解。
对于比较复杂的表头，可以定义一个专有名词，鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释，同时满足新手、普通、专家用户的需求。
如果表格数据可以自我解释，表头就不是必须的。如电子邮件的表格，就不需要列标签，因为发件人和邮主题的区分度比较高。
表格中所承载的数据信息才是主体，在进行表格设计时，尤其要注意去除所有非必要的视觉元素，让用户将注意力集中在数据信息上，而不是无关的边框、底色等。所有的视觉元素应该为更好的帮助用户阅读而服务，除此之外，再精美的设计都是对表格的破坏。
去掉竖向分割线：水平分割线能显著减轻长表格在垂直方向的视觉重量，加快大量数值的对比工作。
而竖向分割线的作用是即使缩减元素之间的距离也能区分不同元素，但如果使用了合适的对齐方式分，竖直分隔线就会很多余的。即使要用，也要非常淡，不能妨碍快速浏览。
不使用斑马线：数据量不大且易分辨的情况下，斑马线在很多时候也是没有必要的，因为它们是同一类数据，而且水平分割线就已经能够明显区隔。
分割线的样式尽量轻盈，无关的边框不要抢视觉，数据才是主体，突出内容。
去掉不必要的装饰和颜色，如icon、标签等，虽然能够帮助组织数据、更直观的传达信息，但物极必反，少即是多，要注意克制这些元素的使用。标签能用线性就不用面性，做到轻盈，否则表格中最重的就是标签。
在产品的品牌设计中，字体是规范中的重要一环。然而在设计表格时，简约至上才是关键，尽量避免任何装饰性字体。虽然文本不能够建议你具体使用哪种字体，但数字建议使用Helvetica Neue、Helvetica等其他等宽字体，文本最好不要出现以下情况
不要出现衬线字体：因为个性会产生阅读噪音，不利于用户对数据的理解和思考。
不要出现全大写字体：因为它很难读，需要转化思维。
不要出现使用斜体：易引起视线疲劳，影响阅读。
不要出现多种字体：保持风格统一。
在开发同学的眼中，单元格高度=内容高度+上间距+下间距，在实现设计稿时，通常也是按照这个方式来写的，而不是像设计同学一样按照文字的尺寸来计算间距。其中，文字行高建议设为字号的1.5倍，上下间距设为字号的1.2倍。
当然，在很多很多通用化产品中，存在多个设备屏幕分辨率的差异，为了让每一个分辨率下的产品都能够有较好的展示效果，可设置舒适、标准、紧凑三种高度来满足需求，提供切换按钮让用户自己控制显示密度。
合适的填充和边距对于视觉设计至关重要，以保证易读性。定义列的间距时，我通常的做法是N1保持不变，将N2定义一个最小值，N2再根据表格的宽度自适应变化。表格主要适配到这个最小宽度，这一步骤通常的设计系统的初期就要完成，一方面可根据自己项目目前情况，按照导航宽度等固定尺寸确定最小的表格宽度，这样在处理最小尺寸时，可以有一个明确的边界，同时能与开发同学进行理解沟通。当表格宽度大于页面宽度，固定首尾列，左右滑动。
合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐（符合格式塔心理学中相近原则）能够很好的形成视觉引导线。通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。
文本左对齐：更的阅读浏览顺序，包括非比较型和固定长度的数字，如日期2020-12-04（补0是数字书写规范）、编号1948696等；
数值右对齐：金额、长度、高度等，数字是从右往左读的，通过数值位数的长短即可对比数值的量级和大小，方便数值的比对。这是因为在对比数字时，首先看个位，然后十位、百位等；
最后一列右对齐：通常是操作，即使没有纵向分割线也能很好的起到分隔的作用，视觉上看表格是一个方方正正的格子，比较整齐；
当表格单元格中没有相应数据时，要避免直接留出空白单元格。空白格容易造成用户的困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？正确做法是，数据不存在（数据库中没有该字段）用“-”，没有数量（数据库中有该字段）用“0”，且小数点后位数、单位，都要与上下单元格保持一致。
在Web端，数据量动辄上万条，容易出现浏览器响应太慢或者浏览器内存溢出的情况。使用分页器有哪些优点呢？
分页可以缓解服务器的加载压力，每翻一页加载该页的页面，缩减单次加载的数据量来缩短等待加载的时间，从而达到少量多次的体验。这就是为什么哪怕是移动时代了，很多表格还是使用分页组件。
分页可以跳跃查看数据，灵活性更高、步骤更短。
表格设计大原则是整张表不要超过一屏，每一页的默认行数：10行以上，减少翻页的次数。但考虑到每个用户的使用习惯，在给出默认行的数量后，可以让用户自定义每页的显示的数量，相比于跨屏翻页而言，向下滚屏会更便利。
当表格数据无数据时，翻页控制按钮不可见。
我在接手我们后台产品之初，在对业务人员进行角色调研时就收到反馈到有些页面非常难用，有些就很好用。为什么会出现这样的情况呢？如下图所示，被投诉的表格单操作项就有6个，一方面容易误操作，另一方面左侧的数据展示内容有限，易读性很差。
对于单条数据操作频繁的场景，我的方法是，当超过三个操作项时，将操作低频折叠收起。这样做的优点是界面简洁明快，信息密度低，可以帮助页面突出更加重要的信息，减轻空间压力，减少干扰。
工作中常常会遇到单元格数据过多的情况，常见的方法有两种：
定义一个单元格长度或字数限制，超过该范围以"..."显示，鼠标悬停时出现气泡显示完整内容。
多行显示，这种方法让平铺直叙，让用户可以直接了当的看到所有信息，在B端使用层面上还是不错的，但是超出三行就会挤占行高度，建议不要超过两行，超出可“...”显示。
数据过多时，单元格长度如何定义？超过哪个范围“...”显示呢？
定义长度的依据：根据业务字段，防重复。保证用户在扫视的时候，对重要字段能快速区分、对比。
新增一条数据后，这条数据应该被放在表格的哪里呢？这是个和表格默认排序有关的问题。
表格数据应该默认按添加的时间排序，还是应该按某个字段的名称排序？
如果我们默认按某个字段排序，比方说岗位列表里增加一条“广深常温B2C 叉车员”的字段，而首字母G的数据在表格中极大概率不靠前。这时就会出现一个问题，用户要在茫茫数据中找到刚增加的那一条数据，或者用户根本不知道自己增加的数据已经被插入在了表格里了，这会让他们觉得自己的操作失败了。
解决这个问题的一个方法就是按照数据添加时间排序，默认创建的在最上面，体验上创建完反馈，马上就出现了变化，且针对数据的操作频率较高，方便用户发现与查找。同时也可以用带排序的表头，让用户自定义排序。
前面内容降噪有讲到尽量控制列数在7±2，非重点内容通过更深的入口查看，关于详情查看可以分为跳转和点击详情。
跳转：把 ID、名称等唯一性标志的字段加上超链接，直接显示链接色或者开始不显示，鼠标hover上去才显示链接色，点击可以查看该条记录的详情。
详情：在操作列中增加“详情”功能，点击查看详情。
关于表格详情查看的展现形式，按可承载的信息量由少到多依次分为折叠展开、弹窗、抽屉、及新增页面四种类型。
直接在表格里展开（可以是详情，也可以是二级表格），无需打开新页面即可查看附加信息，防止用户迷失。
适用场景：信息量较少的情况
弹窗是一种中断用户当前操作并对其进行补充、或者对当前操作进行强制反馈的交互形式，需要用户进行强交互，它可以保留用户当前进程的情况下，指引用户完成一个特定的操作。主要分为模态弹窗与非模态弹窗两种形式：
通常这类弹窗只会在屏幕上短暂停留，几秒就会消失，也因此用户感受不到他的存在。它的缺点也非常明显，展示时间较短，不适合展示重要信息、不能承载大量文案。在详情查看页面中并不适用，此处就不再进行拆解。
位于浏览器的主页面核心区域，需要用户对它做出相应交互，弹窗才会消失。
优势：通过全局的半透明黑色能够让用户更加聚焦，集中精力去处理好当前事情，能够通过透明度展示背景，让用户了解到自己并没有离开当前页面
劣势：打扰用户，感到强烈的中断的感受
适用场景：数据详情体量不大，页面内容较轻时。同时，不需要参照上级页面内容，有快速回退的诉求。
侧滑抽屉相比弹窗减少了页面层级和隔离感，有较强的连贯性，适合与原页面具有连贯结构的内容的展示。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息，这让用户能够解析大型数据集，而且在涉及到多个项目时不会丢失位置。可自定义上下左右四个方向，一般右侧滑出最为常见。
适用场景：详情页的内容较多时，且有快速切换主体的诉求。
新增页面几乎是万能的，无论页面内容量是多少、页面间是否连贯、以及使用频率怎样，都可以使用。新增页面又分为：覆盖当前窗口以及新窗口跳转两种形式，在场景上可以根据两者差异进行选择。
在详情查看中，二级页面使用频率是非常高的，需要用户在A与B页面之间进行来回切换，这时候考虑页面反复出现是否流畅，是否有切换成本的产生，本着产品效率至上的原则，新增的页面建议新开一个窗口跳转而非覆盖，如下图：
适用场景：当详情页承载内容过多且里面的操作相对复杂时。
数据操作主要是针对表格数据的增、删、改，从控制范围可分为：单行操作、批量操作、全局操作。
单行操作也称行内操作，常见的显性与隐性两种方式。显性操作，操作项显示在行内，直观明了；隐性操作，鼠标悬停时才显示操作项，界面简洁，留更多的空间给需要查看的数据内容，减轻空间压力，减少干扰
显性操作，文字按钮操作项一般不多于三个，图标按钮不多于四个时，操作项跟在行条目后面；当超过时，建议将相对低频操作选项折叠收起，点击"更多"或“...”下拉显示。操作按钮致灰时，鼠标选中可显示原因。
隐性操作，如果行操作不那么重要，或者说行操作过于啰嗦影响用户阅读时，可将所有的操作进行隐藏，当用户鼠标悬停时进行展开所有操作。这种方式能上满足用户快速查看与编辑的需求，但是在实际使用中，用户的初次使用门槛较高，需要有一定的学习成本。
适用于数据量较大的表格，通常把操作放在表外部上方，这样操作更便捷，同时便于批处理和单个操作。批处理操作模式允许用户对一行或多行对象执行操作，通常与复选框操作配合使用，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。
统揽全局，无需选择数据内容即可进行的操作，常见的【新增】、【导入】操作。
三种操作：两个在表格外，一个在表格内，那么很自然的我们会遇到一个问题，一个功能该放在哪呢？下面我通过一个案例来说明。
产品现状：在HRM系统中，不同的权限使每行的数据拥有不同的操作项，而且这些操作因为视觉特征比较显眼，容易分散用户的注意力，且因表格空间有限，操作区的各操作项过于接近，误操作率相对较高。
设计优化方向：
业务目标-提升数据操作效率 ；
设计目标-降低误操作率，让用户聚焦内容；
设计策略-控制操作项的显示数量，将操作项分类
习惯上我们会认为一行数据是对某一个对象实例的描述，比如在上图表格中，一行数据是对某个待入职员工的描述，包括他的姓名、工号、在职状态等等。所以表格内的操作也是针对这个对象的。
一般我会把一次只能针对一个对象操作的功能放在表格内，比如【详情】和【编辑】，因为查看详情不太可能一次查看多个对象，编辑修改信息也是。那么反过来，不属于任何一个对象实例的功能就需要放在表格外的操作栏，比如说【新增】。另外一种需要放在表格外的功能是批量操作，因为批量操作需要对多行数据进行同时操作，也不是属于单个对象实例的。以此为依据将图中操作分类如下：
大家应该也有遇到过按钮像案例中【删除】、【入职生效】既可以作为行内操作，也可以作为批量操作的问题。作为行内操作，优点是更便捷，；表外作为是批量操作，这样更方便的同时操作多个数据，但如果只是操作单个数据时就会增加用户的操作步骤。或者两种方式都提供，虽然更灵活但是会让页面比较冗余。
其实怎么选择还是要根据具体业务场景来决定，首先判断这俩操作是不是高频功能。在我们的业务功能中，已入职和离职的员工在该页面不能操作删除，且【删除】是相对低频地，完全可以只提供单个删除功能。【入职生效】作为高频功能，与产品经理讨论后提供行内操作和批量操作，选择这个方案的原因是，该功能作为行内操作已上线运营了1年时间，移除会产生学习成本。
批量操作常见的摆放位置有三种形式。
方案一：和全局操作一起置于表左上方或右上方
因批量操作需要勾选左边复选框，放置在表右上方不符合操作动效，本着效率至上的原则，此处不考虑放在右上方。
优点：操作项信息前置能清楚的知道有哪些功能，无需用户记忆
缺点：但当批量操作较多时，会挤占页面空间，导致操作按钮很多，不易查找
方案二：默认不显示，勾选激活后显示于表左上方
优点：减少了相应的视觉噪音，业务拓展性强
缺点：有一定的学习成本，没有勾选时不知道有该操作项
方案三：直接显示于表左下方，但需勾选激活后操作
优点：上内容下操作，符合操作动线
缺点：和分页放置一起不易于业务拓展
根据我司业务，综合考虑后选择方案三，放置于表的左下方。
单行操作根据操作频率优先级为入职生效>详情>删除>编辑，其中编辑和删除属于低频操作，可折叠隐藏。批量操作-导出也是低频操作。最后定稿方案如下：
2B产品应该着眼于业务，本文是根据我司业务提供了一个表格设计基本指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。但是表格设计的原则应该是通用的：
从用户阅读表格的目标出发设计表格的内容和布局
从提高用户阅读速度的功能角度出发进行表格的视觉设计，避免过度设计
当表格指标、数据过多时，提供一些自定义的工具帮助用户自助选择出最需要的数据条目
文章来源：tob.design 作者：佩奇一只居
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在B端设计中，数据可视化是必不可少而且非常重要，越来越多的设计师需要和数据打交道，但是很多设计师不懂可视化当中不同用途的图表规范，只是单纯设计出好看的数据图表，却不能给用户带来更多的信息和价值。
因此掌握数据可视化能力是设计师必不可少的一个技能，然而目前国内互联网对于数据的教学不够全面，这让很多B端的设计师很苦恼，所以今天我结合自己的工作经验和大家分享一下--“数据可视化之图表设计”，为大家梳理一套完整的数据可视化的框架，以及关于可视化设计的基本准则和规范。帮助大家理解什么样的数据对应什么样的图标，了解颜色的意义，知道数据排版的要点。
将不可见的数据转化为可见的图形和符号，从中发现规律和特征，以获取更多的信息和价值。
在当前互联网的时代下，一页图可能对标一个庞大且复杂的数据表格，按照人类本身对图的记忆远大于对抽象文字的记忆，所以我们要学会让数据说话，数据可视化除了“简洁直观”，还可有容易理解和记忆、传递信息更丰富的特点。
接下来我们开始思考如何制作数据可视化图标？首先规范的流程是最好的前提，下面的工作流程结合我自己的经验和日常企业的数据分析场景，找到了一个合适的参考，我们就可以步步为营，避免很多不必要的返工，保证设计质量和项目进度。
很多小伙伴在做可视化图表设计过程中，肯定遇到过这样的困扰，发现自己做完的图标并未能准确表达自己的意图，也无法传达自己的意图，图表通常让用户看完困惑不已，主要问题出现在分析的维度没有找准或定义的比较混乱，面对B端庞大复杂的图标，同样的一个指标的数据，我们从不同维度分析就会出现不同结果。用一句古话来形容：横看成岭侧成峰。
国外专家Andrew Abela曾整理了一份图表类型选择指南图示（如下图），他把数据的关系分成了4种类型，帮助我们去选出合适的图表来呈现。
上图向大家展示了数据分析常用的4个维度，我们在选定数据指标后，我们需要和数据产品经理沟通我们核心需求，是我们想通过可视化向用户传递什么价值信息。上图引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题，我们在进行图表设计时首先进行需求的分析，熟悉数据并且明确数据要展现出来的信息，然后选用合适的图表来进行数据的展现。
联系：数据之间的相关性
分布：指标里的数据主要集中在什么范围、表现出怎样的规律
比较：数据之间存在何种差异、差异主要体现在哪些方面
构成：指标里的数据都由哪几部分组成、每部分占比如何
考虑到日常企业的数据分析场景，图中有些图表使用频率是非常低的。所以我参考了上图的部分内容，对其进行了总结，重新整合成三个维度
图表的作用，是帮助我们更好地看懂数据。选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 ，根据数据选用合适的图表展现来把数据的信息传达给用户。因此我们从数据出发、熟悉每种图表的定义、适用场景、优缺点，从功能角度对图表进行分类，这样才能快速选择合适的图表。
（1）柱状图
定义：柱状图是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。
特点：
1、这个分类不限于地区、品牌等，可以是一个时间周期；
2、数量控制在5-12条最佳；
使用建议：
（1）使用合适的宽度去适配柱条的宽度
当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。宽度推荐使用在1/2 柱宽到 1 柱宽之间，但也要视情况而定。
（2）不推荐采用全圆角
柱形图可以有适当的圆角，全圆角则有可能歪曲可视化图表的表达，用户可能无法明确是圆心还会顶点作为峰值。
（3）不要使用非水平和竖直的文字标注，也不要使用转行
有时坐标轴上的注释文字会很多，所以很多人为了妥协，在小空间内显示出所有的文字标注内容，而使用倾斜的文本，或者将文本转行处理。
不要用过于复杂的设计形式，数据可视化的第一要义是简单易懂，所以在遇到标签文字过长时，可以采用将柱状图转化为条形图
定义：条形图是用宽度相同的条形的高度或长短来表示数据多少的图形。条形图能够使人们一眼看出各个数据的大小，易于比较数据之间的差别。当条目较多，如大于12条，移动端上的柱状图会显得拥挤不堪，更适合使用条形图。
特点：
1、与柱状图类似，只是交换了X轴与Y轴位置；
2、多用于竖长的显示区域，例如手机端、大屏的一侧；
3、多用于top排行或分类名称较长的情况；
4、数量一般不超过30条，否则易带来视觉和记忆负担
使用建议：
（1）采用有序排列，轴标签右对齐
对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好的查看数据。
可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。
（2）标签直接显示在柱体上
条形图还可以通过省略横轴和纵轴，并直接在柱子上表明数值，来降低数据墨水比，进一步提高信息的获取效率。
定义：用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。折线图分为直线折线图和曲线折线图。折线图可以清晰的反映数据是递增还是递减、增减的速率、增减的规律（周期性、螺旋性等）、峰值等特征。
特点：
1、横轴如果不是表示连续数值，折线图的意义不大
2、数量一般不少于3条，否则用柱状图更合适
使用建议：
（1）反映事物随时间或有序类别而变化的趋势
折线图看的是趋势，所有不是有序类别的不适合使用折线图
（2）视觉美化
折线图可以清晰的反映数据是递增还是递减，不能和面积图累计的概念混淆，由于折线图放在界面上的视觉重量很弱，所以我们可以通过添加微渐变加重视觉。
定义：面积图又叫区域图。它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，颜色的填充可以更好的突出趋势信息，需要注意的是颜色要带有一定的透明度，透明度可以很好地帮助使用者观察不同序列之间的重叠关系，没有透明度的面积会导致不同序列之间相互遮盖，减少可以被观察到的信息。
使用建议：
（1）不要超过7个序列
当数据系列过多时，往往造成用户难以观察的痛苦，所以建议使用堆叠面积图时数据系列最好不要超过7个。
分组条形图属于条形图的一种，又叫簇状条形图，是一种以不同分组高度相同的长方形的宽度为变量的统计图表，每个分组中的柱子使用不同的颜色或者相同颜色不同透明的方式区别各个分类，各个分组之间需要保持间隔。
特点：
（1）适用场景
分组条形图适用于表达相同分类不同组别的数据，或者相同组别不同分类的数据，简而言之，就是根据一个相同变量的不同分组进行数据表达。
（2）不适用场景
分组条形图不适合用于表达分组过多的，数据量较大的数据，也不适合用于表达趋势类的数据。
定义：双向柱状图又叫正负条形图，是使用正向和反向的柱子显示类别之间的数值比较，其中分类轴表示需要对比的分类维度，连续轴代表相应的数值。
定义：一种圆形直方图，使用半径长短表示数值大小。可以在视觉上夸大数据之间的差异。
特点：
1、由于面积等于半径的平方，玫瑰图会将数值之间的差异放大
2、南丁格尔玫瑰图不能用于表示占比构成
3、数量：一般 不超过30条，否则易带来视觉和记忆负担
定义：雷达图又称为蜘蛛网图、网络图，蜘蛛图，星图，是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，所有这些方面都可以类似地量化，常用于排名、评估、评论等数据的展示，比如我们玩王者荣耀中英雄的各项性能指标。
特点：
1、指标得分接近圆心，说明处于较差状态，应分析改进；指标得分接近外变现，说明处于理想状态
2、数量控制在5-8个最佳
定义：对比分类数据的数值大小以及是否达标
特点：
1、可以通过标记刻度区间，来进行更好的评估
2、数量控制在10个以内
定义：由多个梯形从上而下叠加而成。从上到下的项有逻辑上的顺序关系，梯形面积表示某个业务量与上一个环节之间的差异，通过漏斗各环节业务数据的比较，能够直观地发现和说明问题所在，为决策者提供一定的参考。
特点：
适用于业务流程比较规范、周期长、环节多的单流程单向分析，不适合表示无逻辑顺序的分类对比
使用建议：
（1）漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程，如果数据是无逻辑顺序的占比比较，建议使用饼图更合适。
（2）可以根据数据选择使用对比色或同一种颜色的色调渐变，从最暗到最浅来依照漏斗的尺寸排列。切记，不要添加许多图层和颜色造成漏斗图难以阅读。
定义：用于表示不同分类的占比情况，通过弧度大小来对比各种分类，将一个圆饼按照分类的占比划分成多个区块，整个圆饼代表数据的总量，每个圆弧所在的块表示该分类占总体的比例大小，所有圆弧所在的块组成的圆饼等于 100%，这样可以很好地帮助用户快速了解数据的占比分配。
特点：
1、可以通过标记刻度区间，来更好的评估
2、数量控制在10个以内
使用建议：
（1）饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为100%
（2）饼图不适合被用于数据的比较
定义：本质是将饼图中间区域挖空
特点：
（1）饼图的整体性太强，我们会将注意力更多集中在扇形的面积上，环图则可以很好地避免这个问题
（2）建议分类数量不超过9个
使用建议：
饼图更加集中面积，环图会集中在角度和弧长上，所以我们中间的空间利用率还可以更好的利用。
定义：旭日图（Sunburst）由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。
特点：
1、旭日图=N张饼图
2、离远心越近，代表层级越高
3、下一层级的总和构成上一层级
4、可以无限向外扩展
定义：堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量。如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。
特点：
1、适合表达总量和分量的构成情况
2、分类指标的纵轴起点，并不是从0开始，而是在上一个分类基础上叠加
使用建议：
1、图表有重叠的数据时，类别数量越多，重叠越多，因此可见度越低，所以不建议堆叠面积图中包含过多数据系列.
2、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。
3、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更好的展示效果。
定义：堆叠柱状图是柱状图的扩展，不同的是，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比，因此非常适合处理部分与整体的关系。
特点：
1、二级分类并不是按照同一基准对齐的
使用建议：
大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。
定义：通过显示正值（收入）和负值（支出）对总量的贡献来显示结果累积的过程，因为形似瀑布流水而被称之为瀑布图。瀑布图通过巧妙的设置，使图表中数据的排列形状（称为浮动列）看似瀑布悬空，从而反映数据在不同时期或受不同因素影响的程度及结果，还可以直观反映出数据的增减变化，在工作表中非常实用。
特点：
1、过程值为正的时候，向上加；
2、过程值为负的时候，向下减；
定义：特殊高亮的形式显示数据集中的区域和数据所在的地理区域的图示。使用地图作为背景，对数据的地理分布显示直观通过颜色深浅、气泡大小等容易判断度量的大小，将数据在不同地理位置上的分布通过颜色或者气泡映射在地图上。
特点：
1、结合散点：位置坐标更清晰
2、结合飞线图：表达起始点和目标点的链接或流向关系
使用建议：
（1）必须要有地理位置
（2）展现的通常是以某个地区为单位的汇总的连续信息
（3）当你用基于地图的热力图的时候，颜色梯度变化一定是有规律的，一定根据数值递增递减来变化的，否则在视觉上产生错误引导
定义：数据点在直角坐标系平面上的分布图，表示因变量随自变量而变化的大致趋势。
定义：气泡图是显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量（X和Y轴）之间的关系，数据显示为点的集合。与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。
特点：
有一定的数据量是展现三个变量之前的相关性，数据具有3个序列、特征及相关值。
举个栗子：
我们回归到线下场景，我们通常在逛生鲜超市类如盒马生鲜、沃尔玛等，会发现里面售卖的鸡蛋、生鲜类会比外面便宜很多，因为他们容易过期，属于成本极高的食品，通过限购来让他们引流，从而吸引更多的顾客来买那些成本低、单品收入高的商品。
最后给大家总结一下，首先我们拿到数据后先明确我们的使用目标，是让用户用最短的时间了解到数据带来的信息，结合每个图表的优缺点，选择合适的图表，从需求和目标出发，切忌盲目的增加和删减元素，图表的易用性大于它的美观度。
以上就是本篇文章的全部内容，数据可视化是一门庞大系统的科学，关于可视化相关的知识还有很多没有涉及到，例如可视化图表的构成、图表运用场景、数据可视化大屏等等，后续希望大家持续关注。
文章来源：tob.design 作者：佩奇一只居
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
