PC端后台系统的视觉设计慎用扁平化风格思维导图

轻涟低眉

2023-03-01

浏览量: 0

PC,

后台系统,

扁平化,

视觉设计

扁平化设计的流行趋势“势不可挡”，越来越多的后台系统也开始使用这种讨人喜欢的设计风格；但是扁平化设计在PC端后台系统的设计上却存在着一些缺陷和不可忽视的问题。

树图思维导图提供《PC端后台系统的视觉设计慎用扁平化风格》在线思维导图免费制作，点击“编辑”按钮，可对《PC端后台系统的视觉设计慎用扁平化风格》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9bee39a0b194a09a4cd42f1ae3bffc2e

思维导图大纲

一、问题背景

之前大四实习的时候，有幸参与了某国企大型系统上线后的用户体验调研，以下简称为“系统”。

系统的迭代相比于上一版本，除了功能上的优化外，在视觉上也做出了非常大的改动；之所以说是非常大，是因为优化后的视觉规范完全扁平化（类似于下图），并且为此投入巨大的精力，不仅输出了全新的UI组件，还为此单独开发了一整套的前端组件。

在收集和分析用户体验的问卷数据中发现：有部分用户表示：“原来的系统虽然很丑，但是实际操作起来却很爽”。

当时我只是单纯的认为：“新系统存在一些功能上的bug，或者用户习惯”等因素的影响，用户才对老系统的操作有一丝留恋。

事情过去许久，直到后来有一天，我遇到一款丑丑的软件“CINEMA 4D”，我才似乎理解当初用户对丑丑的老系统的一丝留恋。

这款来自德国的3D软件，图标五颜六色，对比色的运用使人很难感受到统一带来的舒适，加上内阴影的使用，软件本身充满着厚重的德国工业风，但这款设计风格似乎从过去穿越而来软件，却在实际的操作上有着非常好的体验（除了我，还有身边同事也这么觉得）。

或许是对比色带来的视觉突出、又或是内阴影带来的按钮的真实感、又或是大家对于扁平化风格的视觉疲劳？

但是这款软件真的很“好用”。

于是我开始收集和观察各大操作系统，发现即使Photoshop CC2018版本相比于之前的版本已经非常扁平化，但是在操作界面，具体的按钮和边框依然保持着偏拟物化的感觉。

另外，大家可以仔细观察一下Mac os系统的视觉细节，无论从图标还是到具体的系统界面，完全扁平化是绝对不存在的。

Adobe和苹果这样的公司，在视觉风格的探索上是极为认真和客观的，它们的系统界面也没有完全扁平化。

所以个人认为：之前的项目中将老系统视觉直接改为完全扁平化的风格，设计迭代太过于用力，或者可以说是一种错误的决定。原因就是只考虑到了扁平化设计的种种优点，而忽视了其缺点所在。

二、完全扁平化不适用于PC端的后台系统设计

其实可以对比“移动端产品”和“PC端后台系统”的实际使用场景，PC端后台系统的操作对视觉依赖更多。也就是：用户在使用后台操作系统的时候是长时间持续性的，在使用中，视觉的疲劳会很快降临，“视觉扁平”所带来的缺点显而易见，所以强烈的视觉冲击更加符合之一使用场景。

另外扁平化风格本身有很多优点，例如更加干净和简约，但是扁平化本身却有着一些不可忽视的缺点。

三、后台系统的扁平化设计应该注意

扁平化本身更加干净和简约，但扁平化本身的视觉对比不够强烈，在扁平化的基础上，进行视觉上的优化，才是后台系统UI设计正确选择。我们可以借鉴过去系统设计的部分元素，例如在扁平化的基础上增加视觉的对比度和拟物感。

PC端后台系统的视觉设计核心：扁平化让系统更加简洁，整体视觉看上去很舒服，但是在扁平化设计的同时，一定要增强视觉上的对比度。

例如我们可以通过以下方式来增强界面的视觉对比度：

以上只是我总结的一部分方法，其实可以按照我上面所说的设计核心理论，将其运用到实际的PC端后台的视觉设计中。

最后：“PC端后台系统”几乎是每个企业或者产品所涉及的，希望本文可以对PC端后台的视觉设计有所参考或帮助。

内容补充（2018.10.25）

有太多的留言说到“后台系统的好用程度更多的依赖功能完整、交互流畅等因素，与视觉设计关系不大”，确实是这样的。本人第一次发文，想用尽可能的文字专门说明视觉设计的观点，而忽略了前提的重要性，所以一定要做下补充，以免文章误导他人。

视觉设计在系统设计中，更像是马斯诺需求上的较高层次的需求，而本文只是针对于后台系统的视觉设计上的建议，实际功能和交互的重要性要远远大于视觉设计本身。但是视觉本身是一个不可忽略的用户体验因素，多数的后台系统都可以通过公司行政命令强制用户去使用，而用户也不得不使用，所以过多的视觉优化其实是一种成本溢出。

不过慢慢开始关注后台系统的视觉设计本身就是一件好事，是日趋成熟化的系统设计的一种趋势。我只是针对之前的工作经验，觉得后台系统在扁平化的基础上应该注意的因素，欢迎大家交流并且指出问题。

双减背景下小学语文大单元作业设计的策略思维导图