![APP UI 设计手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/571/24172571/b_24172571.jpg)
2.1 UI与色彩
色彩是十分重要的科学性表达,是主观上一种行为反应,在客观上是一种刺激现象和心理表达。色彩最大整体性就是画面的表现,把握好整体色彩的倾向,再去调和色彩的变化,才能做到更有具体性。色彩是一种诉说人情感的表达方式,对人的心理和生理都会产生一定的影响。在设计中,可以利用人对色彩的感受来创造富有个性层次的画面,从而使设计更加突出。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_1.jpg?sign=1739289501-hYahaAPGFNkDlsZ4B9RyJCNBUSDZMhJo-0-598c74e8c8da13e83be47afa904ef914)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_2.jpg?sign=1739289501-r0sBKgcGwVRjMj6cUDjW04QG4vWqB3Yi-0-7ec9fbf6395c623a08233fa3120de087)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_3.jpg?sign=1739289501-19XdTwakxhXO6X4uoRiOC6D0L6JzS9Zg-0-cfee546d4c416f124e461af88c0b81fa)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_4.jpg?sign=1739289501-lJxXhs2f1GLBTin0AtanSzetmGcGsMFH-0-00ecea9e536cae946183d69dfd64eced)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_5.jpg?sign=1739289501-KifQxms1tA1byUsvTjMeFDqdkNZhhpe8-0-f9db12f02b9b19d9acaaa1729b5d9931)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_6.jpg?sign=1739289501-8fbUmDyxKwoMRvnhZ36KP62HZwWcAAW2-0-73e28504799c264224cffeb69461180c)
2.1.1 色相、明度、纯度
色彩的属性是指色相、明度、纯度三种性质。
色相是指颜色的基本相貌,它是色彩的首要特征,是区别色彩最精确的准则。色相又是由原色、间色、复色所组成的。而色相的区别就是由不同的波长来决定,即使是同一种颜色也要分不同的色相,如红色可分为鲜红、大红、橘红等,蓝色可分为湖蓝、蔚蓝、钴蓝等,灰色又可分红灰、蓝灰、紫灰等。人眼可分辨出大约一百多种不同的颜色。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_1.jpg?sign=1739289501-fizNyjJq6oI8Y5JcxKkIJB2PLJWyuOzD-0-613e6ef6e11a11262678b74bc2077834)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_2.jpg?sign=1739289501-YCoavI68XydJ9Tdcqowfdmu5iYB0YBbT-0-6d98c61bcb547c8086f07f482f336606)
明度是指色彩的明暗程度,明度不仅表现为物体照明程度,还表现在反射程度的系数上。明度又可分为9个级别,最暗为1,最亮为9,并划分出3种基调:
◆ 1~3级为低明度的暗色调,给人沉着、厚重、忠实的感觉;
◆ 4~6级为中明度色调,给人安逸、柔和、高雅的感觉;
◆ 7~9级为高明度的亮色调,给人清新、明快、华美的感觉。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_3.jpg?sign=1739289501-0hCHTXKzGLIoD5Bt5ap0i13CKDenycsc-0-694e2075a615afc07b4df95ee17d992a)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_4.jpg?sign=1739289501-Aep5J26IJLiriUp1isUDBTj1L0aNKg06-0-f52e166288b3b79748bbb6bfd9f025b3)
纯度既是色彩的饱和程度,也是色彩的纯净程度。纯度在色彩搭配上具有强调主题和意想不到的视觉效果。纯度较高的颜色虽可给人造成强烈的刺激感,能够使人留下深刻的印象,但也容易造成疲倦感,要是与一些低明度的颜色相配合则会显得细腻舒适。纯度也可分为3个阶段:
◆ 高纯度——8~10级为高纯度,产生强烈、鲜明、生动的感觉;
◆ 中纯度——4~7级为中纯度,产生适当、温和的平静感觉;
◆ 低纯度——1~3级为低纯度,产生一种细腻、雅致、朦胧的感觉。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_5.jpg?sign=1739289501-pW6GVP8lXSje6lhHkdTSHVZFrpweaIeW-0-7227f4fcdede68e02bc2a5f38e43b14b)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_6.jpg?sign=1739289501-tRcZWBnVZPsq2t4bI2iTF2B0T0TXRHuA-0-7a4d3fd4bc747a4a33552d496efd7505)
2.1.2 主色、辅助色、点缀色
APP UI设计必须注重色彩的全局性,不要使色彩偏向于一个方向,否则会使空间失去平衡感。APP UI设计通常由主色、辅助色、点缀色组成。下面就对此一一进行介绍。
1.主色
主色能够定义一个APP主体基调,并发挥着主导作用;能够令整体空间看起来更为和谐,是空间中不可忽视的一部分。一般来说,设计中占据面积比例最大的颜色即为主色。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_1.jpg?sign=1739289501-2hKrYsiBmr8YzAnPoW49Muswd6PnIViM-0-fceb5a003d2efdbe083c637601ebc0cd)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_2.jpg?sign=1739289501-BO5jBPEXpnyfoyegterhThokdWWXcmXp-0-7809cee7588c1f054e6835c945c2817a)
2.辅助色
辅助色可以补充或辅助手机界面主体色的色彩,在页面中它可以与主色是邻近色,也可以是互补色,不同的辅助色会改变空间蕴含的情感,给人带来不一样的视觉效果。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_3.jpg?sign=1739289501-BVuHqQNB6Y9XhNzWaOos6NHOok2Fif3R-0-a0a1ef47e076d365acf079242cad2c81)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_4.jpg?sign=1739289501-JVZzHya0q37VkFIGUqgQqAsfmnt8Ikto-0-b1feec9ad34c22cb7090f75c2b02058b)
3.点缀色
点缀色是在界面中占有极小部分面积的色彩,具有多变性,又可突破整体造型效果,还能够烘托整个应用的风格,彰显出自身固有的魅力。点缀色可以理解为点睛之笔,是整个设计的亮点所在。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_5.jpg?sign=1739289501-aqM4UagtmwihNr5LZxdvTYMeynLrKxQG-0-b9b9f762d9a2d72062afa175c1964ff7)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_6.jpg?sign=1739289501-Z2Jj8XfrtmeSXPcYGP8E65b9GOklhFFn-0-7c6556dd87df471d586e6f06f8ed3563)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_7.jpg?sign=1739289501-9VIoBhYzyp085eAlP9VnzpJ0Cr6eAkTt-0-9460632221bfec24125ae126cd02544e)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_8.jpg?sign=1739289501-THYYD3fxXV2vJdnu3yVScQ62nLRgcmOc-0-2bf11e4021b29653b3cd05bc612877bb)
2.1.3 邻近色、对比色
邻近色与对比色在APP UI设计中运用比较广泛,设计过程中不仅要注重功能项,还可以用色彩来表现界面的丰富景象,与不同的元素相结合,能够完美地展现出界面的魅力所在。
1.邻近色
从美术的角度来说,邻近色在相邻的各个颜色当中能够看出彼此的存在,你中有我,我中有你;在色相环中,两种颜色之间相距90°,色相彼此相近,色彩冷暖性质相同,具有一致的情感色彩。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_1.jpg?sign=1739289501-32B6SYufTSRHAy5OF8LoSUoSCFnL2wad-0-fba1f0de97bc17c1e3d673c504831125)
2.对比色
对比色是人的视觉感官所产生的一种生理现象,是视网膜对色彩的平衡作用。两种颜色在色相环中相距120°或180°。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_2.jpg?sign=1739289501-2sf9mOGKAcZeyFSQ14zyVYJYeIuAECxD-0-12126c3408407a9f0a0bb78991e1d552)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_3.jpg?sign=1739289501-aYlCvRYUgSFxPmTw2XVNv9DydLXbkBIZ-0-1852a5b13837b9b94ff048cba554b450)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_4.jpg?sign=1739289501-RZJv9tHAjDDPCnSKGC5JEfETC44a6A2N-0-2e58bc3149dbe99899e53eec1a8b7fa2)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_5.jpg?sign=1739289501-yopnLzQp0vhwh49QgvERKMEH64XT2rgf-0-5bd9faf329a44ddc4eff7f7cbce4ebf8)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_6.jpg?sign=1739289501-wuI8aATimcnp4hWfbEmxtTiHGLozkmUV-0-13f7ee352b93477dbf0e7b8fcc95c4ee)