七彩设计网
  • 首页
  • 干货导航
    • 入门教程
    • 设计检查
    • 疑惑解答
    • 往期活动
    • 站长历程
    • 公号联盟
  • 教程
    • 视频教程
      • B站视频集
      • AE视频集
      • 调整中
    • Photoshop
    • Illustrator
    • XD
      • 软件下载
      • 快捷键
    • AE动效
      • 视频教程
    • SKetch
    • icon图标
      • 布尔运算
    • APP设计
      • 标注
      • 切图
      • 尺寸
      • 适配方法
      • 设计规范
    • 网页设计
      • 设计规范
    • 交互/原型
      • Flinto
      • Principle
      • mockplus
    • H5设计
    • 小程序
    • 色彩搭配
    • 版式构图
    • Banner
    • 手绘插画
    • LOGO字体
    • 其他教程
  • 经验
    • 咋找灵感
    • 流行趋势
    • 设计原则
    • 设计规范
    • 设计理论
    • 学习方法
    • 项目总结
    • 话题讨论
  • 学堂
    • 在线课程
    • 0基础班
    • UI高级班
    • 学员作品
    • 视频课程
  • 交作业
    • 图标作业
    • APP作业
    • 动效作业
    • 后台界面
    • 学画原型
    • 绘画作业
  • 欣赏
    • 佳作欣赏
    • APP截图
    • ICON欣赏
    • 启动图标
    • 插画欣赏
    • iPad界面
    • 后台界面
  • 下载
    • APP截图包
    • 展示模板
    • uikit
    • APP模版
    • PS插件
    • 字体下载
    • icon下载
    • UI规范
    • 网站模板
    • 精品素材
    • 神器工具
    • 在线工具
    • 软件后台
  • 找工作
    • 面试技巧
    • 简历作品集
    • 职场疑惑
    • 私活报价
    • 作品样本
免注册快速登录
几何

APP设计实例解析,深色模式为什么突然就火了?

几何 APP设计 2020-09-30 389浏览

苹果在2019年6月发布的iOS13中增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10的发布同样搭载“黑暗模式”。为了适配系统,不少APP纷纷推出了深色模式。

使用OLED屏幕的设备,在纯黑色下可以有效降低耗能,进一步延长续航时间。除此之外,深色模式还可以有效解决OLED屏烧屏、费眼的问题。小摹对几款常用APP的深色模式进行了体验,并为大家分享我的体验感受。从这些案例中,或许我们可以找到深色模式流行的原因。

 

微信

深色模式是一种可以降低视觉疲劳且有助于用户专注的全新外观。与传统夜间模式最大的区别是,深色模式不仅保证了弱光环境下的体验,在强光下仍具有可读性。

虽然深色模式也被叫做暗黑模式,但并不代表要将底色变为纯黑。如果使用100%的纯黑底色,长时间阅读时,反而会造成眼睛疲劳。微信的深色模式里,聊天背景及主页面底色采用的就不是纯黑,而是深灰色。

此外,纯黑和纯白的高对比度也会造成视觉疲劳,因此微信的深色模式中,使用了浅灰色作为字体颜色,既能保持清晰显示,又降低了对比度,减轻了用户的阅读负担。如果设置了聊天背景,聊天背景图片也会自动调暗,便于阅读。

虽然整体色彩加深,但微信在设计时仍保持着清晰的层次。比如置顶聊天窗口的灰色会比其他窗口稍浅,聊天消息的标题和摘要也采用了明度不同的浅灰色来区分层级。除此之外,微信的彩色线型图标在黑色背景上也变得更具科技感,颜值提升了不少。

微信的深色模式除了可以帮助用户缓解夜间视力疲劳外,在白天使用也几乎没有障碍,总体来说,体验感觉较好。

 

QQ

如果说微信的深色模式更加注重颜值,那么腾讯旗下的另一款社交工具QQ则更加注重用户的深夜阅读体验。

首先,微信在切换深色模式时,需要重启软件后才能生效。QQ在切换夜间模式时,则采用了一个平滑的渐变过渡,让用户可以快速适应场景切换。其次,为了减少夜间光线对人眼的刺激,QQ降低了信息与背景的对比度,对用户头像等图片增加了遮罩,使其在弱光环境中看起来更加柔和。

当用户开启夜间模式时,还会有一个设计彩蛋:部分图标会根据模式切换而改变。如消息图标会从笑脸切换为休息的状态,这种具有趣味性的设计,也会拉近用户与产品之间的距离。

 

豆瓣

普通模式下的豆瓣APP背景色为纯白色,白天看偶尔都觉得有些刺眼,更不用说睡前必刷豆瓣的用户有多煎熬。在被用户骂了一轮又一轮之后,豆瓣APP终于也推出了夜间模式。

豆瓣的夜间模式和微信一样,同样保留了五颜六色的图标。同时,豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级,保证了信息结构的准确传达。

在配色方面,为了避免“死黑”让整个界面太过死板,豆瓣在黑色中还混入了蓝紫色,让背景色看上去更加通透。底部导航等主要按钮则使用了豆瓣的主色调绿色,在夜间模式下既能清晰展示,又不会显得过于刺眼,同时也保证了在强光模式下可以正常浏览。

 

知乎

另一款社区APP知乎和豆瓣存在同样的问题。知乎在设计夜间模式时,知乎采用了主色调蓝色+深灰色的搭配,深蓝和灰色作为背景,展示出的效果既有强烈的对比,又摆脱了深色的压抑感。

与豆瓣不同,知乎的文本颜色选择了对比度更低的灰色,通过字重进行区分。虽然这样会让整体页面看起来比较和谐,但内容变得不够突出,无法在最短时间看清标题,对于一个以内容为主的社区来说,无疑会给用户带来不太好的体验。

知乎在设计夜间模式时目标应该很明确,即只考虑用户在夜间的使用,因此整体色调都很暗,在强光环境下无法正常浏览。

 

bilibili动画

B站刚推出深色模式时收到了许多批评,字体和背景色对比不强,视频封面仿佛蒙了一层雾,一刀切的暗化处理,导致用户浏览体验极差。

在最近一次更新中,B站终于对深色模式进行了优化,适度提亮了视频封面和图标的亮度,将多彩型图标调整为了单线型图标,既统一了画面风格,又提升了界面阅读体验。

设计深色模式时,必须注意各页面的配色及对比度都要尽可能地统一。在深色模式下点开B站创作中心或推荐服务中的版块时,加载画面仍然是白色,突然出现的强光无疑会对眼睛造成刺激,对于用户来说体验感也极差。

 

百度网盘

高饱和度的色彩会在深色背景上产生炫光的视觉效果,引发视觉疲劳。百度网盘的深色模式下,背景接近全黑,图标却没有太大的调整,给用户带来的阅读体验并不好。

同样,由于背景颜色太深,导致百度网盘的文本和背景对比度太大,也存在难以阅读的情况,对于诵读困难症患者来说,在阅读时会感觉文字在旋转、模糊。

在设计深色模式时,除了背景颜色尽量使用深灰色以外,还需要确保绝大部分区域保持深色,尽可能使用数量有限的色彩。把握好对比度和饱和度,才能设计出舒适的深色模式。

综上所述,合理使用深色模式,可以降低屏幕亮度,不仅可以减少耗电量,还能减小对自己或他人眼睛的刺激。除此之外,深色模式对背景色、文字以及系统图标的颜色都进行了优化处理,可以提升阅读舒适度。对于喜欢深色或黑色系的朋友来说,深色模式更是一种不同于普通模式的全新体验。

除了APP,不少生产力工具也都采用了深色界面,比如PS、摹客等。以摹客为例,用户在进行设计时,深色界面不仅仅能降低眼睛疲劳度,还能突出你的设计内容,打造沉浸式的设计体验。

随着苹果“黑色模式”的推出,深色模式逐渐成为APP设计的流行趋势。作为设计师,也一定要掌握APP深色模式的设计技巧。从上述APP设计案例中,我为大家总结了以下几点建议以作参考:

  • 1.避免使用纯黑色;
  • 2.避免使用高饱和度的颜色;
  • 3.文本颜色选用高亮色,但不宜使用纯白;
  • 4.做好情感化设计;
  • 5.注意结构和层次感;
  • 6.允许用户自由切换深色模式和普通模式。

 

原文地址:UI中国

作者:摹客

 

转载请注明:七彩设计网 » APP设计实例解析,深色模式为什么突然就火了?

登录收藏
 
你可能喜欢的:
设计师成长过程中,一定要掌握这六条原则设计师成长过程中,一定要掌握这六条原则
耍好控件 | 如何做好「按钮」的用户体验?耍好控件 | 如何做好「按钮」的用户体验?
【交互设计】新人转化落地页【交互设计】新人转化落地页
焦虑求职季又至:2020UI设计师作品集如何准备?焦虑求职季又至:2020UI设计师作品集如何准备?
糟糕的设计是如何影响电商销量的?糟糕的设计是如何影响电商销量的?
QQ音乐 vs 网易云音乐,用户体验哪家强?
耍好控件|全面解析弹窗交互设计
产品改进没方向?不妨从用户反馈找找灵感(一)
设计沉思录 | 如何做好“有人情味的”生活服务型产品设计?
设计沉思录|“下沉市场”设计美学探索:58本地版首页改版
继续浏览有关 APP设计mockplusUI设计经验 的文章
上一篇 个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】 ​设计师必看的字体与排版应用指南 下一篇
文章评论

软件教程

  • PS教程
  • AI教程
  • AE教程
  • XD
  • Sketch
  • Principle

今日文章

  • 《符号学》在设计领域的应用《符号学》在设计领域的应用2020-10-03
  • 做设计有一道及格线,标准肯定是“它”做设计有一道及格线,标准肯定是“它”2020-10-02
  • ​设计师必看的字体与排版应用指南​设计师必看的字体与排版应用指南2020-10-01
  • APP设计实例解析,深色模式为什么突然就火了?APP设计实例解析,深色模式为什么突然就火了?2020-09-30
  • 个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】个性的魅力,音乐、戏剧海报集锦【贺冰凇视觉艺术】2020-09-30


建议/投稿 | 关于我们 | 免责声明 | 文章存档 | 标签云 | 粤ICP备16101670号-2 © 2020 七彩设计网