设计师入门必须掌握的色彩知识(5)

来源:友设青年   作者:友设青年   发布时间:2021-01-18    浏览次数:364


八  色彩在设计中的应用


1)数量

一个页面中尽量不要超过 3 种颜色(黑白除外),颜色过多会让用户的兴奋值上升,不易长期查看。




2)统一性

每一个产品都有自己的主色调,所有的页面的色彩搭配都要和主色调呼应,主色调的合理运用直接关系到用户对产品的信任值。

同一组件、场景中,颜色使用要保持一致,切忌“自由发挥”,毫无规范可言。



3)60-30-10原则

60%、30%、10% 的原则,是达到色彩平衡的最佳比例。在 60% 的空间使用主色,可以运用到导航栏、按钮、图标等关键的元素中,使之成为整个 App 的视觉焦点和色彩关系;30% 的空间使用辅助色,可以平衡过多的主色而造成的视觉疲劳;最后剩下 10% 的空间为点缀色,可以用在一些不太重要的元素又需要区分的时候。6:3:1 原则构建了一种丰富的色彩层次,让界面看上去和谐、平衡和不杂乱。




4)颜色禁忌

禁用纯黑、纯灰,纯黑和纯灰会给使用户陷入负面情绪中,可以在黑色和灰色中加入一些色调,会让颜色看上去更柔和,另外纯黑色看时间久了会使人疲惫,在实际产品中,也很少有用纯黑的。




5)文字中的使用

超链接颜色用蓝色,为什么呢?

最早期电脑中用的是深灰色背景+黑色字,那时候能用非黑色最深的颜色就是蓝色,所以这个习惯一只延续至今。这种用户习惯非常一致的情况下,尽量不要去改颜色,因为改成别的颜色就会颠覆用户认知,学习成本就会增加。




6)卡片阴影

一定不要用纯黑色阴影,阴影的颜色会受到环境色和固有色的影响,对于有颜色卡片的背景,尽量使用比卡片更深的同色系颜色来调阴影,会使得阴影更干净、整洁。




九  配色网站推荐


1)https://webgradients.com/

Wbgradients 是一个在线调整渐变色的网站 ,可以根据你想要的调整效果,同时支持复制 CSS 代码,可以更好的与开发对接。




2)https://www.grabient.com/

Grabient 一个非常漂亮且实用的渐变配色网站,支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。设计师可以在色块下方自由添加和调整渐变的色系、以及线性渐变方向。




3)https://www.0to255.com/740941

该网站随意选色值,它自动换算出已选色值的 32 种明度色值,简单易用。




4)https://colors.eva.design/

Eva Design System 是一个基于深度学习算法的配色网站。适用于给我们的产品或品牌生成一个系统的配色方案。右上角可以切换浅色模式和深色模式的对比。




5)https://colorhunt.co/

Color Hunt 是开放的调色板集合,可以添加到 chrome 浏览器,方便随时随地使用。



好了,今天的分享就到这里了,如果感觉不错欢迎点赞收藏!


推荐阅读》

13个让你灵感迸发的配色网站

新手必看的渐变色入门指南

从零开始学配色,设计师必看的配色宝典

设计中渐变颜色选择技巧分享

12345共5页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:配色宝典

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/8939.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通