本文主要从业务分析、交互体验和设计规范三个层面进行总结。
与C端不同，B端产品主要围绕业务为核心展开，面向专业的人员，有固定的业务属性，我们只有将业务理解透彻，熟悉业务的运作流程，才能在B端设计过程中，输出良好清晰的设计架构，更好的解决业务问题。因此，设计师的业务分析能力在B端设计中至关重要。进行业务分析可以从以下几点着手：
我们可以从多方面收集业务相关的信息，包括梳理需求文档，与业务人员沟通等，来了解行业背景、业务目标、组织架构，理清一些专业名词等。业务场景理解的越深入透彻，我们才能建立起一个系统性的逻辑思维，对我们接下来的设计脉络的梳理以及整体设计的把控是越有利的。
我们可以通过绘制业务流程图，将零散的业务信息通过具象的流程图清晰地呈现出来，有助于我们宏观系统的了解整个功能流程，同时也能够确保业务的标准流程都能够走通，不会出现逻辑问题及功能场景的缺失。
B端用户因其岗位角色的不同，使其具有清晰的角色权限。比如普通成员、管理员、超级管理员，分别对应不同的权限，不同的权限背景下，其功能和业务路径也是不同的。理清角色权限，聚焦当前角色本身的任务流程，避免被无关的信息干扰，可以使我们的业务功能更加清晰，避免冗杂无用功能在不同角色间的穿插，有助于分解信息结构呈现的复杂性。
我们知道，B端设计的核心目标为降本增效，在交互体验层面可以理解为降低认知成本，提高使用效率。而B端设计的一个显著特点就是功能、场景复杂，要达到降本增效，需要我们在交互体验层面上注意以下几点：
B端注重对页面的高效操作，因此在设计的过程中要保持简洁克制，排除过多的干扰元素，聚焦主要功能，弱化或隐藏非必要功能，保证页面信息呈现轻量化，降低用户认知负荷。
同时，通过视觉设计，比如颜色、字号、字重、合理排版等，使页面信息呈现有层次、有重点，能够合理有效的进行优先级的引导，页面信息呈现更加清晰有序，降低页面的复杂性。
设计过程中，遵守设计规范，在视觉与交互上保持一致性至关重要。
一方面保持视觉上的一致性，包括字体、颜色、间距、结构等，能够使页面信息呈现严谨有序，保证易读性；另一方面，保持整个系统交互操作的一致性，则可以大大降低用户的学习成本，同时还能够提升开发效率。
B端功能交互逻辑复杂，在设计过程中，尽量保持已成标准的用户操作习惯，尊重用户已有的认知，保证内容的可理解性，可以增加用户的熟悉度，降低学习成本。
B端的信息结构复杂，如果将信息完全平铺呈现，不仅占用页面空间，还会大大加重用户的认知负担。这就需要我们站在用户的角度，基于用户的行为路径，进行信息层级的划分。
第一，对页面信息进行梳理，明确主要信息和次要信息，必要信息和非必要信息，将次要信息和非必要信息进行隐藏、收起、删除等，可以有效聚焦核心内容，避免分散用户注意力；
第二，对需要展示的主要、必要信息进行分类归纳、信息分组，通过合理的页面排版布局，使信息结构清晰有序的呈现；
第三，注意层级步骤的拆分，让用户逐级获得信息，路径清晰，避免过多信息杂乱无序的呈现，增加用户认知负荷。
首先，我们通过预测用户行为，在关键交互节点增加功能曝光，给予用户操作建议和提示，可以帮助用户高效流畅的完成任务目标；其次，对用户行为进行预测，主动帮助用户完成一部分操作，比如信息默认值填充等，可以提升用户体验，减轻用户的操作负担。
B端产品结构功能复杂，有使用学习的过程，如果对B端产品进行大的改版升级，会让已经熟悉旧版本且已经产生使用习惯的用户产生一些不适应感。保留旧版本返回入口，让用户慢慢习惯过渡到新版本，可以减小用户学习的压力，避免因习惯问题影响产品的正常使用，无论是对用户的接受度还是对我们改版的顺利落地都是一种不错的方式。
B端系统庞大且复杂，建立起统一的设计组件和设计规范至关重要。
组件规范的建立：
第一，能够保证交互及视觉设计的一致性，提升设计效率和降低用户学习成本；
第二，能够提升团队的协作效率，提高设计还原度，降低对接成本；
第三，组件化设计，可复用性强，能够提升开发效率，在后期的迭代开发中，也可以进行统一的更新和应用，能够减少开发工作量，便于维护。
设计规范比较具体，且不同的项目在规范细节方面也会有所不同，下面主要整理了一些比较常涉及且可以通用的规范和组件。
B端系统用户的主流分辨率为1920、1440和1366，我们在选择分辨率时，首先确定目标用户使用场景是否对分辨率有特殊要求，如果没有特殊的场景分辨率要求，基于上下好适配性，通常会选择1440的尺寸进行设计。
由于B端业务场景复杂，信息量比较大，通常选用24栅格系统。
考虑结构布局，根据不同的结构布局，给出动态缩放适配方案。常用的布局为：左右布局和上下布局。
左右布局：通常是将左边的导航栏固定，对右边的工作区域进行动态缩放。
上下布局：通常是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。
B端用色讲究简洁克制，使用户能够高效聚焦功能内容，Ant Design上面对色彩应用的描述为“色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。在不破坏操作效率，影响信息的清晰传达的这些原则之上，理性的选择颜色是关键。”基于色彩使用的目的，B端用色主要分为主色、功能色和中性色。
主色：通常是品牌色，或者根据用户群体、产品定位以及使用场景来定义，主要用在主要按钮、选中状态、高亮信息、空状态等。
功能色：代表了明确的信息以及状态，如成功、错误、提醒、链接等。功能色的使用需要遵守用户对色彩的基本认知。
中性色：主要用于文字、分割线、边框、背景等。
字体：中文常用字有：Ping Fang SC、微软雅黑、思源黑体；英文常用字体有：San Francisco UI（SF字体）、Helvetica Neue、Arial。
字号：最小字号不小于12px，常规字号大小一般为14px。辅助文字12px，正文（常规）14px，小标题16px，标题18px、主标题20px，字号的选择可根据具体情况进行定义。
字重：字重通常选用regular、medium、semibold，分别对应代码中的400、500、600。
行高：行高设置一般为字号的1.5倍左右，我们也可以采用，字号+8px做行高。
(1)按照基础样式分为：主按钮、次按钮、虚线按钮、文本按钮、链接按钮
(2)定义按钮的交互状态：Normal（默认状态）、Disable（禁用状态）、Hover（悬停状态）、Press（点击状态）、Loading（加载状态）
(3)对按钮进行规范的制定：包括尺寸、圆角、文字、颜色、背景等
表单通常由输入框、选择器、单选框、多选框等组成，具有收集、校验、提交数据的功能。
(1)表单的状态：设计时，要明确规范表单的三种状态
默认状态：即用户输入信息之前的状态；
焦点状态：即用户正在输入信息时的状态；
反馈状态：即用户填写信息后的校验状态。
(2)输入顺序：表单设计时，信息的输入顺序按照先易后难，先必填后选填，先公开信息后隐私信息进行，可以减轻用户填写表单的心理压力。
(3)对齐方式：对齐方式分为三种：顶部对齐、右对齐和左对齐。
对齐方式的选择，需要根据浏览效率、屏幕空间以及标签长度来实际判断，做出选择。
首先，需要明确，浏览效率上，顶对齐＞右对齐＞左对齐。
然后结合屏幕空间和标签长度做判断：
顶对齐：效率最高，标签长度可以更灵活一些，但垂直空间占用多；
右对齐：效率次之，文本字数不可控但又不是很多时可使用右对齐；
左对齐：浏览时间最长，效率最慢，标签字数可控或者需要用户谨慎确认信息时，可使用左对齐。
需要注意的一点是，顶对齐的标签布局之间要有合适的垂直间距，才能浏览舒适，效率更高，通常使用输入框 50%至 75%的高度作为相邻输入框的垂直间距。
(4)校验反馈：校验反馈要具有准确性和及时性。
准确性：主要体现在，要给予用户准确清晰的错误原因和解决方案，以及准确的错误位置。
及时性：表单填写时，出现错误是难免的，为了避免用户盲目填写信息或者出现大面积报错，可以进行实时的校验反馈，比如用户输入完成鼠标失焦后进行信息校验，但反馈的前提条件是不打扰到用户。
需要注意的一点是，成功或者错误等的反馈，不能仅用颜色来区分，需要加入明确的图标和文字来提示，以达到视觉无障碍设计。
(5)标签与占位符：标签和占位符都要尽量简洁，避免文字过多，给用户造成视觉负担，信息描述应该准确、直观且完整。
(6)表单分步：当表单内容多而复杂时，会让用户感到烦躁和不知所措，表单分步不仅有利于减轻用户的填写负担，缓解焦虑情绪，还能够明确了解表单填写的步骤流程。
(7)数据与默认值填充：在用户进行信息录入时，可以通过后台数据库进行匹配，自动填写已知信息，也可以设置合理的默认值，满足多数人需要的默认选择，帮助用户节省时间，快速完成表单填写。
(8)输入框宽度与高度设定：输入框的大小通常对用户输入信息的多少有着暗示作用，输入框尺寸越大，用户会认为是可以输入很多字的。因此，并不是所有输入框宽度一致，就是好的设计，需要根据实际情况，设定输入框宽度，但是也不能设定太多宽度，宽度太多会使表单视觉效果凌乱，宽度设定要合理适当。
输入框的宽度是固定的，但是高度可以根据内容进行自适应调整，来保证信息的显示完整性，给用户以良好的体验。
(9)选项便捷性：表单填写要始终遵循能不填写就不填写，能选择就不要输入的原则。当选项多于5个时，适合使用下拉框的形式进行展示。当选项内容过多，超过下拉框的高度，用户筛选比较困难时，可以考虑是否输入更快，采用输入的方式。
B端表格的设计本着清晰易读的原则进行，设计上需要我们注意以下四点：
(1)表格宽度：表格宽度的处理需要考虑自适应问题，主要有三种方式：
a.设定表格的最小宽度，最大宽度不做限制，可以无限延伸，当表格达到最小宽度时，做极限处理；
b.根据需要设定多个等级的最小单元格宽度，当单元格达到最小宽度时，做极限处理；
c.也可以按照表格宽度的百分比，设置单元格宽度，或者固定部分无放大需求的单元格宽度，对剩余单元格按照百分比进行缩放；
(2)极限处理：极限处理主要针对最小宽度，当表格达到最小宽度时，信息展示不全的情况下，常见的处理方式有：文本信息缩略显示、文本信息换行显示、横向滚动显示。
(3)单元格高度：单元格的高度直接影响表格的高度，信息呈现量，以及阅读体验。单元格高度一般在38px~58px之间，高度太大或者太小都不利于阅读，个人实践建议高度为字体行高的2.5倍。
(4)对齐方式：为了提升浏览效率和数据的对比效率，通常采用文字左对齐，长数字右对齐的方式，空数据使用“-”填充。
总之，做好B端产品的设计，需要我们多思考、多总结，规范与标准不是一成不变的，设计过程中要与业务、产品、前端多沟通，才能够做出体验更好的产品。
作者：陈小花儿 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在开始讲解 B 端的图标设计前，我们先来复习一遍图标设计的基础知识。相信不少同学看过我们之前更新的图标系列干货，没看过的可以先收藏起来，等等看完本篇分享后再去阅读……
理解图标，首先关注的是图标本身的类型，在整个 UI 体系中，图标基本就分成3个大类：
工具图标：包含一定产品功能隐喻的简化抽象图形，代替文字节省界面空间，方便用户理解
装饰图标：主要目的是用来装饰界面的视觉元素，样式大于功能，常用于节日活动中
启动图标：产品的启动图标，即用来在系统中打开该产品的图形按钮，基本以自身 LOGO 为主
在 B 端项目中，应用最广泛的必然是工具图标，而装饰、启动图标却鲜有露面机会。但出现的少，不代表没有，解释工具图标前，我们先优先讲解下装饰和启动图标在什么情况下会出现。
其中，SAAS 类服务就有很多会重点强调品牌、情感化设计的案例，例如大家比较熟悉的阿里云和腾讯云。项目中就大量启用 3D 化的装饰图标提升界面的质感。
启动图标则会应用在一些比较大型的项目里，当项目出现了很多下级功能模块或类似插件的体系时，就会采取使用应用图标的方式作为入口。
比如 Figma 也是一个 B 端工具，它的插件列表中就可以看见不同的启动图标。还有类似 Slack、Invision、Teambition 等产品，一个庞大的产品生态就必然会衍生出强化不同子产品身份的需求，就自然而然会用到启动图标了。
最后，就是我们熟知的工具图标了，前两种图标，在前期画不好不要紧，毕竟这类规格的产品会有经验更丰富的设计或总监坐镇，新手当个切图仔即可……
但是工具图标，重要性就不言而喻了，B 端项目对工具图标的需求非常大，几乎每个组件中都会包含图标。
虽然今天网上有非常丰富的图标素材库，但在形式各异的 B 端项目里依旧是供不应求的，各种行业特有的功能、实物、隐喻，只能设计师自己完成。
B 端设计师在图标设计领域的主要工作，就是确定图标样式、设计图标、导出切图。下面的分享我们也会主要围绕工具图标展开。
工具图标的应用主要包含两个部分，线性图标和面性图标。
这里再提图标风格，不是把以前的知识点重新讲一遍，而是要强调 B 端图标的特殊性。和 C 端相比，B 端图标的实用属性更高，并不需要过多凸显本身的视觉风格。
所以，工具图标中，使用大量渐变、插画、投影的类型都要排除掉，它们对 99.9% 的项目都只会造成体验的负影响，不要被网上的追波风飞机稿给带偏。
适合 B 端项目的工具图标只要应用最基础的线性和面形风格即可，一定要划分出差异，应该只包含圆润、纤细、尖锐这几种。
很多人好奇线性和面形图标在 B 端设计中有什么使用上的差异呢？答案是没有差异。
线性和面形的使用，纯粹看设计师在当前场景判断哪个合适用哪个，只要保证对应图标风格统一即可。
不过如果遇到一些比较特殊的情况，比如要表现各类设备的复杂图标，那用线性的做法还是相对合适和简单一点。
对 B 端设计来讲，独立设计图标的步骤是必不可少的，应该掌握的图标规范还是必须要懂的。
我们虽然没有 C 端那么多风格和技法的拖累，但想画好 B 端图标却多出了其它难点，那就是一个页面中出现的图标实在是太多了。
这就引发了我们要讲的第一个规范要点 —— “统一性”，所有同规格类型图标具有一致性的特征，这些特征包含了：
如果不能保证统一性的基本要求，那么整个页面看起来就会非常的廉价、业余。很多新手处理 B 端项目就是应用了多套素材库图标，它们的细节完全不一样，统一性当然无从谈起。
而让整套图标保持统一性，是相当有难度的，其中最难的一点，就是如何让一套图标的大小均衡。虽然我们要对每套图标确定一个固定的尺寸，但不代表图标实际图形的长宽数值是完全一致的。
几何图形对视觉有一定的欺骗性，有不同的大小体验，比如下方案例（鱿鱼游戏乱入？）：
所以，基于这样的特性，每个图标本身都包含了两层属性，图标的占位尺寸和视觉尺寸。占位尺寸指它在界面中的实际占地大小，是透明白的，排版的时候以这个尺寸作为实际的边缘来测量。
而视觉尺寸，则是在占位尺寸下图标图形的实际大小，这个大小是带给我们实际视觉感受的部分。一套图标的不同图形必然视觉尺寸是各不相同的，我们用占位尺寸包裹它们来方便我们进行统一的应用。
所以，使用成熟的图标素材必然会发现图形周边还会有透明的空白区域。当然，不同的素材，这个留白也是有区别的，下一个小节就会解释。
最后要声明一点，一套项目中可以包含多个规格（2-5个）的工具图标，比如导航用的图标比普通工具图标更复杂一点，设计师只要保证每种规格保持的统一性即可。
图标越多，大小的控制越困难，所以专业的图标库绘制就必然会应用图标的栅格系统进行辅助。
在 Ant 的体系中，一个基于栅格的图标实际包含3层，背景层、格线层、图形层。
背景层，即图标展位尺寸，需要先确定出这个元素的大小，然后才是里面的绘制区域。通常，栅格系统会为边缘预留 1-4 像素的内边距（出血位），正所谓四周留一线，日后好相见。
格线层，则是使用的栅格线段，也是最重要的部分。格线层通常由 4 个基本图形构成，包含正方形、圆形、水平长方形、垂直长方形。
这四个图形的长宽大小不一，原因是为了对应几何图形视觉尺寸不同的特征。把它们并列排列，就可以发现它们的视觉大小非常接近。
这些格线的作用，就是提前帮我们确定好视觉比例，帮助我们快速绘制相同图形类型的图标。
但是，不是完美符合这四个图形要求的图标该怎么办，总不能格线把所有轮廓都给你实现出来吧？
格线的另一层作用，也就是最重要的作用，其实是一个用来做测量的工具，而不是轮廓依据。在几何视觉差中，最基础的大小原理是占用面积越大的图形，尺寸感受越大。所以，长宽一致的正方形大于圆形，圆大于三角形。
所以当我们绘制的非常规图形，和类似格线进行对比时，长宽缺少的一侧，就要由另一侧增加数值来填补它的面积。
比如下图 Ant 官方的电脑图标，它的宽是横向矩形，但是中间区域面积较小，所以增加了高度进行平衡。
再看一些其它的案例
这一步没有固定的参数使用技巧，设计师需要将完成的图标置入到其它图标旁边进行调试，确保尺寸是合适的。
格线只是一个图标大小设置的参考工具，一切以最终效果为标准。
理解完图标的基本规范，就到图标的使用逻辑了，解决一些常见的设置误区。
图标该做多大的，这是目前被问到最多的问题。本来应该是非常简单的一件事，但很多工作多年的设计师也搞不清楚。
仔细捋了捋，罪魁祸首就是 AntDesign 这套规范中对图标画布的解释了。
要重点强调，Ant 设计图标的意图，和一般项目的是完全不同的。Ant 作为一套庞大的开源项目，它的图标核心特征之一就是 —— 适应性。
这些图标要被应用到各种不同的设备、显示器、系统中，图标尺寸会用多大，在几倍图环境显示全都是不确定的。所以图标一开始按越大的规格完成，后续实际应用中的缩放、匹配也就越容易，适应性越高。
但是，在我们自己的项目中，这种做法是完全没有必要的，1024 图标的负面影响包含：
在常规项目里，一套项目是可以包含不同尺寸和规格的图标的，而不是我们做一套相同风格的图标在整个应用中无差别使用。
这也意味着，每个图标在产品中的使用场景通常只有一个尺寸，不需要去面临缩放的情况。即使需要缩放，也只是这套图标中的少数几个需要，或者相对特殊的项目。
所以，图标尺寸设定，就是根据当前位置合适的尺寸来制定。可以使用素材在已经设计好的布局中尝试多大的数值合适，然后创建同样的数值即可（尽量以4的倍数为标准）。
我们知道图标的素材非常丰富，不管是 Iconfont、IconPark 还是 Iconsearch 等网站，都提供了海量的素材。但是只要稍微专业点的项目，往往素材库都满足不了，部分规格的图标还是需要我们自己重新绘制。
所以说图标素材就完全没用了吗？当然不是。
图标的正确用法是作为一种快速试错的参照物，它可以帮助我们实现：
在项目的界面设计阶段，我们一向建议优先使用外部的素材，尤其是 IconPark 这种比较统一，还可以快速调节图标样式的工具网站。
这个过程即使素材找不到和寓意一致的也没关系，用相近的图标替代就可以。等到页面布局基本完成以后，最后再集中精力对需要绘制的图标重画一遍（甚至是在开发阶段绘制）。
通过别人的图标来快速匹配尺寸、风格、样式，会帮助我们节省非常多的时间，也有助于我们设计出更专业、美观的图标。
另外，就是针对项目一些偏小尺寸的通用图标，就可以比较放心的应用素材，例如翻页的左右、更多、下拉、搜索等等。
图标的尺寸、样式都确定了，最后就是关于图标的色彩和不同状态的制定了。
前面讲过，B 端项目对图标的装饰属性没有那么迫切，所以正常情况下，太花哨的图标是要尽量避免的。彩色、渐变色、投影，都不应该在这个情况下胡乱使用。
常规的图标只要使用中性色即可，而需要特别对待的图标，色彩可以从主色或者辅助色中选取。比如需要高亮显示的打勾或者打岔。
当然，如果项目涉及到一些特殊的工具图标，类似工厂、工业领域表达实体设备的拟物图标，可以打破这个原则。但是，同样避免这套拟物图标的每个图标用色不同，尽量只使用 3 种以内的颜色完成拟物的填色。
同时色彩的使用还有一个重要的意义就是对图标不同状态的呈现，部分图标会承担按钮的功能，包含默认、选中两个基本状态。
普通权重的图标，未选中状态可以在默认色彩基础上使用透明度来实现。
高权重的图标，则可以在选中的状态替换色彩，或者更改图标的类型，将原本的线性更改成面形并填充色彩制造反差。
完成所有图标的设计以后，最后一步就是切图和导出了，这决定你的图标能不能被正确运用到线上项目中。
在一套专业的 B 端项目中，已经设计好的图标是设计规范的 “资产” 内容之一。图标的文件不能散落在项目的各个界面里，而是在规范页面中有统一的整理和收纳。
这种做法的流程是，先在软件的规范库中创建对应的图标组件（ Symbol / Compoent ），然后再在具体页面中应用，方便后续的统一管理和修改。
而在这个过程中，我们也需要对图标有正确的命名方法，来确保团队调用、检索图标的效率。通常，我的图标命名规范如下：
尺寸 / 类型 / 图标名-状态
示例：
48px/导航图标/表盘页-默认
24px/一般图标/搜索-默认
“/” 号的引用主要是方便软件中对组件层级进行划分，而我调用图标的规则势必是先从尺寸开始，再选择对应规格，最后类型和状态。
提前命名也是方便后续我们切图和导出，但要提及一点，图标的命名不要追求英文化，因为我们的词汇量不可能实现正式的英文命名规则，只会写一堆大家都看不懂的单词。
而开发在使用我们的图标切图时，也不会用我们之前取的命名，会根据自己的命名习惯重新命一遍，写个让他能看懂的名字远比用乱七八糟的英文强。
接下来，就要解释切图的规则了。很多没有经验的设计师切图就只是随手加个切片，然后上传蓝湖发给开发自生自灭了，这是一个非常不合理的操作。
再或者，强行使用 Fonticon 格式，而不管实际情况如何，造成最后实现效果完全不同步或实现不了。
切图是通过前端调用并在浏览器中进行显示的图形，而要被浏览器正常显示，就有必要了解适合使用的切图格式。
图片的格式包含位图和矢量两种，位图是通过记录像素色值的图形格式，假设一张图是 100*100 像素，那么记录 1W 个像素点的色彩，所以无法支持无损缩放。而矢量则是通过记录点线面的坐标绘制出显示图形的格式，可以支持自由缩放。
理论上，矢量格式是最佳的图标切图格式，但是它的限制同样有很多，例如：
前面说过，普通项目中同一图标是很少出现一会儿大一会儿小的需求，所以矢量最大的特征无损缩放，往往就不需要我们去考虑。矢量格式切图的主要出发点是用来应对移动端显示器 1x、2x、3x、4x 等不同倍率缩放的问题，而不是网页端的基本使用。
当一套项目中出现了矢量格式无法覆盖的图标时，那么即用矢量切图，又用位图，就会显得非常的混乱。只有类似 LOGO 等图形元素，才需要考虑 SVG 格式，而不是一看到图标就上。
所以，最适合切图的格式就是位图的 PNG 格式，一方面它是无损的，另一方面它支持透明背景，在切图应用上可以完美和设计稿结合，而这是其它大多数位图格式不具备的特征。
当每次项目完成以后，并不需要通过蓝湖来实现切图的导出，如果切图文件分散在各个项目页面里，那么一定会有很多图标被遗漏，尤其是图标的不同状态切图。
所以，最理想的切图形式，就是将所有图标完成整理和命名以后，一起框选，然后导出成 PNG 格式，再同步给程序员即可。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。
那么我们为什么需要使用表格呢？因为我们有记录和查询数据的需求。
在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。
所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过 X、Y 轴构建的网格系统，将数据有序、清晰得罗列出来。
表格的重要性就体现在企业日常工作中对这些数据进行管理的需求和频次上。
例如为电商 APP 开发了一套管理系统，那么电商运营每天的工作，都要绕着其中销售、物流、流水等重要模块的数据打转，也就是围绕着表格展开工作。
对于多数管理系统而言，数据查询、管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。
甚至，有的中小型项目的所有导航一级页面，只有表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。
而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。
所以，这也是 B 端设计师的价值之一。一个优秀的 B 端设计师势必投入大量精力来提升对表格的认识和表格设计能力。
表格虽然细节设计上千差万别，但在表现形式和阅读顺序上却是基本一致的。
常规的表格必然包含表头栏、列表、翻页器三个部分，根据需求的不同，可能还会增加搜索栏、多选栏、操作栏等常见模块。
主要是用来进行简单的数据搜索和筛选的，当搜索项较少的时候，就可以将搜索结合到表格组件内。而搜索项较多时，则会把它们独立成一个筛选模块到表格组件的上方。
每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型数量。
通常，表头的设计会和下方列表设计有一定的区分，表头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗来增强对比。
列表则是纵向排列数据对象的模块。每个数据对象占一行，行的高度根据内容来制定。横向列表高度和纵向表头宽度重叠的区域称为单元格，每个单元格展示表头对应的数据明细。
常规 B 端项目表格都会限制列表一次展示的行数，极少使用无限滚动加载的模式。因为当数据包含成千上万条时会对本地、服务器性能和交互方式带来一系列的负面影响。
如果数据对象支持多选和批量操作，则我们会在第一列中添加选框，并将选中后的可操作选项放进操作栏中。
翻页器是切换列表页面的控件。通常大数据量的列表包含上千页，所以翻页器只会显示开头几页和最后一页，省略中间的，并增加适合快速跳转的功能。
除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。
B 端项目支持响应式是今天行业的普遍需求，也就是页面内容随着浏览器视图宽度变更而变更。
不同页面类型的响应式逻辑各不相同，而表格是其中逻辑最复杂，也最难理解的一种。
表格响应式规则通常在确定好框架以后制定，优于视觉、交互设计，因为它对视觉和交互产生的影响非常大，是前置条件而不是通过设计稿逆推出来的。
表格的响应式规则比较细碎，我根据下面的顺序展开解释：
- 表格的总宽响应
- 表格的最小宽度
- 单元格的响应逻辑
- 内容的响应逻辑
表格的响应主要是宽度上的响应，整个表格的宽度区域随父集元素的放大而放大。比如父级元素左右内边距为 20px，则表格整体宽度保持和父级 20px 的左右间距。
上方逻辑中表格可以无限延长，但它却不能无限的缩短，因为你不可能做一个只有 10px，20px 宽的表格。
过窄的表格不仅支持不了内容的正常显示，也毫无任何使用体验，所以我们要为表格确定一个最小的宽度。即浏览器视图即使比这个宽度更小，表格也不会再缩小了。
最小的宽度可以结合前端栅格系统使用的 Breakpoint 规则来制定，如 Ant deisgn 中 SM：576px，或 MD：768px。
如果不了解栅格的段落规则，也可以 “凭感觉” 定，最小表格宽度通常在 560-640px，当然，不管怎么定一定要提前和前端沟通，确定尺寸方案。
当表格内容少的时候，最小宽度只是相对较大宽度窄了一点而已。而当表格内容过多，最小宽度无论如何也不够放的情况，那么就会使用横向滚动的交互形式来隐藏超出内容。
单元格响应这是整个表格最复杂的一环，横向内容会超出最小宽度的情况，就是由单元格规则决定的。
首先，单元格本身也有最小宽度，原因和前面一样，1px、10px 宽的单元格没有存在的意义。所以可以根据需要，制定多个等级的最小单元格宽度，应用在不同的数据类型中。
假设表格中包含了 20 个表头，分别使用了 10 个最小 24px 和 10 个最小 80 px 的，那么单元格的总宽最小就是 240+800 = 1040px。
所以当父级整个表格视图小于 1040px 的时候，内容就会不够显示从而触发左右滚动的条件。
当上级表格宽度大于单元格最小总和时，那么单元格也就会随之变宽。最简单的响应逻辑，就是为单元格宽设置百分比。比如 5 个单元格分别是父级宽度的 10%、10%、10%、20%、30%、20% ，那么在父级 1000px 的时候它们分别是 100px、100px、100px、200px、300px、200px。
只要确保百分比的总和是 100%，不管你单元格是比例均分（5个单元格等分各20%宽），还是独立制定（上面案例），单元格宽都是等比缩放的状态。
虽然好理解，但这种初级的做法带来的问题也很多，那就是部分单元格没有被 ”放大“ 的需求。比如常出现在第一列的多选框，或者部分标签单元格、固定操作按钮单元格。
于是，为了预留给有需要的单元格更多的空间，提升体验，就会对这些单元格实施定宽的方式，剩下的单元格继续使用等比，只是计算的方法要减去定宽元素。
比如还是一个占比 20% 的单元格，在包含 2 个 48px 定宽单元格的 1000px 表格中，实际宽为：
（1000px - 2*48） * 20% = 180px
作为单元格的子级，内容也可以独立定义响应的规则。主要包含 3 种情况：
- 无响应
- 隐藏多余
- 换行显示
无响应就是显示的内容是固定的，比如多选框、缩略图、单按钮等单元格内容，它们没有大小变动的必要。
隐藏多余，则是主要应用在文本内容上，当单元格宽度小于当前文本所需宽度时，就会把多余的文字进行省略，这种做法适合应用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家汇南丹路天主教堂一楼“ 变成 ”上海徐家汇南丹路天…“，之后再通过鼠标悬浮弹出文字气泡框的方式显示所有文本。
而换行显示，则是文本或多标签状态下，一行不够显示就换行的做法。除非一开始单行行高预留了多行显示的高度，否则多行内容就会撑高单元格。
以上就是表格在响应式模式下相关知识点。
随着经验的积累，实战经验丰富的 B 端设计师，就会在前期的规范环节制定出完整的表格响应逻辑，应用到前端框架开发和后续的设计，而不是做到哪定到哪。
表格首先是一个展示信息的组件，而单纯依靠布局和排版技巧，并不能解决所有的信息展示问题。所以，针对网页表格的局限性，我们要添加一些交互的细节来提升使用体验。
例如，单页表格数据量较大，有好几屏高，往下滚动后看不见表头，不能很好的识别单元格内容。
或者，表头属性数量较多，需要左右滚动，但是每行数据要不然操作栏目看不见，要不然对应 ID 被滑走了等等。
所以，表格的框架就可以做悬浮固定的模式，将需要被持续露出的栏目悬浮固定。
当然，除了单独栏目的悬浮，也可以使用混合模式，比如表头吸顶的同时固定右侧的操作栏。尽量将固定元素控制在 3 个以内，以免悬浮要素太多影响内容的浏览。
还要注意，除了笔记本触摸板和少数鼠标，一般用户是没有页面左右滚动滚轮的，所以当表格出现左右滚动情况以后，就一定要默认展示进度条，方便用户操作。
第二步，就是和表头相关的操作了。我们都知道常规表格页面中，表格上方还会有个筛选区域，专门用来进行筛选相关的条件制定。
但是，部分项目需求中，会将筛选的功能整合到表头栏目内，而很多新手甚至不能有效的区分筛选和排序的差异。
我们先对这两者做一个明确的定义：
筛选 Filter：对要显示的内容设置筛选条件，不符合条件的将会被过滤隐藏
排序 Sort：对已有内容的显示顺序进行条件设置，不会有内容被过滤或隐藏
这看起来好像很容易理解，但会搞混的地方就在排序的应用上。我们常规以为的排序，就像电脑文件夹列表一样，通过点击表头来决定内容通过哪个属性来进行升序或者降序。
在这种 “朴素” 的设定中，筛选是以单个表头属性为标准的，有唯一性。比如在学生数据表格中，可以以 ID、姓名、年级、年龄或成绩单个属性进行列表排序，选中其中一个属性其它属性的排序就被取消了。
但是复杂的排序并不是 “唯一属性” 的，而是多个属性的并集，以及具备优先级和排序模式。还用学生数据表格举例：
优先根据年龄降序排列，同年龄下根据班级升序排列，同班级再根据成绩降序排列。
这里面叠加了三个属性，年龄优先级最好，然后班级次要，成绩最后，我们用图表的展示可以实现出下面这样的形式：
再进一步，这是我们条件已经确定才做出来的组件，要是要制定的属性不确定，要制定的属性数量也不确定，顺序不确定，排序模式也不确定……
这种情况就肯定要应用排序自定义条件的逻辑了，而表头自定义一加，那逻辑就立马复杂了，它的操作面板可能就长下图这样。
排序复杂了，并不代表筛选就不要了。部分项目的筛选除了在表格外的独立筛选区域，还可能应用表头筛选模式。即以单个表头纬度设置筛选条件，比如点击 “年份” 表头，设置起始和结束时间。
所以，只包含筛选的情况下，表头的图标就不是排序而是漏斗，点击后就要展开筛选设置面板进行操作。
而当多表头筛选和多表头排序需求并存的时候，怎么解决？
这里只建议在表头中留存筛选选项，因为筛选可以实现并集关系，即前后任何表头添加筛选项都可以组成完整的筛选条件。但是，这种交互难以完成筛选优先级排序。
所以，我们要将排序独立成一个按钮到表头之外的地方，而不是强行让两者并存。尤其是不要设计出有的表头是排序，有的表头是筛选，甚至表头的按钮展开面板里又会有筛选又有排序……
表头是针对列的操作，而针对行的操作，就是对单行列表的选择、展开和进入了。
前面我们有说过，表格第一列往往放多选框，通过点击选择当前列表行。它本身的交互并没有太多需要注意的，只要针对行的交互如果不止选择应该如何平衡。
部分复杂项目喜欢在表格中添加 “套娃” 的需求。即单行数据可以向下展开二级数据，或者更进一步到三级、四级。
同时，每个数据行往往还关联详情页面，需要点击展开后查看更细节的信息。
所以当多种操作需求混合出现的时候，我们就要具体分析这些需求的优先级了。到底是多选操作频率最高，还是查看下级行，打开详情页。
这是为让点击整个数据行这个最便捷的交互可以关联到最高频的操作上。而其它低频操作的交互则只限定在对应的按钮或图标上即可。
因为多选需求往往需要我们在一系列数据中选择很多条数据，一个小小的复选框不仅选择起来麻烦，且通过查看右侧的内容筛选数据行，再用右手握鼠标按需点击最左侧的多选框，是非常别扭的体验。
还有一个需要注意的细节，就是当多选和展开下级列表共同出现的时候，选框和展开图标的排列。
通常一个数据行第一列的内容，应该是整行逻辑层级最高的元素。如果子数据行是被独立出来需要单选，那么展开图标就要放到选择前面。如果选择数据包含了该行和所有子行，那么选择就应该在展开图标前面。
当然，如果展开数据和父集就完全不是一种类型，用另一套属性，那么它也就没有被同时选中的需求和可能，不需要为它添加选择框。所以，这种情况下多选框也应该放在第一位。
最后，就是解决单元格的交互了。常见的单元格交互可以总结成下面这几类：
- 点击打开页面
- 点击复制内容
- 点击修改内容
- 悬浮提示说明
点击打开页面很好理解，比如单元格内的数据是链接、图片、按钮然后实现跳转或弹窗。
而复制内容，则有一些需要注意的细节。表格中有一些数据是没有实际阅读意义的，它的存在就是用来做特定的校对或者是复制出去，比如 ID 号、哈希值、订单号等。
常规的做法是直接在右侧添加一个复制图标，但对于一些偏复杂的表格来说，所有可复制的单元格都加复制图标是非常影响浏览体验的。
所以，我的建议是都是默认隐藏复制图标，只有当鼠标移动到对应单元格的时候会显示。同时，这个图标可以覆盖到数据上层，因为既然鼠标移动过来为了复制，那么数据被遮挡在这阶段自然无关紧要，为整体页面预留空间
这样的操作按钮隐藏浮现方式，也适用于单元格修改的操作。但是，和复制不同，单元格信息编辑通常是编辑文本信息，还有后续的操作步骤。
如果点击进行文本编辑，那么建议在该表格打开一个新的输入浮窗，且浮窗内输入框文本和原来文本位置持平实现顺畅的步骤转换。
同时建议，为了防止误操作，尽量增加确定、取消按钮，防止误操作覆盖原有数据且无法撤销。
最后就是单元格的悬浮提示了。B 端控件中的气泡框就是用来做提示的控件，但它只是手段。为什么需要悬浮提示，提示什么内容是我们需要考虑的。
对于及其复杂的表格来说，往往是没办法支持所有数据都完整展示的，我们会在使用省略号对它进行截断。但截断不意味着用户完全不需要在表格查看到完整的信息。
所以，就可以通过气泡的做法，将信息呈现给用户。而呈现过程中，尽量确保鼠标可以移动到气泡上复制里面的文字内容（和全部复制不一样），而不是鼠标移走就直接关闭消失。
熟练运营这几个交互方式，并统一对应的使用规则，就能确保整个项目的表格单元格操作预期的一致，不需要逐一进行尝试和鉴别。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
网上对介绍导航文章已经有很多，有部分已过时，今天自己再重新整理一遍，方便自己也方便更多人理解。
如2、社区产品引导用户发帖子
如3、凸显核心功能，如百度地图、高德等
优点：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：UX设计笔记 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
视觉设计排版：
第一步，先把文字内容做好排版；
第二步，思考场景设计与信息层级处理；
第三步，进行排版设计的布局；
第四步，最后做好色彩和细节的优化，从整体出发到细节处理再回归整体性的原则，做好包装的设计展示。
一 格式塔原理在排版中的应用
格式塔原理是 20 世纪早期的德国心理学家研究小组发现的人类视觉工作原理。人类视觉是整体性的，我们会对看到的事物自建结构，并且在神经系统层面上感知形状，图形和物体。「形状、区域」在德语中是 Gestalt，所以这些理论也就叫做视觉感知的格式塔原理。
格式塔原理的设计原则如下：
1. 邻近性原则
物体之间的相对距离会影响我们认知它们的关系。相互靠近的元素被认为是一组，那些距离较远的则自动划分为组外。整体看来，距离近的关联性更紧密。
下面左图中的圆相互之间在水平方向比垂直距离近，那样我们看到了4排圆点，而右图看成2列。
如何应用于UI设计：
邻近性原则，在网页端或移动端的排版布局中有非常广泛的应用。设计师应用此原则，调整距离或者用分割线等来分开不同设计模式的构建。此原理应用在设计中，界面层级好，视觉清晰。
按照原理，我们会将内容相似的元素位置放置得更接近，在 UI 设计中的卡片化设计，列表组合等信息整合设计都会应用到此原理。并且不同内容之间我们使用分割线，留白，卡片区分等方式来使不同的内容区分更为明显。
2. 相似性原则
格式塔原理中的相似性通常和邻近性原则一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则：有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式，并且将它们与特定含义或者功能联系在一起。
如何应用于UI设计：
利用颜色，形状，大小，方向，以及纹理等视觉元素，组成相近的样式。UI 设计规范中的控件组合成的组件，大部分都会使用到相似性原则，统一视觉样式，来表达统一的功能性。
3. 封闭性
人的眼睛在观看时，大脑并不是在一开始就区分各个单一的组成部分，而是将各个部分组合起来，使之成为一个更容易理解的统一体。这个统一体是我们日常生活中常见的形象，如正方形、圆形、三角形等，让用户容易理解。
如何应用于UI设计：
这个原则也非常适用于图形用户界面的图标设计或界面设计中
4. 连续性原则
人的视觉具备一种运动的惯性，会追随一个方向的延伸，以便把元素连接在一起成为一个整体。下图是两个交叉的圆弧轨迹，人们往往倾向于使视觉流跟随着相同颜色的轨迹，而不会被干扰，我们能够感知这是两条弧线。
如何应用于UI设计：
连续性目前在 app 产品中应用非常广泛。比如在电商产品中 banner 区域的左右滑动交互模块，滑动组件和进度条展示。
主要应用范围如下：
1 导航栏中的连续性设计
2 卡片模块中的连续性设计
3 模块的连续性设计
5. 主体/背景
我们的大脑将视觉区域分为主体和背景 2 个部分。这个特征有利于我们对重要信息和次要信息的感知。
主体和背景的区别可以从以下两个方面来控制：
1 场景大小：我们倾向于将处于大场景中的中间小区域部分视为主体，而大场景视为背景；
2 层级关系：如果在同一个平面中，我们倾向于将处于视觉第一层级的物体视为主体。
如何应用于UI设计：
此原则可以帮助设计师在设计界面的过程中抓住用户注意力，并且让用户优先看到我们想让他们看到的事物。比如重要信息的弹窗提示，以及弱化背景从而突出内容等界面中都有运用到此原则。
二 移动端版式设计原则：
版式设计，在有限的版面空间中，将版面构成元素，如：文字、图片、线条和颜色等，根据特定的内容，进行组合排列，并运用造型要素及形式原则，把构思与计划以视觉的形式美感，表达出来。
一个优秀的排版要考虑到用户的阅读习惯和设计美感，帮助用户区分重点、提升可读性。遵循平面设计原理，排版中的对齐、对比、重复、亲密性 4 大原则。
对齐原则
对齐是版式设计的最重要的原则之一，对齐可以建立一种整齐的外观，带给用户舒服的一致性的浏览体验。基于从上到下，从左到右的阅读习惯，应用在界面设计中，一般是左对齐、居中对齐和右对齐，同时同一竖线上的元素，要保持居中对齐。
对比原则
做排版设计时，重点的元素通过尺寸、色彩、造型等引起用户关注，这样重点内容，才会突出出来。设计要有轻重缓急之分，不要让用户去找重点，Don't let users think，让用户顺利的接受重要信息。
例如：图片大小的对比，让用户感受到最重要的信息。
亲密性原则
根据亲密的原则来组织复杂的信息，将彼此相关的同一类的元素靠近，同时把远离不相关的元素，这样就可以大大提高界面设计的可读性。
三 作品集排版法则
设计排版法则：
1 左对齐
在页面排版时，将你的文字设置为左对齐。为什么？在西方文化中，人们的阅读习惯是从上到下，从左到右的。通过左对齐文字，眼睛能够更容易地找到边缘，更易于阅读。避免因为这个原因缩进段落的第一行。
2 使用一种字体
优秀的设计师在排版设计中能够完美使用两种字体，是因为他们能够把握和了解所选的字体的类型，并保证他们是互补的。
但是一般情况下，避免使用两种相同类型的字体。例如，不要使用两种以上的非衬线体、粗衬体或手写体。
使用一种字体，直到你能够很好的运用和掌握它。如：苹方字体或Dinner字体。
3 跳过一个字重
在改变字体权重时，从细体到粗体，或者从中粗体到超粗体。大师级的设计关键就是对比。
粗体和细体对比的标题字体组合，获得最大的对比。
4 双倍字号尺寸
当改变字号大小时，一个好的经验法则是，你使用的字号大小是现有字号的两倍或一半。
5 对齐到一个轴线
沿着一个主坐标构建你的字体排版，并将字体元素对齐到网络线。无论文字类型或大小如何，在垂直轴上，字体对齐轴线的左边缘。在水平轴上，寻找最佳水平元素，或对齐文字的大写字母字高，或对齐文字基线即可。
6 使用条框分类
使用形状/线条将相关的内容信息块进行分类编组。这样会使不同的元素排列很有顺序。
7 注意间距
段落排版中到处都是间距。如果文字左对齐。右侧会出现文字的参差不齐、起伏留白等。避免在段落的最后一行出现单字成行的情况，切勿使用强制对齐设置。
注意段落右侧的起伏形状，在一个句子中标点符号之间使用单个空格，以避免形状和角度不美观。
间距的重要性。越是间距接近的元素，读者就会假设在不同的信息块之间存在这一种关系。
最后推荐 优秀设计师的作品排版 ：
如下图：来自国际化设计师 MIKE 的设计作品
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：峻溪POINTVISION 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这些年里，这款工具进行了快速的迭代和更新，响应设计师们的需求，不断完善功能，成为设计行业推荐率（NPS）最高的软件之一。
尤其是作为一款优秀的买断制软件，不仅定价合理，甚至 5 年来 ¥199 的售价分文未涨。
而我同期开始用的 Ulysses（用它写了两本书，写过的公众号内容超100W字）、MindNode、Notability 等，全都在这期间从买断制改成订阅制，甚至订阅价格还逐年上涨？？
我从来不吝啬于赞美优秀的软件工具，尤其是保持初心以纯粹的产品功能来服务用户的那种更甚。五年前我作为最早就推荐它的人之一，五年后我不介意再夸它一次。
它就是 —— Eagle。
Eagle官网：https://cn.eagle.cool/
前面说过，Eagle 是一个设计资源管理器，它可以做的事情非常多，但我不是要在这里写功能介绍的，而是来分享一下，我都用它做了什么。
图片采集是我使用 Eagle 的核心目的，他包含丰富的采集形式完美覆盖我的实际使用需要。
第一类采集形式就是通过浏览器插件或截图工具，将网页中看见的图片下载到本地。
第二类采集形式，则是通过粘贴花瓣或 Pinterest 的画板地址，批量采集该画板的所有图片。这是我最喜欢的功能，没有之一。
花瓣和 Pinterest 这类网站，真正的精华是优质用户自己收录的图库，而不是直接搜索出来的结果。批量采集，就是让我在找到优质图库后，用最简单的方式下载这些被精挑细选出来的图集。
因为批量下载很方便，我可以很快的针对同一类目收集出成千上万的内容。但同一个类目下载那么多图片或素材有意义吗？
数量从来不是我追求的目标，我会将任何类目的内容数量进行精简，只保留其中最精华的一小部分，即使它们是由一批最优秀的设计师收藏的图库，我也只取精华中的精华。
但是，光靠一张张图看过去打星再筛选，会把我累死。于是，我就会利用 Eagle 的筛选与排序功能，快速剔除劣质内容，缩小选择范围。
比如之前我分享过的 UI 配图的素材，包含十几个颜色的分类和上千张精选图片。原始图片超过五万张，是我从上百个摄影画板里批量采集下来的。
应用到大小、尺寸排序，色彩筛选，星级筛选等多种手段配合，帮助我快速筛选出各自质量最好的 100 张图片。而这前后大概只用了两小时的时间。
通过前面两个功能，我收集和筛选了海量的灵感元素。但这么多元素我们不可能无序放置，需要根据一定的规律进行编组和管理。所以这里就要分享 Eagle 的资源管理功能了。
Eagle 的资源管理包含三个方向：
1. 普通文件夹：类似电脑文件夹的逻辑，可以进行排序和上下级设置，收纳
2. 智能文件夹：通过一定条件设置，筛选出对应图片和素材的动态文件夹
3. 分类标签：即可以作为分类来使用的标签系统，可以为一张图片或素材打上多个分类标签
我的资源管理方法论一直崇尚的是极简主义，能用普通文件夹管理的情况我就一定不用智能和标签。不是说这些功能不好，而是因为它们需要对素材进行二次的处理和维护，只有在必要条件下才会使用。
我的素材资源管理是首先构思我会用到的几个大类，每个大类下会包含几个二级分类，即 Eagle 中的1级文件夹，然后再创建对应的文件夹并命名和添加色彩，比如下面示例。
不要奢望一开始规划分类能做到尽善尽美，只要大的方向上确定了，然后再根据日常收集的需要慢慢去添加下级文件夹，而这一级就没有那么严格的限定，用到哪加到哪。
只有在一些非常特殊类目下，我才会去为图片和素材增加标签，而不是为了打标签而打标签。比如我收集的学员作业也存在 Eagle 中，会包含课程期数、作业类型两个维度，我就需要用标签进行管理，方便我后续进行跨文件夹的查看与筛选。
除了基础的灵感图片外，我还往里面存了很多其它文件素材，包括但不限于下面这些种类。
Eagle 能作为一个设计资源管理工具，并不是因为可以添加文件夹和标签，再实现一遍 MacOS 的资源管理功能。而是因为它支持多种文件格式的快速预览。
它比 Mac 自身的快速预览更高效（后面会解释），同时作为双系统用户，我得以在 Windows 系统下如下图快速查看素材预览，而不是安装格式支持零碎的插件（或流氓软件）来实现。
尤其是 Sketch、XD、Mindnode 文件，有了缩略图，就不用通过打开源文件来查看内容。并且字体文件支持在目录中直接启用和停用，可以非常方便的实时管理本地字库，保证我在设计软件中只会出现必要的字体，而不会全部显示出来。
Eagle 还有个特别的功能 —— 网址记录，这也是我最常用的功能之一。
早前有先用 Pocket 然后转移 InstaPaper 和 Cubox 来收录网上看到的优质设计文章，方便我需要引用原文和整理思绪的时候回看。
虽然最后采用的 Cubox 也是一个优秀的稍后阅读工具，但长期使用下来我还是想尽量打开少的软件来完成我的工作。所以，自然而然的，我还是把网址全部迁移回 Eagle 中。
只要安装 Eagle 浏览器插件，我就可以快速收集网址到 Eagle 目录中，之后随时进行查看。
可能有的同学喜欢用网页整页截图来收集文章，只是我不太喜欢用图片格式查看文本，所以这个根据个人喜好即可。
同时，我不止拿 Eagle 管理灵感和素材，也直接拿来做项目管理。
在 Eagle 库文件进行团队同步以后，针对每个项目创建独立的项目文件夹，用来收录相关的文档、灵感图、情绪版、配图和设计文件。
尤其是项目前期收集灵感图和情绪板的阶段，多人共同收集和编辑的结果可以最方便的查看和进行评价，非常好的优化我们的协作流程和效率。
作为一个设计讲师，要观察学生的作业和进行点评。自然而然，我也会优先将所有作业添加到 Eagle 中去。
通过对每份作业前期的打分，标注，来进行后面点评课程的分享和讲解。
同时，这些收集的作业，需要在后续其它场景中作为正、反面的案例。所以对作业的评级和标签就变得必要起来，在相关场景下通过创建智能文件夹快速筛选出范围内的图例。
以上就是我使用 Eagle 最重要的 7 个场景，虽然实际应用还远远不止它们，但因为篇幅关系就先介绍到这里。
Eagle 作为一款被我长期使用和推荐的工具，不仅仅是因为上面的使用场景，它们是结果。所以，我要从更底层的角度，来解释它的不同之处和特点。
从上线以来，Eagle 有一个饱受误解和诟病的底层设计，就是它的 “素材包” 文件 .eaglepack 。用户需要先创建一个 “库“，之后添加的所有素材、文件，都会被保存到这个库文件中去。
换句话说，相当于 Eagle 在你的电脑中创建了一个特殊的文件夹，用来保存你置入的文件。即使你添加的素材是已经下载到本地，它也会再 “复制” 一份到这个库中。
很多设计师对这个逻辑感到很费解，为什么本地存的好好的，Eagle 要再复制一份，完全就是浪费系统资源和时间的做法。如果无法理解这个逻辑，就是不具备 ”产品思维“ 的特征之一。
我们先从和多人举例的 Bridge 和 Lightroom Classic 讲起。
它们的运作机制，是通过运行该软件，来读取你的硬盘目录和对应文件。使用它们并不会额外复制文件出来，即使你在软件中置入素材，它们也只是帮助你正常保存到硬盘的对应位置。
为什么这类工具会被我们放弃，有下面这些原因：
第一，它们的核心一直都不是全领域的设计资产管理，而是围绕在 Adobe 体系下的照片、视频、矢量图等多媒体项目素材管理，尤其是摄影相关项目。
第二，就像对比 Photoshop 相较与 XD 一样，庞大的软件体积和功能，对启动速度和硬件资源消耗带来没办法忽视的负面影响，降低操作的效率。
第三，就是比较值得深入思考的地方，那就是管理范围太广。直接读取硬盘就是让所有文件夹被暴露在管理器中，多出大量非必要的目录和文件，严重增加我们的决策成本和管理成本。
范围太大或自由度太高并不是什么好事，就像 iOS 的相册一样，它是个封闭的图片库，不像安卓一样读取其它硬盘文件夹，从而让相片的管理更简单明了。
自由虽然可以做更多事，但这些没有必要的可能性增加就只会变成决策和行为中的负担。简洁明了，才是高效的前提条件。
第四，就是设计文件的 ”预览效率“ 问题。不管电脑的性能怎么提升，大型位图的渲染都是非常消耗资源的工作。不管是动辄几 G 的 PSD 素材文件，还是高达几亿像素的超清图片，加载都是需要等待的。
比如下方目录中的作业文件，因为很多同学导出画布不考虑图片质量尺寸，所以往往会出很多 1W*1W 像素以上超过 30M 的位图。
当这么多大型位图聚集在一起，Bridge 完全加载出它们的缩略用了整整 2 分钟的时间……虽然 Bridge 会让你觉得久第一次打开慢以后就好了，这个功能的代价是生成了大量的 ”缓存”，即这些缩略图会暂时保存到缓存文件夹中。
缓存文件都只是过客，在你格式化系统，换另一台电脑打开，或者缓存超过了上面设置的 50G，那么旧的文件就会被删除，你还是要重新加载该文件的缩略图。相信我，超出缓存容量是非常容易的事，即使你加到 100G 也一样。
Eagle 的库特性，是在添加素材进库之前，会生成一个对应的缩略图文件，之后 Eagle 读取素材列表的时候就是加载这个只有几十 KB 不到的小文件，而不是解析原图。
这种策略带来的帮助除了在文件夹之间切换高效自如，也对本地内存的压力有非常大的缓解。
在一般资源管理中，一个文件夹内有几千张高清图片时，持续滚动到目录底部就会发现越来越卡，因为占用的内存越来越多，直至达到临界点释放掉上方列表加载的内容（上滚会重新加载）。相信有用相机的同学一定很了解这种感受。
综合各种问题和影响，自建库，并为每个素材生成不会被删除的缩略图就是最好的选择。
这不仅仅是 Eagle 一个工具的做法，即使 Adobe 也在 Lightroom 应用了相同的策略，新 LR 导入图片素材到它的自建库中进行管理，同时生成缩略图用于列表加载（降低高像素调节延迟）。而老版的 LR 虽然还没下架，但为它增加 Classic（古典） 的后缀，所以它们认为哪种做法更有潜力，你们自己也能判断了对吧？
今天我们使用的绝大数软件都是 SaaS（微软：基于web的软件服务），自带联网备份和同步，但是 Eagle 只能保存本地却不符合我们的 “习惯”，这是为什么？
因为成本是没办法控制的，重度用户成百上千 G 的硬盘占用，是不可能轻易使用云服务来实现同步的。这些动辄几 G 的 PSD 文件或其它大型设计文件，会让整个同步过程充满不确定性和冲突。
同时，云同步是一种成本特别高的服务类型，和一般的云存储空间不是一种概念，想要大容量又要免费，是不可能的。Adobe 同步盘 1T 容量港区售价 68 港币，苹果 iCloud 同步盘是 2TB 68 元/月。
算起来他们的价格并不贵，但一定要清楚 Adobe 和苹果云都是为了自家生态服务的，而且作为软件业巨头有自己的大型数据中心，降低云服务成本。类似 Eagle 这样的初创团队是不具备这种条件的，即使推出了，价格也不会便宜。
可能还有人会对比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方网站的本地客户端，更方便的访问自己的官网个人中心，无法收集和整理图片以外的其它素材，所以同步起来容易。
Eagle 的数据就只能保存本地，或者保存在笨拙的移动硬盘内，随身带着嘛？肯定也不是。
库文件的另一个管理好处，就是方便做备份。在今天同步盘服务逐渐成熟的环境下，你可以选择购买类似 Dropbox、坚果云这类同步网盘，通过它们实现备份和多设备同步。
或者，可以购买群晖、威联通、极空间为主导的个人云盘硬件，实现空间更大、更灵活的使用体验。
如果有同学不知道怎么同步的，我会在后面分享。
最后一点，就是对苹果 ARM 架构的适配了。在 Eagle 2.0 版本中，快速适配了 Mac 的新硬件架构，从而让软件的运行、读取效率远远高于上一个版本，做到了丝般顺滑的地步。
对软件本身的优化也是速度的保障之一，相信 Bridge 用的多的同学一定忽略不了它无处不在的延迟与卡顿。
Eagle 如果要进行网络的备份和同步，那么一定要分清楚同步盘、网盘、移动硬盘的区别。
其中，网盘和移动硬盘基本上是一样的，它们的使用特点就是我们要主动把要保存的东西，拖拽进硬盘目录内。移动硬盘备份速度还好点，网盘的备份就要非常久的时间。
如果你有两台电脑，使用移动硬盘的方案就得一直随身带着，用哪台插哪台上。非常容易在第二天忘记拔掉，然后回公司的时候没库可用。使用网盘的方案，那就更不可能的频繁的备份和在另一台电脑中下载。
类似 Dropbox 或 同步盘工具，就是用来解决这类问题的。简单点说，同步盘的原理就是本地安装一个同步软件和云端的服务器进行通信，这个同步软件会绑定相关的本地文件夹。于是，这个文件夹内有任何文件的变更，同步软件就会自动把变更的软件传输到服务器上。
而同步盘的特点并不是只能客户端和服务器一对一传输，而是可以多对一同步。如果服务器内容更新，它就会把更新的数据实时推送给其它客户端，更新它们本地的文件。
通过这种模式，就能实现自己多台设备，或者团队多个成员设备的文件夹实时同步，无需你手动进行操作。
当然，同步盘对服务器的资源占用与消耗远远大于一般网盘，所以基本只有付费的工具，而这种带给我们生产力的提升和数据安全的预算是有绝对必要的。
如果使用苹果的同学，可以通过将 .eaglepack 保存到关联 iCloud 的文件夹即可（最好“文稿”里）。苹果系统就会自动开始同步，其它 Mac 电脑就能实时接收。 默认的空间肯定不够用，建议开通 200G 容量的服务。
如果用专业同步云软件，以坚果云举例，下载完客户端，只要完成关联包含 .eaglepack 的文件夹，那么该文件夹就会启动同步。再在别的电脑中安装坚果云，就可以把该文件夹下载下来并自动同步。
我收集灵感素材是非常有目的性的，比如一个项目需要的配图素材，我会一口气去收集几十张觉得合适的图。
Eagle 有一个浏览器的采集插件，这个插件非常好用。只要拖动浏览器的图片，就会出现对应的采集弹窗，把鼠标移动到对应目录上就可以完成采集。
如果你觉得整个页面的图片都想保存，也可以在插件图标中使用批量收藏按钮（或快捷键），就可以采集整个页面中的所有图片，以及通过尺寸筛选对应尺寸。
应对日常看到的优质作品、灵感图，也可以非常快速的实现采集。可以最方便的收纳我们自己的采集资料。
作为移动端 UI 设计师来讲，收集日常见过的优秀 APP 界面，是必要的职业素养。而使用 iPhone + MacOS 再结合 Eagle 的话，这个过程就会变得非常的简单。
首先以完整页面收集为例，之前看过不少人推荐使用 iOS 的跨设备复制图片到 Mac 中黏贴的操作，是完全没有必要的，因为一次只能复制一张截图。
你要做的就是开启相册的云同步，日常使用 iPhone 时把想要收集的页面进行截屏即可。每过一段时间，在电脑的相册中打开 ”截屏“ 相册，就有你这段时间收集的所有截屏。框选相关内容，拖进 Eagle 对应文件夹中就完成收集，然后再删除原图。
而且因为相册特殊的机制，直接拖拽出的图片是压缩后的版本，让截图的文件的体积大幅度缩小，从3M 变成 300K（完全够看），非常好的降低硬盘占用量。
除了收集页面，更重要的 UI 灵感是页面中的 ”组件“，我们需要根据组件为目标去收集相关的案例。直接拖进整页截图的方式就不太合适，比如下面的瓷片区案例区。
所以，我们要开启 Eagle 的自带截图功能，并设置好你觉得顺手的快捷键。
记得打开第一个选项 ”弹出分类“，就可以每次截图后选择指定的文件夹。不管是你的截图，还是网上的其它案例，你都可以用最高效的方式收集这些组件样式，轻易搭建自己的组件灵感系统。
前面讲过，我会用 Eagle 来放 Mindnode 这类思维导图文件。但是，Mindnode 先创建保存，再拖进 Eagle 的步骤太麻烦了。
所以，我正常新建并保存 Mindnode 思维导图会到它默认文件夹中，然后使用 Eagle 的文件夹检测功能关联它，之后所有保存的文件就会出现在 Eagle 的目录中。
之后，我编辑和查看老的 Mindnode 文件就在 Eagle 中进行了。这么做的好处，还可以让我使用 Windows 系统的时候能够正常预览思维导图。
Eagle 是可以管理字体的，我把所有正在用或收集的字体都放进了 Eagle 的字体文件夹中。
可能你们会有疑问字体丢进字库就行了，还管理它们干什么？或者说有字由之类的字体软件，用 Eagle 干什么。
一方面是我会尽量精简使用工具的数量，另一方面，就是使用团队同步盘的时候，我们的团队字库是统一的，随时可以找到启用的，最快解决其他人的设计文件字体缺失问题。
同时，当我在使用 UI 软件设置字体觉得选择起来太困难时，就会去关闭掉大多数最近不会用的字体。实现这个操作非常的简单，只要新建 ”智能文件夹“，并添加选项 ”字形文件“ 和 ”已安装“，那么启用的字体就会全部出现在这个列表中。
用一两分钟的时间就可以批量选择你想要停用的字体，右键停用即可，它们就会自动从智能文件夹中消失。你可以一直保留这个智能文件夹，每次清理只需要一两分钟时间。
目前上方截图中的很多案例还不是最终的完整版，最近上海疫情居家隔离，大多数工作暂停中，我在闲暇时就开始重新整理 Eagle 库。因为以前堆积了很多冗余的东西，所以这次我把整体素材都导出后重新进行整理中，也是为什么会写这篇内容的原因。
Eagle 带给我最大的价值，就是为我和团队节省了海量的时间，让我有可以更快的找到参考素材，更快的整理分类，更好的同步项目文件。
上面分享的很多体验和总结，都是在 5 年来长期使用中一点点摸索，适应，并形成习惯的。任何工具的使用与自己工作学习的结合，都是渐进磨合的，每个人都可以在这个工具中挖掘出适合自己的用法。
但依旧要给大家一个建议，不要为了收集而收集，也不要沉迷与堆积素材的数量，让它为我们服务，恰到好处的出现在我们的实践过程中。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线，B 端作为一个新的热点开始被追捧。
但 B 端是一个泛指，它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。
不同 B 端细分行业差距是非常大的，就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景，就一定要聚焦到具体的行业类型，否则就没有讨论下去的基础。
而我们今天重点聚焦的，就是目前声势极大的数据可视化行业。
这是最近很多同学咨询和关注的领域，也是各大显卡厂商、3D 引擎发布会上的常客。
各种让人眼花缭乱的图例和技术应用解说，很容易让我们产生未来已经加速向我们走来的 “幻觉”，此时不抓紧时代的机遇投身数字化界面的设计，更待何时？
但我还是要劝大家别光顾着鸡冻，冷静下来好好分析这些行业和市场状况，当你了解的越多，你就越会发现，这个职业方向和你们想的不太一样……
首先，数字可视化领域也是一个比较笼统的行业，它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类，平面展示型和3D展示型。为什么根据这个分而不是商业场景，下面会做进一步解释。
首先，数据可视化不是用了花哨的 3D 视觉才叫可视化，平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ，统计分析工具等。
比如统计并查看网站、应用、店铺数据的平台。
这类产品有非常广泛的使用场景和需求，是现代企业和产品运营的基石，它存在的价值是毋庸置疑的。
而另一类 3D 展示型的细分发展方向，包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。
这类项目更多是由技术发展催生而来的 “新需求”，和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的，但对设计师从事这个行业的总体前景持悲观态度。
下面，针对真正的数据可视化设计师，我会从下面几个维度展开讨论（唱起反调）：
- 知识门槛
- 行业特征
- 团队价值
数据可视化是对数据信息进行图形化设计的过程，这个行业不是这两年才出现的，而是由来已久。
从世界上第一个图表的诞生之后，就有无数统计学家和设计师投身到这个领域中，发明和设计出各种精妙绝伦的图形。
数据可视化的重要性不会比任何其它设计行业低，但是，数据可视化重要性的来源，是由数据本身的价值赋予的。因为诠释数据的方式精彩，所以有价值，而不是仅仅是因为你做得好看且花哨。
更进一步说，就是数据可视化的价值是被统计学赋予的，而统计学是被这个世界真实需要的。
但很可惜，极少有 B 端设计师会投入精力到统计学的基础知识和应用，这就导致很多设计稿中，连对数据的展示应该用折线还是柱状都分不清。
或许你依靠经验可以提升对一些基本图表使用的心得，但是，进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛？那下面这些图形应用需要掌握什么？
复杂的可视化应用场景，不仅需要设计师对统计内容和数据应用有主动地分析，还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用，但凡涉及到区级以上的地理信息可视化，就一定需要应用 GIS 工具的应用，导出并转化数据包。
除了 2D 以外，3D 可视化的项目，所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以，学会 C4D 就可以做可视化项目。
这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……
前面说过，3D 可视化是由技术发展催生出的行业，它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了，比 2D 图形复杂好几个量级，这就导致设计可以落地的限制远远超出新手的认知。
常规的 3D 项目，必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果，而网页运行 3D 就是借助 WebGL 图形协议实现的。
由于各种技术和硬件限制，WebGL 的性能是奇差无比的，因为它的图形绘制渲染主要依靠 CPU 来完成，只要项目稍微复杂一点，多边形和图元数量一多，立马就会让电脑变卡（CPU占用量暴涨）。同时，它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。
因为 WebGL 太弱，目前封闭的可视化项目就转而使用其它的技术解决方案，即虚幻 Unreal 和 Unity。没错，就是你们玩游戏启动画面中显示的那俩引擎。
换句话说，现在的高端 3D 可视化项目，就是用做游戏的方式做可视化应用，只要在指定设备里安装，就可以调用 GPU 资源，实现更高级复杂的效果。
但是，只要应用了对应的引擎，就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模（不同可视化项目应该用的建模软件也不一样），再导入到虚幻或者 Unity 编辑器中进行下一步的操作，然后再和开发进行交付。
因为 3D 的复杂性，导致独立 3D 可视化项目的开发流程被大幅度拉长，从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制，我就不继续展开了。
3D 可视化设计师，几乎就等同于游戏行业中的技术美术(Technical Artist)，因为游戏开发更复杂，分工更明确，技术美术作为设计师和开发之间的桥梁，帮助项目的美术能尽量在技术上被实现。
而因为可视化项目的建模精度与视觉效果要求不高（对比游戏），这些工作就要由同一个岗位包揽，设计师就没办法回避这些让人绝望的知识信息。
还有一点对比游戏行业更让人绝望的，就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的，而且技术迭代周期远比游戏行业短（WebGPU已经在路上了），这在客观上增加了设计师的从业压力（欢迎体验前端开发的压力？）。
一个专业的可视化设计师知识门槛，是远远高于一般 UI 设计师的。
当我们研究一个行业的前景时，就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场，而是其它多个大市场中的某个组成部分。
如前面提到的数字分析、物联网、工业物联，都是层次更高的商业化市场。这些都是近年来高速发展的热门行业，是带动可视化行业发展的客观依据，我就不一一找公开统计数据佐证了。
而可视化除了商业场景外，还有个在国内做可视化绕不开的话题 —— 政策。
如果具体关注过地产、5G、电动车产业的发展历程，就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣（或者泡沫）。
而政策对于可视化的利好，就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型，到最近国务院发布的 《关于加强数字政府建设的指导意见》，都是中央直接 “指导” 地方发展数字化的指标，是行政意志与力量的体现。
说更具体点，下面是指导意见中的目标说明，非常直白，大家可以自己体会：
到2025年，与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全，政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成，政府履职数字化、智能化水平显著提升，政府决策科学化、社会治理精准化、公共服务高效化取得重要进展，数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。
到2035年，与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备，整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成，为基本实现社会主义现代化提供有力支撑。
原文链接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因国情在此，所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等，都是借助这股东风蓬勃发展。
所以，商业和政务的迫切需求，催生出一大批可视化服务公司，如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会，纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等，都已经小成气候，初现锋芒。
市场需求旺盛，规模快速增长，前景理应一片大好！但是……
市场总规模的扩张，带给个体的收益却不一定有表面看起来那么理想，尤其是设计师岗位。
这要先从常规 UI 设计行业说起，UI 设计师工资已经是国内设计行业工资最高的类型之一，从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板，是非常了不起的成就。
而之所以有这种收入，除了移动互联网爆发以外，最重要的原因就是互联网产品的 “利润率”，可以用非常少量的职员撬动上亿甚至上百亿的利润。
如王者荣耀 2021 年全年盈利 28 亿美元，接近 200 亿人民币的利润。一款游戏的利润直接达到万科（2021年利润225亿）和中国人保（2021年利润216亿）的水平，他们都是在册员工超过 10W 人的大型企业，也是国内各自行业里的巨头，而王者的员工只是他们的几百近千份之一。
再如蚂蚁金服、微信、抖音之类的国民级互联网应用，都是用极少的员工达到让人难以置信的估值和利润，这在传统行业是无法想象的。
所以能盈利的公司会给员工开出满是行业红利的待遇，拔高行业上限的同时，也迫使那些有志于挑战巨头的新公司愿意抬高工资价码，吸引人才。
总结起来，UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业，并不是因为 UI 专业门槛更高，而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。
其中，项目规模和利润率的重要性，其实远远大于行业规模，这是很多职场新人最想不通的地方。
例如广告行业已经是一个万亿市场了，除了分众这家互联网独角兽外，其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜（下图为 21 年财报）。
看看他们的营收总额和净利润比例，以及员工总数，你自己就会得出，作为普通平面设计师的待遇，是绝对不可能超过头部互联网企业的，甚至能达到中游水平都是超常发挥的结论。
行业规模大，但是头部企业规模和利润却不高，除了行业本身的平均利润率因素外，还有一个原因就是业务是高度分散的，没有被集中在少数头部企业，供应商数量庞大，不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。
在可预见的未来，可视化行业也会处于这样的情况，竞争激烈，利润率低。而且作为 B 端服务商，不要看各家企业需求旺盛，政府各级单位招标不断，实际上每个项目的规模都不大，百万内的项目才占行业的绝大多数，这是不太符合满足我们收入期待的项目规模。
而单个项目规模在未来高速扩大在我看来也不太现实，有两个原因，一个是项目使用人数极少（通常也就几十上百人…），另一个就是对可视化项目实用性的质疑。
如果看过航天相关的报道，就会看到指挥室数据大屏相比我们网上看过的案例比起来，简陋得发指。这会是因为总局没有预算，请不起设计师和团队开发嘛？
为什么航天指挥中心没有用下面这种 “科技感” 满满，复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”？
原因说出来让人沮丧，因为他们 —— 真的要看上面的信息啊！
真正能发挥可视化价值的场景并不多，很多项目出发的意义，就是为了表面工程（各级ZF单位需求，自行体会），装饰属性大于实用性。既然实用性不够高，很多甲方心里也清楚，是花钱装裱门面的，那么投入的预算就更不可能太高。
所以，我对可视化行业的整体的发展是认可的，但对单家公司或项目的预期，却是悲观的，它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。
最后，还要探讨下数据可视化中设计师的团队价值。
我们知道，一个完整的可视化项目设计与开发门槛都是非常高的，但因为高，创造的价值就高嘛？项目营收的成本占比就高吗？
答案依然是否定的！因为可视化行业的绝大多数项目都是 “传统” 的外包项目。
不管是商业是政务领域，外包最重要的任务，都是找到业务（中标）。朴素的价值观会认为，只要技术和服务够好，业务自然源源不断，其实不然。技术服务都是后验的，客户没有合作过之前是不知道的，在市场上挑选服务商，可不是打开淘宝买家评论查看分数和具体评价筛选。
所以，外行了解服务商的窗口，更多是通过熟悉的中间人介绍，或者销售的嘴。谁能拿到项目，谁就为公司创造了最大的价值。后面怎么做那是后面的事，换谁做不是做……
这就是最常见的外包企业思路，所以技术人员或者设计往往都是消耗品，没有那么强的依赖性。而在具体外包实践环节中，项目的执行决策也和一般 B 端、G 端项目不同。
我以前一直强调，B 端项目的存在价值，是用来解决业务问题，为企业 —— 降本增效。但是可视化项目往往不是用来解决问题，而是用来 —— 解决产生问题的人！
尤其是面向政务的项目，在领导的需求面前，是没有体验这一说的，首先考虑的应该是 ”科技感“（结合前文理解），不然怎么展示自己贯彻上层指导意见……
这种环境对于创意类职业是非常不利的，一方面创造的价值并不显著，另一方面是由别人 “教你” 怎么做设计。长此以往，你会越来越缺失职业竞争力和发展可能。
问题二，则是因为可视化项目独立开发成本太高昂，做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发，解决最麻烦的底层图形方案。
这和 B 端的前端开源框架非常类似，把底层的代码、交互、动画、性能优化都帮你做好了，设计师和程序员可以用非常省事的完成项目的视觉内容落地。
但是，常规 B 端管理项目中，界面样式一直就不是最重要的事情，而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。
而在可视化领域中，多数项目并没有那么多和复杂的交互需要考虑，视觉展示效果才是第一位，绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响，那才叫触及灵魂的打击。
所以，在我看来可视化设计师可以创造高价值的场景，只会出现在两种团队中。
第一种，是给其它可视化团队提供图形服务的 SAAS 工具，比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累，换句话说，就是既要有技术实力又要有资金保障的团队。
第二种，则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇，再由设计师主导来推动业务发展，不会什么项目都做，会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。
这两种对比目前海量的服务商来说都是凤毛麟角，第一种类型是可视化设计师发展最好的归宿，因为设计产出和图形技术发展高度捆绑，只有这样的团队才会最早最快接触新的专业技术方案。
除了这两类，不要对其它外包类公司有太多的期待。在整个互联网行业中，成熟产品团队非常不喜欢招外包设计师不是没有原因的。
至于未来是不是可视化内容会在 C 端领域打开局面，发展出一些新的应用场景，我就不过早下定论了。
最后，做个总结，给目前还没有进入可视化设计行业，或者是误打误撞进入这个行业的设计师一些职业方向的建议。
可视化设计行业和广告业非常类似，就是从业人员收入构成是沙漏状，而不是像 UI 这样呈金字塔状的，缺乏健康的增长梯度和充足的腰部岗位。
可视化设计师从菜鸟进入专业阶段所需的知识量更大，准备周期更长，技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。
如果本身热爱可视化，想将 FUI 那些东西搬进真实的世界和项目里，也做好了艰苦学习的准备（说不定是你乐在其中的），那么这个的行业的头部岗位就是为你这种人准备的。
毕竟行业体量大，当然就会有真正优质的岗位出现，只是它的门槛高，没有那么多水分能挤。
如果不是异常热爱这个行业，具备较强的自学能力，或有一定的 3D 和图形技术知识积累，那么不太建议往这个职业深入发展，一般的 B 端和 SAAS 项目才会是更好的选择。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图表的作用在于对数据的合理的诠释而不是美观。所以，在了解图表怎么绘制前，更重要的是了解图表是什么，包含哪些类型。下面就做下相应解释方便大家理解～
在今天，随着大数据和数据分析理念深入人心，图表在 B 端设计的地位越发重要。
那么什么叫图表呢？
图表指的是可以直观展示统计信息属性和数值的图形表格，对于多数人来说第一次接触图表概念都源自中小学计算机课程中的 Office Excel 表格教学。
要理解图表，你就绕不开 Excel 这个软件或其功能形式。我们都知道 Excel 是一个表格工具，可以任意填写表格化的信息内容进去。
但那只是呈现出来的表象，Excel 的真实身份应该是一个数据记录工具，通过这种表格形式记录，比如班级学生成绩、客户联系方式、仓库进销记录等等。每一条记录下的信息都是一条独立的 “数据”。
盯着表格看，我们确实可以看到一些具体的信息、数据、内容。但是，数据的作用只是让我们自己去精确定位想要的内容而已？显然是否定的。
我们统计数据的目的，还包括要从众多的数据条目中获得反映真实情况的 “规律”、“趋势”，如果我们只盯着数据条目一条条的浏览，是很难找出这些信息的。
于是，人类就发明了图表这种可视化工具，帮助我们对数据进行总结，用更直观的视觉方式来认识数据和找出规律和趋势，这也是为什么 Excel 是最强大的图表生产软件的原因之一。
总结：图表是统计学的子学科，它帮助我们更好的找到数据背后的真相，并做出正确的决定。
图表既然由数据内容生成，这个生成和转化的过程当然具备一些基本的规则和条件。要满足图表生成的数据必须要包含两种基础信息 —— ”维度“ 和 ”数值“。
它们是组成绝大多数图表的基石，比如看下面的表格，一次体检中有三个班级的5个同学，他们的身高、体重、体脂率、肌肉含量、视力各不相同。
我们可以从中挑选维度和数值，比如姓名做纬度（X轴），体脂率作为数值（Y轴），那么就可以生成基础柱状图表。
从上面案例可以知道，横向纬度表示的是你图表中要包含多少不同的展示对象，纵向数值则表示你要显示该维度的哪一类数据。
纬度通常指某个具体的人、日期、事件、分类，通常是 不可量化 的内容。而数值则是指包含 可量化 的数据类型，重点要记得数值是指 “数据类型”，而不是指具体的参数值。
再进一步，上方生成的图表，虽然直接反映了我们选择的纬度、数值的情况，但显然对于不了解数据背景的人来说太简陋了，不知道它们代表的意义。所以，一个完整的图表还会包含一些 “解释” 性元素，来让观看者更好的理解图表内容。
所以，一个完整的图表中除了中心图形，还会包含标题、单位、纬度图例、网格、选中提示等内容，用来提升其阅读性。
以上只是最基础的示例，不同图表、内容，对说明信息的要求各有不同，我们会在下方做出一定的解释。一个优秀的设计师要学会如何因地制宜，优化图表的内容构成，并对展示的信息进行取舍。
随着统计学的发展，图表也经历了一系列的增长与创新，除了我们常见的几种图表外，还发展出了大量平常看不到，只存在于各自专业领域的特殊种类。但是，它们对我们的生活和工作也起到产生了重要的影响。
比如在新冠危机中，政府和专业机构对民众开放的数据就大量使用了图表进行解释，让我们可以很清晰的了解事情的走势和真相。
之所以有这么多不同图表，让人眼花缭乱，在于数据所包含的信息和特性不同，导致了它们所总结的规律类型也不同。
业界将图表展示类型分成了四个大类，包含比较、分布、构成、联系，虽然比较简陋，但这是新手认识图表最简单的方式。
我们简单解释下这四个分类代表的作用：
之后我们就会以这个框架，来解释不同分类下的图表，帮助大家建立对图表的正确认识和设计方式。除了这种标准分类以外，我还额外做了一个归类，就是基础和高级图表。
前面提到，一般图表就只反映纬度、数值两个方面的图表类型，很容易理解。但复杂的图表，就会超过这个范围，它可能包含了多个维度、多种数值、甚至第三、第四。
比如下面这个散点图，除了身高（纬度）、体重（数值）外，还表现了个体（圆点）、性别（色彩）。在图表本身的解释性元素中，还包含分布区域、最大最小值标识、体重/身高均值。
这已经超出一个没有接触过统计的新手认知范畴了，是需要具体学习才能学会如何阅读和应用的图表。
这还是比较简单的高级图表，往后还有类似桑基图、K线图（韭菜的自我修养）、和弦图等类型，它们有各自使用的规范、参数，以及应用的场景。
高级图表的复杂度和抽象性，决定了它的使用门槛较高，识别效率较低。而随着数据各行各业数据重要性的提升，对图表的需求已经不再局限在二维抽象图形的应用上，而是提供了视觉效果更精美，制作过程更复杂，阅读门槛更低的可视化数据展示内容。
虽然我们在本篇文章不会拓展到大屏可视化的领域，但是掌握好平面二维的统计图表，提升对统计目的的认识，是深入学习可视化的必要条件。
接下来，我们就要来介绍一下如何绘制图表了。虽然图表之间有比较大的区别，但它们有很多细节是具有统一规范的。优先掌握这些一致的内容，再理解不同图表的具体绘制差异，可以帮助设计师快速上手图表设计工作。
上面我们提了，一个成熟的图表会包含不少解释性信息，怎么放置解释信息和图形元素是我们在设计时的第一个考虑要素。
常见的抽象图表都有一个完整的矩形区域，我们要先确定该图表的具体占比尺寸。然后，对这个区域进行布局的规划，而这个布局的规划就和解释信息的展示有非常大的关系。
比如，你需要在图表中增加标题和图形解释，那一开始把图形做成了上、中、下三栏。有的情况下我们可能还会增加一个默认存在的文本型解释模块，那么还会再右侧再切割出一个区域出来。
除了解释信息外，我们在设计中有时候还不能忽视交互内容，比如要包含分类筛选、时间线控制、开关等控件时，它们准备放在哪里，也要在这个阶段确定出来。
经过前面的切割，其实我们就能确定出中间的图形区域了。在开始绘制前，我们还要对图形具备的信息做进一步的确认，XY 轴坐标是否包含文字解释，饼图类是否包含延长指示线说明。
将这些区域先确定出来，减去它们的空间，就留下了最终要图形展示的区域了。
合理的图表绘制流程变是先布局，确定信息内容，最后才集中处理图形元素。如果对于前端适配有一定了解的同学，也就知道在完成这些步骤以后，图表的适配规则制定就畅通无阻了。
有了图形区域，接着就可以开始动手画图形了。不管是基础还是复杂的图形，你想要让自己输出的作品严谨、质量高，就需要应用专业的绘制方法。
图表图形的绘制类似尺寸作图，需要应用各种参考线、辅助工具来完成。图形本身并不是我们用来做创意的地方，而是要以准确的方式绘制出来。它包含两个重点，分布和比例映射。
以一个柱状图表举例，该图表中维度包含了 7 个对象，即应该出现 7 个柱形。那么首先就要通过等分图形区域，来确定柱形的分布，XY轴文字的对齐对象。
如果你不罗列对象具体数值的话，到这步也就结束了，但如果对象数值是必要显示内容的话，那么就要尽量确保柱状的显示比例和数值是一致的。
假设在上方案例中，Y轴总高是 100px，那么数值中每 1 小时的高度就是 100/16 = 6.25px，我们就要用你写下来的数值 * 6.25，保证柱状图高度比例和你的数值一致。
而类似饼图这样的图形中，只要添加了具体数值内容，那么饼图中不同的扇形角度，也要符合对应的比例。比如占比 10%、20%、30%、40% 的四个对象，它们的角度就分别为 36、72、108、144。
这就是分布和比例映射的基本逻辑，不管是什么图表，只要它根据数值在区域中进行绘制，就一定会受到数值的影响。不管学习什么新的图表，都只要确定这两个步骤就可以轻松准确的完成绘制。
至于具体该怎么实现，用插件还是参考线，就是软件基础的问题了，不在这里展开。
在图表设计中的最后一个问题，就是关于配色的方案了。图表配色的技巧主要关注两点，选色逻辑和搭配方法。
选色逻辑，就是图表用色的一些基本规范。我们知道图表往往非常的复杂，或者页面一屏中会包含大量的图表。
在这个基础上，图表的用色就注定是不能太 “刚猛” 的，饱和度要偏低，明度要适中。在选色面板中，它大概处中部偏上的区域。即使产品主色用的饱和度非常高，图表要和主色统一，也建议在主色基础上做适当调节，在色系上接近即可。
并且，建议新手在绘制图表的过程中千万不要用渐变色。即使在各类飞机稿中，渐变色的展示效果也非常的不理想，没有任何可读性。
有了选色逻辑，多色搭配的思路也就变得而非常简单了，只要重点关注色环的配色模式即可。
配色模式多种多样，包括补色、三角对立、类似、四元、方形、临近等等，不用想的那么复杂，只要牢记根据你的设计风格需要，你是要相邻配色，还是等分配色。
相邻配色，即以一个色系的临近色系为标准的搭配。以 H（色相）、S（饱和度）、B（明度） 配色模式为准，饱和度和明度数值基本不变的情况下，小幅度变更色相。
等分配色，也是保持饱和度、明度的一致，根据需要的色彩数量（大于三个）在色环中按角度等分，获得均匀的色彩过度。
配色的方法很简单，难的是你们如何根据页面的需要、视觉的体验，合理的运用配色的方案，这没有统一的标准。要记得图表配色不是仅仅针对自身，会和页面其它色彩产生联系。
保证相对平缓、不太激进的图表配色思路，是最安全的做法。
首先解释第一类图表 —— 比较。
比较图表的作用，是用来对纬度的数值做对比的图表类型，直观对比不同对象的强弱、排序、趋势。
柱状图，是一个使用柱状图形反映纬度数值的二维坐标轴图表，也是我们最常见的图表类型。
在这个二维坐标轴中，我们可以用纵轴代表数值，也可以用横轴代表数值，另一个轴代表纬度。即在显示的过程中可以使用纵向或者横向的（横向的也被叫成条形图，都是一回事）。
柱状图除了每个对象包含一类数值的做法以外，也允许包含多个数值类型，每个类型使用一种颜色表示，这种图表叫分组柱状。
并且，柱状图作为最基础的图形，衍生了非常多下级的柱状类型。包括：堆叠柱状、子弹图、正负混合、瀑布图、直方图等。但要注意的是，并不是所有柱状类图表，都是作为对比来使用的。后续会有进一步提示。
柱状图通过柱体的长短，可以直接对比不同纬度数值的高低，但使用也有一定的差别。
纬度之间关联性不是太强，或者按时间顺序排列的就适合用横向排列的方式，比如下方记录我随时可能猝死的打工人一周睡眠时间（见左图）。而涉及排名或者时间的数据组，就适合使用纵向排列的，比如 Geekbench 展现不同 Mac 处理器强弱的排行榜（见右图）（os：Pro 居然比 M1 还低？）。
两种图表的选择还和 UI 环境的交互方式有关，在APP中，横向排列的柱状图可以显示的数量非常有限，想放更多纬度就要左右滚动，体验不佳。而使用纵向排列则对空间的要求没那么高。
折线图也是基础图表，通过创建端点并使用直线连接的方式展示出高低不平曲折的线段。折线图在图表形式上和柱状图非常类似，但两者在使用上是有一定区别的。
当我们要选择使用柱状图的时候，往往关注数值的总量，或者维度代表的是不同的对象，比如不同 CPU 之间的跑分对比。但是折线图的使用就没有那么单一，它主要应用在单一对象的单个维度变化对比中。
比如，我们监控 CPU 的占用频率，那么维度使用时间，数值用百分比，这里面产生的数据都是围绕 CPU 的占用频率展开，但如果维度改成了当前时间不同核心的占用数值、温度，那么我们就肯定不会用折线图来表示。
折线图的使用是要通过线段的曲折来反映数值的波动，在应用过程中往往不作为一个静态的图表展示，而是应用于监控的场景，比如监控股市市值、网站在线人数、CPU温度、同一地区降水量等等。
在折线图中，最大的认知误区就是对于曲线线段的应用了。在数之不尽的网上飞机稿中，使用曲线的折线图表 90% 以上都是错误的。
这要回归本质来探讨，折线图也是进行对比的图形，如果没有直观的波动，那么这个图形带来的信息量就非常有限。曲线会因为圆角的缘故而降低波动带来的冲击力，甚至抹平这种对比。
只有在必定会连续出现极大波动的图表中才适合使用曲线，例如围绕在会有一个中间值数值，曲线进行正负两端移动的类型，比如监控呼吸中含氧量（呼和吸一个周期的维度）。
所以，尽量避免曲线的应用，不仅画起来麻烦，而且实际使用效果极差。
作为折线图，在一些数值代表完成、占满、填充的概念时，往往就会觉得单纯的线段表示不够直观，于是就产生了将下方的区域填充色彩的 —— 面积图。只展示一个数值类型不够要加入多个数值和线段的就叫折线堆叠图。
雷达图，相信大家看到最多的地方就是在游戏的角色面板或者武器面板中。雷达图是一种偏向概括性的图表，并不能用来体现大数值和高频变化，是用来对比同一个对象不同维度数值的图表。
雷达图的应用，首先要确认出不低于5个的维度，并且这些维度可以使用相同的数值体系，比如0-10分，0-100%等。并且，这些维度最好是由同一个对象身上拆分出来的，而不是 5 个维度指代不同的对象。
简单来讲，就是我们可以用雷达图来表现一个学生不同科目的水准，这样雷达图可以大致概括这个学生科目掌握情况和相对的强弱。
但是不应该用雷达图来表示不同学生同一科目的水准，那就只是更基础的对比，用柱状图就可以了。
当然，雷达图中的占用内容，也可以添加多个对象，一个雷达图中可以放多个同学不同科目掌握水平的叠加图形，以此对比他们的差异。
雷达图的绘制，也是优先制定说明内容区域，然后再开始图形的设计。
因为在雷达图中，我们对维度的描述，基本只能设计到不同端点外部，那么文字本身的数量、占比，就会对图形的显示产生非常大的影响，并且在雷达图中维度的描述文字是必须的，过度精简还是用其它方式体现都很不直观，所以优先预留足够的文字空间。
然后，根据我们需要的维度数量绘制一个等边的多边形，并设置合理的数值。
之后，才是确定出这个多边形内所包含的数值刻度数量。假设除圆心外总共要显示5级，那么就要画 5 个堆叠的等边形，那么我们就从最大的那个等边形入手，再复制4个出来，对它们分别乘以 80%、60%、40%、20% 即可。
最后，再将每个维度对应数值根据百分比将端点打在维度的直线上，用钢笔工具将每个端点连接起来创建一个完整的不规则多边形，就完成了雷达图的设计。
如果想要在一个雷达图添加多个对象，只要用不同颜色描边绘制对应数量多边形即可，如果要填充这些图形，就一定要使用透明度填充来完成，否则可能遮挡后方的端点，导致图形不全。
阶梯图是一种用来对比前后数值涨跌的图形，它是柱状和折线图的合体。它和折线图的不同之处在于，更关注每个对象增减的份额大小。
不仅仅是关注波动，而是更具体的值。类似关注一只股票全年的股价涨跌情况，每个月涨跌的具体额度，就适合使用阶梯图表现。
漏斗图因为长得像漏斗而闻名。虽然这个图形看起来像一个锥形或者三角形，但本质上漏斗只是条形图（横向柱状图）的变体。
漏斗图是一种对阶段进行分层表现的图形，从上到下的顺序中，数值一定会呈现衰减的趋势（起码不会变大），然后从上到下的柱体就越来越小。
例如，UX 数据分析经常用的漏斗模型，就会建立一个从用户访问主页，到最后完成下单的转化率，每一个步骤都会有一定的用户流失。
在基础漏斗图之上还有进一步拓展，比如对这个转化本身有一个预期，那么可以做对比漏斗图，比较现实和预想中的差距。如果要对比 iOS 和 Android 端的漏斗数据，还有比较漏斗图，对比两侧的长短数据。
第二个解释的图表类型 —— 分布。主要是用来研究数据分布情况的图表，对不同数据的统计分布状况进行描述。
直方图是一个看起来和普通柱状图非常接近的图表类型，是一个用来表示同一个纬度范围中，不同区间频率的图形。
直方图是一个二级图表，是对一级数据的进一步转化。比如看上图案例，散点图（下面会说）本身记录了不同的数据的位置，而直方图就是记录在发生在这个纬度内的次数。
直方图乍一看很像柱状图，但实际应用场景往往使用了非常密集的柱体，让它看上去像折线图。对于设计师来说和直方图打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方图。
当视觉设计师、摄影师在学习处理位图的时候，就必然要学会直方图的读取，它并不是用来让我们学习如何对比前后数据差异的，而是让我们可以快速掌握这张图片中像素点在不同通道的分布量。
直方图是统计学中的 “频率分布” 的视觉表现形式，需要确保使用的场景符合直方图的定义，以及确保用户能理解图表内容。
对于直方图来说，如果维度对象少，只要获得相关的信息和数值，就可以像柱状图一样来绘制。
如果是针对一些比较专业的场景，如上方的通道直方图，那么就要放弃自己完成的目标，一定要借助相关插件，或者使用 Excel 等工具实现后再导入进来。
箱型图也叫盒须图，和直方图类似，它也是一个二级图表，即它不是直观反应原始数据，而是对原始数据的状态进行转译。图表中的每个箱型反应一组数据的分散情况资料，每个箱型包含下面这些信息元素。
箱型图反应的是一种 “大概” 情况，它不是一种用来进行精确数值展示的图形。箱体主要是上四分卫和下四分卫的区间组成，下/上四分卫指的是 “样本中所有数值由小到大排列后的 25%/75% 的数字”。
这里的排列主要通过 “数值大小” 来决定，而不是分布数据。比如一个班上100个同学包含身高 150、160、170、180、190 五种身高，虽然每个身高包含的人数不同，但 160 就是它的下四分卫，180 是它的上四分卫。
那么160-180身高包含的人数就是箱体本身的区域，上四分卫到上边缘是 180-190 的人数，下四分卫到下边缘是 160-150 的人数。
箱型图可以反应的信息是非常丰富的，它可以非常有效的反应不同数据组的虚实、占比、上下限，可以获得非常多有趣的结论。
在箱型图的设计中，对于箱体和触须的表达要依据数据本身的重要性来判断。有些场景对最大最小值更在意，则箱体颜色就浅，线段更瞩目。而要重点关注箱体的话，则可以对触须进行弱化使用虚线。
同时，箱型图的主要识别信息是 Y 轴的长度，一个美观易度的箱型图，箱体宽度尽量控制在一个比较纤细的水平，不要为了填充画面的空白强行做宽。
相信稍微了解过股票还是基金的同学，对K线图那可就一点也不见外了，下阳线、收盘光头阳、小阳线，开口就是老韭……不对，老股民了。
K线图是箱型图的一个变种，也叫蜡烛图，主要应用在股票、币市、期货等市场的交易数据上。一个K线图包含了阳线、阴线两个大类。阳线代表上涨，阴险代表下跌。
每个类型中，同时还表示当日成交中的最低价和最高价，柱体代表的是开盘价和收盘价。在我国股市，上涨用红色，下跌用绿色，在币市则相反。
K线图实际上动手设计它的情况微乎其微（只用开发好的），我们只要了解它的原理即可。
K线图基本只应用在和理财有关的证券行业中，在会出现 K 线图的图表模块中，必然会出现相应的交互操作。如左右滑动、放大缩小，它是一个具备响应模式的图表类型，包含两种状态。
如果空间足够，则使用箱体和虚线的常规设计。如果显示的对象密集，那么就会以一条直线来显示，忽略掉箱体的部分。
同时，不同的场景，对于阴阳线箱体的展示会有一定区别，除了色彩外，还会应用实心和描边的区别。
因为涉及财产、交易，针对K线图的设计，一定要做好前期的业务调研，以及对比不同的竞品，降低设计出错的概率。
散点图是一个使用也非常频繁的图表，它通过在 XY 坐标轴中添加圆点来表示不同对象的分布情况。
常见的散点图就是对普通二维坐标轴进行 “打点” 的图表，每个点代表统计学中的一个 “样本” 或数学概念中的一个 “定量”，下面我们就用样本来称呼每个散点。
每个样本在散点图中必然包含两种以上的信息，一个是纬度值，一个是数值，这样我们才能确定它在坐标轴中的位置。
当然，针对样本并不是只可以包含两种信息，比如表示班级成员身高体重的散点图，我们可以再引入男女的对比，对散点图进行色彩的区分。再者，还可以添加体脂率，用每个点的大小来表示。
散点图是一个很直观的样本分布图表，它是概率论中做回归分析的主要工具。所以往往我们会看到散点图内出现了一个线段，那条线段叫做 “回归线”，他是通过散点分布情况，计算出来的一条均值线段。这个线段不仅可以大致标识数据的趋势，同时可以用来做概率计算和预测。
回归线包含指数、线性、多项式三种，对应绘制出来的回归线是曲线、直线、还是波浪线。
散点图的圆点可以使用软件的 Symbol 功能进行创建，确保后续可以统一修改配色和样式，尤其是在包含多种色彩的散点图中。
散点图的绘制不一定要完美契合数据内容，但是在大致的分布和数量上要和实际情况贴合。如果仅仅是随意的进行分布、均分，那么这个图表就会显得非常的不严谨和随意，比如下图图表。
地图图表，是将抽象的 XY 二维坐标轴替换成地图类图形的图表。本质上它们也包含 XY 轴，所以一样可以将数据内容进行映射。
最常见的，就是地图散点图了。背景由实际的地图完成，坐标则由经纬度体系来记录。这是可视化设计中非常常见的中心图表应用类型。
同时，背景的地图并不是只包含地理信息地图，还可以是球场、商场、网页、建筑表面等内容。
热力图则是地图和散点图的合体，也是在二维坐标体系中显示样本，只是热力图更注重的是这些样本之间的对比。例如区域的降水量、台风风力表现、网页的点击区域等等。
热力图本质上也是将坐标轴切割成了若干小块（样本），每个小块有一个对应的数值，然后通过算法绘制边缘和不同的渐变。
它也是很少直接通过设计软件绘制的图表，需要借助插件导入数据来实现，我们只需要确认色彩样式即可。
构成图表相对其它图表来说是最简单的一种，包含扇形、环形、饼图、堆叠、矩形树等类型。
前面看到的图表大多是遵循我们小学就看过的 XY 轴坐标系（笛卡尔坐标系）建立的，但是饼图并不需要考虑坐标空间的问题。它是一个依靠角度来反映数据的图表类型。
饼图作为一种常见图表，包含两个大类，一般饼图和环形图。如果没有一些特殊的交互或者复杂衍生类别的话，环形图其实就是饼图中间镂空的版本……
饼图绘制的主要依据是需要表现几条维度，以及它们对应的百分比值。饼图的显示有比较大的局限性，那就是显示的维度数不能过多。控制在 2-9 条比较合理，数量过多就会导致图形失去实际的使用意义。
除此以外，南丁格尔图、旭日图，也是饼图的延伸，通过添加额外的维度或者子分类，对饼图中的每个对象进行额外的示意。
饼图作为基础图形，多数情况下也是由设计师自己完成的。但很多新手没有找到要领，导致做出来图形非常的别扭。我提供一个绘制的简单的思路，那就是通过绘制不同的三角形来拼装出一个饼图。
这类图形绘制的要点是确保三角形在圆心中的顶点时一致的，如果对比例的绘制有比较精确的要求，可以通过 Excel 之类的工具生成一个基础图形做背景，贴着它画即可。
南丁格尔图也可以沿用上面的画法，那就是对每个维度的三角形采取不同直径的圆做蒙版，就可以画出不同半径的占比区域了。
这么做的好处，是将图形的每个维度独立成一个单独的矢量图形，方便我们后续进行上色。
堆叠类图表算是一个相对不那么严谨的类别，因为它多数由其它基础图表发展而来。主要包括柱状堆叠图、面积堆叠图、百分比堆叠图。
之所以把它归类到分布而不是其它大类下的图表子项，原因是只要出现堆叠，就意味着这个图表的核心目的是展示构成内容而不是对比或者分布。
在柱状类堆叠图中，通过将每个柱体切割成不同的更小柱体来呈现子分类的占比。面积堆叠图，则是单纯的把折线图进行填充然后叠加的图形。
而百分比堆叠，虽然看起来和面积堆叠和接近。但它是以最上层数据为 100% 标准，往下的每一级对象都根据顶层百分比呈现的分布样式。
堆叠类图形的设计，最难的不是图形，而是色彩的应用上。之所以说堆叠只要应用就比原先图形的作用更大，原因就是堆叠使用不同的色彩表现层级，对于我们的视觉吸引力远远大于图形本身的轮廓。
而将丰富的色彩无缝拼接在一起，是最容易翻车的配色场景。在这种状态下，建议大家只用临近色来实现下级分类的搭配，千万不要使用色相差异过大的色彩。
而对于面积和百分比堆叠图，都建议在配色的过程中，直接使用带有透明度的色彩。因为这些折线并不一定会完美上下覆盖，当中间出现交汇的时候，不至于信息被遮挡。
矩形树图最初是一个设计用来表示磁盘空间占用情况的图形，通过将一块矩形切割成不同的区域来表示不同维度的占比，以及位置。
虽然也表示占比，但它比饼图类图表表示的信息更丰富。第一点是位置信息和并列关系，比如下面的 M1 芯片的示意图，就是矩阵树图的一种直观体现，在矩形中不同位置应用的不同芯片以及其占用的具体面积。
当然上方是最理想的情况，通常矩阵树图是为了对一些更抽象的概念实现矩阵化的排列。而这个排列中，还有个非常关键的要素是其中的 ”树“ 字。
因为矩阵中的每个切割出来的矩形，都可以作为一个独立矩形进行下一级的分割，实现一个类树状图结构的信息收纳。所以，完整的矩阵树图，是可以支持缩放或点击进入下一层级的。
而使用矩阵树图不使用树状图，原因也在于我们需要表现它的占比，而不是单纯的结构。所以如果只是简单表现层级结构，如企业组织架构、知识点拆分之类的，要用树状图而不能使用矩阵树图。
在这类图表在项目中基本不会独立开发出来，因为其复杂度基本都会使用开源代码。
设计师的主要工作，就是根据对应开源图表，指定配色的方案，切割的边缘大小，以及文字的显示规范即可。
联系图表，是用来展示维度之间联系的图表类型，包含桑基、关系、和弦、韦恩图、依赖关系图等。
联系类图表中，多数是非常复杂的图形，已经脱离直接手工绘制的范畴，所以我们只简单介绍其中几个有代表性的图表且给出设计建议了。
桑基图是一个用来描述某维度值 ”流动“ 到其它维度走势的流动图表。
这是一个比较复杂的概念，比如下面的概念，不同国家人口的流动，人还是原来那些人（数值），但他们以不同的数量比例，移动到不同的国家（维度）。
桑基图的应用，关键在对数值迁移流向的关注上，它适合应用的场景在监控产品用户的跳转去向，货物的外贸出口状况，或类似新冠患者流动城区、地点的表示。
桑基图的数值总量通常是不变的，会包含起点和终点的维度，而维度的长短即代表其包含的数值总量（权重）。
它有非常多的变种，只有借助特定的图表生成工具，才能绘制出曲率、比例精准的流线。
关系图是大家比较不会陌生的图表类型，它在各类工具性软件、网站中都有应用。比如天眼查股东关系图、Wolai 页面关系图等。
关系图中包含了大量的节点，节点之间还有对应的关系，同构线段进行链接。常见的关系图有两种类型，一种是力导图，一种是弧长链接图。
力导图这名字也很难理解，源于力学中粒子存在某种互斥又具有引力的规律，粒子在两种力的作用下从初期的随机性会不断位移趋于平衡有序（读书多的好处？）。
力导图通常有一个起点，然后去关联后续的其它节点，如果节点之间还有关联，它也可以对这些节点的关联做出连接。它不仅表现一对多的关系，也表现多对多的关系，甚至在极其复杂的关系网中可以呈现成一定的强关联 ”聚类“ 信息。
而弧长链接图，则是通过弧线对节点进行关联的图表，它既可以是环形，也可以是水平横线的展示。
和弦图是环形关系图和桑基图结合的图表，它表示结构之间的依赖关系和强度，链接的线段不再是粗细统一的而是具有粗细比例的标识，且维度之间的长度也有表示。
这类图表常用于社会学、生物学等学科的研究统计结果绘制上。如果单纯浏览，看上去非常复杂，所以正确的使用形式是可以进行指定维度的展示和隐藏的。
韦恩图，它是所有学 UI、UX 设计的老朋友了，一个用图形层叠相交来表示它们关系的图形。RGB、CMYK 的色彩介绍里韦恩图的身影必不可少。
韦恩图的使用相比起来没有那么严格的数学运算，它只是一种关系表现的方法，可以对各种无法量化的对象进行关系的陈述。比如，UX 设计师应该具备的知识点……
下面是超人的电话亭团队持续整理收集到的可视化组件库工具网站，以供参考：
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录：
一、设计前的思考
1、设计思维模式
2、设计理念的确立
3、案例分析（9点）
二、设计时需注意
案例分析（12点）
一、设计前的思考
首先需要思考的问题：设计思维模式、设计理念的确立
1、设计思维模式：
设计思维是一套在设计前需要思考的结构化的流程，用来解决以人为本的问题。其目的是把在设计前所遇到的与设计相关的问题结构化，化繁为简，形成一套流程，从而进行有序的思考。
设计思维是一种思维模式和认知方式，其最大的特点是已知需要解决问题的结果，如何在已知最终结果的情况下更好更高效的解决问题是其核心目标。
思维方式的确立，可以有效的为设计做好前期准备，提高设计的效率，更准确的为“以人为本”出发而服务。
作者 Timo Kuilder
2、设计理念：
设计理念是在设计构思前所确立的主导思想，它不仅是设计的精髓，也赋予作品文化内涵和风格特点。
好的设计理念很重要，可以使你的设计拥有属于自己的独特风格。
设计理念必须以人为本，针对用户年龄、职业、爱好等特点，进行整合，根据用户主观方面的个人喜好，从而进行设计。
作者 Timo Kuilder
3、案例分析：
1、专注：确定产品的主要功能，功能的明确可以帮助用户最高效的完成任务
案例1：百度网盘
百度网盘是一款云存储服务产品，用户将可以轻松将自己的文件上传到网盘上，并可跨终端随时随地查看和分享。
案例2：有道云笔记
有道云笔记是一款专注办公提效的笔记软件，支持多端同步，用户可以随时随地对线上资料进行编辑、分享以及协同。
2、特色：每款产品都有属于自己的特色，区别于同行产品的不同之处，结合产品调性设计，不要盲目跟风；它可以是功能、体验、或者是视觉
案例：每日故宫
每日故宫是一款以日历的形式推出故宫藏品的应用，“每天一件故宫藏品”，“让观众随时随地看到故宫藏品”。其主要特色功能就是以日历的形式展示内容，在视觉和图标上也有自己的特色。
3、情感：在设计的过程中，可以加入情感化设计，使用户将情感融入产品中，关系更紧密
案例：淘票票
有趣的文案结合IP可以快速的将用户代入产品中，增强与用户之间的亲和力，有种身临其境的感觉
4、互动：动效的运用可以给用户带来不一样的感官视觉，即使只是一个小小的按钮
案例：最右底部Tab栏切换状态，其互动可以增强用户与产品之间的互动
5、调研：调研可以了解产品所在行业的情况、市场需求、竞争力、同类型产品的优劣势等，从而更好的设计产品
调研方法：按调研途径分为文案调研、在线访问、电话访问和实地调研
调研工具：问卷星、问卷网等
分析工具：Origin是一款常用的数据分析软件，操作简单，可视化直观；SPSS是一款专业分析工具，其功能包括数据管理、统计分析等
6、用户：研究用户特征、细分用户，站在用户角度思考，了解用户想要什么样的产品
用户研究：
是一种理解用户，将他们的目标、需求与产品宗旨相匹配的理想方法，能够帮助定义产品的目标用户群
用户研究重点工作在于研究用户的痛点，包括前期用户调查、情景实验等
作者 Timo Kuilder
7、场景：需要考虑用户使用场景是怎么样的，不同场景功能需求不同，可以用故事板的形式展示用户场景
使用场景：
包括时间、空间、设备支持、社交及用户情绪等，进行应用场景的判断和描述的时候，需要考虑全面，不同的场景下存在着用户不同的需求。
故事板：
故事板也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作前期
故事板工具：Boords
Boords界面简约美观、操作简单，满足制作故事板的基本功能
8、数据：以数据为依据从而进行设计，不做没数据支撑且无意义的设计
数据统计：百度统计、百度指数、阿里指数等
百度统计：全球最大的中文网站流量分析平台,帮助企业收集网站访问数据
百度指数：
百度指数是以百度海量网民行为数据为基础的数据分享平台。在这里,你可以研究关键词搜索趋势、洞察网民兴趣和需求、监测舆情动向、定位受众特征
阿里指数：
是定位于“观市场”的数据分析平台，旨在为中小企业用户、业界媒体、市场研究人员,了解市场行情、查看热门行业、分析用户群体、研究产业基地等
作者 Timo Kuilder
9、少即是多：突出用户所需的主要功能即可，其他功能可弱化或者直接去掉
少即是多：
现代主义设计建筑大师——米斯·凡德罗提出
在设计中：
少即是多就是明确目标，专注地围绕用户目标进行设计，将产品打造得简单易用，同时又能够解决用户的需求
案例：留白
留白是一款提供多种图文排版样式，可以将文字、署名和日期安置在图片以外的留白区域，让你记录的每一个精彩画面都变成有故事的留白卡片
二、设计时需思考
设计时需要思考的问题：
1、简约：简洁的界面可以减少用户发生错误操作，减少认知成本，便于用户了解和使用
案例：字里行间
字里行间是一款文学性非常清新的文字阅读与创作软件，可以让用户静下心来阅读与创作，整体设计简洁，界面结构清晰，减少了用户的学习成本。
2、易用：容易上手的产品才是成功的产品，从用户思维入手，功能一目了然，操作更方便
案例：句读
这是一款不错的掌上语句社区，每天可以轻松的看到丰富的优质语句，解决了用户想要一款可以体验精彩文学内容产品的APP，功能按钮明确，操作快捷，符合用户需求。
3、视觉：产品是否好用为第一重要性，视觉也不可缺少，强烈的视觉可以抓住用户的眼球，给用户留下印象，让用户记住你的产品
案例1：CCtalk
这是一款致力于为学习爱好者打造的在线互动学习平台，叠加图标的运用在界面上特别突出，整体视觉给人强烈的感觉。
案例2：飞猪
这是一款提供机票、酒店、旅游线路等商品的综合性旅游出行网络交易服务平台，金刚区的图标设计得很精致，给人印象深刻，吸引用户点击。
4、色彩：品牌色和辅助色的确立，确定适合产品的品牌色，品牌色可以加强用户对产品的认知
品牌色：品牌色可以决定产品的基本调性，让用户在众多产品中一眼就看到你的产品，容易被记住和识别。
案例：网易云音乐、BOSS直聘
网易云音乐、BOSS直聘的品牌配色都很简单，BOSS直聘的配色只有绿色和白色，配色单一却显得突出。品牌色运用到界面可以加强用户对产品的认知。
5、规范：规范设计的统一，在视觉上起到整齐的效果，保证产品的统一性
案例：QQ音乐圆角的设计，圆角的统一和运用使页面看上去圆润有亲和力，适合听歌的时候那种放松的心情
6、习惯：遵循用户的操作习惯，设计是为了让用户更好的体验，而不是让用户用的不舒服
案例1：淘宝
案例2：京东
搜索栏和分类：搜索栏和分类都是电商类平台最重要功能，两款产品都遵循用户的操作习惯，放置了右上侧，是因为用户已经对这些功能的位置形成记忆
7、安全：在设计中要考虑的重要因素就是安全性，以及操作和选择都是可逆的，可以减少用户的怀疑和心理疑惑
案例1：微信聊天撤回和重新编辑功能
案例2：智行火车票退票功能
案例3：淘宝退款、退货功能
8、人性化：用户可以根据自己的操作习惯、所需功能或者爱好制定界面
案例1：UC头条的频道选择、形象选择
案例2：酷狗新版选择主题皮肤
两款产品都很人性化，用户可以根据自己喜好选择关注的内容和风格
9、反馈：用户操作出现异常的时候，及时给予用户反馈信息，并出现正确引导
案例1：QQ阅读的书架还没有任何书本的时候
案例2：虎课网在没有登录账户的时候出现的反馈界面
案例3：Soul网络异常
案例4：喜马拉雅未成年模式
10、警告框：在紧急中断、需要确认和通知用户的情况下使用，友好的文案，可减少用户心理的不适
案例1：微博在无WiFi网络的情况下播放视频
案例2：腾讯课堂网络异常
11、加载：分为静态和动态两种形式，动态加载可以吸引用户的注意力，减少用户等待的焦虑和无聊
案例1：哔哩哔哩首页和页面加载状态，首页加载是动态，而页面加载的形式是静态
案例2：虎牙直播动态加载状态
12、引导：引导功能，便于用户了解功能和操作界面，产品更新后也可以使用引导来告诉用户
案例1：芒果TV功能更新指引
案例2：酷狗功能更新指引
案例3：每日故宫功能解说和功能更新引导
小结
希望通过这次的UI设计思考总结，让自己变得更好更优秀，总结是对自我的成长和监督，不仅可以提高工作的效率，还可以加强对产品的思考能力。结合UI设计思考过程，体验不同的产品，感受不同的设计，注意细节、认真分析
作者：黑泽双炽 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Neumorphism / soft ui（新拟态也有人叫同化、软UI）是什么？在前一段时间，大家即使没有看过，但是应该也听到过一些关于这种新风格的介绍，或者是在某某趋势中有类似作品的出现，不太了解或者一看而过。简单的介绍一下，标题并非判断结果，而是希望同大家一起探寻一起交流，一起讨论这种风格是否会是接下来的新趋势...
起因是源于2019年11月5日，来自乌克兰的设计师 Alexander Plyuto 在追波和ins上发布了下图的一张作品，作者说明信息：
“让我们想象一下，如果在移动界面设计中，投影的形式发展的更好的话，那将来的界面将会是什么样的，这是我的愿景。”
Dribbble-Alexander Plyuto的作品
目前作品在追波平台收获赞量4000+，浏览量23W+，一路飙升至追波2019年pop排行第一热门的作品，同时在ins上的传播也是异常的火爆，获得很多设计的喜欢，评论顿时炸开了锅，其中有设计师称呼这种风格为“Neumorphism 新拟态”或者“Soft UI 软UI”，于是这种叫法慢慢传开，可能并不准确。
为什么这个风格会火？你怎么认为？
先抛开作品发布的平台带来的热度，很多设计师认为这本身也是一种潜在的趋势，随处可见的C4D的轻质感在不同领域和不同方向的使用，IOS13更新后的部分抛弃了纯扁平，重拾了3D的感觉。它会火的主要还是在视觉上，这种风格刚一出现，它是非常新颖的，在长达半年的几乎高度一致的风格下，它是新的尝试，让人憧憬的方向。
能有不断创新的设计师带给我们不同的设计风格，首先需要感谢，其次再去以个人的视角看待它。那么多风格的作品，那么拟态就变成趋势了？我们带着这个问题，一起继续探讨（我们先把代码实现等话题放在文章最后讨论）。
带着疑问，仔细看一下上面的作品，第一眼看有点像早期的写实风格（如下图），接近真实感，有强烈的质感和空间感......但是不同的是也带了一点当前依旧流行的多彩模糊阴影的感觉。我们试着去找一下这种风格的特点有哪些......
IOS 13 图片编辑界面
by Mike | Creative MintsMike
通过观察，我们不难发现这种风格的一些基本特点：
元素并不浮动
元素色彩相对单一，与背景高度统一
左上角亮色投影，右下角深色投影
多以卡片样式出现
更加适合大圆角图形
...
克服恐惧最好的办法就是 —— 临摹它！
这种表现方式，其实并不难，去阅读了几乎全部相关的资料，也去查阅了作者相关的介绍和说明，试着去了解一下这种风格。首先我们先以按钮为例，请看下图：
这三个图标，你更愿意点哪一个？
这是我们比较常见的三种也是相对比较流行的表现方式，我们分别从常规的顶部视角和侧面视角去观察它们：
扁平的：首先在层级上，扁平的通常给我们的感知就是与背景是同为一个平面，视觉层级也没有特别强烈的前后关系（不考虑图标本身），对背景没有太大的依赖，如果本身背景与画面整体背景有区分，色彩就划分了层级。
投影的：带投影的给我们的感知就是漂浮起来的，单独看它，它漂浮在背景之上，与扁平并列看，它还要高于扁平的，通常大家为了突出某些内容，某个模块会去使用这种样式。投影的使用对背景的依赖几乎可以忽略，因为投影除了形状可以调整，包括色彩、大小等都可以调整，且它是无边界的漂浮着，即你可以随意定义它的高度。
新拟态：顶面看，它似乎是介于扁平与投影之间，侧面看，同样也是漂浮的，但是它有厚度却又没有离开平面，它的范围相对于投影的无边界，似乎还有一些模糊的界定。对背景的有一定的依赖，需要几乎相同的色值去实现。
回到上面的问题，这三个你会更倾向于点哪个？当然上面的案例没有示意在不同色彩下的情况，也有认为抛开体感上，前面两张白色背景的已经高于新拟态，因为它与背景的高度融合，在对比度上已经弱了很多。
可能这时候有人会有疑惑，单独看这一个按钮不是很有对比性，尤其是在视觉上体现的也不明显。所以我们简单绘制了一些卡片试试在作为信息承载的时候，这种风格的效果如何，同时也去将不同的样式融合，看看脱离背景的约束，局部是否可用与协调。
我们可以从上图看出，当这种风格用做内容承载时候，不管是文字图片按钮或者图标，仅仅在用做卡片的时候，效果还是蛮好的，它同前面两种风格一样，仍然可以清晰的区别内容层次、间距等，但是亲测如果大面积使用，页面会变的更加复杂，整体的层级较难清晰划分，那么局部使用效果如何？
局部使用在某种特定的场景是可以用的，如下图的计算器界面。在的卡片、按钮、进度条等样式下也能得以很好的展现。但是它比起投影卡片，除了视觉上，点击感、移动效果......差了很多。
看的这里，大家应该会有一个自我评定标准，这应该（目前）不会是一个大趋势，至少明年不会，虽然这种风格很受人喜欢，但是这种风格还存在很多弊端：
首先，除了卡片等样式，它不能有效的提高信息的传达，页面内容密集，过多使用容易导致混乱，如果靠投影的大小或深浅来区分，即使达到效果，画面会变得复杂沉重。
按钮的凸起和凹陷的状态，绝大部分需要通过投影来识别，这是比较困难也是比较严重的问题，这样是几乎很难区分点击的前后状态的。
背景色的依赖太大，色彩对比度较低，相对于白卡投影等形式的应用，目前的样式不能让内容与背景产生良好的对比，不利于信息传递。
实现问题，其实现实难度到还真不难，话筒交给你们......
所以这种风格就凉了吗？
这种风格其实在某些局部地方还是可以使用的，小面积的和其他风格进行混合使用。无数的可能性需要大家去做更多的尝试和创新。通过对趋势的了解，结合我们认知范围内正确的组合和排列，说不定会创造一个意想不到的“船新版本”。
我们只有在这样的思考和创造的过程中，获得更多的灵感。不能不考虑实现问题，但是我们更需要顺应趋势，不管这个趋势能火多久，在将来能否得到应用，只有不断的探索更多更新的东西，设计才会变得更加美好。动起手来吧~
下面还是简单的分享一下实现的方法，并分享一下相关的源文件与作者的源文件供大家学习交流哦！
凸起部分：
第一步：确定配色，最好是浅色或者是深色，选取高光色和投影色（非同色系的不同组合大家可以多去尝试）
第二部：创建对象，更加适合圆角的对象，可以是纯色，或者轻微的渐变效果也更好
第三部：添加投影，投最好是X和Y轴的位移是一致的，至于角度，大家自由发挥吧，这里建议亮色投影和深色投影分别复制一份制作，如果是在同一图层上做，交界处效果不理想，更模糊。
凹陷部分：
步骤几乎一致，投影换成内阴影做对角线的深浅添加可以。
这里说一下，凹陷部分完全按照这种风格去实现，显示效果其实不好，作者包括其他设计师都在这里做了优化，优化后的实现方式上已经不属于这个风格了，因为最后的实现效果，侧面观察它已经是脱离背景的，如果融合背景也可以，只是边界会更加模糊，所以仔细观察作品，细心的同学应该已经发现是如何处理的：其实就是添加一个边框，再让投影充当浅色高光。
作者：Frannnk 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com