网站如何配色及网站配色方案
应该是根据你的网站主营卖点来做配色方案的,比如一家做农副产品交易的网站,大部分元素要体现瓜果蔬菜和交易场所,那么红绿黄对比鲜明及大量的个性图标就是很有必要的;如果以设计为主导的网站,充足的留白和冷色调为主的渐变色配色就很有必要。最终要以目的为导向的,建议用零代码的建个网站上去体验下。
网站设计灵感——单色配色方案
单色配色,是在整个网站设计中只使用一种色相,或以一种色相作为整个网站的绝对主色调。一般来说,单色是一种艺高胆大的配色方案选择,因为其自带强烈的视觉效果,会对网站主体性质有一定要求。不过,如果品牌形象和产品、业务定位合适,制作网站时使用对应VI色、或带有特别情感基调的单色设计网页,一定可以在宣传和展示上先声夺人。
选择基础色
单色配色的关键在于基础色的挑选。一个网站包含形形色色各类元素,如何找到一种颜色与各元素和谐搭配,是个很考验创意和整体把控能力的问题。从网站需要营造的情绪着手是一个重要切入点。我们通常认为不同的颜色能够表达不同的情绪,匹配正确的颜色基调,会提升网站情感传达。
比如,红色传递活力和激情、蓝色代表和谐与信任、以绿色表示自然和希望、以黄色表示趣味和能量,以及粉色代表的浪漫、柔美,紫色代表的神秘、幻想......
在确定网站基本色调时也要考虑网站的品牌形象和产品定位。想想看如果将这个颜色用在品牌Logo或产品上,会有怎样的效果?另外,你是希望营造一个明亮还是柔和的网站?又或是两者相结合?总而言之,在确定网站的基础色时可以从多个角度出发,比如网站基调、品牌形象、产品定位、色彩饱和度等等。
调整色彩明度和饱和度
严格来说,单色配色方案是指只使用一种色相,但这其实为设计方案提供了多种可行性选择。这种可以在色轮上找到的颜色,其饱和度与亮度默认为100%,高饱和度的亮色本身自带高可创作属性,在实际设计过程中,可以通过色调、色度等属性来调整色彩亮度与饱和度,以一种色相组合出不同的配色方案。
当然,一个色相的属性调整之间最好创建充分的对比,以方便用户轻松识别。同时,还可以为不同元素创建色相相同、明暗次第变化的效果,即使以单个颜色来呈现,通过不同属性的调整也能让网站整体表现更有层次感。
和其它元素搭配使用
不同于多色配色方案,可使用对比强烈的两种颜色突出CAT按钮以吸引用户注意,单色配色中仅有的一个基础色难以营造充分的对比,这为引导用户浏览增加了难度。要解决这一问题,将基础色与其他元素搭配使用就是一种行之有效的解决方案。
颜色叠加 在网站中使用颜色叠加时,可尽量将背景元素设置为黑白色,这样不仅能保证网站整体色调的一致性,避免色彩混乱,也不会影响文字元素的表现。
字体加粗 显而易见,加粗字体是为了让文本内容在单色配色的背景中更易为用户所识别。
阴影和其他视觉提示 视觉线索的使用可以很好地区分网站元素和背景层,提升网站的可读性。
使用插画 单色背景结合插画,可以呈现更加现代感的视觉体验并强化单色配色方案的表现力。
搭配同色图片 与图片搭配同样是为了提升网站的表现力,而选择与背景色调一致的图片,可以使整个网站视觉上更加和谐。
使用现代感深色
并不是所有的单色配色都只使用一种颜色。不少深色系配色方案开始在网站中使用大量的黑色、灰色,或是近乎于黑色的深蓝色。这些暗色系的配色方案在表现效果上足够独特,但在创作过程中有些难度。因为颜色差别较小,可供设计师自由发挥的空间也就很小。
尽管如此,深色,尤其是黑色系配色方案,往往能够让网站显得十分时尚并极具现代感,在内容较少的网站里,可作为长滚动页面的首屏,配合白色等浅色系文本,给用户带去极佳的使用体验。
尝试"准单色"设计
有时候,打破设计规则往往能够创造意外的效果。除了使用标准的单色以外,还可以在网站中使用“准单色”方案。也就是说,在原本的单色配色方案中,可加入一种对比色,为整个配色方案创造全新的视觉焦点。这种方式常用于突出CTA按钮等网站元素,同时搭配合适的文本,使元素上的微文案具有更强的可读性,提高CTA按钮的号召力。
任何大胆的选择都伴有一定的风险。用户浏览过程中,单一的色调会使用户更快习惯网页的设计,从而降低了对网站后续内容的好奇心。此外,流行趋势的千变万化降低了用户对于色彩选择的忠诚度,单纯的某一类颜色可以最贴近时尚风向,但同时也是最容易过时的。所以,在使用单色配色方案时,除了要有对时尚最敏锐的嗅觉与捕捉能力,设计也要具备充分的灵活性与前瞻性,比如调整色彩,改造时尚,以赋予一个网页更为持久的生命力。
双色调色技巧有哪些方法?请举例说明一下
今天给大家分享一个配色技巧——双色调。关于双色调风格,其实在国外的一些设计上经常被运用到,比如海报设计、网站和App,这种具有较强的视觉处理,不但能让原本单调的画面变得更时尚,相比普通色彩的图像,更明确表现出特定的氛围。那么什么是双色调?如何处理才能达到双色调的效果?又如何去运用双色调才更有效?双色调通过两种颜色来改变原本图像的色调,不同的双色搭配会产生不一样的调性氛围。如果涉及到印刷成本的话,双色调设计也是一种非常经济实惠的设计方案。不同色调的画面效果双色调风格能运用到多种设计的领域当中,例如印刷品、出版物、网页设计、界面设计、插画等等,都能看到双色调的应用,毕竟双色调能带来强烈的视觉吸引力,让设计变得更加有个性有趣。 书籍设计 海报设计 网页设计上面说过,双色调是通过两种颜色来改变原本图像的色调。关于配色,总是离不开色彩关系。所谓色彩关系,就必须有两种以上颜色,才能形成的关系。所以,色彩关系有这些,同类色、邻近色、互补色、对比色等等。双色调风格一般会选择对比色和邻近色。对比色的双色调对比色就是基色起120°~180°的颜色,能给画面带来一定的视觉冲击力和较强的色彩张力,有强烈的个性感。红色的对比色,从蓝色到绿色之间的颜色结合图像和图形的特点,表达出合适的氛围和情感。但如果对比色使用不当的话,很容易造成晕影的现象。这时候可以结合黑白来使用,调和对比色的冲撞,也能带来一种平衡。对比色:深蓝色和橙色对比色:青绿色和紫红色邻近色的双色调邻近色是基色起60°之内的颜色。由于邻近色的色相差比较小,过渡比较柔和,所以搭配起来非常简单,也不容易出错。绿色的邻近色由绿色到黄色,或绿色到青色之间的颜色所以初学者用这种方法配色也比较容易接受。而运用在双色调中,邻近色也不会容易干扰到信息的传达和识别。邻近色:紫色和紫红邻近色:黄色和绿色对于双色调的面积处理,可以选择大面积和小面积处理。大面积处理一般情况下,通常会将图像进行大面积处理。可能就需要减少不必要的细节内容,概括地展现图像,传达整体的氛围和情感。 小面积处理如果想要小面积的双色调处理,可以从一些文字、形状作为装饰性的元素进行双色,都可以起到重整图像和图形的色彩关系,带来新的视觉感受,吸引用户注意的作用。 网站自动生成首先奉上两个自动生成双色调图片的网站,方便又快捷,适合在短时间内完成的方法。这两个网站都可以上传图片,也可以选择网站给的图片,再选择配色方案。如果要在限定的时间内快速产出双色调风格的图片,那么这两个网站最适合不过了。而且不需要梯子,亲测有效。PS 软件步骤那么在ps软件中怎样做出双色调?其实有很多种方式,但我一般会用渐变映射。因为它对应的是照片光暗部进行着色的。而不是单纯的混合模式。在渐变映射中有一个颜色渐变条,这个颜色渐变条从左到右对应的就是照片暗部、中间调和高光区域。也就是说越靠近左边的颜色就对应照片暗部的地方,越靠近右边的颜色就对应照片高光的地方,那么根据这个原理就可以进行渐变映射。关于这个渐变映射的操作,如何还是看不懂,可以点击此文章【我想要一个不辣眼,又有点高级的渐变!】回顾一下的。 什么情况使用双色调?双色调能优化质量较差的图像,形成一个全新的视觉画面。当你的素材比较糟糕的时候,选择双色调能瞬间提升逼格,这也是拯救烂图的方法之一。改前改后双色调比较适合修饰性效果的画面,较为有趣个性的设计。对于产品展示,严肃的主题项目,就不太适合使用双色调风格。最后,我们来总结一下。虽然双色调设计不是一件新鲜的尝试,但对于设计来说也是一种趋势,依然具有很强的视觉吸引力。希望今天的文章,能带给你一点新的想法。
0条大神的评论