恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

Dark mode 暗色模式设计浅谈分享

原创文章 分类: 设计趋势 版权: 举报
317 1 2 0
更新于:2020-05-28
0.0


其实是笔记 :)

 

好久不见,想念UI中国的小伙伴。这次想和大家一起探索最近关注的设计上的一个趋势——APP dark mode design,暗色模式设计。

 

2019年9月份苹果发布了iOS13,最大的亮点(至少在UI眼中)在于他们引入的暗色模式;


到2019年年底的几个月内,暗色模式设计逐渐被行业更多地重视起来到并发展成一种趋势,不少平台设计开发都在积极筹划适配方案上线;除此之外,Windows、Android、Google等在自己的设计体系里早已有暗色模式设计;对设计可用性比较敏感的设计工具adobe、sketch等都有自己的暗色界面。


由此可见iOS对暗色设计的展开不算早。曾有传闻苹果宣布截止2020年某时间点未适配深色模式的APP可能无法在APP store上架,目前没有找到该言论的有力论证资料。但就体量较大的APP而言,不妨着手考虑实施适配方案,试想不远的未来夜晚,当用户沉浸在几个暗色模式的APP中突然切换到一个没有暗色模式的APP,“眼前一亮”的瞬间必定意味着糟糕的用户体验。


目前手机体验暗色模式的条件:

1. Android10/Android9部分机型/iPhone X及以上iOS13系统设置

2. 已支持暗色模式的应用。(三方应用中已有微信、淘宝(内测)、QQ、百度网盘、QQ音乐、网易云音乐、知乎、豆瓣、爱奇艺等)




暗色模式被认可的必要性与优势:

 

1. 专注于内容、舒适的用户浏览体验(成熟的适配方案为前提);

2. 省电(智能设备工业升级,屏幕越来越成为耗电主因);OLED分析的相关研究

3. 为用户提供多一种个性选择的新鲜感(并非只在夜间才能使用暗色模式);


如何应对:


UI设计应对暗色模式趋势,能协同开发同学具体做些什么、怎么做、如何制定有效方案等问题,有必要思考总结或至少能了解大概。

根据部分平台分享的经验,在实际业务场景下,设计师需要单独分析具体的产品特性,结合业务本身制定相应的方案。大致可列举两种情况:

1. 产品界面中信息的层级本身差异较大,在元素显示重要性上有明显偏向,追求信息的高效传达;

2. 产品注重界面整体的阅读体验流畅性,需要用户沉浸式阅读,即信息层级无较大差异;

以上两种场景下的暗色模式设计的思路就不尽相同。

 

一般来说,暗色模式的设计主要针对UI界面中元素颜色对应的转换规则;大致看过一些开发人员写的博客,主要考虑颜色和图片两个适配点。

我们可以先总结基本的设计原则,再细化设计和工作中的具体做法。

 

一、根据Google的建议,我得到的几点原则:

1. 避免使用纯黑#000作主色调背景;出于无障碍设计的考虑,与纯黑#000相比,接近纯黑的深灰色的底不仅可以保证暗黑模式可读性,而且可以兼顾更舒适的阅读体验。
2. 暗色背景与文本颜色对比度控制在WCAG2.0AA级标准以上(Google具体的建议在15.8:1以上);
3. 彩色元素的饱和度适当地调低,以确保整体色彩之间对比度符合WCAG2.0的对比度标准,即4.5:1以上。
4. 避免大面积使用高饱和度、高明亮度的色彩,可小面积用作点缀——减少视觉冲击。
5. 关于图标:亮色模式下的线性图标,放在暗色模式下时建议反转面形,视觉效果更形象。


二、对iOS相关规范的解读:

1. 彩色保留原色系基础,适当增加对比度,降低明亮度/饱和度;
2. 暗色背景与文本颜色对比度控制在7:1以上(这点比Google宽松一些,测试对比度的工具:Contrast-ratio.com),越重要的文字,与背景的对比度越高(颜色透明度越低)。
3. 柔化白色背景,调整白色的不透明度变成浅灰色。
4. 支持用户自由切换模式,给出切换开关。
5.语义化颜色:界面元素自动适配当前模式,设计制定两个模式下的颜色组合,由开发实现转换。


结合以上内容作结论:

1. 避免使用#000纯黑作为主色调背景,选用深灰色;
2. 柔化白色背景,选用浅灰色;
3. 保证「文字/字体icon」与「背景」之间的对比度>4.5:1;使用对比度的高低来体现信息的重要程度,重要级别越高,对比度越高;
4. 主题色可以小面积保留原色值,其他彩色元素的饱和度适当调低;
5. 尽量避免大面积使用高饱和度彩色,可小面积作点缀;



工作中的具体做法:

 

1. 设计稿在文字/字体icon、背景、卡片、分割、按钮、等元素用色上,尽量遵循原有的设计规范,在规范系统的色彩库里选择颜色使用,方便暗色模式对应替换颜色的时候,找到参考基准;

2. 将原有的浅色模式设计规范中的色彩库做暗色模式的对照替换,给出完整的对应的色值对照表,由开发遵循;具体原则在以上总结中;


3. 尽量避免对深色背景上的元素添加阴影;

4. 图标:字体icon单色图标可以与文字文本的处理方式归为一类(下面会写);定制化的图标最好是可以一套方案适配两种模式,无法合理适配时可以做的更细,比如浅色模式下的线性icon,为了更舒适的体验,转换到暗色模式可能要出一套反转面形的icon;

5. 文字/字体icon大致分为两种场景:当文字/字体icon出现在彩色实心按钮/彩色卡片上,建议根据背景色值选用文字色值,可以使用谷歌的选色工具来判断不同彩色色值适合使用文字的深/浅,tools for picking colors;出现在暗色背景上(标题/正文),则建议选用浅色色值;


6. 背景层级可分为2-3层:Z轴上的层级越高,背景颜色越浅,色值依据原浅色系设计规范一一对照;

7. 目前对于设计师产出的「具有插画/背景纹理的高饱和度彩色」并切图交付的卡片,我暂时没有遇到合理的适配方案,这类的卡片/banner最好在设计的时候严格好控制尺寸;

8. 特殊界面(相机、音频、通话等)可直接保留原样式;

9. 插画、缺省页、状态页可以通过直接调整不透明度的方式适应暗色模式;

10. 定下暗色模式规范之后,尝试各种类型的界面测试颜色对比度是否达标;

11. 给出自由切换模式的开关;

12. 出稿无需手动适配亮/暗两版,但设计验收依然要走流程兼顾两种模式;

13. 在夜晚关灯场景下进行浏览测试;

--------------------


从个人角度看,目前对暗色模式的普及是有期待的,相信这个诉求能改善当下的用户体验。

“一件事值得做,就值得认真做。”

知识总是来自大家的经验总结,希望这篇笔记能为我们在工作中提供有效的思路。








Powered by Froala Editor

au小鹿

Loving design ! ! !

132粉丝/24关注

小有见解首页新秀原创小生收藏家lv.2
设计验收工作笔记用户体验设计中稀缺感的心理偏见已成为常态

你确定要举报Dark mode 暗色模式设计浅谈分享

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年01月06日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN