欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

发布时间:2017:03:20 15:03:42 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1385个文字,预计阅读时间4分钟
导语
腾讯ISUX-花咯:你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学

  腾讯ISUX-花咯:你有没有在夜间使用移动设备的习惯?你觉得QQ现有的夜间模式亮度在使用时是否舒适?为了能够更科学的验证我们的设计,我们通过对比度分析、尼特值测试、色彩亮度和色彩通用性等维度去设计界面,并总结出一套优化方法来分享给大家,相互启发。

  我们为什么要做夜间模式?

  1. 用户调研显示:57%的用户想要使用夜间模式,71.1%的用户习惯在夜间不开灯看手机

  在ISUX北京调研小组的帮助下,我们针对移动端QQ界面夜间模式进行了调研。从2000多份问卷数据中分析发现,用户对夜间模式有明确需求,且多数人在无照明下使用软件。

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  2. 用户反馈现有界面夜间使用时刺眼,低亮度时界面文字不清晰

  调研发现,现有界面用户在夜间使用时感觉刺眼,长时间使用会感觉眼睛疼痛。部分用户认为文字看不清,辨识比较费眼。

  3. 用户期望更暗色 、更能保护眼睛的夜间模式设计

  从用户对夜间模式的期望来看,他们希望主体界面的颜色更暗,能够更加持久地使用软件。希望我们设计师,能够设计出更加保护眼睛的夜间模式。

  我们如何设计夜间模式?

  1. 亮度、色彩对比度、通用性色彩是关键,行业趋势倾向低饱和无彩色

  1)关注健康人眼特性——亮度的需求

  首先引入尼特值(nit),它是用于量化亮度强度的专业术语,其意思每平方米烛光的强度:1nit=1坎德拉/平方米;

  白天,人的眼睛能适应亮度的值高于3.4尼特;

  夜晚,主体颜色接近0.034 尼特,最亮元素低于3.4尼特的亮度眼睛会比较舒适。

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  2)关注弱视、色盲色弱人群——对比度、色彩通用性的需求

  老人或视力弱的人群对于对比度的要求较高,容易看不清文字,应该选择更为合理的对比度。色弱人群和我们看到的颜色存在区别。 所以后续选择色彩度时,应该选择更具通用性色彩设计的方案。

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  3)行业趋势——减少极端色,无彩色居多

  从行业趋势来看,2016年,Google Material Design 和 iOS 相继推出了夜间模式和深色主题设计及护眼模式。从其他权威网站中也发现许多深色界面的设计。最终整理得出,界面主体倾向无色彩,黑色居多。柔和、低饱和度色彩可以增加用户长时间观看界面的舒适度。

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  2. 五项夜间模式设计原则

  通过文献查找结合多次测试对比,我们提出5项评价原则,帮助设计师去判断亮度,对比度,色彩通用性是否满足人眼需求。

  原则1:保证色彩通用性:关注特殊人群

  所选色彩需要考虑色盲人群的特性,尽量保证他们所看到的颜色和我们接近一致,减少该类人群的识色的 差异性,增强设计的统一性。从软件角度来看,无色彩更能减少正常人和色盲等特殊人群的识色差别。(可利用Sim Daltonsim for Mac软件检测)。

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  原则2:选择低亮度、低饱和非极端的色彩(避免纯黑)

  对亮度控制,首先需要确定颜色本身的亮度,从一开始对界面的主体颜色的选择就应该选择亮度较低的色彩,从设计用色上就控制界面的亮度。因此,方法就是直接降低色彩本身亮度,但是要避免选用极端颜色(避免纯黑色)。为了方便大家对比所选颜色的亮度,可通过色彩亮度公式计算(Y-范围0-255,Y值约接近0亮度越低):

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  原则3:保证界面在屏幕中呈现出低尼特值(低亮度)

  对于屏幕呈现的亮度的控制,需要通过前面提到的尼特值确定。尼特值能够反馈设计方案在设备上呈现亮度,它直接影响了人眼的亮度舒适程度。所以结合前期人眼视觉特性来看,无光照时,屏幕自动调至最低亮度,主体背景颜色在屏幕上呈现的亮度应该接近0.034尼特,界面中最亮元素应该尽量低于3.4尼特,才能让用户更加持久舒适地使用 (获取尼特值需要通过屏幕亮度仪测试仪测得)。

  

超过8亿人使用的QQ 总结了夜间模式设计的通用方法

  原则4:保证文字、元素、背景的对比度在能看清的范围内

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:遇到一款好用的APP 该用什么方法分析+学习?

下一篇:刷爆网络的「薛之谦憋大招H5」 设计师是这么做出来的!

  • 18874 文章总数
  • 2191093访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信