界面設(shè)計(jì)的行業(yè)標(biāo)準(zhǔn)總結(jié)-- WEBUI設(shè)計(jì)的相關(guān)行業(yè)標(biāo)準(zhǔn)
WEBUI的特點(diǎn)：
1. 感官體驗(yàn)：呈現(xiàn)給用戶視聽上的體驗(yàn)，強(qiáng)調(diào)舒適性
2. 交互體驗(yàn)：呈現(xiàn)給用戶操作上的體驗(yàn)，強(qiáng)調(diào)易用、可用性
3. 瀏覽體驗(yàn)：呈現(xiàn)給用戶瀏覽上的體驗(yàn)，強(qiáng)調(diào)吸引性
4. 情感體驗(yàn)：呈現(xiàn)給用戶心理上的體驗(yàn)，強(qiáng)調(diào)友好性
5. 信任體驗(yàn)：呈現(xiàn)給用戶的信任體驗(yàn)，強(qiáng)調(diào)可靠性
2.1 WEBUI整體標(biāo)準(zhǔn)的制定
WEBUI的整體標(biāo)準(zhǔn)也從以下四個方面入手：
1. 規(guī)范性
2. 合理性
3. 一致性
4. 界面定制性
一、WEBUI的設(shè)計(jì)規(guī)范
WEBUI也要遵循一致性的準(zhǔn)則，其目的與GUI一致：
1. 便于用戶操作
2. 使用戶感覺到統(tǒng)一、規(guī)范，在使用軟件的過程中愉快輕松的完成操作，提高對軟件的認(rèn)知
3. 降低培訓(xùn)、支持成本，不必花費(fèi)較多的人力對客戶進(jìn)行逐個指導(dǎo)
二、WEBUI布局的合理性
WEBUI界面的合理性直接影響到軟件系統(tǒng)的可用性，下面將從幾個方面講述WEBUI的布局特點(diǎn)：
1.設(shè)計(jì)風(fēng)格：符合目標(biāo)客戶的審美習(xí)慣，并具有一定的引導(dǎo)性
2. 頁面布局：重點(diǎn)突出，主次分明，圖文并茂
3. LOGO：確保logo的保護(hù)空間，確保品牌的清晰展示而又不占據(jù)過分空間
4.頁面導(dǎo)航：導(dǎo)航條清晰明了、突出，層級分明
5.圖標(biāo)使用：簡潔、明了、易懂、準(zhǔn)確，與頁面整體風(fēng)格統(tǒng)一
6.圖片展示：比例協(xié)調(diào)、不變形，圖片清晰。圖片排列既不過于密集，也不會過于疏遠(yuǎn)
7.動畫效果：與主畫面相協(xié)調(diào)，打開速度快，動畫效果節(jié)奏適中，不干擾主畫面瀏覽
8.頁面色彩：遵循GUI界面顏色標(biāo)準(zhǔn)，主色調(diào)+輔助色不超過三種顏色
9.頁面底色：所選顏色不能干擾主體頁面的閱讀
三、WEBUI風(fēng)格的一致性
WEBUI的一致性與GUI大同小義，也指相同的信息表現(xiàn)方法，如在字體、標(biāo)簽風(fēng)格、顏色、術(shù)語、顯示錯誤信息等方面確保一致，但不同的是WEBUI對瀏覽器有一定的要求。
1. 在不同分辨率下的美觀程度
WERUI要求所有頁面要在800*600，1024*768兩種分辨率下運(yùn)行通過
2.在不同版本瀏覽器上的運(yùn)行
例如要求在IE5.0，5.5以及6.0下運(yùn)行通過而不發(fā)生錯誤
3.在不同廠商的瀏覽器上運(yùn)行
例如軟件系統(tǒng)可以在IE、Firfox、Google等瀏覽器上正常運(yùn)行
4.WEBUI的菜單、地址欄、圖標(biāo)、狀態(tài)欄等風(fēng)格、位置要一致
5.遵循GUI風(fēng)格一致性的2-9所規(guī)定的一致性
四、WEBUI的可定制性
WEBUI的可定制性大致可分為以下幾個特性：
1.界面元素可定制
允許用戶定義工具欄、狀態(tài)欄、地址欄等是否顯示，工具欄顯示在界面上的位置；允許用戶定義菜單的位置等。
2.工具欄可定制
不同用戶對常用工具的使用是不同的，因此允許用戶建立新的工具欄，選擇要顯示的工具欄，定制工具欄上的按鈕等功能在軟件系統(tǒng)中經(jīng)常被用到
2.2 WEBUI所包含各類元素標(biāo)準(zhǔn)的定制
WEBUI所包含各類元素：
在WEBUI中頁面所包含元素與GUI有所不同，大至分為頁面、界面控件、菜單、圖標(biāo)、鼠標(biāo)、文字、幫助，見下圖2-1為WEBUI的基本頁面構(gòu)成
一、WEBUI頁面的標(biāo)準(zhǔn)
根據(jù)WEBUI的特性，下面列出十六個點(diǎn)來分別描述頁面的制定：
1.頁面大?。哼m合多數(shù)瀏覽器瀏覽，如15寸、17寸、19等顯示器
2.按鈕設(shè)置：對于交互性的按鈕必須清晰突出，以確保用戶可以清楚地點(diǎn)擊
3.點(diǎn)擊提示：點(diǎn)擊瀏覽過的信息顏色需要顯示為不同的顏色，以區(qū)分于未閱讀內(nèi)容，避免重復(fù)閱讀
4.錯誤提示：若表單填寫錯誤，應(yīng)指明填寫錯誤之處，并保存原有填寫內(nèi)容，減少重復(fù)工作
5.顯示路徑：無論用戶瀏覽到哪一個層級，哪一個頁面，都可以清楚知道看到該頁面的路徑
6.欄目的命名：與欄目內(nèi)容準(zhǔn)確相關(guān)，簡潔清晰，不宜過于深奧
7.欄目的層級：最多不超過三層，導(dǎo)航清晰
8.內(nèi)容的分類：同一欄目下，不同分類區(qū)隔清晰，不要互相包含或混淆
9.頁面的長度：設(shè)置一定的頁面長度，避免頁面過長而影響閱讀
10.分頁瀏覽：對于較長的內(nèi)容可以進(jìn)行分頁瀏覽
11.表單填寫：盡量采用下拉選擇，需填寫部分需注明要填寫內(nèi)容，并對必填字段作出限制
12.頁面速度：正常情況下,盡量確保頁面在5秒內(nèi)打開，對于大型軟件可以適當(dāng)?shù)难娱L等待時間
13.頁面刷新：盡量減少頁面的刷新率，或采用無刷新技術(shù)
14.新開窗口：盡量減少新開的窗口，以避免開過多的無效窗口，設(shè)置彈出窗口的關(guān)閉功能
15.網(wǎng)頁地圖：為用戶提供清晰的網(wǎng)頁指引
16.可以復(fù)用一些GUI窗口的相關(guān)標(biāo)準(zhǔn)，如菜單、標(biāo)簽、按鈕的位置、字體、顏色等標(biāo)準(zhǔn)
二、WEBUI其他元素的標(biāo)準(zhǔn)
WEBUI的其他元素的制定標(biāo)準(zhǔn)，包括界面控件、菜單、圖標(biāo)、鼠標(biāo)、文字、幫助信息等與GUI一致，并且可根據(jù)具體情況酌情予以改變。