欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

网页设计色彩进阶技巧

发布时间:2017:09:11 16:06:18 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1536个文字,预计阅读时间4分钟
导语
色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构

色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访客的行为。

所以,在玩转配色本身之外,进阶的色彩运用技巧还有很多。

1、通过比例变化创造视觉焦点

网页设计色彩进阶技巧

控制色彩的比例来创造视觉焦点是常见的色彩运用手法之一,控制色彩的比例实际主要是通过控制色彩所在元素的大小来达成效果的。比如Viporte 这个网站,当你上下滚动首页的时候,每个部分都用超大的字体进行了装饰,而每个字母都使用了漂亮的色彩进行填充。不同的文字使用了不同的色彩,并且搭配以相应的图片。每个页面的焦点肯定是最中心的图片和字母,而焦点的形成和色彩的比例与运用脱不开关系。控制色彩的占比,无论是多还是少,只要有明确的目的,总能形成吸引注意力的焦点。无论是我们常说的“万花丛中一点绿”,还是极简主义设计中大面积的留白,都是色彩比例控制下所构成视觉焦点的典型案例。

推荐阅读:网页设计中色彩搭配的运用

2、通过对比度吸引用户注意

网页设计色彩进阶技巧

在设计过程中,使用色彩来控制对比度也是设计师频繁使用的技巧之一。当设计的整体色调趋于柔和和平静的时候,突然注入强对比的色彩,能够瞬间抓住用户的注意力。

而Thinx 这个网站在设计的时候就将对比度控制得很好。网页主体的配色采用的是经典的黑白搭配,白色的背景搭配黑色的文本。而整体的设计感的来源则主要源于排版和彩色的图片。网站所采用的图片明显经过精心的选择和设计,红色的底色、黑色的内衣和模特外露的细腻肌肤色在图片激烈的碰撞,漂亮而充满诱惑,图片大胆的色调搭配和素色的背景与文字形成了鲜明而强烈的对比,无论是经典的红黑搭配,还是永恒的黑白配色,都足够漂亮和吸引人。

Thinx 这个案例我非常喜欢,并且经常会用到,因为它证明了设计师并不一定非得靠高饱和度的霓虹色来创造高对比度的配色。即使是两种平衡的颜色,也能让整个设计脱颖而出。

3、使用色彩创造UX模式

网页设计色彩进阶技巧

高度一致的配色方案能够创造出视觉模式,而延伸到用户体验上,,则会让整个UX呈现出模式化的特征。模式化的设计让用户更容易适应,用户更容易摸索出规律,也更容易产生相匹配的预期,换句话说,UX模式能够培养用户习惯,同用户产生深刻的关联。就像用户习惯了某些特定的图标之后,在其他地方看到这些图标就知道它们的含义,明白该如何交互了。比如,小房子图标会让用户想到首页、主页,而垃圾桶则会关联上删除的概念。色彩相对而言更加主观,因为每个网站和APP都会采用自己的配色方案,不同的色彩代表不同的含义。

那我们就拿Underbelly 这个产品展示页作为示例吧。在Underbelly 这个网站中,所有可点击的组件都是蓝色的,你在试用网站几秒钟之后,能够快速掌握这个UX模式,并且明白如何操作。这就是Underbelly 通过色彩构建UX模式的方法。UX模式的优势在于,它让用户更快地熟识你的产品。越容易识别,用户的想法越少,产品的的使用也就更加顺畅了。

4、使用色彩来创建层次

当我们浏览网页和各种界面的时候,信息的层次感很大程度是借助视觉来营造的。使用色彩来创造视觉层次感就很顺其自然了。

网页设计色彩进阶技巧

在Skore 的产品页面中,每一个部分都有使用到绿色的元素。重复的绿色元素不仅创建出可供用户快速识别的模式,它也让用户能够快速明白哪些因素更加重要。通常,我们解释视觉层次的时候,会用不同大小、粗细的字体来阐述信息层次和结构,但是不同强度的色彩,同样可以实现层次的划分。

在Skore 这个案例当中,绿色和灰色的文本以及白色的背景之间有着良好的对比度,整个配色方案不依赖其他的强调色,以绿色为主。这种相对稳定的配色结构有助于让每个部分都有层次地呈现出来。绿色不仅吸引用户关注关键的元素,而且为不同的部分的内部提供层次结构。

5、充分利用色彩的相似性

网页设计色彩进阶技巧

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:20个政府网站设计案例欣赏

下一篇:网页设计中搜索框设计要素

  • 18887 文章总数
  • 2263884访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信