总监吐槽！UI设计作品集别再讲“形色字构质动”了！

最近几年，说不清是从什么时候开始，互联网行业做设计的小圈子里大家逐渐喜欢用"形、色、字、构、质、动"来概括 UI 设计的形式，分别对应 UI 设计的造型、色彩、文字、布局、质感与动效。有些同学喜欢在陈述设计方案、构建设计语言的时候套用这个框架，但我每次看到有人用形色字构质讲方案，都有一种牵强附会的感觉。尤其是造型、质感和构成，因为 UI 的同质化，这几块基本没什么可讲的了。构成按说很重要，但 UI 设计最多也就讲讲栅格吧，质感也很重要，UI 设计最多也就能讲讲投影大小。

我不喜欢"形色字构质动"，不是因为它没有权威的设计理论书籍或者知名设计团队来做背书，而是因为这个框架非常肤浅表面、牵强附会。我不喜欢"形色字构质动"，因为它存在以下几个明显的问题。这使得它仅仅适合用于 UI 设计的入门学习，而不适用于中大型设计方案的诠释和设计作品集的包装等场景。

一、"形色字构质动"浅显，经不起推敲

"形色字构质"是用美术生的语言和视角来理解 UI 设计，美术生可以用它来 UI 入门，但没法用它来进行设计进阶。

我觉得这个事情有点好玩，"形色字构质"本质上应该是用美术的语言来理解视觉设计，结果呢，这个东西在视觉和运营设计中没有得到应用，反而在 UI 设计中得到了很广泛的应用。

这是为什么呢？难道是因为视觉设计师们不像 UI 设计师这么喜欢讨论问题，动不动就进行一次前后差别细微的、需要拆开仔细论证才能发现区别的设计语言改版？

视觉设计师们会讨论造型和色彩，会讨论字体设计，会讨论构图和质感，但不会用"形色字构质"作为框架概括他们的设计。因为视觉设计师有更丰富的平面设计理论做支撑。

仔细看看，"形色字构质动"根本经不起推敲。比如现在我们要用他来拆解或构建一套 UI 界面，那么我们将很快会面临很多尴尬的问题。

1. 形：一套 UI 界面能做哪些造型上的尝试呢？呃，看了一圈，我们只能做个图标，为 button 定义个圆角弧度。但这就是在给 UI 界面做造型上的设计吗？
2. 字：等一下，字不也有造形、色彩吗？他不是应该跟图标一样被对待吗？除了阅读器产品，绝大多数 UI 设计对中文字体的控制都非常有限，只能使用系统默认字体，然后调整个字号、字重、行间距、段间距。
3. 构：学画画的时候讲"构图"，学摄影的时候讲"构图"，学平面设计的时候讲的"构成"，似乎都与 UI 设计里讲"构"时唯一能讲的栅格系统大不相同。
4. 质：质感在这个框架里最像是凑数的。当年做拟物化 UI 的时候质感还是可以讲一讲的，现在扁平化和同质化的 UI 风格根本没法讲质感，最多也就讲个投影咯。
5. 动：动效在 UI 里面确实值得讲一讲的，但尴尬的一幕又发生了：在座的 UI 设计师、UX 设计师，都不擅长动效，只是能做一点点而已。

所以你会发现，"形色字构质动"只是一种解构，是一种没有逻辑又毫无意义（意义很小接近于无）的 UI 解构。

二、"形色字构质"不是一个好的思维框架

辛向阳老师提出的交互设计五要素，"用户、场景、媒介、目标、行为"，是一个好的思维框架。《用户体验的要素》把产品设计划分为战略层、范围层、结构层、框架层和表现层，是一个好的思维框架。英国设计委员会提出的双钻设计模型将设计的过程归纳为调研、整合、构思、实现，将设计的过程划分为两次发散与收拢，它是一个好的思维框架。

这些好的设计思维框架，在提出时经过了反复的验证，在传播应用时在不同行业和地区经过了长时间的实践，最重要的是它们足够抽象，使用这些框架可以帮你思考、解决设计问题。

那"形色字构质"最早是由谁提出来的呢？我找了很久并没有找到有代表性的说法和出处，在百度上搜索到的最早的出处是 2018 年百度的一位视觉设计师的一篇文章《从"形色字构质动"来评价"百度阅读 Pro"的视觉设计》（ https://baijiahao.baidu.com/s?id=1616461343352352439&wfr=spider&for=pc ）——这篇文章似乎并没有什么问题，首先他是用这个框架来"评价"，而不是构建，也不是评审，其次他评价的仅仅是一个产品的视觉设计。

那"形色字构质"能用来解决设计问题，套用到日常的 UI 设计工作中吗？

不能。

因为上面第 1 节提到的一些尴尬， 很遗憾它并不能用来思考问题，因为你一用它来思考，就发现根本思考不下去。同时它也不能帮你解决问题，如果你要为某个产品创建一套全新的 UI，你分别从"形、色、字、构、质"这五个方面去努力，那么大概率会以失败告终。因为这五个方面维度混乱、排序诡异、互相重叠。

所以说，"形色字构质动"并不能帮你解决设计过程中的实际问题，也不能用来做设计方案完成后的设计评审。如果你要做设计方案的阐述，我也非常不建议使用这个框架，因为有很多框架都比它好得多。

三、"形色字构质"把 UI 设计的交互属性进行了剥离，存在严重缺陷

说"形色字构质"不是好的 UI 思维框架，还有个重要的原因，那就是他存在很严重的缺陷。它把 UI 设计的交互属性完全剥离了出去。如果长期用这个框架来思考 UI 设计，那么会越做越局限。

我们这个混乱的行业目前已经成功把 UI 设计与交互设计进行了粗暴地拆分。基于这种粗暴的拆分，UI 设计师似乎更多地只需要考虑视觉表现层的部分、然后跟开发做好协同就可以了。UI 设计等于数字产品的视觉设计吗？肯定不是。

但仔细想一下，数字产品的 UI 设计其实是建立在交互设计的基础上的。用户界面的全称是用户交互界面，所有的 UI 都是为了与用户交互而存在的。而不是像一个平面设计作品一样，更多诉诸于视觉与情感，而与用户的行为不直接发生关联。UI 设计必须要考虑交互问题，从一开始就得考虑。

总之，"形色字构质动"，并不是设计方法，也不是思维框架。而是在设计完成后，对外解释或包装设计时才会用的工具，一个浅显的的工具。需要谨慎使用，或者尽量不使用。

如果你要向非设计专业的人来讲解方案，也许他还有那么一点用处。但如果讲解对象是设计专业的人，那么这个框架可能并不会帮到你。所以如果你要包装自己的作品集，我建议最好不要用。因为现在，它可能并不能起到什么"包装"效果。

作者：柴林的设计笔记