个人资料

跳过导航链接首页 > 博客列表 > 博客正文

一个程序员的颜色艺术之旅,不定期更新

分类:

视觉是一个很神奇的东西,我们的生活习惯告诉我们红色代表禁止或者危险或者激情,因为红色是鲜血的颜色,黄色代表警告,绿色代表健康或者通过,这些都是单一颜色带来的信息,而不同的颜色组合会产生不同的效果,程序员难免和各种颜色打交道,不要轻易相信自己的眼睛,好的程序员应该能够建立一套自己的颜色搭配准则。那么我们枯燥的代码又与艺术搭上边了,程序员的颜色艺术,太棒了。这里不讨论形状,只讨论颜色。

常用颜色管理

多年以来,UI设计对于不同信息有了很多约定俗成的颜色规范,比如蓝色代表链接,红色代表错误,橙色代表警告,灰色代表控制区等等,但具体使用时,选取颜色需要准确给出颜色的RGB值。下面是一些常见的颜色。


文本

对于标题的黑色颜色和不太强烈的深灰色,文本有助于提高可读性。




经典的蓝色链接和软红色的悬停状态使链接可见和可预测


按钮

用于主要按钮的蓝色,以提高链接的一致性。 辅助按钮的黑色可让您构建各种UI



状态色

UI的所有可能状态都是简单而直观的配色方案,可帮助您在创建交互式UI时集中注意力。



额外

特殊颜色,突出与界面交互的区域,而白色为所有情况。



灰阶




色系

除了一些常识的颜色外,还需要确定自己设计的色系,常见的色彩浓艳型清新素雅型,酷炫型等等。其中色彩浓艳型比较难,因为色彩浓艳的化需要考虑多种颜色组合的效果,如果搭配不合理,很可能让人产生反感,同样是红配绿,细节不同效果也完全不同。颜色选择时选择同一色系中的颜色的时候一般不会太难看,使用撞色的时候需要小心。有的时候同样的撞色不同形状不同线条,结果也有天壤之别。

一种简单的解决方案:在色系中首先选定一个主色调,比如选定蓝色,那么其他的颜色都需要和蓝色进行搭配,其他大部分颜色都要和蓝色相近但又可以明显区分,当然也要突出一个强烈对比撞色。大概就是一堆主色和配色配备一个或几个稍微强烈一点对比色。对比颜色不宜过多。

颜色精准解析,推荐一下这个网站http://encycolorpedia.cn,可以搜索颜色代码,获得搭配的建议。酷炫型色系就最简单了,多用黑色。黑色和白色是基础也是最高级的颜色。

好看的蓝色:#0078d7;

好看的绿色:#719878;

醒目的黄色:#fff407;

还有更多基本颜色的含义不妨也看看配色网站

1.COLOURlovershttp://www.colourlovers.com/

2.NIPPONCOLOURShttp://nipponcolors.com/

3.colorhttp://color.koya.io/

4.colorfavsrhttp://www.colorfavs.com/

5.uigradientshttp://uigradients.com/#FreshTurboscent

6.MD配色http://www.materialpalette.com/

7.配色方案设计师http://colorschemedesigner.com/csd-3.5/

8.Adobe配色工具https://color.adobe.com/zh/create/color-wheel/9.http://so.uigreat.com/


~不定时更新

songshizhao
最初发表2017/4/13 22:15:16 最近更新2019/2/18 1:10:08 5689
为此篇作品打分
10
   评论