UI 簡單說 就是 人機介面 user interface的縮寫
以下是WEBUI設計的相關 行業準則
WEBUI的特徵 ：
1. 感官體驗：呈現給用戶視聽上的體驗，強調舒適性
2. 交互體驗：呈現給用戶操作上的體驗，強調易用、可用性
3. 閱讀體驗：呈現給用戶閱讀上的體驗，強調吸引性
4. 情感體驗：呈現給用戶心理上的體驗，強調友善性
5. 信任體驗：呈現給用戶的信任體驗，強調可靠性
2.1 WEBUI整體準則的制定
WEBUI的整體準則也從以下四個方面入手：
1. 規範性
2. 合理性
3. 一致性
4. 界面定制性
一、WEBUI的設計規範
WEBUI也要遵循一致性的準則，其目標與GUI一致：
1. 便於用戶操作
2. 運用戶感覺到統一、規範，在運用軟件的流程中愉快輕輕鬆松的完成操作，提高對軟件的認知
3. 降低培訓、支撐成本，不必花費較多的人力對客戶執行 逐個指導
二、WEBUI布局的合理性
WEBUI界面的合理性直接影響到軟件系統的可用性，下面將從多個方面講述WEBUI的布局特徵 ：
1.設計風格：契合目標客戶的審美習性，並具有必須的引導性
2.頁面布局：重點突出，主次分明，圖文並茂
3. LOGO：確保logo的保衛空間，確保品牌的清晰展示而又不占據過分空間
4.頁面導航：導航條清晰明了、突出，層級分明
5.圖標運用：簡潔、明了、易懂、精確，與頁面整體風格統一
6.圖片展示：比例協調、不變形，圖片清晰。圖片排列既不過於密集，也不會過於疏遠
7.動畫成效：與主畫面相協調，打開速度快，動畫成效節奏適中，不幹擾主畫面閱讀
編緝推選閱讀以下文章
- 界面設計的行業準則總結-GUI設計的相關 行業準則
- 界面設計的行業準則總結---報表的規範
8.頁面色彩：遵循GUI界面顏色準則，主色調+輔助色不超過三種顏色
9.頁面底色：所選顏色不能 干擾主體頁面的閱讀
三、WEBUI風格的一致性
WEBUI的一致性與GUI大同小義，也指相似的信息表現要領，如在字體、標籤風格、顏色、術語、顯示錯誤信息等方面確保一致，但不一樣的是WEBUI對閱讀器有必須的要求。
. 在不一樣分辨率下的美觀程度
WERUI要求所有頁面要在800*600，1024*768兩種分辨率下運行議決
2.在不一樣版本閱讀器上的運行
比方要求在IE5.0，5.5以及6.0下運行議決而不發生錯誤
3.在不一樣廠商的閱讀器上運行
比方軟件系統能夠在IE、Firfox、Google等閱讀器上正常運行
4.WEBUI的菜單、地址欄、圖標、狀態欄等風格、位置要一致
5.遵循GUI風格一致性的2-9所規定的一致性
四、WEBUI的可定制性
WEBUI的可定制性大致可分為以下多個特徵：
1.界面元素可定制
准許用戶定義工具欄、狀態欄、地址欄等能不能顯示，工具欄顯示在界面上的位置；准許用戶定義菜單的位置等。
2.工具欄可定制
不一樣用戶對常用工具的運用是不一樣的，因此准許用戶建立新的工具欄，挑選要顯示的工具欄，定製工具欄上的按鈕等功能在軟件系統中時常被用到
2.2 WEBUI所包含各類元素準則的定制
WEBUI所包含各類元素：
在WEBUI中頁面所包含元素與GUI有所不一樣，大至分為頁面、界面控件、菜單、圖標、鼠標、文字、幫助，見下圖2-1為WEBUI的基本頁面構成
一、WEBUI頁面的準則
根據WEBUI的特徵，下面列出十六個點來分別描述頁面的制定：
1.頁面大小：適合多數閱讀器閱讀，如15寸、17寸、19等顯示器
2.按鈕配置：對於交互性的按鈕必須清晰突出，以確保用戶能夠清楚地點擊
3.點擊提示：點擊閱讀過的信息顏色須要顯示為不一樣的顏色，以區分於未閱讀內容，防止重複閱讀
4.錯誤提示：若表單填寫錯誤，應指明填寫錯誤之處，並保存原有填寫內容，降低重複工作
5.顯示路徑：無論用戶閱讀到哪一個層級，哪一個頁面，都能夠清楚知曉看到該頁面的路徑
6.欄目標命名：與欄目內容精確相關 ，簡潔清晰，不宜過於深奧
7.欄目標層級：最多不超過三層，導航清晰
8.內容的分類：同一欄目下，不一樣分類區隔清晰，不要互相包含或混淆
9.頁面的長度：配置必須的頁面長度，防止頁面過長而影響閱讀
10.分頁閱讀：對於較長的內容能夠執行 分頁閱讀
11.表單填寫：盡量採用下拉挑選，需填寫部分需註明要填寫內容，並對必填字段作出限定
12.頁面速度：正常情況下,盡量確保頁面在5秒內打開，對於大型軟件能夠適當的延長等待時間
13.頁面刷新：盡量降低頁面的刷新率，或採用無刷新技能
14.新開窗口：盡量降低新開的窗口，以防止開過多的無效窗口，配置彈出窗口的關上功能
15.網頁地圖：為用戶提供清晰的網頁指引
16.能夠復用一些GUI窗口的相關 準則，如菜單、標籤、按鈕的位置、字體、顏色等準則
二、WEBUI其他元素的準則
WEBUI的其他元素的制定准則，包含界面控件、菜單、圖標、鼠標、文字、幫助信息等與GUI一致，並且可根據詳細情況酌情予以改動。
出處: http://38453.blog.51cto.com/28453/203118 編緝推選閱讀以下文章
- 界面設計的行業準則總結-GUI設計的相關 行業準則
- 界面設計的行業準則總結---報表的規範
