任务四 关 UI 界面设计中的常见配色方案
知识要点
1. UI 界面设计中的常见配色设计原则
课程目标
1. 掌握 APP 界面配色方法
2.掌握 APP 界面配色方案设计
一、UI 界面设计中的常见配色概念
对于设计数字 APP 来说,选择完美的配色非常重要,色彩就像华丽的外衣和精致的妆容,
会给 APP 留下独特的艺术个性风格,当我们评价一款 app 时,配色应该是仅次于其功能性的
另一主要因素。因此,对 APP 界面的配色设计是十分重要的。
随着 APP 和移动 UI 的大众化普及与快速发展,人们对色彩的敏感度,能不能快速提炼
出该 APP 里面的主要色彩并展开设计将有重要意义。随手打开一个 APP 应用第一留给我们的
印象就是颜色属性——如淘宝的红色、微信的蓝色等。色彩也是一种性格表达。
色彩在交互过程中扮演着重要的角色。良好的色彩搭配会帮助用户发现页面中的重点,
找到他们急于寻找的元素,更好的了解 app 的操作流程。每款 app 都会有一套其独有的配色
方案。建立一套 app 的配色方案是件很困难的事情,因为理论上说你有无数种的组合方式。
App 中的色彩应用究竟有哪些重点呢?配色方案又有什么原则呢?
色彩的数目
在 app 的界面中,尽量不要使用过多的颜色。日本设计师まりっぺ提出 70%,25%,5%
的配色比例原则,画面中 70%为底色,面积最大的 一块,往往画面的色调是由底色决定的。
25%面积的为主色,画面的核心区域多使用主色区。5%为强调色,强调色在画面中起到化龙
点睛的作用,强调色多使用 与主色对比度较大的颜色,也可以尝试利用色彩的互补关系来
突出。
配色原则——颜色少就是多,因此,一套优秀的 APP 配色,最重要的就是研究三大色彩
的设计关系,这三大 APP 界面色彩是背景色、主色调、强调色;只有处理好了这三者间的关
系,包括面积比例、位置关系、形状结构等才能设计出视觉效果好的配色方案。
APP 常用的颜色搭配参考
底层背景色,内容背景色 ,两种颜色相近,但能区分