图表的作用在于对数据的合理的诠释而不是美观。所以，在了解图表怎么绘制前，更重要的是了解图表是什么，包含哪些类型。下面就做下相应解释方便大家理解～
在今天，随着大数据和数据分析理念深入人心，图表在 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咨询、用户体验公司、软件界面设计公司
创建美观、可用和高效的UI界面需要花费时间进行设计细节的打磨，本文从视觉和情感化设计两个方面来说说如何提升UI设计的高级感。
在互联网产品日趋成熟的今天，你会发现所有的App越来越像，似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重，使得设计不精致，产品没有气质和品牌感。一个App设计是否精致，是否富有设计感，在于它的细节，这就意味着我们在进行设计的时候，要从细微之处着手，从多方面去钻研如何创造出打动人心的UI设计。本节总结了12个简单直观的提升设计感的小细节，一起来学习。
1.1 使用颜色深浅构建层次结构
在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。
每种颜色都有一个视觉权重，这有助于在内容中建立层次结构。通过使用颜色的深浅，为元素赋予不同的重要性。如果可以的话，你甚至可以采用两到三种颜色：
主要内容使用深灰色（诸如标题，但是不要用纯黑）
次要内容使用灰色（比如商品介绍）
辅助性内容采用浅灰色（比如发布日期）
类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：
大多数的文本采用正常的字重（400到500，具体取决于字体）
对于需要强调的文字采用较重的字重（600到700，具体取决于字体）
▲主标题字重为600，其他标绿点的文字字重都为400
应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。
灰色文字在无彩/彩色背景下要分开处理
不要在有色背景上使用灰色的文本，在白色背景下，将黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不错的淡化其视觉效果的做法。
但是在彩色背景下，想要降低和背景色之间的对比，通常有两种方法：
一是降低白色文本的不透明度；二是让文本逐步接近背景色，而不是改为灰色。
▲左图设计师职位信息为白色文字降低不透明度，右图为和背景同色相高明度的颜色
其次当涉及长篇内容时，大面积的深色粗体字会给人一种沉重感，而且很跳跃。通过选择类似深灰色（#4F4F4F）这样的颜色可以很容易地解决这个问题，使文字更容易被识别。
1.2 统一色调
选择一种基础色，再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许，只需使用固定的色板，通过调整基础色的饱和度和明度，利用这种简单的方式为设计增加一致性。
1.3 干净的阴影
阴影是UI设计中最常见的视觉表现手法，它可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意力，同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。
这种轻柔的阴影呈现出的干净，增加了画面的精致。如果阴影的范围太小或颜色太深，位置也没有偏移，而是聚集在元素的四周，就会让画面更加扁平，让视觉变得厚重，呈现出不精致的画面感。
阴影不一定是黑色的，还有一种扩算阴影是模拟元素本身的颜色投射在背景上，由于阴影与元素的色调一致，因此呈现出十分融洽的画面感。在UI设计中，这种手法不宜过多使用，否则呈现出的各种色彩搭配会让人眼花缭乱。
1.4 个性的图标设计
合格的设计师能够绘制风格统一的图标，而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致，圆角一致，线宽一致和配色一致的同时，为它的视觉表现力加入更多的创意呢？例如下面这组图标设计，无论是在图形上的创新，还是颜色搭配上都呈现出无与伦比的创意。
标签栏作为一个App的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大多数App都是使用iOS规范的设计样式（默认灰色，选中填充品牌色），这样的设计太普通，太常见了。要想让标签栏图标设计精致和富有个性，可以丰富每一个选中态图标的视觉表现，例如给图标加上背景和表情，即显得生动有趣，又增加了用户的好感，给人留下深刻的印象。
3D立体图标设计是近几年来的流行趋势，看上去十分精致、华丽，但是看久了会让人产生轻微的视觉疲劳，同时因其复杂的结构会增加用户的认知成本。一般在外卖美食类应用中比较常见。
1.5 Tab的设计感
Tab是App设计中最常见的控件之一，它源自Material Design的设计规范。现在很多iOS产品当中也开始使用这种导航栏样式来进行设计，而原本属于iOS规范当中的分段选择器变得不那么常见了。
在视觉表现形式上，Tab和标签栏同样也分为选中态和未选态，它的设计较为简单，通常是使用一组文字标签，通过颜色或在标签下加上小长条来区分两者的状态。因为它简单，却越难设计出彩，要发挥极大的设计想象力，跳脱出设计规范的限制，才能找到完美的方案。例如虾米音乐的Tab选中态是一段音频波线，再配合文字的大小对比，一个富有设计感又符合产品特征的Tabs就被创造出来了。
我们还可以从品牌基因中获取灵感，品牌作为用户熟知的形象是个绝佳的来源。从品牌形象中提取具有独特气质的视觉富豪作为Tab选中态的小长条，这样就建立起视觉上的联系，让用户产生由内而外的一致感受。例如马蜂窝品牌形象中的微笑符号和飞猪旅行品牌形象中的猪头都被延伸到Tab的设计上，既让界面视觉独一无二，又进一步强化了用户对品牌形象的认知。
1.6 无框设计 去繁从简
在UI设计中，有许多的装饰元素，如卡片的边框、列表的分割线等，虽然边框，分割线是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，或多或少都会干扰用户浏览的视线，让信息内容失去注意力，因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次，让画面变得干净，整齐：
使用阴影
阴影同样可以营造出边界感，而且相比边框分割线更加微妙，并不会显得突兀，不会分散用户的注意力，让内容更聚焦。
使用不同的背景色来区分
通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除分割线，因为你根本不需要它。
增加额外的留白
创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。
1.7 统一设计元素
在App中的每一个界面都有许多元素，那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影，它代表着用户，因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观，如椭圆矩形，也可以作为视觉符号的一种，延续到其他界面中，成为图形或按钮的外观。这样，整个界面就被统一的设计元素联系起来了，给用户始终如一的一致感。
1.8 符合产品气质的字体
选择符合产品气质的字体，可以与产品的定位相吻合，传递给用户正确的情感意识。虽然默认字体可以满足大多数App 的设计需求。但会出现一个问题就是，系统字体的普适性并没有什么特色，在一些特定的情境下就显得收效甚微。例如在运动类App中更适合粗壮的斜体来传递力量、爆发力、速度的感觉，换成系统字体后，整体感觉在气势上就变弱了很多。
1.9 第三方图标风格统一
大多数App都支持三方登陆，他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口，这也是设计师最常忽略的内容，往往是直接将第三方图标调整一致大小和摆放整齐位置，没有针对它们再设计。一个设计精致的App不应漏过任何的细节，我们可以以自家App的图标风格为依据，对第三方图标进行优化设计。
1.10 图片中寻找色彩
App中优美的图文设计，能带给用户如沐春风的视觉享受，它非常重要。我们经常看到文字叠加在图片背景上的设计样式，为了减少复杂图片背景对文字的干扰，通常的做法是叠加半透明度的黑色蒙版，让白色文字清晰可见，但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色，这样就使文字、色块和图片融入到一起了，画面变得高级和富有设计感。
1.11 提高图片质量
图片的质量影响着整个App的格调和用户的情绪，高品质的图片给人愉悦的视觉享受，产生美好的联想。而低品质的图片会瞬间拉低App的质感。在App设计中，一张漂亮的图片从收集到上线，需要经过裁剪，调色等过程才能被使用。即使是普通的商品图片，我们将它抠图后调整成统一大小，再加上干净的背景，就能立刻提升商品的美感，界面视觉也会变得美观、整洁。
1.12 卡片式设计
现在的UI界面设计中，卡片式设计已经是一种非常常见的设计形式，它有利于信息分层和整合，划分出更加清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时卡片式设计通常很依赖视觉元素，很强的视觉元素正是卡片式设计的一种优势，也是提升设计品质感的良方。
心理学认为，情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时，使他产生情感的变化，那么产品便不再冷冰冰，他透过眼前的东西，看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心琢磨，人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈，有时候仅仅一句文案、一幅插图、一个动画就能打动人心，使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面，这些简单而美好的设计细节充满了积极情绪，它是满足产品的功能性和易用性之后，追求更高层次的目标。
2.1 提示性文字
语言是情感化设计最直接的利器，拟人化的对白相比冰冷的话语更能获得用户的好感，赋予产品的新的生命力。例如App那些push推送通知，因为用户每天收到的PUSH实在是太多了，早已心如止水！这个时候，你就需要一条成本低、效率高的PUSH文案，去撩动用户主子们的心。将原本对用户的打扰变成一种逗趣，让人看到会心一笑。
2.2 下拉刷新
下拉刷新是用户在App使用中经常进行的操作，常见的下拉刷新设计是图标加文字的形式，这种设计简单、直观，但毫无设计感，不能引发用户任何的情绪。
下拉刷新是一种临时状态，丰富它的设计细节不会造成与产品界面的格格不入，相反，一个富有设计感的下拉刷新设计能让产品获得用户的好感。例如uc头条在下拉刷新时会蹦出一只奔跑的小鹿，暗示正在快马加鞭的加载新内容，小鹿形象延续了品牌logo。作为资讯类产品，内容更新速度至关重要，奔跑的小鹿正好隐喻了这一点。用户也在这种快乐的情绪中对产品产生好感，瞬间就让下拉刷新变得生动有趣。
2.3 头像设计
个人中心页与用户信息密切相关，用户的虚拟形象在这里得以展现，常见的设计是一个用户头像加登陆文字的形式，这种默认的头像设计无法得到用户的认同感。
现在很多的产品已经放弃了死板的默认头像，给用户更多的选择。赋予产品一些人格魅力，可以让产品富有生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。例如美团外卖和躺平，它们各自的身份都代表了产品的气质和用户的属性，让用户产生一种身份的认同感。
2.4 缺省页化解负面情绪
通常状态是，当前页面没有内容或无网络状态下出现的页面。常见的设计是图标加提示文字的形式，这种简陋的设计会给用户心理造成很大的落差，陷入负面情绪中。情感化设计在此时就可发挥巨大的作用，它通过设计手段来减轻用户在看到一个毫无内容的界面时所产生的挫败感。 设计师可发挥的空间很大，根据产品属性和品牌延展图形，结合动效或插画等情感化设计，可以很好的丰富页面内容。例如躺平的空白页呈现出一种贱萌的场景，让用户会心一笑，使产品充满了趣味性。
2.5 标签栏微动效
情感化设计变得越来越丰富，图标设计上升至可以展示动画效果。通过动效的使用，标签栏切换变得不再死板。用户在频繁切换页面时，不再觉得单调。精心设计的动态效果，能够缓解用户等待时焦躁的心情，从心理上缩短用户等待时长，让品牌更加深入人心。
2.6 模拟用户行为
如果一个产品可以模拟用户的行为，将用户代入真实的情境中，用户就会对产品产生深刻的认同感。例如「潮汐」会根据时间场景和季节变化，播放不同的背景音乐来营造氛围。雨声、雷声、风声、潮水声等让人时刻感受到身临其境的情境。
情感化设计可以拉近用户与产品之间的距离，在更深的层面体现出对人性的关怀，为人们带去情感上的愉悦和感动。洞悉用户的行为，换位思考去满足用户的需求，情感交流就产生了。例如当你截屏了一张图片，打开微信对话框时就会自动显示这张图片，提前预知了你发截图的需求。
再例如很多观众都习惯了在电影结尾等彩蛋的习惯，因为很多时候坐在影院等彩蛋却等来没有彩蛋的结果只能白白浪费了时间。在「淘票票」上购买电影票时，你会发现影片详情页会有彩蛋提醒，告知你电影是否有彩蛋且彩蛋会出现在影片的什么位置。有了这个提示信息，就不必再为了不确定的彩蛋期待浪费时间啦。
2.7 有趣的细节设计
俗话说：有趣的灵魂万里挑一，可见有趣是可以引发交流进而让人们产生积极的情绪。 在UI设计中，有些有趣的设计是隐形的，需要用户自己去发现，当用户找到这颗彩蛋时，就会获得一份喜悦和乐趣，增强用户对产品的探知欲。例如在电脑端打开B站的鬼畜区长按这个返回图标10秒左右，你会打开鬼畜区的新世界(⊙o⊙)（友情提示：记得戴上耳机或调小音量）其实长按「返回」10秒后网页下方会出现一条黑框提示「尝试输入字母，发现鬼畜秘密」。按照提示乖乖输入字母就会出现鬼畜明星划过你的屏幕！
有些有趣的设计又是显性的，目的是让用户与产品引发交流从而产生积极的情绪。例如成为优酷视频会员，不仅可以尊享丰富的影视资源，还能让自己的ID在发弹幕时使用剧集相关角色的头像。带角色扮演头像的弹幕，让发言更有剧集代入感。这个彩蛋的设置一方面强化了会员身份的尊贵感与特权性，一方面也丰富了弹幕区的多样化，可谓一举两得了。
总的来说：UI设计的“高级感”意味着在视觉层面要从细微之处着手，创造出精致富有设计感的画面；另一方面要从情感化设计出发，使用户与产品产生情感上的共鸣，获得更高层次的使用体验。
作者：印迹_ 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着互联网的发展与深化，很多服务早已从线上渗透到了线下，腾讯CDC在服务设计课题上都做了哪些探索？
从互联网走向传统行业，互联网金融与保险的线上和线下的探索，是相对来说比较典型的尝试，让我们感受到从互联网到传统行业的融合，这个过程也可用过往积累的互联网理念完成。只不过从做线上线下相结合，到向其他领域扩展，工作环节和内容越来越复杂。
我们有十几年互联网用户体验设计的经验积累，并以此做出了工具和平台，比如一直在对外推广的腾讯设计云服务——腾讯设计体系TDesign、内部设计协同和设计管理工具 CoDesign和ProWork。用户研究也是我们多年专注的领域，2022年腾讯调研云将正式对外发布，当前已上线的工具是腾讯问卷、腾讯兔小巢、卷叔填填圈已经在互联网及传统行业中被广泛应用。
腾讯在产业互联网领域始终在做着前沿领先的服务。国家政务项目“数字广东”的集成民生服务小程序——粤省事，“一站式更省事”的指尖办事模式已成为全国在线政务服务的标杆工程。
互联网公益方面，在环保领域的动物保护上，使用腾讯AI技术结合服务设计，做了“雪豹保护”项目，为动物保护专家、守护员，提供一套线上动物识别的服务，帮助他们在艰难的户外环境中提高工作效率。
我们通过技术工具平台，联动社会公益机构与志愿者解决问题，正在研发的长城保护的服务设计项目，引入专家复原长城，希望公众能了解更多长城的知识，是继“云游敦煌”项目之后又一个广受人们关注的世界文化遗产保护工作。
近两年我们也在公共服务领域有很大的投入，比如社会应急服务升级，包括急救与突发社会事件的响应该如何更好去应对？2021年下半年开始又在全面关爱大众人群，包括儿童与老年人心理健康的社会服务上。比如，通过网络实现心理健康方面知识的传播、让社会机构与志愿者能及时对接上需求，形成心理专家与社会机构之间形成服务闭环，为社会建立起民众身心健康的防线。
从用户体验到服务设计，它们之间有着怎样的关系？
用户体验的关注点更多在用户使用服务时的感受如何，而发展到服务设计层面时，我们除了关注用户体验外，也会关注服务提供者这一侧的需求。
服务设计与用户体验设计的理念和工作方法一致，但服务设计体系更复杂。做互联网产品时，人机交互的设计流程相对更容易固化，只要程序的交互设计过程没有大偏差，用户的使用体验就不会太差。
服务设计的工作往往同时涉及线上和线下。线下服务场景中，不但要考虑多设备联动，还有人对人的一整套服务流程。比如做金融、做政务的项目，它们的服务会涉及到政策、法律法规和各种标准，都是我们做服务设计时的思考点。这些标准制定方，有很多不同的岗位角色为公众提供多样化服务。
与做产品不同在于，产品设计往往面向特定的服务对象，而政务类的服务设计，面向的是所有人，每一位公民都享有平等被服务的待遇，于是复杂程度是几何级数提升，但其中一脉相承的原则是以人为本。腾讯的经营理念始终是一切以用户价值为归依，从人机交互的用户体验设计，到服务设计，以用户为本的核心前提不变，只是复杂程度的增加。
粤省事小程序是一个基于移动端的聚合式政务服务平台。以这个项目为例，设计团队探讨了基于互联网的设计理念与传统政务服务相结合的模式，来推进产品体系中各模块的设计工作，为整体重塑广东电子政务服务的远期目标积累了重要经验。
过去是群众在一个个政府部门面前排队办事；现在是我坐在这里，一个个政府部门在我面前一起办事。小程序是一个开放接入平台，政府各部门愿意接入哪些移动端的业务能力，就接入哪些业务，是自下而上的设计。▼
在解决方案上采取以办事为中心的信息架构。 ▼
我们希望用户一进入粤省事小程序，有一种“这就是我的”那种感觉。他们可以直接打开自己的电子身份证、电子护照、电子驾照等等，就像打开自己的钱包那样。小程序采用了以证件为中心的主程序设计。 ▼
以我能办什么事为中心的二级页设计。 ▼
设计带来的一个突出的变化是，从“罗列服务内容让用户来找”转变为“深入了解需求，把服务打包好送到用户面前”。在实际设计过程中，我们重点重建了服务的使用场景。把可以分角色分阶段展示的功能拆分开，根据具体服务场景更聚焦的去展示内容。▼
为了更高效接入100多项服务，采用了模块化的设计方法。将业务整理分类、抽象出最基础的业务模型，得出办事模型。以下模型可以涵盖小程序现在接入的70%的办理业务。再针对单个模块进行细化设计，让不同的过程以拼积木的形式组装完成，从而实现符合规范的个性化接入。▼
对于腾讯CDC来说，做公益项目与商业项目间最大区别在哪里？
自从有设计以来，一切就是在以用户价值来考量，核心的经营理念是用户价值与商业价值之间的博弈。在设计决策上，此前更多是在两者间取得平衡，但近几年想法有了升级，在我们看来，仅是用户价值与商业价值之间的关系已经不够了，要能站在产业层面去看用户和商业，如何能通过提升产业环境，来实现社会服务的提升。
团队做B端服务，希望能通过挖掘过往经验，做更多社会创新探索，与整个社会大环境提升有更好的结合点。这时用户的概念就延伸了，用户不仅指接受服务的人，也包含了服务的提供者——产业涉及到的每一个环节中的每一个角色，每一个具体的人。
比如互联网应用适老化改造项目开始推进时，通过优化界面、简化程序、增加功能等方式，来适应老年人的手机使用需求，然而用研的同学发现，改大字号，或者是语音交互等，仅仅是让长辈用手机购物更方便，解决的是“更好用”，却依然没有解决“不会用”的问题。银发青松助手作为线上版本的教程，对所有参与项目的同学来说，都是全新又极富挑战的领域，一边结合现有适老化改造经验，一边通过可用性测试不停地发现和解决问题，然后把解决方案体现在这个小程序里。
又比如腾讯首个雪豹保护数字化平台，用AI技术识别雪豹，优化雪豹的数据录入、处理、分析流程，解决一直以来动物巡护员主要靠红外相机、传统表格记录、人工审核照片等耗时费力的雪豹保护中等困难。▼
创新是每一个设计领域中的关键点和难点，服务设计中的创新点和基础是什么？
创新的基础是挖掘社会价值。以团队提供的设计云服务举例，如果我们看重商业价值，就会从产品设计与产品运营角度出发，看它能够覆盖多少设计师、多少B端企业购买我们的服务、营业额等等，这种逻辑是商业价值所寻求的。但是当我们去寻求社会价值时，这些商业逻辑中的问题，至少就不会放在首要问题的列表中了。
我2003年入职，是腾讯的第一位专职交互设计师，当时对设计的认知很浅，幸运地进入互联网交互设计领域，入行不久就意识到这是一个有前景的领域，然而成长过程中有很多迷茫困惑与困难，我认为仅凭个人力量很难做好工作，每个人都生活、工作在一个个环境中，需要小环境、大环境与自身的配合；只有当环境变好时，自己才会更好。我们本着这样的思考和理念，首先努力打造公司、专业领域的小环境，同时也不断影响行业、产业大环境，每一位设计师才会有更好发展。
作为交互设计师，过去听得最多的词是“人机交互”，但我常对别人说，交互的最高境界是人与人的交互，因为机器是人设计的，机器的另一端也是人。而服务设计就是“人人交互”。
在做互联网金融行业的服务设计的时候，我们陆续与许多金融界同行交流，他们对用户体验设计的方法与工具抱有极大兴趣，希望我们能对外提供服务，我们也认为更多人变好才是真的好。这是社会价值的体现，是我们做设计云服务的出发点与创新点。
除了做工具外，我们会不断输出理念，做一些行业观察，比如每年发布的互联网新兴设计人才白皮书。
团队也一直沉淀工作经验，陆续出版成书，希望能从产业一线的需求与视角出发，去帮助想要从事这个领域的其他团队和个人。
在人才培育上，都在讲产学研一体，我们在与高校在招聘、实习生培养上的合作基础上，2021年CDC与南方科技大学、深圳大学等高校进行超越以往的深度合作。过往与高校的合作模式是课题式，只让老师带学生做课题，以此帮他们感受来自产业一线需求的探索，从而了解真实的用户、团队的工作方法，我们也会将学生的创意转化成产品、服务和工具。在这种合作模式下，学生们的基础还是由学校自己去培养，课题只是实践。
2021年我们与深圳大学开展的是微专业合作，与学校一起跨专业、跨领域招生，将团队的工作方法和理念，形成一套1-2年的课程，从更基础的层面去告诉学生们学什么？怎么学？学成之后怎么用？同时我们也为同学们提供职场实习机会，让他们更早了解实际工作与产业的需求，他们才会更明白自己在学校里的学习目标。
与南方科技大学的合作是探索共建无障碍实验室。我们提供更多真实用户的样本、数据和诉求，让学生们了解用户，去探索可能性，也会将这些创新点回归到产品上，以验证这些研究是否卓有成效。
让产学研有更好结合，是CDC寻求社会价值的新方式。希望能从学生抓起，从学术与研究的结合处做起，让社会里更多相关领域的人一起探索和进步。腾讯CDC只是其中的一环，通过服务设计提供更好的触点和界面、更好的工具与环境，将产业中的每一个角色卷入进来，大家在其中都能迸发出新想法。环境培育起来后，慢慢将会诞生新产品、新物种、新理念，这与我们过往做任何一个界面设计、用户体验设计都不同。
云游敦煌，是由敦煌研究院、人民日报新媒体、腾讯联合推出的，首个拥有丰富的敦煌石窟艺术欣赏体验的微信、QQ小程序。▼
在后疫情时代，人们的需求，以及你们在做设计项目时思考的方面有变化吗？
疫情之后大家都在面临很多变化，不论工作、生活还是大环境。我们会思考如何才能更好去体会人们新的难处，帮助他们解决问题。
2015年9月，腾讯公益慈善基金会发起人兼荣誉理事长陈一丹先生，在第一届腾讯99公益日上说：“社会的痛点，就是公益的起点。”对于我们设计师来说也是一样的，思考出发点不再只是从用户体验的角度，不仅仅去做锦上添花的事，而是思考真正的痛点在哪里，落到以人为本的根源去做事。
“微光行动“是腾讯联合深圳网警、专业心理辅导团队共同发起的网络抑郁症群体的关爱活动，期望帮助大众更好了解抑郁、正视情绪，并通过微光小程序等渠道，为用户提供线上情绪出口，进行心理健康的正向引导。
抑郁症已成为人类第二大杀手。国家卫健委去年发布的《探索抑郁症防治特色服务工作方案》中，将老年人、青少年、孕产妇、高压职业从业者都列入抑郁症高发的重点人群。大众对抑郁症等心理疾病科学认知不够，甚至存在偏见和病人的病耻感，加上专业医学、心理学领域专业门槛高，让抑郁症救助难度增加。在这样背景下，微光行动小程序，我们在产品上增设专业科普资讯、暖心电台、书单、音乐等治愈系功能和内容，并计划去连接用户与专业心理咨询师，针对线上线下两种就诊模式提供了相应心理援助和医疗帮助。
完成一个典型的服务设计项目，通常需要哪些人员参与？
我们理念一直都是除了设计师、研究员外，尽可能多卷入不同角色的人员参与项目。
过往大家对CDC的认知是设计团队，但现在我们已不再只是设计团队，设计师也不是团队中人数最多的职能。现在团队人员包含研发、产品经理和产品设计的全流程岗位，还包括产品运营与市场营销。
除了团队成员外，项目中还会卷入不同的外部角色，比如将客户、社会上的服务对象，卷进项目中。为此，我们做了用研工具卷叔填填圈，适老化的项目中，为了更好更快完成改造工作，我们就在填填圈中沉淀老年人样本，让大家能更容易触达到服务对象。
卷叔填填圈小程序 ▼
在2016年之前你们就开发出了对设计师及项目管理效能帮助很大的平台工具设计云，这几年团队有没有新的挑战？
设计行业对效率的追求永无止境，然而挑战一直都存在。一个核心问题是如何才能不再做重复性工作？除了项目管理平台以外，我们还做了提效工具，尽可能不去浪费设计师的时间。它们集中解决两个方面的问题——生产怎么做才能更快？有更多人协作项目，不同职能角色间工作流程如何缩短？
ProWork 是 CDC 在腾讯内部沉淀多年的便捷高效的协同平台，为团队中的不同角色提供支持。团队成员可以通过日历、清单来规划每⽇的工作，同时管理者也可以通过统计报表随时掌握团队状况。通过简单灵活、多角色统筹、任务量化统计的产品特性，实现日程管理、项目追踪、人力统筹。▼
另一个方面的挑战是对新方向的探索和尝试。在这个层面上不是工具做好了就能解决的，为什么说我们的很多项目叫社会创新？因为我们必然会尝试未曾接触和了解过的服务。它们可能成功也可能失败，如何才能缩短从失败到成功之间的距离？如何降低试错成本？这些都是CDC面对的新挑战。
工具智能化以及“设计师如何才能不被AI替代”是近年来被广泛讨论的话题，基于数据的设计、智能化的边界在哪里？设计师的核心价值随着时间是否有些改变？
照相机出现后画家还有生存空间吗？我觉得大家应该开心拥抱AI，因为AI永远不可能替代人类，但可以帮我们节省很多工作时间。
回顾工业设计发展史，从手工到工业时代，再到大生产时代，一直分两派，一派做工具，一派做设计，有人做组件、模块和结构，有人使用它们去做产品。只有组件和工具在持续创新的基础上创新才能更快。
用户体验设计如今正踏上这条自动化道路，我们如何才能更好走下去？都说现在是工业4.0时代，大家已经在用数字工具做设计了，但和许多工程领域相比，我们依然落后，还有很多设计师在做重复性的投入，其实一些设计工作是可以用智能化工具去“拼装组件”的。这就像手工业时代，每一个组件都靠手工打磨，而大工业时代只需到市场上采购零部件，产品就可以组装出来。
AI帮助我们做设计，而不是替代我们做设计。设计师的关注点应是如何更好利用工具提升设计产出。自动化生产能让设计师更好地释放劳动力，才能孕育出更多可能性。让重复劳动交给机器，当你的时间和双手被解放之后，头脑更活跃，创新也就更活跃了。
大设计奖的主旨是“发现与提升设计的价值”，设计团队从哪些方面建设和提升，才可能成为公司的战略核心组成部分？
很多设计团队往往是“一只手”，需求方要什么，设计师就呈现出来，但设计还可以成为公司的大脑。进一步提升设计的价值，意味着设计需要从技艺上升到设计思维，不仅探讨如何使用工具、做好图形图像、界面和各种效果图等工作，还要思考如何让设计思维成为促进经营的工具，去挖掘商业模式、社会创新，探索新型社会服务的可能性。
作者：大设计奖 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着互联网产品的不断向前发展，“产品设计导向”一类的概念已经不仅仅限于大公司中，在往日越来越注重“短期效率”的小公司也都纷纷开始注重产品设计方面的建设。
所谓的“产品设计导向”指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点，明确产品核心价值；在产品上线之后，通过数据分析和功能反馈，发掘更多的需求，去规划下一步的”功能增删改“，将产品的设计方向引导到更正确的位置，提升用户留存率，延伸挖掘出产品更多的可能。
另一方面，从现在的设计环境而言，对所有的设计师既是机遇，又是挑战。大量的UI专用工具（Sketch、Principle、Flinto、Origami等）的出现，大大提升了产品前期的UI设计师的工作效率，所以现在“全链路思维”已经从刚出现时的“概念化思维”变成了“主流化趋势”。所以现在很多的UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析（功能设计、用户画像等）内容。
但是很多设计师的分析环节明显就是为了证明“有”而去“做”，缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品，典型用户画像里主流用户是：“男、七十岁、目标是给自己的儿子购买婚房”。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的，只是从形式上走个过场罢了。
本篇主要讲述产品设计中的一些分析方法，范围从“个人练习式设计”到“团队合作式运作”，知识点大概有：空雨伞思维、文章大概六千字左右，建议阅读时间：15分钟。适读人群：初级产品经理、交互设计师、在工作中职能范围与产品规划有关的UI设计师、想要学习产品设计的新人（文中含有大量配图用来辅助观点，因此建议PC端阅读）。
产品运作流程概览
我遇到的比较普遍的问题是：很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽然相同。所以说要从浅到深的学习产品功能设计，就必须先理清当前工作的常规流程，例如常见的产品运作流程（如下图）
上面是一个相对规范的产品开发流程，实际上你在看到上述流程图后，对照自己公司的情况，会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本，现在仍然有大多数的公司并没有交互设计师的岗位，但是交互设计的职能不代表没有，而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分，才能更好地提升沟通效率。
个人思考方法（一）：空·雨·伞
上面讲到了设计师的“全链路思维”现在已经成为了一种主流的观点，将来的前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。所以现在很多的设计师开始尝试自己去DIY一个需求或者做ReDesign这样的设计，希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候，大部分人会发现自己突然变得没有思路，从产品方向点确定到产品视觉产出之间出现了断层。
其实做过设计练习的人都知道，由于一些现实场景的不同，一些人在做设计练习的过程中会受到很多条件的局限，尤其是在孤立无援的情况下，你面对自己的练习作品往往会无从下手。当然，不同的场景下有不同的分析方法。
在团队协作的时候，分析方法要全面、严谨、反复推敲。
在个人练习的时候，分析方法要高效、直接、简化不必要的流程，以培养自己的分析能力为主，在这种场景下，空·雨·伞就是一个非常好的思考提升方法（如下图）
简单概述“空雨伞”思考方式：观察（事实） → 思考（内在） → 产出（解决方案）
运用在设计上就是：发现痛点 → 思考原因 → 提出解决方案。“空·雨·伞”因为简单、成本低、易上手，可以作为设计入门培养思考能力的一种方法，但是在使用空·雨·伞的分析方法时需要结合一定的具体调研（或者轻量级的用户研究）相配合，不然又会变成一味的“拍脑门儿”式的主观臆测，对于分析能力提升没有丝毫帮助。
个人思考方法（二）：逻辑树
逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列，从最高层开始，并逐步向下扩展。
简单来形容一下逻辑树：把一个已知问题当成树干，然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点，就给这个问题（也就是树干）加一个“树枝”，并标明这个“树枝”代表什么问题。一个大的“树枝”上还可以有小的“树枝”，如此类推，找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路，不进行重复和无关的思考。
如果你要运用逻辑树方法去分析产品，主要的一点在于学会细化拆解目标。
举个例子：
在2017年我创建了自己的个人站酷号，但在发布了一部分的文章之后，我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析，去发现自己提升的空间。
如上图，就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分，拆分出三级逻辑树是比较容易的，甚至你可以沿着已经列出来的大纲继续深入细化，再拆分出更细更深层的各种提升点。
逻辑树分析法在个人作品中的主要作用是发散思维；在实际工作中的作用则是针对特定问题进行分析，理清思路。总而言之，是让你在分析的过程中更加有条理，避免重复思考。但是逻辑树分析也有一个缺陷，就是在逻辑树分析的过程中，根据现象分裂出子层级的步骤十分依赖你的认知能力，就如同做设计一样，当你感觉界面的视觉出现出题的时候，需要利用你学出来的知识去进行视觉优化，如果你对设计理论知识掌握程度并不是很强，那就不能采用逻辑树分析法解决问题。
总而言之，逻辑树分析法适用于对问题研究十分深入的情况下，如果你对当前的环境认知并不充足，那么就很容易走入歪路，跑偏主题。
实际项目：用户调研访谈
在一些实际项目中，用户调研是需求来源的主要渠道。提起用户调研，很多人会觉得这不属于UI设计师应该做的事情。其实行业逐渐规范的现在，用户调研、分析需求的能力也成为了衡量UI设计师能力的一个标准。现在的互联网产品种类繁多，从早期只做主流行业，到现在基本所有的冷门行业都有涉及；作为设计者而言，大多数设计师已经开始在设计的过程中心有余而力不足。
造成这种现象的主要原因为是因为随着行业的细分以及范围的扩大，我们距离用户的真实场景偏离太远，导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。因此对于很多的设计师来说，学会了解用户以及分析需求成为了十分重要的事情。
然后整理了一下我在用户调研过程中的几点认知：
第一，保证调研的目标的准确性
我们需要明确，我们希望通过调研达到怎样的目的？（例如：提升部分页面转化率、收集用户对于产品不满意的地方、通过用户使用产品发现用户潜在的痛点）
第二，有目标的选择用户
一般来讲互联网公司都有收集客户反馈的部门，他们掌握着所有客户的反馈意见。我们在选择调研用户的时候，最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标
第三，适当的准备调研内容
当我们确定了调研目标和调研用户之后，就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好（开始调研之后根据实际情况进行改动）
一般市场调研细分的维度通常有四种，分别是：地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例：我们在调研中可能要把调研对象分为客户（老板）和用户（业务员）去进行不同情况的信息跟踪，而且根据产品的属性不同，需要提前预设好调研内容的侧重
第四，调研过程中
在调研过程中，我们可以适当结合上文讲述到的“空雨伞”方式去进行调研观察，收集用户需求（如下图）
在调研过程中，除了思考之外更多需要注意的是对用户洞察的记录与剖析，在记录用户行为的过程中，需要遵循“不干扰”、“不引导”、“记录客观”等原则，这样可以才可以保持用户行为记录的准确性。
第五，获取反馈整理结果
在调研结束后，我们应该产出一份完整的调查报告，按照本次调研预设目标进行整理，规划出合适的大纲，把调研收获转化为明确的产出，产出形式最好以报告（PPT、PDF），而不是口述或者微信消息，这两者之间差别很大~
需求归类：KANO模型
虽然说现在很多的公司都开始建立了用户体验类的部门，但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后，往往很少会出现我们幻想中的“逆袭”、“口碑急剧上升”，有时还会因为受到一部分用户观点的带偏导致产品口碑下降，用户表示不满；又或者会出现需求级规划混乱，重要功能反而后上线这种尴尬的情况。
所以这驱使着团队中负担“用研用体”职能的角色对用户需求进行正确的分类和排序
这个时候就可以运用到卡诺模型（KANO模型）。
KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系，狩野教授将产品服务的质量特性分为五类：
1.基本型需求
用户对企业提供的产品或服务因素的基本要求。是用户认为产品“必须有”的属性或功能。当其特性不充足(不满足顾客需求)时，用户很不满意；当其特性充足(满足用户需求)时，用户也可能不会因而表现出满意。对于基本型需求，即使超过了用户的期望，但用户充其量达到满意，不会对此表现出更多的好感。
例如对于网盘类产品来说，用户的基本需求是有快速的上传和下载。如果下载速度达不到用户的期望，则用户满意度将一落千丈。对于顾客而言，这些需求是必须满足的，理所当然的。对于这类需求，企业的做法应该是注重不要在这方面失分，需要企业不断地调查和了解顾客需求，并通过合适的方法在产品中体现这些要求。
2.期望型需求
提供该功能，用户满意度提高，如果不提供该功能，用户会感觉到不满。当然在这里要补充一句，这里的需求并不都是我们整理出的主观需求，也有可能是用户在使用的过程中产生的客观类需求，例如遇到不会的体验，需求得到响应时我们给的反馈
例如对于一些O2O类的产品，虽然做的都比较成熟，但是由于体量庞大的原因，偶尔也会受到糟糕体验，用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程（旅程预计时间偏差）、美团（酒店体验差）、饿了么（用餐体验差）等。在用户遇到这种糟糕体验之后，期望能通过投诉建议获得官方的反馈，那么官方把这种问题解决的越圆满，用户的满意度也会随之提高。
3.兴奋型需求
又称魅力型需求。指不会被用户过分期望的需求。对于兴奋型需求，随着满足用户期望程度的增加，用户满意度也会急剧上升，但一旦得到满足，即使表现并不完善，用户表现出的满意状况则也是非常高的。反之，即使在期望不满足时，用户也不会因而表现出明显的不满意。
4.无差异型需求
不论提供与否，对用户体验无影响。是质量中既不好也不坏的方面，它们不会导致顾客满意或不满意。
5.反向型需求
用户没有这个需求，提供后用户满意度反而会下降。
按照kano模型分析可以对收集到的产品需求进行分类，筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。
后
对于设计师来讲，不管是个人设计练习还是团队项目，都应该掌握一定的产品需求收集和分析的方法。如果你真的下定决心要向交互设计、用户体验方向发展，那就更需要下定一些功夫去学习相关的知识，学会形成自己的思考方法。一开始可能会很痛苦很累，但是如果一味的试图走捷径，最后只会得不偿失。
作者： 千夜Ryan_Vision 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
对于很多设计师来说，遇上B端产品都是一件让人感觉头痛的事情。我从16年开始进入现在的公司，到现在做了很多的后台产品(ERP，CRM，SAAS，OA等等)，有的产品是从无到有，有的产品是在原有的基础上更新，相对于C端产品，我在过程中深刻的体会到了视觉设计在后台产品中作用的有限性。
当然从一个设计参与者的角度来看，B端后台的产品并没有直接面向消费者的ToC产品那么的“火光四射”，但是B端产品对于设计师＆产品经理都有更高的能力要求，能够从容的在各种B端产品中来回穿梭的人必须要有更强的业务逻辑理解和规划能力，后台类产品设计过程中的大方向是可以借鉴并复制的，但是对于细节的拆分、功能的规划，却又截然不同。所以我把从16年到19年的感悟写下来，希望能对一些面向后台产品头痛的设计师和产品经理们有一些帮助。
本篇主要讲述B端产品的一些经验，建议阅读时间：30分钟。适读人群：初级产品经理、在工作中职能范围与后台产品有关的UI设计师和交互设计师（文中含有大量配图用来辅助观点，因此建议PC端阅读）。
什么是B端产品？
其实后台产品更严格的意义讲也是B端产品类型中的一种，当然细分的领域类型有很多，也分针对性。针对个人（小型团队）的后台产品比较容易在大众的视线里被看到，这一类中最常见的后台产品就是微信公众平台了。
（微信公众平台通过管理、分析、运营，让企业＆个人能够更好的提高服务意识）
而另一类B端的产品则是面向企业客户以及内部员工使用，一般除了被针对到的目标用户，其他的用户很难接触到。比如OA、ERP、CRM、SAAS等。跟微信公众平台不同，这些名词对于很多不处于行业中的人而言都显得比较陌生，所以我大概解释一下几种我做过的平台。
OA系统
办公自动化(OA: OFFICE AUTOMATION)是采用Internet/Intranet技术，基于工作流概念，使企业内部人员方便快捷地共享信息，高效协同工作；改变过去复杂、低效的手工办公方式，实现迅速、全方位的信息采集、处理，为企业管理和决策提供科学依据。企业实现办公自动化程度也是衡量其实现现代化管理的标准。办公自动化不仅兼顾个人办公效率提高，更重要的是可实现群体协同工作。凭借网络，这种交流与协调几乎可以在瞬间完成。这里所说的群体工作，可以包括在地理上分布很广，甚至在全球上各个地方，以至于工作时间都不一样的一群工作人员。
ERP系统
ERP是Enterprise Resource Planning（企业资源计划）的简称，是上个世纪90年代美国一家IT公司根据当时计算机信息、IT技术发展及企业对供应链管理的需求，预测在今后信息时代企业管理信息系统的发展趋势和即将发生变革，而提出了这个概念。 ERP是针对物资资源管理（物流）、人力资源管理（人流）、财务资源管理（财流）、信息资源管理（信息流）集成一体化的企业管理软件。它将包含客户/服务架构，使用图形用户接口，应用开放系统制作。除了已有的标准功能，它还包括其它特性，如品质、过程运作管理、以及调整报告等。
CRM系统
客户关系管理系统（CRM）是以客户数据的管理为核心，利用信息科学技术，实现市场营销、销售、服务等活动自动化，并建立一个客户信息的收集、管理、分析、利用的系统，帮助企业实现以客户为中心的管理模式。客户关系管理既是一种管理理念，又是一种软件技术。
SAAS系统
SAAS系统是一种通过Internet提供软件的模式，厂商将应用软件统一部署在自己的服务器上，客户可以根据自己实际需求，通过互联网向厂商定购所需的应用软件服务，按定购的服务多少和时间长短向厂商支付费用，并通过互联网获得厂商提供的服务。用户不用再购买软件，而改用向提供商租用基于Web的软件，来管理企业经营活动，且无需对软件进行维护。
B端产品和C端产品的差异？
近两年来，B端产品慢慢的成为了互联网市场上的热门。而且随着现在互联网市场的多样性，C端产品有着充足的竞品可以进行对比分析，前行的相对平顺；而B端的产品则因为对于特有业务场景的不同、业务逻辑的复杂、数据系统的串接等等，显得十分复杂。那二者之间都有哪些差异呢？
B端产品具有更强的衔接性
相对于C端产品用户群体的庞大和多种类，B端产品显得要相对专注。从16年到现在，至少我经历的B端产品有近十种之多，每一类后台产品都会有相对聚焦的用户群体以及产品目标。在做B端产品之前，我对B端产品的初步理解是大而广泛的功能集成类产品，有点类似于一个超级后台的概念。但是实际进入到行业中接触之后，才发现实际上对于B端产品而言，每个产品都是针对行业链内的某一个节点而做。
做一个比较简单的类比：如同产品设计开发的过程中，产品经理、交互设计师、UI设计师、前后端开发、测试等，大家所需要功能都非常的多，但是使用的工具都截然不同。但是每一个工具对于产品设计开发过程中的推动意义都是关键的。
功能核心点的不同
实际上在2018年我做了一个很难实现的事儿，我会在每个月坚持跟行业内的两名设计师一对一的沟通，聊一聊对于各自行业的认识。通过这个举措我大概了解了很多中高级UI设计师们的想法。其实大部分的UI设计师对于未来的规划都是比较有野心的，不管是未来想到专注视觉亦或者想要跨向交互的设计师，对于产品的业务逻辑都希望可以进一步的了解，参与到产品的前期规划讨论中。
但是，在谈论到B端产品的时候，大部分的人又会觉得如果是B端产品还是算了吧。有一个设计师跟我说B端产品的理解成本太高了，又没有办法做到像C端产品那样有具体功能的侧重取舍，想要玩转B端产品之前首先要讲整个行业链路里的内容都走一遍，对于很多设计师来讲太痛苦了。
举一个例子好了。
例如微信阅读，产品的核心侧重在于”阅读功能“，而”想法管理、阅读标注、社交分析、读书排名“这一些功能都属于Kano模型中的“兴奋型需求---即使在期望不满足时，用户也不会因而表现出明显的不满意”。
但是同样的情况出自于B端产品，可能就截然不同了，对于B端产品而言，功能是多而必要的。例如OA办公系统中的“申请提报功能”，这个功能针对的根本不是针对于单一类型的用户、单一类型的场景。而是针对很多不同岗位的用户以及不同的提报需求场景。所以很多初入B端产品的UI设计师而言，他们认为“申请提报功能”只是一个信息输入页面，但是实际工作的时候却要按照七十多种不同的提报方式去设计内容，并且根据提报需求的不同，后续还会有更多的差异化设计（附件上传、日报提交、订单流审批等等）
B端产品的客户也许不是你的用户
这也是B端产品和C端产品的一个不同。首先B端产品面向的是企业老板，满足企业老板的需求，让这一类用户满意才是关键；而C端产品面向的是个人用户，只要做到用户体验十分良好并且给予一些增进用户留存的机制就可以运营的很好。
两者之间的差异性在于B端产品在满足客户的需求后，间接服务于用户；而C端产品直面用户。这其实就造成了B端产品在设计的过程中需要平衡“客户”与“用户”之间的关系，个人认为一个健康的B端产品应该是既满足“客户”的需求，又提升“用户”的体验，不然很可能会出现“客户好评 and 用户差评”的情况。
但是对于很多老板而言，在同样的产品服务之间，他们往往会倾向于付款使用服务，这其实也是B端产品设计中一个比较有趣的点。
面对B端产品应该如何入手？
很多人在设计B端产品的时候总是觉得很难受，感觉可延伸的方向有很多，却又没有一个十分合适的切入点。引用我之前在《设计师应该掌握的需求分析方法》文章中的一句话，这是因为"我们距离用户的真实场景偏离太远，导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。"
（很多人把B端产品设计看作在迷雾中搭建桥梁）
在我看来B端产品的设计没有固定的功能模式，而一味的照抄竞品在这一行业中其实也是非常危险的行为。大部分B端产品设计的本质其实是解决客户在真实场景下遇到的问题，给予用户更便捷的管理方式和更多的利益价值。
但是所谓知易行难，从一个产品的设计者（产品经理＆设计师）在产品的规划过程中要做到以下几点：
了解基础业务流程
在这里讲的业务流程并非是单一产品的业务，而是从行业链路的角度上讲，要真实的理解行业过程中每一个环节的过程。例如最近几年专注的快销行业，最起码我们要知道从品牌商、供应商、经销商、二批商以及门店终端以及其他各个渠道的最基础的业务运作方式。这样其实会让我们在功能的思考过程中避免很多低级的错误。
写到这里其实可能有的朋友看不懂这一步的作用，例如可能会觉得，我做一个数据分析后台，为什么要懂全部环节的基础业务流程呢？那我继续做一个最简单的类比：就如同我们对于互联网有了初步了解之后，就会自然而然的明白腾讯系的产品基本不会对接支付宝，而支付宝的钱无法通过微信去支付。
功能流程归类
这个应该不需要再多解释了，完美的流程归类会让产品的需求方、设计和开发的对接方以及用户都非常满意。
价值体系搭建
价值体系的搭建是整个产品中最核心的点。何谓价值体系？对于B端的产品而言，客户最关心它能为实际的工作带来哪些便利而并非这个界面做的多么的好看以及用户体验多么棒。所以对于一个B端产品，解决问题的价值就是最好的推广。按照实话讲，从这个角度来看，B端产品的设计需要对用户更深层次的了解和判断，了解用户的核心价值，围绕核心价值搭建产品的功能以及任务优先级。
整合设计＆持续迭代＆调整方向
在设计的过程中我们是十分痛苦的。因为B端产品面向的客户大部分都是在行业中沉浸了很多年的老板或者相关业务部门。这种特殊的情况对我们有利有弊。好处是我们的客户对于业务相关的蓝图十分的清晰；坏处是每一个人对于自己的业务都有更美妙的“憧憬”。
例如我们在下访调研的过程中跟经销商聊了一下（快消行业），不同的经销商对于自己生意管理的方法不同，人员组成（业代、库管、内勤）也完全不同。所以有的老板会跟我聊一聊，有没有什么更新鲜或者更有挑战性的玩法儿，能让下面的业代收集到更多有价值的数据；有的老板会跟我聊产品的功能太多了，手下的业代使用起来不方便，意见很大。
（门店拜访是经销商业代的日常工作，有的业代热衷抄单，有的业代喜欢用APP录入，各有不同）
所以对于我们而言，面对这种在宏观角度上大方向一致而微观角度各有不同的用户群体，要学会整合和克制。如果有了一些比较亮眼的功能或者想法，尽可能要做到小幅度快节奏的持续迭代，在迭代的过程中逐渐收集用户的想法。
对于设计部门，在设计B端产品的过程中需要进行更严格的内外部评审。从功能规划＆交互设计这一步就应该开始评审，评审交互设计的功能点有没有遗漏？交互框架搭建的过程中是否考虑到了随着产品发展带来的更多功能的扩展性？修改某个功能是否会导致其他的功能出现问题？在修改交易（促销）规则的时候是否会对现在的产品造成风险？这些都是需要进行不断的评审、磨合、测试才能逐渐完成上线的。在这中间我们要不断的调整B端产品设计的方向（包括产品功能的优先级排序）。
B端产品的功能设计也许并不在于亮眼，而是在于均衡和稳定。C端产品的每一个用户都是单一的个体，通过C端产品带来某种生活中的便捷与享受，功能规划失败，很可能会失去某些群体的用户，但是可以通过迅速的功能迭代在下一轮赢回来；而B端产品上的每一个客户(用户)，每一个后面都有一张庞大的关系网，对于他们而言，这是生意(工作)的重要组成部分，是没有办法拿来冒险的。如果因为产品的问题导致客户(用户)出现了损失，这种客情关系是很难挽回的。
如何提升B端产品的品质？
学习成本＆感知成本
对B端产品来讲，设计师在设计的时候是不需要耗费太多的思考的，只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲，但是其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。
赋予价值
赋予价值是常见的提升B端产品品质的一种方式，这里说的赋予价值跟上文所述的“价值体系搭建”并不相同。
其实作为B端产品的设计者，我们期望通过自己的努力让产品有更多的玩法儿、让视觉有更多的花样，我们期待以此来获得用户的认同。但是从B端产品用户的角度来说，这些并非是他们重点关注的点。例如我们将一个进销存软件所有的功能都考虑清楚、所有的使用场景下都可以得到满足，都不如通过优化流程、提升产品使用效率去将使用者给解放出来。
其实在这里可以大胆预测一下，在未来所有B端产品的设计者都会想办法降低用户的使用时长，“用完即走”可能会成为未来工具类B端产品设计的一个设计原则。
降低妨碍＆功能引导
B端产品因为集成了很多的功能和信息，所以在设计的过程中尽可能合理的安排信息的布局是非常的重要的。常见的方法是优化字段以及页面元素，让用户看起来更直接，并且加入一些功能引导部分，让用户对于一些功能有很快的认知（这个功能是什么＆我能用这个功能做什么）
用户体验要素上说过“不管用户访问的是什么类型的网站，它都是一个‘自助式’的产品。没有可以事先阅读的说明书、没有任何操作培训或讨论会、没有客户服务代表来帮助用户了解这个网站。用户所能依靠的只有自己的智慧和经验，来独自面对这个网站。”
页面清晰简洁＆场景下保持高效
B端产品的用户一般比C端产品的用户要更有专业性，同时也更有耐心。但是如果我们的页面设计的功能过于复杂或者为了丰富页面加入很多的冗杂字段，会对用户造成不必要的影响。
而高效则是另一个在交互设计中需要注意到的问题，高效从一个角度上讲，是减少用户不必要的操作＆页面的跳转，例如ERP系统中的客户管理，在客户列表页修改客户资料的时候，尽可能使用弹窗，这样会大大减少页面跳转的频率；
但是与此同时，减少页面跳转并不代表真正的高效，再次举例ERP系统，所有的订单需要按照指定的流程一步步进行操作而并非一步到位，这样虽然页面的跳转增加，但是可以避免操作出错给用户带来更大的困扰。
设计的一致性
当然看到这一点很多成熟的设计师可能会表面毫无波澜，内心甚至想笑。但是实际上对于B端产品而言，需求、开发、上线，这会是一条漫长的战线。除非是一些大公司，否则很少有设计师能只跟随一个产品走到最后。当你两个月之后再入手参与这个项目，你会发现你对这个产品开始陌生了。往往就会产生同一个设计师做出来的设计图像是两个设计师做的一样。
坚持设计的一致性是很重要的：例如产品的交互操作（弹窗的样式、列表页左右功能布局）、按钮的不同状态、字体大小的规范、系统导航条的样式及位置、切换页面的触发等等，都属于一致性中必不可少的因素，当产品的一致性程度较高，就可以降低用户的学习成本、提高用户的使用效率。
作者： 千夜Ryan_Vision 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
有效的颜色应用技巧是每个从事视觉合成相关工作的，包括插画家和UI设计师，都必须具备的。随着扁平化设计和material design的普及，具备色彩理论知识变得更加重要。
目前鲜艳的颜色和渐变出现在不同数字产品的用户界面上：从好玩和有趣的到商业应用和网站。然而，关于明亮的颜色对用户体验的影响还有很多讨论。本文对丰富多彩的用户界面设计的优缺点进行了深入的分析。
增加可读性和易读性
我们之前的一篇文章中，介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩运用的基本因素。提醒一下，可读性是指人们阅读文本内容的容易程度，而易读性则定义了用户在特定字体中区分字母的速度。
鲜明的颜色足够的对比度有助于增加可读性和易读性。有对比的布局元素会变得可区分和引人注目。然而，高色彩对比可能并不总是有效。如果文本内容和背景颜色对比度太大，将很难阅读或扫描文本。这就是为什么推荐设计师创建一个温和的对比度，只用高对比度颜色突出元素的原因。
对任何数字产品来说，视觉层次是打造清晰导航和直观交互的核心要素。UI组件就是这样被组织起来的，这样大脑就可以通过这种包括颜色在内的物理差异来区分物体。
颜色有自己的层次结构，这是受用户思维的影响所决定的。有大胆的颜色，如红色和橙色，以及弱的白色和奶油色。明亮的颜色很容易被注意到，所以设计师经常用它们来突出或设置对比度。此外，将一种颜色应用到几个元素上，表示它们在某种程度上是有相关性的。例如，您可以为购买按钮选择红色，以便人们在需要时直观地找到它们。
大脑对大胆的颜色反应强烈，这就是为什么明亮的颜色组合很容易被注意和记住的原因。色彩丰富的用户界面设计，在众多颜色较轻的产品中容易脱颖而出。颜色的选择需要基于目标受众的喜好和市场调查。
此外，如果一个公司拥有明亮的企业颜色应用于商标和品牌项目，那使用同样颜色在其网站或移动应用上也是一个好方法。这种方式连接公司所有的沟通渠道，创造了一致性的视觉解决方案，并且提高了品牌知名度。
为了传达正确的语气、信息和号召用户做出预期的行动，设计师需要知道颜色会影响我们的情绪和行为。我们的大脑会对颜色做出反应，而我们通常不会注意这点。这项名为“颜色心理学”的研究表明，当我们的眼睛感知到一种颜色时，大脑就会向内分泌系统发出信号，释放负责情绪变化的荷尔蒙。
适当选择颜色有助于让用户处于一种促使他们采取行动的心理状态，并设置合适的氛围将正确的信息传递给用户。比如，如果设计师设计了一个与自然或园艺相关的产品的UI，很有可能会选择用绿色和蓝色。通过这种方式，设计将从一开始就与一种产品或服务类型相关联。您可以在我们的文章《颜色对用户行为的影响》中找到对颜色含义的具体描述。
明亮的颜色和渐变，是UI设计中的最流行的趋势。如今，可以在不同类型的数字产品中看到这种运用，而严格的商业风格的限制似乎被抛在了一边。
明亮的渐变色彩在用户界面上可以带来一种现代化感和新鲜的想法。结合最新趋势设计的APP或网站往往引人注目，尽管竞争激烈，仍能吸引用户的注意力。
那些认为颜色能靠直觉和审美随意混合的观念是错误的。如果你想要创造和谐的视觉构图，那么关于颜色如何起作用以及它们如何协作的基本知识是必不可少的。
在UI中应用的颜色越鲜艳，搭配就越困难。为了让用户感到愉悦和舒适，设计师努力将平衡和和谐融入到用户界面设计中。色彩协调是指在设计中以最吸引人、最有效的方式来安排色彩，以供用户感知。和谐的颜色组合有助于对网站或APP获得一个不错的第一印象。颜色理论定义了一些基本的颜色方案，下面这些配色方案被证明是有效的。
单色，色彩和谐是基于一种颜色和它的各种色调。
类似色，该方案适用于颜色轮上相邻的颜色。
互补色，它是在色轮上相互放置的颜色的混合，目的是产生高对比度。
多色互补，这个方案与前一个方案相似，但是它使用了更多的颜色。例如，如果你选择蓝色，你需要取另外两个相邻的颜色，表示黄色和红色。
三元色，它是基于三个独立的颜色，在色轮上是等距的。专业人士建议使用一种颜色作为主调，其他颜色作为辅助。
四色，tetradic配色方案使用四个颜色从车轮是互补的。如果你把选中颜色上的点连起来，它们就形成了矩形。
大胆的颜色可以作为在UI中进行重音的工具，但它也可能成为重音消失的原因。许多鲜明的颜色在一个单一的视觉组成会带来了失去突出元素的风险，因为他们成为一个色彩种制造混乱的一部分。
这就是为什么推荐设计师使用60%-30%-10%的比例。最重要的部分应该是主色调，三分之一的构图采用第二色，10%的部分应该选择有助于形成重音的颜色。这样的比例被认为是令人愉快的，因为它允许逐渐感知所有的视觉元素。
创造数字产品的核心阶段之一是用户研究。定义和分析目标受众，使设计师了解他们对网站或应用程序的期望。年龄、性别和文化会影响潜在用户的喜好。例如，孩子们很喜欢黄色，但当我们长大后，黄色通常看起来不那么有吸引力。男人和女人通常喜欢冷酷的颜色，如蓝色，绿色。不像女人，男人通常喜欢白色、黑色和灰色。
明亮的颜色也是如此。即使您是设计一个有趣的APP，也需要考虑目标受众的具体情况。中年人通常更喜欢轻松的用户界面，他们可能不喜欢屏幕上很重的颜色去分散注意力。
正如我们上面所说，明亮的颜色可以产生大量的对比度，帮助突出重要的UI元素，并提供良好的易读性和可读性。然而，过多的对比度可能会起到不好的效果，尤其是在移动界面上，因为它们的空间有限，可以在不同的环境下使用。
小屏幕、环境光和明亮的字体使对比度高的图像在用户眼中显得很难看。这就是为什么在移动UI设计中使用明亮的颜色需要注意颜色之间的对比度，这样人们在阅读文字时会感到舒服。
颜色是大师手中的一件伟大的工具，和其他任何工具一样，它也有它的优点和缺点。为了有效地使用它，需要考虑它的所有方面，以便能够找到适合设计任务和目标的解决方案。
欢迎在文章评论区留言，让我们一起成长。
作者： 爱设计的狐狸 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com