项目三 智能家居APP的界面配色设计与原型交互设计.pdfVIP

UI体验设计实战

教学PPT

上海交通大学出版社

项目三智能家居APP的界面配

色设计与原型交互设计

3.1任务一智能家居APP的界面配色设计

1.色彩关系

光学三原色（显示屏RGB）：红、绿、蓝。光学三原色混合后，组成显示屏颜色，三原色同时相加为

白色，白色属于无色系（黑白灰）中的一种。色彩三原色：红、黄、蓝。色彩三原色可以混合出所有

的颜色，同时相加为黑色，黑色属于无色系（黑白灰）中的一种

光学三原色色彩三原色

3.1任务一智能家居APP的界面配色设计

2.色彩的属性

色相明饱和

（1）色相（2）饱和度

饱和度通常是指色彩的鲜艳度，也就是色彩本身纯净的程度。

色相其实就是颜色的“相貌”,各类色彩的相

貌称谓，如大红、普蓝、柠檬黄等。饱和度高的色感强，饱和度低的色感就相对要弱。

（3）明度

明度是指色彩的明暗程度。

•色彩明度最高为：白色色彩明度最低为：黑色

3.1任务一智能家居APP的界面配色设计

3.配色法则

（1）同色系配色法则

色环上相距0°的色彩为同类色，是以一个颜色为主，然后利用颜色的深浅来进行搭配的方法，即色轮

中，一种色相的暗、中、明三种色调，如蓝与浅蓝，红与粉红等。同类色搭配视觉效果统一、清新、含蓄。

优点：画面统一，搭配时相对简单而且一般都不会给人难看的感觉。

3.1任务一智能家居APP的界面配色设计

3.配色法则

（2）邻近色配色法则

色环上处于90°之间的两种色彩为邻近色，如红与黄，绿与蓝等。采用邻近色搭配效果柔和、文静、

和谐，但处理不当也会产生单调、模糊的感觉，此时可通过调节色彩的明度和纯度来增强视觉效果。

3.1任务一智能家居APP的界面配色设计

3.配色法则

（3）互补色配色法则

互补色是在色相环上180°相对的两个颜色，而对比色则是在色相环上120°到180°范围内相对的两个颜色。

在选择APP界面的色彩，控制补色的明度、纯度和使用比例，可使界面产生明显的对比和视觉冲击，如

下图所示。

3.1任务一智能家居APP的界面配色设计

4.UI设计中的颜色类型

界面由各种色彩搭配而成，色彩所占的比例决定了色

主色

彩的级别，一般界面的色彩可分为主色、辅助色和点睛色

辅助色

3个级别。它们的作用不同，应用位置也各有讲究。如图

所示。

点睛色

主色：决定界面色彩基调，能直接影响视觉传达效果和用户情

绪，通常占界面视觉比例的75%左右，一般用在Logo和导航栏。

辅助色：可以是一种或多种色彩，用于辅助主色，使界面更加

完整。通常占界面视觉比例的20%左右，一般用在各种控件、

图标和插图上。

点睛色：是界面中最为醒目的色彩，通常占界面视觉比例的

5%左右，一般应用在提示性图标位置。

3.1任务一智能家居APP的界面配色设计

【任务实施】

通过对项目任务提供的首页原型图分析，发现该

页面主要采用了扁平化的设计风格，为体现智能

家居产品的科技感，在制定配色方案时可以考虑

选择以蓝色为主，采用同色系配色法则进行色彩

搭配，使整体界面干净利落。

3.2任务二智能家居APP的图标设计

1.什么是图标？

图标设计从某个角度来说，图标有点类似标志、徽标都是为了让人们能够被它吸引记住。

广义：用来传达意义的图形符号。