火星网校
如何玩转UI设计中的暗黑模式——黑夜也是光明
发布时间：2024-06-09 14:05:29 浏览量：134次
晚上使用APP的时候，眼睛被刺眼的白色界面弄得头疼？没关系，越来越多的设计师开始推崇两种不同的主题模式——明亮和黑暗。下面就让我来教你如何巧妙运用UI设计中的暗黑模式。
为什么选择暗黑模式？
黑暗模式有诸多优势：
- 弱光环境下具有更高的可读性；
- 降低设备屏幕亮度；
- 改善视觉工程学，适应不同光照条件。
因此，在晚间使用数字设备会更加舒适。
深色模式的利与弊
深色模式能：
- 减轻眼睛疲劳；
- 构建视觉层次；
- 赋予界面神秘感；
- 营造高端氛围；
- 提高夜间可读性；
- 确保夜间使用舒适（如娱乐APP在晚间使用）。
不过，在某些情况下，应避免使用暗黑模式。
实用技巧
避免使用纯黑：
设计暗黑模式时，避免直接使用纯黑色背景。
降低颜色饱和度：
深色模式避免使用饱和色，以提升可访问性。饱和色在深色背景下会产生光学振动，容易造成眼部疲劳。
建立两种调色板：
为暗黑模式和明亮模式各创建一个色板，以匹配两种主题需求。
注意可访问性：
确保深色主题下正文和背景对比度足够，以提高可读性。
避免过度使用阴影：
在黑暗模式中，减少阴影的使用，可以通过海拔高度构建层级结构。
遵循平台规范：
各平台都有制定规范，可帮助实现黑暗主题。
iOS人机界面指南
在iOS设计中，要专注于内容，在浅色和深色外观中进行设计测试，以确保在黑暗模式下的内容清晰易读。
颜色：
- 使用动态颜色，保证足够色彩对比；
- 调整白色背景颜色，使其更柔和。
图标和图像：
- 优先使用SF Symbols；
- 设计清晰易读的彩色和单色图标。
文本：
- 使用系统标签色；
- 采用系统视图绘制文本字段和文本视图。
Material Design主要原则
- 使用深灰色替代纯黑色；
- 运用有限重音色；
- 节约能源，尤其对OLED设备；
- 提升可访问性。
在不同环境下进行测试，确保黑暗模式下的界面设计合理，能自由切换主题，让用户控制UI的变化。
总结
深色主题如今备受青睐，各主流平台都开始支持暗黑模式，用户对应用界面也有着相关需求。抓住规范，创建符合项目需求的黑暗主题界面。
© 文章来源：UXMISFIT.com，作者：THALION
译者：小阿田的设计笔记
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
大家今天走运了,我就把自己总结出来的学习UI设计的一些经验与大家一起分享吧。想做一个好的UI设计师除了应该具有一定的审美能力,还要了解整个产品的...
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
最新文章
