#配色# 3. 超快速APP基础配色方法

前情:
#配色# 1. 色彩理论一网打尽
#配色# 2. 色轮基础原理及应用

色彩功能划分:底色,主色,辅助色强调色。

配色原则

现如今至少80%的APP使用以下配色方式,可以快速完成UI。

日本设计师まりっぺ提出70%,25%,5%的配色比例原则,画面中70%为底色,面积最大的 一块,往往画面的色调是由底色决定的。25%面积的为主色,画面的核心区域多使用主色区。5%为强调色,强调色在画面中起到化龙点睛的作用,强调色多使用 与主色对比度较大的颜色,也可以尝试利用色彩的互补关系来突出。

当然,在实际工作中,很多时候画面不会只有3中颜色。遇到这种情况时,まりっぺ 主张在现有的配色方案中进行切割,从而不影响配色比例。

配色步骤

1. 确定底色

为了突出内容,90%的应用底色为白色或浅灰色,文字采用深灰或黑色,这点建议遵循主流。

2. 确定主色

主色决定设计的风格,是温馨的,甜美的,还是专业的,高冷的?

通常将品牌LOGO的颜色定为主色彩,且在不同的界面中主色出现的面积也会随之变化。APP中常用配色方式:首页,一级页面中使用的主色彩面积较大,导航条全部填充了主色。在二级页面中则使用的面积较少,将主色点缀到界面中.

在用户使用产品时,希望用户记忆产品,而在用户进入了信息页面时则更注重易用性,希望用户能找到自己需要的东西。所以主色在首页,一级页面使用的面积较多,而二级页面使用在关键的操作点上。

3. 从对比色中找辅助色:通常用作点缀,补充,提醒,或者警示信息的表示

色相对比--互补色。互补色对比强烈,容易传播,但过度使用容易造成视觉疲劳。需控制使用的位置和信息的面积,通常用于小区域核心处,或用于重点提示。

主要的三对互补色:红绿、蓝橙、黄紫

很多APP的icon为了吸引用户的注意就用到了强烈对比的互补色。例子-番茄快点、QQ空间、相机360。

冷暖对比-- 冷暖对比色是自然平衡的规律,可以在设计中大量使用,这样的配色会使作品非常的出彩,不显单调。

4. 思考页面元素功能层级层次

从产品角度出发,我们在使用颜色的时候要考虑页面的内容关系,理解界面的层次与功能性质,哪些内容是需要突出的,哪些内容是需要弱化的,哪些是一般化功能。

以淘宝为例,商品详情页,突出价格与优惠,【加入购物车】【立即购买】作为主操作钮突出显示,收藏等则弱化;
订单页则以亮眼颜色突出主操作按钮【确认收货】,【延长收货】【查看物流】相对弱化。

5. 原则:色不过三,不超过三种颜色

这里的三种颜色主要是指色相,实在有较多的色彩需求,可以用同一色相,调整饱和度,明度调出新的颜色。

6. 中性色--灰色,白色,黑色的使用

饱和度太高,明度太高的颜色太过频繁大面积的使用,容易视觉疲劳。
灰色,白色,黑色是较为中性的颜色,作为背景色,过渡色,文字色,次级内容颜色等,重点突出内容。

常见的使用方式是灰色作为最底层背景色,分隔线颜色,再以白色块状区域给内容分区,黑色则作为文字色。
关键功能区域,再使用我们的主色,辅助色来突出,保证层级清晰,主次分明。

7. 配色规则标注

7.1. 给不同使用区域模块颜色进行分类(文字,色块,图标,线条,按钮等)。

规范好每个分类的名称,针对每个分类下的颜色差异使用1、2、3…的序号进行命名,例如正文色T1、辅助文字T2、高亮文字颜色T3…

7.2. 取出配色代码
让设计和开发迅速传递信息。确定好配色的代码,并按分类定义色值。每一套主题的色值可能会不一样,但是编号肯定是一致的,例如文字T1T10、按钮B1B5…

7.3. 产出配色配置档
给出一个TXT文档,标注所有配套颜色色值,开发直接解析配色文档即可,不需调整代码

欢迎关注
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 认识了色彩,并不表示你就能对颜色运用自如。配色有理性的层面,也有感性的层面。配色也需要依循一定的节奏。有的配色跳跃...
    平面设计慕白阅读 1,926评论 3 42
  • 认识了色彩,并不表示你就能对颜色运用自如。配色有理性的层面,也有感性的层面。配色也需要依循一定的节奏。有的配色跳跃...
    菡岱阅读 1,525评论 0 3
  • 配色专题 常见问题 整套幻灯片看起来很脏 整套幻灯片颜色太单调 不懂配色,有些内容看不清楚 配色的作用 强化主题 ...
    马腾Madao阅读 1,497评论 0 7
  • 哈佛大学有一条校训:你听了你会忘记,你看了你会明白,你做了你才学会。学习ExceI不仅仅停留在书本字面上...
    木槿花71阅读 121评论 0 0
  • —————————读《雅舍谈吃》有感 前几天,盼了好久的《雅舍谈吃》终于到了我的手里。说来好笑...
    桑怿401阅读 365评论 0 7