界面設(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-1WEBUI的基本頁面構(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ù)具體情況酌情予以改變。