不得不看：七招帮你提高网页设计水平－－图文并茂.docx

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