厉害了,一种颜色也能做出世界级的网页设计 !

发布日期:2017-10-20
浏览次数:64
  
undefined
 
与多色相比,单色并不是网页设计师的首选配色方案。单色配色,顾名思义,是指整个网站只使用一种色相(色轮上可以找到的颜色,比如红色、绿色、蓝色)。虽然单色不比多色配色方案那样常见,但这种设计手法同样也有自己的优点,它可以很好地突出网站品牌,能给网站带来新的生机与活力,使用单色的网站在"满大街"的多色网页范例中也更能脱颖而出。那么在网页中使用单色配色我们要注意些什么?下面小飞就给大家整理的一些实用技巧。
 
 
 

选择基础色

单色配色最困难的地方就在于基础色的挑选。因为整个网站只能使用一种颜色,哪种颜色才能和各种网页元素和谐搭配呢?这时站长们可以从网站的整体基调着手,选择与网站基调相配的颜色。不同的颜色常常给人以不同的联想意义,下面是各种颜色的情感基调:
 
  • 红色:爱,激情;
  • 蓝色:和谐,信任;
  • 绿色:希望,自然;
  • 黄色:有趣,能量;
  • 粉色:浪漫,女性化;
  • 紫色:神秘,幻想;
 
在确定网站基本色时站长们也要考虑一下网站的品牌形象和产品定位。想想如果将这个颜色用在品牌Logo或产品上,会有怎样的效果?另外,你是希望营造一个明亮还是柔和的网站?又或是两者相结合?总而言之,在确定网站的基础色时我们可以从多个角度出发,比如网站基调、品牌形象、产品定位、色彩饱和度等等。
 
undefined
 
 
 

调整色彩明暗度和饱和度

虽然在单色配色方案中,网站只使用一种色相,但这还是有很多种设计方案可供选择的。色相是可以在色轮上找到的颜色,它的饱和度和亮度默认都是100%的,站长们可以通过改变Tint(色彩)、Tone(色调)、shade(色度)这三个属性调整色彩的亮度和饱和度,创造属于自己独特的配色方案。下面是三种属性的简单介绍:
 
  • Tint(色彩):是色相与白色组合产生的颜色,也就是在基础色中添加不同比例的白色,从而产生一系列的Tints;
  • Tone(色调):是色相与灰色组合产生的颜色,也就是在基础色中添加不同比例的灰色,从而产生一系列的Tones;
  • Shade(色度):是色相与黑色组合产生的颜色,也就是在基础色中添加不同比例的黑色,从而产生一系列的Shades;
 
当然,一个色相的属性调整之间最好有充分的对比,这样用户才能轻松识别出来。我们还可以让不同元素在整个设计中保持色相相同但明暗次第变化的效果,以构成一个阶梯型的色阶。总的来说,单色配色在网站中有着不俗的表现,它不仅可以用来呈现单个颜色,还能借助不同的属性让网站更有质感。
 
undefined
 
 
 

和其他元素搭配使用

如何有效引导用户进行浏览也是单色配色方案的一个难点。因为单色配色中往往只有一个基础色,有时难以营造充分的对比。而在这一点上多色配色就有着得天独厚的优势,比如它可以使用对比强烈的两种颜色重点突出CTA按钮,吸引用户的注意力。那么,在单色配色方案中,怎样才能有效引导用户浏览网页呢?将基础色与其他元素搭配使用就是一种有效的解决方案,下面是几种不同的搭配方案:
 
  • 颜色叠加  在网站中使用颜色叠加时,一定要记得将背景元素设置为黑白,这样才能保证网站整体色彩是一致的,不会出现色彩混乱叠加的问题。
  • 加粗字体  在网站中使用加粗字体是为了让文本内容在单色配色的背景中更易为用户所识别。
  • 使用阴影和其他视觉线索  这些视觉线索可以很好地区分网站元素和背景层,让网站的可读性更强。
  • 使用插画  将单色背景与插画结合起来,可以给用户呈现更加现代化的视觉体验,同时也可以强化单色配色方案的表现力。
  • 搭配同色图片  如果你需要在单色背景中使用图片或视频,不妨选择与背景色调一致的图片,这样更能给整个网站带来和谐美。Cuberto网站就是这样做的(见下图)。
 
undefined
 
 
 

大胆使用流行色

近年来网站的流行色大多是Material Design中饱和度高的明亮色,目前主要的流行色有马尔斯绿、芭蕾鞋粉等。在单色的网页背景中使用流行色,不仅可以让网站显得更加有趣、漂亮,还能凸显网站的时尚潮流。在单色配色方案中使用饱和度高的明亮色还有一个好处,那就是站长们在调整色彩、色调和色度上有很大自由发挥的空间。不过,如果你决定在网站中使用流行色,那一定要及时关注时尚圈的趋势,如果流行色有所改变,你也需要适时更换网站的配色方案。另外,关注最新的流行趋势没准还能给你接下来的设计提供更多的灵感。
 
undefined
 
 
 

使用现代化的深色系

并不是所有的单色配色都只使用一种颜色。不少更为现代化的深色系配色方案开始在网站中使用丰富的黑色、灰色,或是几乎等于黑色的蓝色。这些暗色系的配色方案很有趣,也足够独特。不过它们在创造上有些难度,因为颜色差别比较少,可供设计师自由发挥的空间很小。尽管如此,深色系配色,尤其是黑色系,往往让网站显得十分时髦、现代,他们最适合用在内容较少的网站中、或者作为长滚动网站的首屏。当然,在这种风格的网页设计中,最好使用浅色系的文本,比如白色,这样用户浏览起来会更加顺畅。
 
undefined
 
 
 

尝试"准单色"设计

除了使用标准的单色方案以外,我们还可以在网站中使用“准单色”方案。也就是说,我们可以在网页中使用一种标准色,再加上一种对比色。这种近乎单色的配色方案可以解决单色设计的所有问题,比如如何让用户轻松注意到CTA按钮。这里添加的对比色可以选择色轮中相对的颜色,以形成最大的反差。选取的颜色也要能很好地搭配文本,这样CTA按钮等元素上微文案的可读性才会更强。
 
undefined
 
 
 

结语

单色配色方案本身很有趣,更重要的是,它也足够经典。不过,单色配色的缺陷也很明显,用户在长时间的观看之下,会逐渐习惯网页的设计,对网站的后续内容可能没有足够的好奇心。所以说,在单色配色方案中,设计师可以适当进行一些调整,以确保网页具有持久的生命力。

登录后即可发表评论,立即登录.