恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
新手的成长记录点滴(五)
0.0°
2016-02-26 原创文章 经验/观点 举报 789 3 5 0

上次在《新手的成长记录点滴(四)》中提到有关色彩相关的内容,也是看了好多的文章和博客,觉得对自己有用的记录下来,记得我有提过,我是一个善于用笔记录东西的人,也许有人会问:“为什么不选择截图,或者拍照片的方式呢?”我也只能淡淡的一笑只是个人的习惯而已。那接下来就继续总结关于色彩的知识,不知道各位有没有发现,色彩学是一个很深奥而又很好玩的东西,相信只要你愿意去接触,会慢慢的喜欢上它的。

1、关于网页的配色

这个问题我也是时常被困扰着,相信各位也是为其翻阅过大量的书籍与博客吧,关于这样的文章在网上也是层次不穷的,各有各的说法。相信只要稍微注意过的人都知道“色卡“、“色轮”等辅助性配色工具,但那更多都是从印刷介质上的色彩系统延伸出来的,不完全适用于网页,甚至造成很大的局限,比如你会较真的通过色轮来选用网页色彩吗?再比如通过下面提供的配色组合,你能自由的应对一个又一个的类型相若的网页设计需求吗?

网页视觉层面主要是由形式(或叫布局)、色彩、图片和文字信息组成,设计师通常对形式感关注的比较多,因为视觉冲击力、设计差异性或创新大多都仰赖形式呈现,而色彩主要影响整体观感、设计品质以及受众情绪,很多时候我们设计了一个不错的形式却未能做出这个稿子应有的品质,会不会太可惜?形式需要思考创造,图片素材需要学习处理,文字需要梳理编排,但网页色彩是不是一定需要有天生的色感、丰富的理论和多年经验沉淀才能运用自如?

当然不!

由于CMYK与RGB色彩模式不同,网页的色彩呈现数量要庞大的多,选用也应该更自由,但在配色上却常碰到设计作品偏脏、发灰、花哨等大问题,这事儿得解决。

俗话说的好:“网页配色不宜超过三种颜色”,真理,这没错,但更多是从色相(赤橙黄绿青蓝紫等不同颜色)上来说的。

色相差异明显,主要色彩的选取就比较好办,常见的有对比色、临近色、冷暖色调互补等方式,可以简单设定,或直接从成功作品中借鉴主辅色配比都可以,比如常见的朱红点缀深蓝、明黄点缀深绿等。

2、了解网页配色的原则

1、色彩搭配的合理性(每一种颜色都有它自己的含义,如红色:热情、奔放、喜悦、庄严等这还可以像浏览者准确快速传递出去设计者想要表达的主题。);

2、色彩鲜明性:(页面的“视觉焦点区”一般是首屏的区域,在这区域中使用鲜明的色彩可以给浏览者留下深刻的印象并带来第二次访问);

3、色彩的独特性:(如何在同类型页面中脱颖而出,这就需要独特的配色方案);

解决上面的方法:

(1)、对比色彩的搭配(一般来说,色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力,可以突出重点,产生强烈的视觉效果);

(2)、冷色系的搭配(冷色系搭配是指使用绿色、蓝色及紫色等色彩的搭配,可为网页营造出宁静、清凉和高雅的氛围);

(3)、暖色系搭配(暖色系搭配是指使用红色、橙色、黄色等色彩的搭配,可为网页营造出稳性、和谐及热情的氛围);

(4)、邻近色的搭配(是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色,可以易于达到页面和谐统一的效果);

(5)、同种色彩的搭配(是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感);

3、了解色彩对项目的影响

颜色是种看起来相当简单,却非常难处理好的东西。而且,由于它是任何设计中极度视觉化、焦点化的部分(它确实是),当它没处理好时会如此引人注意。

如果你的设计中这么重要的部分给人感觉不好,或者没有很好的表现你的公司、服务或品牌,那么它就能让停留访问的用户消失不见。正因为如此,选择配色方案时,你需要非常清楚颜色在你设计中可以造成的影响——好的与坏的,摒弃这些默认样式(例如互补色),使用你自己的配色方案,绝对是件好事,但是当你着手开始创建自己的配色方案时,可能你最好还是沿袭主流的配色方案。这样一来,走错路创造出糟糕的配色方案就不容易了,虽然也难以杜绝。

4、如何选择适当的配色方案

首先,我们来看看如何为你的项目选择一个适当的配色方案,这里你需要全局考虑,什么配色方案适合你的品牌、公司或者行业。有篇文章fantastic infographic over at Column Five Media介绍了世界百强品牌的颜色使用。

这个非常有趣,不仅让我们一睹世界顶尖品牌与企业的用色倾向,还让我们洞悉具体行业中,哪些颜色效果更好,或使用更广泛。

Image title





 从信息图表中可以看出,所有能为你所用的主色都适用于各种不同行业,这些可能适用的颜色都能解读出常用的含义,之前有文章讨论过。我所喜爱的方式,是为项目创建思维导图来探索我能想到的各种不同色调和创意,并且上网寻找这类符合品牌战略的信息。然后,把这些思维导图的创意转换为颜色的含义来确定哪个最符合,这可以帮助你找到哪种配色最适合这个项目或品牌。

5、怎样确定你该用多少种颜色

有时候,这个问题真的只是个人喜好问题。不管怎样,这个问题在Column Five Media的信息图表中不值一提,因为百强品牌中,只有5%选择在配色方案中使用两种以上的颜色注:近年来,印刷品的预算比在线曝光更重要,品牌印刷品中使用的颜色数量确实值得慎重考虑。即便如此,用多少种颜色随你感觉就好,在一些情况下,你可以用颜色来在网页的不同区块中制造差异化。在这种情况下,你可能会有4、5种不同颜色加入到配色方案中,使网页每部分协调。尽管最终选择权在你,我还是会建议你在主要配色方案中使用至少两到三种颜色,这其中不包含文字或背景的明暗中性色。比起用单色配上渐变和阴影,使用两到三种颜色的配色方案,能够给你机会尝试在各个区块间创造更丰富的对比。

1、从照片中选择配色方案

选择一张好照片上手的关键,是多样化而且最好能让你震撼。无论你的图片比较复古或单色系(即整张图片都贯穿着相近的色调和色彩),或者更加鲜活色彩丰富,你总能在其中某处找到有用的配色方案。

一旦你有了一张或几张照片,假如你立马就想试着创造几种配色方案,那么用你最喜欢的图像处理软件打开它,然后开始疯狂吧。我在Photoshop中有个自己爱用的模板(包含几个小矩形)作为切入点,来放置我所选择颜色。从照片中选取配色方案时,我试着只坚持一种(比如单色或互补色),然后在照片中尝试选取相配的颜色。所以举个例子,我会观察照片并试着发现什么颜色对我而言最突出,这不是指它们要明亮鲜艳,它们可能很柔和或只占照片的一小部分,但我会试着选出成就这张照片的那些少数色彩。

Image title



在这张照片中,由于这些相近的紫色调,我们能够很容易选出一套单色系配色方案这张照片非常饱满,因此我们可以花些时间创造一个更加个性化的配色方案,它受制于一些规则,搭配起来却也同样合适。一旦我开始深入观察照片,我就对我想要的风格有更深的了解,我会继续胡乱尝试(就用吸管工具)来看看什么颜色搭配最好。比如只选择一种颜色作为主体,再选两种其他颜色来作为陪衬。然后,开始将这些颜色放入模版,将它们来回移动,直到你对颜色的位置与层级满意为止。我通常也会试着在我所选的主色旁边各放置一个暗色(接近或几乎纯黑)和亮色(接近白色)。这可以帮助页面达到色彩与结构上的平衡,也可以在配色方案中没有适合的文字颜色时提供一种可能。






更新:2016-02-26

收藏

3人已收藏

Drimary_梦

设计源于细节,而我愿倾尽所有只为这一细节

  • 135

    作品

  • 102

    粉丝

  • 5

    关注

  • Figma零基础学习
  • 基础交互知识6种常见的隐藏菜单
  • 10个极简主义UI设计案例
  • PS中小技巧
相关标签

    猜你喜欢

      2016-02-26 原创文章 经验/观点 举报 789 3 5 0

      新手的成长记录点滴(五)

      0.0°

      你确定要举报新手的成长记录点滴(五)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年02月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录