Rules and preference for designing a website can differ from website to website depending on the target audience, whether it is entertainment website or corporate website or just a personal portfolio. But there are still somethings that are common in all websites, and if followed can make your site look better. So here are few things I would like to discuss.

网站设计要根据目标受众，选择设计方法。娱乐性网站，公司网站以及个人网站设计方法都不相同。但是网站设计中有一些通用原则，如果遵循这些规则，网站看上去会更专业。下面，介绍几个要点。

1. Font Style and Size
1.字号和字体

Selecting a right font and size is essential. For example fonts such as Verdana, Arial and Helvetica look especially good in websites, whereas fonts such as Times New Roman, Courier, Sans-Serif... etc types won't look good. Also the size of the font plays important role in website design, smaller sized fonts look neat but it is more difficult to read. So it is your decision to make a choice between the look and usability. Following is the comparison between Times New Roman and Verdana.

选择合适的字号和字体，是网站设计要考虑的一项重要内容。比如说，网站中使用Verdana、Arial和Helvetica字体，就会使页面看起来非常舒服，然而， Times New Roman、Courier、Sans-Serif等字体就不会有这样的效果。同样，字号在网站中也能发挥重要的作用，稍小的字号会使内容看起来更整洁，但不利于用户的浏览 。所以，你要在外观和可用性方面作一个选择。下面就是Times New Roman和Verdana的一个比较：

2. Using tables? Don't forget the cellpadding
2.使用表格时利用cellpadding属性

Almost all the websites use tables in one way or another, but using tables with a sense of design will make your site look better. If you use tables background colors in your page, then it is very important to use cellpadding, otherwise all the text inside the table will stick to the border of the table. Which is not recommended at all. Here is the Examples:

几乎所有网站都会利用一种或者几种表格，但是只有正确使用表格才会使网站看上去更美观。如果在网页中运用表格背景色，那你必须要运用cellpadding这个属性，否则表格内容会到边缘，这样的效果很不好。下面就是一个比较，上面的表格利用了cellpadding属性，下面的没有使用。

3. Design websites for 800x600 resolution
3.网站设计考虑800x600分辨率

While 1024x860 resolution is the most used resolution online, it is recommended to design your website 800x600 compatible. Because there are people who still use 800x600 resolution. There are different ways to design a website which is compatible to 800x600 resolution.

现在，用户使用最多的是1024x860分辨率，但是，必须保证网站可以在800x600分辨率的状态下呈现，因为仍然有用户在使用这个分辨率。要保证网站在800x600的分辨率下呈现，可以利用很多方法。

1. For example you can design it in a way that it will stretch to any size (any resolution), here is one good example of such website. Alamy.com

1.比如说，你可以将网站设计成能够自动适应任何尺寸（或任何分辨率）的网站，Alamy.com就是这样的一个网站。

2. Another way is fixed size such as this website. The size does not change no matter how much is the resolution. Yahoo.com

2.另一种方法就是将网站设计成固定尺寸，比如：ruanchen.com，它不会随着分辨率的改变而改变。Yahoo.com也是这样的网站。

3. And finally not so user friendly but still acceptable design that is all the content is placed on the table not exceeding 800 pixels. There will still be a horizontal scroller on your browser but at least you don't have to scroll it when you are reading something on the site. Here is a good example of such site: Tomshardware.com

3.最后，还有一种方法虽然不是广为人知，但仍然有人使用，那便是在表格中放置宽度不超过800像素的内容。虽然会在浏览器上出现水平滚动条，但当你阅读信息时，你完全没有使用它的必要。Tomshardware.com就是这样的一个网站。

4. Pop up window? Bad idea
4.避免出现弹出窗口

Pop up windows are a good to catch user's attention and force him to take action (at least to make him close the window), but it is annoying and generally users don't like it. So unless it is very essential to use a pop up window for you - I would say avoid using it. Even though you can program it to pop up only once, it is still considered a bad idea.

使用弹出窗口，确实能吸引用户的注意力，促使他们采取行动（至少可以使它们阅读内容），但是大多数用户对这个感到厌烦。因此，只有在非常有必要的情况下，才可以使用探出窗口，不过，最好是一次也不要用。

Especially now with the browser's build in pop-up blockers, most of the popups are left blocked.

现在很多浏览器自带了弹出框屏蔽器，大多数弹出框都会被屏蔽。

5. Mention Image height and width in html <width="120" height="100">
5.在html中使用<width="120" height="100">来设置图片的高度和宽度

When browser opens a particular page it tries to understand the html, so when you leave the image without mentioning its dimensions, browser gets confused how much space it supposed to take, thus it will slow down the loading of the page. However if you mention the width and height of the image, browser can know exactly how much space should it allocate for particular image, and even before the image loads it can allocate this space to it and continue loading the rest of the page. So if you want your pages to load faster, don't forget to include image width and height.

当浏览器打开网页的时候，它会试图读懂html的语言，所以在没有涉及到图片尺寸的情况下，浏览器不了解图片会占用多少空间，因此图片下载速度会减慢。然而，如果设置了图片的长度和宽度，浏览器就可以了解图片的存储空间，会在下载以前分配图片的空间，然后继续下载网页的其它部分。所以，要使网页下载速度加快，就需要在在html中使用<width="120" height="100">来设置图片的高度和宽度。

6. Follow the web conventions.
遵循网站设计规则

Web conventions are very useful when it comes to web design, if you follow them you will make your user's life a lot easier. After all only useful things will become a convention. For example having the logo on the top-left corner of your website and linking it to the homepage is one of the conventions. Or employing consistent navigation throughout your website is another convention.

在设计网站时，遵循网站规则很重要，这样可以方便用户进行浏览。当然，只有有效的方法才会成为规则。比如说，logo要放置在网站的左上角，并且可以与首页进行链接，这是一个规则。网站的导航系统要连贯是另外一个规则。

7. Avoid under construction pages.
7.避免出现未建设完成的网页

Publish your websites only if it is fully completed, or if you have unfinished pages then do not put those pages online yet and do not provide link to them until they are fully completed. Under construction pages are totally useless, it will waste your user's click and might even generate negative effect towards your website (or you). Because if you think from user's perspective you don't want to click on the link just to find out that this page is under construction.

只有在网站建设完成之后，才可以在网上呈现，如果某些网页没有完成，就不要把它们放在网上，或者是不要进行链接。未完成的网页毫无作用，只会浪费用户的点击时间，这样会对网站产生消极的影响。因为，如果站在用户的角度考虑，你肯定不想链接完成之后，看到一个正在建设的网页。

8. Underlined texts that are not links.
8.不要给非链接文本内容添加下划线

nly links should be underlined, if you underline the text then make sure the user will not confuse it for a link.

能够进行链接的内容可以加下划线，但非链接文本就不要出现下划线，因为这样会使用户产生混淆。

9. Avoid intros and Welcome pages
9.抛弃引导页和欢迎页

Unless you have a very impressive intro (maybe designed by 2advanced) avoid using intros. As for the welcome pages that has an "enter" button and some info about the site should be avoided as well. Basically with welcome page you are stopping your users from actually seeing your site, you are keeping them one step behind. You never know maybe some of your users leave your site without even clicking on your 'enter' button, if so then you are loosing a potential customers.

如果引导页不是令人印象特别深刻，那就不要出现。出现“进入”以及某些信息的欢迎网页最好也不要出现。如果使用欢迎页面，那就意味着用户需要多点击一次，才能找到所需要的内容。你可能不知道，一些用户在点击“进入”键之前就已经离开网站了，这就意味着网站流失掉一些潜在用户。

网站设计的基本技巧 飞行菜单损坏导航系统

评论 (0) All