科技感满满,华为云DevCloud推出网页暗黑模式
2023-02-18 16:31:58 时间
近期,华为云DevCloud推出了暗黑模式,让用户在网页端也可以体验到桌面级应用才有的特性。
深色模式(Dark Mode),俗称暗黑模式。是近2年以来用户呼声最高的功能之一,一些国外顶级厂商都将深色主题作为UI的重要组成部分。他们的产品绝大部分都提供了深色模式,有的甚至让生态中的APP都提供深色模式。而微信在今年也借机提供了深色模式。可见,暗黑模式已经深得人心。
![](https://pic1.zhimg.com/v2-78636d9479180ab3002c54ecc6a78798_b.jpg)
深色模式降低了视觉的亮度,在黑暗环境中提供了安全性,并且可以最大程度减少眼睛疲劳。
据统计,有超过70%的软件工程师在Dark Theme IDE上进行编码,如果您查看流行的编码环境主题下载,你会发现十大主题总是暗黑的。广大开发者对深色模式有一种发自内心的热衷和痴迷。而某些流行的IDE工具更是将暗黑色系作为默认色系,例如开发工具VsCode和Sublime。开发者热衷深色模式,除了上面的原因之外,可能还因为深色模式能够带来神秘感和科技感。
![](https://pic4.zhimg.com/v2-265f4d5fa67f16b12fe6e9bd226191b7_b.jpg)
深色模式的特点
华为云DevCloud产品主要用户还是面对开发者。开发者通过产品端到端参与研发流程,提升研发效率。我们看看深色模式给用户带来哪些特点呢?
-
久用舒适
华为云DevCloud可能是研发团队使用时间比较长的产品。其中某些工具可能需要沉浸式使用,这么长时间的使用,势必会让用户眼睛产品视觉疲劳,从而对工作有抵触感,这也正是设计团队考虑深色系模式的原因之一。
深色模式可能是减轻团队长时间工作导致焦虑的一种方式。柔和的暗光让你的眼睛避免强光刺激,从背景填充到文字图标色,从点击到hover、以及微动效过度,都是基于大量的视觉研究以及对比度的色阶调试,只为带给你更舒适的沉浸工作体验。
![](https://pic3.zhimg.com/v2-8d0adc937a53e64fce0f44fc074f2522_b.jpg)
![](https://pic2.zhimg.com/v2-05fb3bd1c02cd01eab4f2f58b397be45_b.jpg)
-
更易用
华为云DevCloud的深色模式,底层源自于规模化微服务场景下对产品一致性和易用性的考量。
我们分成规模化微服务产品体验实践、体验模型以及度量方式来讨论。
规模化微服务产品体验实践:
-
呈现在用户面前的DevCloud平台是一个完整的工具链平台,其背后是由几十个微服务团队协作开发而成。每一个微服务就是一个小微型团队,团队按照各自产品的目标和竞争力演进,难免在视觉交互体验上有偏差,我们称之为规模化微服务产品体验问题。而这样的问题是令人头疼的。为此,部门中的DevUI团队也是经过很长时间的摸索,从规范,组件,场景等等方式进行解决。其中深色模式,是一种有效的方式。
-
DevUI对所有DevCloud产品的颜色已经意义化的命名,让各微服务前端团队以及设计团队使用这种有意义的变量,保持视觉交互的一致,如果某一个团队采用其他颜色进行页面开发,那也是无法通过工具的检测而无法上线。从而保证了产品一致性。下图一个是不符合规范的,一个图是符合规范的。
![](https://pic4.zhimg.com/v2-e4672744a763908ea3d0af7c37b10eef_b.jpg)
![](https://pic3.zhimg.com/v2-01f95d53f996ad0bcf23403f7a4027ee_b.jpg)
体验模型以及度量方式:
对于华为云DevCloud产品体验提升,团队孜孜以求。虽然业界已有大量相关体验理论,但还是要结合本身产品特性和研发模式寻找合适的定义。华为云DevCloud是B端研发类的工具产品,其背后是大规模的微服务化交付,基于这些特点,团队抽象出体验模型:稳定性、参与度、认知匹配、任务效率、愉悦感,然后用这个模型去检验产品体验好与不好,最终也是用数据去回答和驱动产品体验。
![](https://pic4.zhimg.com/v2-a71ceaa98b9d6798e132f46af52e4bc3_b.jpg)
深色模式带来的是视觉体验一致,于用户而言,产品体验更加流畅,并且间接提升任务效率。
-
提升研发效率
在去年的 WWDC 大会上,苹果人机交互团队的设计师 Raymond Sepulveda 曾对 macOS 的「深色模式」使用场景做了进一步的解释。他指出,只有阅读浏览或是内容创作型 app 才需要长期启用黑暗模式,比如文字或代码编辑。它们会借助黑底白字的高对比度特性来让用户视线保持集中,其它大部分软件对于黑暗模式的需求反而并不强烈。
![](https://pic1.zhimg.com/v2-393ffe61f0f53c773b93f470b99d3c64_b.jpg)
面向开发者华为云DevCloud产品则天然具备这些场景。比如代码托管服务中的代码合并请求功能,当开发者提交代码需要评审的时候,评审的人需要盯着代码长时间审视代码,浅色模式容易让眼睛疲劳。另外DevCloud深色模式与IDE的深色模式保持工具切换的一致性,视觉体验更加流畅自然。
![](https://pic1.zhimg.com/v2-03b0bce5efa6c4e414062a4b3300d7f0_b.jpg)
![](https://pic4.zhimg.com/v2-ec7c8e5b60b3394583be0ae9a7f1b05b_b.jpg)
![](https://pic3.zhimg.com/v2-ef1c454e154a10181da8b138b5b13fba_b.jpg)
最终,无论是浅色模式还是暗黑模式,DevCloud在细节上都尽量考虑B端产品致简特质,设身处地考虑开发者喜好,细节处提升工具的视觉体验。
-
改善视力不佳或者色弱的可视性
我们面对的用户群体中有一部分是色弱用户,深色模式的高对比度对于这部分群力是比较友好的。
![](https://pic1.zhimg.com/v2-f7179aea4611ed2cc50152607aac507c_b.jpg)
我们持续不断演进
深色模式不仅仅是简单的黑白,是有很多东西需要思考的。比如,
-
确保内容在深色模式下清晰刻度,背景色和文本对比度对少才比较合适,Material Design建议至少是用15.8:1的对比度。
-
字体的粗细、透明度在浅色、深色背景下都会有所不同。
-
web产品的层次是通过阴影来表达的,而阴影在深色背景和浅色背景也是不一样的。
墙裂欢迎大家使用、拍砖,用户的良好体验是华为云DevCloud产品不断改进的动力!
![](https://pic4.zhimg.com/v2-903a506f9c7ea66b1f6cf4c10ade884b_b.jpeg)
相关文章
- 华为云携手鸿蒙,培养创新型开发者
- 华为云发布ModelBox AI应用开发框架
- Volcano社区v1.6.0版本正式发布
- 5种在TypeScript中使用的类型保护
- el-select数据量过大引发卡顿,怎么办?
- 开发者能力大赏,谁是技术知识达人?
- 华为云重磅发布:“乐高式”自动驾驶研发开放平台,携手伙伴共建生态
- @开发者 云端一条生产线,让软件开发更敏捷、更安全
- SRE,了解一下?35+岁程序员新选择
- 教你搭建一个Telegraf+Influxdb+Grafana 监控系统
- 华为云Stack首席架构师:打造“称手”的数字化工具,答好政企IT数字化转型这道必选题
- 云上360行丨深耕快消品行业数字化转型,纷享销客与华为云合力同行
- 改变世界的开发者丨黑客松冠军,为听障儿童推开一扇“有声的窗”
- 想发自己的NFT,你要先搞清楚这6个问题
- 改变世界的开发者丨玩转“俄罗斯方块”的瑶光少年
- 云图说|每个成功的业务系统都离不开APIG的保驾护航
- 一文带你了解J.U.C的FutureTask、Fork/Join框架和BlockingQueue
- 掌握高性能计算前,我们先了解一下它的历史
- 10个常见触发IO瓶颈的高频业务场景
- 尽一份孝心,为家人做一个老人防摔报警系统