Site design: mechanics
网站设计技巧

Books are a text medium and, in spite of its visual content, television is regarded as a verbal medium. Movies, on the other hand, are a visual medium. To test this, close your eyes while watching a television program and do the same while watching a movie at a theater. Compare the time intervals where there is no dialog. You'll find that with television, the dialog is nearly continous.

书籍是文字媒体，电视是语言媒体（尽管提供视觉内容），而电影是视觉媒体。为了检测这个问题，你可以在看电视或欣赏电影时闭上眼睛，比较这两种媒体对话的时间间隔，你会发现电视语言基本不会间断。

The point: web sites don't seem to lend themselves to such well crafted distinctions. Sites appear to amalgamate many medium. Drawing upon this observation, there are no hard and fast rules of site design that are going to make or break the success of your e-commerce web site. None-the-less, there are still some guidelines that can improve the chances of having a successful site. In this issue we continue the series with a few of the technical basics.

结论：网站与其它媒体之间没有这么大差别。网站更像是许多媒体的结合体。总结出这个观点以后，我们就可以利用方便、快捷的方法创造出成功的电子商务网站。当然，设计成功网站的方法有很多，这篇文章会继续介绍基本的设计方法。

Screen size
显示器尺寸

Unlike television, one size does not fit all screens. Your audience can be using a screen display size anywhere from 640 by 480 pixels up to 1280 by 1024 pixels. If a web page is 1000 pixels wide by design and it's being viewed on a 640 pixel screen, there will be a lot of horizontal scrolling required to take in the full page. This may ruin any carefully planned visual impact. On the other hand, if the page is 640 pixels wide and is being viewed on a 1200 pixel wide screen, text may be too small to read.

计算机不同于电视，显示器的尺寸并不不同，最小尺寸为640x480，最大尺寸为1280x1024。如果网页宽度为1000像素，而用户显示器宽度为640像素，这时用户需要拉动水平滚动条浏览页面，这样的视觉效果会大打折扣。如果网页宽度为640像素，而用户显示器宽度为1200像素，显现的文本尺寸就会很小，不易阅读。

There are two ways of optimizing page size and one compromise approach.

下面介绍两种优化网页尺寸的方法，一种妥协的办法。

1) Adjust the page size by using a JavaScript to detect the screen size. Adjust the content size accordingly or supply size specific pages.

1)根据屏幕尺寸，运用JavaScript调整网页尺寸。调整内容尺寸或者特殊网页的尺寸。

2) Make the page size flexible. Declare percentage widths for table and cell parameters.

2)网页尺寸要灵活，表格与基本内容设置百分比宽度。

3) Compromise a fixed width page size to fit the most frequently expected screen size.

3)配合经常使用的显示器尺寸，设置固定的网页宽度。

Using scripting code to detect screen size and adjust content can be complex. Serving up separate pages to fit particular screen sizes creates overhead problems with page updates. Making page sizes flexible can lead to unexpected results. Compromising page size is the simplest, and not an unreasonable approach, to setting a page size for viewing by a visitor.

运用scripting编码检测显示器尺寸，适当调整复杂的内容。设计适应特殊显示器尺寸的网页，会使网页更新出现问题。但灵活的页面尺寸会带来意想不到的结果。这种方法最简单，也很合理。

The road warrior group will mostly have an 800 by 600 pixel screen size. The most common size for desktop users is 1024 by 768 pixels. With these two sizes in mind, 90 plus % of visitors will be covered.

90%多的网站用户使用800 x 600（大多数road warrior用户使用）与1024 x 768（大多数desktop用户使用）分辨率的显示器。

Check the rendering of a page in different browsers and screen size at:

在不同的浏览器与屏幕尺寸下，检验页面效果。

File footprint:
文件尺寸

Footprint is the total byte size of a file including any imbedded graphics, audio, flash, or other special features. It is reflected by the time it will take for the file to downloaded and render as a page in the visitor's browser. High speed broadband and DSL Internet connections are gaining in availability but, 70% to 80% of visitors will still be using a 56K modem for their internet connection. Therefore it is advisable to design the opening or default page of a web site so it can be fully downloaded and viewed within 8 to 12 seconds. This is a generally accepted duration that the casual visitor will wait for a page. After that time, the visitor is likely to go elsewhere.

Footpoint是指包括图片、音频、flash或者其它功能的文件尺寸。文件下载时间以及网页在用户浏览器中的呈现时间就能反映文件内容的大小。尽管现在出现了高速宽带以及DSL网络链接，但70%-80%的访问者仍然使用56k的调制解调器。因此，网站要保证在8-12秒（不熟悉网站的用户可以接受的时间）内完成下载，如果超过这个时间，用户会登录其它网站。

The key here is "the casual" visitor. Return visitors with greater interest in the site offerings will no doubt wait longer. However, first time visitors will probably be casual visitors and you want to keep them at the site. This means that the opening page must be presented quickly.

这里的重点是“不熟悉网站”的用户。回访用户对网站提供的产品或服务，拥有很大的兴趣，肯定能够等待更长的时间。然而，初次访问者可能对网站不熟悉，网站又希望这些用户可以停留在网站中。这就意味着，页面的下载速度必须要快。

Estimate the download time by dividing the file footprint size, comprising all imbedded files as well as the file itself, by the Modem speed. Modem speeds are given in bits per second. File sizes are usually reported in bytes. The bit size of a file is about 8 times the bit size, making a 50KB page footprint equal to about 400 kilobits. Dividing 400 using a 50 kilobit modem, gives a download time of 8 seconds. This time will increase nearly 50% under actual TCP protocol conditions of error checking, and packet reconstitution.

我们通过分解文件，预测文件的下载时间。文件由内部的各种功能以及文件自身所组成，调制解调器速度是每秒几比特，文件尺寸是按字节计算。文件比特尺寸是比特尺寸的8倍，50kb的网页尺寸就相当于400000比特，利用50000比特的调制解调器把400000比特分离，下载时间为8秒。这个时间与TCP协议中误差校验、数据包重发的时间相比，增加了将近50%。

Images
图片

Web site graphic images are good for getting attention and relating a visitor to the intention of the web site. Images, however, can have a large file size contributing to the page download time. The most common image file types in use on the Internet are "gif" (CompuServe bitmap) and "jpeg" (Joint Photographic Experts Group). "jpeg" is sometimes shortened to "jpg". Both of these file types use compression to eliminate redundancy, thereby significantly reducing the file size from what it would be as a simple uncompressed bitmap file. Gif images have the advantages of supporting transparent color and segments which can be stitched together to form an animation. Jpeg images will have a larger file size for the same image but produce a better quality display.

网站图片确实能吸引用户的注意力，然而，却能增加网页的下载时间。网上最常见的图片格式为“gif”（CompuServe bitmap）与“jpeg（Joint Photographic Experts Group）”，“jpeg”简称为“jpg”。这两种图片类型都是运用压缩方法，除去图片中多余内容，显著缩小图片尺寸。Gif图片支持透明颜色，以及从动画图像转化过来的内容。Jpeg图片尺寸更大，但图片质量会更好。

As a rule, gif images are used for drawn objects having a limited amount of complexity and only a few colors. Such items as navigation buttons and banner ads are usually gif's. Jpeg images are more likely to be used where photographic quality is required.

通常，gif格式一般用来保存简单、只有几种颜色的图片，比如，导航按钮以及横幅广告。JPEG格式通常用来保存高质量的图片。

The layout size of an image as presented in the visitor's browser will be determined either by the image size itself or by the width and height setting used to specify the image in the HTML markup defining the page. In almost all cases the width and height parameters in the markup should be the actual image size. If the parameters are specified larger than the image, the image may become pixelated when viewed in the browser. If the parameters are specified smaller, the page download time will be greater than necessary because the actual image size is larger than needed, increasing the file footprint. It is preferable to resize copies of the images to fit the page requirements.

用户浏览器中呈现的图片尺寸，或者由图片本身决定，或者由HTML中图片的高度与宽度决定。在大多数情况下，HTML中的高度与宽度参数就是实际的图片尺寸。如果参数比图片实际尺寸大，浏览器中呈现的图片就会像素化；如果参数比图片实际尺寸小，图片下载时间会比实际需要时间长，因为实际图片比需要的图片尺寸大。更好的方法是根据网页需要，重新调整图片尺寸。

网站设计者易犯的5大设计错误 清楚表述设计理念

评论 (0) All