首页 > 网页教程 > 设计分享 > 网页设计中关于透明效果的小技巧分享

网页设计中关于透明效果的小技巧分享

时间:2013-09-03    来源:优设网

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

Using Transparency in Web Design: Dos and Don’ts

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

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

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

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

不要遮盖图片的关键部分

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

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

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

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

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

小范围的使用透明效果

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

相关推荐
CSS酷站网页水平条经典设计欣赏
欧美CSS酷站网页背景设计之光影特效赏析
酷站欣赏之欧美棕色调网站设计案例赏析
如何基于心理学设计的目的来制作受用户欢迎的网页
二十款网页图文混排设计样式欣赏
黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏
35套精美绚丽的创意酷站设计欣赏
网页设计的文字色彩与可读性分析
如何掌握网页广告字体设计的技巧
40款超个性粗糙纸张纹理风格的CSS酷站欣赏
15款富有创意的的html电子名片设计欣赏
国外49款创意型404错误网页欣赏(附演示网址)
手绘风格的15款超级漂亮网站欣赏
网易频道页面的改版过程分享
网页设计师必备的13款国外CSS酷站参考画廊
多款韩国绚丽风格的游戏网站界面设计欣赏
网页设计中的构图技巧分享
网页设计的几何圆之美
网页交互设计的一些理解
网页设计中上一页和下一页的用户体验分析
黄金分割布局在网页设计中的应用
简单而又不单调的网页视觉设计技巧
让用户感觉很糟糕的网页设计之十大原因
淘宝网新年改版之网页宽度最佳尺寸浅析
圆形元素在网页设计中如何应用的25个案例
如何学习才能成长为一名更好的设计师?
淘宝案例分析之商城页面的用户体验
85个优秀的超大字体网页设计欣赏
用实例理解网页设计的80/20规则
寻找应用服务或程序类网站的设计规律
10个国外网页设计领域最具影响力的人物
30个出色的网页设计色彩搭配案例欣赏
10个优秀的网页设计教程与素材博客
网站专题设计的一些细节经验分享
21个值得收藏的转换PSD为HTML的教程
25个精美绝伦的Photoshop网页设计及详细教程

精彩推荐

热门教程