这两年互联网行业在 C 端市场上的增长已经不足以吸引大众和投资者的视线，B 端作为一个新的热点开始被追捧。
但 B 端是一个泛指，它是由若干面向商业场景的不同细分行业组成。包括云服务、SAAS、PAAS、定制系统、数据可视化、智慧平台、商用 HMI 等等。
不同 B 端细分行业差距是非常大的，就像游戏 APP UI 和一般软件 APP UI 完全是两种职业一样。每当我们讨论 B 端行业前景，就一定要聚焦到具体的行业类型，否则就没有讨论下去的基础。
而我们今天重点聚焦的，就是目前声势极大的数据可视化行业。
这是最近很多同学咨询和关注的领域，也是各大显卡厂商、3D 引擎发布会上的常客。
各种让人眼花缭乱的图例和技术应用解说，很容易让我们产生未来已经加速向我们走来的 “幻觉”，此时不抓紧时代的机遇投身数字化界面的设计，更待何时？
但我还是要劝大家别光顾着鸡冻，冷静下来好好分析这些行业和市场状况，当你了解的越多，你就越会发现，这个职业方向和你们想的不太一样……
首先，数字可视化领域也是一个比较笼统的行业，它依旧可以拆分出若干细分领域。但我先简单根据视觉展示类型把它们分成两大类，平面展示型和3D展示型。为什么根据这个分而不是商业场景，下面会做进一步解释。
首先，数据可视化不是用了花哨的 3D 视觉才叫可视化，平面展示类型是绝对不能忽视的一个方向。它的主要应用场景集中在商业 BI ，统计分析工具等。
比如统计并查看网站、应用、店铺数据的平台。
这类产品有非常广泛的使用场景和需求，是现代企业和产品运营的基石，它存在的价值是毋庸置疑的。
而另一类 3D 展示型的细分发展方向，包含展示大屏、数字孪生、智慧项目、商用 HMI 等类型。
这类项目更多是由技术发展催生而来的 “新需求”，和 5G 的发展是高度相似的。我对这个行业的发展潜力是认可的，但对设计师从事这个行业的总体前景持悲观态度。
下面，针对真正的数据可视化设计师，我会从下面几个维度展开讨论（唱起反调）：
- 知识门槛
- 行业特征
- 团队价值
数据可视化是对数据信息进行图形化设计的过程，这个行业不是这两年才出现的，而是由来已久。
从世界上第一个图表的诞生之后，就有无数统计学家和设计师投身到这个领域中，发明和设计出各种精妙绝伦的图形。
数据可视化的重要性不会比任何其它设计行业低，但是，数据可视化重要性的来源，是由数据本身的价值赋予的。因为诠释数据的方式精彩，所以有价值，而不是仅仅是因为你做得好看且花哨。
更进一步说，就是数据可视化的价值是被统计学赋予的，而统计学是被这个世界真实需要的。
但很可惜，极少有 B 端设计师会投入精力到统计学的基础知识和应用，这就导致很多设计稿中，连对数据的展示应该用折线还是柱状都分不清。
或许你依靠经验可以提升对一些基本图表使用的心得，但是，进阶的可视化设计需求就靠几个简单的折线、柱状、饼图就能解决嘛？那下面这些图形应用需要掌握什么？
复杂的可视化应用场景，不仅需要设计师对统计内容和数据应用有主动地分析，还需要对计算机图形学有一定的掌握。先不说门槛极高的 R 语言应用，但凡涉及到区级以上的地理信息可视化，就一定需要应用 GIS 工具的应用，导出并转化数据包。
除了 2D 以外，3D 可视化的项目，所需的知识储备就更进一大步。很多新人的认知以为设计师的工作只要用 3D 软件建模并输出就可以，学会 C4D 就可以做可视化项目。
这和以为掌握烤箱的功能就可以做出美味的蛋糕性质是一样的……
前面说过，3D 可视化是由技术发展催生出的行业，它的应用受到技术的影响非常大。因为 3D 应用实在是太复杂了，比 2D 图形复杂好几个量级，这就导致设计可以落地的限制远远超出新手的认知。
常规的 3D 项目，必然要借助相关的图形协议或者引擎。比如新手刚开始都以为的 3D 可视化就是网页中运行 3D 效果，而网页运行 3D 就是借助 WebGL 图形协议实现的。
由于各种技术和硬件限制，WebGL 的性能是奇差无比的，因为它的图形绘制渲染主要依靠 CPU 来完成，只要项目稍微复杂一点，多边形和图元数量一多，立马就会让电脑变卡（CPU占用量暴涨）。同时，它可以使用的渲染效果、着色器也必然不等同于 3D 软件的高阶渲染插件 OC 或 Redshift。
因为 WebGL 太弱，目前封闭的可视化项目就转而使用其它的技术解决方案，即虚幻 Unreal 和 Unity。没错，就是你们玩游戏启动画面中显示的那俩引擎。
换句话说，现在的高端 3D 可视化项目，就是用做游戏的方式做可视化应用，只要在指定设备里安装，就可以调用 GPU 资源，实现更高级复杂的效果。
但是，只要应用了对应的引擎，就必须使用配套软件来完成渲染、动画、交互事件。即通过 C4D 或者 Blender、犀牛等软件完成建模（不同可视化项目应该用的建模软件也不一样），再导入到虚幻或者 Unity 编辑器中进行下一步的操作，然后再和开发进行交付。
因为 3D 的复杂性，导致独立 3D 可视化项目的开发流程被大幅度拉长，从而让设计师需要掌握的知识面也大大增加。中间每个步骤都充斥着各种屎尿屁的限制，我就不继续展开了。
3D 可视化设计师，几乎就等同于游戏行业中的技术美术(Technical Artist)，因为游戏开发更复杂，分工更明确，技术美术作为设计师和开发之间的桥梁，帮助项目的美术能尽量在技术上被实现。
而因为可视化项目的建模精度与视觉效果要求不高（对比游戏），这些工作就要由同一个岗位包揽，设计师就没办法回避这些让人绝望的知识信息。
还有一点对比游戏行业更让人绝望的，就是 3D 可视化实际应用的技术方案是高度碎片化、没有体系的，而且技术迭代周期远比游戏行业短（WebGPU已经在路上了），这在客观上增加了设计师的从业压力（欢迎体验前端开发的压力？）。
一个专业的可视化设计师知识门槛，是远远高于一般 UI 设计师的。
当我们研究一个行业的前景时，就是研究它未来的趋势和潜力。数据可视化严格意义来讲并不是完全独立的一个行业或市场，而是其它多个大市场中的某个组成部分。
如前面提到的数字分析、物联网、工业物联，都是层次更高的商业化市场。这些都是近年来高速发展的热门行业，是带动可视化行业发展的客观依据，我就不一一找公开统计数据佐证了。
而可视化除了商业场景外，还有个在国内做可视化绕不开的话题 —— 政策。
如果具体关注过地产、5G、电动车产业的发展历程，就应该明白国家意志的贯彻可以怎样在短时间内催生出市场的高度繁荣（或者泡沫）。
而政策对于可视化的利好，就在于 “数字政府” 概念的规划中。从几年前开始就兴起的政务数字化转型，到最近国务院发布的 《关于加强数字政府建设的指导意见》，都是中央直接 “指导” 地方发展数字化的指标，是行政意志与力量的体现。
说更具体点，下面是指导意见中的目标说明，非常直白，大家可以自己体会：
到2025年，与政府治理能力现代化相适应的数字政府顶层设计更加完善、统筹协调机制更加健全，政府数字化履职能力、安全保障、制度规则、数据资源、平台支撑等数字政府体系框架基本形成，政府履职数字化、智能化水平显著提升，政府决策科学化、社会治理精准化、公共服务高效化取得重要进展，数字政府建设在服务党和国家重大战略、促进经济社会高质量发展、建设人民满意的服务型政府等方面发挥重要作用。
到2035年，与国家治理体系和治理能力现代化相适应的数字政府体系框架更加成熟完备，整体协同、敏捷高效、智能精准、开放透明、公平普惠的数字政府基本建成，为基本实现社会主义现代化提供有力支撑。
原文链接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因国情在此，所以这些年 G 可视化项目才如雨后春笋一般涌现。智慧城市、智慧农村、智慧水利、智慧交通、智慧民政等等，都是借助这股东风蓬勃发展。
所以，商业和政务的迫切需求，催生出一大批可视化服务公司，如 EasyV、ThingJS、观远等。即使头部大厂也生怕错过这个机会，纷纷组建团队进行行业布局。如腾讯云的 Raya Data、阿里云的 DataV、网易的数帆等等，都已经小成气候，初现锋芒。
市场需求旺盛，规模快速增长，前景理应一片大好！但是……
市场总规模的扩张，带给个体的收益却不一定有表面看起来那么理想，尤其是设计师岗位。
这要先从常规 UI 设计行业说起，UI 设计师工资已经是国内设计行业工资最高的类型之一，从10年前的屌丝行业到今天能和老牌贵族建筑设计叫板，是非常了不起的成就。
而之所以有这种收入，除了移动互联网爆发以外，最重要的原因就是互联网产品的 “利润率”，可以用非常少量的职员撬动上亿甚至上百亿的利润。
如王者荣耀 2021 年全年盈利 28 亿美元，接近 200 亿人民币的利润。一款游戏的利润直接达到万科（2021年利润225亿）和中国人保（2021年利润216亿）的水平，他们都是在册员工超过 10W 人的大型企业，也是国内各自行业里的巨头，而王者的员工只是他们的几百近千份之一。
再如蚂蚁金服、微信、抖音之类的国民级互联网应用，都是用极少的员工达到让人难以置信的估值和利润，这在传统行业是无法想象的。
所以能盈利的公司会给员工开出满是行业红利的待遇，拔高行业上限的同时，也迫使那些有志于挑战巨头的新公司愿意抬高工资价码，吸引人才。
总结起来，UI 之所以平均收入远超平面、服装、工业、室内等老牌设计行业，并不是因为 UI 专业门槛更高，而是以行业规模、项目规模、利润率三个核心指标的共同作用形成。
其中，项目规模和利润率的重要性，其实远远大于行业规模，这是很多职场新人最想不通的地方。
例如广告行业已经是一个万亿市场了，除了分众这家互联网独角兽外，其它老牌广告营销公司每年财报的营收和利润大家感兴趣的可以去搜搜（下图为 21 年财报）。
看看他们的营收总额和净利润比例，以及员工总数，你自己就会得出，作为普通平面设计师的待遇，是绝对不可能超过头部互联网企业的，甚至能达到中游水平都是超常发挥的结论。
行业规模大，但是头部企业规模和利润却不高，除了行业本身的平均利润率因素外，还有一个原因就是业务是高度分散的，没有被集中在少数头部企业，供应商数量庞大，不像多数 C 端市场都由少数几家公司或者产品把持或直接垄断。
在可预见的未来，可视化行业也会处于这样的情况，竞争激烈，利润率低。而且作为 B 端服务商，不要看各家企业需求旺盛，政府各级单位招标不断，实际上每个项目的规模都不大，百万内的项目才占行业的绝大多数，这是不太符合满足我们收入期待的项目规模。
而单个项目规模在未来高速扩大在我看来也不太现实，有两个原因，一个是项目使用人数极少（通常也就几十上百人…），另一个就是对可视化项目实用性的质疑。
如果看过航天相关的报道，就会看到指挥室数据大屏相比我们网上看过的案例比起来，简陋得发指。这会是因为总局没有预算，请不起设计师和团队开发嘛？
为什么航天指挥中心没有用下面这种 “科技感” 满满，复杂的我坐下面保证除了标题一个字也看不见的 “高端设计”？
原因说出来让人沮丧，因为他们 —— 真的要看上面的信息啊！
真正能发挥可视化价值的场景并不多，很多项目出发的意义，就是为了表面工程（各级ZF单位需求，自行体会），装饰属性大于实用性。既然实用性不够高，很多甲方心里也清楚，是花钱装裱门面的，那么投入的预算就更不可能太高。
所以，我对可视化行业的整体的发展是认可的，但对单家公司或项目的预期，却是悲观的，它们没法达到我们已经习惯的 C 端和 SAAS 行业的高度。
最后，还要探讨下数据可视化中设计师的团队价值。
我们知道，一个完整的可视化项目设计与开发门槛都是非常高的，但因为高，创造的价值就高嘛？项目营收的成本占比就高吗？
答案依然是否定的！因为可视化行业的绝大多数项目都是 “传统” 的外包项目。
不管是商业是政务领域，外包最重要的任务，都是找到业务（中标）。朴素的价值观会认为，只要技术和服务够好，业务自然源源不断，其实不然。技术服务都是后验的，客户没有合作过之前是不知道的，在市场上挑选服务商，可不是打开淘宝买家评论查看分数和具体评价筛选。
所以，外行了解服务商的窗口，更多是通过熟悉的中间人介绍，或者销售的嘴。谁能拿到项目，谁就为公司创造了最大的价值。后面怎么做那是后面的事，换谁做不是做……
这就是最常见的外包企业思路，所以技术人员或者设计往往都是消耗品，没有那么强的依赖性。而在具体外包实践环节中，项目的执行决策也和一般 B 端、G 端项目不同。
我以前一直强调，B 端项目的存在价值，是用来解决业务问题，为企业 —— 降本增效。但是可视化项目往往不是用来解决问题，而是用来 —— 解决产生问题的人！
尤其是面向政务的项目，在领导的需求面前，是没有体验这一说的，首先考虑的应该是 ”科技感“（结合前文理解），不然怎么展示自己贯彻上层指导意见……
这种环境对于创意类职业是非常不利的，一方面创造的价值并不显著，另一方面是由别人 “教你” 怎么做设计。长此以往，你会越来越缺失职业竞争力和发展可能。
问题二，则是因为可视化项目独立开发成本太高昂，做的视觉内容又非常固定。于是有实力的团队就纷纷投入可视化编辑工具的研发，解决最麻烦的底层图形方案。
这和 B 端的前端开源框架非常类似，把底层的代码、交互、动画、性能优化都帮你做好了，设计师和程序员可以用非常省事的完成项目的视觉内容落地。
但是，常规 B 端管理项目中，界面样式一直就不是最重要的事情，而是解决复杂页面流程和组件交互的问题。所以资深的 B 端设计师乐于应用第三方的框架来完成复杂的项目。
而在可视化领域中，多数项目并没有那么多和复杂的交互需要考虑，视觉展示效果才是第一位，绝大多数团队应用第三方框架是大势所趋。核心工作内容被影响，那才叫触及灵魂的打击。
所以，在我看来可视化设计师可以创造高价值的场景，只会出现在两种团队中。
第一种，是给其它可视化团队提供图形服务的 SAAS 工具，比如 Raydata、EasyV 这类。都需要团队有非常优秀的前端程序员和技术积累，换句话说，就是既要有技术实力又要有资金保障的团队。
第二种，则是走优质项目输出路线的小团队或公司。会有一些优秀的开发人员坐镇，再由设计师主导来推动业务发展，不会什么项目都做，会选有价值的用心交付。例如早年的 UI 外包团队 ARK、Eico、TangUX 等都是这种路线。
这两种对比目前海量的服务商来说都是凤毛麟角，第一种类型是可视化设计师发展最好的归宿，因为设计产出和图形技术发展高度捆绑，只有这样的团队才会最早最快接触新的专业技术方案。
除了这两类，不要对其它外包类公司有太多的期待。在整个互联网行业中，成熟产品团队非常不喜欢招外包设计师不是没有原因的。
至于未来是不是可视化内容会在 C 端领域打开局面，发展出一些新的应用场景，我就不过早下定论了。
最后，做个总结，给目前还没有进入可视化设计行业，或者是误打误撞进入这个行业的设计师一些职业方向的建议。
可视化设计行业和广告业非常类似，就是从业人员收入构成是沙漏状，而不是像 UI 这样呈金字塔状的，缺乏健康的增长梯度和充足的腰部岗位。
可视化设计师从菜鸟进入专业阶段所需的知识量更大，准备周期更长，技能门槛更高。在初中级阶段和一般 UI 行业对比起来 —— 毫无性价比。
如果本身热爱可视化，想将 FUI 那些东西搬进真实的世界和项目里，也做好了艰苦学习的准备（说不定是你乐在其中的），那么这个的行业的头部岗位就是为你这种人准备的。
毕竟行业体量大，当然就会有真正优质的岗位出现，只是它的门槛高，没有那么多水分能挤。
如果不是异常热爱这个行业，具备较强的自学能力，或有一定的 3D 和图形技术知识积累，那么不太建议往这个职业深入发展，一般的 B 端和 SAAS 项目才会是更好的选择。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
图表的作用在于对数据的合理的诠释而不是美观。所以，在了解图表怎么绘制前，更重要的是了解图表是什么，包含哪些类型。下面就做下相应解释方便大家理解～
在今天，随着大数据和数据分析理念深入人心，图表在 B 端设计的地位越发重要。
那么什么叫图表呢？
图表指的是可以直观展示统计信息属性和数值的图形表格，对于多数人来说第一次接触图表概念都源自中小学计算机课程中的 Office Excel 表格教学。
要理解图表，你就绕不开 Excel 这个软件或其功能形式。我们都知道 Excel 是一个表格工具，可以任意填写表格化的信息内容进去。
但那只是呈现出来的表象，Excel 的真实身份应该是一个数据记录工具，通过这种表格形式记录，比如班级学生成绩、客户联系方式、仓库进销记录等等。每一条记录下的信息都是一条独立的 “数据”。
盯着表格看，我们确实可以看到一些具体的信息、数据、内容。但是，数据的作用只是让我们自己去精确定位想要的内容而已？显然是否定的。
我们统计数据的目的，还包括要从众多的数据条目中获得反映真实情况的 “规律”、“趋势”，如果我们只盯着数据条目一条条的浏览，是很难找出这些信息的。
于是，人类就发明了图表这种可视化工具，帮助我们对数据进行总结，用更直观的视觉方式来认识数据和找出规律和趋势，这也是为什么 Excel 是最强大的图表生产软件的原因之一。
总结：图表是统计学的子学科，它帮助我们更好的找到数据背后的真相，并做出正确的决定。
图表既然由数据内容生成，这个生成和转化的过程当然具备一些基本的规则和条件。要满足图表生成的数据必须要包含两种基础信息 —— ”维度“ 和 ”数值“。
它们是组成绝大多数图表的基石，比如看下面的表格，一次体检中有三个班级的5个同学，他们的身高、体重、体脂率、肌肉含量、视力各不相同。
我们可以从中挑选维度和数值，比如姓名做纬度（X轴），体脂率作为数值（Y轴），那么就可以生成基础柱状图表。
从上面案例可以知道，横向纬度表示的是你图表中要包含多少不同的展示对象，纵向数值则表示你要显示该维度的哪一类数据。
纬度通常指某个具体的人、日期、事件、分类，通常是 不可量化 的内容。而数值则是指包含 可量化 的数据类型，重点要记得数值是指 “数据类型”，而不是指具体的参数值。
再进一步，上方生成的图表，虽然直接反映了我们选择的纬度、数值的情况，但显然对于不了解数据背景的人来说太简陋了，不知道它们代表的意义。所以，一个完整的图表还会包含一些 “解释” 性元素，来让观看者更好的理解图表内容。
所以，一个完整的图表中除了中心图形，还会包含标题、单位、纬度图例、网格、选中提示等内容，用来提升其阅读性。
以上只是最基础的示例，不同图表、内容，对说明信息的要求各有不同，我们会在下方做出一定的解释。一个优秀的设计师要学会如何因地制宜，优化图表的内容构成，并对展示的信息进行取舍。
随着统计学的发展，图表也经历了一系列的增长与创新，除了我们常见的几种图表外，还发展出了大量平常看不到，只存在于各自专业领域的特殊种类。但是，它们对我们的生活和工作也起到产生了重要的影响。
比如在新冠危机中，政府和专业机构对民众开放的数据就大量使用了图表进行解释，让我们可以很清晰的了解事情的走势和真相。
之所以有这么多不同图表，让人眼花缭乱，在于数据所包含的信息和特性不同，导致了它们所总结的规律类型也不同。
业界将图表展示类型分成了四个大类，包含比较、分布、构成、联系，虽然比较简陋，但这是新手认识图表最简单的方式。
我们简单解释下这四个分类代表的作用：
之后我们就会以这个框架，来解释不同分类下的图表，帮助大家建立对图表的正确认识和设计方式。除了这种标准分类以外，我还额外做了一个归类，就是基础和高级图表。
前面提到，一般图表就只反映纬度、数值两个方面的图表类型，很容易理解。但复杂的图表，就会超过这个范围，它可能包含了多个维度、多种数值、甚至第三、第四。
比如下面这个散点图，除了身高（纬度）、体重（数值）外，还表现了个体（圆点）、性别（色彩）。在图表本身的解释性元素中，还包含分布区域、最大最小值标识、体重/身高均值。
这已经超出一个没有接触过统计的新手认知范畴了，是需要具体学习才能学会如何阅读和应用的图表。
这还是比较简单的高级图表，往后还有类似桑基图、K线图（韭菜的自我修养）、和弦图等类型，它们有各自使用的规范、参数，以及应用的场景。
高级图表的复杂度和抽象性，决定了它的使用门槛较高，识别效率较低。而随着数据各行各业数据重要性的提升，对图表的需求已经不再局限在二维抽象图形的应用上，而是提供了视觉效果更精美，制作过程更复杂，阅读门槛更低的可视化数据展示内容。
虽然我们在本篇文章不会拓展到大屏可视化的领域，但是掌握好平面二维的统计图表，提升对统计目的的认识，是深入学习可视化的必要条件。
接下来，我们就要来介绍一下如何绘制图表了。虽然图表之间有比较大的区别，但它们有很多细节是具有统一规范的。优先掌握这些一致的内容，再理解不同图表的具体绘制差异，可以帮助设计师快速上手图表设计工作。
上面我们提了，一个成熟的图表会包含不少解释性信息，怎么放置解释信息和图形元素是我们在设计时的第一个考虑要素。
常见的抽象图表都有一个完整的矩形区域，我们要先确定该图表的具体占比尺寸。然后，对这个区域进行布局的规划，而这个布局的规划就和解释信息的展示有非常大的关系。
比如，你需要在图表中增加标题和图形解释，那一开始把图形做成了上、中、下三栏。有的情况下我们可能还会增加一个默认存在的文本型解释模块，那么还会再右侧再切割出一个区域出来。
除了解释信息外，我们在设计中有时候还不能忽视交互内容，比如要包含分类筛选、时间线控制、开关等控件时，它们准备放在哪里，也要在这个阶段确定出来。
经过前面的切割，其实我们就能确定出中间的图形区域了。在开始绘制前，我们还要对图形具备的信息做进一步的确认，XY 轴坐标是否包含文字解释，饼图类是否包含延长指示线说明。
将这些区域先确定出来，减去它们的空间，就留下了最终要图形展示的区域了。
合理的图表绘制流程变是先布局，确定信息内容，最后才集中处理图形元素。如果对于前端适配有一定了解的同学，也就知道在完成这些步骤以后，图表的适配规则制定就畅通无阻了。
有了图形区域，接着就可以开始动手画图形了。不管是基础还是复杂的图形，你想要让自己输出的作品严谨、质量高，就需要应用专业的绘制方法。
图表图形的绘制类似尺寸作图，需要应用各种参考线、辅助工具来完成。图形本身并不是我们用来做创意的地方，而是要以准确的方式绘制出来。它包含两个重点，分布和比例映射。
以一个柱状图表举例，该图表中维度包含了 7 个对象，即应该出现 7 个柱形。那么首先就要通过等分图形区域，来确定柱形的分布，XY轴文字的对齐对象。
如果你不罗列对象具体数值的话，到这步也就结束了，但如果对象数值是必要显示内容的话，那么就要尽量确保柱状的显示比例和数值是一致的。
假设在上方案例中，Y轴总高是 100px，那么数值中每 1 小时的高度就是 100/16 = 6.25px，我们就要用你写下来的数值 * 6.25，保证柱状图高度比例和你的数值一致。
而类似饼图这样的图形中，只要添加了具体数值内容，那么饼图中不同的扇形角度，也要符合对应的比例。比如占比 10%、20%、30%、40% 的四个对象，它们的角度就分别为 36、72、108、144。
这就是分布和比例映射的基本逻辑，不管是什么图表，只要它根据数值在区域中进行绘制，就一定会受到数值的影响。不管学习什么新的图表，都只要确定这两个步骤就可以轻松准确的完成绘制。
至于具体该怎么实现，用插件还是参考线，就是软件基础的问题了，不在这里展开。
在图表设计中的最后一个问题，就是关于配色的方案了。图表配色的技巧主要关注两点，选色逻辑和搭配方法。
选色逻辑，就是图表用色的一些基本规范。我们知道图表往往非常的复杂，或者页面一屏中会包含大量的图表。
在这个基础上，图表的用色就注定是不能太 “刚猛” 的，饱和度要偏低，明度要适中。在选色面板中，它大概处中部偏上的区域。即使产品主色用的饱和度非常高，图表要和主色统一，也建议在主色基础上做适当调节，在色系上接近即可。
并且，建议新手在绘制图表的过程中千万不要用渐变色。即使在各类飞机稿中，渐变色的展示效果也非常的不理想，没有任何可读性。
有了选色逻辑，多色搭配的思路也就变得而非常简单了，只要重点关注色环的配色模式即可。
配色模式多种多样，包括补色、三角对立、类似、四元、方形、临近等等，不用想的那么复杂，只要牢记根据你的设计风格需要，你是要相邻配色，还是等分配色。
相邻配色，即以一个色系的临近色系为标准的搭配。以 H（色相）、S（饱和度）、B（明度） 配色模式为准，饱和度和明度数值基本不变的情况下，小幅度变更色相。
等分配色，也是保持饱和度、明度的一致，根据需要的色彩数量（大于三个）在色环中按角度等分，获得均匀的色彩过度。
配色的方法很简单，难的是你们如何根据页面的需要、视觉的体验，合理的运用配色的方案，这没有统一的标准。要记得图表配色不是仅仅针对自身，会和页面其它色彩产生联系。
保证相对平缓、不太激进的图表配色思路，是最安全的做法。
首先解释第一类图表 —— 比较。
比较图表的作用，是用来对纬度的数值做对比的图表类型，直观对比不同对象的强弱、排序、趋势。
柱状图，是一个使用柱状图形反映纬度数值的二维坐标轴图表，也是我们最常见的图表类型。
在这个二维坐标轴中，我们可以用纵轴代表数值，也可以用横轴代表数值，另一个轴代表纬度。即在显示的过程中可以使用纵向或者横向的（横向的也被叫成条形图，都是一回事）。
柱状图除了每个对象包含一类数值的做法以外，也允许包含多个数值类型，每个类型使用一种颜色表示，这种图表叫分组柱状。
并且，柱状图作为最基础的图形，衍生了非常多下级的柱状类型。包括：堆叠柱状、子弹图、正负混合、瀑布图、直方图等。但要注意的是，并不是所有柱状类图表，都是作为对比来使用的。后续会有进一步提示。
柱状图通过柱体的长短，可以直接对比不同纬度数值的高低，但使用也有一定的差别。
纬度之间关联性不是太强，或者按时间顺序排列的就适合用横向排列的方式，比如下方记录我随时可能猝死的打工人一周睡眠时间（见左图）。而涉及排名或者时间的数据组，就适合使用纵向排列的，比如 Geekbench 展现不同 Mac 处理器强弱的排行榜（见右图）（os：Pro 居然比 M1 还低？）。
两种图表的选择还和 UI 环境的交互方式有关，在APP中，横向排列的柱状图可以显示的数量非常有限，想放更多纬度就要左右滚动，体验不佳。而使用纵向排列则对空间的要求没那么高。
折线图也是基础图表，通过创建端点并使用直线连接的方式展示出高低不平曲折的线段。折线图在图表形式上和柱状图非常类似，但两者在使用上是有一定区别的。
当我们要选择使用柱状图的时候，往往关注数值的总量，或者维度代表的是不同的对象，比如不同 CPU 之间的跑分对比。但是折线图的使用就没有那么单一，它主要应用在单一对象的单个维度变化对比中。
比如，我们监控 CPU 的占用频率，那么维度使用时间，数值用百分比，这里面产生的数据都是围绕 CPU 的占用频率展开，但如果维度改成了当前时间不同核心的占用数值、温度，那么我们就肯定不会用折线图来表示。
折线图的使用是要通过线段的曲折来反映数值的波动，在应用过程中往往不作为一个静态的图表展示，而是应用于监控的场景，比如监控股市市值、网站在线人数、CPU温度、同一地区降水量等等。
在折线图中，最大的认知误区就是对于曲线线段的应用了。在数之不尽的网上飞机稿中，使用曲线的折线图表 90% 以上都是错误的。
这要回归本质来探讨，折线图也是进行对比的图形，如果没有直观的波动，那么这个图形带来的信息量就非常有限。曲线会因为圆角的缘故而降低波动带来的冲击力，甚至抹平这种对比。
只有在必定会连续出现极大波动的图表中才适合使用曲线，例如围绕在会有一个中间值数值，曲线进行正负两端移动的类型，比如监控呼吸中含氧量（呼和吸一个周期的维度）。
所以，尽量避免曲线的应用，不仅画起来麻烦，而且实际使用效果极差。
作为折线图，在一些数值代表完成、占满、填充的概念时，往往就会觉得单纯的线段表示不够直观，于是就产生了将下方的区域填充色彩的 —— 面积图。只展示一个数值类型不够要加入多个数值和线段的就叫折线堆叠图。
雷达图，相信大家看到最多的地方就是在游戏的角色面板或者武器面板中。雷达图是一种偏向概括性的图表，并不能用来体现大数值和高频变化，是用来对比同一个对象不同维度数值的图表。
雷达图的应用，首先要确认出不低于5个的维度，并且这些维度可以使用相同的数值体系，比如0-10分，0-100%等。并且，这些维度最好是由同一个对象身上拆分出来的，而不是 5 个维度指代不同的对象。
简单来讲，就是我们可以用雷达图来表现一个学生不同科目的水准，这样雷达图可以大致概括这个学生科目掌握情况和相对的强弱。
但是不应该用雷达图来表示不同学生同一科目的水准，那就只是更基础的对比，用柱状图就可以了。
当然，雷达图中的占用内容，也可以添加多个对象，一个雷达图中可以放多个同学不同科目掌握水平的叠加图形，以此对比他们的差异。
雷达图的绘制，也是优先制定说明内容区域，然后再开始图形的设计。
因为在雷达图中，我们对维度的描述，基本只能设计到不同端点外部，那么文字本身的数量、占比，就会对图形的显示产生非常大的影响，并且在雷达图中维度的描述文字是必须的，过度精简还是用其它方式体现都很不直观，所以优先预留足够的文字空间。
然后，根据我们需要的维度数量绘制一个等边的多边形，并设置合理的数值。
之后，才是确定出这个多边形内所包含的数值刻度数量。假设除圆心外总共要显示5级，那么就要画 5 个堆叠的等边形，那么我们就从最大的那个等边形入手，再复制4个出来，对它们分别乘以 80%、60%、40%、20% 即可。
最后，再将每个维度对应数值根据百分比将端点打在维度的直线上，用钢笔工具将每个端点连接起来创建一个完整的不规则多边形，就完成了雷达图的设计。
如果想要在一个雷达图添加多个对象，只要用不同颜色描边绘制对应数量多边形即可，如果要填充这些图形，就一定要使用透明度填充来完成，否则可能遮挡后方的端点，导致图形不全。
阶梯图是一种用来对比前后数值涨跌的图形，它是柱状和折线图的合体。它和折线图的不同之处在于，更关注每个对象增减的份额大小。
不仅仅是关注波动，而是更具体的值。类似关注一只股票全年的股价涨跌情况，每个月涨跌的具体额度，就适合使用阶梯图表现。
漏斗图因为长得像漏斗而闻名。虽然这个图形看起来像一个锥形或者三角形，但本质上漏斗只是条形图（横向柱状图）的变体。
漏斗图是一种对阶段进行分层表现的图形，从上到下的顺序中，数值一定会呈现衰减的趋势（起码不会变大），然后从上到下的柱体就越来越小。
例如，UX 数据分析经常用的漏斗模型，就会建立一个从用户访问主页，到最后完成下单的转化率，每一个步骤都会有一定的用户流失。
在基础漏斗图之上还有进一步拓展，比如对这个转化本身有一个预期，那么可以做对比漏斗图，比较现实和预想中的差距。如果要对比 iOS 和 Android 端的漏斗数据，还有比较漏斗图，对比两侧的长短数据。
第二个解释的图表类型 —— 分布。主要是用来研究数据分布情况的图表，对不同数据的统计分布状况进行描述。
直方图是一个看起来和普通柱状图非常接近的图表类型，是一个用来表示同一个纬度范围中，不同区间频率的图形。
直方图是一个二级图表，是对一级数据的进一步转化。比如看上图案例，散点图（下面会说）本身记录了不同的数据的位置，而直方图就是记录在发生在这个纬度内的次数。
直方图乍一看很像柱状图，但实际应用场景往往使用了非常密集的柱体，让它看上去像折线图。对于设计师来说和直方图打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方图。
当视觉设计师、摄影师在学习处理位图的时候，就必然要学会直方图的读取，它并不是用来让我们学习如何对比前后数据差异的，而是让我们可以快速掌握这张图片中像素点在不同通道的分布量。
直方图是统计学中的 “频率分布” 的视觉表现形式，需要确保使用的场景符合直方图的定义，以及确保用户能理解图表内容。
对于直方图来说，如果维度对象少，只要获得相关的信息和数值，就可以像柱状图一样来绘制。
如果是针对一些比较专业的场景，如上方的通道直方图，那么就要放弃自己完成的目标，一定要借助相关插件，或者使用 Excel 等工具实现后再导入进来。
箱型图也叫盒须图，和直方图类似，它也是一个二级图表，即它不是直观反应原始数据，而是对原始数据的状态进行转译。图表中的每个箱型反应一组数据的分散情况资料，每个箱型包含下面这些信息元素。
箱型图反应的是一种 “大概” 情况，它不是一种用来进行精确数值展示的图形。箱体主要是上四分卫和下四分卫的区间组成，下/上四分卫指的是 “样本中所有数值由小到大排列后的 25%/75% 的数字”。
这里的排列主要通过 “数值大小” 来决定，而不是分布数据。比如一个班上100个同学包含身高 150、160、170、180、190 五种身高，虽然每个身高包含的人数不同，但 160 就是它的下四分卫，180 是它的上四分卫。
那么160-180身高包含的人数就是箱体本身的区域，上四分卫到上边缘是 180-190 的人数，下四分卫到下边缘是 160-150 的人数。
箱型图可以反应的信息是非常丰富的，它可以非常有效的反应不同数据组的虚实、占比、上下限，可以获得非常多有趣的结论。
在箱型图的设计中，对于箱体和触须的表达要依据数据本身的重要性来判断。有些场景对最大最小值更在意，则箱体颜色就浅，线段更瞩目。而要重点关注箱体的话，则可以对触须进行弱化使用虚线。
同时，箱型图的主要识别信息是 Y 轴的长度，一个美观易度的箱型图，箱体宽度尽量控制在一个比较纤细的水平，不要为了填充画面的空白强行做宽。
相信稍微了解过股票还是基金的同学，对K线图那可就一点也不见外了，下阳线、收盘光头阳、小阳线，开口就是老韭……不对，老股民了。
K线图是箱型图的一个变种，也叫蜡烛图，主要应用在股票、币市、期货等市场的交易数据上。一个K线图包含了阳线、阴线两个大类。阳线代表上涨，阴险代表下跌。
每个类型中，同时还表示当日成交中的最低价和最高价，柱体代表的是开盘价和收盘价。在我国股市，上涨用红色，下跌用绿色，在币市则相反。
K线图实际上动手设计它的情况微乎其微（只用开发好的），我们只要了解它的原理即可。
K线图基本只应用在和理财有关的证券行业中，在会出现 K 线图的图表模块中，必然会出现相应的交互操作。如左右滑动、放大缩小，它是一个具备响应模式的图表类型，包含两种状态。
如果空间足够，则使用箱体和虚线的常规设计。如果显示的对象密集，那么就会以一条直线来显示，忽略掉箱体的部分。
同时，不同的场景，对于阴阳线箱体的展示会有一定区别，除了色彩外，还会应用实心和描边的区别。
因为涉及财产、交易，针对K线图的设计，一定要做好前期的业务调研，以及对比不同的竞品，降低设计出错的概率。
散点图是一个使用也非常频繁的图表，它通过在 XY 坐标轴中添加圆点来表示不同对象的分布情况。
常见的散点图就是对普通二维坐标轴进行 “打点” 的图表，每个点代表统计学中的一个 “样本” 或数学概念中的一个 “定量”，下面我们就用样本来称呼每个散点。
每个样本在散点图中必然包含两种以上的信息，一个是纬度值，一个是数值，这样我们才能确定它在坐标轴中的位置。
当然，针对样本并不是只可以包含两种信息，比如表示班级成员身高体重的散点图，我们可以再引入男女的对比，对散点图进行色彩的区分。再者，还可以添加体脂率，用每个点的大小来表示。
散点图是一个很直观的样本分布图表，它是概率论中做回归分析的主要工具。所以往往我们会看到散点图内出现了一个线段，那条线段叫做 “回归线”，他是通过散点分布情况，计算出来的一条均值线段。这个线段不仅可以大致标识数据的趋势，同时可以用来做概率计算和预测。
回归线包含指数、线性、多项式三种，对应绘制出来的回归线是曲线、直线、还是波浪线。
散点图的圆点可以使用软件的 Symbol 功能进行创建，确保后续可以统一修改配色和样式，尤其是在包含多种色彩的散点图中。
散点图的绘制不一定要完美契合数据内容，但是在大致的分布和数量上要和实际情况贴合。如果仅仅是随意的进行分布、均分，那么这个图表就会显得非常的不严谨和随意，比如下图图表。
地图图表，是将抽象的 XY 二维坐标轴替换成地图类图形的图表。本质上它们也包含 XY 轴，所以一样可以将数据内容进行映射。
最常见的，就是地图散点图了。背景由实际的地图完成，坐标则由经纬度体系来记录。这是可视化设计中非常常见的中心图表应用类型。
同时，背景的地图并不是只包含地理信息地图，还可以是球场、商场、网页、建筑表面等内容。
热力图则是地图和散点图的合体，也是在二维坐标体系中显示样本，只是热力图更注重的是这些样本之间的对比。例如区域的降水量、台风风力表现、网页的点击区域等等。
热力图本质上也是将坐标轴切割成了若干小块（样本），每个小块有一个对应的数值，然后通过算法绘制边缘和不同的渐变。
它也是很少直接通过设计软件绘制的图表，需要借助插件导入数据来实现，我们只需要确认色彩样式即可。
构成图表相对其它图表来说是最简单的一种，包含扇形、环形、饼图、堆叠、矩形树等类型。
前面看到的图表大多是遵循我们小学就看过的 XY 轴坐标系（笛卡尔坐标系）建立的，但是饼图并不需要考虑坐标空间的问题。它是一个依靠角度来反映数据的图表类型。
饼图作为一种常见图表，包含两个大类，一般饼图和环形图。如果没有一些特殊的交互或者复杂衍生类别的话，环形图其实就是饼图中间镂空的版本……
饼图绘制的主要依据是需要表现几条维度，以及它们对应的百分比值。饼图的显示有比较大的局限性，那就是显示的维度数不能过多。控制在 2-9 条比较合理，数量过多就会导致图形失去实际的使用意义。
除此以外，南丁格尔图、旭日图，也是饼图的延伸，通过添加额外的维度或者子分类，对饼图中的每个对象进行额外的示意。
饼图作为基础图形，多数情况下也是由设计师自己完成的。但很多新手没有找到要领，导致做出来图形非常的别扭。我提供一个绘制的简单的思路，那就是通过绘制不同的三角形来拼装出一个饼图。
这类图形绘制的要点是确保三角形在圆心中的顶点时一致的，如果对比例的绘制有比较精确的要求，可以通过 Excel 之类的工具生成一个基础图形做背景，贴着它画即可。
南丁格尔图也可以沿用上面的画法，那就是对每个维度的三角形采取不同直径的圆做蒙版，就可以画出不同半径的占比区域了。
这么做的好处，是将图形的每个维度独立成一个单独的矢量图形，方便我们后续进行上色。
堆叠类图表算是一个相对不那么严谨的类别，因为它多数由其它基础图表发展而来。主要包括柱状堆叠图、面积堆叠图、百分比堆叠图。
之所以把它归类到分布而不是其它大类下的图表子项，原因是只要出现堆叠，就意味着这个图表的核心目的是展示构成内容而不是对比或者分布。
在柱状类堆叠图中，通过将每个柱体切割成不同的更小柱体来呈现子分类的占比。面积堆叠图，则是单纯的把折线图进行填充然后叠加的图形。
而百分比堆叠，虽然看起来和面积堆叠和接近。但它是以最上层数据为 100% 标准，往下的每一级对象都根据顶层百分比呈现的分布样式。
堆叠类图形的设计，最难的不是图形，而是色彩的应用上。之所以说堆叠只要应用就比原先图形的作用更大，原因就是堆叠使用不同的色彩表现层级，对于我们的视觉吸引力远远大于图形本身的轮廓。
而将丰富的色彩无缝拼接在一起，是最容易翻车的配色场景。在这种状态下，建议大家只用临近色来实现下级分类的搭配，千万不要使用色相差异过大的色彩。
而对于面积和百分比堆叠图，都建议在配色的过程中，直接使用带有透明度的色彩。因为这些折线并不一定会完美上下覆盖，当中间出现交汇的时候，不至于信息被遮挡。
矩形树图最初是一个设计用来表示磁盘空间占用情况的图形，通过将一块矩形切割成不同的区域来表示不同维度的占比，以及位置。
虽然也表示占比，但它比饼图类图表表示的信息更丰富。第一点是位置信息和并列关系，比如下面的 M1 芯片的示意图，就是矩阵树图的一种直观体现，在矩形中不同位置应用的不同芯片以及其占用的具体面积。
当然上方是最理想的情况，通常矩阵树图是为了对一些更抽象的概念实现矩阵化的排列。而这个排列中，还有个非常关键的要素是其中的 ”树“ 字。
因为矩阵中的每个切割出来的矩形，都可以作为一个独立矩形进行下一级的分割，实现一个类树状图结构的信息收纳。所以，完整的矩阵树图，是可以支持缩放或点击进入下一层级的。
而使用矩阵树图不使用树状图，原因也在于我们需要表现它的占比，而不是单纯的结构。所以如果只是简单表现层级结构，如企业组织架构、知识点拆分之类的，要用树状图而不能使用矩阵树图。
在这类图表在项目中基本不会独立开发出来，因为其复杂度基本都会使用开源代码。
设计师的主要工作，就是根据对应开源图表，指定配色的方案，切割的边缘大小，以及文字的显示规范即可。
联系图表，是用来展示维度之间联系的图表类型，包含桑基、关系、和弦、韦恩图、依赖关系图等。
联系类图表中，多数是非常复杂的图形，已经脱离直接手工绘制的范畴，所以我们只简单介绍其中几个有代表性的图表且给出设计建议了。
桑基图是一个用来描述某维度值 ”流动“ 到其它维度走势的流动图表。
这是一个比较复杂的概念，比如下面的概念，不同国家人口的流动，人还是原来那些人（数值），但他们以不同的数量比例，移动到不同的国家（维度）。
桑基图的应用，关键在对数值迁移流向的关注上，它适合应用的场景在监控产品用户的跳转去向，货物的外贸出口状况，或类似新冠患者流动城区、地点的表示。
桑基图的数值总量通常是不变的，会包含起点和终点的维度，而维度的长短即代表其包含的数值总量（权重）。
它有非常多的变种，只有借助特定的图表生成工具，才能绘制出曲率、比例精准的流线。
关系图是大家比较不会陌生的图表类型，它在各类工具性软件、网站中都有应用。比如天眼查股东关系图、Wolai 页面关系图等。
关系图中包含了大量的节点，节点之间还有对应的关系，同构线段进行链接。常见的关系图有两种类型，一种是力导图，一种是弧长链接图。
力导图这名字也很难理解，源于力学中粒子存在某种互斥又具有引力的规律，粒子在两种力的作用下从初期的随机性会不断位移趋于平衡有序（读书多的好处？）。
力导图通常有一个起点，然后去关联后续的其它节点，如果节点之间还有关联，它也可以对这些节点的关联做出连接。它不仅表现一对多的关系，也表现多对多的关系，甚至在极其复杂的关系网中可以呈现成一定的强关联 ”聚类“ 信息。
而弧长链接图，则是通过弧线对节点进行关联的图表，它既可以是环形，也可以是水平横线的展示。
和弦图是环形关系图和桑基图结合的图表，它表示结构之间的依赖关系和强度，链接的线段不再是粗细统一的而是具有粗细比例的标识，且维度之间的长度也有表示。
这类图表常用于社会学、生物学等学科的研究统计结果绘制上。如果单纯浏览，看上去非常复杂，所以正确的使用形式是可以进行指定维度的展示和隐藏的。
韦恩图，它是所有学 UI、UX 设计的老朋友了，一个用图形层叠相交来表示它们关系的图形。RGB、CMYK 的色彩介绍里韦恩图的身影必不可少。
韦恩图的使用相比起来没有那么严格的数学运算，它只是一种关系表现的方法，可以对各种无法量化的对象进行关系的陈述。比如，UX 设计师应该具备的知识点……
下面是超人的电话亭团队持续整理收集到的可视化组件库工具网站，以供参考：
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录：
一、设计前的思考
1、设计思维模式
2、设计理念的确立
3、案例分析（9点）
二、设计时需注意
案例分析（12点）
一、设计前的思考
首先需要思考的问题：设计思维模式、设计理念的确立
1、设计思维模式：
设计思维是一套在设计前需要思考的结构化的流程，用来解决以人为本的问题。其目的是把在设计前所遇到的与设计相关的问题结构化，化繁为简，形成一套流程，从而进行有序的思考。
设计思维是一种思维模式和认知方式，其最大的特点是已知需要解决问题的结果，如何在已知最终结果的情况下更好更高效的解决问题是其核心目标。
思维方式的确立，可以有效的为设计做好前期准备，提高设计的效率，更准确的为“以人为本”出发而服务。
作者 Timo Kuilder
2、设计理念：
设计理念是在设计构思前所确立的主导思想，它不仅是设计的精髓，也赋予作品文化内涵和风格特点。
好的设计理念很重要，可以使你的设计拥有属于自己的独特风格。
设计理念必须以人为本，针对用户年龄、职业、爱好等特点，进行整合，根据用户主观方面的个人喜好，从而进行设计。
作者 Timo Kuilder
3、案例分析：
1、专注：确定产品的主要功能，功能的明确可以帮助用户最高效的完成任务
案例1：百度网盘
百度网盘是一款云存储服务产品，用户将可以轻松将自己的文件上传到网盘上，并可跨终端随时随地查看和分享。
案例2：有道云笔记
有道云笔记是一款专注办公提效的笔记软件，支持多端同步，用户可以随时随地对线上资料进行编辑、分享以及协同。
2、特色：每款产品都有属于自己的特色，区别于同行产品的不同之处，结合产品调性设计，不要盲目跟风；它可以是功能、体验、或者是视觉
案例：每日故宫
每日故宫是一款以日历的形式推出故宫藏品的应用，“每天一件故宫藏品”，“让观众随时随地看到故宫藏品”。其主要特色功能就是以日历的形式展示内容，在视觉和图标上也有自己的特色。
3、情感：在设计的过程中，可以加入情感化设计，使用户将情感融入产品中，关系更紧密
案例：淘票票
有趣的文案结合IP可以快速的将用户代入产品中，增强与用户之间的亲和力，有种身临其境的感觉
4、互动：动效的运用可以给用户带来不一样的感官视觉，即使只是一个小小的按钮
案例：最右底部Tab栏切换状态，其互动可以增强用户与产品之间的互动
5、调研：调研可以了解产品所在行业的情况、市场需求、竞争力、同类型产品的优劣势等，从而更好的设计产品
调研方法：按调研途径分为文案调研、在线访问、电话访问和实地调研
调研工具：问卷星、问卷网等
分析工具：Origin是一款常用的数据分析软件，操作简单，可视化直观；SPSS是一款专业分析工具，其功能包括数据管理、统计分析等
6、用户：研究用户特征、细分用户，站在用户角度思考，了解用户想要什么样的产品
用户研究：
是一种理解用户，将他们的目标、需求与产品宗旨相匹配的理想方法，能够帮助定义产品的目标用户群
用户研究重点工作在于研究用户的痛点，包括前期用户调查、情景实验等
作者 Timo Kuilder
7、场景：需要考虑用户使用场景是怎么样的，不同场景功能需求不同，可以用故事板的形式展示用户场景
使用场景：
包括时间、空间、设备支持、社交及用户情绪等，进行应用场景的判断和描述的时候，需要考虑全面，不同的场景下存在着用户不同的需求。
故事板：
故事板也叫分镜脚本，虽然更多用在电影、动画、电视剧、广告等影像媒体的创作前期
故事板工具：Boords
Boords界面简约美观、操作简单，满足制作故事板的基本功能
8、数据：以数据为依据从而进行设计，不做没数据支撑且无意义的设计
数据统计：百度统计、百度指数、阿里指数等
百度统计：全球最大的中文网站流量分析平台,帮助企业收集网站访问数据
百度指数：
百度指数是以百度海量网民行为数据为基础的数据分享平台。在这里,你可以研究关键词搜索趋势、洞察网民兴趣和需求、监测舆情动向、定位受众特征
阿里指数：
是定位于“观市场”的数据分析平台，旨在为中小企业用户、业界媒体、市场研究人员,了解市场行情、查看热门行业、分析用户群体、研究产业基地等
作者 Timo Kuilder
9、少即是多：突出用户所需的主要功能即可，其他功能可弱化或者直接去掉
少即是多：
现代主义设计建筑大师——米斯·凡德罗提出
在设计中：
少即是多就是明确目标，专注地围绕用户目标进行设计，将产品打造得简单易用，同时又能够解决用户的需求
案例：留白
留白是一款提供多种图文排版样式，可以将文字、署名和日期安置在图片以外的留白区域，让你记录的每一个精彩画面都变成有故事的留白卡片
二、设计时需思考
设计时需要思考的问题：
1、简约：简洁的界面可以减少用户发生错误操作，减少认知成本，便于用户了解和使用
案例：字里行间
字里行间是一款文学性非常清新的文字阅读与创作软件，可以让用户静下心来阅读与创作，整体设计简洁，界面结构清晰，减少了用户的学习成本。
2、易用：容易上手的产品才是成功的产品，从用户思维入手，功能一目了然，操作更方便
案例：句读
这是一款不错的掌上语句社区，每天可以轻松的看到丰富的优质语句，解决了用户想要一款可以体验精彩文学内容产品的APP，功能按钮明确，操作快捷，符合用户需求。
3、视觉：产品是否好用为第一重要性，视觉也不可缺少，强烈的视觉可以抓住用户的眼球，给用户留下印象，让用户记住你的产品
案例1：CCtalk
这是一款致力于为学习爱好者打造的在线互动学习平台，叠加图标的运用在界面上特别突出，整体视觉给人强烈的感觉。
案例2：飞猪
这是一款提供机票、酒店、旅游线路等商品的综合性旅游出行网络交易服务平台，金刚区的图标设计得很精致，给人印象深刻，吸引用户点击。
4、色彩：品牌色和辅助色的确立，确定适合产品的品牌色，品牌色可以加强用户对产品的认知
品牌色：品牌色可以决定产品的基本调性，让用户在众多产品中一眼就看到你的产品，容易被记住和识别。
案例：网易云音乐、BOSS直聘
网易云音乐、BOSS直聘的品牌配色都很简单，BOSS直聘的配色只有绿色和白色，配色单一却显得突出。品牌色运用到界面可以加强用户对产品的认知。
5、规范：规范设计的统一，在视觉上起到整齐的效果，保证产品的统一性
案例：QQ音乐圆角的设计，圆角的统一和运用使页面看上去圆润有亲和力，适合听歌的时候那种放松的心情
6、习惯：遵循用户的操作习惯，设计是为了让用户更好的体验，而不是让用户用的不舒服
案例1：淘宝
案例2：京东
搜索栏和分类：搜索栏和分类都是电商类平台最重要功能，两款产品都遵循用户的操作习惯，放置了右上侧，是因为用户已经对这些功能的位置形成记忆
7、安全：在设计中要考虑的重要因素就是安全性，以及操作和选择都是可逆的，可以减少用户的怀疑和心理疑惑
案例1：微信聊天撤回和重新编辑功能
案例2：智行火车票退票功能
案例3：淘宝退款、退货功能
8、人性化：用户可以根据自己的操作习惯、所需功能或者爱好制定界面
案例1：UC头条的频道选择、形象选择
案例2：酷狗新版选择主题皮肤
两款产品都很人性化，用户可以根据自己喜好选择关注的内容和风格
9、反馈：用户操作出现异常的时候，及时给予用户反馈信息，并出现正确引导
案例1：QQ阅读的书架还没有任何书本的时候
案例2：虎课网在没有登录账户的时候出现的反馈界面
案例3：Soul网络异常
案例4：喜马拉雅未成年模式
10、警告框：在紧急中断、需要确认和通知用户的情况下使用，友好的文案，可减少用户心理的不适
案例1：微博在无WiFi网络的情况下播放视频
案例2：腾讯课堂网络异常
11、加载：分为静态和动态两种形式，动态加载可以吸引用户的注意力，减少用户等待的焦虑和无聊
案例1：哔哩哔哩首页和页面加载状态，首页加载是动态，而页面加载的形式是静态
案例2：虎牙直播动态加载状态
12、引导：引导功能，便于用户了解功能和操作界面，产品更新后也可以使用引导来告诉用户
案例1：芒果TV功能更新指引
案例2：酷狗功能更新指引
案例3：每日故宫功能解说和功能更新引导
小结
希望通过这次的UI设计思考总结，让自己变得更好更优秀，总结是对自我的成长和监督，不仅可以提高工作的效率，还可以加强对产品的思考能力。结合UI设计思考过程，体验不同的产品，感受不同的设计，注意细节、认真分析
作者：黑泽双炽 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Neumorphism / soft ui（新拟态也有人叫同化、软UI）是什么？在前一段时间，大家即使没有看过，但是应该也听到过一些关于这种新风格的介绍，或者是在某某趋势中有类似作品的出现，不太了解或者一看而过。简单的介绍一下，标题并非判断结果，而是希望同大家一起探寻一起交流，一起讨论这种风格是否会是接下来的新趋势...
起因是源于2019年11月5日，来自乌克兰的设计师 Alexander Plyuto 在追波和ins上发布了下图的一张作品，作者说明信息：
“让我们想象一下，如果在移动界面设计中，投影的形式发展的更好的话，那将来的界面将会是什么样的，这是我的愿景。”
Dribbble-Alexander Plyuto的作品
目前作品在追波平台收获赞量4000+，浏览量23W+，一路飙升至追波2019年pop排行第一热门的作品，同时在ins上的传播也是异常的火爆，获得很多设计的喜欢，评论顿时炸开了锅，其中有设计师称呼这种风格为“Neumorphism 新拟态”或者“Soft UI 软UI”，于是这种叫法慢慢传开，可能并不准确。
为什么这个风格会火？你怎么认为？
先抛开作品发布的平台带来的热度，很多设计师认为这本身也是一种潜在的趋势，随处可见的C4D的轻质感在不同领域和不同方向的使用，IOS13更新后的部分抛弃了纯扁平，重拾了3D的感觉。它会火的主要还是在视觉上，这种风格刚一出现，它是非常新颖的，在长达半年的几乎高度一致的风格下，它是新的尝试，让人憧憬的方向。
能有不断创新的设计师带给我们不同的设计风格，首先需要感谢，其次再去以个人的视角看待它。那么多风格的作品，那么拟态就变成趋势了？我们带着这个问题，一起继续探讨（我们先把代码实现等话题放在文章最后讨论）。
带着疑问，仔细看一下上面的作品，第一眼看有点像早期的写实风格（如下图），接近真实感，有强烈的质感和空间感......但是不同的是也带了一点当前依旧流行的多彩模糊阴影的感觉。我们试着去找一下这种风格的特点有哪些......
IOS 13 图片编辑界面
by Mike | Creative MintsMike
通过观察，我们不难发现这种风格的一些基本特点：
元素并不浮动
元素色彩相对单一，与背景高度统一
左上角亮色投影，右下角深色投影
多以卡片样式出现
更加适合大圆角图形
...
克服恐惧最好的办法就是 —— 临摹它！
这种表现方式，其实并不难，去阅读了几乎全部相关的资料，也去查阅了作者相关的介绍和说明，试着去了解一下这种风格。首先我们先以按钮为例，请看下图：
这三个图标，你更愿意点哪一个？
这是我们比较常见的三种也是相对比较流行的表现方式，我们分别从常规的顶部视角和侧面视角去观察它们：
扁平的：首先在层级上，扁平的通常给我们的感知就是与背景是同为一个平面，视觉层级也没有特别强烈的前后关系（不考虑图标本身），对背景没有太大的依赖，如果本身背景与画面整体背景有区分，色彩就划分了层级。
投影的：带投影的给我们的感知就是漂浮起来的，单独看它，它漂浮在背景之上，与扁平并列看，它还要高于扁平的，通常大家为了突出某些内容，某个模块会去使用这种样式。投影的使用对背景的依赖几乎可以忽略，因为投影除了形状可以调整，包括色彩、大小等都可以调整，且它是无边界的漂浮着，即你可以随意定义它的高度。
新拟态：顶面看，它似乎是介于扁平与投影之间，侧面看，同样也是漂浮的，但是它有厚度却又没有离开平面，它的范围相对于投影的无边界，似乎还有一些模糊的界定。对背景的有一定的依赖，需要几乎相同的色值去实现。
回到上面的问题，这三个你会更倾向于点哪个？当然上面的案例没有示意在不同色彩下的情况，也有认为抛开体感上，前面两张白色背景的已经高于新拟态，因为它与背景的高度融合，在对比度上已经弱了很多。
可能这时候有人会有疑惑，单独看这一个按钮不是很有对比性，尤其是在视觉上体现的也不明显。所以我们简单绘制了一些卡片试试在作为信息承载的时候，这种风格的效果如何，同时也去将不同的样式融合，看看脱离背景的约束，局部是否可用与协调。
我们可以从上图看出，当这种风格用做内容承载时候，不管是文字图片按钮或者图标，仅仅在用做卡片的时候，效果还是蛮好的，它同前面两种风格一样，仍然可以清晰的区别内容层次、间距等，但是亲测如果大面积使用，页面会变的更加复杂，整体的层级较难清晰划分，那么局部使用效果如何？
局部使用在某种特定的场景是可以用的，如下图的计算器界面。在的卡片、按钮、进度条等样式下也能得以很好的展现。但是它比起投影卡片，除了视觉上，点击感、移动效果......差了很多。
看的这里，大家应该会有一个自我评定标准，这应该（目前）不会是一个大趋势，至少明年不会，虽然这种风格很受人喜欢，但是这种风格还存在很多弊端：
首先，除了卡片等样式，它不能有效的提高信息的传达，页面内容密集，过多使用容易导致混乱，如果靠投影的大小或深浅来区分，即使达到效果，画面会变得复杂沉重。
按钮的凸起和凹陷的状态，绝大部分需要通过投影来识别，这是比较困难也是比较严重的问题，这样是几乎很难区分点击的前后状态的。
背景色的依赖太大，色彩对比度较低，相对于白卡投影等形式的应用，目前的样式不能让内容与背景产生良好的对比，不利于信息传递。
实现问题，其实现实难度到还真不难，话筒交给你们......
所以这种风格就凉了吗？
这种风格其实在某些局部地方还是可以使用的，小面积的和其他风格进行混合使用。无数的可能性需要大家去做更多的尝试和创新。通过对趋势的了解，结合我们认知范围内正确的组合和排列，说不定会创造一个意想不到的“船新版本”。
我们只有在这样的思考和创造的过程中，获得更多的灵感。不能不考虑实现问题，但是我们更需要顺应趋势，不管这个趋势能火多久，在将来能否得到应用，只有不断的探索更多更新的东西，设计才会变得更加美好。动起手来吧~
下面还是简单的分享一下实现的方法，并分享一下相关的源文件与作者的源文件供大家学习交流哦！
凸起部分：
第一步：确定配色，最好是浅色或者是深色，选取高光色和投影色（非同色系的不同组合大家可以多去尝试）
第二部：创建对象，更加适合圆角的对象，可以是纯色，或者轻微的渐变效果也更好
第三部：添加投影，投最好是X和Y轴的位移是一致的，至于角度，大家自由发挥吧，这里建议亮色投影和深色投影分别复制一份制作，如果是在同一图层上做，交界处效果不理想，更模糊。
凹陷部分：
步骤几乎一致，投影换成内阴影做对角线的深浅添加可以。
这里说一下，凹陷部分完全按照这种风格去实现，显示效果其实不好，作者包括其他设计师都在这里做了优化，优化后的实现方式上已经不属于这个风格了，因为最后的实现效果，侧面观察它已经是脱离背景的，如果融合背景也可以，只是边界会更加模糊，所以仔细观察作品，细心的同学应该已经发现是如何处理的：其实就是添加一个边框，再让投影充当浅色高光。
作者：Frannnk 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
什么是形式呢，就是组件在相同的功能和元素下，排版、视觉的呈现方式。形式的对比，就是在一个页面中，不同组件的呈现方式上是否能形成差异化，让页面看起来更丰富多元。
分析上方的案例，组件之间并没有拉开差异性，尤其在详情页中，剧情简介和观众影评，影人和剧照，设计形式接近一致，这就是一个不好的开端。
再看看一些拥有相同问题的设计案例：
仔细点观察就会发现，作为飞机稿，不是图片、颜色用得花哨就够了的，组件缺少差异性，设计感就完全无法体现。如果还没法理解，就再看看下面几个案例，是不是就没有形式强行重复的尴尬，表现得更合理：
所以针对作业中的问题，我们在这个基础上进行完善，第一步要做的就是在形式上做出区分。所以我们可以通过以下几个思路来调整第一页：
- 头部分页器和下方的上映/即将上映过于近似，控件形式上需要作出区分
- 图片太多，模块左右边缘都是图片，导致看上去呆板，要减少图片出现的面积
- 底部新闻部分不能继续使用大图模式要作出调整
第二页的调整上，主要在下半部分
- 演员和剧照应该有更加明显的差异
- 评论和上方的简介这两个不同的组件，形式上却看起来完全一致
通过原型上的调整，就可以得到一个初步改版的样式，各个组件之间保证足够的差异化和识别性，可以观察看看是不是比原来的页面更合理了。
色彩对比是很关键的对比，色彩决定作品给人的第一印象。那么如何为色彩做出对比呢？无非就是鲜艳对比浅色、暗色对比亮色、暖色对比冷色，不用特意套用配色的理论，用比较直观的感受判断就可以。
开始配色的过程中，我们首先需要确定主色和背景色，原图中的主色棕色和背景色白色，搭配起来的效果给我们的感受并不强烈，所以我对原色的棕色做一定范围的调整。
然后把主色添加到原型中，并为相关的一些元素添加合适的辅助色。先看第一页添加后的效果。
然后我们再为原型增加配图，这里要重点关注，以 “作品” 角度切入的话，配图也是整个界面元素的一部分，包括它使用的色彩。如果一个界面中出现了多处需要应用配图的地方的话，那么不同的模块所使用配图的风格和色彩，也应该有一定的对比，而不是一种风格撸到底的。比如还是之前的这个错误的案例：
所以根据这个原则，我们加入配图后再看看效果：
如果头部我们用了色彩主体比较强烈的配图，那么在下方就应该用比较平淡简约的，做出明确的对比。
在第二页中也应用一样的方法，那么思路如下：
- 头部作为权重最高的组件颜色要更突出
- 头部背景和封面的颜色应该具有更大的对比，并能让文字更容易识别
- 头部、剧照图片较丰富，所以在影人和用户头像中应该使用更简单的配图
整体增加配图后的效果：
到这里已经有了大致的设计效果，已经可以明显感觉到比之前的设计有更好的提升，但是，对比不是到这里就结束了，我们接着往下做。
文字对比是最容易被忽视的细节，很多设计师都认为文字只要看得清就行，样式变化越少越好，这是非常错误的思路。
文字样式的多少主要取决于文字段的类型和需要重点体现的内容数量，而不是没有理由的精简到最少。例如看一篇排版成熟的期刊或是论文，其中标题、副标题、正文、引用、标注等作用不同的文字段，都会有不同的样式来帮助我们去区分，如果从头到尾出现的所有文字都应用一样的格式，那么就毫无可读性。
文字的对比，主要通过以下几个属性表现：
- 字号
- 字重
- 色彩
即：越重要的文字字号越大、字重越高、色彩越深，权重越低的则反之。
回到我们的案例，在原型阶段，其实我已经对文字做出了简单的对比处理，下面我们要进一步细化这个步骤。
修改的分析大致如下：
- 分页器作为权重最高的文字段，所以模块标题不应该比它更显眼
- 多段文本比标题类文字权重低一级，可以统一它们的样式并比标题稍弱
- 注释类文字比多段文本再弱一级，用较低的灰度
- 为评分、点赞数、展开等有“特殊性质”的文本增加色相
然后我们可以看看下面修改前后的对比：
通过正确细化文字的对比以后，就能真正让页面精致起来，具备丰富的细节。当然，对于文字权重的安排和思考会根据不同的思路和产品需求得到不同的样式结果，但绝对不能忽略这个过程。
通过正确细化文字的对比以后，就能真正让页面精致起来，具备丰富的细节。当然，对于文字权重的安排和思考会根据不同的思路和产品需求得到不同的样式结果，但绝对不能忽略这个过程。
投影的使用既是视觉样式，也是一个用来制造景深的技巧。只要在一个扁平的界面中，为任何一个元素添加了投影，那么这个界面就存在了上下的空间关系，处于上方的元素就会得到凸显，例如苹果官方应用中的案例：
既然是空间关系，就要有前后的落差对比，我们要为最重要的元素增加投影，而不是把它当成设计风格进行统一的添加。所有元素都带上了投影，就没有了对比，可看性也会大打折扣。
所以，在这些页面中，需要突出的元素分析如下：
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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咨询、用户体验公司、软件界面设计公司
一、官方规范
对于刚开始思考 UI 元素尺寸的新人，通常第一反应都是去看官方规范，新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置，只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上，这些规范并不能帮助你们解决这个问题，因为设计规范涵盖的内容远远比这些复杂，比如我们之前翻译过的 iOS 规范。
我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸，最好的方法就是去下载它们的官方 UI-Kits，如下图的安卓组件库所示。
官方并不会提供一个列表，逐一罗列每个元素的长宽和其它参数，所以想要弄明白参数的问题，要自己在这两套素材库中选中元素才能查看其尺寸。如下图左侧这个按钮，我们就能看见它的各项属性：宽 359pt、高 57pt、圆角 14pt；右侧的 Alert 提示框则宽 270pt、高 230pt、圆角 14pt。
因为 iOS 组件库下载下来的都是 dmg 格式的文件，很多 windows 用户不知道该怎么打开它，这里只需要百度搜索「DMG 提取器/查看器」就能下载到专门的解压工具了。
在初期，我们想要设计出符合官方规范的界面，就可以严格照搬官方的元素设置。但是，即使官方的源文件所包含的元素及字体已经非常多了，在实际设计过程中，还是会出现它们无法覆盖的元素类型，需要依靠我们自己去给出尺寸。
还有如字体的应用，官方源文件使用的语言是英文，光是官方应用的两种 SF 字体，就包含了十几种字重，所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下，我们是不可能照搬这种规范的！
所以每一个学习UI设计的新手，都必须要明白，官方的规范终究只是一种建议，我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容，我们是无法设计出有趣个性化的界面的，比如下面这几款已经看不到 “ iOS 设计 ”的应用。
官方的参数决定我们设计的下限，当你不知道该怎么做，或者设计的目标就是以系统原生的体验和视觉为准，那么照搬就行了！后面文章要说的，就是脱离开这些束缚之后，该怎么自定义 UI 元素的尺寸。
二、尺寸设置原则
UI 和平面不一样的地方，就是极其关注元素属性的具体数值。平面的排版无论是海报或画册，使用百分比、目测的形式就足以让我们做出很多优秀的作品，无需紧盯着其中出现的每个元素的长宽高的数值。而 UI 的设计中，无论字体、图标还是按钮，都需要我们严谨地定义它们的长宽高，如下图设计一个按钮的操作：拖拉出矩形之后，我们依然需要到属性设置的对话框中去输入精确到1pt的数值。
这么做是因为在电子屏幕中，图像的呈现是由屏幕中的像素点来完成的，像素点是最小的显示单位，一个像素只能显示一个颜色，所以如果设置了带有小数点的数值，那么这个元素的边缘就会虚化。所以为了避免这种情况的出现，我们就得用整数来定义元素的长和宽。
这当中还涉及到不少比较复杂的屏幕显示原理问题，尤其是和像素倍率相关的基础知识，我会在另外的文章里分享。
需要注意的是，文章中出现的所有尺寸数值的单位，默认以 iOS 官方规定的逻辑像素单位「pt」为准，即 XD 和 Sketch 默认画布的单位，若在 PS 中设计需要在这个基础上乘以 2。
只有分隔线，是唯一可以不使用整数的特例。因为 1pt 的分隔线看起来会非常粗，一点也不精致，感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔，再导出到手机里观看效果。即使是官方应用，也主要使用 0.5pt 的线条做分隔。
无论是在 iOS 还是在 Android 的规范中，都提到过使用 8 x 8 的网格做辅助，这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。
iOS: 使用 8px 网格系统：网格系统可以让线条和图像内容在所有尺寸上保持清晰，无需太多的修饰和锐化。将图形边界对齐到网格上，减少按比例缩小图像时出现的半像素和内容模糊的情况。
Android：所有组件都与间隔为 8dp 的基准网格对齐。排版/文字与间隔为 4dp 的基准网格对齐。在工具中的图标同样与间隔为 4dp 的基准网格对齐。
实际上，我们在真实的设计环境中，建议大家使用 4 的倍数作为一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我们就可以使用一般的偶数如18、22、26 等。
以上就是我们一开始要建立的元素尺寸原则，精简完即：
使用整数，只有分隔线可以使用 0.5 的小数
使用 4 的倍数，根据实际情况可以切换成一般偶数。
有了这样的原则，并养成习惯，我们就能在每次设计前对元素尺寸有个大致判断，然后再根据需要按 4 的倍数调整
开始我使用 280pt 宽，44pt 高的尺寸，但是觉得有点僵硬，太正式了！这时候反思认为应该是输入框太矮导致的，所以高度上改成 44+(4x2)=52pt 。这时候又觉得太高了，实际输入内容也没那么宽，于是再对高减 4，宽减 40，获取最终结果。
所以，因为这样的操作原则，决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的（拖动效率太低），而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。
这里要声明，在我的描述体系中，控件指的是：界面中最基本的交互单位，如按钮、滑块、开关、分页控件等，更复杂的如动态卡片，功能快速入口等，就归入组件中，便于我们理解。
下面，我会根据前面定义的基础原则，分别讲解控件应该使用的尺寸范围。
一、按钮 ( Buttons )
按钮是界面交互操作中使用最频繁的控件了，当然按钮呈现的形式也多种多样，比如可以是文字、图片、图标、卡通形象等等。在这里，我们只聚焦于矩形的基础按钮。
在进入具体参数的讲解前，要先理解一点，按钮实际上是所有控件中最复杂的一个。并不是因为在设计样式上复杂，而是因为按钮承载了最多的产品诉求，权重差异极大，例如看下面的案例。
在上图里，可以点击的东西不少，我们只说外观是标准样式的按钮，就有 9 个。而这里面，权重最高的必然是 “加入购物车”。权重最低的，则是前往新品页。
要定义按钮尺寸，我们首先需要整理清楚不同的按钮在界面或整个应用中的权重。尺寸和权重是成正比关系的。当然，颜色也是对重要性表现的关键因素，不过不在这里展开。
按钮高度
当我们设计按钮时，优先从高度入手，再去定义宽。为了便于新手理解，我首先从高度上来匹配权重，分成高、中、低三类：
- 高权重：40-56pt
- 中权重：24-40pt
- 底权重：12-24pt
高权重的按钮，类似登录页的注册、登录，购物详情页的购买，流程页中的下一步，它们的最小高度应该从 40pt 开始递增。低于这个数值，那么按钮就很难在页面中起到视觉支撑的作用，因为会感觉到它太细了。
中权重的按钮，类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高的交互频次，所以我们必须得保证它易于点击。24pt 是在我经验中便于点击得最小尺寸了。这种按钮通常是组件中的一部分，不像层级最高的按钮常常是处于一个孤立的空间，所以高度如果超出 40pt，就会对当前模块产生直观的破坏。
低权重的按钮，就类似查看更多、标签、详情等类型，相对于交互属性，这类按钮具备更多的提示属性，只要让用户能看见，又不需要太显眼。尺寸不大于 24pt，能容纳内部文字或图形元素即可。
按钮宽度
主流的按钮都是横向的长方形，正方形的也有，但就是不能变成纵向的矩形。
按钮的宽度主要和内容挂钩，内容数量越多，按钮自然也就越宽。唯一的例外，只有高权重的按钮，可以无视内容的长度。因为它们需要更多的区域，往往都是撑满屏幕内容区域或横跨屏幕的，可以特殊处理。
普通按钮，左右边界与内容的距离过大，就会让按钮看起来非常的不协调。所以我们要根据内容的长度来设置按钮的宽。左右间距的大小，应该小于或等于上下间距的 2 倍。
按钮圆角
最后，按钮尺寸还有一个属性，就是按钮的圆角。矩形的四角有三种类型，即直角、圆角和半圆。
为矩形设置圆角，是为了让按钮看起来有一定的圆润感不会显得太尖锐锋利，这种圆角的数值要给得更加谨慎，只要超出了一定的范畴，就会对视觉的和谐产生影响，我习惯称呼为——半圆不圆，如下图右侧的错误案例。
所以，我们在设计圆角的过程中，一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围，小于等于高度的 1/4。例如，一个 24pt 的圆角矩形，圆角的尺寸就应该不大于 6pt。
以上就是按钮相关尺寸定义的说明，当然，在真实的设计需求中可能遇到很多无法满足的情况，这就需要大家多做尝试了。
二、输入框 ( Text Fields )
输入框也是比较常用的控件之一，它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框，以及首页上方的搜索栏了。
输入框的高度，常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤，比如我用下面学生的案例做个演示。
三、步进器 ( Steppers )
常见的步进器，就是输入框和按钮的结合。左右有两个用来增加数量的按钮，中间是允许我们直接键入数字的输入框。在尺寸上，它也介于两者之间，高度在 28-40pt 之间。下面我再用学员的作业做次演示，当低于 28pt 以后，就会发现在屏幕中的占比实在太小了。
步进器中常见的错误，是在我们在绘制左右两个按钮，设置外框的圆角时，并没有合理的去掉内侧的圆角，这是绝对不应该忽略的细节。
四、下拉菜单 ( Dropdown Menus )
下拉菜单要注意它具有多种状态，默认、展开和选中。默认状态与输入框类似，主流的高度也使用 36-56pt。但是，当菜单展开后，下方多出来的选项菜单，就值得注意了。
菜单的宽度正常情况下与默认状态相同，而高度根据里面包含的选项数量决定。单行选项的高度，不大于默认的选项框。但也不能过小，新手很容易在弹出菜单中设定过小的高度，使个控件看起来会非常的别扭。
五、开关 ( Switches )
开关也是按钮的一种形式，通常出现在设置页的列表中，上方就是它主流的几种样式。在设计开关的时候，要先确定一个矩形区域，高度使用 24-32pt，宽度则用 1:2 的比例。如高度使用 28pt，那么宽大致可以使用 56pt，之后再将其他细节填入。
六、滑块 ( Sliders )
滑块形式接近开关，通常在中间有一个操作节点，下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。
节点如果做的太小，不仅会显得难看，而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下方的横线，宽度由所在内容区域的宽决定，高度一般在1-4pt 之间。
七、页面指示器 ( Page Controls )
指示器用来展示元素序列，虽然在 APP 中没有太重要的作用，但既然我们加进去，就要让它看起来和谐。大多数人在定义指示器时，不是太大，就是太小。可以只从后面提供的尺寸中选择，就能保证指示器的尺寸不会出错。
指示器主要是圆形和矩形两种形式：
- 圆形：8、10、12pt ( 直径 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示红点 ( Badges )
提示红点也是大多数应用会使用的一个控件，它的大小应该在 24-32 pt 之间。作为一个圆形，这个控件设计起来很容易，但设计师往往忽略一件事，那就是如果中间的数值超过 10 变成 2 位以后，要怎么处理。
在设计这样的元素时，我们要用一个矩形元素来表现，即画一个正方形，然后将圆角设成最大，那它看上去就是一个圆形。那么每增加一位字符，我们就需要为这个矩形增加该字符的宽度，可以用左右间距判断。
因为相同字号下，不同英文、数字的宽度都是不一样的，所以我们要根据实际输入的字段长度去决定圆角矩形的宽度。
九、分页控件 ( Tabs )
后一个控件，就是分页控件了，安卓中的 Tabs。这个元素在设计时也受到排版空间的影响。较为宽松的排版风格，高度就比较大，若拥挤则反之。下面是高度的取值：
- 高权重：40-48pt
- 低权重：28-36pt
分页控件主要应用在头部和页面中部的组件中，如下方的案例：
虽然很多时候分页器没有背景色，但是背景的矩形框是必须画出来的，即隐藏填充和描边，这样我们就可以通过垂直居中的方式，来确定中间文字的位置。
一个完整的分页控件，里面会包含两个或以上的选项，所以定义每个选项的宽是必要的。通常，我们有两种定义方法，一种是选项少时，直接进行均分显示，另一种是选项较多，采取定宽模式，宽度最小建议在 64pt以上，才不会显得过度拥挤。
分页控件选项处于选中状态时，有的设计是修改背景色，有的是修改文字属性，但今天最常见的就是加入下划线。这个元素如果定义得不好，会让整个控件看起来非常粗糙，它需要在样式中能起到画龙点睛的作用。
下划线分为两种，一种是贴在控件底部的，另一种是在文字下方悬浮的。两种方式线条应该使用的高度都不应该大于 2pt。宽度的话，前者和每个选项背景区域相等，后者则可以在 8-16pt 间（小于文字总宽）。下面是正确设计效果：
十、尾声
前面说到了不少控件的尺寸，那么真实应用的效果会如何呢？下面我就用原型的方式，不考虑样式与色彩将它们组合到完整的页面中去。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( 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咨询、用户体验公司、软件界面设计公司
关于比较
审美是一个宏大的话题，无论是文学、影视、视觉、时尚等我们都可以审视它们的 “美”。不同领域的 “美” 有不同的形式，不同的立场，不同的角度，不同的原则。
在这里，我们不谈具体某个领域审美的规则和方式，我们来讲讲提升审美的具体做法。
讲一个例子，在国内，我们普遍觉得女生在对穿衣打扮的审美上比男生更优，对于其它经过设计的事物所展现的审美也比男生更好。这种差别在高中时期便逐渐放大，在大学中就能明显得感觉出来这一点。
这是由于基因天赋论导致的吗？
是也不是。女生爱美这点是一个既成的事实，有比较大的先天因素，而因为对美好事物的追求比男生更强烈，所以在审美上整体大于男性。
但大家要注意，这个因果关系的模型太过简陋，我们要进一步来分析为什么对美好事物的追求就能导致审美上的差异，这就是我们提升审美的关键，先从衣品讲起。
原因1：
基于对美的追求，女生往往会花更多的时间在穿衣打扮上，也就意味着要购物。无论是在商场还是淘宝，女生逛起来的热情与时长都远远大于男生，这造成了女生在查看数量上也远远大于男生。
这就和很多设计前辈告诉你要 “多看” 的做法是一样的，通过量变引起质变，只要你看的够多，审美自然就可以提升了。
这话说的颇有道理，但依旧在推理上站不住脚。因为，量变为什么一定就能产生质变？这个变化的逻辑依据是什么？在青铜段位里打了一万盘，也不代表一定能打进最强王者不是。
所以，这就是要引入第二个原因，关于对比。
原因2：
女生逛街能逛这么久，往往在除了看以外，还会做一件事，就是大量的试衣服（此处被我言中的女性同学可以点个赞让我看见你们的双手），经常抱了一整箩筐的衣服进试衣间，在里面对着镜子鼓捣摆 Pose 大半个小时，然后才能挑选一两件自己喜欢的出来，或者干脆一件也不要。
嗯，不要问我是怎么知道的……
在这个过程里，就发生了提升审美中最重要的一环 —— 对比。通过大量的对比，来找出好看的、高级的、适合自己的衣服。也因为对比，女生们就通过实践来了解到，什么样的衣服是好看的，什么样的是丑的不适合自己的。
这个过程实际上收窄了选择的范围，比如一个个子比较高挑五官比较立体的女生，是很难在比较过后还会选择那些可爱、少女、小鸟依人的设计。很可能会偏向运动、男友、中性等风格。
而在有了具体的偏向以后，她们依旧会深入到这个范围，继续观察、尝试、对比，然后再次提升对这些东西的理解和审美。
所以，看吧，审美的提升第一步就是这么简单，通过大量的观察，然后对比和筛选，就能非常直接的提升我们的审美，这个提升的过程完全依靠的是人的主观能动性。
日常生活中我们遇到的绝大多数某些人审美比自己更好的人，都是因为他们在某些方面看过的，比较的比我们更多，而不是依靠天赋的加持，这个思路落实到创作中也一样。
当然，我丝毫不怀疑人类的历史长河里，有极少数人打娘胎里就因为染色体中某些基因片段神秘的律动，而获得了独特的审美与创作天赋，但那始终是一个可以忽略的概率。审美的提升是个人主动的行为，不要祈祷上帝在你身上投的骰子能得到你要的结果。
即使抛开这群有 “天赋” 的神仙，也依旧还有很多第二梯队、第三梯队的老法师们通过奋斗逼的经历功成名就不是。
所以别这么自恋总要搬达芬奇、毕加索、梵高等人举例，每次忍不住想要把锅甩给天赋前，就问问自己钥匙配嘛？
什么？您配？
您配几把……
具体案例
不正经到此为止，正经脸……
既然说了那么多关于比较的问题，空口白话难以令人信服，所谓没图我说个……锤子。因为很多新人都会说，你觉得大多数设计案例看起来都挺好，觉得挑不出什么毛病啊。
所以，下面我挑了几个与设计有关的方向，并找了一些案例出来，你们来看看同类型中，哪一张图是最优的。
而没被选上的那些，对于你选出来的图而言，它们当然都是有 “问题的”。
人像摄影
美食摄影
室内设计
产品设计
海报设计
管理界面
UI APP 界面
小结
审美提升的第一步，就是从对比开始，因为这个世界对所有事物的评判，都有不同方向的两个极端。善恶、美丑、高矮、胖瘦，是对立而相互依存。
就像左拉的《陪衬人》中所讲的：
“……另一个却总是奇丑无比，丑得刺眼，使路人不禁要看她几眼，并且拿她和她的同伴作个比较。要知道，你上了圈套。那个丑女子要是独自走在街上，会吓你一跳；那个相貌平常的，会被你毫不在意地忽略过去。但当她们结伴而行时，一个人的丑就提高了另一个人的美。”
之前我们讲了关于审美提升的第一步对比，但是我们留了一个疑问，为什么依靠对比我们可以提升，或者只靠对比我们就一定可以提升审美嘛？审美提升起来就如此容易？
当然不是！
对比的过程只是表象，我们还要追究深层次的原因，那就是“推理”。
在系统性提升审美的道路上，最大的敌人就是——主观感受。因为无论我怎么解释和审美提升相关的方法，总有人会觉得它就是依靠个人审美，不同人审美不一样，总能找出有的人就喜欢网红脸但看不上汤唯或者高圆圆的案例。
没错，每个人都有自己的审美，无论喜欢什么稀奇古怪的东西都可以，存在即合理。但是，设计师该拥有的审美是不能这么随意的，因为作为专业人士，我们的审美就要符合 “专业” 的要求，即通过客观标准来评价事物的内在价值。
比如茶、酒、咖啡这类饮品，都已经拥有非常成熟的市场，会根据产品的价值形成对应的价格。而有趣的是，这些饮品都不是甜的，都不符合我们本能的喜好。所以，还有很多人不接受它们，只喜欢带有甜味的饮料。这种个人的选择上，任何人都可以偏爱一杯 1 元不到的雀巢的速溶拿铁，厌弃红标瑰夏冰滴，但无论你怎么想，也无法改变它们价值不对等的事实，瑰夏手冲有远远超出速溶的口感和品质。
但超出的部分在哪里？答不答得上来，就是内行和外行的区别。
内行经过专业的训练可以品尝出其中蕴含的风味、口感，解释它们与产地气候的联系，储藏运输的条件，以及冲制过程的步骤。但外行往往只能给出好喝、甘甜、顺滑、难喝、太苦之类零碎、没有体系的评价。
如果设计师对设计相关的作品只能做到和外行一样的水平，那么他也只能是设计师中的外行，并且缺乏成为优秀设计师的必要基础。
所以，接下来我们来探究一下，作品的评价为什么重要！
丹尼尔·卡尼曼的畅销书《思考快与慢》中，将我们的思考方式简单的划分成了两个部分，用了非常简单粗暴的 “系统1”、“系统2” 命名。简单概括它们的含义，就是系统 1 是联想式思维，系统2是规则式思维，也可以看成是直觉与慎思的区别。
先说系统1，直觉是我们大脑对日常接受信息简化处理的产物，我们的大脑就像处理器一样，每天都要面对海量的信息通过视觉、味觉等五感导入，如果它没有任何区别的对这些内容进行深度、缜密的分析，那么它一定会超负荷运转并最终自我毁灭。
所以生物的演化，让我们的大脑进化出了一套可以对信息进行过滤和简化的系统，格式塔心理学中关于视觉对物体简化、完形的理论，也是由其产生，这就是我们对很多事物下意识反应的来源。比如在走路的过程中，看见一辆自行车直挺挺的从远处像你冲过来，那么你会马上感觉到危险并往某个方向规避，整个过程会在不到1秒的时间内完成。
而系统2，就是对事物进行逻辑推导的深入思考，如果用它来处理危险的事件，那么结果可能是我们先判断这辆自行车行驶的轨迹并得出它前进的方向与我站立的位置相交，并且它的时速约为 40km， 在撞到我的时间还有3S，如果以这种速度撞在我们身上，大概率会发生……
“BONG～”
那就不用想可能会发生什么事情，你已经被撞飞了，可以直接得到结果。类似的事情还有很多，无论是对与危险的，还是日常事务的作用，系统1都发挥出了极其重要的作用。也因为它的有效，而导致我们对它依赖过度。所以，很多人在对于美丑的审视上只依靠系统 1 来完成，而不会深入去思考各中原由。
系统 1 对美丑的判断，是个人的，但它并没有 “审” 的过程，专业的分析也就无从谈起。斯洛曼和费恩巴赫所著的 《知识的错觉》 里提到：
"直觉给予我们一个简化的、粗略的，而且通常足够好的分析，这让我们产生错觉，自以为所知甚广。但是当我们慎思时，我们才意识到事物实际上何其复杂，我们真的只是略知皮毛。"
审美和品尝美酒、咖啡一样，需要通过了解专业的知识，培养系统的分析方式进行刻意练习，逐渐摆脱依靠我们直觉做出的不可靠的判断。
因为任何优秀的设计作品，在创作过程中都不可能是随性而为的，都是经过创作者深思熟虑后的产物，我们对优秀作品的评价，就是通过专业的知识对其创作逻辑进行推导，哪里有亮点，哪些是败笔，都是清晰可见的。
它不仅帮助我们判断别人作品的优劣，也可以分析我们自己作品的不足，从而得到改进的思路。所以为什么说审美要先于实践，如果连什么是好的都不了解，自己设计出来的东西都不知道如何评价，又谈何进步？
在我自己的教学经验中，这个问题所表现出来的差异就很有意思。如有一些审美能力较差的学生第一次设计 Banner ，花了非常多精力和时间，自我感觉不错，但是作品质量极差，会在得到否定的评价以后表示诧异和茫然，因为他们已经预感应该得到赞美与肯定。而审美较好的学生则是在完成作业以后充分的发现自己设计的东西和较好的作品之间的差距，那么他希望在我这里获取的，就是如何缩小这种差距的具体方式，而不是对其作品做出评价，因为他们自己也会觉得作品质量差的没评价的必要。
但不幸的是，在商业视觉设计的领域中，提升我们的专业评价的能力，并不如其它行业一般有固定的流程和教学，按笔者自己长期的经验来看，如果我们盲目的从艺术、设计、心理多个学科的基础理论开始学起，那提升的速度太缓慢，需要的周期太长，而且有非常强烈的挫败感，如果没有好老师的引导，还容易钻牛角尖误入歧途。
所以，第一部分的对比，重要性才能体现出来。我们要通过实践作为基础，来系统性的提升我们的专业审美能力，通过应用推理的能力，抑制我们无所不在的直觉。
前面扯了这么一大堆，都是在纸面上的探讨，不太接地气，只分析一通原因，和你该如何提升审美没太多关系，这是最气人的。所以，最后一部分，我们来讲讲具体实施的做法。
先声明，审美提升是要通过刻意练习的步骤的，谁也不可能只通过区区几篇文章就以为自己已经明白了，所以需要执行下面这个循环步骤：
• 采集：大量观察和收集作品
• 对比：留下它们中最好的
• 分析：寻找优劣差异的原因
开始前，还要解释一件事，就是我们提升审美都要先从某个点开始突破，从你最感兴趣的，或是工作关联度最高的设计类型开始，而不是无差别的乱看。与美术学相关的所有设计中，底层的原则都是近似的，精通一种，就能更容易理解其它种类的作品。
1.采集
观察的来源多种多样，强烈建议初期只使用花瓣即可，不要分心到太多的平台上，选择太多往往不是好事，会增加干扰，让我们疲于奔命，模糊一开始的目标。
例如首先要提升在 APP 方面的审美，我们先在花瓣中创建一个 APP 的画板，然后搜索 APP 相关的关键字，但不需要关注第一页弹出的采集结果，直接查看 “画板” 选项。
画板是别的用户自己整理的采集合集，我们可以通过封面简单筛选出你喜欢的，然后打开它们，浏览里面收集的作品。
然后尽量按自己最高的要求来找到能让自己觉得满意的作品，再将它们 “采集” 到自己创建的画板中，并设定一个数量，比如采集到500张为止。
2.对比：
达到目标的数量就停下来，因为再采集下去能带来的作用已经非常有限了。虽然采集中已经包含了选择和对比的过程，但我们要更进一步，在自己的选出来的作品里进行比较。相信在完成这个步骤以后，你们已经可以明显感觉到最后 100 张收集的质量是远远高于前 100 张的。在罗子雄 TEDX 的演讲中就说过：你回头看三个月前收集的作品，会发现它们都是垃圾……
更极端一点，那就是我们只在挑选的作品中留下最好的十分之一，听起来是不是很刺激。
也就是我们要开始在自己选出来的作品中，你要删掉其中的 450 张作品 （最好有留底），即使当中有一些你非常喜欢，而且它们都是你的劳动果实。但就因为这样，你才会更慎重的进行比较。因为多数人的采集只是走马观花，后面根本就不会看这些东西。
当然，这个过程推荐用 Eagle 或者 花瓣 PRO 客户端，操作起来会更顺手一点。
3.分析：
在上一步操作里，我们会动用我们脑海里所有关于理性的分析方法来解释它们的优劣，并得出结论，虽然这些想法可能很幼稚或漏洞百出，但不要担心，最后一步就是用来解决这个问题的。
我们捉对挑选一些作品出来，在剩下的作品中和已经被你否决掉的作品各选一张，然后将它们排列到一起，对比它们的优缺点，比如下图是我从我自己画板中找出的近期和早期的采集作品。
专业的分析是怎么得出的？当然不像朱熹提出的 “格物致知” 一般盯着它们思考，就能把设计的理论给格出来，这条路是走不通的，所以才有王阳明 “知行合一” 的教诲。
我们要把对比的内容进行细化，把一套作品看成若干细节的合集，明确比较的目标，这样才能得到理想的结果，比如：
• 字体
• 配色
• 布局
• 配图
• ……
比如我们挑文字出来分析，这时候局势已经比较明朗了，上侧的设计中文字是能被清晰识别的，在不同的字段类型中字重有对应的调整，主次有序。而下侧的文字应用则缺乏对比，部分文字甚至和背景都无法做出区分，且字重几乎没有变化，使用了多种字体没有整体性，导致最后的阅读感受极差。
同理，你可以再试试分析其它几个细节，是不是简单多了。如果这时候你再觉得手足无措，完全分析不出什么具体的东西怎么办？
学啊！
如对比到配色，我们解释不出为什么右图的配色不行，那就针对配色去了解相关的配色技巧、理论，网上可以搜索的分享就一大堆了，比如关于色彩对比、用色比例等等，将你学到的知识现学现用套进这两张作品中，也就可以很快的得到验证。
后面每出现这样的问题，就现学现卖，不仅可以直接提升我们对作品的理解能力，还能巩固我们学过的理论知识。多分析几组对比，你就会发现对于这类作品的审美和理解已经得到了质的飞跃，这时候，你就可以以留下的这几十张作品作为你接受的下限，去收集新的作品，完成下一次循环。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：酸梅干超人 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com