第二章2.6-2.7 色彩在移动界面中的应用（2）（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 2 色彩在移动界面中的应用 2.6 移动界面色彩搭配原则 色彩是UI界面设计中重要的设计元素之一。优秀的色彩搭配不仅可以吸引用户的注意力，同时还可以为UI界面的设计添彩，统一设计风格，从视觉上就给用户带去良好的体验。 不同的色彩具有不同的情感。心理学研究表明，暖色可以引起瞳孔放大，心脏脉搏跳动加快，心情兴奋；冷色可以让人产生的淡漠感觉，心脏、脉搏跳动平稳，心情沉静，有收缩、寒冷的感觉；中间色（介于暖色与冷色之间）处于兴奋和冷静之间，眼睛不过于疲劳，给人以柔和、宁静与舒适的感觉，如图2-30、图2-31所示，不同的颜色会给浏览者不同的心理感受。每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。根据这个原理，可以为所要设计的特定的App选择适合的颜色搭配，奠定界面的基调。 当然在设计中也有一些颜色使用禁忌。如何让色彩搭配更为契合APP界面设计的主题，下面将对色彩设计原则一一阐述。 2 色彩在移动界面中的应用 2.6.1 界面色彩搭配层级 如果说一个界面只是单一的运用一种颜色，难免会让人感到单调和乏味；如果将所有的颜色都运用到界面设计中，则会影响信息的传递和功能的使用。因此，一个优秀的界面设计，要对界面内全部内容的颜色进行整体的规划与设计。通常情况下，包括四类色彩层级，具体分为主题层（主题色）、辅色层（辅色）、阅读层及提醒层（提醒色），如图2-32所示。 2 色彩在移动界面中的应用 1.主题色 主题色是界面中出现最频繁的颜色，其决定着界面的视觉风格趋向，多用于状态栏、标题栏、主题栏等大面积组件色。主色并不一定只有一个颜色，还可以是一种色调，一般选择同色系或邻近色中的1～3种颜色。通常认为饱和度高的颜色为主色（图2-33）；深颜色为主色（图2-34）；面积大的为主色（图2-35）；视觉中心所呈现的为主色（图2-36）。 2 色彩在移动界面中的应用 2.辅色 辅色用来突出界面关键部分的颜色，多用于标题、按钮、悬浮按钮、文字按钮、文本框、进度条、选择控件、滑动条、链接等。辅色与主色共同构成界面的标准色彩，通常采用主色的邻近色、延伸色、协调补色，起到烘托、融合、减轻视觉疲劳的作用。辅色在整体的画面中使画面丰富，更具细节。辅助色也不一定只有一个颜色，也可以多色相辅助。同类色作为辅色，画面较柔和，整体显得和谐统一，如图2-37所示。邻近色作为辅色，会产生高度和色相对比，画面较丰富，如图2-38所示；对比色或是互补色作为辅色，画面色彩层次丰富，主色更鲜明，如图2-39所示；也可以充分利用背景色，正确运用背景色会让画面更有特色 2 色彩在移动界面中的应用 3．阅读色 阅读层主要用于界面中文字信息和基础图形的展示，通常是采用无彩色系，并依靠色彩的明度进行层级区分，但是一般不用60%～40%灰色，具体的使用比率如图2-40所示。 4．提醒色（点睛色） 提醒色是为了让用户快速注意。在界面设计中，确定主题色和辅助色后，通过在小范围内加上强烈的颜色，即点睛色来突出重要信息或功能，吸引用户视线，使得界面层次分明。一般情况下，提醒色会使用较鲜艳的颜色，但也要注意用户视觉的舒适度，如图2-41、图2-42所示。 2 色彩在移动界面中的应用 2.6.2 色彩搭配应注意的问题 1.色彩心理暗示 研究表明，色彩心理受个人认知影响。社会因素中，性别也会对颜色如何被感知产生一定影响作用。进一步研究表明，不仅是颜色自身含义的影响，也是关于在使用中如何让用户恰当的感知到用在品牌上的颜色含义。 首先看一下色彩在心理暗示的意义： ⑴黄色：过度耀眼会让人讨厌，有警示的寓意（交通法规中常用），但儿童非常喜欢这个颜色； ②橘色：温暖而不危险，与能量有关（饮料、运动、健身），儿童也同样喜欢这个颜色； ⑶红色：提示操作、兴奋、冲动、血腥，象征激情和理想的时尚／化妆品牌，交友网站和食物使用较多（如麦当劳、肯德基） ⑷紫色：代表奢华，典雅，温柔，女性，只有在暗色系的紫色才有一些恐怖灰暗的联想； ⑸黑色：代表上等的、漂亮的、传统的、团体的、企业的、优秀、卓越等 ⑹绿色：代表自然、能提升幸福感、健康产品、道德活动、新理念、新观点；