从入行到如今的这些年中，眼中的设计风格不断变化。本文作者分享了关于政务可视化的页面视觉，我们一起来了解一下。
伴随这些年行业的兴起，从最早的拟物风到现在的内容当道，越来越多的设计师参与其中，为行业贡献着自己的理解；但也发现同质化的现象越趋明显，个人认为这里面有设计师本身的问题，也有行业风气的问题。同质化的现象有很多的组成因素，可能是页面视觉是直接的拿来主义，亦可能是脱离不了舒适圈的习惯为之。
我很担心的一件事情就是我们一味的反对同质化的假，最后会演变成另外一种假。是一味的摈弃，还是部分的接纳，这是一个界限的问题，而这个界限我还没想明白。如今风格太现成，都像麦当劳一样，思想的麦当劳，短暂的吃下去了，饱了，不去想了。这个惯性思维很可怕，最可怕的是可能有段时间自身都意识不到这个问题。
那么如何跳出这个惯性思维？
我这边借用冯小刚导演在十三邀里说的一段话来解释——创作过程太正常很多时候是经验在发挥作用，每次都和自己的经验作斗争，最后可能会出现一个在经验之外又让自己激动的东西。简而言之就是革了自己的命。可能哪天我想明白这个问题，会再写一章如何创新来讲这个问题。
那么本章主要讲我们是如何在前期定义一张大屏的风格？主要可以从几个方面来讲：配色、字体、构图、氛围。
一、定义页面配色
定义大屏配色的前提是对于用户的政务有着充分的调研，明白是主管哪个行业的，分别用对应的色系去定调子。
举个例子，生物医药、环保等行业通常选用能表达健康安全的绿色；公安、教育、政府等通常选用能表达科技未来的蓝色；消费业、服务业等行业通常选用能表达热闹、朝气的暖色调。
它们有个共性就是主色调不管倾向于哪个颜色，背景通常是对应颜色的暗色系。因为可视化大屏使用环境通常是在室内、展厅等这种外部环境比较暗的地方，避免对于观赏者视觉上的不适应。而且这也有帮助观赏者对于数据的聚焦比对的工作，暗色调的背景加上高亮的配色，也容易在界面中将层次做出来，这点特别适用与3D城市的构建，以后我们会讲述如何在城市中做出层次对比的方法。
色彩心理学普遍还是适用于可视化大屏的，颜色对于人意识的倾向性还是比较强烈的。但是需要明确的是在数据可视化领域中，有些配色规则并不适用。
在传统UI设计中我们一般会拟订主色辅色特殊状态色，甚至在灰阶会把标题、正文、背景的颜色区分做全。这样做的好处就组件一致性，给人统一的感觉。
数据可视化一般会定一个主基调，围绕这个主基调会用至少5-6中以上的调色板进行设计。
1. 使用足够并且容易区分层级的颜色种类
假设我们需要做一个政务的可视化系统，在设计初期敲定了以靛蓝（H:200）为主色调的设定。
那么我们会寻找在这个颜色周边的邻近色去做这个靛蓝色调的搭配，比如在青（H:180）和深蓝（H:220），使得整个大面积的色彩整体上过渡会比较自然。
通过对纯度S和明度B的调节，我们可以找到很多色调用于数字、文字、点线面等视觉元素；然后在靛蓝色调的对比色上去寻找用于高亮的展示，比如绿（H:120）这类的，起到强化主色调的层级作用。最后找到靛蓝色的互补色左右的红（H:10）和黄（H:45）用于重点强调内容。主色调的互补色需要少量并且珍惜的使用，需要有但不是大面积得使用。
色彩是为了突出内容的重要信息，请有选择、有策略的使用颜色，切勿滥用。配色没有绝对的好坏，只有在当前场景下是否适合，色环理论只能大致告诉你一些配色的方式，最重要的是靠设计师自己眼睛去感受颜色带来的冲击力。
上述的配色方式仅仅是我们工作的一个惯用方式，不同项目敲定的内容也不同，请灵活使用。
当然我们在这边提及的色调并不是一个确定的值，而是围绕选定颜色周边的一个色域。可能在文字或者数字上会沿用传统UI的规则，保持特定的统一。但是在点线面、配饰、特殊状态的触发等元素上使用这些色域去提高整个界面的层次和细节，使得画面没有那么硬，各个板块之间是有舒服得过渡。这里的色域以前是需要自己将色调于黑白二色融合的渐变中选取不同位置的颜色组成色板，如今AntDesign的轮子比较友好，填入主色就可以对应生成有层级的颜色。
我们上述的配色方案是有倾向观赏展示型的，由于用户使用大屏普遍都是汇报展览并且用户样本容量小。
故在表达的过程中大量借鉴了运营设计的方式方法，因此配色方式存在包容性不够的现象，对于色盲色弱的人群是有障碍的；比如青色、蓝色、紫色在色域展开的过程中，选取其中几个颜色做叠加色板样式时，灰色模式下存在颜色拉不开的现象。可能是“蓝色”是对色障人群最友好的颜色，AntV保留MPC叠加色板，但同时在使用建议中也写明推荐使用MOB叠加色板。
在数据可视化领域中，还需要界定清楚你做的是偏向观赏展示型的还是偏向实战分析型。这两者的区别主要在观赏性的数据可视化往往需要大量的视觉语言去烘托气氛、用辅助性的元素去增强观赏的趣味。
实战分析型的主要是需要消除不必要的视觉杂音、强化传达的力度；因此这就是一个尺度的问题，是偏向品牌创意的手法多一点，还是偏向传统UI的手法多一点，君可自决~
2. 反面案例解析
以下的案例是我自己工作中犯的错误，拿出来共勉（捂脸233333）。
做的时候由于可视化的经验并不是很多，在选用颜色的过程中并没有把颜色的层级拉的特别开，导致长时间观赏容易产生识别不清的问题，进一步讲有可能在比对数据过程中产生认知障碍。
回首一看，中央的核心区插画的比重大于数据本身要表达的内容，出现了喧宾夺主的情况；这也是一些设计师容易犯的错误，需要再次明确所有的手法和表达方式都是服从一个原则，即清晰有效地传达与沟通信息。
设想一下，一个充满数据的界面本身就是会伴随视觉疲劳的。人是有惰性的，会自然的抗拒一些不清晰不明确的展现方式。数据可视化在我们理解中就是通过设计师清晰有效地传达与沟通信息，使人有能力抗拒自己的惰性去从枯燥的数据中分析出超额信息。
二、挑选页面字体
数据可视化和大量数字打交道，选对数字的字体挺重要的。涉及到字体版权的问题请自行解决，在推荐字体之前有两件事情需要注意下：
第一、文字习惯左对齐，数字习惯右对齐。
文字左对齐是人一般从左至右阅读，数字右对齐能够快速识别数据量的大小，容易与其他数据比对。因此在选用数字字体的时候，尽量使用字间距相同的字体（比如Lato字体和DIN字体，注意PS中比对的时候需要选择度量标准，使用视觉的字间距会有问题），这样比对数据的时候字间距相同更容易产生比对结果。
第二、选用数字字体的时候需要检查下常用字符是否有缺失、是否显示正常。
比如钱币的符号“￥”和“$”以及“%”。还有就是“1”和“7”、“0”和“O”这两个需要能够清晰识别。（国外的很多字体是没有人民币的符号的，DIN的0和O并不是特别好识别，故很多公司会自己改良字体满足自身业务的要求。）
我们最长使用的就是思源黑体、思源宋体，开源并且字体库全。缺点就是比较中性，在数字上辨识度不是很友好，因此我们在数字上最常使用的就是DIN字体。DIN 是德国标准协会，Deutsches Institut für Normung 的首字母缩写。1975年起，德国政府把DIN作为国家标准体系，DIN 标准在国际和欧洲范围内被广泛使用。DIN 字体继承了严谨可识别度高，被广泛运用。
DIN也是有缺陷的，支付宝设计师SKY在专栏里也讲过4的开头较大，以及5，6字体的圆形不够一致，7缩小后识别度问题，所以很多公司都会基于这些问题进行二次设计，比如微信钱包、京东金融、百度金融都在一些地方对DIN字体进行了微调后使用。
接下来我们直接推荐几个有风格的英文和数字字体给大家（私货环节！）：
1. 英文字体
1）Futura
Futura这个字体是我自己特别喜欢的一个字体，字体表现很现代，看上去特别利落，继承了包豪斯的设计理念。
2）Optima
Optima也是我个人比较心水的一款，字体充满人文主义。字体本身严格遵循了黄金分割原则，比例优美，字里行间充满了变化。
3）Garamond
Garamond简直就是衬线体之中的典范，就这么说吧，经典的设计中一定会出现他的身影。
4）Bodoni
Bodoni被誉为“现代主义风格最完美的体现”。字体粗细对比强烈，给人浪漫的感觉。
5）Didot
Didot和Bodoni很相似，都是给人浪漫的感觉，不同的是Didot在数字上面做了不一样的处理，两者在电商上使用都蛮多的，一般用做价格显示。
2. 数字字体
1）DIN
DIN被德国人视为“国民字体”，有着悠久的历史。德国的路标和路牌的标准字体就是DIN。其中的4这个设计挺有个性和特点的，容易辩识出来。除了前面说的问题，真的是精准的徳国工艺阿（dog脸~）
2）lcdD
lcdD是常见的电子表数字的字体风格，更加端正鲜明的视觉效果，运用在数字提示等内容上，倾斜风的设计让字体更有自己的独特魅力。
3）Lato
Lato就是那种非常现代科技感的一款，并且具备了很多常用自己的特点，属于那种用了不会出错的字体。
4）Avanti
Avanti和DIN在字形上是很相似的，但是它的字形更加饱满。差异主要在3、5、8这三个数字以及G、Q都做了不一样的处理，上半部较小而下半部较大，多了一些变化和趣味性。这个字体还有一个细体，一粗一细，灵活使用。
5）Tensans
Tensans和Avanti也很相似，如5和8上下部分的比例，6和9的转折以及中圈部分都挺相似的，有点像Avanti字体的加粗版本。但是Tensans特征更加明显，比如2、3、4、7的转角尖锐，切角锋利，具有很浓重的现代工业气息，比较适合速度、刚猛、游戏等主题的设计。
6）Impact
Impact这个字体第一感觉就是厚重醒目，视觉冲击力很强。特粗的笔画、紧缩的间距以及狭窄的中宫，特别适合大标题和醒目的价格展示。
7）BebasNeue
字体字面比较秀长，笔画流畅，简约大方。适用于化妆品、服装等女性向。
8）Niagara-Solid
和上面哪个BebasNeue是有点相像的，字面细瘦，挺拔优美。多了一些衬线体的字重和体势的变化，设计感与装饰感更强，尤为时尚，在女性、文化、时尚类中用的格外多。
9）Gaoel
Gaoel有着Avanti的韵味，但是更加年轻、圆润，令人惊喜的是大写的字母有着统一的特点，特别未来。不过需要注意的是该款没有小写，小写就直接变成如下样子。整体字体设计很圆润，年轻化，可爱非常适合一些偏年轻化的产品，同时字重非常适合金融产品的字重效果！
10）Proxima Nova
Proxima Nova的style还是比较多的，我个人用的比较多还是在它的细体上做修改，比较纤细现代。
11）Gotham
Gotham号称发布会字体，特别现代干净的一款字体，这些年看到的较多是手机发布会的海报设计，纤细的字体压在海报上很有力量。
12）Expansiva
Expansiva也是特别有个性的一款字体，用于做数字的也比较多，目前看到的可视化设计中存在，但是使用量并不多，由于字形骨骼的因素，用于数字上比较多。
三、规划页面构图
讲到设计初期的页面构图规划问题，其实这个构图是服从你的展示方式的，即故事线。设计前期规划阶段，先想好打算怎么表达，再选择对应的构图方式。表达上我们讲究总分主次关系 ，那么构图上依旧遵循这个规则，先具体再抽象。
（一）全屏平铺式
全屏平铺式的构图方式是最常见的一种构图方式，如下图无意中构成横平竖直的辅助线将内容一格一格展现出来，界线清晰分割明确。因此模块之内的内容就会显得格外的清楚和突出，给人一目了然的感觉。注意哦，平铺并不代表完全一个一个格子码好，比如下图中的深红色区域，没有被网格框住但也码的很清楚，浅红色区域中有一对一的也有一对二的对应关系，故此类型的构图中加上这些灵活的变化就会显得没那么生硬。并且这种构图方式是遵循F型网页阅读习惯的，因此重要内容放哪大家知道了吧~
（二）中心放射式
圆形就是一个典型的中心放射式，圆是有圆心的，通过构造不同大小的同心圆起到聚焦、凸显作用。伴随一个一个同心圆自然而然形成放射线，把重要表述放中间，其他表述按照放射线编排起来。引导用户的视线聚集在我们重点突出的功能点上，先主后次，有起有落。
（三）视线引导式
视线引导式主要是依靠点线面的关系形成一条清晰的视觉引导线，引导用户的视线，避免杂乱无章的堆砌。视线流动的轨迹多则是从上至下从左到右移动，故在大屏上从左到右，从主到次，减小用户的负担和阅读疲劳。如下图是我同事做的一张大屏，指标琐碎，每个指标与指标间没有太强的相关性。当时发现大方向上有一定的前后关系，故最后用这种方式把数据串起来。设计稿上需要把样式给全，看上去有点碎，实际开发后效果还是蛮不错。
（四）水平罗列式
水平罗列式的构图方式有点像全屏平铺式，同样是利用人从左至右的阅读习惯。如下图，不一样的是四个大类有明显的前后关系，并且彼此之间存在对比。利用无形之中形成的水平线条把内容串在一起，将同级且对比的意思表达出来。
（五）三角排列式
三角排列式的构图方式，核心思想就是一个稳！从上至下的三角构图，能把信息层级罗列得更为规整和明确。这张大屏是我做的某地数字驾驶舱中的一个分页，用来总览这个分支的三个内容，每块内容上面是政策解读下面是数据结果，清晰明确。
四、营造页面氛围
页面的氛围个人主要认为是通过恰到好处的细节堆砌出来，这些细节要自然合适不突兀，讲究一个“巧”字。对于我来说这些细节就好像欧亨利小说的结局一样，意料之外又在情理之中。不过讲道理这些氛围的东西并没有很明显的一定之规，有些方法在这个场景下合适在那个场景下就不合适了，需要设计师在做的时候不断尝试，也是一个缘分。
抄现实是我们在设计中最直接的也是最常用的一种表达方式，它的含义就是提取现实中存在事物的点线面关系。因此往往在发散思维中找到与主题相关的灵感点后，用方式提取其中的内容后，能紧密的结合主题。它将抽象的主题通过实体表达出来，并以之作为内容信息的载体，能够合适的存在于页面之中。这个纬度的内容我直接举几个案例描述下。
（一）案例-公安项目中的细节
公安的项目是我同事做的，在用户那边得到了一致的好评，并且也是团队前期重点研究的一个DEMO。这个项目好在业务逻辑清晰，并且在表达方式上做到合理合适的程度。如下是项目其中一张大屏的一处细节，需求是需要排列公安系统中处置人员的不同分布，在大屏中也是核心区域。
一般在页面核心区域我们会花点心思将这块的内容做充实做饱和，毕竟第一眼需要留下好印象。设计的时候提取了警徽的基础形状、警徽的构成、胸徽的线条排布、旌旗的基础形状、放射线的构图方式，然后将文案排布形成设计结果。最后客户这边对于这块内容直接过稿，认为设计环节带出了警队的特色，给了高度的评价。
（二）案例-驾驶舱项目中的细节
驾驶舱的项目是我直接参与主导的，当时这个项目的欢迎屏风格稿做了好几版本的，用户一直都不认可。过程中去除主观因素，总结用户对于驾驶舱的认知和理解。客户的需求是驾驶舱需要在“驾驶”的时候，眼中不光有舱内的内涵，也要有舱外的风景。如下是欢迎屏的基础状态（交互操作并未展开），设计的时候提取了汽车仪表盘的基础形状和风格组成、星光点与点的关系、逆光山体风景的天空渐变，然后组合在一起形成设计结果。最后客户这边看到后过稿，这个设计也留到了项目最后。
（三）案例-大佬作品山海经中的细节
如下的作品是behance上一个大佬的作品，作品的名字叫做山海经，我们也是经常拿出来学习参考。在人物设定中，作者将古代的乌纱帽、官服、官徽纹样等内容融入角色的道化服之中，并且角色周边环境中大量融入一些官府的元素，比如官兵举得牌子、衙门的建筑体等。整个作品虽然融入大量的古代元素，但是用赛博朋克的方式表达出来，成品没有一丝违和感。确实给了大家一个方向，原来国风的东西可以这么玩。
总结
1.使用足够并且容易区分层级的颜色去构造页面。数据可视化的项目往往信息的量级是不可控的，准备工作需要做充分。
2.合适的字体能让你的页面事半功倍。挑选字体得对比，确保不同的使用场景下有一致性的显示。条件允许下，针对自身业务场景打造对应的显示字体（羡慕脸.jpg）
3.好的构图可以让表达更上一个台阶。根据故事线的讲述，挑选对应的构图方式，做到从总到分、有主有次。
4.氛围彰显作品的细腻程度。细节决定成败，在作品中增添“巧”的细节，会让观赏者更加投入获取信息的节奏中。
