签到

07月18日
尚未签到

共有回帖数 0

    做月子

    等级:
    例如,如果你给美国的顶级沙滩设计网站,和你创造一个像Groppon一样的在线商城,你肯定希望用不同的配色设计它们,因为它们传达的是不同的信息——一个网站传达的是让人心情放松,而另一网站传达的是由于做了一次非常棒的交易而让心跳加速兴奋。
    本文探讨的主题是关于网站和平面设计的色彩。学习先进的色彩理论最好的方法,是通过实践,而不是理论。但是为了提高,你必须有一个起点。除了有用的配色技巧和观点,你还可以发现许多宝贵的资源散落在文章中。
    颜色的目的


    从艺术的角度来探索色彩,它可以使主题更加鲜明。这就是一张绘图和一幅绘画主要的区别,尽管它们能传达相似的信息。这个道理适用于任何设计包括网页设计。


    将色彩添加到设计中使画面的表达更加丰富。图形、字体、按钮和超链接,一切都可以在某种程度上匹配总体的基调。例如,葡萄园网站的颜色和水族馆网站的颜色是不同的。为什么呢?因为这是两种完全不同类型的网站,它们试图传达不同意义、目的或者感情给自己的目标受众。


    因此,当在考虑颜色时,记住,颜色很少用来做页面的结构的区分和搭建。你应该用灰色来构建一个布局,就可以让人了解到界面的整体结构关系。访问者在浏览网站界面时,色彩可以带给访问者更加丰富的信息内容。




    这个图是值得我们去理解的,因为颜色都是相对的。所以,一个“冷”色,像蓝色用在浅色中就不那么冷了,同样的“暖”色,在暗色中也就不那么暖了。颜色系统是一个奇怪的话题,因为它常常与其它颜色相互作用。这样听起来好像是没有意义的,但你可以把它作为学习的例子,在实际的项目中不断练习。
    Harmonic模式
    当选择一个配色方案时,你有很多不同的模式可以遵循。诚然不是每个人都懂得如何挑选颜色,幸好网络上有很多方便的资源,来帮助我们完成这个任务。我认为这些色彩调和的网页做的很出色,但是让我们讨论一些更有趣的选择吧。
    互补色
    是色轮上相对的两个颜色,它们之间的色彩对比非常强烈。例如,紫色按钮在黄色背景上非常的突出,因为它们是高对比度的配色。当然,这还取决于每一种颜色的饱和度,通过实践来理解是最好的。请记住:对立对比!












    看Duplos的网页,你可以看到一些颜色不同的对话气泡,使用相同的白色文字。由于背景颜色够深,文字在各种颜色背景下都可读。这种不是单纯的基于文本的界面,值得我们在设计中去学习追求。
    思考一下,图标或具有行为召唤能力的按钮,在设计中所需要的对比度级别。和谐的高对比度元素,自然能引起人们地关注。当某个按钮或者注册区域需要更多的关注,高对比度往往是一个很好的解决方案。颜色如果使用得当,能产生均衡的对比。
    避免纯黑


    从美学界获得一些建议,就是避免纯黑色。当你看到现实生活中的物体,你几乎看不到纯黑色。事情看起来很暗,但它的HEX色值(十六进制)不太可能是#000。你甚至可以尝试拍摄照片,并在Photoshop中测试它的HEX色值。


    最近我发现了Ian Storm Taylor写的一篇文章,题目叫做《不要使用黑色》。它指出,通过避免在界面上使用纯黑色,能更真实地反映现实世界。这可能是一个有偏见的说法,不过近些年来,我发现这是一个极好的建议。


    为了实践这一观点,尽量避免在较亮的背景上使用#000。取而代之,选择一个暗灰色,可能是混合色(深蓝色,深绿色,深橙色等)。我总是觉得,在白色背景上的深灰色文字,比纯黑色文字的可读性高出10倍。


    纯黑色与其它颜色相比,反差非常大。这一点让我很苦恼,但即使是一点积极的差异,还是有区别的,所以我的建议是避免使用#000。




    另一个流行的选择是Adobe Color,它有非常相似的设置,但界面有些复杂。你依然需要基于输入一个单色,来选择配色方案。不过Adobe Color使用色轮展示匹配的颜,每一种颜色是灵活的,易于移动的,在维持颜色模式一致性之内。当谈到提炼自己的配色方案,我强烈建议选择这两个中的一个。它们都是基于Web的免费工具,并提供足够的功能,让你开始构造可爱和丰富多彩的项目。







    结果以表格形式列出来,说明了每个页面元素,在对比度和亮度方面的差别。这当然也不是完美的,但它确实为新的设计师,提供一个良好的开端。

    楼主 2016-08-19 08:38 回复

共有回帖数 0
  • 回 帖
  • 表情 图片 视频
  • 发表
Copyright © 2010~2015 直线网 版权所有,All Rights Reserved.沪ICP备10039589号 意见反馈 | 关于直线 | 版权声明 | 会员须知