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

   2018-12-26 91运营0
核心提示:扁平化设计的流行趋势“势不可挡”,愈来愈多的后台系统也开始使用这类讨人喜欢的设计风格;但是扁平化设计在PC端后台系统的设计上却存在着1些缺点和不可忽视的问题。扁平化设计风格是我入行时就接触的风格,并且我对它非常爱好。这类设计风格让人的视觉非常

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

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

 

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

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

1、问题背景

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

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

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

 

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

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

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

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

 

这款来自德国的3D软件,图标5颜6色,对照色的应用令人很难感遭到统1带来的舒适,加上内阴影的使用,软件本身充满着厚重的德国工业风,但这款设计风格仿佛从过去穿越而来软件,却在实际的操作上有着非常好的体验(除我,还有身旁同事也这么觉得)。

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

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

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

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

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

所以个人认为:之前的项目中将老系统视觉直接改成完全扁平化的风格,设计迭代太过于用力,或可以说是1种毛病的决定。缘由就是只斟酌到了扁平化设计的种种优点,而忽视了其缺点所在。

2、完全扁平化不适用于PC真个后台系统设计

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

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

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

3、后台系统的扁平化设计应当注意

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

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

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

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

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

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

内容补充(2018.10.25)

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

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

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

 

作者:卢瑟

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • PC&手机端用户体验设计分享 by Feat_Soulja
    PC&手机端用户体验设计分享 by Feat_Soulja
    原创/自译教程: PC手机端用户体验设计分享(原创文章) 系统分类:设计文章 -原创/自译教程 -技巧 文章版权:Feat_Soulja 原创,如需商业用途或转载请与Feat_Soulja 联系,谢谢配合! 广州 / 网页设计师 29分钟前发布 前言:继上次分享后已经有一段时间没写文
  • 淡季钻石展位CPC玩法攻略解码
    淡季钻石展位CPC玩法攻略解码
    进入7月份,对于大部分类目的淘宝卖家来说,淡季又到了。7~8月份很多的店铺销售额都存在不同程度的下滑以及流量在不断下跌。因此,很多卖家在直通车或者钻石展位的推广这块都会降低投入,节省预算。那么如何在淡季抓住机会,利用有限的预算来进行钻石展位的推
    09-08 展位钻石
  • 建立高质量的关键词词库-PC端
    建立高质量的关键词词库-PC端
    下面还是自我介绍,老派友可以跳过,大家好,我是五哥。关于标题优化的文章,派代上看到过不少,但是大部分是零散、不系统的,有的甚至是过时的。卖家朋友看过之后去操作,不仅没有帮助,反而会越做越难。所以今天我把(2016年1月初)去阿里跟小二沟通的心得
    09-08 淘宝数据
  • 春款发展出奇招,稳降PPC,飙升ROI
    春款发展出奇招,稳降PPC,飙升ROI
    最近春款发展是众说纷纭啊,有的在上新款,有的在装修店铺,有的在做夏装,有的竟然供货连断了,反正是各种问题啊,直通车也是如此,我的质量得分不行,我的PPC又高了,但是做这么多的目的就是为了提高直通车的ROI,扩大自己的利润空间。ROI是一个所有卖家高
    09-08 质量得分
  • 为什么直通车开不起来?PPC还这么贵!
    为什么直通车开不起来?PPC还这么贵!
    正所谓急病乱投医。刷单不敢再触碰,活动也一时三刻报不了。报了还是得刷,刷了还得抓你。所以导致目前不管是中小卖家还是大卖家都被逼的开直通车去做业绩,一上车之后才发现一个月下来的车费已经远远超过了自己预算的范围之外,而且产出的销售日不忍直视。那
  • 旺季来临,有效降低直通车PPC技巧
    旺季来临,有效降低直通车PPC技巧
    现在刷单卖家也不敢再触碰了,活动一时间也报不了,从而致使中小卖家们无奈只能开直通车做业绩,但卖家同时也发现开直通车一个月的投放预算远远超过了自己预算的范围之外,而且产出的销售日不忍直视。那么面对如此现状我们应该如何去应对呢?首先我们应该了解
  • 墨漓:新品前期做基础销量选PC端还是无线端
    墨漓:新品前期做基础销量选PC端还是无线端
    墨漓原创解答,目前正在征集淘宝天猫的问题,每周一到周五每天都会有五个具有代表性的淘宝天猫实战问答分享,即学即用,全文阅读时间只要三分钟《墨漓解惑原创分享》第1条问题:新上的一款宝贝刚好两个星期,做了三十笔基础销量,实际成交只有两件,现在该产
    09-08 产品销量
  • 品牌词重合PC端展现规则
    导语:搜索中常见问题:一个店铺中,如果某个产品有很大的流量,单数转化率低,这种单品是否需要下架删除? 上新是每周一天上新,还是不定期的上新对搜索方面比较好?问题1:为什么无线端强个性化展示的购买过的店仍排在没有购买过的店后面?强个性化并不是指
    09-08 店铺品牌
  • 如何降低流量成本, 使CPC一降再降?
    如何降低流量成本, 使CPC一降再降?
    基本所有推广专员都会被运营或者老板提过一个问题,为什么现在的点击单价那么高,为什么流量成本这么贵?!等等。不少推广专员默默的在心里为自己点蜡的同时,也为了这点击单价绞尽脑汁。现大麦电商发现总结了几个降低cpc方法,和大家分享下。小编给大家分享
    09-08 展位低价
  • 男装高PPC,突破不是梦!
    男装高PPC,突破不是梦!
    男装类目作为淘宝推广的一个主要类目,搜索量没有女装类目那么高,因此在推广上也与女装类目有所不同。男装在直通车推广的时候往往会遇到点击率低流量提不起来并且PPC非常高的情况的状况,最常见的有夏款的T恤短袖、冬款的大衣皮衣等二级类目。很多男装卖家正
    09-08 宝贝类目