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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
零基础学配色系列之红色+蓝色篇
0.0°
2017-02-21 好文转载 经验/观点 原作者: 未知 举报 3864 14 10 2

好文转载~版权归原作者 ~红配蓝很好看

人气超高的从零开始学配色教程出进阶版咯。进阶版不仅增加了更多案例,而且案例的配色也越来越丰富,特别全面的系列教程,建议收藏。


红色

色彩是光的魔术。而对于人类来说,其实光也是人脑的一个魔术。既然有魔术这样的词出现,我们就必须放弃对于色彩的固化的思考。比如,对于色彩的命名带来的限制。

红色是一种热烈的色彩,它是所有色彩中最为夺人眼目的一种。红色所拥有的热情也是其他色彩所无法比拟的,当你想要表现出热情活力的一面时,红色当即是首选。然而,就像我们之前谈到的,既有热情洋溢的正红,也有轻柔粉嫩的婴儿粉红,这就是基于“红”这个意向上的色调变化所拓宽的情感空间。因此,在选用“红”作为主题色时,必须要认真的了解设计背后的传达目的,根据目的最终来瞄准精确的红色调。

Image title


深红色往往象征着一种成熟的奢华,而用得不恰当也会显露出某种邪恶,或让人联想到伤口血液这样的意向。因此在网页设计中并不多见。而高明度的红则带来某种热情的同时又不至于暗沉,使用较多的也是这个区域的色彩。

红色的邻近色系是橙色和紫色,因此,红色中也有橙红和紫红的参与,它们自然也夹杂了橙色和紫色的特点。

下面这个网页中采用了红色的明度渐变作为背景展示内容,红色本身的感染力一览无余。红色作为背景是非常大胆的想法,因此运用渐变会让背景不会抢夺走主角的风头,这也是在运用背景红色的一个解决方案。

Image title

Image title



将正红作为背景是十分冒险的行为,如果你将这样做,那么就要确保你的网站内容并不需要太多,也就是网站自身能发挥“夺眼球”的功能,而相对“实用”性将下降,毋庸置疑,一个全红的网站看久了会让人产生视疲劳。

Image title


而绝大多数情况下,红色作为主色使用更为适宜,无论你采用什么颜色作为背景,将红色用在主要的组件上,例如按钮、导航等,都能从背景凸显出来,而不同担心主要元素用户很难留意。

将缩略图设计为红色,在白色背景上方十分惹人注目,增加了点击的欲望。

Image title


我们知道,红色在色轮上属于暖色系,暖色系的色彩都有一种往前扩大的感觉。有时候为了削减红色的这种激进,可以选用偏紫的红色。

华美的紫红色降低了饱和度以后,变为了淡淡的粉红,让人感受亲切柔和,而作为背景色的存在则显得非常舒适。

Image title

Image title



网页设计这两年开始越多使用浅粉色作为大面积使用,更多时候为了营造一种怀旧感,而同时又表达出时尚。粉色的背景往往可以使用高纯度高明度的红色作为主色。

Image title


相对而言,橙红色则没有红色如此抢眼,而又没有失掉红色的活泼,更带着橙色独有的亲和力。这样的颜色在与饮食相关的设计中最为常见,可见它是一种开胃色。

非餐饮类的网页设计中用到了橙红色,也能让画面变得更加亲切活泼。

Image title

Image title



食品类的网页设计中常见用到橙红色,这种颜色能刺激人的食欲,让食物看起来更好吃。

Image title


浅色粉作为背景,将橙红色作为强调色,这一组搭配显得时尚优雅又新鲜活泼。

Image title


后记

红色作为强调色而存在,似乎显得理所应当。显然,我们对红色的开发还不尽全然,有些时候我们避免使用这种过于醒目的颜色是为了让使用变得更流畅,所以,降低红色的饱和度使其不过与抢眼,提高红色的明度让页面变得“清爽”都是在轻设计中极为重要的原则。如果真的需要用到厚重的深红色,也要试着降低其使用的比例,使其发挥精准的聚焦作用。

蓝色

蓝色作为天空和海洋的颜色,我把它称之为“宇宙色”,因此它自带浩瀚和广大是其他颜色所无法比拟的。然而又因为它是绝对的冷色调,因此在表达逻辑、理性、男性、专业、科技等主题上得以大量运用。

蓝色的色调也是相当丰富的,从深邃忧郁的深蓝,到柔和清爽的粉蓝……并不是每一种蓝色都是冷感的,与它临近的紫色和绿色都对蓝色色调有一定范围的影响。

Image title


蓝色象征着科技,这一点已为大众所接纳,因此,各种以蓝色作为背景的,对蓝色的大面积运用,在这一主题下尤为常见。以高明度的高饱和度的蓝色作为主色,抛弃了蓝色的忧郁,非常富有活力。由于蓝色容易联系到水、天空、海洋等,因此它能最大程度的发挥这类自然元素的视觉特性.

Image title


Image title

Image title




最易于和大面积的蓝色搭配的还是黑白灰,这样的搭配来得非常安全,但也会有点呆板,画面略平淡。为了打破这种单一色彩的平淡,可将背景增加一些富有动态的纹理图案,顿时让画面变得非常具有科技感。

Image title


当然,在大面积使用蓝色的时候,当你想要突出某一焦点,最好的方式就是采用它的互补色,形成视觉的冲击。

如下页面中,页头部分出现的橙色救生圈即是蓝色的互补色,这一焦点让人过目难忘。

Image title


蓝色是冷色系,因此,为了让画面不至于太冷,增加暖色系是最好解决视觉平衡的做法。红、橙、黄都是不错的选择。由于蓝色一方面和这些暖色有强烈的对比,一方面又能使画面回暖,因此在蓝色为主色的页面中增加暖色,可以说是常见的配色手法。

选用怎样的暖色,其实完全取决于你所使用的蓝色是怎样的色调。并不一定是高明度高纯度的蓝色才是最优的选择,尽管目前这一色彩受到科技界的高度青睐。

如下这一网页中选用了比较黯淡的蓝色最为主色,明度相对较低,蓝色有着淡淡的怀旧感,与此同时,橙红色也作为强调色,让画面显出活力。

Image title


蓝色在自然界中四处可见,大海、天空……每张风景照多少都会包含着蓝色这种色彩,因此在运用照片时,选用比较纯粹的蓝色系大海、山川或天空已经是一个不二之选。

风景照片能表达的主题也非常广泛:广大、辽阔……这些都给足了设计师非常优质的素材,而将风景照作为大图背景,也是近几年流行的界面样式。所不同的是,这些风景照片中的蓝色色调的不同带来不同的视觉感受,与此相匹配的色彩也有所不同。

Image title

Image title

Image title

Image title

Image title






就是由于蓝色的“宇宙”属性,让它丝毫不会困在“忧郁”这个词汇里,而增加了绿色的蓝色,显得更加有亲和力。

偏向紫色的高饱和度低明度的蓝色,有一种奢华优雅的魅力,任何色彩在降低其明度后自有一种沉稳的感觉。

Image title


当深蓝作为主色时,明亮的绿色作为搭配,相互之间是邻近色,而又因为其明度的对比,相互辉映出蓝天绿水之美

 Image title

当蓝色沉寂下来,我们并不会因此而觉得压抑,只要增加其饱和度,这种蓝色就会显得非常有质感,体现出某种专业的感觉。在公司的网站中,这种体现专业感的蓝色显得中性毫不浮夸,提升了视觉的信赖感。

Image title


后记

尽管蓝色并不一定属于男性,但是深蓝色的确比其他颜色来得更为理性和克制。但根据配色的不同,赋予画面的色彩比例的差异,所演绎的色彩感觉也会不同。蓝色几乎是一种万能色,它的冷并不是绝对的,就像在深海里,当你把头望向太阳的时候,蓝色又有着一种温暖的错觉。也许这就是一种颜色说不尽的秘密。


我们是知识的搬运工和制造者:米你设计学院【UI】 562902075 点击链接加入群【米你设计学院【UI】】:http://jq.qq.com/?_wv=1027&k=2EKItfe【UI】
看文字多麻烦,不如看看直播案例里,色彩是怎么用的,点击报名: http://ke.qq.com/cgi-bin/courseDetail?course_id=117001&open_room=1&term_id=100127502&from=41

Image title

Image title



更新:2017-02-21

收藏

14人已收藏

玉玉酱酱

学习UI中

  • 73

    作品

  • 133

    粉丝

  • 0

    关注

  • 交互基础科普!聊聊移动APP中反馈提示的设计方法与实例
  • 从纵向到横向!给转向设备做设计的基础知识全科普
  • 实战干货!通过按键颜色引导用户+让进度条”快”一点的技巧
  • 全方位揭秘!隐藏在背后的交互设计

    猜你喜欢

      2017-02-21 好文转载 经验/观点 原作者: 未知 举报 3864 14 10 2

      零基础学配色系列之红色+蓝色篇

      0.0°

      你确定要举报零基础学配色系列之红色+蓝色篇

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年02月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      10
      14
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录