移动商务视觉设计2 移动商务视觉设计2、色彩认知 项目二 移动界面色彩设计-任务一 色彩认知-移动界面配色方案.ppt

移动商务视觉设计 江苏经贸职业技术学院 1 移动网店界面的整体配色 2 用色相环挑选对比色 目录 CONTENTS 3 整体配色，从成功网店“偷招” 任务一 色彩认知 移动界面配色方案 项目二 移动界面色彩设计 4 移动网店界面配色误区 移动网店界面的整体配色 网店整体颜色一定要给人统一协调的感觉。当然，统一的颜色并不是说只能用一种颜色，而是指主色调只有一种，在此基础上搭配一些其他颜色。 70% 25% 5% 主色 辅色 点缀色 配色比例 移动网店界面的整体配色 “总体协调，局部对比”原则 移动网店界面的整体配色 实例1.单一色彩页面 选择单一色彩，并不表示就毫无变化，可以通过调整透明度或饱和度，使得单一色彩也深浅有别。 以黄色作为家居用品店铺的主色调，给人以温馨的感觉 以同色系的土黄色作为该页面的辅助色，既能与主色调相呼应，又能使整个页面的色彩富有层次感 30° 同类色搭配 移动网店界面的整体配色 实例1.单一色彩页面 60° 邻近色彩搭配 邻近色彩即不是同一色彩但是非常接近的、在色相环上角度较小的一系列色彩，它的效果与单一色彩相似，但是要丰富得多。总之，在配色过程中，无论用几种颜色来组合，首先要考虑用什么颜色作为主色调，如果各种颜色面积平均分配，色彩之间互相排斥，就会显得凌乱。 移动网店界面的整体配色 实例1.单一色彩页面 使用蓝色作为食品店铺的背景色，使整个页面的色彩富有层次感 浅绿色给人以清新、自然的感觉，适合食品类店铺使用。它与蓝色又是相邻色，使用这种方法配色既能使整个页面丰富起来，又不会产生凌乱的现象 移动网店界面的整体配色 实例2.两种色彩对比 120° 对比色搭配 一般来说色彩的对比强，看起来就有诱惑力，能够起到集中视线的作用。 移动网店界面的整体配色 实例2.两种色彩对比 粉红色为浅黄色的对比色，在该页面中与浅黄色形成鲜明的对比，具有较强的视觉冲击力 用色相环挑选对比色 如何才能找到对比最强烈的颜色呢？ 色相环 用色相环挑选对比色 红黄蓝三原色 六色相环 用色相环挑选对比色 十二色相环 二十四色相环 用色相环挑选对比色 在色相环中，180度对立的两种色彩，对比是最强烈的，这个角度范围内，角度越大的两种颜色，对比越强，反之就越弱。 整体配色，从成功网店“偷招” 最便捷的一个方法，就是从其他成功的网店中“偷招”。 借助软件工具理清主色、辅助色。 整体配色，从成功网店“偷招” 主色一般为页面中所占面积最多的色彩或者背景色，为整个页面打下色彩基调。 辅助色与主色形成对比，丰富色彩内容。 突出色所占面积最小，与主色的反差最大，是一个页面中最能引起人注意的点，一般需要突出的标题、LOGO或者需要着重表现的产品等，往往使用突出色。 移动网店界面配色误区 1.色彩过多 合理地使用色彩使页面变得鲜艳生动富有活力。但色彩数量的增加并不能与页面的变现力成正比。 要有一种主色贯穿其中，主色不一定完全是面积最大的颜色，也可以是最重要、最能揭示和反映主题的颜色。不要将所有颜色都用到，尽量控制在三至五种色彩以内。 移动网店界面配色误区 2.背景和文字内容对比不强烈 人眼识别色彩的能力有一定的限度，由于色的同化作用，色与色之间对比强者易分辨，弱者难分辨。背景与文字内容对比不强烈，文字内容没法突出，灰暗的背景令人沮丧，甚至用花纹繁复的图案作背景。 移动网店界面配色误区 3.过分强调色彩的刺激 页面用色要尽量少用视疲劳度高的色调。一般来说，高明度、高纯度的颜色刺激强度高，疲劳度也大。 在无彩色系中，白色的明度最高，明度最低的是黑色；有彩色系中，最明亮的是黄色，最暗的是紫色。 色彩刺激强度高的色彩不宜大面积使用，出现频率也不宜高。低明度色疲劳度虽然小，但往往使人产生压抑感，也不赞成页面设计过于暗淡。比较理想的方法是多用柔和明快的浅调暖色。 谢谢观看！ 江苏经贸职业技术学院 * * * * * *