UI设计基础知识:Dark Mode的设计要点有哪些

自iOS和Andriod相继推出Dark Mode後,Dark Mode成为了APP UI设计中的一个必备选项。从Light Mode过渡到Dark Mode,我们需抽离原来的惯性思考,从UX设计的视角出发,探讨用户到底想要怎样的Dark Mode效果。

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

UI设计基础知识:Dark Mode需遵循哪些设计原则?

在进行APP UI设计之前,首先我们要建立对Dark Mode设计的正确思维,才能确定UI设计的出发点及落脚点。也就是说,在设计开始到结束这个过程,我们都需要遵循Dark Mode的设计原则来进行。

● Dark Mode设计原则一:保证操作上的熟悉性

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

无论产品有多少Mode,我们都应该确保用户能通过相同操作而获得相对应的预期结果,而不是影响用户的惯性操作动线,否则会破坏用户对产品早已形成的心理模式。

● Dark Mode设计原则二:维持平台上的一致性

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

Dark Mode的设计工作并不能仅针对某一终端设备来进行,而是针对所有终端设备。这就要求我们需要综合各个终端设备的特点,通过不断试验来保持产品UI设计在各终端设备的属性上,能保持一致性,包括颜色、外观以及模式切换等。

● Dark Mode设计原则三:清晰的信息层级

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

无论用户正在使用哪种模式,他在相同界面所关注的内容都是一致。因此,我们在设计Dark Mode过程,需继续保持Light Mode的信息层级特性,确保用户能轻松地获取想要的信息以及完成主要的操作。

● Dark Mode设计原则四:无障碍操作

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

关於「无障碍操作」这一设计原则,我们大致可分解为四个方面来分析:

1. 视觉无障碍设计:应遵循WCAG(Web内容无障碍指南)。

2. 听觉无障碍设计:应确保界面所有空间在没有声音时都能正常使用。

3. 行动无障碍设计:应给予辅助功能(如语音控制功能),帮助用户完成操作。

4. 认知无障碍设计:应配备辅助理解工具(如翻译、释义、链接等),帮助用户理解其含义,并保证信息的准确性。

● Dark Mode设计原则五:保持简单

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

「简单交互」一直是用用户体验设计的核心,目的是让产品更容易被使用,甚至没有经验的用户都可通过简单的学习快速掌握产品的正确使用方法。在进行APP UI设计过程中,Dark Mode应延续Light Mode「简单交互」的原则,保证用户获取简单、掌握简单、操作简单。

UI设计基础知识:Dark Mode的设计要点有哪些?

简单来说,Dark Mode的设计原则主要是偏向「交互」而言,下面我们从「视觉设计」出发,探讨如何从视觉方面将Dark Mode更好地呈现出来。

● Dark Mode设计要点一:避免使用纯黑色

在我们的认知中,纯黑色往往被定义为「百搭色」,然而套入到UI设计中纯黑色却是一个极为尴尬的颜色。即使在Light Mode的界面中,我们很少会看到纯黑色的元素出现,而是大多会使用深灰色替代。

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

纯白背景与纯黑文字搭配,我们的眼睛往往会因为这种巨大的颜色亮度落差而造成视觉刺激,需要一定时间去适应。另外,长时间观看这种光线对比悬殊的画面,眼睛也会明显感觉到疲劳。

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

同样道理,纯黑背景与纯白文字组合所呈现视觉感受殊途同归,结论不言而喻。因此我们在设计Dark Mode界面时,尽量避免使用纯黑色。

● Dark Mode设计要点二:避免使用高纯色

在Light Mode下,纯度(饱和度)较高的颜色往往会带给我们激情、生动、活力的感受,同时纯色与浅色背景恰到好处的对比度,也会让我们的眼睛很好地适应且不会出现违和或刺眼的感觉。

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

但个别纯色放到Dark Mode後会出现恍惚、震动的视觉感受,可读性差,容易造成视觉疲劳,影响界面整体的用户体验。面对这种情况,我们需要对颜色进行减低纯度的处理,使元素更容易被识别和阅读。

● Dark Mode设计要点三:规范使用颜色对比

在UI设计过程中,无论是文字、图标、图标,亦或是图像,都应该确保与背景颜色的对比度,以帮助有视力障碍或阅读困难人群能更好地使用产品,从而提升产品的价值。

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

根据WCAG2.0(Web内容无障碍指南2.0)对比度的标准,界面元素和背景的对比度至少要满足AA级标准,即4.5:1的对比度。在iOS规范中,建议对比度至少满足7:1;在Andriod规范中,因涉及不同背景层级的概念,甚至要求主要文字与最深色背景的对比度达到15.5:1的标准。

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

因此,我们可以根据产品特性建立属於自己的对比度规范标准,保证让用户看到且影响判断的元素,与背景颜色对比度不低於4.5:1。

● Dark Mode设计要点四:规范设置元素层级

界面内各元素都是用户获取信息的途径,规范设置界面内元素的层级,是提升产品用户体验的关键。从Light Mode 过渡到Dark Mode,保持各个元素层级一致的同时,Dark Mode也需要一套全新的设计理论方法:

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

▶ 组件(包括区块、卡片等):设置不同透明度,通过与背景色不同明度的对比,产生视觉效果差,让用户第一时间看到他们想要的内容,还可清晰地分辨距离自己更近的内容。

▶ 文字:不同优先级的文字,设置不同透明度,有效保证用户的阅读效率,同时还能帮助他们更好地区分清晰逻辑关系,从而提高该界面的用户留存率。

● Dark Mode设计要点五:自由切换

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

当我们使用智慧型手机启动Dark Mode时,系统会弹出「是否支持根据时间自动切换两种模式」的问题,这种建议有点像「到了傍晚手机会自动切换到护眼模式」的设置。然而,护眼模式不会将手机界面进行翻天覆地的改变,而是适当地增加屏幕色温、减低颜色对比度,以缓解眼睛疲劳之感。

但Dark Mode明显不是这样的操作,而是改变我们对界面的视觉感受,价值Dark Mode并不能完全传达Light Mode相同的情感诉求,这种设置有可能会给用户提供更差的体验。因此,将选择权交给用户,在应用显眼的位置或设置界面提供选项,让用户根据喜好自由且主动地完成模式切换。

● Dark Mode设计要点六:场景测试

UI设计基础知识:Dark Mode的设计要点有哪些

UI设计基础知识

Dark Mode并不适合所有场景使用,例如在日间白天或灯光环境下,Light Mode的白底黑字特性能让界面很好地适应光照环境下,但这种情景下反而会让Dark Mode处於劣势。

我们需要根据不同的使用後环境、场景的特性,针对Dark Mode中的元素进行反覆测试与调整,保证无论是白天还是夜间,都能清晰读取信息、舒适实用应用,最终达到理想效果。

了解有关Dark Mode的设计原则与要点後,我们需要将这些理论融入到实际的UI设计工作中,并验证这些理论是否符合公司的产品应用以及用户的使用场景。如果您还想了解更多关於Dark Mode的内容或正在找一间专业靠谱的网站制作公司为您打点一切,欢迎谘询我们!

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/42023.html

(0)
上一篇 1天前
下一篇 1天前

相关推荐

  • 方块堆叠样式用於视觉效果的两个要素

    一般来说,方块堆叠样式多用於如今的界面排版布局上,处於整体视觉当中的辅助地位。但只要运用恰当,它可以成为页面设计当中视觉的一个主体。 但是,将方块堆叠样式用作页面视觉元素的主体时,需要满足这两点要求: ...

    2022年6月12日
    0240
  • 网站设计最关键的几点到底是什么?

    如今,网站设计对于一个企业来说,所起到的作用是至关重要的,在互联网时代,更需要顺应社会的潮流,才能够真正的有利于企业的长远发展。因此,一个网站能否抓住浏览者的眼球,如何才能让浏览器不厌烦,从而停留时间...

    2019年10月30日
    0900
  • 优秀设计作品参考案例:向原研哉学习极简主义风格

    早前,「小米花了200万请日本知名设计师原研哉重新设计Logo」的话题火爆中国内地网络。 优秀设计作品参考案例 小米新Logo是否值这个价钱?可以说是见仁见智。 但对原研哉大师有一定了解的朋友相信都知道,原研哉绝对...

    1天前
    090
  • 浅谈视觉稿

    视觉稿是高保真的静态网页设计图,通常来说,视觉稿其实是网站视觉方面的设计草图和终稿。出色的视觉稿应该具备以下2点: 能够表达网站建设的信息框架,静态样式出网站的内容和功能; 能够发挥在视觉角度审阅网站建...

    2022年6月11日
    0140
  • 网页设计中如何运用好颜色?

    颜色绝对有着无穷无尽的魅力,他能够不断的给我们带来更多平淡无味的感觉,当然有的时候一些比较精彩的颜色也会让你感觉特别的漂亮,很多情况下,大家最关注的就是网页设计的过程当中如何运用好颜色,毕竟如果在进行...

    2019年9月23日
    0560
  • 界面动效如何避错

    1、 考虑手绘性质:手绘和工具的实际设计,需要切实的考虑到参数,手绘很多时候只是方便於创意和灵感,但是对於参数方面却没有特别的限制。 2、 不要为了视觉效果而牺牲叙述:界面中的交互需要承载着合理的叙述性质...

    2022年6月13日
    0260
  • 开展网页设计前你需要了解的事

    经常有客户会问我们这样的问题:为什么一样是做网站,你们的网页设计报价比其他网页设计公司高很多? 对于这个问题,我想作为一个从业8年的专业人士角度为你讲解一下,帮你分析一下价格差在了哪里,这些钱需要省吗?...

    2019年7月25日
    0540