设计相对和谐的网页(网页,菜单宽度,显示器尺寸,输出比例,像素,�)W3POP.COM

设计相对和谐的网页

作者:作者：Lynch 和 Horton / 翻译：w3pop.com 翻译/整理:w3pop.com 发布:2007-04-28 浏览:4791 ::

Web page design is largely a matter of balancing the power of hypermedia Internet linkages against the ability to imbed graphics and motion media within networked Web pages. Some home or menu pages function more like the covers of books or magazines. The idea is to draw the user into the material with a combination of text descriptions and interesting graphics related to the subjects:

网页设计事实上是一个非常大的工程，它将大量的图形和超媒体嵌入网页内部。网页中的主菜单如同一本书或杂志的封面，它的主要目的就是引导用户访问与主题相关的文本描述和图片。

上图为www.apple.com网站的缩略图

The most efficient designs for general (mostly modem-based) Internet audiences tend to use careful layouts of text and links with relatively small graphics. These pages load into viewers quickly, even when accessed from 28.8 kbps modems over SLIP or PPP lines, yet these pages still achieve a substantial graphic impact. This is razorfish's elegant but minimal layout design for the Pace-Wildenstein Gallery:

大体上，对于网络用户来说，行之有效的设计方式是：对文本内容进行细致地规划，并配上与链接相关的小图形。这样做的好处是：页面的加载速度会很快。即使是在SLIP或PPP线路上使用28.8kbps的Modem，也可以很快地把所有内容加载完毕。下面可以看下Pace-Wildenstein案例，它用了最小的版面进行设计但又不失文雅的一面：

上图为www.pacewildenstein.com网站的缩略图

The screen is smaller than a printed page
显示器比输出的页面小

While Web pages and conventional documents share many graphic, functional, and editorial similarities, the computer screen is the primary delivery site for web-based information, and the computer screen is very unlike the printed page. Graphic designers often create page grids that look great on their extra-large monitors, forgetting that most users cannot display more than about half of the typical Web page at any one time, and only 10% of Web surfers ever scroll the page.

当网页中加载了大量的图形、函数或其它可编辑信息时，计算机显示器将主要用来传递站点信息。这样一来，显示器可能会小于整个输出页面（此时，可能会出现滚动条）。图形设计师喜欢创建页面网格，然后进行设计，这样可以在超大显示器上表现的非常得体；但他们却忽略了一点，用户的显示器可没那么大，他们即使是全屏可能也只能显示一半。因此，很多人可能不会看完全部内容就离开了该站点，差不多只有10%的人愿意拖动滚动条查看剩余内容。

Width of page graphics
图形宽度

Computer screens are typically smaller than most books or magazines. A very common mistake in Web design is spreading the horizontal width of your page graphics beyond the area most viewers can fit on their 14-15 inches display screens.

计算机显示器通常比大多数的书籍或杂志要小。一个在设计上非常常见的错误就是：把水平宽度设计的很大，以至于不能在用户使用最多的14-15英寸显示器上全屏显示。

Graphic dimensions for web pages
网页图形维数

Web page graphics should not be more than 535 pixels wide or more than about 320 pixels high, or the graphic will be too wide to print on letter size or A4 paper. Even when your readers have large display screens, the typical Netscape or Internet Explorer window still defaults to a window width designed for smaller monitors. Microsoft's otherwise excellent home page is too wide for many standard office monitors:

网页图形大小最好不要超过535像素宽度或320像素高度；最好也不要因为图形太大而不能在A4纸上输出。即使你的浏览用户使用一个大尺寸的浏览器浏览，Netscape[网景]或IE窗口也会将其默认为适合小型显示器的浏览方式进行显示。这里要指出的是：微软的主页对大多是办公用显示器来说也显得过于庞大了。

上图为www.microsoft.com网站的缩略图

The following size recommendations are based on the typical dimension of a Web browser on a 14 inch or 15 inch Macintosh or Windows 95 screen:

在下面这张示意图中，我们具体列出了在用户最常用的14-15英寸Macintosh[苹果机]或Windows 95显示器上如何设计典型的浏览器页面维数：

Design grids for HTML pages
设计HTML页面网格

A Web page can be almost any length, but you've only got about 30 square inches at the top of your Web pages to capture the average reader, because that is all they will see as your page loads. If all you offer is a big, slow-to-load graphic, many casual readers will leave before they ever see the rest of your Web site.

虽然页面可以设计成任何长度，但是我要提醒你的是：其实你只有30平方英寸的“土地”来俘获你的用户。因为只有这样，你的页面才能在用户的显示器上全屏显示；如果你提供的页面太大，那么大部分（没有什么耐心）的用户将在页面全部加载完毕之前离开该页面。

Consistency and predictability are essential attributes of any well-designed information system, aiding users in identifying the origin and relationships of World Wide Web pages, providing consistent and predictable access to interface and page elements, and a consistent graphic design scheme. The design grids that underlie most well-designed paper publications are no less necessary in designing electronic documents and on-line publications, where the spatial relationships between on-screen elements is constantly shifting in response to user input and system activity.

“一致性”和“可预见性”是体现优秀信息系统设计的必备属性。它可以帮助用户确定万维网页面的来源，并澄清万维网页面之间的关系；它可以为用户提供“一致性”和“可预见性”的界面访问渠道以及图形设计规划。大多数设计精美的纸张类出版刊物都用到了“设计网格”；其实，“设计网格”在电子文档和在线刊物的设计中同样重要。其中的页面元素之间的空间关系通常会根据用户的输入信息和系统活动进行变化。

Clown's pants
“小丑的短裤”

Current implementations of the Hypertext Markup Language (HTML) do not allow the flexibility or control that graphic designers routinely expect from page layout software or conventional multimedia authoring tools. However, the HTML markup language can be used to create complex and highly functional information systems if it is used carefully. When used inappropriately or inconsistently the typographic controls and inlined graphics of World Wide Web (Web) pages may result in a patchy, confusing jumble, without any apparent visual hierarchy of importance. This unfortunate "clown's pants" effect of haphazardly mixed graphics and text results in decreased usability and legibility, just as it does in paper pages. A carefully organized design grid that is consistently implemented across a range of pages will aid your users in quickly finding the information they want, and will increase the reader's confidence that they are using a thoughtfully organized collection of information:

当前，在对超文本标记语言（HTML）的执行上还不存在任何“自动适应性”机制。它也不允许设计师对来自于页面层软件或常用的多媒体编辑工具中的图形进行控制。然而，如果你仔细琢磨一下HTML 标记语言的话，你会发现它可以帮助你创建复杂和高难度的功能性信息系统；如果你对HTML的使用缺乏适当性或连贯性的话，那么你会发现网络页面中的图形控制器和内置图片将显得不能相互调和，毫无层次感，并且，会出现乱作一团的后果。这种不可预料的图片和文字乱作一团的“小丑短裤”情况将大大降低整个网站的可用性和可读性。在纸张出版物中出现这种情况也会导致相同的后果。细心地规划一个设计框架，确保一组图片能够相互协调，这将帮助用户快速查找到他们所需要的信息，增加快速收集信息的信心。

显示器的尺寸大小对网页设计的影响如果使你的访问者关注你的产品

设计相对和谐的网页

评论 (0) All