UI设计：打造炫酷深色主题，这8个技巧超实用！

UI设计：打造炫酷深色主题，这8个技巧超实用！

深色主题是近年来非常流行的设计风格之一。苹果和谷歌都将深色主题视为用户界面设计的重要组成部分。深色主题降低了界面亮度，在暗色环境中给用户提供了适度安全感，同时最大程度减少了用户的眼睛疲劳。下面分享在设计产品深色主题时需要了解的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. 测试浅色和深色外观的设计
   在浅色和深色模式下查看用户界面的外观，并根据需要调整设计以适应各种情况。参考材料：深色主题 (材质设计)