界面设计是一个很庞大的体系，具有很多原则，比如轻量、容错、清晰等等，其中包含了交互层面以及视觉层面等，今天我想单独把视觉剥离出来，来讲一讲我对界面设计“视觉层面”的理解与认知。
在我看来，界面设计的视觉层面主要可以分为三个维度来解析：信息传递、视觉美化、创意创新。
信息传递是让用户看的明白，快速清晰的获取信息；
视觉美化是让用户看的舒服，让界面足够美观；
创新创意是让用户看的惊喜，看到一些不一样的创意点。
如下图:
三个维度的目标如何实现呢？我提取了以下三个关键词：
清晰、和谐、独特是我们要达成的目标，达成目标一定会有一些原理所在，而有了原理就会有具体的执行方法，所以后面的每一个知识点，我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解，大纲如下：
1 清晰
1.1清晰-降噪-容器整合
1.2清晰-聚焦-局部放大
2 和谐
2.1 和谐-呼应-颜色呼应
2.2 和谐-节奏-变化对比
2.3 和谐-饱满-负形缩减
3 独特
3.1 独特-品牌延展-IP形象结合
3.2 独特-事物本意-事物图形化
1.清晰
1.1清晰-降噪-容器整合
设计目标：清晰
执行原理：信息降噪
执行方法：容器整合
当界面信息过于分散时，会对用户造成不必要的干扰，导致用户产生疑惑甚至直接离开界面。
作为设计师，要做的就是对信息进行整合，我们可以称之为信息减噪，目的就是让页面更加清晰，减少干扰。
这里我经常使用“容器整合法”来让内容更加清晰、聚焦。
当分散的内容装进一个“容器后”，就可以使内容聚焦在容器当中，让信息更加规整。而卡片就是一个很好的“容器”。
实际案例：
在改版腾讯动漫个人中心的时候，头部就存在信息分散不聚焦的问题，四个视觉触点（绿色圈处）分散在四个角落，形成极大干扰。
这里我就采用了”卡片容器“的方法，将信息装进容器中，减少分散信息的干扰，使界面更加清晰、工整，效果如下：
现在很多产品都在使用卡片化的布局，尤其是在信息数量、层级较多的时候，更加需要有容器将其规整起来，这样才会让界面保持不乱！
1.2 清晰-聚焦-局部放大
设计目标：清晰
执行原理：聚焦
执行方法：局部放大
我们在平时做需求的时候，经常会遇到信息特别多，特别乱的时候，如果此时我们选择什么都想突出，最后的结果一定适得其反，什么都突出部不了，这时候就需要我们选择一些内容来进行局部放大，反而可以让整体信息更加聚焦、清晰。
这种方法经常用在有数字展示的页面当中，比如下面这种页面：
再比如，下面这个模块信息，如果”3“没有放大，整体的信息会乱到你眼花缭乱，我们看下对比：
所以，大家在遇到有数字，且信息杂乱的时候，就可以采用局部放大的方式来使整体更加聚焦、清晰。
2.和谐
2.1 和谐-呼应-颜色呼应
设计目标：和谐
执行原理：呼应
执行方法：以颜色呼应为例
很多时候我们会觉得自己做的东西很不和谐，其中一个很重要的原因就是因为页面中没有贯穿的元素，也就是没有呼应，很常用的一个呼应的方法就是颜色呼应。
例如这个画面总看起来不够和谐，你会觉得绿色很突兀，就是因为颜色上没有呼应：
而一旦你想办法，让绿色“事出有因”，比如取自眼镜的颜色：
那么，突兀的问题解决了，和谐的目标也就实现了。
而刚才那个人中心的界面：
我们会发现，图标的颜色也是取自背景色，所以整体看起来才会如此和谐。
除了颜色呼应，还有很多呼应的方式，比如图形、图标风格等等，这里就不再举例了。
2.2 和谐-节奏感-对比变化
设计目标：和谐
执行原理：节奏感
执行方法：对比变化
对于音乐，节奏感是非常重要的，如果一段音乐一直是一个频率，那可能也算不上音乐了。
界面也是一样的，节奏感是让页面变得“和谐”很重要的因素之一，如何做到呢？
我们在展示文字列表的时候，你觉得下面两种哪个更舒服些呢？
我猜你会觉得第二个舒服一些，因为它有变化，有节奏感，所以它和谐、舒适。
我们会发现很多产品首页带有封面图的列表都有很多种排法，例如1带多，1x2，2x2，2x3等等：
就是为了防止每个模块过于重复，如果每个模块都是每排两张封面，一直下来：
看起来会非常乏味。
2.3 和谐-饱满-负形缩减
设计目标：和谐
执行原理：饱满
执行方法：负形缩减
在做图标或者字体的时候，经常要讲一个原则就是“饱满”，界面上每个“不能拆分的元素”都需要尽量做到饱满，比如图标，再比如下面这个信息组件：
正文就属于不能拆分的单一原子，大家可能会问，这种信息不就是方方正正的一个信息块吗，怎么会不饱满呢，比如行间距过大：
再比如，我在优化腾讯动漫信息流的时候，发现正文出现的表情远远大于文字，如下图：
表情一旦出现，就会造成大量空隙（负形过大），导致整体不够饱满、和谐。
我们可以看下其他产品，表情和文字几乎都是一样的大小，他们都会尽量缩小负形空间（也就是空隙小大）：
在这样的原则之下，优化后的效果如下：
以上是关于和谐的几点方法。
3.独特
如果你的界面做到了清晰、和谐，在视觉层面就已经算是及格了，如果还能加上一点小创意，就可以让人眼前一亮。
如何能够做到独特？可以从两方面出发，1是品牌，2是内容本身含义。
3.1独特-品牌延展-吉祥物结合
设计目标：独特
执行原理：品牌延展
执行方法：IP形象结合
从品牌出发，可以有很多方向，比如logo，图形，品牌吉祥物等，下面以品牌吉祥物为例：
在做小说阅读器的时候，有一个设置选项是选择文字的背景颜色，选择控件是圆形，而品牌形象也偏圆形，此时就可以将圆形控件与形象相互结合:
但是选择控件有两种状态，为了更加生动，就让给形象正面面对你的时候作为选择状态，而转过身作为非选择状态，大概效果如下:
此创意已在腾讯动漫小说落地实现。
3.2 独特-事物本意延展-事物图形化
设计目标：独特
执行原理：事物本意延展
执行方法：事物图形化
除了品牌，还可以根据事物本身的意思来延展图形，比如日间夜间模式的切换按钮，男女性别的切换按钮，都可以利用事物本身的含义来延展图形设计:
此创意已在腾讯动漫个人中心模块落地。
再比如，弹幕的展示方式，就可以联想到电视机，再把电视机图形化，如下图:
这里需要注意下，有时候如果图形过于普通，可以配合动效来增加独特性，但一定要注意开发成本。
作者：黑泽双炽 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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咨询、用户体验公司、软件界面设计公司
这些年里，这款工具进行了快速的迭代和更新，响应设计师们的需求，不断完善功能，成为设计行业推荐率（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咨询、用户体验公司、软件界面设计公司
通过用各类对比继续为大家带来视觉“热”知识~目录如下
海报视觉如何做的有创意？有哪些方法呢？
比如从构图、拟物、光影、嫁接、对比、或者反差？等等等等
每一种又都可以拆分成很多细类。
比如对比在视觉海报中的运用，又有明暗对比、颜色对比、大小对比、虚实对比等等、太多了！
首先我们来分析一下大小对比是如何应用的。
我们先看下这张图：
两个元素， 如果一样大，平铺在画面中，就会显得普普通通的，没有任何亮点。
如果我们把其中一个放大，另一个缩小，再来看：
画面是不是有特点了很多，并且有了节奏感， 就连文案排版也有更多的方式。
所以对比就是让画面的两个组成部分/元素，以夸张的手法，布局构图，以让画面产生强烈的反差。以提升画面冲击力，画面纵深，内容丰富层度。是非常有效提升画面品质的方法之一。
那大小对比如何玩的精通，玩得高级呢？
我们一起来看一下：
1.2.1 全身与半身对比
这种半身人物和小人物的对比，或者头部表情眼神与小人物的对比主要可以展示人物细节，后面的人物放大表情传递情绪，前面的人物展示全身，传递状态，可以很好地传递内容，常常用在各类视觉海报中。
(下面右侧的图是江湖哥2017年做的图，分析两次了，哈哈，备注下）：
这种对比有强烈的大小反差，并且可以很大程度地拉伸画面纵深，表现出很强的空间感！
并且还有一个细节：这两张都是三角形构图，非常稳定。
所以我们在设计的时候要也要注意画面的构图方式，夸张对比同时，要保证画面的稳定和饱满！
1.2.3 全身与全身对比
全身的人物对比很小的人物，让画面有更多的空间可以利用， 可以留白想象，也可以打造场景氛围，展示更多场景氛围。
1.3.1 小场景与大人物
夸张化的对比，让本该小巧的人物矗立在场景里，很容易就营造除了一种巍峨磅礴的视觉感受。
一般需要很高的设计成本，工时不小。简单点的做法我们可以直接在人物下面拼接一些小场景，比如这样：
一些日常小需求中，没有那么多的时间去打磨细节，就可以这样做，既能保证按时完成需求，也能有一定的创意性。
1.3.2 小人物与大场景对比
这种方法也非常具有创意性，把一些很小的物体放大，人物缩小， 反差表现两个主体的大小对比。往往也能有出人意料的效果，需要更多的灵感和想法。
创意本身就是打破常规，把不可能变成可能，达到出人意料的效果就是创意。大小对比在画面中的各种玩法就是可以很好达成这种目的的方法之一，大家可以多去尝试，和练习，单这一种方法用好了就很牛逼了。
光影是在平面视觉里常用的一种技法方式，再说光影的创意之前，我们先说一下光影的作用。让大家对光有所了解。
我们为了直观一些，直接用几个图片说明。
现在这张图，这是一个瓶子的图形：
我们给瓶子加入光影：
瓶子就变得立体了！
我们给背景加入光影：
空间变得有纵深了，画面层次也丰富了起来！
所以光在画面中最基础的有两个作用：
⑴让物体变得立体，更加真实！
⑵增加空间纵深，丰富画面层次！
那我们应该如何利用光影，去做更有创意性的设计呢？
光影、光影，先有光后有影。那我们就先来说说主要表现光的几个玩法：
2.2.1 逆光
逆光就是主体在正前方，光源与主体重叠的一种使用方式，可以说是我们最常用的光影塑造方法之一了：
它的特点是光源与主体重合，形成很强的对比，在画面可以可以非常好地聚焦视线，强化主体。
2.2.2 侧光
侧光是光从主体侧面打过来的光，一般不会太强：
主要是起到一个丰富画面层次，营造氛围的作用。
2.2.3 顶光
从主体顶部打下来的光：
这种光，可以有效引导视觉，把需要的部分亮起，不需要的部分暗下去，由上至下，吸引人的视线范围和顺序。
2.2.4 聚光
从前方照射过来的灯光：
聚焦视线，不要的地方全部暗下去，是一种最能收拢视线的打光方式了。有些细节比较丰富的聚光画面，暗部也会保留一定的细节，不会是一个纯黑色。
2.2.5 造型
给光赋予一个造型，可以达到一种形式创意上的突破，
比如这种：
把光塑造成一个人物的造型，下面放置对应的人物锤丧的状态，形成很强的人物情绪反差，可以说是非常有创意了。
还可以把光塑造成物体，比如这种：
把偷过来的光塑造成与主体相关的某个物品造型，中间放置一个小的人物，同样也是一种很棒的创意方式。
2.2.6 分割
除了打光方向，造型之外，其实还可以用光来风格画面，也可以起到一些非常亮眼的视觉效果，比如这样：
以上就是光的玩法了，可以看到，光的玩法多种多样，利用好了可以让画面非常具有创意性。
说完了光，我们来接着说说影子的玩法都有哪些呢？
2.3.1 投射
投射相交来说是比较常规的一种处理方式了：
用投影的方式加入到画面中，可以增加画面层次，渲染氛围，让画面更有深度。
2.3.2 造型
影子也是可以改变造型的：
本来是应该与人物动作一致的影子，被改变造型与人物产生互动或对比，映射出了非常强的故事性，和内容深度，非常具有创意性了。
在一些插画或者游戏视觉中同样也可以应用起来：
内容深度和想象空间直接拉满！
2.3.3 剪影
配合逆光的形式，将主体以剪影的形式表现出来：
剪影的表现形式，为了凸显剪影，背景上都会有一个逆光源存在，并且轮廓要清晰，在素材上刻画一些轮廓光源以让人物变得立体，可以营造出很棒的神秘感，常常应用在神秘嘉宾、新品发售、新角色发布等活动中。
应用在一些游戏中，强烈的明暗对比配合富有气势的人物造型，也可以打造出一些很有视觉冲击力的海报视觉！
光与影的玩法多种多样，既可以让画面变得立体，又可以提高空间纵深。打光方式、造型、剪影、分割等等用法，可以让我们的视觉变得不太平淡单调，让画面拥有无限想象力的创意方式。
阵营对比的特点是5:5分画面，以对比色铺垫画面，形成强烈的视觉对比，和阵营感。常用于表现两个不同的阵营，或者正反派的视觉表现中。
除了影视海报、游戏，竞技类体育类也常常使用这种对比方法：
主要表现：对抗、竞争、阵营
状态对比常用于表现同一个人或主体物的多种状态，比如人物的正常状态和特殊状态对比。通过一些技法让两种状态和谐地拼接到一起，是让单薄画面丰富起层次和内容的一种有效方法。
比如用画面拼接的方式：
或者是同一主体，把两种状态表现到一起的方式：
主要表现：人或物的的两种不同的状态，冰对火、明对暗、正常对黑化等等。
让两个不同的时空联系到一起，形成时间地点上的反差对比。
3.3.1 两个不同空间的对比
由同一个元素贯穿两个不同空间，提供画面的延续性，表现出打破/穿越空间的意境，非常具有冲击力。
3.3.2 两个不同时段的对比
同一人物不同时期通过倒影等巧妙的表现方式，与主体形成时间上的对比。具有延续时间长河的感觉，为观者提供非常大的想象空间，是一种很有创意性的的方法。
主要表现：空间穿越、时间变化的对比。
这种创意方式更多是传递人物的情绪，安静的状态
对比愤怒的状态，快乐的状态对比悲伤的状态，
也可以表现人物的两面性，正常状态和阴暗面等等:
会让观者感受到强烈的情绪传递，视觉表现上反而不会那么注重。
主要表现：重视情绪的传递
此虚实非彼虚实。
和我们常说的虚实对比不同，这里指的是虚幻和真实的对比，比如：
用线条或者影子打造一些和实体区别开的虚构元素，和实体的元素形成对比，会有一种很虚幻浪漫文艺的感觉，可以用于表现一些幻想，不切实际的爱恋类似的主题中，能达到很少见的一些视觉效果。情感和创意都能得到很充分的传递。
作者：菜心工作室 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
从视觉空间、字体性格、颜色情绪三个大方面来谈一下我对视觉知识的部分理解！目录如下
空间感：空间感( sense of space)是指艺术形象通过一定手法引起的类似现实空间的审美感受。艺术家通过特定的瞬间造型和空间深度的追求，使人联想到其活动、生活的环境空间。在绘画、摄摄影艺术中，形象存在于二维平面中，但通过构图、透视、线条走向、光影和色彩处理，使人感受到空间的整体性、立体性。
而在我理解总结，空间感其实就是运用各种手法，打造出画面的空间纵深感，让二维的画面变成三维，从而提升画面的品质、细节、冲击力。
我们以人物海报为例对比几张图，直观感受一下：
无空间感：
有空间感：
我们直观的可以看到，都是人物海报，下面的两张明显更有品质感。有空间感的图，画面会更高级。
那是因为空间感会让你的画面更有层次，更灵动和富有场景感。这就是空间感的有点。
空间感，其实就是打造画面纵深，让元素之间形成前后关系，那有哪些方法来打造画面纵深呢？我们总结了5个方法来分享给大家：
1.3.1 构图
富有极强透视线的构图能很直观地表现出空间感。
比如
这类
这类拥有很强透视的构图，不用做别的，光构图就能体现出很强的空间感了。
实际运用中，我们还可以利用标题文案排列出这种透视构图来打造空间感：
1.3.2 虚实
虚实分为：
1.轮廓虚实
2.颜色虚实
轮廓虚实：两个相同的元素，轮廓模糊的在空间上会感觉处于轮廓实的元素后方。
这是两个元素，放到一起就会感觉上是在同一个平面上的。没有虚实关系。
如果把其中一个圆的轮廓虚化：
是不是就会感觉出右边的会在左边的前面，拉出了前后的空间感。这就是我们的轮廓虚实了。
颜色虚实：越贴近背景色的颜色，在空间上会感觉处于后方。
还是这两个元素，如果把其中的一个颜色调成和背景贴近：
两相比较，颜色更实的飞碟，会处于颜色较浅的飞碟前面。
1.3.3 大小
越大元素会感觉越近，越小的元素感觉越远。
在实际操作中我们一般可以利用不同元素来制作这个效果。
比如这是一堆元素，如果大小都差不多，就会感觉是平铺在一起的，没有空间关系。
如果调整它们的大小， 重新摆放，通过近大远小的原理，就可以很轻易地打造出元素之间的前后关系，从而营造出空间感了。
大小对比空间再其他画面中的应用：
1.3.4 明暗对比
除了虚实、大小之外，明暗也能对比出前后关系，从而营造空间感。
通过纹理层次的明暗对比，一明一暗的对比，也能拉出前后关系。从而营造空间感。
1.3.5 穿插
利用元素相互穿插产生的前后关系，也能营造出空间感。
这是1个元素和两个圆的平铺，没有交集。
如果我给他们穿插重叠在一起：
那就能产生元素之后的叠压前后关系，从而也能营造空间感。
利用在海报中：
以上这五种方式就是我们今天分享给大家的方法啦，
在视觉海报的打造中，基本都不是只靠其中一种方法去打造空间感，而是3种，甚至5种一起运用，可以让塑造的空间感的更有层次细节和冲击力。
比如：轮廓虚实+颜色虚实+大小，或者：穿插+大小+明暗。
大家一定要灵活运用，自由组合，以画面最优效果为目标去做，不要局限在某一个框架里。
字体也有字体的性格，不同的字体会呈现出不同的字体性格特征，比如高矮胖瘦、敏捷、邪恶、可爱、优雅文艺等等等等。通过精准地对字体的结构，笔画粗细，细节调整，字体效果等的处理表现字体的差异化，使字体的性格调性，与画面内容相匹配。
2.2.1 力量感、沉稳
特点：横细竖粗/留白少/重心偏下/转折笔直
2.2.2 可爱
特点：圆润/不规则/扩张
2.2.3 优雅
弧度/纤细/重心偏高
2.2.4 活力
特点：倾斜/笔画延伸/笔画干脆，转折弯曲很少
字体还有各种各样的性格，比如魔幻、哥特、血腥、恐怖等等。
我们在做项目的时候，字体的感觉就一定要抓得准，符合整个画面的调性：
比如这种欧式哥特的画风， 字体就可以加一下哥特元素，点缀点玫瑰、藤条。
刚硬科技的画风，字体笔画就可以粗一些，添加点科技感和几何图形，营造超前科技的感觉：
植物自然的风格笔画就可以柔和一些，带有弧度，把一些画面元素图形化点缀在上面：
2.3.1 字型特点的提取
具体实操怎么做的呢？我们今天就给大家分享一个案例，看看是怎么操作的：
这是一张视觉，我们要给他做一个主标题，这个主标题的字型特点应该如何从图里提取呢？
我们要提炼出三个点出来才能知道如何去做：
1.风格
我们先分析这张图，它的一个风格是有点魔幻+复古，神话传说加西域古代的一种史诗感。
我们可以找一些神话类史诗的类似的参考看看：
特征：
1.复古
2.重心高.
3.不用那么特别复古可用衬线体变形
2.特征
这个我们可以从人物身上去提取，人物有盔甲，我们可以把盔甲的特征提取出来：
3.配色
颜色也不是乱选的，一定要和图能呼应关联起来，那颜色怎么选呢？其实画面里已经帮我们选好了配色。我们观察一下画面：
整体偏冷调，墨绿色居多。，对比色有红色和黄色。
那我们为了突出字体，又能和画面呼应，那黄色就是再好不过的选择了。
那到这我们的设计目标就比较明确了：
2.3.2 字型设计
1.基础字型：
虽然是往复古了去做，但也不是真做成甲骨文，还是结合一下使用场景，和识别度。参考中也有部分是使用宋体去变形的，所以我们可以先选一个宋体的字体出来当做基础字型。
为了保证识别度，我们可以只做部分复古。
这里我挑灵下面“火”字，因为这个字处在中间，比较显目。
2.调整重心
参考复古类型的字体重心都会往上偏移，让字体稍显长一些。
3.加入特征
（1）锋锐：默认字体上有很多圆润的地方，我们都改成尖锐的感觉。
把每一个笔画都改掉：
（2）弯曲的尖角：
图形提炼：
加入到字体当中：
字型到这里就完成啦。
（3）字体转折的厚度：
字型完成了，字体转折的厚度我可以再字体效果上去做。在笔画中间加一个层次，以明暗分隔开，以实现盔甲上这种转折的厚度：
全部加上，看下完成效果：
结合到画面中看下：
效果还是很不错的，整体风格也比较统一。
这一块就是关于字体性格的内容，我们继续往下看！
接下来我们来说下关于颜色情绪的问题！
配色感觉不对？颜色脏？配色不高级？
这些问题一直困扰着我们。应该怎么配色呢？其实颜色也是有规律可循的，这篇文章就是带给大家一些颜色方面的启发，让你了解配色的底层逻辑，从而更明确快捷地配出想要的颜色。
认识色彩饱和度的情绪：
因为不同的配色会带给观者不同的情绪感受，只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉，这种感觉对应什么颜色？
只有搞懂了逻辑，在之后的工作中，才能为我们的配色方案指明方向，而不会一开始就被难住。
如果我想配一个积极热闹活泼的画面，颜色怎么配呢？ 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢？他们都有什么特点，为什么会这样？往下看
3.1.1 积极活力
我们先来看几组图片
用吸管工具提取一下它们的颜色观察
我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。
通过颜色提取，再观察它们选色的位置，可以发现它们的的配色的纯度和饱和度都非常高。
这是为什么呢？接下来我们降低饱和度看看会发生什么：
可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了，整体更趋于平稳和安静。
所以，高饱和度的配色会带给观者活力，动感，热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中，用来渲染or打造年轻、活力、热闹、动感等氛围。
3.1.2 温柔平静
我们再来看一组:
这一类图片就会给人一种文艺小清新的feel，这类配色和热闹、运动的感觉完全不同。
都是低饱和度高明度的颜色。所以，低饱和度的颜色会给人传达平和、放松、舒适的心情。
3.1.3 轻松休闲
这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性，不过高，也不会过低。
其实原理就是在取色器里，
我们看同一张图片，给我们的感觉：
高饱和度配色给人感觉冲击力很强，具有活力，对比非常强烈。
中饱和度画面就弱了一级，视觉冲击力没那么强。画面会放松一些，适合传递休闲的感觉。
使用低饱和度的颜色时，我们看到画面更冷静了，有些高级灰的感觉。
在以往的实际工作当中，我也是先用饱和度来定画面的大情绪基调，只有大的感觉对了，后面才不会出大问题。比如像一些战斗、pk、热血类的banner，都用高饱和颜色:
我们可以来吸取他们的颜色看看：
基本都是靠右边的颜色。
而像我在做下面这种类型的banner时，就会使用到中饱和度的颜色，给人一种轻松休闲的感觉：
我们再看下他们的色域：
都是趋于中间的位置。
最后一种低饱和的颜色，像下面这种作品，就有一种文艺、清新的感觉：
再来看看他们的颜色色域
都是比较靠左的颜色。
用饱和度来定画面的大基调，还是非常好用的，可以说是屡试不爽，大家可以好好理解并且用起来！
总结：
高纯度，高饱和度的颜色，会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官，常常应用于一些电商、运动品牌的视觉项目中，用来衬托年轻、活力、热闹、动感等氛围。
中饱和度的颜色饱和度和纯度都适中，显得中正平和，又不会有低饱和度那样的“平缓“，想要视觉年轻一些，但又不想饱和度那么的强烈，可以尝试选择中度的颜色。
低饱和度的颜色，会给人平和，舒适的感受，常常会结合大量无彩色一起使用，让画面传递出简约，自然，小清新文艺的感觉。
配色的方法有很多，搭配在一起千变万化，但都离不开一个点。你想给别人传递什么感觉？是要年轻、活跃，还是安静、唯美？只有明确方向，在想想这个方向上的颜色有什么规律可循？搞清楚目的，我们再去做配色是不是就会轻松很多？
作者：菜心工作室 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com