移动UI色彩搭配

1章 初识UI设计配色 1.1 色彩的基础理论 001 1.1.1 认识色彩 001 1.1.2 色彩三要素  001 1.1.3 无彩色与有彩色 004 1.2 UI设计配色的基本步骤 005 1.2.1 明确产品定位与目标 005 1.2.2 确定目标用户体 007 1.2.3 分析竞争对手 008 1.2.4 产品测试 009 1.3 理解色彩印象 009 1.3.1 红色 010 1.3.2 橙色 010 1.3.3 黄色 011 1.3.4 绿色 012 1.3.5 青色 013 1.3.6 蓝色 013 1.3.7 紫色 014 1.3.8 黑色 015 1.3.9 白色 016 1.3.10 灰色 017 1.4 课堂作——在线图书App配色设计 017 1.5 UI设计中的色彩角色 021 1.5.1 主题色——传递界面主题 021 1.5.2 背景色——支配UI整体情感 023 1.5.3 辅助色——营造独特的UI风格 024 1.5.4 点缀色——强调重点信息与功能 026 1.6 课堂作——运动鞋App配色设计 027 1.7 UI配色的基础原则 031 1.7.1 色调的一致性 031 1.7.2 选择符合人们使用习惯的色彩 032 1.7.3 使用色彩划分界面元素和内容 032 1.7.4 为用户提供界面可选配色方案 034 1.7.5 提升界面内容的可读性 034 1.7.6 控制色彩的使用数量 035 1.8 课堂作——影视App配色设计 036 1.9 拓展知识——了解UI和GUI设计 040 1.10 本章小结 041 1.11 课后测试 041 一、选择题 041 二、填空题 041 三、作题 041   2章 UI设计配色的基本方法 2.1 色调对UI配色的影响 042 2.1.1 认识色调 042 2.1.2 基于色调的配色 043 2.2 UI元素配色 044 2.2.1 图标配色方法 045 2.2.2 文字配色方法 046 2.2.3 UI文字易读性规范 048 2.3 基础配色方法 051 2.3.1 基于色相的配色关系 051 2.3.2 同类色配色 051 2.3.3 邻近色配色 052 2.3.4 同明度配色 053 2.3.5 同纯度配色 053 2.3.6 明艳色调配色 054 2.3.7 暗浊色调配色 055 2.3.8 灰调配色 056 2.4 课堂作——智能家居管理App配色设计 056 2.5 对比配色方法 060 2.5.1 色相对比配色 060 2.5.2 原色对比配色 061 2.5.3 间色对比配色 062 2.5.4 补色对比配色 063 2.5.5 冷暖对比配色 063 2.5.6 面积对比配色 064 2.5.7 主体突出的配色 065 2.6 课堂作——旅行服务App配色设计 066 2.7 通过配色表现UI情感印象 070 2.7.1 暖色调配色 070 2.7.2 冷色调配色 071 2.7.3 高调的配色 071 2.7.4 低调的配色 072 2.7.5 健康的配色 073 2.7.6 警示的配色 074 2.8 课堂作——饮料预订App配色设计 074 2.9 拓展知识——色彩对人的心理影响 079 2.10 本章小结 080 2.11 课后测试 080 一、选择题 080 二、填空题 081 三、作题 081   3章 UI设计配色技巧 3.1 UI中色彩的作用与心理感受 082 3.1.1 UI中色彩的作用 082 3.1.2 应用色彩感觉进行配色 084 3.2 使用无彩色调和UI配色 088 3.2.1 加入白色调和，使界面更加轻盈、透气 088 3.2.2 加入黑色调和，使界面更加稳重、大气 089 3.2.3 加入灰色调和，使UI更具有质感 091 3.2.4 综合运用无彩色进行调和配色 092 3.3 课堂作——照片视频分享App配色设计 092 3.4 使用色彩突出UI主题 097 3.4.1 使用高饱和度色彩烘托主题表现 097 3.4.2 通过留白突出UI主题 099 3.4.3 添加鲜艳色彩表现出UI活力 100 3.4.4 添加点缀色为UI带来亮点 101 3.4.5 通过色彩明度对比表现出层次感 101 3.4.6 抑制辅助色或背景 103 3.5 高饱和度色彩搭配技巧 103 3.5.1 使UI内容更易读 103 3.5.2 为交互元素应用鲜艳色彩 104 3.5.3 鲜艳的色彩更易被识别 105 3.5.4 营造氛围，传递情绪 106 3.5.5 UI表现更加时尚 106 3.6 课堂作——电影票预订App配色设计 107 3.7 拓展知识——UI使用深色背景时需要注意的问题 111 3.8 本章小结 112 3.9 课后测试 113 一、选择题 113 二、填空题 113 三、作题 113   4章 网站UI配色设计 4.1 网站UI元素配色 114 4.1.1 Logo与网站广告 114 4.1.2 导航菜单 115 4.1.3 背景与文字 115 4.1.4 链接文字 116 4.2 打造成功的网站UI配色 117 4.2.1 遵循色彩的基本原理 117 4.2.2 灵活应用配色技巧 118 4.2.3 无彩色界面点缀鲜艳色彩 119 4.2.4 保持与产品色彩统一的配色设计 120 4.2.5 避免混乱的配色 120 4.3 课堂作——耳机产品宣传网站UI配色设计 123 4.4 根据用户体选择网站UI配色 126 4.4.1 不同性别的色彩偏好 126 4.4.2 不同年龄的色彩偏好 127 4.5 根据商品销售阶段选择网站UI配色 129 4.5.1 新产品上市期的网站UI配色 129 4.5.2 产品拓展期的网站UI配色 130 4.5.3 产品稳定销售期的网站UI配色 131 4.5.4 产品衰期的网站UI配色 131 4.6 课堂作——设计服务网站UI配色设计 132 4.7 常见的网站配色印象 135 4.7.1 女性化网站配色 135 4.7.2 男性化网站配色 136 4.7.3 儿童网站配色 136 4.7.4 稳定安静的网站配色 137 4.7.5 兴奋激昂的网站配色 137 4.7.6 轻快律动的网站配色 138 4.7.7 生动活力的网站配色 139 4.7.8 清爽自然的网站配色 140 4.7.9 高贵典雅的网站配色 140 4.7.10 成熟的网站配色 141 4.8 课堂作——滑板产品宣传网站UI配色设计 142 4.9 拓展知识——如何培养色彩敏感度 145 4.10 本章小结 146 4.11 课后测试 146 一、选择题 146 二、填空题 147 三、作题 147   5章 移动UI配色设计 5.1 移动UI配色需要注意的问题 148 5.1.1 切忌把精致美观放在一位 148 5.1.2 UI配色要符合人们的心理印象 149 5.1.3 界面内容要便于阅读 150 5.1.4 保守地使用色彩 150 5.1.5 切忌使用杂乱的配色 151 5.2 移动UI配色的基本流程 152 5.2.1 产品分析，确定风格 152 5.2.2 确定主题色 153 5.2.3 确定辅助色 157 5.2.4 配色调整 157 5.3 课堂作——智能停车App配色设计 159 5.4 移动UI常用的配色方法 162 5.4.1 表现统一、和谐的配色方法 163 5.4.2 表现突出、对比的配色方法 166 5.5 课堂作——时尚运动App配色设计 169 5.6 移动UI配色技巧 173 5.6.1 遵循6∶3∶1的配色原则 173 5.6.2 控制界面的色彩数量 176 5.6.3 巧用色彩对比 176 5.6.4 从大自然中获取配色灵感 177 5.7 课堂作——电商App配色设计 178 5.8 拓展知识——色彩在移动UI设计中的作用 182 5.9 本章小结 183 5.10 课后测试 183 一、选择题 183 二、填空题 184 三、作题 184