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