当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 网站创建、设计中的八个注意事项

设计理念
什么是XHTML?
启发设计灵感
网站设计的新视角
从最优化角度来设计你的网站
脱离Google生存
logo的类型
Flash的弊端
避免使用JavaScript动态导航条的7大理由
正确使用“留白”属性
商务图形设计
如何使用“哇元素”
提高网站的可访问性
让你步入专家领域
“一页站点”的概念
高级网页设计原则
接近你的客户
创建网站的黄金法则
3条帮助你成功创建“会员制营销”的方法
重新改造你的主页
避免图形文件过量

设计理念 中的 网站创建、设计中的八个注意事项


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 2426 ::
收藏到网摘: n/a

Other factors that affect the online environment, and what we can do to mitigate their impact.

这里要指出的是,我们还可以使用其它关键要素来减轻网络环境中存在的冲突和不便。

Simple web designs prove more effective in many ways.

我们可以通过各种方法来制作简洁明了的网页,从而增加它的浏览效率。

On this page:
页面效果包含下面几个重要因素:

  • Cultural sensitivity
    文化敏感性
  • You don't know how the user got here
    用户访问该页面的方法和途径
  • Connection speed
    连接速度
  • Time delay between client and server
    客户端和服务器端的时间延迟
  • Variation in fonts
    字体的变化
  • Variation in Colours
    颜色的变化
  • Support for HTML/CSS/JavaScript/Flash
    是否支持 HTML/CSS/JavaScript/Flash
  • Accessibility
    是否便于访问
Cultural sensitivity: I don't know you, you don't know me
文化敏感性:我不懂你,你也不懂我。(要点:网页中倡导的文化必须是每个人都能理解和接受的)

Because the web is truly worldwide, people accessing your web site might be from very different cultures.

因为互联网是真正意义上的全球性网络,因此,这里将会有形形色色,并带有不同文化、风俗和信仰的人群访问你的网站。

Also, because you don't know how a user arrived, you don't know what prior experience they may have of your company, products or services.

同时,因为你不清楚这些用户是通过什么途径进入你的网站的(毕竟是茫茫人海啊),因此,用户对你的公司以及你提供的服务和产品的总体印象你也将一无所知。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?
  • Use common international web conventions in preference to culturally-specific ones.
    尽量使用国际通用的网络文化和惯例,避免使用某一方或某一国家所特有的网络惯例

  • Use simple multiple language, to help users whose first language isn't the same as yours
    最好能够使用精简通俗的多语言版本,帮助那些与你的母语不同的用户阅读网站内容

  • Don't assume the user trusts your brand, just because they're on your web site. Treat everyone as though you need to earn their respect.
    不要事先假设用户对你的品牌有多么的信任,因为他们现在仅仅是访问你的网站而已。请善待你的每一个用户,因为你需要博得他们更多的信任和尊敬。

You don't know how the user got here
你并不了解用户是通过什么方法或途径访问你的网站的

You can't always be sure what route a user has taken to get to your web page.

通常情况下,你不能够确定用户是通过什么方法或途径访问你的网站的。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

  • Provide enough information on each page to make it clear what the site is about, where you are in the site, what's on the page, what is elsewhere and how to get what you want...

    简明的阐述网站内容,告诉你的用户:现在位于网站中的哪个位置,该页面包含了什么信息,还能在其它的哪个地方寻找到类似信息。

Connection speed
连接速度

Users may be connecting to a web site over a slow connection, as low as 0.5KB/second for mobile phone access. It's not only the user's nominal maximum connection speed that affects the real transfer rate. A typical user on a 55.6 modem will get a realistic transfer rate of about 3-4KB/second, but may get significantly less at busy times. An overladen web server may also be a bottleneck. Minimising total page size not only improves usability, but helps speeds up every part of the system.

用户访问你站点的速度可能很慢,如果是用移动电话访问的话,可能只有0.5KB/S。这里要强调的是:用户的实际传输速率远远比名义最大访问速率小。典型的例子是:55.6KB/SModen在一般状态下的传输速率大概只有3-4KB/S,如果是网络高峰期,大概还会更少。一个高承载的服务器可能会遇到传输瓶颈。因此,减少页面的尺寸不仅仅能够改进页面的可用性,并且还能提高用户的浏览速度。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

  • Concentrate on imagery that adds add meaning, and reduce the amount background imagery to a minimum
    尽量在多个页面加载同一张/系列的影像,削减背景影像的尺寸

  • Use cascading style sheets (means smaller downloads), use styles wherever possible to create background colours, borders and rollover effects
    尽量使用样式表(通常可以减少下载量)中的样式属性来创建背景色、边框和滚动效果

  • Create clean, simple HTML
    创建清爽、简明的HTML代码

Time delay between client and server
客户端和服务器端的时间延迟问题

There's always some lag between any web server and browser, no matter what the user's connection speed. Anything more than 1/10 of a second response time is noticeable. The longer the delay before the browser starts to render your web page, the more likely your user is to abandon the attempt. Anything over ten seconds wait appears generous today, so responsiveness can make a vital difference to online success.

无论用户的连接速度有多快,网络服务器和浏览器之间的交互通常会出现延迟现象。一般超过1/10秒的延迟,人们就会有所感觉。那么,浏览器向服务器发出的请求时间越长,用户就更有可能放弃尝试连接该网站。如果一个人能够等待响应超过十秒钟,那么他已经是非常有耐心的人了(这样的人很少)。因此,响应时间对于网站的成功起到至关重要的作用。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

  • Use CSS as much as possible. Tables can take a long time to render.
    尽可能的使用CSS。因为用Table[表格]将会延长递归时间

  • Build pages in discrete, sequential chunks, and avoid wrapping entire pages in large tables.
    尽可能地分散网页内容,将相关的内容放在一个区域里; 尽量避免在一个大的Table[表格]中嵌套整张网页

  • Save imagery for content, wherever possible.
    尽量减少内容中各类影像、图像的使用量

  • Make the most important items text/css based, not images. The most important items are very often the things that tell you where you are, what you can do here, where else you can go, and what else you can do when you get there.
    网页中的重要栏目尽量基于text/css创建,而不是图片。重要栏目中通常包括下面几个方面的内容:告诉用户现在位于网站中哪个位置,他们可以在这做些什么;网站中是否还有其它相关的网页可以浏览。如果到了那张网页内,他们又可以做些什么。

Variation in Fonts
字体差异

Different computers and devices use different fonts. Macintoshes have different fonts than PCs. Some of the fonts that you might assume are universal really aren't, e.g. for a long time font xxxx has been installed with MS Office.

不用的电脑和设备使用不同的字体。Macintoshes[(Mac)麦金托什机:苹果公司于1984年推出的一种系列微机],他拥有比普通个人计算机更多的字体。其中的许多字体我们都假定它是通用的,但事实并不是这样,举个例子来说,一直以来,MS Office对该类字体的显示都是xxxx[即:不能显示该字体]

e.g. Conclusively the best font for rendering general body text on a Windows PC is Verdana (because it's wide-pitch and sans-serif). Macs don't come with Verdana!

案例:如今,Windows PC 中使用的最广泛的英文字体是Verdana,因为它是宽螺距、无衬线[衬线:字母主线端的短细线,如在M 的顶部和底部的细线]”的字体。但是Macs[苹果机]却不支持该字体。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

Do not create a design that depends on a specific font being installed on the client's computer. Definitely set general body fonts to sans-serif. Best practice style (in my opinion) is:

尽量使用所有电脑都通用的字体来创建和设计网页,最大限度的使用无衬线字体。我认为最好使用下面这个字体样式:

font-family:verdana,helvetica,arial,sans-serif;

Only use other faces at particular times when quick, mass readability is less of a priority. e.g. It's okay to use a serif face in a large size for headers; and it's okay to use fixed-pitch faces (e.g. Courier) for code snippets. The rest of the time, stick with the general sans, and concentrate your creative energies elsewhere.

旨在迫切需要提高可读性的情况下使用其它类别的字体,但要降低它的优先级别。例如:在header[页首]中使用大尺寸含衬线字体;在代码片断中使用固定螺距字体(如:Courier字体);其它的部分,使用无衬线字体。请记住:一定要在每个页面中体现出你的创造性精神。

Variation in Colours
颜色差异

A minority of older computers can only display 256 different colours. These colours are slightly different on PC and Macintosh platforms, but there are 216 common colours that reproduce well on both. This is the 216-colour web-safe palette. You can be sure that pretty well everyone accessing a site designed using only the web-safe colour palette will see the same thing. There are other ways of browsing web sites

少数的老版本电脑只能用256色显示。这些颜色在PC机上和Mac[苹果]机上是存在差别的,但是,其中的216色是相同的。因此,便形成了216web-safe[网络通用]调色板。我的建议是:尽量在所有的页面上使用216web-safe[网络通用]调色板上的颜色,从而保证每个不同的访问者[来自于不同的电脑]所看到的颜色是相同的。这也是建站中需要注意的一点。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

  • It is good practice to choose a few well-matched colours, and to follow the scheme throughout a design

    页面中所使用的颜色数量要尽可能的少,并且所使用的颜色之间要相互匹配,最好按照一套具体的配色计划进行设计

  • Where possible, use a web-safe colour for large areas of solid colour

    尽可能全部使用216web-safe[网络通用]色中的颜色

  • Use white for the main content area

    使用白色作为内容背景色

  • Accept that a minority of people may get a compromised experience of a site designed in full-colour

    少数人青睐于丰满的配色方案,因此,在制定配色方案中,除了尽可能少的使用不同颜色外,还要同时注意,如何利用这些少量的颜色体现出丰满的效果

Support for HTML/CSS/JavaScript/Flash
HTML/CSS/JavaScript/Flash的支持

Not all browsers can support the latest HTML or CSS. Some people aren't allowed to install the Flash plugin. Very few browsers indeed can't run JavaScript (but the majority of these must be screen readers or low-res browsers on other platforms.

并不是所有的浏览器都支持最新版本的HTMLCSS,有些人甚至还不允许安装Flash插件;极少数浏览器也不允许运行JavaScript,但是,大多数浏览器还是支持运行这些插件和脚本程序的。

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

These days, you can get away with relying on your target user being able to see use content that runs in Flash or DHTML. I'd add the caveat that you must consider your target market (not just your ideal user, but anyone who *should* be able to get your message), and make sure you're clued up on the percentage of people who might be excluded if you use certain formats.

这段时间,如果你侥幸希望你的目标客户在flash中或是DHTML(动态HTML)网页中查看内容,那么,我要告诫你的是:你必须要考虑到你的目标市场,千万不要幻想存在那么多理想客户,要保证他们能够方便、及时地获取所需的信息。还有一点,当你使用特定的格式时,必定会有一部分人会排斥这种格式,所以,你还必须得想办法把这些人留住。

Accessibility
便利访问性

What we can do
那么,碰到上述这样的问题,我们能做些什么呢?

  • Use text for text, wherever possible. CSS makes it easy to do rich background for buttons etc., and has the benefit of decent mouseover effects built-in

    尽量使用纯文本而非影像图片。CSS可以很容易地丰富按钮背景,并制作内置的鼠标经过效果

  • Make all text resizable where possible. People with poor eyesight may have a larger default size, and may not be able to read small text.

    所有文字尽量不要使用固定的尺寸,最好是能根据显示器和分辨率的不同自动调整。因为,视力不好的人不喜欢阅读小文字,他们更偏爱于大字体

  • Include helpful 'alt' attribute for all relevant images, to aid users using screen readers. Make alt text concise and to-the-point.

    尽量在每张图片的“alt”属性中写上有助于理解这张图片的文字,旨在增加用户浏览器的可读性。注意:这些描述性文字必须要言简意赅。

评论 (4) 1 All

登陆 | 还没注册?