網站設計的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）。從心理學意義來分，界面可分為感覺（視覺、觸覺、聽覺等