當談到設計和建立網站時，似乎從來都感覺不夠快。考慮到快節奏，很多小的細節經常會脫離設計過程。雖然這些細節可能微不足道，但是可能將網站從漂亮帶到真正的優秀。
這些細節往往容易錯過，因為他們不會影響網站的整體外觀和感覺。問題是，這些細節往往會如影隨形。而她恰恰是對使用者體驗忠誠度的體現。
下面列出10個關鍵元素，記住它，你將避免走回頭路。
1、連結（link）
設定連結狀態的不同風格，這是基礎也是必須。你可能吃驚細節被忽略的次數。包括下面列舉的頁面上所有連結的狀態。
Normal（常態）
這是連結的預設狀態。滑鼠還沒有懸停、點選，或是轉向向URL的時候，這個連結格式大部分的設計師會考慮到。
Visited（已訪問）
這個連結是滑鼠沒有懸停或是點選，但是已經被使用者訪問過。
Active（活躍）
這是正在被使用者點選的狀態。絕大部分開發者會複製Hover（懸停）狀態到這裡。
Hover（懸停）
Hover狀態是滑鼠經過、並未點選。你忽略它了嗎？
最常被忽略的情況是，連結的各種狀態沒有計劃到網站的所有地方。比如很多網站針對淺色背景會有深色的主體（body），但是在頁尾卻恰恰相反。
在Full Moon BBQ，我們看到基本的紅色連結在內容區域，基本的白色連結在下面的頁尾處。非常小的細節，但是毫無疑問很重要。
2. 表單（Forms）
對於很多開發者，表單的配置是重要的，不可能被忽略的。然而，還有許多開發者在事後才想到。
上述後者認為表單僅是代表將使用者轉為客戶的路徑，並且沒有適當的計劃和設計，這些表單的實用性將大大降低。準備好這些元素是重要的，即使被看來要比顏色、圖片、品牌等更小的緊迫性。
下面的2個元素，要做重點考量。
Form label（表單標籤）
表單是收集使用者資料的途徑，而且使用者是自願提交個人資料的。準確的目的，適當的提醒使用者，是聰明的做法。
Input fields and labels（輸入域和標籤）
其次，頁面表單輸入域的佈局，標籤樣式及導向性。
當使用預設值，表單會看起來很糗。但是進行恰當的準備，網站會看起來會非常有效果。從好的規劃開始，一起看看下面的例子吧。
Awesome 上的商業型表單很清晰。整個頁面的目的和使命被充分考慮到。從標題和介紹，到每個域的佈局，標籤和控制風格，可以說是模板。
3. 按鈕行為（Button behavior）
按鈕可使用者實現各種目的，貫穿整個網站。但是他們的各種狀態，還是容易被忽略。
Default（預設）
按鈕的預設狀態，等待被點選。多數設計師記得住這個，忘記了其他。
Hover（懸停）
懸停狀態，當使用者滑鼠經過按鈕時的狀態。該狀態提示使用者按鈕是可觸發的，這一點很有幫助。
Click（點選）
當使用者點選按鈕，狀態來進行提示。這樣的視覺提示可以幫助降低使用者的困惑。
Disabled（失效）
按鈕的失效狀態，可能是最少被使用的。但是對於開發者卻是很有幫助，除非你已經為按鈕準備好了驗證過程。
它非常像連結的各種狀態，一定要考慮整站的按鈕狀態的運用。從彈出框（pop-up）、登陸框（log-in），到搜尋域、報名表單等，所有的按鈕需要有一致性的風格。
4. 表單驗證（Form validation）
網站與使用者的要求或錯誤的溝通形式，也是非常重要。下面的三個核心問題需要考慮。
Required fields(請求域)
所有的請求域應該被提示，一般會有星號標記。
Real-time validation（實時驗證）
使用者完成表單就會有驗證，這種型別的驗證要將各種資料處理資訊儘快通知使用者。你可以藉助 jQuery 驗證外掛:
Post-back validation（回發驗證）
該型別驗證發生在使用者已經提交表單，與實時驗證的風格可重複，但是另外一個選項是將所有問題歸於一條資訊，就像Moo：
5. 狀態訊息(錯誤、警告、確認等)
使用者在網站上執行一些動作，一般需要一些型別的反饋。這很像提交表單後的場景。但是很多其他的事件也會發生。規劃好你站點的訊息機制，是良好的互動性的需要。
在Life Today上，我看到一些驗證訊息，可作為錯誤訊息，風格符合全球各地。對顏色和圖示進行少量更改，也可以用作警告，真是確認訊息。
6. 擴充背景到更大的螢幕
依據網站風格的不同，背景元素可有更好的運用。絕大部分背景很簡單，不需要更多的準備，但是也存在複雜的需要（梯度、圖案和意象）。
考慮到大的顯示器已經非常普及，大部分設計師僅規劃960畫素寬度，忽略了大量的顯示器。如果你的背景複雜，你理當擴充至更大的螢幕。
下面是我建立的例子，木式背景可做更大的延伸。
7. HTML基本元素
HTML基本元素是基礎，並且不能被忽略。但是在許多市場為導向的網站上，雜亂的佈局，迥異的視覺風格，基本元素都被遺忘。
標準網頁模板規劃好，很重要，基本元素包括：段落，標題1至6，整齊的列表，列表資料，表單域，粗體文字，斜體文字。
我在很多網站工作過，總結樣式如下，以助開發者。
8. 網站郵件（Website emails）
我從未見任何設計師規劃網站郵件，它很容易被忽略是因為它不是網站核心焦點。然而郵件是提升和擴充服務的強大工具。
我的建議是在規劃階段，仔細檢視站點內容。
- * 郵件列表註冊確認。
- * 登記確認。
- * 表單完成確認（比如一聯絡表單）
- * 購買後的訂單驗證
如果你真想做好網站郵件，那麼還要準備好郵件營銷模板。
9. 頁面拉伸
頁面拉伸以適應內容的改變，很少用，但是也很重要。例子如下：
網站Full Moon BBQ有個緊湊的主頁，每個元素都有特定的尺寸和位置。那麼如果決定加長歡迎資訊或者增加圖片，將會發生什麼？幸運的是，他們考慮了這一點。看明白了嘛？可以登入網站一試。
準備好多內容的佈局的版本，你忽略了嗎？
10. 動畫：彈出框、工具提示、轉換等
標準的HTML/CSS網站，動畫和轉換很容易被忽略。一旦忽略，效果會很不合適。
列舉如下，請謹記。
Tooltips（工具提示）
當滑鼠經過某元素時的提示。
Image rotators（圖片旋轉）
首頁幻燈片至今仍很流行，對於轉換與風格可有更多的選項。
Lightbox（燈箱）
規劃的風格，不僅燈箱，還有轉換。
每個動畫元素都有明顯的視覺風格，比如適合它本身。
為什麼很在乎？
這裡列出的大部分的元素，對於開發者比設計師更有用。如果你提前準備好這些元素，開發者會對設計師的工作另眼相看。如果你是開發者，同樣做到這一點，那麼老闆對你也會是刮目相看。
記住並做到這些，意味著你至少享受到了web設計工作一半的樂趣。
原文：webdesignerdepot 譯文：開源中國