近期,华为云DevCloud推出了暗黑模式,让用户在网页端也可以体验到桌面级应用才有的特性。
 
深色模式(Dark Mode),俗称暗黑模式。是近2年以来用户呼声最高的功能之一,一些国外顶级厂商都将深色主题作为UI的重要组成部分。他们的产品绝大部分都提供了深色模式,有的甚至让生态中的APP都提供深色模式。而微信在今年也借机提供了深色模式。可见,暗黑模式已经深得人心。
深色模式降低了视觉的亮度,在黑暗环境中提供了安全性,并且可以最大程度减少眼睛疲劳。
 
据统计,有超过70%的软件工程师在Dark Theme IDE上进行编码,如果您查看流行的编码环境主题下载,你会发现十大主题总是暗黑的。广大开发者对深色模式有一种发自内心的热衷和痴迷。而某些流行的IDE工具更是将暗黑色系作为默认色系,例如开发工具VsCode和Sublime。开发者热衷深色模式,除了上面的原因之外,可能还因为深色模式能够带来神秘感和科技感。

深色模式的特点

华为云DevCloud产品主要用户还是面对开发者。开发者通过产品端到端参与研发流程,提升研发效率。我们看看深色模式给用户带来哪些特点呢?
  • 久用舒适
华为云DevCloud可能是研发团队使用时间比较长的产品。其中某些工具可能需要沉浸式使用,这么长时间的使用,势必会让用户眼睛产品视觉疲劳,从而对工作有抵触感,这也正是设计团队考虑深色系模式的原因之一。
深色模式可能是减轻团队长时间工作导致焦虑的一种方式。柔和的暗光让你的眼睛避免强光刺激,从背景填充到文字图标色,从点击到hover、以及微动效过度,都是基于大量的视觉研究以及对比度的色阶调试,只为带给你更舒适的沉浸工作体验。
  • 更易用
华为云DevCloud的深色模式,底层源自于规模化微服务场景下对产品一致性和易用性的考量。
我们分成规模化微服务产品体验实践、体验模型以及度量方式来讨论。
 
规模化微服务产品体验实践:
  1. 呈现在用户面前的DevCloud平台是一个完整的工具链平台,其背后是由几十个微服务团队协作开发而成。每一个微服务就是一个小微型团队,团队按照各自产品的目标和竞争力演进,难免在视觉交互体验上有偏差,我们称之为规模化微服务产品体验问题。而这样的问题是令人头疼的。为此,部门中的DevUI团队也是经过很长时间的摸索,从规范,组件,场景等等方式进行解决。其中深色模式,是一种有效的方式。
  2. DevUI对所有DevCloud产品的颜色已经意义化的命名,让各微服务前端团队以及设计团队使用这种有意义的变量,保持视觉交互的一致,如果某一个团队采用其他颜色进行页面开发,那也是无法通过工具的检测而无法上线。从而保证了产品一致性。下图一个是不符合规范的,一个图是符合规范的。
体验模型以及度量方式:
 
对于华为云DevCloud产品体验提升,团队孜孜以求。虽然业界已有大量相关体验理论,但还是要结合本身产品特性和研发模式寻找合适的定义。华为云DevCloud是B端研发类的工具产品,其背后是大规模的微服务化交付,基于这些特点,团队抽象出体验模型:稳定性、参与度、认知匹配、任务效率、愉悦感,然后用这个模型去检验产品体验好与不好,最终也是用数据去回答和驱动产品体验。
深色模式带来的是视觉体验一致,于用户而言,产品体验更加流畅,并且间接提升任务效率。
  • 提升研发效率
在去年的 WWDC 大会上,苹果人机交互团队的设计师 Raymond Sepulveda 曾对 macOS 的「深色模式」使用场景做了进一步的解释。他指出,只有阅读浏览或是内容创作型 app 才需要长期启用黑暗模式,比如文字或代码编辑。它们会借助黑底白字的高对比度特性来让用户视线保持集中,其它大部分软件对于黑暗模式的需求反而并不强烈。
面向开发者华为云DevCloud产品则天然具备这些场景。比如代码托管服务中的代码合并请求功能,当开发者提交代码需要评审的时候,评审的人需要盯着代码长时间审视代码,浅色模式容易让眼睛疲劳。另外DevCloud深色模式与IDE的深色模式保持工具切换的一致性,视觉体验更加流畅自然。
最终,无论是浅色模式还是暗黑模式,DevCloud在细节上都尽量考虑B端产品致简特质,设身处地考虑开发者喜好,细节处提升工具的视觉体验。
 
  • 改善视力不佳或者色弱的可视性
我们面对的用户群体中有一部分是色弱用户,深色模式的高对比度对于这部分群力是比较友好的。

我们持续不断演进

深色模式不仅仅是简单的黑白,是有很多东西需要思考的。比如,
  1. 确保内容在深色模式下清晰刻度,背景色和文本对比度对少才比较合适,Material Design建议至少是用15.8:1的对比度。
  2. 字体的粗细、透明度在浅色、深色背景下都会有所不同。
  3. web产品的层次是通过阴影来表达的,而阴影在深色背景和浅色背景也是不一样的。
墙裂欢迎大家使用、拍砖,用户的良好体验是华为云DevCloud产品不断改进的动力!
 
 
 

科技感满满,华为云DevCloud推出网页暗黑模式的更多相关文章

  1. 鲲鹏凌云,并行科技Paramon通过华为云鲲鹏云服务兼容性认证

    随着Cloud2.0时代到来,5G技术开始应用普及,超算云服务需求不断升级,业务多样性.数据多样性不断延伸.2019年7月,华为召开鲲鹏计算产业发展峰会,依托在联接领域坚实的基础,华为未来将着力打造智 ...

  2. 华为云DevCloud一枝独秀

    DevOps,是Development和Operations的组合词,是指一组过程.方法与系统的统称,用于促进开发.技术运营和质量保障部门之间的沟通.协作与整合.DevOps是一种重视“软件开发人员( ...

  3. 古有七步成诗,今有六步完成DevOps上华为云DevCloud实践

    引言: 在“DevOps能力之屋(Capabilities House of DevOps)”中,华为云DevCloud提出(工程方法+最佳实践+生态)×工具平台=DevOps能力.华为云DevClo ...

  4. AI如何驱动软件开发?华为云DevCloud 权威专家邀你探讨

    近期,国际著名咨询公司Gartner 在一份研究报告中将 "AI-Driven Development" 列为 2019 年的 Top 10 Strategic Technolog ...

  5. 华为云DevCloud为开发者提供高效智能的可信开发环境

    在HUAWEI CONNECT 2019期间,在华为云云服务开发者分论坛上,华为云布道师做了<CloudIDE:开发者的高效.智能的可信开发环境>专题演讲,主要介绍了华为云DevCloud ...

  6. 一图看懂华为云DevCloud如何应对敏捷开发的测试挑战

    作为敏捷开发中测试团队的一员,在微服务测试过程中,你是不是也遇到同样困惑:服务不具备独立验证能力.自动化用例开发效率很低等? 华为云DevCloud API全场景测试技术来支招~围绕API的全场景,打 ...

  7. DevOps on DevCloud|如何采用流水线践行CI/CD理念【华为云技术分享】

    [摘要] 持续集成/持续交付(CI/CD,Continuous Integration/Continuous Deployment)在DevOps CMALS理念中具有支柱性地位,因而CI/CD流水线 ...

  8. 详解华为云基因容器服务GCS

    基因测序,作为“下一个能够改变世界”的技术,已经由实验室研究演变到临床使用,为人类预测罹患多种疾病的可能性,提前预防和治疗疾病提供了一套可靠的方法和手段.而基于基因测序在预防和治疗疾病方面的准确和可靠 ...

  9. 【重磅资料】ArchSummit全球架构师峰会·2019华为云技术专场资料下载

    ArchSummit全球架构师峰会是InfoQ中国团队推出的重点面向高端技术管理者.架构师的技术会议,54%参会者拥有8年以上工作经验.ArchSummit聚焦业界强大的技术成果,秉承"实践 ...

随机推荐

  1. ubuntu16.04-交叉编译opencv3.4.6

    0.前言 在要移植opecv和SeetaFaceEngine-master到ARM板子上运行的所有步骤之前,有几点需要注意的: 查看板子运行的Kernel版本 交叉编译工具链的gcc版本,关键就是工具 ...

  2. fasttext 和pysparnn的安装

  3. NGINX反向代理,后端服务器获取真实IP

    一般使用中间件做一个反向代理后,后端的web服务器是无法获取到真实的IP地址. 但是生产上,这又是不允许的,那么怎么解决? 1.在NGINX反向代理服务器上进行修改 2.修改后端web服务器配置文件 ...

  4. java内存模型(JMM)和happens-before

    目录 重排序 Happens-Before 安全发布 初始化安全性 java内存模型(JMM)和happens-before 我们知道java程序是运行在JVM中的,而JVM就是构建在内存上的虚拟机, ...

  5. Springboot中,Tomcat启动war包的流程

    将一个SpringBoot项目,打成war包 <!-- 1. 修改POM依赖 --> <dependency> <groupId>org.springframewo ...

  6. 从Webpack源码探究打包流程,萌新也能看懂~

    简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...

  7. flask学习笔记(二)

    一.视图函数的传参方式 修改前: 目标: 传参方式改成 途径: 通过request获取参数 注意:args并不是地点类型,而是dict的一个子类,如图: immutable意思是不可变 不可变的字典转 ...

  8. Linux shell基础(五)sed命令

    一.sed命令 sed是一种强大的流式编辑器 (stream editor for filtering and transforming text),它能够完美的使用正则表达式,逐行处理文本并把结果显 ...

  9. 怎么避免写出慢SQL

    在大多数实际的系统中,慢 SQL 消耗掉的数据库资源,往往是正常 SQL 的几倍.几十倍甚至几百倍. 怎样才能在开发阶段尽量避免写出慢 SQL 呢? 估算数据量 慢 SQL 对数据库的影响,是一个量变 ...

  10. python模块之time and datetime

    time # python3 # coding = utf-8 import time timestamp = time.time() print('timestamp:%s, type: %s' % ...