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

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 全新 UI 视角帮你掌握「界面三重构」的知识点,干货。

    界面三重构给设计师提供一个崭新视角,相关的知识、理论、技巧还不完备,设计师可以根据自己的经验和阅历进行迭代。 当不确定成为常态,公司的组织架构频繁变动,产品不断迭代,设计师需要跟随用户需求、业务、产品…

    2023年3月2日 SEO操作
    019
  • 灵感源於借鉴 盘点那些能让你获得灵感的设计网站

    灵感通常来源於借鉴。对於要制作出更精湛时尚的网站,除了设计者的思路要更加宽广,还需要藉助参考某些作品而获得灵感。下面,小编将为大家提供一些小众网站中被埋没却又了不起的设计,希望能提供各位源源不断的灵…

    2022年6月25日 建站资讯
    0194
  • 网页设计规则:这些网页设计技巧,你试过多少个?

    网页设计技术的高速发展,不仅给用户提供更细致深入的需求,也让设计师进行细腻独特的表达。如今设计网站已经不仅仅局限单一的技巧,而是结合多种设计技巧,才给用户呈现更好的体验。那麽,这些网页设计技巧,你试…

    2022年6月25日 建站资讯
    0121
  • 页面设计与产品思维结合的好处

    以产品思维去进行网页设计的,对用户体验来说它能让网页更被用户所用,对於用户体验的提升更有帮助。 以产品思维去设计网站,前提是要求设计师先全面地去了解到产品的目标、价值、用途等。只有这样,才能够更好地服…

    2022年6月25日
    0165
  • 我来教你浅析:网页设计的基本流程。

    虽然网页设计不是一件非常麻烦的事情,但需要遵循许多步骤才能让网站上线。设计一个新网站时,找到满意的主机服务,有虚拟主机,专用服务器等选择,注意要考虑是否需要备案,备案一般国内主机要一个月左右的时间。 …

    2023年6月16日
    01
  • 网页设计与网站制作的发展趋势。

    设计与开发之间有一条界限,用PS设计网页布局就够了吗?也许五年前够吧!如今,互联网用户的需求越来越大。如果你追求华而不实的设计,我相信你很快就会被时代抛弃。它不再是单纯的华丽,而是注重功能。新的一年或…

    2023年2月21日
    01
  • 浅谈视觉稿

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

    2022年6月11日
    0148
  • 在进行网页设计时要做好优化

    现在网站非常的多,人们在进行搜索的时候,可以看到有许多相关的网站出现,所以人们在对网页设计的时候,如果想使自己的网站能够有较多的浏览量,那么一定要做好网站的优化,使得网站的排名能够比较靠前,这样人们…

    2019年8月2日
    0195

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息