从平面到屏幕，CMYK 到 RGB，墨点到像素，色彩越来越丰富，形式越来越复杂。而 UI 的发展从拟物的繁琐细节中挣脱出来，却在色彩的展现中放飞了自我。
零售业有个有趣的研究成果 —— “七秒钟定律”：人们在挑选商品和服务时 ，只需要 7 秒钟就可以确定是否感兴趣，而在这短暂的 7 秒钟内，色彩的作用占到了 67%。
要在小小的手机屏幕中加入这么多颜色，并保持其中的联系和逻辑，着实不易。如果你还对配色一无所知，完全不知道配色应该怎么入手，那么你需要了解一下，我几年经验总结的配色思路。
无论我们用 PS、AI，还是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我们来看看这些案例：
虽然是不同的应用，但是这个拾色器的用法大同小异，但是，很多新人并没有搞懂拾色器的正确应用逻辑。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的选色原理遵循的是 HSB 模式的逻辑，也就是色相（H）、饱和度（S）、明度（B）。
HSB 是色彩科学中对所有颜色属性的理论划分，是种概念上的定义，可以用来解释任何色彩，也就是说可以和 RGB 和 CMYK 相互转化，且 HSB 的选色逻辑更清晰、简洁、干练。
因为一个正确的选色过程，是先确定出色相，然后再在这个色相维度下选出明度和饱和度，所以我们首先要关注色相选择条。
细心的同学应该已经发现了，它们的首尾都是红色，那是因为色相的序列是一个首尾相接的环形模式，所以它实际上就是色环的柱状展示图，应用起来和色环没有实际区别。
接下来就要说到重点，饱和度和明度选择区，我自己使用的习惯，是将这个选择区通过黄金三分法的方式切割成等比的 9 个区域，然后明确它们在 UI 中的对应情绪和应用场景。
在过去的大量分析中，互联网产品的主色和重要辅助色都会往右上角聚集，一些次要、不可点的色彩聚集在中上方，而文字背景色则聚集在左侧，无人区则是我们重点避开的对象。
下面我们分析几个案例，看看它们在这个选择区中的色彩分布情况：
大家也可以自己拿一些主流的应用做截图，然后把它们的 UI 元素色彩排列到拾色面板中，就会得到基本一致的结果。牢记这 9 个区域的场景划分，可以帮助我们非常高效、安全地完成 UI 配色。
在众多的 UI 设计规范中，色彩部分的介绍，都必然包含三种类型，分别是：
主色：应用的核心色彩，品牌色
辅色：丰富页面视觉和传达效果的次要颜色
中性：没有色相的文字、背景用色
主色是一个应用的最核心的色彩，品牌的象征色，比如想到饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色。
确定主色，并没有大家想象的那么复杂，它的要点在于 —— 你想让用户感受到哪种情绪，然后通过情绪关联一个大致的色彩范围，再进行微调。
在今天的互联网产品中，主色的应用选择范围在拾色器区域的右上角，前面已经有解释了。这和平面设计中的用色有非常大的不同。
移动端产品要在一个方寸大的空间中争夺用户的注意力，引起用户的兴趣，那么低饱和清淡的色调是无法实现这个目标的，所以今天主色饱和度越来越极致，比如我们之前整理的，发在站酷的一篇总结：
再加上屏幕的 RGB 显示特性，高对比度，高动态范围的特质能给用户提供更好的观感。所以选择主色最安全的做法，就是在确定色相类型后，在右上方区域选出合适的色值。
辅助色是丰富应用中的次要色彩，它会包含一到若干个和主色不同的色彩，除了品牌传达外，具有更强的实用性。
前面我们提到过色环，这里就要派上用场了。我们知道色环是个色彩序列首尾相连的环形模型，它蕴含一个最朴素的原则，即两个颜色在这个环形中角度越大，那么视觉差异性越大，对比越强，比如下图的展示：
这些配色的模式是不能闭着眼随便挑的，它们仅仅作为一个色彩对比度的判断标准。而真正辅助色的选择，是根据实际场景的功能决定的。
比如通知、提醒、取消用大红色，确认、同意用绿色或者蓝色，收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下最简单、最安全的辅助色选择方式。
没有标准元素用色的情况下，再考虑应用色环的 “角度原则”，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的则越近。
比如下方携程的案例，主色在蓝色的情况下，支付、保险金标签这些需要被重点突出的色彩，使用了主色的互补色， 让我们一眼就能看见并产生强烈的操作欲望。
中性色，是页面中文字、背景用到的颜色，它们承担起最基本的层次表现、便于阅读的重任。多数新手觉得中性色无关紧要，实际情况恰恰相反。
主色辅助色决定了界面视觉是否出彩，而中性色的应用直接决定了页面能不能正常使用。如果看过比较多的原型案例，就应该明白，即使只有黑白灰的状态下，我们理解这些页面和进行使用也不会有丝毫的障碍。
中性色的配置，就是制定一个由深到浅的灰度阶梯，应用在对应权重的元素上，色彩轻重的主要判断依据是 HSB 中的 B（明度） 值。
中性色虽然指的是无个性，但并不是只能用纯灰色，常见的一种做法，就是为中性色添加适量的蓝色饱和度，提升观看体验（满足 RGB 的某种特性）。
这种做法，颜色越浅的时候饱和度应用色值就越低，将这个规律在拾色器中进行表现，那么我们就可以得到一个 L 型曲线，我称它为 “中性曲线”。
掌握对于主色、辅助色、中性色的选择方法，那么对于 UI 配色的奥义来说，你已经掌握了一半，接下来就要了解更具体的实践思路了。
配色并不是只有色彩的色值本身，大家一直在研究各种色彩心理学和理论，却很少关心它们应用如何应用，如何配置。
所以，我根据主色和辅助色应用总结了一个配色的四象限表格，在分别看看它们对应的案例：
主色会作为顶部标题栏或其它重要模块中的背景色，进行大面积应用，加深用户对品牌的认知和辨识度。而产品中又包含了大量功能和服务，需要用丰富的色彩来进行暗示，吸引用户关注。
这类配色中，主色的应用占比也大，出现频率高，鲜有其它颜色出现。比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的应用。
这是多数主流应用的趋势，降低主色占比，留出更多的空间给内容模块的展示上，突出自身带有的服务和功能。
通常，会应用这种方式是因为产品的服务是相对单一，但也需要用户投入注意力的应用，设计师就会尽力避免给予用户过多的干扰。
每次在进行配色的时候，我们都需要对自己要应用哪种配色应用方式做出规划，然后再动手执行。有了这个目标，后面在整个项目的设计中的配色步骤就是水到渠成的事情了。
在实践前，我们要简单讲讲一个应用或者界面的标准配色的流程了，流程顺序如下：
具体应该怎么使用这套流程，我们用一个图虫 APP 改版的案例来做演示，首先从四象限中的第一个主色占比高、色彩丰富度高的类型做起。
原型是 UI 设计的基本艺能了，在开始具体设计、配色前，搭建页面的框架原型是一个必备的条件，下面，是我们已经准备好的原型案例。
然后，我们确定以橙色作为应用主色，并在拾色器中进行确认。
有了主色，就可以对页面进行色彩填充和图片填充了。既然我们主色是占比大的，那么首先可以用到的就是顶部标题栏的背景色了，以及底部 Tabbar 中的选中色，大按钮色等。
接着，我们开始整理中性色的使用，选择新的颜色来填充文字和背景，清晰的表现模块层级，文字信息的权重。
最后，就是添加辅助色和其它色彩的元素了，这个步骤建议都是放在最后一步操作。因为色彩越丰富，越难控制，容易让整个画面显得杂乱无序，所以先完成基础搭建，可以更好的帮助我们判断彩色的使用是否合理。
下面，我们使用彩色的金刚区图标，然后将用户关注、认证用户、标签等元素使用其它色彩，来丰富页面的色彩内容。
根据第一个方案，我们可以再用这个原型来实现其余的三个方案的配色。
比如下面的主色占比大，但是色彩丰富度低的。因为已经不太应用其它辅助色，所以主色填充上我们不再填充顶部导航栏的背景，而是将更多元素应用主色，减少辅助色数量。
然后是主色占比小，色彩丰富度高的方案，进一步降低主色应用的比例，然后在金刚区、标签等处使用较为丰富的配色。
最后，就是主色占比小，色彩丰富性也低的方案，那么使用中性色的元素就开始增多，只保留最核心的一些元素使用主色，和极少的辅助色。
根据四种不同的配色方案，我们就可以得到四种不同的配色结果和风格，在每次设计开始实施前，我们都可以根据这种做法来做尝试，并选出自己满意的方案。
要再次强调，UI 配色是极其强调形式的应用科学，最后做的往往会和一开始想的效果有极大出入，所以需要我们有几个备选方案，可以随时进行调整，并选出合理的那个。
以上是我们关于配色有关知识点的分享，希望可以帮助大家提升对 UI 配色的认识。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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 格式，再同步给程序员即可。
以上就是关于 B 端图标应用的所有知识点了。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
思维导图，英文名叫 The Mind Map，是一种用来开展、记录发散性思维的图形工具。可以说是目前职业办公中使用最广泛最基础的图形工具，无论是做故事大纲、头脑风暴、任务拆解，都会进行应用。
通常，思维导图会有一个到两个中心主题，然后中心会扩展出不同的子节点，并使用连线进行关联。每个子节点，都可以继续建立更下级的节点，依次类推。
通过这种方法，我们可以建立出比较结构化的信息层级，中心主题是宏观内核，越往下级拓展的，就是越细节的信息。
而随着思维导图软件的发展和完善，除中心主题、连线、节点外，我们还可以在这个图形中添加关联、备注、图标、待办、图片和附件等内容。创建思维导图的工具在今天随手可得，无论是桌面端还是网页端，想要创建思维导图，从下方选择一个即可。
思维导图存在的价值，并不仅仅是我们要做一个方便别人理解的架构图形，而是通过它本身包含的结构层级属性，来帮助我们梳理自己的思路、想法、灵感。比如你要搞清楚进阶设计师应该具备哪些能力，如何进行学习，那就可以通过思考，查找资料，以树状图的形式记录和整理。
它最大的价值，就是帮助我们在绘制的过程规范我们的思维形式，能针对不同节点实现聚焦和深入探索与思考。而不让想法特别离散一会儿插画，一会儿体验，过一会儿又是平面四要素般毫无章法。
在互联网团队中，使用思维导图输出除了日常工作内容计划外，最多应用于和产品需求相关的表述上，有一些专用的思维导图类型需要我们认识，包含下面三种：
- 产品功能结构图
- 产品页面结构图
- 产品信息结构图
下面我们将从这三个思维导图入手，了解如何实现它们的输出，以及如果应用思维导图工具来提升日常工作的效率，以及规划自己的职业技能发展。
功能、页面、信息结构图，都是产品经理输出的内容产物，通常会置入到 PRD 中供团队成员查看和理解。但是，这三种思维导图不仅看起来差别不大，而且很容易搞混。
我们首先介绍的第一个结构图类型，叫产品功能结构图，用来解释产品本身功能的树状图。如果学习过用户体验五要素的同学，就可以把它理解成它决定的就是范围层的内容。
通常，产品再开始进行一个新产品功能规划的时候，第一件事就是启动思维导图工具，开始整理该产品会包含的具体功能，和对应的功能层级，这应该非常好理解。
比如我们用潮汐这个 APP 举例，如果我要规划一个这样的产品，我会先考虑它包含的核心功能白噪音，然后向后思考白噪音包含哪些种类，如专注、睡眠、小憩、呼吸。每个白噪音类型里，我再根据对应场景提供更细节的功能出来。
然后，我再想到，白噪音不是只有固定一种的，而是包含非常多种，是不是就该提供一个放不同白噪音的地方，于是就增加了探索的模块。在这个模块里，包含搜索、广告位推荐、分类推荐功能。每个独立的白噪音，还可以对它进行收藏、分享等功能。
再然后，就还有添加用户系统，增加会员功能，统计功能，个性化定制等，就可以进一步完善这个图表将所有想到的功能多罗列出来。
虽然产品需求的推导前面还有别的专业分析步骤，但落实到具体包含功能的制定上，过程和结果都如上方的一致。通过思维导图逐个模块添加和细化，明确它们的类型、层级。
一个修订完整的功能结构图，就能清晰的表示这款产品包含了哪些功能和服务。
产品页面结构图，是一个和功能结构图非常容易搞混的图形。很多产品经理在 PRD 中会在做完功能结构图以后紧跟页面结构图，两张图形中会包含大量重复的名称和相似的结构，让新手一头雾水。
页面结构图等同于体验五要素中的结构层，用来诠释产品包含的页面、层级、分支。
首先明确一个概念，就是功能并不等于页面。
一个页面中可能包含多个功能，比如专注页面中，就包含了时间、开始、暂停、停止、模式、标签、场景设置的功能。
而一个功能模块，也可能包含多个页面，比如我们在功能结构图中可能会简单表示添加声音的功能，但这个管理需要比较多的操作步骤和页面来完成。
既然我们知道功能和页面不是一回事，那么页面的类型、结构有没有必要表现呢？答案必然是肯定的，页面也需要通过树状图做完整的梳理并展示。
一个产品有什么样的页面，层级如何制定，都是基于功能分析出来的，合理的情况，是先把功能定好，再想怎么做页面。功能是产品的内核，而页面涉及到具体的表现形式。
所以，外行在规划一个产品的时候，往往是从页面入手，告诉你整个产品包含了哪些页面，大概的层级，但对功能的具体规划却往往语焉不详。
页面结构图对于设计师来说至关重要，因为它决定了我们应该设计哪些页面，可以说是决定了我们的版本设计任务和工作量。不管产品有没有提供这个图形，我们都要自己梳理出来。
功能和页面的问题解决了，就所有结构性问题都解决了嘛？显然还没有。
五要素中还包含一个框架层和视觉层，视觉层指具体页面的样式，那得用设计图来表示，显然不是思维导图工具能实现的。那么，就剩下框架层一个还需要我们注意了。
框架层的表现无外乎就是单个页面包含的内容、交互、布局。交互和布局都是由原型图来呈现的，但不管你有什么跨时代的交互思路还是殿堂级的排版能力，都要面对一个严肃的问题 —— 界面里要摆啥？
虽说功能地图有一定的描述，但显然还是比较宽泛模糊的，设计师是需要更具体的字段内容的。这就是信息结构图存在的价值，描述每个功能模块或页面下方，包含哪些信息字段内容。
比如在白噪音的详情页中，要放哪些信息？就一个音频文件，我们要往里塞什么好。如果作为产品我的出发点就会是丰富这个页面的一些信息，让用户更有欲望使用，或者进行识别。
仔细整理这些信息，你会发现不少页面虽然看起来简单，但是实际信息量一点都不少。而这些信息，不是设计师还是开发随手做的，都是经过产品规划才落地的。
每个具体的信息，类似开发环境中常说的 “字段”，它也确实是产品经理工作中后续和开发梳理字段表的雏形。
所以，到这里我们也就基本了解了项目中最常用的三个具体思维导图。它们包含一定的先后顺序，“功能 —— 页面 —— 信息” 依次推导，从核心到细节。
梳理这些内容，对后续我们展示、理解项目会起到非常积极的作用，也是 PRD 文档中必备的图形元素之一。即使项目环境中不需要设计师自己上手，你也要保证可以明白它们各自的作用，以及看懂它们在实际文档中表述的内容。
除了在产品说明中使用思维导图，它还可以应用在我们工作和学习领域中的方方面面。我们就分别从这两个领域切入来讲一下设计师如何利用思维导图，提升自身能效。
在工作上，设计师可能也需要在竞品分析里输出上面这3种图形，但还有很多别的工作场景需要我们应用，最常见的莫过于工作待办事项的整理了。
比如我们对一整个项目的工作内容进行梳理和评估，那我们就可以根据时间线或者内容类型，将所有要做的事情梳理成树状图。
或者，做用户现场访谈这种调研，一个跨度接近一周的工作，我们也可以用思维导图将前后需要完成的工作和顺序解构记录下来。
任何复杂的工作流程，只要经过结构化的拆解，就可以细化成更容易理解和执行的步骤。也更能帮助我们判断工作量和制定时间计划。
在学习领域上，思维导图最常用的在我看来有两个方向，一个是对自己知识体系的整理，另一个是对于学科、书本的知识点整理。
虽然我们可能在各个干货或者公开课里，看到很多有关职业技能树的说明，并伴随不同的通行类型。但它们都只是对内容讲解和输出的一种抽象图形解释，用来辅助作者意图的表达。
比如我们 B 端课程中使用的 B 端设计师技能掌握图形，采取圆的形式，这样讲解起来更方便，也更好展现流程（树状图会太长根本放不下去）。
但对于个人的实际学习来说，这种图形是没办法直接进行记忆的，而且显然可以整理得更细致，所以我们就可以通过思维导图的形式，对自己职业需要掌握的技能整理下来，作为自己的学习目标。
一个灵活的思维导图，会随着你对职业的认识加深和计划的调整始终处于一个更新的状态，辅助你对当前已经掌握的，和准备掌握的技能有更全面的认识。强烈建议所有同学都培养这种习惯。
再者，就是进入到更细节的领域，比如一个简单的技能，还是一本书，通过思维导图完成知识点的拆解和整理。这在网上是最常见的思维导图，就不在这里多做介绍了。
最后一点，就要简单解释思维导图的输出了。如果我们做的思维导图仅仅是给自己看的，那么就没有输出的需求，但如果思维导图是要展示给别人的呢？
对于一般的评审还是方案说明，我们只需要在导出思维导图前，根据展示的画布，调节方向、类型，以及精简展示内容的数量，让文字能被正常看见即可。
但如果我们要在作品集中展示呢？相信大家已经看过不少作品集中包含思维导图展示页面结构的案例了。
见过非常多新人在问这类思维导图要用什么软件制作，答案是本文罗列的那些工具都做不到上方案例的效果。要想在作品集的展示中获得良好的观感，就只能自己手动绘制。
也就是说，你们要自己用 PS/AI/Sketh/XD/Figma 等软件画一遍。你可以根据当前的场景和氛围去设计合适的树状图样式，我就不慢慢做怎么画树状图的软件教学了，只强调一个细节，就是连接的弧线应该要怎么画才准确。
不管你使用上下还是左右的布局，如果应用到弧线，就不能每个弧线全用肉眼预估来拖拽贝塞尔。最简单的做法，先确定出包含几个二级节点，画出等距离的横线，然后先拖出最上或者最下的弧线，确保控制端点都处于水平方向。然后复制这个弧线，将对应一侧的端点移动到对应横线上去即可。
切记要保证弧线的一致和稳定，而不是歪歪扭扭的。再之后，想要设计成什么样的风格，增加什么样式，就根据你们自己的想法决定了。
强烈建议大家日常多使用思维导图，因为它能很好的锻炼我们结构化思维能力。用的越多，你就会发现在你生活困扰你的问题就会越来越少。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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 项目才会是更好的选择。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
“做图”的人大致会有两种称呼，一种叫做美工，一种叫做设计师。
用着差不多的软件，在外人甚至很多设计从业者看来工作内容差别不大岗位，有人被称作设计师，有人却天天只能自嘲自己是个美工。
那么，都是做图的，美工和设计师的差别究竟在哪儿？
在电商，纸媒或是印刷领域里，上下游的工作内容相对固化和流程化，对设计而言可发挥的空间本身就不大。时间久了，美工可以用模块化的方式在固定的时间里产出固定的设计工作。在印刷企业中，很多设计工作者除了需要排版还需要负责打样甚至印刷器械的操控。所以设计在整个产品生产过程中的比重不大，自然就从“创作”变成了“工作”。“工”也就寓意成手工或是劳动工作的意思。
为什么很多人会吐槽，朋友找自己可以“随便”做个LOGO呢？因为在他们眼中，你的工作不是创作产生的，而是像其他非灵感类工作一样，“生产”出来的。既然生产出来的，最后出来的又不是“实物”就不存在什么成本，那当然应该是免费的。
自嘲美工的设计从业者，大多关注的是好看与不好看。
“这个好，因为这个好看。”
“那个不好，因为它很丑。”
“为什么领导选了那个不好看的，而没选我这个好看的…”
在其眼中，评判设计优劣很重要的一条标准就是好看与不好看。与别人提出自己设计方案的时候，也用好看与否的方式让别人做出选择。但审美本身就没有一条共识性的标准，所以很容易被领导挑战你的设计，很容易被客户“指点”你的作品。
设计师在设计过程中追求的不仅仅是好看这一层面。通过设计，对目标和结果有什么影响、合理性、易用性和可延续性都是在“好看”之外设计师该去思考和要去凝结在作品中的工作。
哪怕日常设计一个最基本按钮的位置、圆角的弧度、颜色，都会在设计确认之前反复的自我询问，这样做有什么理由？为何圆角的弧度是4而不是8？宽度和高度为何是目前这个尺寸？哪一个更符合大产品体系下的设计原则？
即便没有一个是与非的标准，“这样是否合理”都应该是设计师挂在嘴边最长自检的问题。
设计的初衷是解决问题。都是设计从业者，一类人在定义规则，一类人在执行规则。广告有调性的定义，产品有规范的定义，设计师会时刻的思考和优化什么样的定义，能够提升效率、能通统一识别性、能协同合作、能保证最小概率的出现错误。
在这样的规则下，另一类人在执行规则，即便是一些banner的设计，他们只做着规则之内的工作，至于为何这样规范，没有思考过，也不知道为何要这样。还有人会说，我做的banner没有规则都是自己说的算啊~但在建立这个banner的尺寸之初就是规则本身呀。
有些人喜欢积累素材，认为这样做可以为设计提升效率。很多人依靠素材来寻找设计方向，素材品质的好坏决定了他最后出品的好坏。没了网络，没了素材库也就没了思路和灵感，更没有什么创作可言。
设计师在接到需求之初考虑的不是在哪查找素材，而是在思考这个需求需要解决什么样的问题，这个设计如何执行才能满足这个需求。有些设计师喜欢整理，而且整理是设计师剥离表层干扰的一个基本能力，通过拨开表象，发现问题的本质，再去寻找解决之道。
很多设计从业者，尤其是新手，做设计都是凭着感觉，凭感觉做设计最大的问题是没有一个有效之道来保证每次设计的品质。运气好了，或是找到一个好素材，那么能做出80、90分的设计，运气不好，那就不知如何下手。
留心观察下身边的“大神”，看看他们在接到设计之后的思考路径是怎样。是忙着翻素材、找参考还是静下来画画草图，做做需求整理，这可能是美工和设计师遇到问题之后最大的行动差异。
同是看到一件惊艳的作品，美工考虑的是：
“卧槽，这么牛逼，这是用什么软件做出来的？”
设计师考虑的是：
“卧槽，这么牛逼的想法作者是怎样想到的”
思考的初衷不同，行动的路径也就不同。美工会觉得软件至上，努力学好软件之后就会成为大神。而设计师会尽可能多的去了解优秀作品背后的故事，去了解一切设计和设计之外的临界知识。积累好足够的“思维素材”再去运用到设计工作中去。
我经常听到一些年轻的设计师问我，你会哪些软件，这是个好奇且好学的问题。但软件真不是高阶或是低阶的区分壁垒。如果真是这样，那么大师们都应该是设计软件的熟练驾驭着。而恰恰相反，软件用的666的大多都是培训机构的培训老师，可能连设计师都算不上。摒弃软件思维吧，产生真正距离的一定是脑，不是手。
看到这里，有人会觉得这篇文章写的有些许的“激烈”，有些不是美工的问题，可能是年轻的问题，是新人必须经历的问题。跨越了年轻和初级，有些人的思维和眼界进阶了，但有些人还停留在上面说到的部分层面里，新手可能从美工进阶到设计，但美工却不一定都是新手。
有句话说的不是很好么：
“我有十年工作经验”
“不，你只是用一年的经验工作了十年而已。”
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：大宝频道 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。
网上现存不少关于图标绘制的文章和教学，但不是太笼统，就是太片面。即使看了很多这种碎片化的知识，也很难在我们的认知中对它有比较全面、系统的认识，所以大多数初级的 UI 设计师，始终画不好图标。
针对这个问题，我希望用一篇长文来讲清楚图标设计的所有要点和具体的设计方法，让所有设计新人更快的上手图标设计。
本文共分为以下5个部分：
1. 图标设计详解：先对图标有个整体的认识，了解图标总共有哪些类型和应用场景。
2. 工具图标设计：最常见的工具型图标的相关规范，以及对应的设计案例演示。
3. 装饰图标设计：近年来使用越来越广泛的视觉型图标设计认识，以及对应的讲解。
4. 启动图标设计：讲解启图标的相关规范，如何高效的进行设计。
5. 图标应用详解：介绍在一个UI项目中，要应用多少种图标规格，并如何设计出正确的图标
图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号，有非常大的覆盖范围。
对于 UI 设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。
在当下最常见的扁平化设计风格中，界面的实际视觉组成只有 4 种元素，图片、文字、几何图形、图标。
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素，一涉及到这两件事，难度就直线上升了。
本来往界面里丢一些方方圆圆、贴几张图、填一些字，就可以把界面做出来了，比如下图中的 Clear APP，不仅工作量少，而且还符合极简原则，为什么还要吃力不讨好地设计图标？
这就涉及对图标作用的探讨了，为了节约篇幅，更快进入大家最想看的重点干货，我就不长篇大论从上古时期人类与图形符号的纠葛开始写了！就谈对于图形界面本身，为什么图标有这么重要的地位，没它不行。有两个原因，第一就是，文字虽然也是一种图形符号，但相对于图标而言，文字实在太复杂了，在识别效率上有先天的劣势！再者，不同的语言，文字的长度也不同，如果换成阿拉伯语或者俄罗斯语，或许一行还装不下所有文字。图标可以以一种更高效的方式，将我们想要传递的信息进行浓缩，不仅易于识别，也能让界面更简洁，利于排版，比如下方案例。
第二点， 就是关于视觉的观赏性上。有些页面中，如果把图标去掉了，也丝毫不会影响我们的操作效率，以及对内容的理解。但没有图标，缺少这些点缀，我们就会觉得这个页面看起来总感觉太枯燥了，不得劲，最好的例子就是应用的设置页了，见下方案例。
既然知道了图标的作用和重要性，那么接下来，就要进一步了解在工作中我们要设计哪些图标。
可以先划分成三种大类：
• 工具图标
• 装饰图标
• 启动图标
下面，我们将为对它们分别进行介绍，以及展示相关的设计类型，方便读者在开始学习具体设计前，对 UI 设计会创作的图标有更全面的认识。
1.1 工具图标
首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确功能、提示含义的标识。作为最常见的图标类型，我们就不需要做太多的说明了。
虽然理解起来容易，但是它所包含的设计样式却并不少，可以把它们归纳成线性、面性两个大类，再分别进行细分。
风格1：线性风格
线性图标，即图形是通过线条的描边轮廓勾勒出来的！多数人对它样式认识的第一反应应该是使用纯色的闭合轮廓，比如上图案例，线性图标的创作空间看似不多，但实际上有非常多的调整空间。
下面我们把它们统一罗列出来。
风格2：面性风格
面性图标，即使用对内容区域进行色彩填充的图标样式。同样，在这类图标中，也不是只能应用纯色的方式进行填充，还有非常多的视觉表现类型。
风格3：混合风格
当然，在设计图标类型的时候，也不一定非线性和面性不可，有一些热衷创造和尝试的设计师，还创作出了混合型的图标，既有线性描边的轮廓，又有色彩填充的区域。常见的样式类型如下。
1.2 装饰图标
和工具图标比起来，装饰图标的视觉性作用更多。对于一些比较复杂的应用来说，过分的简约并不能弥补信息过多的信噪问题，我们要通过丰富视觉体验的方法来增加内容的观赏性，减少一屏内显示内容的数量。
比如在分类列表里，是可以只使用线框和文字把大量内容浓缩到一屏以内，但实际浏览效率并不会增加，而且并不美观。
还有，就是国内的界面设计环境，会根据运营的设计需求进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
装饰性的图标设计，虽然没有明确的规范该怎么做，效果怎么好怎么来，但最常见的类型有四种，下面分别进行介绍。
扁平风格
扁平风格的装饰图标，通常可以理解成是用扁平插画的方式画出来的图标，除了继承扁平的纯色填充特性以外，也相对于普通图标有更丰富的细节与趣味性。
拟物风格
拟物风格的图标现在出现的频率越来越高，集中在大型的运营活动中，通常这些活动会通过拟物的方式将头部设计成有故事性的场景，所以自然顶部的相关图标使用拟物的设计形式会更贴合。
2.5D 风格
2.5D是一种偏卡通、像素画风格的扁平设计类型，在一些非必要的设计环境中，使用 2.5D 会比较容易搭配主流的界面设计风格，有更强的趣味性和层次感。
炫彩渐变
这是一个拗口的原创名词，找不到更合适的，还是觉得浮夸点符合它的气质。这种图标，就是通过一系列非常激进的渐变和撞色实现，通常还会使用彩色的阴影。
使用这样图标的区域，通常都会呈现出一副五彩斑斓的景象，只有在内容非常丰富且用户偏向年轻化的产品中可以使用，是一种非常难驾驭的设计风格。
实物贴图
最后一种，就是采用了真实摄影物体的设计风格。虽然它不属于完全依靠我们创作和绘制出来的，但想想还是放进来合适。因为这种图标的出现频率非常高，有必要再后面掌握它的做法。
1.3 启动图标
最后，就要说说启动图标了！启动图标的设计比前面两种类型的图标说起来更难，因为它实际上就是把 “LOGO嵌套进系统图标模版” 的图标。
除了必要的规范掌握以外，启动图标的主体物设计就是 LOGO 的设计，已经超出了图标绘制本身的知识点。所以，在后面我会针对这个问题讲解一些比较套路易懂的设计方案供新手学习，这里我们先来了解一下它有哪几种设计形式。
文字形式
适用了文字作为图标主体物的类型，通常是这类应用本身的品牌 LOGO 就使用了文字，所以这里就把字体照搬过来。
图标形式
对于一些偏工具，适合用简单图形传达应用功能的启动图标，就会采取使用工具图标的方式设计。
图形形式
图形形式看起来和图标形式很接近，但实际上完全不属于同一类型，之所以它不是图标，是因为这类图标的主体图形是一种经过高度抽象化的标识，传达的是品牌性，而不是图形的含义。
插画形式
对于一些比较纯粹的应用，如读本、漫画、幼儿类应用，就热衷于采用卡通形象作为图标的主体进行设计。
拟物形式
虽然现在扁平化的设计占据主导地位，但依旧有很多应用的启动图标是通过拟物的方式设计的。因为对于这些应用来说，拟物设计所传递的信息往往更直观和准确。
当然，还有其它的数之不尽的启动图标设计方式，比如明星大头照、摄影图、游戏原画等，但理解上面这些类型就够了！
前面介绍的三种图标，就是今后在进入 UI 行业设计的内容。虽然图标看起来简单，但可以玩出的花样不少。除了正确设计出图标以外，高低阶的 UI 设计师之间的区别也包含图标设计类型掌握的多寡。
所以，在开始学习前，不要将设计图标的目标局限在最简单的图形绘制上，还有很多有趣的设计形式等待你们去尝试。
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分。
Sketch/XD
这两款软件是我们设计 UI 界面的主力。但大家一定要记得，它们主要的功能是用来完成 UI 界面元素的排版，而不是创作和绘图。
虽然它们都包含路径、钢笔、布尔、等功能（Sketch 相对 XD 更完善一点点），想要绘制一些非常基础的线性或面性图标时没有问题，但只要涉及到比较复杂的图形，往往就束手无策。
所以，我建议所有学习 UI 的新人，都不要从这两个软件中入手，而是先掌握 PS 和 AI，后面想要快速实现一些简单的图标时，自然懂得如何使用 Sketch 和 XD。
可以说，PS 和 AI 的应用决定了我们图标设计的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
Adobe Photoshop
PS 是一款无论什么东西都设计得出来的设计软件，但是，它本质上是一款 “位图软件”。后续的文章中会提及，在界面中采用矢量格式的图标是最理想的，而 PS 针对矢量的操作并不便捷，比如将矢量图层复制到其它软件中。
实际项目中，我们会用 PS 设计一些视觉表现相对复杂的图标，例如启动图标、拟物图标、实物图标等等。
绘制图标需要用到的 PS 功能并不太多，需要在前期学习这个软件的过程中加以筛选，重点是以下知识点：
• 路径创建和调整
• 钢笔工具和锚点
• 路径图层
• 布尔运算
• 图层属性
虽然 PS 在实际项目中是用来画复杂的图标，但并不妨碍我们使用 PS 从最基础的图标开始画起，因为想要熟练掌握上方的知识点，简易的工具图标是最好的磨刀石，之后再学习 AI 的操作，就可以更快的上手。
PS：最近在准备一套 PS 教学，就会比较完整的讲解一遍这些功能和对应操作。
Adobe Illustrator
AI 也是 UI 设计必学的一款软件，它的功能异常丰富，主要用来设计矢量图形。对比 PS，它有更好的矢量操作支持，对于路径细节的调整上，是最全面最细腻的软件，并且 AI 中的图形还可以直接复制黏贴到其它应用的画布中。
如果掌握了上方提及的 PS 基础，那么学习 AI 也就轻松了不少，其中，AI 设计图标中有三个特殊的功能是需要重点掌握和学习的：
• 形状生成器
• 轮廓化描边
• 路径查找器
花几个晚上，掌握了 PS 和 AI 的相关知识点以后，就可以为我们后续的学习提供良好的支持！
但是现在还不要迫不及待地打开软件，在实际上手操作绘制图标之前，我想先讲讲规范。
是的，现在还不到实操的时候，规范之于画图标，就好像音标之于学英语，都是基础中的基础，也都是大家最容易忽略的东西。
如果对规范没有一个清晰的认知，那也是无法独立画好一套图标的！希望读者千万不要跳过这部分的讲解直接去看演示了。
3.1 表意的准确性
在第一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白、清晰的。
表达的寓意清晰，是工具图标最基本的要求，否则它只会传递错误的信息，造成用户的困惑。
在常见的图标类型里，如通知、设置、用户、分享之类的图标，对于任何手机用户来说都没有认知和选择压力。但表意准确麻烦的地方在于，一些非常规的寓意，极难用图标表现出来，这才是我们使用工具图标的首要麻烦。
比如下方这些图标，如果我不加上文字信息，大家能理解它们是什么吗？
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507
那么，我们再把文字信息补充进去，是不是就会觉得图形挺贴合内容的。
在这种案例中，我们要关注的就是，面对这样不常见的内容，设计师是怎么把图形的创意和样式想出来的！如果自己遇到一样的问题怎么办？
所以，除了知道每个工具图标都要表意准确这样 “正确的废话” 以后，我们该看看如何通过合适的创意将图标样式确定出来。
一般抽象的图标，难点在于寓意信息是非实体的，所以我们很难直接构建对图形样式的联想，所以首先我们得想办法将抽象的内容 “实体化”。也就是说，我们可以先把这个词写到纸上，然后把和这个抽象信息相关的所有实体物写下来。
然后，我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对这些挑选出来的实物要以什么图形表现还是没概念，那就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计收获灵感。
如果本身拥有比较好的手绘基础或是平面基础，也可以直接通过对照片进行提炼的方式，设计出图形内容。
所以，在设计图标时符合表意准确的概念，需要设计师不断收集图形，并提升对词汇联想的能力。很多图标图形优秀的创意，就是在这些基础的积累之上逐渐形成的，而不是一撮而就。
3.2 图标的一致性
第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。
在上面的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之下，这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点，要让所有图标保持视觉细节上的一致。
下面对工具图标要保持视觉一致性有哪些细节进行详细的说明。
类型一致
前面说过，工具图标有线性的、填充的类型，在正常的情况中，同一套图标应该在类型中保持相同，如果使用了线性图标那么后续就不要设计填充以及混合的类型。
风格一致
每一套图标都有自己的设计风格，不同风格在细节中都有不同的表现，需要让这些风格特征保持高度的统一，看看下面这些案例。
第一，为图标添加缺口的设计风格，我们要保证这个缺口的大小是一致的，并且每一个图标中有且只有一个缺口，而不是靠感觉随意添加。
第二，在设计一套偏圆润可爱的设计风格中，外轮廓使用了较大的圆角，那么我们尽可能保证圆角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的设计风格中，首先要保证填充色的一致，并且偏移的距离和方向也要保持固定的规律，不能随喜好任意制定。
透视一致
透视关系是在平面中对物体空间性质的表现方式，当我们应用了透视时，物体就有了一定的 “立体感”。
透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。
粗细一致
在图标中我们会应用到矩形线段或是描边，我们要尽可能保证它们的粗细是一致的。
比如，在线性的设计中，路径的描边尺寸要保持一致，不能这个图标用 2pt，那个图标用 1pt。
在填充图标中，我们会在一个矩形或是圆形中增加矩形的镂空，比如下图的几个图标，在这种情况下也要保证它们的粗细是一致的，而不是各不相同。
大小一致
大小一致，就是让图标的视觉大小保持一致，而不是它们字面上的长宽属性保持一致。
因为这是一个比较复杂的知识点，需要我们对几何图形的视觉差有比较完整的认识，我会在下一部分做出介绍。这些和一致性有关的特征，是一套图标看起来专业、有整体感的必要条件。但是，在真实的设计场景中需要灵活变通。
如果有一些特定的图标，在保证了一致性的所有要求后却极难被人理解，且找不到更好的设计方式，就可以差别对待。比如在一套线性的图标中，播放、快进等图标往往都是填充类型的，这并不会造成视觉或是使用上的困扰。
3.3 几何图形的视觉差
几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即
怎么让不同的图形看上去一样大？
可能有的读者看到这里会轻蔑一笑，这有什么难的，通过软件的参考线或者属性设置，把它们的长宽设置成一样不就完事了，比如下图这样。
嗯，画起来轻轻松松，参数上完美无缺。但等等，怎么看上去这些图形大小有点不一样，为什么正方形看起来这么大，三角形看起来这么小？
恭喜你们，发现了这个问题的根源，不同几何图形带给我们的视觉大小是不同的。而要解决这样的问题，就要对它们的尺寸做出额外的调整，比如下图这样。
适当调整完圆形和三角形以后，是不是觉得大小的感觉一致了？这就要牵扯一个更基础的视觉规律，占据面积越大的图形，给视觉的感受就越大，所以给我们感受越小的元素，就要放的越大。
并且，这个问题在一个图形的内部也会产生影响，比如知乎 APP 下面的点赞、反对按钮，都有三角形图标对吧，但图形其实对于外部举行是非居中的，我们看看下面的演示。
如果一个图形其中一部分面积远大于另一部分，那么就会让这个图形的重心产生偏移，必须要往较小的部分的方向移动才能产生平衡。
所以，在设计一整套的应用中，如果没有对这个理论的理解，只定义一个矩形出来，把所有图形的尺寸于矩形对齐，那么最终看到的图标效果一定是极度不平衡的。
3.4 工具图标的栅格
其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。
我们先简单看看，常见的工具图标栅格是什么样的。
里面包含了正方形、长方形、圆形对不对，那我们把它们分别罗列出来看看。是不是就发现这些图形的视觉尺寸是非常接近的？然后再通过这样的尺寸设计对应的图形，也就看起来都一样大。
所以，应用图标的栅格系统对于图标的设计来说，是一个用来应对几何图形视觉差的“参照物”。
之所以要说参照物，原因在于，一套图标，不会只存在这几种图形的样式，还有很多千奇百怪的形状，但大体上我们可以识别出来它的类似轮廓或者重心方向，于是就可以通过参照图形来判断我们设计出来的图形尺寸是否符合标准。
如果设计图形和参照图形的类似，那么尺寸就不能大于参照图形，如果设计图形的宽大于参照图，那么高就要小于参照图，反之亦然。如果图形的重心有偏移，那就要往重心偏移的反方向移动，比如搜索按钮，Wifi 图标等。
最后，说说栅格系统的画法，和大家想象的不一样，想要画一套图标，栅格系统是我们自己画出来的，不是到网上下载下来的，所以怎么画也是这个知识的重点。
如何绘制图标栅格系统
如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，正所谓四边留一线，日后好相见。
然后就要开始绘制其中正方形和圆形，正方形通常在整个图标尺寸 1/2 的比例，可以使用 14 或 16 的偶数 （为了可以居中）。然后再确定圆形的尺寸，圆肯定比正方形大 2-4 pt，于是就得到下方的图形。
之后，我们再确定横竖长方形的尺寸，可以直接顶到内边距的边缘。它的尺寸不是通过数值计算的，而是要我们先画出来，把它们和前面的圆、正方形置于一条水平线上，调整出一个平衡的视觉尺寸，再和并进栅格系统中，就完成了栅格系统的绘制，如下图的案例。
这一步也旨在检查我们的参考线系统是否在基础结构上经得起考验，是非常关键的一步。因为不同尺寸的图标中，参考线系统都是有区别的，我们不能直接按一个固定的比例来设置，要根据实际场景做判断。
当然，为了进一步方便大家的学习，我特意准备了一套现成的栅格素材，包含 16、24、28、32、36、48 等六个尺寸。大家可以进入我的主页关注公众号并回复 “图标素材” 获取。
3.5 像素对齐
在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。
我们都知道像素是屏幕显示中的最小单位，一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机，都是通过像素画的形式呈现，人物锯齿是无法避免的。
而随着技术发展，像素密度是降低了，但如果依旧是按过去这种一个萝卜一个坑的方式显示内容，那锯齿感无论如何是无法消除的。于是，开发了次像素渲染（Subpixel Rendering）的技术。一个在显示器中让我们觉得平滑的圆，一直放大，就可以发现它的周边充满了饱和度较低的其它方块色彩。
这项技术，让像素可以用特有的方式来显示非完整的色块，即尽可能还原我们对元素定义的小数点。但为什么我们还要提这个概念呢？
因为工具的图标太小了，而且 UI 的元素对精细和准确度的要求都不低，如果我们没有尽可能满足像素对齐的要求，那么就可能导致元素边缘的模糊。
所以要满足像素对齐的要求，就要符合元素本身的尺寸为整数、描边为整数、XY 轴坐标为整数的特性。
AI 中的像素对齐设置
在 AI 中，我们可以通过两个设定来查看和保证像素对齐，即网格的设置显示，以及对齐到点的设置。
像素的对齐主要表现在横线和竖线上，虽然现在手机显示精度越来越高，但并不意味着我们可以无视像素对齐的规律！在线性图标中，类似对于 1pt 或者 2pt 描边的应用，觉得不是太细就是太粗，可以用 1.5pt 的数值（1.5 pt 在 2x 中就是 3px），但切记不要出现类似 1.23、2.16、3.46 这种小数。
像素对齐是一个专业 UI 设计师对于极致追求的表现之一，是每一个一线大厂 UI 设计师的基本职能，所以，想要冲刺更高的段位，就不要忽视这个规范的使用。
这是图标系列文章的第一篇，信息量不算少！所以我们在结尾再总结一次，方便大家记忆。
• 知识点1：在 UI 的界面中，图标的主要作用是用来高效的传递信息，以及起到美化界面的作用。
• 知识点2：UI 会涉及的图标类型主要有三种，工具图标、装饰图标、应用图标。
• 知识点3：工具图标，是界面中用来传递信息的图形符号，主要包含线性、面性、混合三种设计风格。
• 知识点4：装饰图标，是界面中用来提升视觉体验的图形，主要包含扁平、拟物、2.5D、炫彩渐变等风格。
• 知识点5：应用图标，是用来启动应用的图标，主要包含文字、图标、图形、插画、拟物等设计形式。
• 知识点6：学习绘制图标，优先学习 PS、AI 的路径相关功能，而不是 Sketch 和 XD。
• 知识点7：图标首先要表意准确，能被用户识别并契合想要表达的寓意。
• 知识点8：设计整套图标的时候要符合一致性原则，包含类型、风格、粗细、透视、大小等特征。
• 知识点9：不同的几何图形会打给我们不同的大小视感，不能只看元素的参数。
• 知识点10：我们根据视觉差的方式定义出栅格系统，作为图标尺寸设定的重要参考。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验（用户使用产品，系统或服务过程中的主观感受）
用户在使用产品过程中建立起来的一种纯主观感受。用户体验这个词最早被广泛认知是在上世纪90年代中期，由用户体验设计师唐纳德.诺曼（Donald Norman）所提出和推广。对于一个界定明确的用户群体来讲，用户体验的共性是能够经由良好设计实验来认识到。用户体验并不是指一件产品本身如何工作的，更明确的是指“产品如何与外界发生联系并发生作用”，也就是人们如何‘接触’和‘使用’。无论什么产品，用户体验总是在细微之处，往往细节最能打动人心。用户体验通常要解决的是用户具体的使用场景，要兼顾视觉和功能两方面的因素，同时解决产品所面临的其他问题。
产品的逻辑简易程度对于用户体验是一个反向指标，产品越复杂用户体验会越发困难。往往产品后期更新迭代中，每新增一个特性，功能或者步骤，都会增加导致用户体验不顺畅或者失败的机会。用户体验的每一个流程，对开发者而言都要经过慎重的考虑和验证。实际上设计出一个最优的解决方案需要更多的时间和精力，往往不得不在各个方面作出妥协。但是一个以用户为中心的设计流程保证来这些妥协不是随机决定的。
为什么每个产品都在强调‘站在用户的角度，提升产品的用户体验’，因为优秀的用户体验就是商机，良好顺畅的用户体验会极大的提升用户转化率，增加用户的留存率。好的的用户体验主要体现在两种形式：“帮助人们工作更快”和“减少他们犯错几率”。牢记“以用户为中心的设计”在开发产品的每个流程都要把用户列入考虑的范围，每一个流程步骤都要代入用户的使用场景中体验，想用户所想。提供优质的用户体验是一个重要的，可持续，良性的竞争优势，用户体验形成用户对企业的整体形象，并以此来界定来与竞品的差异。
在产品的整个开发流程中都要考虑用户有可能采取每个步骤的可能性，并且理解整个流程中每一个步骤用户的期望值。
表现层：视觉设计，我们使用无论任何设备的产品最先看到的就是表现层，内容、功能和美学汇集到一起来产生一个最终设计呈现；
框架层：界面设计、导航设计和信息设计，框架层用于优化设计布局，以达到界面中元素的最大效果和效率；
结构层：交互设计和信息架构，相对于框架层更加抽象，框架是结构的具体表达方式，明确来元素应该出现在哪里；
范围层：功能规格和内容需求，结构层明确了产品的各种特性和功能最优的展示组合方式，这些内容构成了产品的范围层；
战略层：产品目标和用户需求，成功的用户体验，其基础是一个被明确表达的“战略”。知道企业与用户双方对产品期许和目标，有助于确立用户体验各方面战略的制定；
在五个层面应该是自下而上的建设，战略 — 范围 — 结构 — 框架 — 表现；不同的层面位置考虑的方向和侧重点是不一样的，随着层面的上升我们考虑的决策变得更加具体，并且涉及越来越精细的细节表现。每一个层面都是根据下面层面来决定的，每一个层面的决定都会影响上层的可用选择，表现层由框架层决定，框架层是建立在结构层的基础上，结构层是具有范围层，范围层是根据战略层制定的。
按照产品不同属性分为两大类：功能性产品/信息型产品；针对不同的类型将五要素细分展示，功能型产品更加关注的是任务，去思考用户如何完成这个过程，用户使用该产品完成一个或多个任务的工具；信息型产品关注的则为信息，产品应该提供哪些信息，并且方便用户快速寻找，理解，创建一个富信息的用户体验；这种把用户体验划分为各个模块和层面的模式，更有利于我们去考虑用户体验中可能出现的麻烦。所有处在同一层面的要素都会决定最终的用户体验效果。
优秀的用户体验基础是要有明确的“战略”立意，知道企业和用户对产品的期许和目标，才能更好的促进用户体验各方面的完善和优化。我们要用过产品获得什么？用户通过产品可用得到什么？回答这两个问题有助于我们更好的明确产品目标和用户需求，结合两者我们组成战略层。
产品目标：目标的制定切记不要太过具体或太宽泛我们需要在这之间找出一个平衡点，为了更好的用户体验我们需要保证所作出的决策都不是头脑发热拍脑门定出来的，每一个决策，都应该建立在我们确切了解他所带来的联动影响效果。明确的定义出成功的条件而不是定义成功的路径，有时候跑的慢一定不一定就是落后者。既然是赛跑肯定会有终点有结果的产出，我们要明确“成功的标准”制定可追踪的指标，成功的标准不仅仅影响各阶段的决策，也是衡量用户体验工作的具体依据，埋点数据采集，上线后的客户流存率，转化率，新用户的增长率，老客户的使用反馈等等。对驱动用户体验的决策而言有意义的成功标准，一定是可用明确与用户行为绑定的标准，而这些用户行为一定是可以通过设计来影响的。
用户需求：明确正确的用户需求是复杂不易的，因为用户群体存在很大差异性，确定大致目标用户后我们还需要精细化的区分，将用户分成较小的，有共同特性的以此来助力我们更好的明确用户需求，通过不同的角色群体使用产品来分析他们的需求。在针对用户需求研究时我们还可以使用一些市场调研（将你想要的信息通过具体，有效的公式化问题，让用户提交你正确的答案）；现场调查（完整的，有效且全面的方法，了解与产品使用生活场景最匹配的用户行为）；创建人物角色（模拟真实用户使用场景更加贴近用户，再产品思考中和用户更感同身受）。战略应该是用户体验中的起点，但并不意味着项目开始之前战略就完全确定下来，它是可以在整个工作中演变和改进的。
当我们明确了解战略层后，我们就知道产品应该为用户提供什么功能和服务，这些也就逐步演变为范围层。我们要做两个事情来定义范围层 —过程和产品。过程的意义在于当产品还在一个雏形时，可以带动我们去思考流程中可能存在的问题，功能实现的优先级；产品的意义在于明确最终产出的结果，团队有明确的目标。在这其中文档的输出是必不可少的，有计划性说明性的文档输出可以让我们的工作更加有条不紊的推进下去。我们可以从战略层抽象出来 — “我们为什么要开发这个产品？”转而到范围层变为 — “我们要开发的是什么？”在软件开发过程中，范围层确定的是全部功能需求和功能规格。
功能规格：功能规格说明不需要包含产品的每个细节，只需要包含在设计或开发过程中可能出现混淆的功能定义。同时功能规格说明也不需要展望产品未来理想状态，只需要记录在创建产品时确定下来的决议。换句话说，文档不能解决问题，但是定义可以，我们需要不是文档多么详细厚重，而是要足够的清晰和准确。功能说明要明确具体避免主观语气，避免出现歧义，尽可能用量化的可检验的标准来定义功能有助于我们的验收。
内容需求：很多时候我们说到的内容指的是文本。但是图像，音频和视频有时候比文字还要重要。这些不同类型的内容结合到一起，相互协作去满足某一个需求。内容特性想要达到的规模，将对你所做的用户体验产生极大的影响，内容需求应该提供每一种特性规模的大致预估，以便在设计过程中作出最为明智的决策。尽可能早的确定某个人来负责每一个内容元素也是非常重要的，避免后期开发实现达不到我们预期的效果。内容清单的输出也是重要的，究其原因这样团队中的每个人都会清楚知道自己负责的哪些部分，明确责任，提高协同效率。
学会确定需求优先级，了解“不需要做什么”也就意味的我们知道哪些是必须要“马上去做的”，把那些需求点梳理出来，找到一种适宜的方式，让它们符合你长期的规划，这才是真正的价值所在。确定具体，系统的发展要求，并将任何不符合这些要求的想法作为潜在未来功能的囤积，只有通过这种更慎重的途径，才可以真正的管理起整个项目过程。
在罗列出项目需求优先级，梳理出大致的流程，我们对于产品将会包括什么主要内容已经有了清晰的构想。然而，这些需求没有进行全面的整合还是碎片化的存在。而结构层要做的就是整合这些创建一个概念性的结构。结构层适当的将我们关注点从抽象的决策和范围问题，转移到更能影响最后的用户体验具体因素。但是这里的交互设计和信息架构所产出的东西大部分还是概念性的内容。这两项内容并不完全是技术，它要求开发者要有共情能力去理解用户，理解用户行为操作习惯，使用场景，思考方式等。将了解的这些知识代入我们开发过程中，这样会使那些不得不使用我们产品的用户带来更好的用户体验。
交互设计：关注于影响用户执行和完成任务的元素，即关注用户所有操作，同时定义“系统如何配合与响应”这些用户行为。任何一个交互设计的项目都有很大部分牵涉处理“用户错误”当用户发生错误时产品要给出什么提示，并且对于错误发生时，如何防止用户再次发生错误？第一个也是最好的防止错误的方法，就是将产品设计为不可能犯错的。第二个避免错误的方法就是使错误难以发生，即使一些错误发生，产品也应该帮助用户改正错误。有效的错误信息和容易自我解释的界面可以在错误发生之后帮用户纠正。当用户完成一些操作后无法纠正的错误，产品就该提供从错误中恢复的方式。对于那些不可恢复撤销的错误，提供大量警告就是产品唯一可以预防的方法。
信息框架：研究人们如何认知信息的过程，对于产品而言信息架构关注的就是呈现给用户信息是否合理并却具有意义。在以内容为主的网站上，信息架构主要工作就是设计组织分类和导航的结构，让用户可以高效率，有效的浏览网站的内容。信息框架与信息检索和分类体系密布可分，针对分类体系我们可以从上到下或从下到上这两种方法来建立。
从上到下的信息架构从战略层考虑，先从最广泛的，有可能满足决策目标的内容与功能开始进行分类，然后再依据逻辑细分出次级分类；从下到上根据对“内容和功能需求分析”而来，从已有的资料开始，先把他们分为最低级别的分类，然后再归纳到高一级分类，从而逐步构建出反应我们产品目标和用户需求的结构。这两种方法各有弊端，从下而上容易将内容的重要细节忽略，从下而上使架构过于精准的反应内容，对于后期的维护变动不是很灵活。因此我们要尽可能的从两种方式中寻找一个平衡点。一个高效结构的优点就是具备“容纳成长和适用变动”的能力。一个适应性强的信息架构体系，既可以把新内容作为现有结构的一部分容纳进来也可以当成一个新的部分加入。
在充满概念型的结构层牵引出大量需求后，这些需求都是来自我们战略目标的需求。在框架层我们要更进一步的提炼这些需求结构，确定详细的界面外观，导航和信息设计，这样才能使结构变得更加丰满。框架层需要处理更为细节问题，在结构层我们建立了一个框架和交互设计。在框架层我们关注点就是界面的元素以及它们之间的关系。当我们提供用户做某些事情的能力是，属于界面设计；当我们提供用户去某个地方能力，则属于导航设计；当我们要传达想法给用户时，那就是信息设计。
界面设计：成功的界面设计就是要让用户一眼就看到“最重要的东西”，而另一方面，不重要的东西，不应该被注意有时候则它们根本就没有出现在那。设计界面，平面最大的挑战之一就是弄清楚用户不关注的东西并减少他们的比重。将第一要表达的要素快速传递到用户。
导航设计：任何一个网站的导航设计必须同时完成三个目标：1.它必须要提供用户在网站的跳转方式；2.导航设计必须传达出这些元素和它们所包含内容的关系；3.导航设计必须传达出它的内容和用户当前浏览页之间的关系；这三个目标就是必须要纳入考虑的范围，清晰的告知用户“他们在哪里”以及“他们能去哪里”把用户当成是“傻瓜上帝”。
习惯和反射作用是我们与这个世界交互时的基础，我们在使用互联网产品这么多年的时间中，绝大部分的操作效果和下意识的操作方式已经被养成，所以要让你的界面与用户早养成的习惯保持一致是很重要的，界面要与它自身保持一致。这并不是说，每一个界面问题的解决方式都必须毫无条件的死守这些习惯。当某种不同的方式有明显的益处时，你反而应该尝试谨慎的违背一些习惯，到那时需要我们做的每一个决定都要有充分的，明确的理由。有效的使用比喻，就是减少用户在“理解和使用你的产品功能”是的猜忌，让用户第一眼就知道你的图标表达的是什么意思，要有强指示性质。
内容，功能和美学汇集的地方，完成其他四个层面的所有目标并同时满足用户的感官感受。在框架层，我们主要解决放置的事情；在界面设计考虑可交互的元素布局；导航设计考虑在产品引导用户移动元素安排；而信息设计考虑传达给用户的信息要素的排布；在向上就是表现层，我们这里要解决的就是弥补“产品框架层逻辑排布”的感知呈现问题。我们每一次经历最终都是由我们的感觉器官来进行的。在设计的过程中这是用户体验的最后一站：决定我们设计最后被哪些（视觉/听觉/嗅觉/触觉/味觉）感受器官受到呢？
嗅觉和味觉对于用户体验设计师是很少考虑的范围；触觉更多的用于工业设计领域，关注用户和产品之间的物理接触；听觉可以应用到不同类的产品中，如开机/新消息提示等；视觉：这是用户体验师最得心应手饿领域，几乎所有的产品都会涉及视觉设计。代替用“什么具有美感”来评估一个视觉设计方案，应该吧注意力集中在他们能否“良好运作”，对于那些上层决定的目标，设计能否赋能帮助企业更好的变现，设计的本质就是用合适的方式帮助用户/企业完成需求目标；
忠于眼睛评估一个产品视觉设计最简单的方式，就是你的视觉首先落在什么地方？哪个设计要素第一时间吸引注意力？它们对于战略目标是最需要表现的东西吗？用户第一时间接受的信息是你想要表达的吗？设计还是要把握4大基本原则：对比；重复；对齐；亲密性；
不管你的产品多复杂，用户体验都是一样的，创建良好的用户体验最重要的工作内容就是大量收集解决细微的问题。“成功的方法”和“注定失败的方法”归根究底就是：1.了解你正在试着去解决的问题；2.了解这些解决办法所造成的后果；必须要同时考虑五个层面的全部因素，这对于创建成功的用户体验至关重要。
提成正确的问题，面对那些用户体验需要解决的纠缠不清的问题，要抱有一种正确心态，不要以“节约项目时间或金钱”名义对用户体验问题敷衍了事。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系
作者：许小鹏 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
决策疲劳在现今互联网深度发展的时代似乎非常常见，面对眼花缭乱的APP页面，我们通常会因为需要做出过多决策而烦躁。那么产品设计者应该如何减少决策疲劳现象，给予用户更好的体验。本文围绕解决用户决策疲劳展开了详细讲述，推荐对此感兴趣的伙伴阅读。
决策疲劳是用户体验圈一个路人皆知的词汇，用于描述人们在某个时期内做出过多决策而导致厌烦的情况。研究表明，它主要发生在人类的认知能力在单位时间内随着时间的延长而减少时。这就是为什么学习、钻研问题，是一件非公众都能做好的少数事件。
在产品设计中，我们要坚持减少用户需要做出决策数量的基本原则。保证用户使用产品来完成一项任务，能够越顺利、越直接。个人在特定时期内被要求做出的决定越多，即使这些决定是微不足道的（比如选择播放那个节目），他们的决策质量也会越低。
当你感到疲倦时，这会显著地影响你的决策能力，而 设计师在为用户设计界面时必须了解到疲劳可能对用户的影响。这个话题很有趣，因为人们在使用你的产品时可能会遇到的认知过载的原因有很多。
本文重点是介绍在你进行下一个 产品项目时减少认知过载的六种方法。
作为用户，每天我们拥有的选择题都在呈指数增长。互联网让我们可以在瞬间访问世界上的内容。如此多的选择会使我们思维迟钝，降低我们的满意度，并可能导致我们对体验感到沮丧而不是变得更好。
当给用户太多选择时，他们往往会感到困惑和迷茫。一个产品可以拥有世界上所有的功能，但是当界面因为选择过多而过于复杂时，它最终给到用户的体验一定很差。《人格与社会心理学杂志》的一项研究表明，当我们有太多选择时，往往会导致决策失误和情绪沮丧。
来自哈佛商业评论的模型
在追求最大化满足商业化可能的产品设计中，老板可能会要求在其产品中包含过多或过少的功能。通过使用哈佛商业评论提供的模型，横轴为功能数量，三个点依次为用户复购最大化、用户终生价值最大化、用户初次购买销售最大化，公司能够根据他们想要的结果找到适合他们的功能数量最佳点。
研究表明，人们更有可能购买提供了有限数量的商品。在这种情况下，他们也会对自己的选择更满意，而不是从购买前的犹豫到购买后的忐忑，从而产生更大的满足感。
关键是很多产品为用户创造了太多的选择，这可能会造成浪费并适得其反。用户可能会浪费时间尝试点击所有可能的产品，而不是按照预期进行实际购买。
在用户体验世界中，关于使用多少次点击以及人脑一次可以接收多少信息，存在许多相关的说法。但最重要的是，产品设计师需要在简单性和功能性之间取得平衡，这样他们就不会要求用户做太多的操作或过多考虑用户的需求遗漏了什么。
最容易被误解的理论之一是乔治米勒的“神奇数字 7”。有人说产品设计应该只有七个菜单选项卡或下拉列表中的七个项目。
这是个谬误，虽然我在某种程度上同意这种观点，因为坚持这样的限制似乎更自然，但我们也必须考虑信息是如何随着社会和我们的大脑发生变化的。当前的互联网会通过网站和大屏手机向我们展示数据，而不是早年的4.0英寸的小屏手机，用户可以轻松地一次看到他们的所有选项，并不是非要强制通过数字7的限制让用户一块很大的屏幕上来回滚动。
同时现在也有一些研究表明，人们有可能喜欢有多种选择的菜单。我们拥有的选项越多越好，因为用户不必花时间深入查找相关信息。
比如主页上最多包含 几十个类别链接的淘宝列表）比仅提供有限选项（如没有子类别的类别）的网站更有用。但这里要强调的是需要考虑实际的用户场景，电商平台的属性导致了要为消费者提供更多的选择，而类似工具产品，尤其是垂直工具产品，在设计选项数量时一定要谨慎。
还有另一个站不住脚的理论：从业者普遍接受但完全不靠谱的“三击规则”，或者更加扯淡的“两击规则”。用户的满意度和事件完成率其实并不一定受几次点击影响，比方说付费流程，缺少必要的流程硬按点击次数把流程缩短，导致用户错误付费而产生的用户体验变差几乎是不可逆的。
比菜单选项卡或下拉列表的数量更重要的是视觉体验。视觉布局可以更轻松地扫描和记住每个选项。根据信息搜索理论，信息线索的持续感知对你的用户体验很重要。
人们在日常生活中要做出很多选择，而太多的选择可能会让人不知所措。当我们因产品特性不得不呈现更多的信息时，重要的是信息组织方式。
你可以去尝试减少选择的数量，但最重要的是你的信息结构。如果你的信息没有组织好，或者给到用户的决策过程中涉及的步骤过多，用户就不会费心去寻找他们想要的东西，因为他们觉得这会花费太长时间或可能没必要去更更努力地探索。
为了在产品上让用户的决策中有更好的转化，我建议去掉任何不必要的东西，例如无关的标签和链接，这些标签和链接会分散用户的注意力，使其无法找到他们正在寻找的东西。同时综合产品特性去考虑实际该有的流程数量和必要选项，平衡简单性和功能性的关系。
现实中我们都会犯错。它可能发生在我们所有人身上！但是，如果用户犯了错误，优秀的产品设计师应该怎么做？
答案是：让用户轻松回到起点。
通过让用户走上正轨，你更有可能留住他们作为用户，而不是导致他们离开你的网站或应用程序。
下面是我在设计用户流程时的一些最佳实践：
导航是任何网站或应用程序的核心。这就是让你的设计能够让每个人都易于访问和使用的原因。设计出到适合你产品的导航系统，对用户体验至关重要。
导航的设计应该直观且易于使用。用户应该始终知道它在哪里，它的意义，以及点击它会去哪。
一个好方法是通过颜色为用户对操作区域进行导航：比如当进行切换、更改等动作时配备不同的颜色，并用文案清楚地说明每个菜单项下是什么功能。
这些小动作有助于使浏览您的网站或应用程序成为一种畅快的体验。
一个例子是 Instapage 登陆页面。如果标题没有箭头，很难看出下方有更多内容：
在设计新界面时，必须尽可能降低受众的学习成本。一个方法是利用他们已经熟悉的模式和习惯。但是你怎么知道这些约定是什么？
下面是三个常见的 设计惯例，这些惯例可以让你的用户在与产品内交互时感觉更熟悉，这有助于减少他们的学习成本，并让他们更快地开始学习你试图传达给他们的任何内容。
简洁的配色方案要远比复杂华丽的配色更有效果。人眼会被颜色所吸引，因此如果你在整个界面中使用简洁的配色方案，人们会更容易找到自己想要的信息而不是被颜色乱神。
不仅要遵循常见的用户体验规则，而且要在一个产品里不停的重复，不要轻易作新颖的尝试，前辈们大多已经帮你尝试过了。
这样的意义在于：
人们使用你的产品感觉更轻松，因为这个产品没什么复杂的新东西（降低了学习成本）。
一个例子是，目前无论你在那个浏览器查看哪个页面，你的菜单栏都会保持在站点的顶部或底部。这会让你产生导航认知，因为它在帮助你决定下一步需要采取什么行动时减轻了学习成本。
图标是在你在表示操作对象是什么的好方法，它们易于理解且具有普遍可识别性，因此非常适合作为交互介质。使用在生活中已经被广泛理解的图标和符号有助于让你的产品内容不会感觉难以理解和过于复杂。
图标一定要广为人知——例如房子。这个图标被普遍认为是“主页”或开始屏幕的图标。垃圾桶也是一样——这个图标被认定为一个垃圾桶图标来删除一个元素。
我们都知道应该以用户为中心进行设计，而不是你自己，但其实不是那么容易。当你处于设计过程中试图弄清楚你的用户需要什么或他们会如何反应时，其实往往会按照自己的喜好走偏。
一个方法是你可以使用一些简单的技巧来确保你在设计时考虑到你的用户。有些人发现从第一人称的角度写下他们的想法有助于将自己想象成最终被服务的用户。
或者某些设计师会讲角色分类，然后全情单线程的专注一个项目，以牺牲时间和效率为代价确保航道的正向。
以用户为中心进行设计的最佳方式是听取用户的意见。当你从事一个新项目并考虑这个产品将如何服务于用户时，请确保在进行原型设计之前先和你的用户聊聊。
可以尝试提出以下问题：
往往你会惊讶于他们可以提供的见解以及他们将期望如何改变你原型的方向。
你可以使用多种用户体验研究方法来确保你在设计时考虑到用户：
不要提供太多的选项或功能让用户不知所措。
每个产品都有自己为用户解决的核心问题，用户希望在产品中获得帮助并快速做出决定。问题是，很多产品经常沉迷于他们产品功能以及他可以为用户实现什么，忘记了如果有太多选项和功能，新用户可能会感到不知所措。
如果你负责一个产品，可以考虑你的用户在面临过多选择或功能时的感受，并尽量优先突出他们最需要的选项或功能。
例如，在电子商务网站中，用户不能从 50 种不同的衣服面料中选择他们最喜欢的材质，如果预先只有三四个选择，可能会带来更好的体验。也可以考虑隐藏一些选项，方法是使用视觉提示，例如类似“探索更多”文字的按钮。
确保将最重要的信息呈现给用户的一种方法是将信息流设计为金字塔形状，首先呈现基本信息，不太重要的信息尽量放在不显眼的地方或者想办法隐藏。
这里提供了六种方法，帮助你减少产品中的决策疲劳，从而使用户更有可能走上正轨，解决他们的问题，并帮助获得更高的转化。产品设计时把自己放到用户的角度去思考，才能更好的服务于用户
文章来源：人人都是产品经理 作者：公众号：真的不一定
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。
简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。
可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。
自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。
渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。
响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。
01、响应式
如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。
通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。
02、自适应
如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。
我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！
概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。
作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。
基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。
如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。
形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。
最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。
所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。
如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。
如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。
如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。
由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。
应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。
如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。
应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。
如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。
应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。
如图7：可以看出这是一个四分之一的圆形。
如图8：这个图可以看出是一个五角星。
封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。
如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。
同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。
很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：
当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~
文章来源：站酷 作者：飞鱼十七
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com