四种常见的配色方法 界面中如何使用颜色( 二 )


四种常见的配色方法 界面中如何使用颜色

文章插图
3. 三种颜色界面中 。由三种颜色组成的配色 。
四种常见的配色方法 界面中如何使用颜色

文章插图
4. 拆分互补色拆分互补色就是在互补色的前提下 。每个互补色再增加一个同色系的颜色 。比如互补色是蓝色 。和红色 。
四种常见的配色方法 界面中如何使用颜色

文章插图
这是一对红蓝互补色
四种常见的配色方法 界面中如何使用颜色

文章插图
在蓝色和红色基础上 。选择一个邻近色作为拆分互补色

单色运用
四种常见的配色方法 界面中如何使用颜色

文章插图
Copper的产品设计 。整个产品就采用一种配色 。暖粉色 。颜色年轻活泼 。暖粉色很好的运用在界面的各个地方 。形成统一的品牌认知 。
四种常见的配色方法 界面中如何使用颜色

文章插图
蒂芙尼 。整个品牌网站 。到线下店 。以及对外的宣传 。周边包装产品统一的使用着蒂芙尼蓝色设计 。让这个蓝色深入人心 。
四种常见的配色方法 界面中如何使用颜色

文章插图
印象笔记的设计 。从整体的网站设计 。到界面 。到引导页面 。都是讲印象笔记经典的绿色用到彻底 。形成品牌色彩认知 。
四种常见的配色方法 界面中如何使用颜色

文章插图
WalidB的插画作品 。同样在插画作品中 。运用一个色系 。通过深浅对比 。来形成统一的风格色调 。让风格更加具有高级感 。科技感 。
邻近色运用
四种常见的配色方法 界面中如何使用颜色

文章插图
CreativeO的图标设计中 。很好的运用邻近色渐变 。让图标更加富有活力和时尚感 。邻近色作为渐变运用 。
四种常见的配色方法 界面中如何使用颜色

文章插图
一个天气应用 。同样采用邻近色做对比 。背景底纹运用一些光晕让界面更加生动和灵动 。
四种常见的配色方法 界面中如何使用颜色

文章插图
Ishtiaq Khan Parag 很好的将邻近色用在了图标和卡片上 。让整个设计整体年轻活泼了许多 。
四种常见的配色方法 界面中如何使用颜色

文章插图
邻近色在很多的产品中越来越多被应用 。邻近色取品牌色周围30度的颜色作为渐变色 。我们在设计中需要注意邻近色一定不要太大 。太大会显得不够柔和 。
互补色运用
四种常见的配色方法 界面中如何使用颜色

文章插图
来自MIKE的作品 。互补色设计中如果用不好 。界面会很山寨 。互补色前面我们说了 。是界面中对比最强烈的配色 。我们一定要注意互补色的比例 。比例一定要协调舒适 。
四种常见的配色方法 界面中如何使用颜色

文章插图
补色在设计中 。不要占比过大 。一定需要有一个主色 。补色作为重点去强调和突出 。这组作品很好的把红色作为补色 。有点睛的效果 。
四种常见的配色方法 界面中如何使用颜色

文章插图
互补色让页面更加突出文字信息内容 。同时很好的讲内容趋势和图片趋势很好的拉好 。形成了很好的冲击感 。
四种常见的配色方法 界面中如何使用颜色

文章插图
红绿互补色视觉冲击力强 。很好的强调了音箱本身的质感 。
四种常见的配色方法 界面中如何使用颜色

文章插图
两组互补色运用 。很好的将LOGO的矛盾感 。空间强加强 。要人过目不忘 。
三种颜色
四种常见的配色方法 界面中如何使用颜色

文章插图
这组作品 。通过三种颜色的叠加的形式 。让三元色巧妙的运用到设计中去 。同时颜色叠加形成一种新的时尚感 。
四种常见的配色方法 界面中如何使用颜色

文章插图
三种颜色运用最佳的案例当属于谷歌 。颜色的饱和度以及设计都恰当好处 。
四种常见的配色方法 界面中如何使用颜色

文章插图
在谷歌的设计中 。我们不难发现 。它很好的将多种颜色组合在一起 。不乱 。同时还很平衡 。这些值得我们设计师去好好领悟和学习 。
动手试试我们来拿一个案例来尝试下我们的方法 。本文案例我从素材网站下了一个案例来尝试下我们今天分享的方法 。单色 。互补色 。三个颜色 。互补色拆分 。

推荐阅读