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