UI实战系列教程！ NO.04 夜间模式界面设计

本集讲师：@格尔

免费使用即时设计，请点击右侧链接👉 即时设计

获取海量免费设计资源，请访问👉 资源广场

获取本集课程课件及演示案例源文件，请访问👉 教程文件

案例效果图

本集教程内容概要

本集视频是10个超实用UI设计案例「UI实战系列教程」的第四集，主要讲解的内容有夜间模式介绍、色彩规范讲解、白色与夜间模式设计案例以及案例总结。

即时设计是一款在线可协作的UI设计工具，目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。

如果想要了解即时设计的基本功能和操作用法，可以观看即时设计入门系列教程：

编者按：图文内容简概为视频内容的提炼总结，想要了解详细教程内容，请观看文章顶部完整的视频教程。

1、夜间模式的特点

夜间模式是一种主题设置，能够让处于弱光环境下的用户通过这个设置，降低屏幕亮度，并且整体系统主题切换为深色的色彩主题。它可以缓解我们的视觉疲劳，在弱光环境下带来更佳的阅读体验，还能让oled屏幕的设备更加省电。

2、色彩规范讲解

iOS和安卓两大平台有各自的夜间模式色彩规范，主要有背景色、文字色、品牌色、辅助色等。我们在设计之前可以参考官方的色彩设计规范。

3、白色界面设计案例

首先准备常规的白色背景界面，功能的安排需要做到有迹可循，从用户需求的角度出发进行设计。

4、夜间模式设计案例

在白色界面的基础上进行夜间模式的设计，先确立好各个层级的颜色，然后上色即可，后续也可以根据需求进行修改。

下一集将会带大家一起制作PC端界面，请持续关注我们的教程，我们下一期再见～

看完这集教程的小伙伴还在看...