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

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

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

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

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

下面我们从优秀的案例网站出发,了解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

相关推荐

  • 移动应用(APP)UI设计规范之尺寸上篇

    作者:玄岳  http://www.zcool.com.cn/article/ZMzc5MTQ0.html

    2015-12-21
  • 交互设计的两个核心问题:用户体验和以用户目标为导向

    设计师和用户如同在跳交际舞,既要顺应着对方的步伐,也要进行一定的引导。对方是一个人,不只是你感受的到他的温度,他也闻得到你身上的味道,对你时时刻刻进行着评价。

    2017-05-21
  • 在人们习以为常并且不再奢望能有所改进的地方,敏锐而又勤于思考的产品经理们还能做些什么?

    锤子新品发布会上,一句“在人们习以为常并且不再奢望能有所改进的地方,敏锐而又勤于思考的产品经理们还能做些什么?”的话,带来了一个疑问,就是怎么在艰难的情况下进行颠覆性创新! 新增: 1.内置网络免费电话功…

    交互设计 2015-08-26
  • 『交互扫盲』云里雾里,傻傻分不清楚的UI/UE/ID/UED/UCD!

    对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概念代表着什么含义,今天给大家做一个简单地介绍。 对于刚刚接触用户体验交互设计的同学来说,很多云里雾里的英文缩写,分不清各个概…

    2015-01-27
  • 交互设计和我-一个大四学生的探索交互设计之路

    我不敢说交互设计是什么,因为我没有真正的项目经验,我现在所理解所定义的一切,都是根据交互前辈们的经验以及相关的经典书籍和部分项目讲解。所以用一句不好听的话来说,就是纸上谈兵,对于这个十分刺激我的事实…

    2015-07-27
  • 做你老婆,用户体验真差

    洞见(DJ00123987)——不一样的新闻,不一样的故事,数百万人订阅的微信大号。点击标题下蓝字“洞见”免费关注,我们将为您提供有价值、有意思的延伸阅读。作者:青蓝来源:青蓝(ID: qinglansz)没错,这是一篇真诚的吐槽贴。鉴于各位直男的脑回路和女人差异较大,常常不能正确理解老婆大人的本意,今天我特意以你们最爱的电子产品——手机为例,给你们分析一下老婆们的用户体验。01. 外观差评,后盖鼓起,前屏磨花,说好的金属漆还掉了色。小...

    2018-03-25
  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15
  • Axure从入门到精通-第0课,课程介绍

    紫豆子开始新的教程编写,讲解Axure的使用。还是希望5次课程可以把这个软件讲通。这是一款很容易上手的产品,可能有的人已经会了。我们先看看下面由Axure做的网页是不是有点跟我们见过的Axure不太一样了为什么学这个软件?入门简单,它就像一个大的画布,你可以简单的通过拖拽组建在页面中添加你要放置的内容;不像PS那么难学。可以做一些简单的动画效果;可以让一个组建旋转、移动、缩放、消失、出现等等;可以做一些简单的交互效果;例如点击一个画布中...

    2018-04-29
  • 演示|一个交互设计师从接收需求到产出的过程

    从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
    商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
    注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
    年龄:18-40占绝大多数
    性别:女性占98%
    职业:微商
    设备:iphone及以上
    场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
    ”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
    2、赠品类型商品同普通商品一样可正常下单购买;
    3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
    4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
    若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
    5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
    点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
    点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
    6、个人中心,增加显示当前代理的配赠率信息。
    7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
    8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

    2017-05-07
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25