网站无需会员注册及管理系统，但对管理后台及产品页面要求较高，考虑到本人的经济状况及对 B2B 或网络广告的承受能力，网站需具备基本的 SEO 优化能力（只针对国外 Google 和 Bing 等主流英文搜索引擎），后台管理功能需实现后台编辑公司介绍页面，自定义页面，及联系方式以及网页 Footer 等页面而无需通过更改 PHP 页。

后台管理系统的编辑器需采用 Wordpress 使用的 TinyMCE ，用来编辑产品介绍、及上述提到的页面等，产品展示页、公司介绍页面等需自动生成 HTML （为了更好的SEO，为了省钱)。网站采用 UTF-8 编码，整个网站配色等做到清新、美观、大方，导航明确即可。

具体要求如下：

1. 后台采用中文语言即可，无需英文；前台中英双语，默认为英语。
2. 后台可以自己编辑的页面需可以自动生成中英两种语言的 HTML 页面，比如公司介绍、产品展示页。
3. 对后台“添加产品”页面的详细要求：

1）功能：添加产品信息，并在前台“产品展示”页面显示；
2）模块：产品名称、1-3个产品关键词、产品分类、1-3 个产品图片上传，产品简要描述，产品详细描述；

4. 对 SEO 的详细要求

1） 重要性：这是网站的重中之重，设计时必须考虑潜在的 SEO 效果。自动生成的 HTML 页面需要规范，可以通过 W3C 验证最好。需支持主流的浏览器如 IE6-IE8 ，Firefox 3，Google Chrome 等。
2）细节，以下举例说明

A) 如果我的网站域名是 http://samplecompany.com ，那么公司的介绍页面的 URL 为 http://samplecompany.com/about_sample_company ；如果我要添加一个分类为 Sample Directory 的产品分类，那么生成后的具体产品页面的 URL 为： http://samplecompany.com/sample_directory/sample_products.html ，如果产品分类有下级分类，那生成的页面的 URL 控制在3级以内，如我有一个分类为 Directory 的分类，该分类下有一个 Subdectory 的子分类，那么生成的 URL 为 http://samplecompany.com/sample_subdirectory/sample_product.html
B) 将上述后台中“添加产品”页面的模块中的产品名称自动转化成 HTML 页面的产品图片的 <alt> 标签，将 1-3 个关键词自动转换成 HTML 页面的 <meta name=”keywords”> 标签，将产品简要描述内容自动转换成  <meta name=”description”> 标签。

5. 对产品展示页面的要求

1）重要性：本页的网页设计质量决定 SEO 效果，进而决定本人的外贸销售业绩，因此事关重大。
2）要求：除了上述本人提到的要求之外，另要求如下：

A）本页严禁用 Flash 来展示图片，尤其是某种产品添加 3 张产品图片的情况之下，需要用 div+css 技术代替之。
B）本页的导航至关重要，在显著位置提示访问者 Home>>Sample Directory –>>Sample Subdirectory>>Sample Product
C）产品展示完毕之后需有联系表单或者用醒目的链接指向联系页面
D）图片展示相同分类下的其它产品
E）图片展示的部分尽量考虑用户体验，例如，多个图片的情况下，只加载一个图片的缩略图，待鼠标指针指向缩略图的时候加载大图

6. 尽可能考虑更多的 SEO 细节

如果你/你的公司可以实现上述我提到的要求，请发邮件至 linux.usrs[at]gmail.com ；如果你不懂或者不能实现上述要求，请别烦我；考虑到本人的承受能力，如果你的报价以 “万” 为单位，也请别骚扰我。

特此感谢！

© Charles Peng for 嘉佑中文博客 on 2009/09/07 | 5 comments | Add to del.icio.us
Permalink: http://pengjiayou.com/blog/foreign-trading-website-design
Post tags: 网站设计

· 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 800×600 (the most popular resolution at the time of this writing).

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

· 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。搜索引擎更喜欢文字内容，可以更快对网站做索引。via

© Charles Peng for 嘉佑中文博客 on 2008/02/12 | No comment | Add to del.icio.us
Permalink: http://pengjiayou.com/blog/50-tips-on-web-design
Post tags: Tips, Web Design, 网站设计