总算理解网页排版设计技巧

网页排版设计技巧  

以下就是网页排版设计技巧等等的介绍，希望为您带来帮助。  

 

1. 用户友好的标题  

标题是排版的关键，无论是网页和印刷。如前所述，它们是文本层次结构的一部分，也是易浏览的主要因素。  

首先，标题大小与正文文本的大小一样重要。如果标题太大或者含有大量内容，会使用户在阅读时找不到重点，最终将破坏内容的流畅性并分散读者的注意力;太小的标题也会破坏文章的层次结构，如果标题太小，它没办法如预期的那样引起用户的注意。  

接下来，在标题和正文文本之间提供足够的空间非常重要。  

2. 可浏览文本  

我已经多次提到“可浏览的”文本，并且你肯定在别处也听到过。可浏览文本与可读文本并行不悖。让文章可浏览包括良好地使用标题、层次结构和焦点来指导用户浏览内容。  

那么，是什么让文章可浏览呢?有很多因素，其中大部分已经提到过。标题大小和位置、正文文本大小、文本行高度、文本对比度和焦点区分方式都会影响文本的可浏览性。  

焦点是布局中吸引或应该吸引用户的注意力的特定元素或对象。它可能是一个标题，也可能是一个图形、一个按钮等。  

3. 空白  

在内容繁杂的布局中，空白有助于提高内容的可读性。白色空间有助于抵消大量不必要文字，并使用户的视线扫到文本上。它还可以将布局中的元素分离，比如图形和文本。  

4. 一致性  

一致性通常被认为是可用性的重要技术，但它也适用于可读性。层次结构的一致性对于用户友好的布局非常重要。这意味着层次结构中具有相同重要性的所有标题应该具有相同的大小、颜色和字体。例如，文章中的所有  

标题应该看起来完全相同。为什么?这种一致性在用户浏览时为用户提供了熟悉的焦点，并有助于组织内容。  

5. 文本的密度  

文本的密度是指你在一个区域中放置的文字量。内容密度对内容的可读性有重大影响。密度受间距选项的影响，如行高、字母间距和文字大小。如果你在所有这些内容之间找到平衡，既不太紧凑也不太宽，你将拥有完美的可读性和可浏览的密度。  

6. 强调重要元素  

另一个关键因素是强调主体内容中的某些元素，包括突出显示链接、加粗重要文字和显示引号。如前所述，在Web排版中强调重点是必不可少的。通过强调这些对象，你可以为用户提供关注点，这些点和对象有助于打破纯文字的单调。  

通过强调这些重点，你可以使正文文本非常易浏览。加粗的文本关键词句吸引用户的注意力，是呈现重要信息的有效手段。  

7. 信息的组织  

在文章中组织信息的方式可以增强可读性。用户可以轻松地浏览经过适当组织的内容，因为信息更加容易找到。这超出了本文的范围，但仍然非常重要。  

8. 清晰的图形  

每个文本主体都需要某种形式的视觉支持，无论是图像，图标，图表还是插图。将图形放置在文章中可能具有挑战性，图形和文字之间需要有足够的空间。  

如果图形元素是一个图像，那么干净的边框对于其与文本的分离是十分有用。边框可以引导用户的视线和为内容增添风格。但是，保持内容边界简洁很重要。它们应该有一个微妙的调色板，而且不应太大。  

如果图形元素是图标或者插图等，那么空白是*可以使用的分隔符。内容应该齐整地围绕图形移动而不打断文本。  

9. 分隔符的使用  

分隔符是一种以整洁有序的方法将文本分割为多个部分的方式。它们可以用来划分层次结构，例如标题和正文文本，也可以用来将内容分成多个部分。  

最简单的分隔符形式是单线，通常用于划分层次结构，对于增强文本可读性非常有用。  

分隔内容的另一种常见方式是使用框，文本框非常适合分离单个页面上的无关内容。它们通过复杂的布局引导用户的视线。  

10. 合适的白边  

你听别人说应该使用白色空间，但是为什么呢?白色空间实际上有助于吸引用户的注意力，空白区域(白色空间)强制视线集中在文字上。因此，空白将影响内容的流畅性和可读性。边距是*的空白元素之一，并且支持文本元素。任何一个方向的白边都会迫使用户的注意力集中在文章的核心内容上。  

白边也以另一种方式存在于这篇文章。它们将内容与其余部分分开。文本不应该流入其他布局元素，特别是在长文章中。白边有助于定义文章及其边界。  

手机网站界面设计如何布局  

一、屏幕大小正确理解  

说起屏幕大小的时候，会有两种表达方式，1) 我的屏幕2.4吋，你的屏幕3.5吋。 2)这个屏幕分辨率 240*320，那个屏幕分辨率为320*480。但在设计过程中，屏幕的分辨率和屏幕的实际尺寸必须同时考虑。  

这里首先有几个概念需要再澄清一下：  

屏幕物理尺寸：屏幕对角线长的实际尺寸，如2.4吋，3.5吋等等;  

屏幕分辨率：屏幕所能显示像素的多少。如，240*320等;  

屏幕密度(pixel per inch)：以每英寸的像素数。每英寸的分辨率数，如160ppi。  

物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。  

需要注意的是：在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个*的结果值。在设计的过程中，我们需要根据这个*值来进行界面的布局及手机版面设计。  

二、设计过程与屏幕适配思路  

1、确定目标的屏幕大小  

屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容;文字可以在适当的位置折行;标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作系统、手机类型等还是存在很大的相关性的。  

首先，我们先来定义一下手机的屏幕大小的归类档次：  

A. 小屏幕：宽度240 px 以下屏幕或者2.4 以下屏幕  

一般以非智能机为主，归在这个分类中的手机屏幕，一般是以java版本的客户端为主。  

B. 中等屏幕：宽度240~320 px，或者2.4~3.0吋屏幕  

智能手机以Symbian或S60 v1,2,3，Windows mobile为主流;或者是非智能手机的客户端以java版本为主。同时包括240*320的宽屏手机。  

C. 大屏幕：宽度320 px以上屏幕或者3.0吋以上的屏幕  

iPhone 手机只有两个版本的适配，屏幕物理尺寸保持一致;Android 系统手机及衍生平台手机;Win phone 7 系统手机;Nokia S60 v5，symbian 3等  

2、适配原则  

1) 客户端的logo，在各个手机上都应该清晰地显示  

2) 标题或者底部栏必须*的与手机宽度适配  

3) 文字内容如果显示不下的话，可以自动适配宽度进行折行  

4) 图片可以根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小  

5) 适配过程中，界面的元素的宽高最小值应该符合用户的主观舒适范围值  

6) 不能完全使用分辨率的绝对比例来对界面布局进行缩放  

3、 适配思路分析，根据我们前面的分析：  

C类大屏幕大小主要以Android、iPhone、win phone 7 和Nokia V5等手机为主，它们都是触屏手机，在适配上可以划为一个档次。  

B类中等屏幕大小智能机主要以Symbian 和Windows mobile为主，因此在适配这两个平台时，主要集中在B类屏幕间的适配。  

B类中等屏幕大小还有一块是非智能手机，使用Java客户端，同时，A类小屏幕大小主要使用Java客户端，因此，Java类客户端需要适配的范围更广，至少应包括B类和A类的屏幕大小。  

制作网页的诀窍  

1.预早筹划  

设计主页未必很艰难。但这一工作与编制传统的宣传品一样，都需要我们谨慎处理和筹划。换言之，我们必须首先确定自己需要传达的主要信息，然后细意斟酌、把所有意念合情合理地组织起来;之后是设计一个页面式样，试用于有代表性的用户，接着重复修订，务求尽善尽美。  

2.尽量精简  

主页的作用好比一本书的封面，是为了吸引用户测览你的网址内容。因此，主页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画面过于复杂。在主页上清楚列出三项要点，例如机构名称、提供的产品或服务、以及主页内容(亦即你的其他页面还载有什么资料)。应切记页面给人的*观感最为重要。在网上到处浏览的人很多。如果你的主页真没有吸引力，很难今他们深入观赏。  

3.尽量简朴  

现今大部分用户那是用调制解调器接驳万维网，所以他们一般都要花很多时间等待主页传送到自己的系统。切勿令他们加倍望穿秋水。主页上的图形应力求简朴，避免耽搁用户的时间。图像愈大、颜色愈深，传送页面的时间愈长。  

这并不是说你要完全略去图像不用，只是提醒你要注注意使用图像所引起的效果。  

 

主页上的颜色*不超过六十四种，页顶图像*保持在大约10KB(千字节)以下。切勿禁不住诱惑。觉得非要放入大幅的图画不可;应考虑只用三两幅短小精悍的图像。主页整体上要能够迅速传送。如果载入的时间超过十至十五秒，很多用户就会等得不耐烦。如果情况许可，*先测试一中你的主页在稍差的条件下的传送速率，14.4千波特的调制解调器，或透过 Prodigy等网上服务接驳万维网等。  

此外、还须注意配合*档的设备，例如标准的小型显示器，不要假设人人都用高解像度的大荧幕。运用先进测览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。  

4.善用图像  

用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上*有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。图像的内容应有一定的实际作用，切忌虚饰浮夸。*的图像足集美观与传讯于一身。  

注意图画可以弥补文字之不足，但并不能够完全取代文字。  

很多用户把浏览软件设定为略去图像，以求节省时间他们只看文字。因此，制作主页时，必须注意将图像所戴的重要信息或联接其他页面的指示用文字重复表达?次。  

用纯文本模式测试已制成的主页，确保其传达到所有信息。  

5.使主页易于漫游  

主页的其中一个主要功能是作为漫游工具，指引用户查阅你存储在网址或其他地点的信息。尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，主页上的联接项目应只限于几个高级的类别，例如公司、产品、服务、支援等。  

用六至八个联接项目最为理想。  

此外，你提供的信息不应埋藏在重重叠叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此，你必须在广度和深度之间求取平衡。如果你的网址上有太多信息，你可能要编制较长的页面或使用更多联接项目，甚至可能要建立多个主页、使每个主页载有不同的信息。如果能够让用户在主页上以关键字或词语查找所需的信息，肯定受用户欢迎。  

假若你有充足的资源，便应找一位专家来评估你设计的主页是否方便易用。设法找一些对主页陌生的用户，来试用你的初步制成品。  

6.提网协领  

主页一般须载有以下事项：  

★标题  

此标题须清楚无误地标示你的网站。标题可以是名称、标语徽号或图像。  

★电子邮件地址(例如你的 Webmaster)  

以便用户有问题时，可以通知你。  

★版权资料  

这是适用于主页内容的版权规定。  

你可以在主页上标示一句简短的版权声明，用联接方法带出另?个载有详细使用条款的页面。这样可以避免主页显得乱糟糟。  

★联络资料  

列出通讯地址、公关或营业*的电话号码等。  

7.循环利用现有信息  

制作主页(或其他主页)时，通常都毋须从头做起，因为有许多现成的文字、图画等资料可供我们重用，例如宣传小册、公关文件、技术手册、资料库等。很多情况下，只要用少许功夫、就可把这些材料转到网页上使用。  

8.保持新鲜感  

万维网上不断有新事物出现、每天都有新花样。如果你的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户再来测览。不妨在页头以大字标题宣布新消息。可以定期改变主页上的图像、或更改主页的式样。  

趣味性的事项可以持续或自动更新、例如列出会测览你的网站的人次。  

同样，为保持新鲜感，应时刻确保主页提供的是*信息。  

将更新主页信息的工作纳入既定的公关及资料编制计划内，亦即当你使用传统方法(例如新闻稿)传递的新信息、会问时出现在你的主页上。确保连接项目运作畅顺，以免用户在荧幕上收到?无法查阅所需档案?的信息而大感没趣。  

9.　贯彻诺言  

做不到的事情，千万不要轻易承诺。切勿随便叫用户作出回应行动，例如要求用户填交订贷表格，除非你已制订好处理这些订单的方法和交货程序。如果在网上列出联络电话、就要确保自己能够迅速解决来电者的问题。  

10.吸引用户测览  

既然绞尽脑汁把主页弄得美观实用，没有人来欣赏就太可惜了。为吸引所有网中人来浏览，必须使主页易于寻找。  

通知其他网站(例如题材相关的网站)，他们可能想联通你的主页。安排将自己的网址列在所有相关的网址目录、索引、查找程序和?What? s new?页面上。尽量将网址传播开去，使之出现在 Internet和所有传统煤体上、例如书刊广告、公关文件、宣传品等。  

在网站上，于每个页面设置home按键，方便用户随时返回主页。  

万维网充满生命力、正在不断演进，所以一些现时适用的经验，将来未必合用。举例来说，将来家居用户有高速线路接驳Internet，就可以消除数据传输目前的所受的限制、使主页的篇幅可以更长，页面更华丽。新的浏览功能、例如Sun的 HotJava测览软件所提供的先进功能、将使万维网更强劲和更方便沟通。 HotJava将主页由静态的文件转为动态的实体，提供诸如即时制作动画、背景音乐、即时存入资料(例如不断更新股票价格)、话音广播等功能、为网上用户带来更多乐趣。  

有好的主页，还须有精良的设备支持。网站服务器不断推陈出新，使建设网站的工作愈来愈容易。以 S u n的NetraInternet Server为例、全套设备包括上网所需的软硬件、以及建立完善的高效能网站所需购各种软硬件设施。  

这些发展为万维网及其用户开拓了壮阔的前景。建设网站的上作，从未如此容易过。  

网页设计的秘诀  

1.要记住你只有4秒的时间  

在整个internet中日均页面访问只有4秒。这就意味着你没有足够的时间来让浏览者加深对网站的印象和互动。所以你要尽可能精确的来说明你这个网站最主要的功能是什么。如果一个网站打开的时间超过了浏览者等待的时间，那么浏览者将会失去兴趣，最终的结果是浏览者去别的网站。(木木：这就意味着：我们在设计首页时尽可能的简化，并加速打开网站的速度。)  

2.引导浏览者的目光  

当你走进一个房间的时候，你不可能看到房间里所有的东西。你*眼注意的是房间里有没有人，然后再去注意能吸引你眼球的东西。当浏览者*次访问网站也是这样子的。当浏览者*次访问你的网站时，需要你来引导他们来访问网站。比如说一个登陆按扭，一个“more”按扭，新闻。..。..  

3.网站的左上侧是“黄金地段”  

众所周知，网站的左上侧是浏览者*注意的地方。这是因为人们阅读的习惯造成的(从左上角开始阅读)。再加上早期的网站也是按这个方式设计的。所以我们常常把LOGO放在左上角。那么我们来想想能不能再加入些什么东西来引导浏览者呢?(登陆链接，搜索框，网站的口号。..。..)  

4.“F”阅读模式  

跟据一些眼球追踪的数据表明，阅读者在看一个网页的路径，像一个字母“F”。这表明浏览者*注重的地方有，头部，三分之一处，和左侧。所以我们要想一下如何把网站最重要的部分放在这几个地方。  

5.浏览者忽视有哪些  

浏览者会忽视广告。他们会忽视横幅广告或文字广告。因此要避免网页的设计看起来像广告似的。还有浏览者也会忽视大块的文本。没有人会有很多的时间去看那一大部分的文本只为获得一个网站的主要内容。(我也没有耐心去看)所以我们要尽量的简化文本，或者是增加一些图像装饰来吸引眼球。  

6.文本VS图片  

这是一个有趣的事实。文字比任何静态图形更加吸引浏览者的眼球。如果你想给浏览者传递一个信息，那么我建议你使用文字来代替静态的图形。  

7.吸引眼球的设计元素  

我们来看一下哪些元素可以吸引浏览者的眼球：有煽动性的口号和按扭(通常使用明亮颜色)，有步骤的列表如：1-2-3.  

如果你要写一篇文章，那么你首先要确定好文章的标题。好的标题可以吸引浏览者的目光。一个好的标题可以让浏览者更好的抓住文章的重点。  

8.文本格式  

如果使用正确的文本格式，那么文本将有更多的机会被读取。不要害怕使用段落，粗体，斜体，引用文字，下划线或者大字字母。..。..任何可以让你的文本更加受吸引的方式。当然有时你需要使用引导语句，来引导读者的目光。  

9.使用清爽而干净的图形  

上面说过，浏览者会忽视广告。当你在设计图形的时候要确保它们不是太过于繁杂和混乱不理解。人们会觉得繁杂的图形和色彩丰富的图形会很难看。所以你要避免这种事的发生。  

在设计图形的时候要找出一个“point”让浏览者来注意。  

10.留白  

不要把设计元素推杂在一起，要留空白。让它们之间有呼吸的空间。特别是适用于文本。