分享怎么网页配色?网页配色的一些方法
发布时间 :2016/08/19
国外设计师朋友分享的配色方法和一些技巧,实用性强,今天我们不打算介绍一些复杂的色彩理论,而且我也不太擅长这方面的内容。我们只是单纯的展示一个简单的配色流程和一些技巧,你可以直接将这个方法运用到下一个项目中。
选择起始色
这个上有多少种颜色,告诉你:1000万种。想想就觉得可怕,而且我们要从这1000万种颜色中找到一种作为我们365手机app_彩票365app老版本软件下载_365网站打不开了 或品牌的基本色。所有的颜色都将以此为基础,所以也特别重要。不过不要着急:跟着我来不会错的。
如何选择一个起始颜色
理论上是可以任性的选取一个颜色来开始配色的,这样就容易很多,但是我们通常不这么做。在有甲方设计项目里,设计师都要对自己的配色方案有充分的理由和依据。不然终会沦为设计师和客户个人喜好之间的博弈,往往受伤的还是设计师。不过也不要想太多,我们只是希望设计师每次在选择颜色的时候要经过认真的考虑,这样看起来才会比较。
1.充分利用手中的资源
如果客户有自己的品牌和品牌色,我们通常以此作为起始色
2.分析竞品的配色方案
如果你的主要竞争对手已经有了一个比较强势的品牌色,不要想着把它抄过来,而且要尽量把它从你的配色方案中丢掉
3.考虑你的目标用户
一个给老年人看的365手机app_彩票365app老版本软件下载_365网站打不开了 和一个给儿童看的365手机app_彩票365app老版本软件下载_365网站打不开了 ,风格肯定是不同的。要多考虑你的365手机app_彩票365app老版本软件下载_365网站打不开了 用户,想想你希望设计的365手机app_彩票365app老版本软件下载_365网站打不开了 给他们什么样的感觉
4.不要墨守成规
设计一个少女365手机app_彩票365app老版本软件下载_365网站打不开了 并不非得要用粉色,设计从来都没有统一的标准。要尽量在设计中避免同质化,才能赢得用户的青睐
5.玩文字游戏
当你一直在选色中纠结时,可以试着写下一些和客户业务相关联的词汇,这些应该可以帮助你找到一些灵感。如果还是不行,浏览一些关于颜色寓意的365手机app_彩票365app老版本软件下载_365网站打不开了 ,看看什么颜色比较合适。
现在你脑海中应该大致已经想好了一个基本色。它可能比较抽象,像红色,蓝色,黄色,绿色这样比较宽泛的颜色。没关系,下一步我们来准确定位色值。
我们先假设你选的颜色是蓝色
选择的基本色
在这一步里,很多人可能会想到打开PS用拾色器找到一个差不多喜欢的颜色。我们不打算这样,我们想到其他设计师的作品里去获取一些灵感。
先要打开Dribbble 和 Designspiration 点击“color”链接,然后应该是会出现这样的页面:
用灵感365手机app_彩票365app老版本软件下载_365网站打不开了 来帮忙找出正确的颜色
在这里,你可找出蓝色正确的色调。
如果是比较年轻,活泼一点的品牌,可以选择浅色的,明亮的蓝色(下图的上面5种颜色比较合适),
如果是比较正式,严肃的,下图的下面5种颜色就比较合适。
不同色调的蓝色代表不同的含义,所以选择还是要比较谨慎的
在365手机app_彩票365app老版本软件下载_365网站打不开了 中选择一个色调,看看这个色调的真实设计案例。你可以使用一些颜色抓取工具来获取浏览器中自己喜欢的HEX值。
这么多的蓝色!你只吸取自己认为适合的颜色就可以了,是不是很简单
在这里,你不仅可以看到不同版本的基本色,同时也可以发现合适的颜色搭配
创建一个调色板
好了!你现在应该有一个准确的HEX色值了。我选的是#309e8。接下来我们将根据这个色值来建一个调色板。这一步其实要比想象中的要容易。
当你在思考一个配色方案的时候,你脑海里可能会有一个这样的图像:
这样的色板大家应该经常看到(图片出处: ColourLovers palettes by manekineko and sugar! )
这种类型的色板的问题在于在实际的设计中并不是实用,大多数这种色板的颜色数量都超过了你的需求。
而且,考虑到我们的配色方案会需要三种中性色:
白色
深灰色
浅灰色(可选)
如果你试着添加5或6种颜色到中性色中,看起来就会乱。其实你所需要的颜色只有两种:
基本色(在我的案例里是:#30c9e8)
强调色(接下来我们会提到)
如果只使用上面提到的5种颜色来设计你的365手机app_彩票365app老版本软件下载_365网站打不开了 ,也会比起你用了一大堆互补色系、互补色系、三色系等要好得多。
就像 Thoughtbot 和 TedTodd 这样的365手机app_彩票365app老版本软件下载_365网站打不开了 ,你并不需要复杂的颜色主题也可以设计出好看的365手机app_彩票365app老版本软件下载_365网站打不开了
找到你的强调色
强调色在365手机app_彩票365app老版本软件下载_365网站打不开了 中用到的地方少,通常是为了提示用户作,所以一定要足够显眼。
下一步你只要打开Paletton365手机app_彩票365app老版本软件下载_365网站打不开了 ,然后输入基本色的HEX值:
在Paletton输入基本色的HEX值
在这里,你可以找到你的强调色。
先,你要点击“Add Complementary”这个按钮,然后就出现了一个橙色,这个就是你的强调色。
Paletton会自动为你生成一个合适的强调色
或者,你不喜欢Paletton生成的颜色,你也可以点击365手机app_彩票365app老版本软件下载_365网站打不开了 上面的其他图标找到更合适的。
一个一个试,找到你喜欢的颜色
从个人角度来讲,我喜欢Paletton生成的红色,所以我决定把它应用到我们的配色方案中。当然,Paletton背后肯定是遵循颜色彩规律和理论,我们这里不做深入的研究。你以后会学到相关的理论,到那时就清楚了。
好了,下图就是我们的配色方案。我们已经有了一个好看的基本色和显眼的强调色,还把白色加到了色板中。
我们的色板已经慢慢成型了
不过还缺少一些灰色调。
添加灰色调
在我的大多项目中,我发现了2种色调的灰色永远都会用到——深灰色和浅灰色。在实际网页设计中,你会经常用到的。
深灰色通常会用在字体颜色上,而浅灰色主要是当你需要和白色有一些细微区分的时候会用到(通常是背景)。
有2中方法可以帮助我们找到灰色调
你可以再次使用Dribbble 和 Designspiration 从你之前的搜索结果中去找到一些好看的灰色来搭配你的主题。
如果你用的是photoshop,也可以借用Erica Schoonmaker’s technique的方法让你的灰色调和基本色更加协调
做出协调的灰色
下面我们用Erica的方法来找出灰色调,我们先从两个任意的灰色开始:
新建2个形状,分别填充颜色#424242和#fafafa
在2个形状上面,新建一个颜色填充图层
颜色填充图层的颜色改为你的基本色(我的是:#30c9e8)
设置混合模式为叠加,透明度调到5%到40%之间(我的例子里是40%)
用拾色器获取新的色值
当叠加颜色是本案例的蓝色时得出的是好的,于其他的颜色,你也可以根据实际情况调低透明到5%-10%来得到佳结果。
选择一个和基本色协调的灰色看似很小的细节,也会产生很不同的
看!我们完成了!
我们的配色方案完成了,是不是很有成就感。
完成了配色方案,接下来就是配色的应用了
应用你的配色方案
现在我们已经有了自己的配色方案,可以使用它了。配色应用其实可以用一篇全新的文章来讨论,但为了加深大家的理解,我给大家展示一个网页设计实例,这个网页将会以灰度模式和颜色模式来展现。
提示:如果你对配色比较纠结,可以试试先用灰度模式来设计你的网页。先区分出页面的层次,再来进行配色尝试.
用灰度模式来布局网页可以帮助你更好地运用配色方案。
我们的配色方案的实际应用
正如你所看到的
蓝色是我们的识别色。主要使用在大面积区域和图标上面。
我们的强调色,红色,很好的和基色形成反差。强调色主要使用在小块的颜色区域,像按钮和一些图标上面。强调色使用的地方越少,强调的就会越。
深灰色主要使用在文字,logo和图标的轮廓上面。(在图标上适当的使用深灰色,会起到很不错的)。
白色和浅灰色主要是在背景上的应用。在这个例子中,浅灰色其实并不是一定非要使用,但是我发现这个小细节会让网页看起来更优雅。还有一点重要,在网页颜色和字体的设计中,我们要保留足够的对比度,这样可以方便色盲或色弱的用户阅读你的网页。有很多的工具可帮助你在颜色的选择上符合WCAG(Web内容无障碍指南)标准。我给大家WebAim Color Contrast Checker 和Contrast Ratio 。
结语
就像我在例子里面展示的配色方案中,只不过使用了区区几种颜色。但是这并不意味着你只能在这在这几种颜色里搭配色彩。
使用上面的技巧,你可以根据具体需求扩展你的调色板。
在设计过程中,你可能需要更多是颜色来表达你的想法。充分利用上面的步骤可以帮助你找到合适的颜色来配合你的主题。
配色技巧不是一朝一夕的事情,它需要长时间的实践和积累。在这个过程中你会慢慢掌握色彩的规律,哪些颜色适合在一起,哪些不适合。有时你会觉得上面的方法不是很令人满意, 没关系,可以根据具体场景进行调整。
- 2019/12/18 内蒙古365手机app_彩票365app老版本软件下载_365网站打不开了 建设制作H5基本过程
- 2016/08/23 内蒙古365手机app_彩票365app老版本软件下载_365网站打不开了 建设实现多样化发展模式
- 2014/05/16 内蒙古365手机app_彩票365app老版本软件下载_365网站打不开了 建设航佳网络科技有限公司实现网络一体化营销
- 2016/10/31 内蒙古365手机app_彩票365app老版本软件下载_365网站打不开了 建设要找专业的网络公司
- 2021/10/15 内蒙古365手机app_彩票365app老版本软件下载_365网站打不开了 建设哪家服务好,365手机app_彩票365app老版本软件下载_365网站打不开了 定制开发的好处是什么?