网站设计的50条建议_网页设计教程

推荐：论设计的布局与平衡
最近忽然心里比较沉重，不是来自生活的不顺，也不是来自经济的拮据。是一连几个案子，这样或那样，都没有达到自己最理想的效果，自己在之前做了很多，想了很多

Tips to brand your website
宣传网站的建议

· Include your logo in all pages. Position it at the top left or each page.

确保每张网页的左上方出现logo。

· Complement your logo with a tagline or catchy sentence that summarizes your business purpose. For example "Always low prices" is the tagline for Wal-Mart.

logo旁边出现标语或者是介绍企业特点的语言，比如说，“天天平价”是沃尔玛的标语。

· Create a favicon. A favicon is that small graphic that appears next to the URL in the address bar.

创建favicon。Favicon就是出现在地址栏URL旁边的图形。

· Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across your site.

所有网页外观设计要一致。网站的颜色、布局要一致。

· Have an About Us section, that includes all relevant information about you and your business.

网站设置“联系我们”板块，包含所有关于你与公司的相关信息。

· Include a copyright statement at the bottom of each page.

网页底部包含版权信息。

Tips on website navigation

网站导航系统

· Design your pages to load in less than 10 seconds (50Kb maximum size, including pictures).

网页下载时间控制在10秒之内（50kb，包括图片）。

· Group your navigational options in relevant categories.

相关的导航内容放在一起。

· Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid "clever" or "trendy" alternatives.

菜单栏选项使用常用的名称：主页，关于我们，联系我们，帮助，产品，避免出现时尚、流行的选项。

· If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.

假如网站利用Flash，确保出现HTML版本，有些用户不喜欢眩目的网站。

· Provide simple text navigation links at the bottom of long pages, so users don't need to scroll back up.

网页底部出现简单的文本链接，这样用户就不必退回网页顶部。

· Link your logo to your homepage, except in the homepage itself. Put a link to your homepage on all your internal pages.

logo与主页进行链接（除去主页logo之外），另外所有二级页面要与主页进行链接。

· Display a "breadcrumb trail"; it is basically the path from the homepage to the page where you are. A breadcrumb trail looks like this: Home > Section > Sub-Section > Page, and it greatly facilitates navigation.

展示网站浏览路线，就是指从主页进入各级页面的路径，比如说，主页 > 主菜单>次级菜单 > 二级页面。这样用户可以方便地操作网站。

· If your site is too big, provide Search capabilities. Include a search box in the upper right corner of your homepage, and a link to a Search page from your interior pages. Freefind ( ) offers you a free and powerful search engine for your site.

假如网站内容太多，你可以提供站内搜索。网站主页的右上方可以设计搜索框，或者提供搜索页面，以及内部页面与搜索页面的链接。网站需要具备功能强大、免费的搜索引擎。

· Set your search box to search your site, not to search the web.

搜索框用来搜索网站内容，而不是所有网络内容。

· Create a custom error page that displays a simple site map with links to the main sections of your site. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.

创建常用的错误页面，页面中呈现站点地图，以及与网站主要内容的链接。这样，网站就不会流失链接无效或者URL输入错误的访问者。

Tips on Layout and Content Presentation
布局与内容的设计技巧

· Save the top of your page for your most important content. Remember: good content must flow to the top.

网页顶部的内容应该是最重要的内容，请记住：好内容必须放置在顶部。

· Lay out your page with tables, and set the width in percentage terms instead of a fixed number of pixels. That way, your page will always fit the screen, without the need to scroll horizontally.

网页可以用表格布局，表格宽度用百分比设定，避免利用固定像素数字。这样网页会永远与显示屏相适应，不会出现水平滚动条。

· Optimize your page to be viewed best at 800x600 (the most popular resolution at the time of this writing).

优化网页，确保在800x600（最常用）分辨率状态下，网页呈现最佳状态。

· Use high contrast for the body of your page: black text on white background, or white text on black background work best.

网页文本内容颜色对比要明显：黑色文本搭配白色背景，或者白色文本搭配黑色背景。

· Don't use too many different fonts in one page. Also, avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Verdana is the most web-friendly font, since it is wide, clean and easy to read.

网页避免出现太多字体，同时避免使用小字号的serif字体（例如Times Roman），这样的字体出现在电脑显示屏中，不便于阅读。Verdana是一种最适合网站的字体，因为它宽度大、整洁、易于阅读。

· Avoid long blocks of text. Use tools that facilitate scanability, like bullets, subtitles, highlighted keywords, hyperlinks, etc.

避免出现大段文字。利用有助于用户浏览网站的工具，比如，点式列表、副标题、要害词以及超链接等等。

· Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, etc.

网站避免出现以下特征：数字计数器、大量感叹词、全部大写字母、全部文本内容居中、大量动画图片、复杂的背景等等。

· Don't use pop-up windows. They distract your visitors and are immediately dismissed as ads.

避免使用弹出框。弹出框类似于广告，会分散访问者的注重力。

· Test your site so that it looks good in different browsers and resolutions.

在不同的浏览器以及分辨率状态下，测试网站。

Tips on Writing for the Web
网站文本内容设计方法

· Write in layman's terms so that everybody can understand your content, unless you're running a technical site for technical people.

避免出现专业术语，保证所有浏览着理解网站内容，除非网站是为技术人员提供专业技术服务的网站。

· Reading from a screen is painful: use 50% less words than you would use on print.

阅读电脑显示器中的文字确实有一定难度，所以网站文字要少于印刷品文字的50%。

· If a page is too long, break it into several pages and link to them.

假如网页太长，就需要把它拆成几张网页，并且与这些网页进行链接。

· Don't use font sizes smaller than 10pt. for the body of your page. Specify your fonts in percentage terms instead of pixels, to let users set their own size preferences using their browser's text view options.

网页文本字号不小于10pt。利用百分比指定网站字体，而避免利用像素，这样用户可以根据自己的喜好，利用浏览器文本选项，确定字号。

· Use a spell checker. Spelling mistakes are embarrassing and hurt credibility.

利用拼写检查程序。网站避免出现尴尬的拼写错误，这样会降低网站信誉度。

Tips to Know Your Customers
了解网站消费者的方法

· Ask for feedback: include a feedback form in your Contact Us page.

征求反馈信息：“联系我们”的网页中出现反馈表格。

· Publish an ezine and include a subscription form in your homepage. Give your customers valuable information and encourage them to contact you.

出版电子杂志，网站主页出现订阅方式。为用户提供有价值信息，鼓励他们与你联系。

· Include polls and other tools to gather market intelligence.

利用投票系统以及其它工具收集营销资料。

Tips on Linking
链接方法

· Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying "click here".

链接应该是描述性的，应该说明用户链接的地址，而不要仅仅出现“点击这儿”。

· Don't underline anything that is not a link.

非链接内容，不能出现下划线。

· Underline your links and use a consistent color for them across your site (preferably blue).

网站链接内容应该出现下划线，并且网站所有链接内容的下划线颜色应该相同。

· Use a different color for visited links, so that your visitors know where they've been (preferably purple or a more subdued tone of the unvisited links color).

已访问的链接颜色应该不同，这样访问者可以了解已经浏览过哪些内容（未访问的链接最好使用紫色或者其它比较柔和的颜色），

· When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link.

当与Excel、Word、Acrobat等非HTML文件链接时，可以在链接四周增加一个小图标，这样更明显。

· Don't link to "under construction" pages.

避免出现与“在建中”网页的链接。

· Make sure that your links work and that you don't have broken links. There are free online tools that can help you with this.

确保链接的有效性，避免出现无效链接，这时你可以利用网上的免费工具。

· If you use graphic links, don't forget to use the ALT attribute. The ALT attribute should describe what are you linking to.

运用图片链接时，使用ALT标签。ALT标签应该说明你所链接的内容。

Tips on how to use graphics
利用图片的方法

· Optimize your graphics. Use only .gif and .jpg formats. Make your image files as small as possible while maintaining acceptable quality. Use a free online graphics optimization tool.

优化图片。图片最好只利用.gif与.jpg格式，在保证图片质量前提下，尽量压缩文本。你可以使用网上提供的免费图片优化工具。

· Use thumbnails (miniature versions of a picture) and make them clickable to the actual size picture.

使用图片的缩小版本，并且使用户可以与它们的原版本链接。

· Avoid graphics that look like ads. People ignore them.

避免出现与广告外形相似的图片，网站访问者会忽视这些图片。

· Use the ALT attribute on pictures, even the image is not a link. It helps users with disabilities and people who have turned off graphics.

利用图片的ALT属性，即使图片不可以链接。这样有助于不喜欢图片的用户浏览网站。

Tips to optimize your site for the search engines:
网站的搜索引擎优化

· Create short, descriptive page titles, to entice search engine users to click on your links.

创建简短、描述性的网页标题，促使搜索引擎用户点击网站链接。

· Create a site map containing all your pages, and link to it directly from your homepage. Search engine robots will follow the link to your site map and will most likely add all your pages to the index.

创建包含所有网页的站点地图，并且与主页直接进行链接。搜索引擎机器人会根据链接浏览站点地图，把所有网页添加到索引中。

· Decide what the two or three main keywords are for each page (the words you believe search engine users will type to find your page) and repeat them often in your page title, description meta tag and page body.

确定每张网页的2-3个要害词（你认为用户会键入搜索引擎，寻找网页的词语），并且确保要害词经常出现在网页标题、叙述meta标签以及网页文字内容中。

· Create a Links page and call it Resources. In it, place links to those sites that have agreed to place a reciprocal link to your page. The more inbound links you have from quality sites with a topic related to your site, the better your site will rank with the search engines.

创建链接页面。在链接页面中，与同意与本网站链接的其它网站进行链接。假如信誉度高的网站与本网站链接内容越多，那么本网站在搜索引擎中的排名就会越高

· Use more text than graphics, and minimize the use of Flash and JavaScript. Search engines heavily favor text and will crawl and index your site faster.

网站多使用文字内容，尽量减少使用图片、Flash、JavaScript。搜索引擎更喜欢文字内容，可以更快对网站做索引。

分享：人机交互界面设计的三个工作流程
在人和机器的互动过程（HumanMachineInteraction）中，有一个层面，即我们所说的界面（interface）。从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等