《不得不看:七招帮你提高网页设计水平--图文并茂》由会员分享,可在线阅读,更多相关《不得不看:七招帮你提高网页设计水平--图文并茂(4页珍藏版)》请在金锄头文库上搜索。
1、不得不看:七招帮你提高网页设计水平不得不看:七招帮你提高网页设计水平 图文并茂图文并茂导读:网页设计对网站建设起着至关重要的作用,涉及到界面的美观,用户体验等等。本文作者为一名资深的网页设计师,作者论述了改进网页设计的 7 个要点,并配以成功的案例,图文并茂,分享给更多的朋友,希望对大家能有所帮助和启发。1. 懂得 HTML 和 CSS 编程这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止你做出不合理的设计,比如那些无法用网页实现的设计。要保持与时俱进,弄清楚现什么效果可以用现在的 CSS 技术实现,什么效果不可以。使用 CSS3 最新技术设计的经典
2、案例在网页文本中使用了文本阴影,这样就不需要使用图片了。它还使用了-webkit- transform 和-webkit-transition 来向这三个图标加入了一些动画,不过这些效果只有在支持 webkit 的浏览器中才能看到,比如 Chorme和 Safari。Elliot Jay Stocks(http:/)使用了一种叫做font-face 的 CSS3 方法来让浏览器下载特定的字体,这就免去了使用图片的麻烦。2. 注重细节好的设计和伟大设计之间的距离在于是否做好细节。优秀设计细节的例子很好的混合了着色(Shading)、渐变和阴影,为网页增加了额外的细节。巧妙的使用了渐变和阴影,为其
3、用户界面添加了很好的细节。3. 善于使用留白世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字,页面设计者这么做的目的仅仅是想要在页面狭小的控件里放下更多的信息,但这只能给别人带来一种痛苦的体验。合理的使用留白可以给页面中的元素以呼吸的空间,减少阅读者眼镜的压力,从而让用户有一种愉快的浏览体验。合理使用留白的例子在他们的文章页面中很好的使用了留白,你可以看出文字都离其它元素有一定的距离,从而提高了可读性。Usability Post 使用留白的方法和 Soccernet 差不多。4. 图片很重要如果你有一个天才的设计,但却没有高质量的图片,那将是非常悲哀的。图片应当
4、辅助你的设计来推销产品或传达一定的信息,或者仅仅来吸引眼球。精彩图片的例子Palm 在其 Palm Pre 产品页面上使用了一幅精美的图片来作为抬头。通过一种清新而动人的方式展示了其产品。Tom Pojeta 在其页面上使用了绘画图片,为其站点带来了生气。5. 充分发挥色彩的威力色彩在网页设计中的重要性经常被忽视。在网页设计中应当对色彩的使用给予更多的注意,因为它可以按照你的意愿来对用户进行一定的引导。例如,页面中的链接应当与页面正文文字的颜色有所区别,以便用户能够认出它们是链接。如果链接的颜色和正文的颜色差不多,那么用户如何能注意到它们并点击它们呢?充分发挥色彩威力的例子Sam Brown
5、在暗色背景上使用了许多种的颜色,当鼠标移动到链接上时其背景会变成彩色,以便链接能清晰的显示。MIX Online 采用了彩色的导航条,当点击一个彩色导航条以后,页面的背景色便会变成相应的颜色。6. 不要忘了页脚页脚设计经常被忽视,因为设计人员没有认识到它们的重要性。它们有时比你想象的要有用的多,因为它们可以包含页面任何地方都无法承载的额外信息。它们也可以作为引导用户到站点其它部分的向导。页脚设计的例子Jason Santa Maria 在其超大的页脚中放置了许多额外信息。Web Designer Wall 在页脚放置了最新的发帖和最新的评论,在用户滚动到页面底部时,这些内容也会吸引住读者。这是一种在博客网站上使用的典型设计。7. 清晰的导航导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。清晰的导航的例子Disambiguity 使用了标签页的方式来给用户以清晰的指示。Dabs 同样使用了标签页,但同时还在页面左侧使用了侧边栏,将网站内容的子分类予以显示,而且对不同的大类还用不同的颜色加以区分。以上七招就是帮你提高网页设计水平的小小经验分享,希望能帮助到更多的朋友!