代运营

daiyunying

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

iseeyu3年前 (2023-11-15)代运营147

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

扁平化设计风格是我入行时就接触的风格,并且我对它非常喜爱。这种设计风格让人的视觉非常舒服,我曾一度认为“至简”就是世间万物发展的趋势。

而如今各种设计风格,渐变色设计、2.5D设计、流体渐变设计,孟菲斯风格等,在移动端的设计中流行起来。这些设计风格的流行,很大程度是为了弥补扁平化在一定程度上的单调。

一、问题背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 增强按钮的视觉重量。可以通过渐变,按钮外阴影等样式增强按钮的立体感。
  • 适量增加图标的拟物化,丰富情感。图标过于简化的同时,还会增加用户的学习成本。
  • 轻微渐变。渐变可以丰富页面细节,渐变还可以营造自然中的光线照射感。
  • 卡片阴影。卡片阴影在移动端的使用非常广泛,pc端的卡片阴影同样可以营造较好的立体感。
  • 不用“无竖线”的表格样式,表格是后台系统出现频率非常高的一个组件,有的表格样式为了整体看上去更加干净简约,表格没有竖线只有横线,但是在实际中不如横竖线都有的表格好。
  • 一般UI设计中,除了运营banner中采用对比色,来突出模块,很少用到对比色。在系统设计中,运用对比色搭配,虽然损失整体页面的美感,但是强烈的对比,在实际的操作中将起到好的作用。
  • 注意避免大间距,和较大的文字间距。不同于其他页面的设计,系统设计的界面更加注重实际的操作,比如很重要的一项就是:“在有限的空间中,可以获取更多的内容信息”。

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

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

本文为@运营喵原创,运营喵专栏作者。

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/20705.html

相关文章

西安社保基数2026怎么调?五险缴费比例与避坑

每年7月,西安不少老板会收到银行扣款变多的短信,员工也发现工资条上社保那一栏和上个月不一样。别以为财务算错了,是社保基数又调了。社保基数跟退休金、医保报销、工伤待遇全都挂钩,可很多公司开了三五年,老板也没搞明白它到底按什么算、该交多少。这篇把基数调整规则、五险缴费比例、申报流程和常见的坑一次说清楚,...

西安找达人探店怎么合作?2026流程费用避坑指南

上个月有个开面馆的老板找我,说花了五千块请了个十几万粉的达人探店,视频发了三天,店里就多了六桌客人,其中四桌还是亲戚。这事在西安餐饮圈真不少见。探店看着简单——请个人来拍条视频,发出去就有客人上门。真做起来,坑比想象的多:报价虚高、数据注水、到店没转化。其实探店本身是门好生意,问题在于大部分老板把它...

西安新公司怎么开发票?2026数电票开通实操

公司执照下来那天,合伙人问我的第一句话不是办公室租哪,是客户要发票怎么办。说实话我也懵,脑子里还是抱着税控盘去税务局排队的画面。结果一查,2026年这套早过时了。西安新办企业基本都是直接开数电票,不用买设备,不用跑大厅,电脑和手机上就能把票开出去。这篇就把新公司从税务登记到开出第一张票的流程捋一遍,...

西安企业年报怎么报?2026填报流程与逾期后果

每年1月到6月,是西安企业集中报年报的时候。说它是大事吧,填起来也就二十分钟;说它是小事吧,漏报的代价一点不小。我见过有老板公司开了三年,年报一次没报,直到去银行办贷款被拒,一查才发现自己早就进了经营异常名录,贷款没批下来,还得先花钱找人移出异常。这篇文章就把企业年报这回事讲透:哪些主体要报、报什么...

西安公积金开户流程2026:材料比例与办理渠道

上个月一个做餐饮的老板找我,说公司开了快两年,一直没给员工缴公积金,现在想补上,问代办开户得花多少钱。他问了两家,报价一个八百一个一千八。我说你先别急着掏钱,公积金开户这件事本身不收费,材料备齐了线上就能办,快的当天就批下来。这篇就把西安公积金开户要什么材料、流程怎么走、缴存比例和基数怎么定,还有几...

西安代理记账多少钱一年?2026价格行情与避坑

刚注册公司的老板,十有八九都问过同一句话:代理记账到底多少钱?我接触的西安客户里,有人一年交三百,也有人一年交一万二,差价四十倍,而且两边都说自己正规。问他们区别在哪,多半答不上来,只能含糊回一句便宜没好货。这事其实不复杂,钱多钱少,主要差在税种、业务量和服务内容上。这篇把2026年西安的行情、服务...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片