火星网校
UI设计：打造炫酷深色主题，这8个技巧超实用！
发布时间：2024-06-23 19:59:15 浏览量：185次
深色主题是近年来非常流行的设计风格之一。苹果和谷歌都将深色主题视为用户界面设计的重要组成部分。深色主题降低了界面亮度，在暗色环境中给用户提供了适度安全感，同时最大程度减少了用户的眼睛疲劳。下面分享在设计产品深色主题时需要了解的8个技巧。
1. 避免纯黑色
深色主题并不一定是纯黑色背景上的纯白色文本，这种高对比度可能会让用户感到痛苦。相比使用纯黑色(#000000)，使用深灰色作为主要表面色更为安全。深灰色界面有助于减轻眼睛疲劳，浅色文本在深灰色表面上的对比度也相对较低。因此，建议将#121212作为深色主题的表面颜色。
深色主题表面颜色建议#121212
2. 避免使用饱和色
在深色主题中避免使用饱和色，因为在深色表面上，饱和色会产生视觉振动，降低可读性。相对较浅的色调（颜色在200-50范围内）在深色主题表面上具有更好的可读性，也不会引起眼睛疲劳。
3. 符合无障碍色彩对比标准
确保在深色模式下内容清晰易读，谷歌推荐文本和背景之间至少具有15.8：1的对比度。使用颜色对比工具进行测试。
4. 文本使用稍暗的白色
在深色主题中，可以使用稍暗的白色替代纯白色以避免产生视觉“震动”，这可以增加文本的可读性。高度强调的文本不透明度应为87%，中度强调文字为60%，禁用文本为38%。
选择稍暗的白色以避免强烈对比
5. 考虑设计情感表达
在设计深色主题时，注意深色和浅色主题会传达不同的情感，利用这一点来确定产品的特性，而不是试图使两者相同，以保持用户体验的独特性。
Shift Dashboard—— Sergey Zolotnikov设计的深色模式
6. 深度沟通
在深色主题设计中，需要建立层次结构并突出重要元素。抬高的表面和组件使用叠加着色，越高的标高颜色越浅。
7. 允许用户切换主题模式
用户需要控制切换主题模式的权利，不建议自动启用深色主题，而是让用户手动选择模式。
‘深色主题’的UI控件
8. 测试浅色和深色外观的设计
在浅色和深色模式下查看用户界面的外观，并根据需要调整设计以适应各种情况。参考材料：深色主题 (材质设计)
该分享内容为火星时代教育原创，专注数字艺术教育30年。火星时代教育开设丰富课程包括游戏设计培训、动画培训、AI音乐创作培训等。想要了解更多？点击咨询
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
