site topic网站专题
首页
>
网站专题
>
专题详情
分享新闻到:

七招帮你提高网页设计水平

互诺科技:2009-10-22 15:39     阅读数:       标签:

导读:本文的作者为一名资深的网页设计师,作者论述了改进网页设计的7个要点,并配以成功的案例,图文并茂。

1. 学好HTML和CSS编程

这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止你做出不合理的设计,比如那些无法用网页实现的设计。要保持与时俱进,弄清楚现什么效果可以用现在的CSS技术实现,什么效果不可以。

使用CSS3最新技术设计的经典案例

Atebits(http://www.atebits.com/)在网页文本中使用了文本阴影,这样就不需要使用图片了。它还使用了-webkit-transform和-webkit-transition来向这三个图标加入了一些动画,不过这些效果只有在支持webkit的浏览器中才能看到,比如Chorme和Safari。

Elliot Jay Stocks(http://elliotjaystocks.com/)使用了一种叫做@font-face的CSS3方法来让浏览器下载特定的字体,这就免去了使用图片的麻烦。

2. 注重细节

好的设计和伟大设计之间的距离在于是否做好细节。

优秀设计细节的例子

Metalab(http://metalabdesign.com/)很好的混合了着色(Shading)、渐变和阴影,为网页增加了额外的细节。

We Follow(http://wefollow.com/)巧妙的使用了渐变和阴影,为其用户界面添加了很好的细节。

3. 善于使用留白

世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字,页面设计者这么做的目的仅仅是想要在页面狭小的控件里放下更多的信息,但这只能给别人带来一种痛苦的体验。合理的使用留白可以给页面中的元素以呼吸的空间,减少阅读者眼镜的压力,从而让用户有一种愉快的浏览体验。

合理使用留白的例子

Soccernet(http://soccernet.espn.go.com/news/story?id=657760sec=transferscc=5739)在他们的文章页面中很好的使用了留白,你可以看出文字都离其它元素有一定的距离,从而提高了可读性。

Usability Post(http://www.usabilitypost.com/)使用留白的方法和Soccernet差不多。