header_v1.7.40

华为云运维规范设计小结

195天前发布

原创文章 / 多领域 / 教程
aileleailele 原创,如需商业用途或转载请与aileleailele联系,谢谢配合。

运维指的是对已经建立的网络硬软件进行维护及管理,保证硬软件可以正常且高效的运行。

华为云作为近年来“进步最快的云”,体量持续增大,服务一个接着一个上线。带给后台运维的压力也是也来越大。为了效率有序的进行后台管理,应运而生的运维工具越来越多。然而各部门没有统一的设计标准,设计的工具五花八门,并没有一个统一的视觉品牌。用户信任度不高。交互与设计的差异性导致用户学习成本过高,而且因为重复设计与开发组件,实效性得不到保证。随着工作量越来越大,暴露出来的问题不断被放大,急需统一视觉和交互的标准进行设计与开发。


1.视觉品牌一致性

a.   一致性往往是外界认识品牌最重要的因素,良好的视觉一致性可以使用户对产品产生信赖的感觉,减少学习的成本,用户使用多个运维工具时。一致的视觉会告诉用户,“这个是华为的运维工具”“和我上一次用的一样” “我知道怎么用”这种信赖和亲切的的感受,而如果不统一视觉规范则会造成“好陌生” “和我用过的不一样” “这里应该怎么操作?” “这个是华为的工具吗?”等等这样疑惑负面的第一印象。品牌的视觉感知在打开页面的第一眼就传递给用户了 。所以产品的印象分是很重要的。要知道要改变一个人的第一印象是需要很长时间的。但是决定第一印象往往只需要一秒钟。

 

b.    从页面落地的角度来说,由于视觉的主观性和各部门设计师的水平能力都有很大的差别。从而造成设计出来的运维工具各式各样,毫无统一性可言。如有规范的存在。便有了视觉层面的约束,拉通了各设计师之间的设计语言,从而达到整体视觉的统一。

c.    从视觉检视的角度来说,由于开发同学对设计间距大小等不是特别敏感造的与视觉的偏差,而有规范,有了统一的标准,便有迹可循。开发也可以提前熟知规范,减少开发错误的发生。

 

2.实效性

a.    从设计过程来说,与其不断的重复修改样式,不如按照相同样式来制作。与其把设计的推敲的时间花在每一个产品上不如把时间花在规范制作上,有了规范就能保证百分之九十以上场景的适用。

b.    从规划的角度来说,可以提前熟知整体风格与样式,在设计框架内表达产品,不仅仅提高因产品经理的效率,还减少了与设计沟通和pk 的时间。

c. 从开发的角度来说,因规范规定了组件级风格的样式,开发一次组件代码,便可重复利用,避免重复开发所带来的对时间的浪费。

 

职业的差异,导致认知的的差异,由于设计师和开发在工作思路上大不相同。工作中经常会有争执,但当你为他设计一款工具的时候,则需要从他们运维人员的角度出发,用实用派来形容他们应该比较合适,相对于我们用什么风格来说,他们更关心的是我能不能在一屏页面看到多少内容,我所关心的数据是不是我第一眼就能看到,各种告警是不是能清晰的体现。



1.我只是需要一款能帮我快速解决工作问题的工具

运维工具的用户群体想对比较固定,由于页面设计内容较为专业。以及使用场景想对固定(作为工具类产品),提升运维人员的工作效率是首要目的,要是因为这款工具对效率可以运维人员早点下班,那就更好了。

所以他们需要的,仅仅是一款能帮我快速解决工作问题的工具。所以为长时间使用而设计,任何浮夸以及为了美观影响易用性的设计都不适用于运维规范。


2.希望看到更简单的东西

a.   相对于看文字。更多人愿意看图,相对于文字的阅读,图的理解和阅读成本更低,阅读压力也会更小。

    

b.   习惯的设计与色彩在这里可能更讨喜,比如图形中常用的告警色是红黄绿。然而最近流行的冷色系的设计,蓝紫色在图表中出现的较多,这样在用户阅读页面的时候就会产生多余的思考环节,降低阅读效率。

c.   相对于过多装饰,纯粹的功能展现更讨喜。对于工具软件来说,使用性优先,过多的装饰与色彩回对页面阅读与操作产生干扰,所以在工具类的界面应该避免过度设计。



1.易用性优先

a.     结合规范产生的目的性,以及用户的诉求,设计中需要解决难点问题,由于规范使用场景多,页面内容多,工作人员需要长时间需要对着界面。所以在设计时,应该把易用性放在了第一位。


b.     作为工具类的视觉规范来说,任何新颖激进的设计。都不如易用性对用户的体验的提升来得直接。所以规范设计之初的出发点就是易用性。任何风格与流行的设计元素,颜色等等都是在保证易用性之后再考虑的层面,所以任何设计语言都是为了好用而服务的。


c.     清晰的层级关系和功能分区也是提升体验的关键点,从色彩的方面来说,色彩的却分可以让页面的功能结构更加的清晰,色彩也可以视觉的层级关系更佳的明显,而从排版来说,大小的对比可以有效的去分优先级,间距可以建立视觉层级。让用户更容易去阅读。

比如将一级二级等较大功能分区规划在固定的模块,作为常用选择区域,(规范中运用了手风琴组件)把底层功能固定区域现实,并且用颜色进行区域的划分,给使用者视觉上的暗示区域的划分。


2.个性与趣味性


a.    业务需求和使用场景以及决定规范的性格,就好像职场的人经常穿西装,给人专业严谨的感觉,反之唱嘻哈的人,穿衣随性宽松,给人无拘无束自由的感觉。而运维规范适用于各个云计算精密计算的运维工具。需要营造严谨,轻量,的视觉感受,作为科技产品也因具有前沿科技的气质。而因数据量众多更需要专业有序的感受。


b.    页面需要适度在页面中把这些抽象的词语用具象的视觉呈现,这里包括用色,元素,排版等等。最后选了深灰与白作为底色用于页面功能区域的划分,系统色用了蓝色,蓝色的波长较短。折射角度大。是相对比较冷的颜色。相对传统的科技色系,并适当体现科技元素在不干扰页面视觉清晰度的情况下,对页面加以装饰。体现其科技的属性。


概览页面


内容页


C.不得不说,作为一个设计师来说,界面的色彩构成就像给自己搭配衣服一样,作为我们这个年代的人,谁也不想穿着大红大绿的去逛街。界面也是如此,所以我们可以在满足基本观看浏览的基础上对整体页面进行色相的适当偏移,但这里的重点不是“偏移”而是“适当”。在比较明显的指引色系中去寻偏移,寻找和谐的那个点,让页面尽量干净整洁。


D.    登录页面是用户接触运维工具的第一个页面,第一印象很重要。在这里可以充分体现产品的属性,营造符合属性的视觉氛围。也是给设计师发挥自己想法最好呈现的页面。


3.最大程度的适配


a.    规范适用于全部的运维工具。数量巨大,需要适配于各种复杂的页面。样式上尽量简约,符合绝大多数场景的应用。


b.    由于运维体系不仅仅只服务于华为这一个局点,包括多个局点的换肤,而每个局点都有自己的规范用色,所以,除了整体规范用色除图表意外,颜色不宜过多,以便于适配于更多局点的换肤。 

 

    这些年在做用户体验,就一直在想我们为用户的体验一直在绞尽脑汁,当我们做规范的时候,虽然是为了运维人员量身定制,换个角度想,工作中实际操作我们的规范最多的使用者是ui设计师。是不是可以给他们提供更多的便捷,让他们在使用我们规范设计的时候可以更快的完成工作。于是我们通过建立各种库来拉通设计与开发,提升效率。



1.设计组件库

把常用组件在sketch以及axure中做成固定组件。在设计时候直接调用。这样在节省时间的同时提高也可以提高设计的准确性。新的样式与组件也可以通过组件库第一时间反馈给设计师。


2 .sketch标注库的应用

把用规范做成的界面整理,筛选,选出出现频率比较高的界面,加以分类,比如涉及列表的分成一类,表单页面分成一类等等进行分类。通过sketch插件生成html文件。

这样做不仅仅是可以让ui设计师有一个参考,更重要的是通过不断的迭代更新,标注库更佳的完善。最终实90%以上的页面低保真开发。这样大大节省ui的重复搬运规范的机械劳动,可以把更多的时间用到规范的完善以及创新研究的设计上来。


3 .运维图标库的应用

把运维一系列icon整理成库,方便设计与开发在工作的时候可以随时调用,避免在重复设计切图。


    规范发布后,我发现一些现象,在工作中我发现,很多设计师都有其事都很排斥的,不喜欢被规范。觉得规范做出来的设计不能体现自己对视觉的想法。

    为了品牌的一致性,又不得不收起自己的个性。然而规范带给整个设计生产线来的实惠却是巨大的。提升了一致性的同时,还节约了大量的开发的成本,避免了很多错误与沟通问题的产生。而且规范本身也在不断的迭代与改进,去弥补自身的不足。


94

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功