“视觉设计不仅仅关乎视觉呈现，也需要从信息架构、功能排布等很多方面对产品进行考虑。” 如果身为视觉设计师，只是考虑美学层面，拿到交互稿直接去填色美化，那我们和美工没有区别。

几年前非常流行的解压填色游戏《秘密花园》大家多少听说过，80%的玩家用彩铅涂完都是这个效果；

然而还有另外20%的高级玩家，完成后是这个效果：

也就是说如果在这个游戏里你只盯着每个小小的线框，不对填充区域进行合理的规划和分类，不考虑在前景和背景加以区分，不突破工具的限制，那我们永远都是普通玩家，作品跟别人相比也是平淡无奇。只是一个解压游戏就能看出其中的思考：

填充区域——信息的处理；

前景和背景——明确层级关系；

工具的限制——尝试更多设计形式和技法；

我这里给大家介绍两个方法和一个方法模型能提高我们的设计质量：

这两个是设计原则中比较典型的原则，他们操作简单且作用强大而微妙，合理使用的话可以提升体验。

一、对齐原则

对齐通常容易被忽略，因为它是少数不可见的设计原则之一。作为一个隐藏在后面的设计原则，它以简单但强大的方式操纵和安排UI元素。该原则早年在出版和新闻类型的网站尤其重要，现在更是延伸到了大屏展示类和中后台系统的设计中，合理使用可以大大改善用户的阅读体验。

这里着重讲下左对齐和两端对齐，左对齐字面好理解，两端对齐就是指段落内部的文字、模块之间左右两端对齐。两端对齐即便是工作多年的小伙伴也会忽视，甚至会单独调节字间距来达到效果，但现在只要点击下图标即可。

举一个实际项目中的🌰：

这是一个展会的优化项目，采用横向的三屏展示方式，这是第一屏。我们拿到项目要学会发现问题，其次才能有针对性的解决问题。

原设计稿中模块内的信息之间、内容采用左对齐的方式，但依然给人感觉像是没有处理的信息堆砌，原因就是模块右侧没有对齐并且信息没有主次。

展示类的项目如果信息摆放好后仍有对不齐的情况，有一个技巧就是补充块装元素，在元素内对信息做一下节奏变化。这样以来外部模块清晰整齐，内部信息主次有节奏。

二、格式塔原理-亲密性原则

亲密性原则是指相关联的信息需要看起来更加紧凑， 整个页⾯应该看起来疏密得当，⽽不只是信息的堆砌。

这是展会的项目横向三屏展示的第三屏。先找问题：首先检查对齐原则，左侧两个大模块没有问题；右侧三个模块内部标题和内容分别左对齐，视觉对齐点是一条参差不齐的线，和左侧的两个模块对齐方式就不一致（两条虚线）；

接下来用亲密性原则来检查，在疏密关系的处理上是否符合信息之间的关联度，比如第一个模块中的三组数据是一个整体，相互之间关联应该更紧密，但现在他们之间的距离却大过了和其他模块的距离（序号1>序号2）。

猜测设计师最初的想法是想把这三组数据采用两端对齐的方式盛满模块内的区域，但却打破了亲密性原则。在原则相互冲突的情况下，到底应该以哪种为主? 答案是以信息清晰表达，不能产生歧义为准。所以在这个方案中，两端对齐原则可以暂时舍弃采用其他方式。

“解决问题的方法有很多，根据具体情况⽽进行权衡，原则是信息清晰，底线是不能产生歧义。”

且第一屏和第三屏同时遵从栅格布局：

三、“同心圆”模型

如果把体验设计分为四个维度，最基本的诉求是功能级的，对于视觉设计师来说就是组件规范；再往上就是产品级的，比如我们设计什么功能，要考虑到产品的规范，要和产品匹配；平台级的意思就是操作系统级，比如我们要在什么平台上设计要遵循它的设计规范；最后一个维度就是身为一个人，我们的诉求是什么。

生物个体的能力都是接近的，在进行设计时要遵从这些认知、要符合人的这些本能，换言之就是我们的设计不能是反人类的。

当这几个维度用可视化的方式表示出来，就是这个同心圆的模型。当几个圆对齐的时候，我们进行设计是很顺畅的；当有所偏移的时候，设计过程就会相对痛苦。当其中两个维度有冲突时我们到底应该遵循哪个？当遇到这种矛盾时，追随最本能的诉求。要大胆忘掉内层的束缚，优先考虑外层维度的诉求。

比如像早年的安卓平台的设计，顶部的功能切换操作起来就很别扭，手指触控距离远。用这个模型来解释这个现象，就是生物级需求有所偏离，因此可以对内层圆的部分进行优化。早年时手机尺寸很小，手的触及范围还能到达顶部，所以这个问题不明显。直到后来大屏手机的普及，这个问题就暴露出来了。

再举一个🌰，这是一个给公司高层提供报表数据的优化项目。发现问题：1.设计语言不统一；2.数据和单位的使用不符合认知习惯；在这个案例中着重讲一下第二点。

前期体验过程中发现很多数据存在“5087百万”“162百万”的表达方式，无论是读取还是理解都存在一定障碍。

这是我们日常生活中表示数字的方式：

换一种简写的书写方式，对应到正确的数字，似乎也能理解：

如果再换一种方式来表达呢，虽然单位是统一的，但似乎就很难理解了。平时生活工作中我们不会这样表达，在数字化应用中也不应该这样出现。但这种表达方式恰恰就是目前产品规范——单位的统一。

通过梳理我们发现问题：数据与单位的表达方式不符合日常认知习惯，需进行二次换算；对应到模型上就是产品级诉求导致外层生物个体认知的圆发生了偏离，因此内层圆的规范需要进行优化。

最终的解决方案是数位5到8位用“万”表示，9位以上用“亿”表示。

所以这个“同心圆”模型的目的是能够帮助我们审视自己的设计方案是否合理，能帮我们寻找正确的设计方向。

- 结语 -

“设计师是应该是解决问题和传递信息的一群人。” 那解决问题的前提是要学会发现问题；传递信息——图、色彩、文字、甚至是数字，话术都可以在我们的思考范围内。我们发现问题的过程，本身就是自身提高的过程。

参考：TDW2019腾讯设计周视频-1029