- APP UI 设计手册
- 孙芳编著
- 1270字
- 2021-03-27 20:56:13
2.1 UI与色彩
色彩是十分重要的科学性表达,是主观上一种行为反应,在客观上是一种刺激现象和心理表达。色彩最大整体性就是画面的表现,把握好整体色彩的倾向,再去调和色彩的变化,才能做到更有具体性。色彩是一种诉说人情感的表达方式,对人的心理和生理都会产生一定的影响。在设计中,可以利用人对色彩的感受来创造富有个性层次的画面,从而使设计更加突出。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_1.jpg?sign=1739297210-aBgTLWNp3Np899aRcmD0SHxPMI8kdly5-0-57d22a8019871b0fe5dc49e0778bb635)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_2.jpg?sign=1739297210-sysUOJk5K0ut3uR6dhQHTIYSgCiaGtDy-0-d10f0d5d41ecedb53ecfa0dd1299412f)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_3.jpg?sign=1739297210-vc75v4NxEnP7sZuj9kbqgaCvLfyNiV1C-0-bcfcd41227a442a394e88ae253504062)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_4.jpg?sign=1739297210-vBTI8CCKiTIFIqK2yJb61T0TKQBddpdA-0-1ea2f76bdca9ff71081621234a983665)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_5.jpg?sign=1739297210-MJ9nGAW74Ro4V1AxksrCLUR3gNtzpF3i-0-e6ef71615f95b20590f183a06b1980f3)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P20_6.jpg?sign=1739297210-43ZXgMBnDlsbC4P4f58DEhsYjXM9rTVg-0-a0fe9d1c59400d0a452df89e0847b59a)
2.1.1 色相、明度、纯度
色彩的属性是指色相、明度、纯度三种性质。
色相是指颜色的基本相貌,它是色彩的首要特征,是区别色彩最精确的准则。色相又是由原色、间色、复色所组成的。而色相的区别就是由不同的波长来决定,即使是同一种颜色也要分不同的色相,如红色可分为鲜红、大红、橘红等,蓝色可分为湖蓝、蔚蓝、钴蓝等,灰色又可分红灰、蓝灰、紫灰等。人眼可分辨出大约一百多种不同的颜色。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_1.jpg?sign=1739297210-UTaJWIUQcXIEHPuk3Stdxdhnmu5gpX6W-0-2fc10457c68cebe44d91d49a488f657b)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_2.jpg?sign=1739297210-DCc5v8Driyqcpo2bHbAQgFzaD4HHOoB0-0-66d095bd723dc230eea1bdd8b6d9de97)
明度是指色彩的明暗程度,明度不仅表现为物体照明程度,还表现在反射程度的系数上。明度又可分为9个级别,最暗为1,最亮为9,并划分出3种基调:
◆ 1~3级为低明度的暗色调,给人沉着、厚重、忠实的感觉;
◆ 4~6级为中明度色调,给人安逸、柔和、高雅的感觉;
◆ 7~9级为高明度的亮色调,给人清新、明快、华美的感觉。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_3.jpg?sign=1739297210-m2kIFzG4949XZrWQxQjrWqE3uSly6ULL-0-e4a4a0ad5b8d85203e7a1d2022852b71)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_4.jpg?sign=1739297210-OaSjAVq5QCpL0q7a1ueIUuUZahdIm4Ru-0-a0486b6efd1210765a079121e47ac69c)
纯度既是色彩的饱和程度,也是色彩的纯净程度。纯度在色彩搭配上具有强调主题和意想不到的视觉效果。纯度较高的颜色虽可给人造成强烈的刺激感,能够使人留下深刻的印象,但也容易造成疲倦感,要是与一些低明度的颜色相配合则会显得细腻舒适。纯度也可分为3个阶段:
◆ 高纯度——8~10级为高纯度,产生强烈、鲜明、生动的感觉;
◆ 中纯度——4~7级为中纯度,产生适当、温和的平静感觉;
◆ 低纯度——1~3级为低纯度,产生一种细腻、雅致、朦胧的感觉。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_5.jpg?sign=1739297210-XhNZRe7qiitZKK5kteykP3BepPoPPMX8-0-dcde88a3ba62025ca11a44383d605b7d)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P21_6.jpg?sign=1739297210-KUzKtpNg0R0lXwLMDwoHA5ZfPfUMknvl-0-2dbd6686ef92294ce3fbf468984387a2)
2.1.2 主色、辅助色、点缀色
APP UI设计必须注重色彩的全局性,不要使色彩偏向于一个方向,否则会使空间失去平衡感。APP UI设计通常由主色、辅助色、点缀色组成。下面就对此一一进行介绍。
1.主色
主色能够定义一个APP主体基调,并发挥着主导作用;能够令整体空间看起来更为和谐,是空间中不可忽视的一部分。一般来说,设计中占据面积比例最大的颜色即为主色。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_1.jpg?sign=1739297210-DRLHzSFPTENROwnYofJ1RlwmgMziznsl-0-ebce3dfb58fb0488df77532aa8c926a5)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_2.jpg?sign=1739297210-PwGWc1P2rQTJZanXsd9uLiTKRhwqmfZu-0-0a15ffd9b06dc68ea85c772d6d8a613d)
2.辅助色
辅助色可以补充或辅助手机界面主体色的色彩,在页面中它可以与主色是邻近色,也可以是互补色,不同的辅助色会改变空间蕴含的情感,给人带来不一样的视觉效果。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_3.jpg?sign=1739297210-DwOMenQWyBJOGwRr4bMuCSvRTNt5uHix-0-6bec1555248652905050432e9ee62b0c)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_4.jpg?sign=1739297210-ASJC4D0ryiXSnUtZ8hZJrAbuf20JKqum-0-039e13b993512547b449247d8b26bdb6)
3.点缀色
点缀色是在界面中占有极小部分面积的色彩,具有多变性,又可突破整体造型效果,还能够烘托整个应用的风格,彰显出自身固有的魅力。点缀色可以理解为点睛之笔,是整个设计的亮点所在。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_5.jpg?sign=1739297210-DwQcwudDyogkSKTPMbvcPAdGBYG5cdKv-0-3ed8c4d65ddd3de3d2677b9c569963d9)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_6.jpg?sign=1739297210-CkzcK9b1sXSuwkqTEdjIYPBy0B9eEi4A-0-b8ced23de7d6386767f51ba44118e073)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_7.jpg?sign=1739297210-yU4FTmLtdjLrn5qdr6NUaLpjgafDFitR-0-831efd6a2a8b00f7bfebb56aea4cb3d5)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P22_8.jpg?sign=1739297210-Rv8ZovRZur7Rb1YcZnUQ6mUTgMTQYd0s-0-14505b1efc5bc501f38b260bacc058b8)
2.1.3 邻近色、对比色
邻近色与对比色在APP UI设计中运用比较广泛,设计过程中不仅要注重功能项,还可以用色彩来表现界面的丰富景象,与不同的元素相结合,能够完美地展现出界面的魅力所在。
1.邻近色
从美术的角度来说,邻近色在相邻的各个颜色当中能够看出彼此的存在,你中有我,我中有你;在色相环中,两种颜色之间相距90°,色相彼此相近,色彩冷暖性质相同,具有一致的情感色彩。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_1.jpg?sign=1739297210-4VzVIF9PAAF9lrCQ19RF67mNZFqKYuA5-0-8748b2a4774cf55c0692ad56406c52d1)
2.对比色
对比色是人的视觉感官所产生的一种生理现象,是视网膜对色彩的平衡作用。两种颜色在色相环中相距120°或180°。
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_2.jpg?sign=1739297210-keurq6t1jGGsjL4xkxSjCwAtL1jcd2gs-0-276920ed87ad80d8437625bdb8f3e07a)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_3.jpg?sign=1739297210-hgBT0hjSNTHqhZ9Rf7aUGlMoxRJY5owb-0-4b019ced2b0aaa27a9423489287d4372)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_4.jpg?sign=1739297210-DEUMX10TJXUYBOHLszggWmq4WiizKYgE-0-41efd72d91fb3d1d3c6085621626a024)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_5.jpg?sign=1739297210-yVo8JbGFGwl9jYgUbriKYjPaQMxh68kl-0-7f12ee7670ac46499e3253e44cfa35fa)
![](https://epubservercos.yuewen.com/1E30DC/13043251604881006/epubprivate/OEBPS/Images/Figure-P23_6.jpg?sign=1739297210-zJDPiVwGGJsGhHQ11o5oBF6aw2St1bIL-0-7b392f61c2139e4f3a489617f9b0632f)