网页设计中透明效果的使用技巧

UPTATED:2013-11-20 | 分类:网络知识

中山网络公司,中山网络制作爱途科技公司2013-11-20日报

   运用好透明效果是提高网页设计水准的重要方法之一。如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,以下分享一下关于“透明”的实用小技巧:


在网页设计中使用透明效果是件既美观又冒险的事儿。透明效果的使用是把色块,文本或图像“变薄”或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿透显示出来。这种方法如果用好了,效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点。但设计者在运用透明效果时要特别小心,因为这么做可能会影响页面的可读性。要是框和文本的透明度不对,更可能会影响到整体的设计。


下文是一些注意事项以及巧妙运用透明效果。


1.用“透明效果”来制造对比


使用透明效果最大的优点是可以形成对比。设计者可以在图像上打造出一个色块或文本的焦点,增添屏幕的色彩维度。透明效果还能使文本从不抢眼的背景上跳脱出来。在运用透明效果时尤其要考虑对比度。只有图像和文本都具备可视性时,透明效果才算成功。所以采用透明效果时,也要想想这会使文本/图像更容易理解吗?


2.不要遮盖图片的关键部分


透明效果不能遮盖传递信息的背景或图片。当决定采用透明效果为框架时,要想想会不会缺少什么。


3.要层次分明地运用透明效果


透明效果的设置并没有完美的参数。有些情况下,80%比较理想,而有些的话15%最好。这个要具体情况具体分析。


4.不要以为透明效果会增强文本可读性


不要以为你用了透明框,文本就自然能读了。要对比,不管是透明框之于文本还是背景图片之于透明框架,一定要充分考虑到文字的可读性。无论是处理透明图片,色块还是文本都要记住,如果视觉效果使字体很难辨认,那你想要表达的信息将会无法传达。


5.小范围的使用透明效果


不需大范围的使用透明效果。小范围的使用也能够获得很好的成效,比如可以用透明效果来做网页导航或者按钮的悬停效果等。别想着如何繁复地使用各种透明效果。选择一种元素和透明样式,并在网页设计中贯穿始终。


6.不要在图像上使用透明效果,形成强烈冲突


考虑到文本的可读性,最好避免在已经具有强烈视觉冲突的图片上使用透明效果——脑补一下黑、白以及色轮上的各种互补色。如果使用后的融合感对设计有减分作用,就尽量不要采用透明效果了。因为这样很难使每个部分在背景中都能获得理想的效果。这时可以思考如何把颜色搭配的更好。


7.把透明效果艺术化


透明效果不是次发效应。要运用透明效果设计出有主导性的图像。大面积的透明效果是制造对比,强调和视觉兴奋的有力设计。


8.别把透明效果当做装饰


不能因为觉得设计乏味就在后期随便添加一个透明效果。如果只是把透明效果当做装饰来运用的话会显得鸡肋,应该提前计划好如何应用。透明效果可不像字体加粗那样简单。如果用不好,就会显得草率,不专业。


9.在背景中运用透明效果


透明效果不仅可以用在显眼的设计元素中,也可以用在背景图片上。一些很棒的透明效果都是很细微的,另一些透明设计则体现在图层当中。


10.不要同时使用太多透明效果


最好限制使用透明效果的数量。因为透明效果能制造对比,强调和视觉兴奋感。如果用得太多,会分散用户的视觉注意力。


11.把透明效果运用到静止和(或)动态图片中


透明效果并不局限于单页或静态设计当中,也可用到多种图片和背景中,抑或两者皆可。在动态图中运用透明很讨巧,也能让人印象更深刻。仔细筛选多个图片背景,尽量选择颜色相近,内容又有冲突的,这样就能在变换图片背景时使用同一种透明度了。仔细观察透明效果如何作用于每张图片,从而保证图片透明度的完整一致性,使图片,背景,文本变得可读,形成视觉统一。


结语


学会运用透明效果是增长设计经验的捷径。像运用其他效果一样,充分运用这项技术,并在不同的情境下检验,使其达到预期的效果,作为一名专业的网站设计师更应该对自己的设计去多做尝试。

本文来源中山网站建设https://www.zsitw.com/,引用或者转载请注明。多谢~
  • 2021-05-09 中山公司网站建设需要注意哪些问题?

    网站建设对于互联网公司来说,可谓是重中之重了!针对每一公司来说,网站建设不但有益于公司的管理,更有利于促进公司的品牌推广,达到宣传目的。 网站建设有哪些具体步骤? 1.先做好网站定位 先将公司做好一个准确的定位,想好需要做的是什么类型的公司网站,对网站的主要内容和主题有明显的确定。最好做个公司业务市场的调...

  • 2017-12-29 评估一家电商网站,用户体验的10个检查点

    本文可被看作是评估一家电商网站体验的10个检查点,这10点不仅侧重于可用性,更强调成功和失败的电商网站在哪些方面有区别,这意味着这些区别能直接影响转化、激活以及用户的参与度。     1.网站的易发现性     我们的顾客是通过互联网发现我们的吗?他们是在网上发现我们的...

  • 2017-04-01 响应式网站如何设计

    响应式网站使得不同设备、分辨率的网站都有最好的视觉体验。为了获得更好的效果,那么响应式网站如何设计才能表现出更好的效果呢?     一、网站设计     首先,生活常用亮色可以被柔和色反衬出来,这是非常明显是事情,在网页设计中也一样,你可以利于这一点去吸引观众眼...

  • 2016-10-06 网站排版美化

     seo是什么,seo就是优化网站美化网站。注重用户体验而来,一个网站质量好,美观。自然用户体验也就好,转化率也就高!首先我们需要把自己的站内优化好。站内优化也就是网站美化、排版,其次就是站内代码优化和内容优化了!   在日常上网中,我们上网打开一个排版乱七八糟的网站相信你也会马上关闭不想多看!这个就说明了...

  • 2016-09-02 官网搭建必须注意的三点

       网络营销的崛起带动了一大批人投入进来,都纷纷为自己的企业打造站点,想通过自己的网赚钱,然而对于新朋友而言,做好官网搭建往往是需要注意很多问题的,要是问我做网站的前期选择重不重要,这个我可以很肯定的回答:重要,非常的重要。我们应该走好站长的第一步,有了好的第一步,然后才会有第二步,第三步...