18801051825的个人主页

http://www.qtcn.org/bbs/u/185984  [收藏] [复制]

18801051825

  • 0

    关注

  • 3

    粉丝

  • 36

    访客

  • 等级:新手上路
  • 总积分:0
  • 男,2011-01-01

最后登录:2018-05-23

更多资料

日志

转载色彩在网页设计中的有哪些重要角色?

2018-05-10 10:08
在生活中,不管是浏览网页还是使用APP,我们都能看到色彩是其中重要的设计元素。每一年我们都能看到很多“流行趋势预测”之类的文章,而这些流行趋势里无一不包含色彩。
随着时间的推移,设计师们在色彩的使用上更加大胆,更加有策略。有时,色彩用来突出某个元素,有时用来讲好一个故事,有时用来强化品牌的输出。今天我们就来举几个例子。


强化背景几年前有一个很流行的趋势是采用大胆的背景,现在还是能看到很多例子。在一个好的设计里,丰富多彩的背景能够让某一区域成功吸引注意力。不管你认为流行趋势是什么,不可否认的是,好的背景色能让一个部分脱颖而出。
下面这个设计来自Root工作室,使用黄色背景来突出切斯特动物园的案例研究。黄色背景设定了这个案例研究的基调。当然了,并不是所有的案例都使用像切斯特动物园黄色这样鲜艳的颜色,因为这个案例的设计是极简风格,并没有需要特别突出的内容,所以鲜艳背景恰到好处。

接下来这个例子是Mambo Mambo,它使用色彩来突出组合的不同部分。有些部分是霓虹黄色,有些是深蓝,有些甚至是黑色。在截图中,我们可以看到,霓虹黄色与绿色搭配,蓝色和肤色搭配,看起来非常和谐。
在整个页面中,正是这些背景色的使用使不同部分都变得独特而有趣。同时呢,也起到了品牌宣传的效果。



突出内容颜色运用得当可以更好地突出想要突出的部分。让我们从优步手语登录页面开始,橙色的渐变背景肯定会吸引用户的注意力。这是一个很棒的设计策略,因为这个页面的目的就是教人们基本的手语,很大程度上是依赖视觉线索实现的。

接下来是Kickpush 设计工作室的页面。看图上的文字我们就知道,Kickpush希望展示自己与众不同的个性。这个配色方案的选择就很有目的性,将Kickpush的个性快速直观地表达出来了。



讲好故事色彩有助于讲好一个故事,Bloom的主页就是个很好的例子。在整个设计中,他们使用的是同样的电子蓝。相同的配色与其他视觉元素一起,帮助用户从页眉滚动到页脚。如果所有不同的部分都有不同的主色,那么故事的完整性就会被打破了。

对于Adobe的营销云登录页面,效果也是差不多的。整个设计是一个很大的版面,每个部分都有自己的配色方案,从最顶部的浅蓝色一直到最底部的深紫色。我们可以看到,整个配色不仅仅是纯的UI颜色,照片选用的色调也与每一种背景色相配。
因为这个设计是一个很长的页面,颜色有助于讲述每个部分的故事。



激发兴趣,强化个性有时,颜色是专门用来给设计增添趣味性的。为了更有效的使用色彩,有时大胆的颜色并不一定要在设计的前面和中心。
例如,Designmodo自己的Qards着陆页面使用了各种各样的小色块,从而使得登陆页看起来更令人愉快。



提升品牌强化品牌,我认为这是色彩最有力的作用了,当然了,我不是指上文中Kickpush 或是Bloom那种使用大块背景色的方式,而是批判性的、策略性的使用颜色。
我们很多人都见证了Asana的改版,在新版本中加入了不少颜色。在网站的某些部分,颜色被大量地使用,而在其他部分则不是那么多,这是为了在总体上实现平衡。Asana选用的颜色多变而充满活力,搭配的也非常好。现在,Asana的品牌色彩由亮粉色,橙色和紫色组成,充满活力。可以说,颜色策略似乎是Asana品牌定位的关键。

Stripe公司的策略也差不多,使用相邻颜色之间的渐变,比如蓝色和绿色,这可能是这种颜色使用的一个大趋势。品牌整体上是蓝色,同时也包含绿色、粉色、紫色和橙色。这么多颜色共同配合,增强了Stripe公司的品牌影响力。

最后一个例子是Goulburn山谷的网站。他们的品牌使用了一些不同寻常的颜色,不过整个设计看起来不错。
登录页面中使用的颜色和照片中的截图是一样的:绿色略带橙色。由于照片中色彩的协调,整个着陆页都很流畅。

总结
无论是Asana,用颜色创造更好的品牌;还是Kickpush,使用明亮的红色背景突出内容,让用户意识到它的与众不同,我们看到了颜色在网站中的战略性意义。
最重要的是,颜色有助于塑造个性,尤其是品牌形象。当网页设计趋势发生变化时,网页设计中色彩的使用只会变得越来越好。




阅读全文

分类:默认分类|回复:0|浏览:48|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:05-23 16:43
©2005-2016 QTCN开发网 版权所有 Gzip disabled