网页布局设计的简单原则.docVIP

本文整理了一些网页布局设计的简单原则，希望对网页设计者有一些用处。 ?重复：在整个站点中重复实现某些页面设计风格。 重复的成分可能是某种字体、标题logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。颜色作为重复成分也很有用：为所有标题设置某种颜色，或者在标题背后使用精细的背景。 ?用对比来吸引读者的注意力。 通过对比来抓住读者的注意力，例如，你可以让标题在黑色背景上反白，并且用大的粗体字（比如黑体），这与下面的普通字体（比如宋体）行成对比。另一个方法是在某段文本的背后使用一种被景色。 ?在文本周围留出空白以便更容易阅读，布局更优美。 留白是一种美德。满屏幕密密麻麻的字会让人头晕眼花，适当地留出边距及行距，让阅读变得轻松些。 ?保持简单。 避免只是为了试验一种技术或新技巧而采用它们，把会使人分心的东西减到最少。 不要期望人们会下载插件，很多人会因此转到别的地方去。 应该将注意力集中在提供信息方面，而不是使页面看起来令人惊叹而信息却被淹没在动画闪烁、闪烁的文本和其他花招的迷雾里。 ?只要可能，就要避免滚动。 用户在浏览新页面时，常常大致扫一眼页面的内容区域，而不理会导航菜单条（这就是说，那种大尺度的flash头部除了好看，是没有用的！）。如果页面看起来和用户的需要无关，那么两三秒后用户总会点击“后退”按钮。 ?不要使用闪烁的文本。 除了在一些及其少见的情况下，闪烁的文本会使用户厌。 动画文本也是这样的，一定要非常有节制地使用。 ?尝试使用文本的布局协助导航。 如果我们的页面里包含几十个链接，那么，就要把这些连接分类，并且用不同的标题和颜色块来区分它们。 ?心里时刻想着站点的观众。 哪种人会访问这个站点？他们为什么要来访问，他们的主要知识背景是什么？页面的设计和布局需要反映这些群体的不同需求。 ?使用页面布局突出人们将要寻找的标题。 一旦你了解了客户群体的需要，就可以分析出他们最希望看到的标题，并且利用页面布局使这些标题突出出来。当然，作一个客户调查，是很好地掌握他们关心内容的方法。 1、别轻易让文字居中和使用粗体或斜体字符。 　　2、利用短的段落，加点列示，适当的整块引用文字，用水平线分节，用影像地图指引主要链接，使你的页面能吸引人和容易阅读。 　　3、不要在每一页使用风格不同的图标。 　　4、不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点——它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。 　　5、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣，甚至很专业，但是装饰背景很容易使文字变得不可辨读。要把背景做得好，光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含有图像，对比度要较低才不至于过于分散读者的注意力。 　　6、在 IMG 行加 ALT 标记。 　　7、也可以在分隔条上使用ALT标记，这样就使得使用基于文本的浏览器的读者能看到一些更有趣的东西，而不只是一条直线。 　　8、不要把重要的内容放到页尾——有些读者可能不会往下看那么远。 　　9、不要让什么东西看起来象是一个按钮却不起按钮的作用。 网站布局剖析实例：网页黄金分割 数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候，我确信如此。数学如此刻板乏味。你可能会惊讶的发现，最美观的设计，艺术作品，物体，甚至人都有数学上的共同点。尤其是黄金分割，也被称为神之比例，希腊字母表示其为 Φ (phi). 本教程会剖析一个网站的布局，以及如何对其黄金分割。 ?作者: Jarel Remick 是ThemeForest的一名作者，在Moscow, Idaho. 网页骨架 这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。 Container 所有的Web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。 container的类型: Liquid: 根据浏览器宽度填充。 Fixed: 指定的宽度，并不会根据浏览器宽度改变。 Header header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的 liquid 或 fi