在网页设计中运用柔和色调

小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

小编语:我们发现很多让人感觉很舒服的设计,用色大部分大都很柔和。这些温暖人心的设计总是有共性的,在网页设计中也有使用柔和色调的方式~

网页中柔和色调的使用,不止是近来的趋势,这是一项设计师使用多年的技巧,用来创造有冲击力的视觉效果。

当你听到“柔和”一词,想到的可能是淡粉色、淡蓝色、淡黄色,不过这种配色远不止这些颜色。柔和并不一定要感觉像新生儿一样。通过某些适当的方式,配合其他元素,这些色调也可以相当鲜明。

下面我们从优秀的案例网站出发,了解10种在网页设计中运用柔和色调的方法。

柔和的照片

在网页设计中运用柔和色调

照片上的柔和遮罩层,或是在恰当的光照环境中拍摄的照片,可以成为精妙绝伦的网站背景。照片的色调越淡雅,设计师就有越多的区域可以放置其他元素。

使用柔和的照片同样有助于与其他元素产生反差,比如logo或按钮。请注意Solasie的logo与柔和色调的照片搭配得多么完美。这种思想也能突出幽灵按钮。

柔和的背景色

在网页设计中运用柔和色调

柔和的背景色是个好主意,使用多种颜色却不会咄咄逼人。由于柔和色调更加淡雅,画布上可以使用更大面积的颜色,却不会感觉太强烈。

处理柔和背景色的一个常见的趋势,就是像Dear Mum这样,使用单色调的配色方案,对一种颜色进行深浅变化。单色调能够与白色的文字元素产生美妙的视觉对比。搭配合适的字体,这种技巧也能打造时髦的现代感。

鲜明的柔和色

在网页设计中运用柔和色调

尽管你通常不会把“鲜明”和“柔和”相提并论,这类配色可以帮你创造出大胆的设计。因为柔和色容易退居幕后,所以如果你要在它附近有所动作,这是非常棒的选择。

Marie Catrib’s在这方面做得很好。这里的柔和色相当鲜明,但似乎没有喧宾夺主,你能看到这个从色块层探出头偷瞄的女人。鲜明的柔和色帮助你发现并聚焦在图片上,完全柔和的背景冲击力就会稍显逊色。

柔和色调营造氛围

在网页设计中运用柔和色调

你希望网站的访客产生怎样的感觉?柔和色很擅长营造平静、放松、缓和的感觉。如果这些情绪可以描述你的网站或公司,它或许就是正确的选择。

Sweez做得很棒,通过颜色创造了这样的情感链接。图中的一切都带着淡雅柔和的色调。它让你想到坐在安静平和的地方,享受一杯温暖美妙的卡布奇诺。看见没,这种简单的色彩多么有效。

柔和色的插画

在网页设计中运用柔和色调

柔和色也是插画的绝佳选择。运用这种色彩理念创造出令用户驻足观赏的作品。

柔和色调的插画,将带有某种平静的绘画作品与色彩结合起来。它让绘画的运用出人意料。

与柔和色产生对比

在网页设计中运用柔和色调

柔和色并不一定要凭空创造。它是一种很好地与其他设计元素产生对比的手段。

Kinder Fotografie在这方面做得非常好,运用了柔和色和明亮的照片、文字。设计中的柔和色部分包含了大量小细节,但你首先看到的儿童照片和文字“smiles”。然后用户才开始注意这些精致的细节。

柔和色的导航

在网页设计中运用柔和色调

柔和色调也是创造优秀导航的手段。通常情况,设计师会给网站设计黑白色的导航条,但彩色在这里也有用武之地。

柔和色可以作为导航的手段,是因为它们避让了其他部分的设计。比如,Wonderfully Wild中,用户最先看见照片并做出反应。导航元素与主要内容融合地很好,但由于颜色的选用,它并没有妨碍主要视觉内容。

扁平化设计中的柔和色调

在网页设计中运用柔和色调

我们今天看到的柔和色调大多都没有采用扁平化设计。设计师们喜欢的各种亮色,都变成了扁平设计兴起之初那些超级亮色的淡雅版。

在扁平化设计项目中使用柔和色调,好处是颜色仍然保有相同的感觉和整体外观,这种方式却不会为了吸引注意而过于压迫用户。在网站中运用柔和色与扁平风格色彩,更容易通过颜色引导用户到屏幕的特定区域,或是强调重要的文字元素。

柔和色文字

在网页设计中运用柔和色调

设计师们不止是在图片和背景上使用柔和色调。这种配色风格也可以运用在文字上。(虽然这会很微妙)

柔和色最好以粗大字体的方式使用,与更加朴实的背景相衬来创造鲜明对比。使用带有粗描边的大字体,可以确保屏幕上有更多柔和色。这个概念通常用于少量的字母或文字组合,不适用于正文。

柔和色调的界面元素

在网页设计中运用柔和色调

将柔和色用作界面元素的一部分,是个有趣的概念。这是扁平设计理念孕育出的又一个“花样”,按钮和其他元素可以使用柔和色。

Duy Tran的网站中,每块柔和色区域实际上是个超大的按钮。这些柔和色告诉用户哪块是哪块,让每个都易于点击(或触摸)。这些色调很突出,因为与极简的主图区域形成鲜明对比。(轮播图中的每一张与这些柔和色调的按钮区别开)

结论

使用柔和色的关键,在于让它看起来清新,而不是褪色。将柔和色调与你期望的深色、更鲜明的图片或白色元素对比搭配,有助于创造带有冲击力的柔和配色。

柔和色调天生就带有令人放松和冷静的理念。网页设计时使用这种配色方案对你有利。要牢记颜色与整体设计的其余部分如何相互影响。

来源:可乐橙    木卫艾欧网为大家提供更多交互设计资讯

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/2316/

(0)
TinadminTinadmin
上一篇 2015-01-07
下一篇 2015-01-08

相关推荐

  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • 弹出式抽屉特效

                    利用动态面板轻松实现。 分分钟搞定那些写函数的都是纸老虎! 请下载源文件弹出抽屉特效-艾欧交互 视屏文件

    2014-09-08
  • Axure 原型界的撕逼大战

    最近在交互原型界也有撕逼大战啊,所以任何以收费为目的的网站都是纸老虎。 为了整体交互设计行业发展来看,只有开源分享才是真的有利于交互设计师们。你们说尼? 原文标题:《金乌:你能消停点儿吗?》-小楼一夜听…

    交互设计 2014-12-29
  • 交互设计中的人为本与用户需求究竟谈的是什么?

    以人为本和建立用户需求,是开展交互设计的首要任务。以人为本指的是:理解用户,理解人的感知和认知的本质,分析用户的思维模型。如何理解以人为本以人为本的两种理解:人本工具论之说和人本实质伦之说。人本工具论:这是从统治者角度出发的,出于实现自身利益的需要,把以人为本作为实现其利益的一种手段。这是伪以人为本、虚假的以人为本。人本实质伦:这是从人的立场出发,以人的自身角度研究问题的“人本观”作为出发点。在满足人的需求时,还应考虑对交互系统可持续发...

    微信热点 2018-02-26
  • 这些走心的用户体验应该多学学

    不仅仅局限于互联网的设计,可能还有服务,线下的设计等。先问一下自己,到底什么是好的用户体验?我认为有以下三点:第一,无需思考,符合本能的设计。(反例,各种需要用户大量动脑的设计)第二,不打扰用户,让用户沉浸的设计。(反例,各种不必要的弹窗提示)第三,温暖的设计,细节打动人心,超出用户的心理预期。(反例,各种冰冷的缺省页面)1.网易云音乐分享提示最近发现了网易云音乐的一个小彩蛋,那就是在播放页当你点了某一首音乐喜欢后,会给你跳出来一个可爱...

    2018-02-01
  • sketch 插件 sketch-measure 更新,又大大的提高了工作效率 ~

    今天更新了一下sketch measure的插件,下面说一下都更新了哪些地方 1.新的UI界面 友好的ui界面使你标记起来更加便捷,新界面是不是看起来更加专业了许多,视觉上更加直观 2.输出出口 自动生成HTML的样式,而不仅仅…

    Sketch 2016-07-25
  • 译文|交互设计初学者的完全指南

    交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。

    2017-05-27
  • 设计思考:中西医结合,开出交互良方

    我们大都倾向于对观点进行主观表述,而不是对事实进行客观陈述,为了减少主客观的分歧,设计师应该利用好研究分析对交互工作的“润滑”作用。

    2017-04-30
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27
  • 网站交互设计模式为什么值得读

            对于现在的web的发展来说,这本书优点旧了,里面的相关案例网站都是一些比较早的数据。但是这本书还是很值得一读。就像作者所说的,时间在流逝,模式会变化,适当改变信息密度,网站的…

    2017-08-03