如果覺得我的技術文章還有點讓列為看官汲取之處，

請給我投上寶貴的一篇，以茲鼓勵呵，多謝，多謝！！

本人ID：m13666368773

投票地址：http://vote.blog.csdn.net/item/blogstar/m13666368773

凡投票的朋友，

請第一時間在文章下方評論：“當前票數：XXX+已投票+郵箱：XXX@XXX.com”

稍後會將 <Web應用介面設計規範>PPT版本,發給您。

請稍花點時間，為我投上您手中寶貴的一票，

敬告：我這能看到您的投票“使用者名稱”，請勿虛報！多謝，多謝！！

截至時間：2012-12-30

最近給專案組做了一次Web應用介面設計規範的培訓，共享一下。

Web應用介面設計規範（Design Specification for Web UI）

主講人：ARay

目錄：

一、軟體介面規範的重要性及其目的
二、使用者體驗為何如此重要
三、Web規範體系介紹
四、介面設計開發流程
五、應該遵循的基本原則
六、介面設計規範

一、軟體介面規範的重要性及其目的

    ①使最終設計出來的介面風格一致化，開發編碼人員相互之間開發更輕鬆，遵循統一的操作規範，以標準化的方式設計介面，提高工作效率。減少和改變責任不明，任務不清和由此產生的資訊溝通不暢、反覆修改、重複勞動、效率低下的現象。
    ②產品設計通過規範的方式來達到以使用者為中心的目的。

二、使用者體驗為何如此重要

①日常生活中的遭遇

X員工悲慘的一天：

早晨起來，發現鬧鐘沒有按原先設定響起來。
一邊燒水，一邊穿衣服，臨走前去喝水卻發現水還沒有燒開。
到了地鐵站，發現公交卡沒有錢了。
無奈之下只能去排隊買票。
排了3趟地鐵，終於到公司了，但是你卻遲到了。
結果：儘管你已經非常努力，但是你還是遲到了。
那麼，讓我們看看這一連串
的倒黴事，
是什麼讓我們如此狼狽？

② 什麼是使用者體驗

使用者體驗（user experience）是以使用者為中心的設計中最重要的一個部分，強調的是過程，是軟體對使用者行為產生的反應與使用者期待值要儘可能的一致。

糟糕的使用者介面表現：

  表現一：過分使用各種奇形怪狀、五顏六色的控制元件。
  表現二：介面元素比例失調。比如按鈕巨大無比，其尺寸甚至超過顯示重要內容的文字框的介面。

 
  表現三：介面元素凌亂。比如說，按鈕和文字框擺放地點隨意，該對齊的控制元件對不齊。

  表現四：違背使用習慣。你按F1，它沒有彈出幫助，卻執行了一件絕對出乎你意料的動作。
  表現五：訊息框資訊含糊、混亂。比如軟體彈出一個訊息框。把原本“確定”和“取消”寫成為“是”和“否”，讓使用者不知道什麼意思。
  表現六：還有一種糟糕的使用者介面，乍一看很厲害，實際上完全是缺乏規劃的結果。這種軟體本身的確提供了比較複雜的功能，但對於哪些是常用功能，哪些是很少用到的高階功能，缺乏評估。什麼功能都往介面上擠，佔地方不說，使用者會厭煩，弄不好還會被嚇跑。

③使用者體驗的要素

④   使用者體驗和軟體應用

面對大量的選擇，使用者只能自己想辦法，去決定哪一個軟體系統功能會符合她的要求。
企業開始意識到，提供優質的使用者體驗是一個重要的、可持續的競爭優勢。
使用者體驗形成了客戶對企業的整體印象，界定了企業和競爭對手的差異，並且決定了客戶什麼時候還會再次光顧。

⑤記住你的使用者

以使用者為中心的設計
   -------在開發產品的每一個步驟中，都要把使用者列入考慮範圍內

 考慮使用者體驗
 把它分為各個組成要素
 從不同角度來了解它
        -----通過這些才能確保你控制了決策所造成的全部結果

使用者體驗很重要，最大的理由：它對你的使用者很重要。

協調一致，直觀明瞭，甚至讓人愉快的體驗
-----“一次”每件事都按照正確的方式在工作的體驗。

三、Web規範體系介紹

四、介面設計開發流程

五、應該遵循的基本原則

顯示資訊一致性的原則
以使用者為主導原則
易用性原則
滑鼠與鍵盤一致性原則
系統響應時間原則
出錯資訊和警告原則
資訊顯示原則
資料輸入原則
合理性原則
美觀與協調性原則

①顯示資訊一致性的原則
    無論是控制元件使用，提示資訊措辭，還是顏色、視窗布局風格，遵循統一的標準，做到真正的一致。介面直觀、對使用者透明：使用者接觸軟體後對介面上對應的功能一目瞭然、不需要多少培訓就可以方便使用應用系統。
這樣得到的好處：
 使用者使用起來能夠建立起精確的心裡模型，使用熟練了一個系統介面後，切換到另外一個系統介面能夠很輕鬆的推測出各種功能。
 降低培訓、支援成本，支援人員不用費力逐個指導。
 給使用者統一感覺，不覺得混亂，心情愉快，支援度增加。

②以使用者為主導原則
    明確使用者是所有系統處理的核心，不應該有應用程式來決定處理過程，所以使用者介面應當由使用者來控制應如何工作、如何響應，而不是由開發者按自己的意願把操作流程強加給使用者。

③易用性原則

使用者不用查閱幫助就能知道該介面的功能並進行相關正確的操作。
完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支援快捷方式。
完成同一功能或任務的元素放在集中位置，減少滑鼠移動的距離。
按功能將介面劃分局域塊，用Frame框括起來,並要有功能說明或標題。

介面要支援鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能。
介面上首先應輸入的和重要資訊的控制元件在Tab順序中應當靠前,位置也應放在視窗上較醒目的位置。
同一介面上的控制元件數最好不要超過10個，多於10個時可以考慮使用分頁介面顯示。

分頁介面要支援在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab
預設按鈕要支援Enter操作，即按Enter後自動執行預設按鈕對應操作。
可寫控制元件檢測到非法輸入後應給出說明並能自動獲得焦點。
核取方塊和選項框按選擇機率的高底而先後排列。
核取方塊和選項框要有預設選項，並支援Tab選擇。
專業性強的軟體要使用相關的專業術語，通用性介面則提倡使用通用性詞眼。

④滑鼠與鍵盤一致性原則
   儘量遵循可不用滑鼠的原則：應用中的功能只用鍵盤也應當可以完成。但是，許多滑鼠的操作，如雙擊、拖動物件等，並不能簡單地用鍵盤來模擬即可實現，此類操作可適當增加操作按鈕。
⑤系統響應時間原則

    系統響應時間應該適中，響應時間過長，使用者就會感到不安和沮喪，而響應時間過快也會影響到使用者的操作節奏，並可能導致錯誤。因此在系統響應時間上堅持如下原則：

 0-5秒滑鼠顯示成為沙漏；
 5秒以上顯示處理視窗，或顯示進度條；
 一個長時間的處理完成時應給予完成警告資訊。

⑥出錯資訊和警告原則

    出錯資訊和警告是指出現問題時系統給出的壞訊息，對於出錯資訊和警告應該遵循以下原則：

 資訊以使用者可以理解的術語描述；
 資訊簡明扼要，指出出錯原因並提供解決辦法提示。

⑦資訊顯示原則

資訊顯示遵循以下原則：
 只顯示與當前使用者語境環境有關的資訊；
 不要用資料將使用者包圍，使用便於使用者迅速吸取資訊的方式表現資訊；
 使用一致的標記、標準縮寫和顏色，顯示資訊的含義應該非常明確，使用者       
 不必再參考其它資訊源；
 產生有意義的出錯資訊；
 使用縮排和文字來輔助理解；
 使用視窗分隔控制元件分隔不同型別的資訊；
 高效地使用顯示器的顯示空間，但要避免空間過於擁擠。

⑧資料輸入原則

資料輸入遵循以下原則：
儘量減少使用者輸入動作的數量；
維護資訊顯示和資料輸入的一致性；
互動應該是靈活的，對鍵盤和滑鼠輸入的靈活性提供支援；
在當前動作的語境中使不合適的命令不起作用；
讓使用者控制互動流，使用者可以跳過不必要的動作、改變所需動作的順序
（如果允許的話）以及在不退出系統的情況下從錯誤狀態中恢復；
為所有輸入的動作提供幫助；
消除冗餘輸入。可能的話提供預設值、絕不要讓使用者提供程式中可以自 
動獲取或計算出來的資訊。
⑨合理性原則

  螢幕對角線相交的位置是使用者直視的地方，正上方四分之一處為易吸引
使用者注意力的位置，在放置窗體時要注意利用這兩個位置。

⑩美觀與協調性原則

  介面應該大小適合美學觀點，感覺協調舒適，能在有效的範圍內吸引使用者的注意力。

長寬接近黃金點比例，切忌長寬比例失調、或寬度超過長度。
佈局要合理,不宜過於密集，也不能過於空曠，合理的利用空間。
按鈕大小基本相近，忌用太長的名稱，免得佔用過多的介面位置。
按鈕的大小要與介面的大小和空間要協調。
避免空曠的介面上放置很大的按鈕。
放置完控制元件後介面不應有很大的空缺位置。
字型的大小要與介面的大小比例協調, 通常使用的字型中宋體9-12較為美觀，很少使用超過12號的字型。

前景與背景色搭配合理協調，反差不宜太大。常用色考慮使用Windows介面色調。
如果使用其他顏色，主色要柔和，具有親和力，堅決杜絕刺目的顏色。
大型系統常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。

介面風格要保持一致，字的大小、顏色、字型要相同，除非是需要藝術處理或有特殊要求的地方。
如果窗體支援最小化和最大化或放大時，窗體上的控制元件也要隨著窗體而縮放；切忌只放大窗體而忽略控制元件的縮放。
通常父窗體支援縮放時，子窗體沒有必要縮放。
如果能給使用者提供自定義介面風格則更好，由使用者自己選擇顏色、字型等。

六、介面設計規範