1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

实战案例复盘!美柚深色模式背后的设计故事--九分科技

时间:2020-06-17   分类:设计管理    作者:网络   来源:网络整理   点击:194

遇见更美的你,使亿万女性用户「更美、更健康」——是美柚一直追求的目标。越来越多的女性用户通过美柚记录经期、管理健康、分享生活,美柚逐渐成为当今女性的一种生活方式。

本文来自九分网络

根据相关平台数据显示:57%的用户在白天比较活跃;23%的用户会在晚间使用美柚,而深夜仍在使用美柚的用户占20%。

内容采集来自9fen.net

实战案例复盘!美柚深色模式背后的设计故事--九分科技 九分网络

内容采集来自9fen.net

2015年,美柚上线了夜间模式,因为时间过于久远,很多新的功能未能完美适配。随着时代语境与流行文化的变化,在最近的品牌升级过程中,美柚用户体验中心对夜间模式进行了一轮优化升级。

九分网络

本文将以现有的夜间模式为出发点,梳理现有的问题,分析夜间模式与深色模式的共通点与差异性,并结合当前iOS和Android平台的深色模式趋势,最终推导出符合美柚特色的深色模式优化策略,并落实到具体的执行流程中。

九分网络

希望本文能给到大家一些帮助,如果有任何建议与意见,欢迎大家留言或私信交流。

copyright 9fen.net

PART 01 美柚夜间模式现存不足

目前线上夜间模式的适配,没有完全覆盖到所有页面。部分界面直接从纯黑到纯白,明显的亮度切换会造成强烈的视觉刺激,体验上还有优化的空间;

内容采集来自9fen.net

目前夜间模式的可读性略差,使用的文字颜色(#666666)和背景颜色(#222222)的对比较弱,导致低亮度时界面文字不清晰,辨识度低。不适合在白天或者亮光环境下使用。

www.9fen.net

界面层级关系不清晰,在浅色模式与深色模式的界面层级未一一对应,逻辑紊乱。 九分网络

实战案例复盘!美柚深色模式背后的设计故事--九分科技

copyright 9fen.net

九分网络

那我们应该选择哪个方向进行优化呢?深色模式(Dark mode)?还是夜间模式(Night mode)呢?我们先来了解一些这两个概念:

九分网络

实战案例复盘!美柚深色模式背后的设计故事--九分科技

本文来自九分网络

www.9fen.net

1. 深色模式 本文来自九分网络

深色模式,iOS称为DARK MODE,Android称为DARK THEME。适用于任何使用场景,白天和黑夜都可使用,让用户更专注于内容,同时也是一种美学追求。随着用户对深色模式的呼声越来越高,2019年谷歌和苹果先后发布了手机系统的Dark mode(theme),伴随着Android Q和iOS13的普及,国内各大应用(微信、QQ、百度网盘、网易云音乐、钉钉等等)也纷纷适配了深色模式。 本文来自九分网络

然而,深色模式并不是全新概念:在计算机诞生的早期绿色字符显示在深色屏幕上就是我们拥有的一切,直到现在,很多开发GG编程时还是习惯使用深色界面。另外,大多数股票交易软件也都使用深色界面;再有,早几年Windows10就支持了深色模式;还有,设计师们都熟悉的设计软件Adobe系列和Sketch均早已使用深色界面风格等等,在这里就不一一列举了。

九分网络

实战案例复盘!美柚深色模式背后的设计故事--九分科技 copyright 9fen.net

内容采集来自9fen.net

2. 夜间模式

copyright 9fen.net

夜间模式,Night Mode。是为了让用户在比较暗的环境下能够舒适的使用产品,在满足界面信息可见的前提下,通过降低尼特值、降低界面元素对比度和色彩明度、增加深色遮罩的方法,避免屏幕亮光对眼睛的刺激,同时也能节约设备电量。

内容采集来自9fen.net

夜间模式更多的是从健康角度出发。在深夜尤其是熄灯后使用手机,手机屏幕发出的蓝光,不仅造成视网膜的损伤,同时还会抑制体内褪黑素的分泌导致失眠。但科学实验表明,夜间模式也并非完全护眼。为了健康,建议大家睡前少玩手机。 copyright 9fen.net

PART 02 深色模式与夜间模式的异同点

我们从以下几个方面,拆解对比两者的区别: 内容采集来自9fen.net

1. 使用场景 内容采集来自9fen.net

夜间模式,顾名思义主要是在夜间使用,保证了文字内容在夜间均可看清的同时,又不会太过刺眼。 内容采集来自9fen.net

深色模式不是夜间模式,用户可以不仅可以在白天使用,也可在夜间使用,任何时间环境下均可使用,使用场景更丰富。

www.9fen.net

2. 背景亮度 copyright 9fen.net

亮度,是发光体光的强度与人眼所见到的光源面积之比,是人对光的强度的感受,单位是nit(1nit=cd/m2)。夜间,人眼主要是能感受弱光的视杆细胞在起作用,研究表明视杆细胞的作用范围是0.034~3.4×10-6cd/m2。因此,夜间模式的屏幕夜间最高亮度最好控制在0.034nit左右,可通过亮度测试仪进行测试。

本文来自九分网络

而深色模式的背景亮度则没有特殊要求。 copyright 9fen.net

3. 背景色 九分网络

夜间模式背景基础色大多都使用暖色调,在早期的iOS的night shift夜览模式,打开之后也是偏黄色调。这主要是由于屏幕会产生蓝光,蓝光不仅会伤害我们的眼睛,在夜晚还会抑制人体内褪黑素的分泌,使人难以入眠。这也是睡前尽可能不要去玩手机的原因之一。

本文来自九分网络

标签: 优设 优设网 交互设计 产品设计 夜间模式 深色模式 优秀网

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----