网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计色彩搭配看似复杂,但并不神秘。既然每种色彩在网页界面中都有着自己的位置,那麽我们如何透过一些网页设计色彩搭配技巧,加深用户对网站的印象呢?

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

一、 理清网页配色的流程和思路

想要理清网页配色的流程和思路,首先我们需要分析网页色彩的组成部分。

通常一个网页给人最直观的色彩印象就是由主色或主色调决定,不过网站只有主色调有时会显得界面略为单调,因此我们需要在确定主色调後搭配一个「辅助色」,以起到平衡主色的冲击效果,减轻视觉疲劳等作用。

下面我们就以下面这个网页作品举例:

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

网站以蓝色为主色调,容易营造一种踏实和信任感。将企业品牌或产品与蓝色基调结合,可以无形中让用户加深对网站的信任感,给人亲切和自然的感觉。但是,大面积使用蓝色不仅会让网站显得毫无生气,甚至会给用户带来一种难以形容的压抑感。

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

於是设计师利用蓝黄的撞色效果,使整个界面看起来非常有情调,给人一种乾净整洁的感觉。另外,设计师还添加呼应色达到调和的效果,以此呼应主色(蓝)或对抗色(黄),避免界面显得生硬的同时,进一步丰富画面的色彩层次。

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

其实说了那麽多,都不外乎涉及到以下这三大重要知识点:

● 确定界面的色彩基调

● 确定界面的对抗色

● 确定界面的呼应色

二、 如何确定界面的色彩基调

确定界面的色彩基调,也就是为网站选取合适的主色调,以此能增加用户对网站的直观印象。

1. 根据品牌调性/产品包装选取

以品牌logo或产品颜色作为网站主色,会加强用户对网站与品牌/产品之间的联系。这种色彩搭配方法原则上不容易出错,是一种较为安全的主色选取思路,同时也是确定界面色彩基调的最基本且常用方式。

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

▲ 网页主色直接选取包装盒上的颜色

2. 根据色彩联想选取

不同颜色会使人产生不同情绪,从而引起人的心境变化。根据色彩联想来选取主色,简单来说就是不同色彩会给人不同的印象。下面小编就以常见色彩所代表的具象联想和抽象联想,以及适合的行业网页设计,简单来说说:

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

3. 根据受众偏好选取

此外,我们还可以根据品牌或产品的受众偏好来选取主色,譬如:从性别偏好上来看,

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

男性通常比较容易接受蓝色、青色、绿色等冷色,以及黑色和灰色等无彩色;色调偏好上,则偏向於淡浊色调、浊色调和暗色调的色彩。

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

与男性相反,女性在色相上偏好红、橙、紫、粉等暖色;色调偏好上,则更倾向於淡色调、明色调和纯色调等较为艳丽的色彩。

三、 如何确定界面的对抗色

确定界面的色彩基调後,接下来我们就需要根据主色来选取对抗色,而这个对抗色可以是辅助色,也可以是点缀色。

1. 互补色/对比色的对抗

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

选取对抗色最直接有效的方式就是使用「互补色」,互补色是指色相环中相隔180度的颜色,如:红与绿,蓝与橙,黄与紫均为互补色。互补色最大的特点就是形成强烈的对比,因此搭配在一起的对抗效果是最为明显的。

除了互补色,对比效果稍弱的对比色同样可用於对抗色,但同类色、近似色等由於色相比较接近,因此搭配一起时难以形成很好的对抗效果。

2. 深浅色/浓淡色对抗

设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

想在画面中保持一种色相的印象,可使用深浅色/浓淡色作为对抗色,也就是在主色基础上,通过调整纯度和明度,来丰富画面的色彩层次,同时又使将界面形成和谐的配色效果。

3. 彩色与无彩色的对抗

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

若网页设计是以黑、白、灰等无彩色为主色调,那麽网页上的元素就可选用有彩色来搭配;同样,网页设计是以彩色为主色,网页上的元素可选用无彩色来搭配,这样可突出界面中的重要元素,而且不至於显得混乱。

4. 花色与纯色的对抗

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

以上述网页设计作品为例,为了表现出灵动活泼的氛围,界面中使用不同色相及富有变化的元素造型,使整体形成花色印象;同时界面的背景以纯色为主,形成很好的动静对比。(倘若界面背景同样是花色,整个页面就会显得很凌乱,容易分散用户的注意力)

四、 如何确定界面的呼应色

主色、对抗色的选取都已经确定好了,最後我们就为主色或对抗色选取相应的呼应色,让整个界面有一个过渡的效果,避免界面显得生硬。

① 色相一致的色彩呼应

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

在网页设计中,主色并非都是大面积的背景色,像上述案例那样在分散元素不断使用主色,能很好地形成呼应和强化的效果。

② 色调一致的色彩呼应

网页设计实例分析:如何透过色彩搭配技巧,加深用户印象

网页设计实例分析

如果界面的色相较多,可以色相不同的颜色调整成相似的色调,从而达到整体产生和谐的效果。

为网站选择合适的配色方案并不容易,而是需要考虑很多颜色和设计本身的因素,以及很考验设计师的创意与想像力。如果你对网页设计有任何疑问,或者正在找一家有经验且专业的网站制作公司,欢迎谘询我们,我们将竭诚为你提供一系列的网站制作、网站营销等服务,助你将危机化为转机!

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/41935.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 90%的网站设计都使用轮播图,但专家却说作用不大

    无论是页面布局还是内容填充,甚至是网站SEO优化,目的都是为了提高网站的流量和排名,继而提升网站的转化率。对於很多网站来说,轮播图是不可缺少的重要元素之一,因为它可以尽可能多的突出产品,展现产品信息,提…

    2022年6月25日 建站资讯
    0235
  • 控件如何设计,UI设计中9个常用的控件规范。

    UI设计中常见的控件设计都有哪些规范?本文总结了按钮、多选、单选、切换、文本输入框、下拉选择、列表框、下拉按钮、滑块9个控件的设计规范。 我们在设计 UI 界面的时候,有一些控件几乎总是会用到。用户熟悉了它…

    2023年3月2日 SEO操作
    05
  • 如何尽可能的提高设计稿的还原度?

    使用辅助线而不是猜测 不要自诩为像素眼,最标准的还是使用辅助线,让页面元素更加的清晰、整齐,尤其是在放大之後还能够对齐和避免毛边问题出现。 宽度不要定“死” 将宽度定住,容易出现实际的页面设计过程中与视觉…

    2022年6月25日
    0113
  • 如何利用网页设计宣传你的品牌

    有句老话讲的好:“在结识新朋友的时候,第一印象是非常重要的。” 同理这句话也适用于网页设计。 在为商务会议做准备工作的时候,你可能会练习你的演示文稿以及挑选合适的服装,而这些准备都有助于为自己创造良好的…

    2019年6月28日
    0211
  • 做网页设计如何给公司定位?

    大多数的公司在进行网页设计的过程当中,一定要综合实际情况来给公司定位,只有这样才能够制作出最适合公司的网站项目,才能够更好的做线上线下的运营推广,那么如何给一个公司设定好相关的定位,其实在这其中我们…

    2019年9月21日
    0278
  • 复古!什麽是孟菲斯页面设计风格?

      孟菲斯页面设计风格其实是现在比较流行的一种复古趋势,它其实拥有着现代设计风格的特徵。最初起源于其实纺织品的设计,也就是常见的波普艺术、装饰艺术,属於复古风格的分支之一。它为何这麽受欢迎? 使用…

    2022年6月25日
    0132
  • 网页设计师的工作整理基本要素。

    今天是春天的第一天!正所谓一年之季在于春,在这个当你想要清理你生活的部分时,也要优先清理一下你的网页设计业务。如果你和我一样,你会在一周或一个月的晚些时候抽出时间,向自己保证你最终会处理好"生意…

    2023年2月17日 SEO操作
    01
  • 或成为主流的两种网页设计风格

      几何图案以及全屏背景图 全屏背景图的设计是最受欢迎的背景网页设计风格之一,合理地使用大图将使用者的视线焦点进行抓取是非常不错的方式之一!在大多数的情况之下,利用好全尺寸图像作为主页的背景,文字…

    2022年6月25日
    0121

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息