浅谈网页设计的细节创造价值(二)
2011-09-03 文章来源: 和君设计
像素级完善
真正的细节应用在像素级。我们再来看Concentrate的快捷按钮周围,靠近网页布局顶端的部分。首先,按钮背后的阴影将页面上的这部分突出出来。该区域顶端和底部的两个简单的单像素线是一个简洁的设计方式,它使得这个区域在视觉效果上更明显的区别于页面上的其他元素。

其中的一个单像素线条更引人注意,这是因为它使用了亮橙色。它为两者之间的阴影和背景提供了对比,但是真正起作用的却是第二个暗橙色的线条。两个线条相互配合起来封锁了这个顶部区域。

差异
当这个页面不再包括这些线条的设计的时候,差异就能最好的表现出来。下面,我将移去这些线条来向大家展示两个像素能够带来怎样的不同。

微妙的阴影
阴影效果对于网页设计者来说已经不陌生了。许多网站很早就开始使用它们并且经常模拟平面深度及二维介质。阴影和高亮可以微妙但强有力地改善我们网站的用户体验。
我们在设计中采用CSS3,它可以带来的宏伟的差异让我们很容易为之兴奋不已。而对于我来说,真正值得兴奋是有多少细节工作可以从图片处理软件转移到我们网站的代码上去。
还是来看这个Concentrate网站,它是一个很不错的例子,使用巧妙而有效地使用文字阴影效果使网站内容更容易阅读。这里以两种方式使用了CSS3 的text-shadow属性。首先红色的标题在与背景颜色相近的情况下,被赋予淡淡的阴影以产生内嵌式的效果。基次在段落后面简单地给白色一点发射效果。

差异
比较上面的截图以及同样的页面在IE8(不支持text-shadow属性)下渲染的效果,我们就能发现它更难看得很多。

值得指出的是这个网站卖的是Mac软件,所以自然地不那么重视IE用户的体验了。




