当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 设计相对和谐的网页
上图为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
网页图形维数
上图为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
“小丑的短裤”