技術(shù)資訊
界面設(shè)計(jì)測(cè)試規(guī)范
2008-08-22 11:37:00
老早前收藏的一篇文章了,發(fā)出來一起學(xué)習(xí)下
目前流行的界面風(fēng)格有三種方式:多窗體、單窗體以及資源管理器風(fēng)格,無論那種風(fēng)格,以下規(guī)則是應(yīng)該被重視的。
1.易用性:
按鈕名稱應(yīng)該易懂,用詞準(zhǔn)確,屏棄沒楞兩可的字眼,要與同一界面上的其他按鈕易于區(qū)分,能望文知意最好。理想的情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)的正確操作。
易用性細(xì)則:
- 完成相同或相近功能的按鈕用Frame框起來,常用按鈕要支持快捷方式。
- 完成同一功能或任務(wù)的元素放在集中位置,減少鼠標(biāo)移動(dòng)的距離。
- 按功能將界面劃分局域塊,用Frame框括起來,并要有功能說明或標(biāo)題。
- 界面要支持鍵盤自動(dòng)瀏覽按鈕功能,即按Tab鍵的自動(dòng)切換功能。
- 界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置。
- 同一界面上的控件數(shù)最好不要超過勞過度10個(gè),多于10個(gè)時(shí)可以考慮使用分頁界面顯示。
- 分頁界面要支持在頁面間的快捷切換,常用組合快捷鍵Ctrl+Tab
- 默認(rèn)按鈕要支持Enter及選操作,即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作。
- 可寫控件檢測(cè)到非法輸入后應(yīng)給出說明并能自動(dòng)獲得焦點(diǎn)。
- Tab鍵的順序與控件排列順序要一直,目前流行總體從上到下,同時(shí)行間從左到右的方式。
- 復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。
- 復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng),并支持Tab選擇。
- 選項(xiàng)數(shù)相同時(shí)多用選項(xiàng)框而不用下拉列表框。
- 界面空間較小時(shí)使用下拉框而不用選項(xiàng)框。
- 選項(xiàng)數(shù)叫少時(shí)使用選項(xiàng)框,相反使用下拉列表框。
- 專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語,通用性界面則提倡使用通用性詞眼。
2.規(guī)范性:
通常界面設(shè)計(jì)都按Windows界面的規(guī)范來設(shè)計(jì),即包含"菜單條、工具欄、工具廂、狀態(tài)欄、滾動(dòng)條、右鍵快捷菜單"的標(biāo)準(zhǔn)格式,可以說:界面遵循規(guī)范化的程度越高,則易用性相應(yīng)的就越好。小型軟件一般不提供工具廂。
規(guī)范性細(xì)則:
- 常用菜單要有命令快捷方式。
- 完成相同或相近功能的菜單用橫線隔開放在同一位置。
- 菜單前的圖標(biāo)能直觀的代表要完成的操作。
- 菜單深度一般要求最多控制在三層以內(nèi)。
- 工具欄要求可以根據(jù)用戶的要求自己選擇定制。
- 相同或相近功能的工具欄放在一起。
- 工具欄中的每一個(gè)按鈕要有及時(shí)提示信息。
- 一條工具欄的長(zhǎng)度最長(zhǎng)不能超出屏幕寬度。
- 工具欄的圖標(biāo)能直觀的代表要完成的操作。
- 系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置。
- 工具欄太多時(shí)可以考慮使用工具廂。
- 工具箱要具有可增減性,由用戶自己根據(jù)需求定制。
- 工具箱的默認(rèn)總寬度不要超過屏幕寬度的1/5。
- 狀態(tài)條要能顯示用戶切實(shí)需要的信息,常用的有:
目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯(cuò)誤信息等,如果某一操作需要的時(shí)間較長(zhǎng),還應(yīng)該顯示進(jìn)度條和進(jìn)程提示。 - 滾動(dòng)條的長(zhǎng)度要根據(jù)顯示信息的長(zhǎng)度或?qū)挾饶芗皶r(shí)變換,以利于用戶了解顯示信息的位置和百分比。
- 狀態(tài)條的高度以放置五好字為宜,滾動(dòng)條的寬度比狀態(tài)條的略窄。
- 菜單和工具條要有清楚的界限;菜單要求凸出顯示,這樣在移走工具條時(shí)仍有立體感。
- 菜單和狀態(tài)條中通常使用5號(hào)字體。工具條一般比菜單要寬,但不要寬的太多,否則看起來很不協(xié)調(diào)。
- 右鍵快捷菜單采用與菜單相同的準(zhǔn)則。
3.幫助設(shè)施:
系統(tǒng)應(yīng)該提供詳盡而可靠的幫助文檔,在用戶使用產(chǎn)生迷惑時(shí)可以自己尋求解決方法。
幫助設(shè)施細(xì)則:
- 幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致。(我們的系統(tǒng)幫助文檔都是系統(tǒng)的祖先時(shí)期的說明,讓人困惑)。
- 打包新系統(tǒng)時(shí),對(duì)作了修改的地方在幫助文檔中要做相應(yīng)的修改。
- 操作時(shí)要提供及時(shí)調(diào)用系統(tǒng)幫助的功能。常用F1。
- 在界面上調(diào)用幫助時(shí)應(yīng)該能夠及時(shí)定位到與該操作相對(duì)的幫助位置。也就是說幫助要有即時(shí)針對(duì)性。
- 最好提供目前流行的聯(lián)機(jī)幫助格式或HTML幫助格式。
- 用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助,當(dāng)然也應(yīng)該提供幫助主題詞。
- 如果沒有提供書面的幫助文檔的話,最好有打印幫助的功能。
- 在幫助中應(yīng)該提供我們的技術(shù)支持方式,一旦用戶難以自己解決可以方便的尋求新的幫助方式。
4.合理性:
屏幕對(duì)角線相交的位置是用戶直視的地方,正上方四分之一處為易吸引用戶注意力的位置,在放置窗體時(shí)要注意利用這兩個(gè)位置。
合理性細(xì)則:
- 父窗體或主窗體的中心位置應(yīng)該在對(duì)角線焦點(diǎn)附近。
- 子窗體位置應(yīng)該在主窗體的左上角或正中。
- 多個(gè)子窗體彈出時(shí)應(yīng)該依次向右下方偏移,以顯示窗體出標(biāo)題為宜。
- 重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。
- 錯(cuò)誤使用容易引起界面退出或關(guān)閉的按鈕不應(yīng)該放在易點(diǎn)位置。橫排開頭或最后與豎排最后為易點(diǎn)位置。
- 與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽(Windows中用灰色顯示,沒法使用該按鈕)。
- 對(duì)可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息,給用戶放棄選擇的機(jī)會(huì)。
- 非法的輸入或操作應(yīng)有足夠的提示說明。
- 對(duì)運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示,讓用戶明白錯(cuò)誤出處,避免形成無限期的等待。
- 提示、警告、或錯(cuò)誤說明應(yīng)該清楚、明了、恰當(dāng)。
5.美觀與協(xié)調(diào)性:
界面應(yīng)該大小適合美學(xué)觀點(diǎn),感覺協(xié)調(diào)舒適,能在有效的范圍內(nèi)吸引用戶的注意力。
美觀與協(xié)調(diào)性細(xì)則:
- 長(zhǎng)寬接近黃金點(diǎn)比例,切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^長(zhǎng)度。
- 布局要合理,不宜過于密集,也不能過于空曠,合理的利用空間。
- 按鈕大小基本相近,忌用太長(zhǎng)的名稱,免得占用過多的界面位置。
- 按鈕的大小要與界面的大小和空間要協(xié)調(diào)。
- 避免空曠的界面上放置很大的按鈕。
- 放置完控件后界面不應(yīng)有很大的空缺位置。
- 字體的大小要與界面的大小比例協(xié)調(diào), 通常使用的字體中宋體9-12較為美觀,很少使用超過12號(hào)的字體。
- 前景與背景色搭配合理協(xié)調(diào),反差不宜太大,最好少用深色,如大紅、大綠等。常用色考慮使用Windows界面色調(diào)。
- 如果使用其他顏色,主色要柔和,具有親和力與磁力,堅(jiān)決杜絕刺目的顏色。
- 大型系統(tǒng)常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。
- 界面風(fēng)格要保持一致,字的大小、顏色、字體要相同,除非是需要藝術(shù)處理或有特殊要求的地方。
- 如果窗體支持最小化和最大化或放大時(shí),窗體上的控件也要隨著窗體而縮放;切忌只放大窗體而忽略控件的縮放。
- 對(duì)于含有按鈕的界面一般不應(yīng)該支持縮放,即右上角只有關(guān)閉功能。
- 通常父窗體支持縮放時(shí),子窗體沒有必要縮放。
- 如果能給用戶提供自定義界面風(fēng)格則更好,由用戶自己選擇顏色、字體等。
6.菜單位置:
菜單是界面上最重要的元素,菜單位置按照按功能來組織。
菜單設(shè)測(cè)試細(xì)則:
- 菜單通常采用"常用--主要--次要--工具--幫助"的位置排列,符合流行的Windows風(fēng)格。
- 常用的有"文件"、"編輯","查看"等,幾乎每個(gè)系統(tǒng)都有這些選項(xiàng),當(dāng)然要根據(jù)不同的系統(tǒng)有所取舍。
- 下拉菜單要根據(jù)菜單選項(xiàng)的含義進(jìn)行分組,并切按照一定的規(guī)則進(jìn)行排列,用橫線隔開。
- 一組菜單的使用有先后要求或有向?qū)ё饔脮r(shí),應(yīng)該按先后次序排列。
- 沒有順序要求的菜單項(xiàng)按使用頻率和重要性排列,常用的放在開頭, 不常用的靠后放置;重要的放在開頭,次要的放在后邊。
- 如果菜單選項(xiàng)較多,應(yīng)該采用加長(zhǎng)菜單的長(zhǎng)度而減少深度的原則排列。
- 菜單深度一般要求最多控制在三層以內(nèi)。
- 對(duì)常用的菜單要有快捷命令方式,組合原則見8。
- 對(duì)與進(jìn)行的操作無關(guān)的菜單要用屏蔽的方式加以處理,如果采用動(dòng)態(tài)加載方式——即只有需要的菜單才顯示——最好。
- 菜單前的圖標(biāo)不宜太大,與字高保持一直最好。
- 主菜單的寬度要接近,字?jǐn)?shù)不應(yīng)多于四個(gè),每個(gè)菜單的字?jǐn)?shù)能相同最好。
- 主菜單數(shù)目不應(yīng)太多,最好為單排布置。
7.獨(dú)特性:
如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn),則會(huì)喪失自己的個(gè)性.在框架符合以上規(guī)范的情況下,設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用。
- 安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹,并有自己的圖標(biāo)。
- 主界面,最好是大多數(shù)界面上要有公司圖標(biāo)。
- 登錄界面上要有本產(chǎn)品的標(biāo)志,同時(shí)包含公司圖標(biāo)。
- 幫助菜單的"關(guān)于"中應(yīng)有版權(quán)和產(chǎn)品信息。
- 公司的系列產(chǎn)品要保持一直的界面風(fēng)格,如背景色、字體、菜單排列方式、圖標(biāo)、安裝過程、按鈕用語等應(yīng)該大體一致。
8.快捷方式的組合
在菜單及按鈕中使用快捷鍵可以讓喜歡使用鍵盤的用戶操作得更快一些 在西文Windows及其應(yīng)用軟件中快捷鍵的使用大多是一致的。
菜單中:
- 面向事務(wù)的組合有:
Ctrl-D 刪除 ;Ctrl-F 尋找 ;Ctrl –H替換;Ctrl-I 插入 ;Ctrl-N 新記錄 ;Ctrl-S 保存 Ctrl-O 打開。 - 列表:
Ctrl-R ,Ctrl-G定位;Ctrl-Tab下一分頁窗口或反序?yàn)g覽同一頁面控件。 - 編輯:
Ctrl-A全選;Ctrl-C 拷貝;Ctrl-V 粘貼;Ctrl-X 剪切;Ctrl-Z撤消操作;Ctrl-Y恢復(fù)操作。 - 文件操作:
Ctrl-P 打印;Ctrl-W 關(guān)閉。 - 系統(tǒng)菜單:
Alt-A文件;Alt-E編輯;Alt-T工具;Alt-W窗口;Alt-H幫助。 - MS Windows保留鍵:
Ctrl-Esc 任務(wù)列表 ;Ctrl-F4 關(guān)閉窗口; Alt-F4 結(jié)束應(yīng)用;Alt-Tab 下一應(yīng)用 ;Enter 缺省按鈕/確認(rèn)操作 ;Esc 取消按鈕/取消操作 ;Shift-F1 上下文相關(guān)幫助 。
按鈕中:
可以根據(jù)系統(tǒng)需要而調(diào)節(jié),以下只是常用的組合。
Alt-Y確定(是);Alt-C取消;Alt-N 否;Alt-D刪除;Alt-Q退出;Alt-A添加;Alt-E編輯;Alt-B瀏覽;Alt-R讀;Alt-W寫。
這些快捷鍵也可以作為開發(fā)中文應(yīng)用軟件的標(biāo)準(zhǔn),但亦可使用漢語拼音的開頭字母。
9.安全性考慮:
在界面上通過下列方式來控制出錯(cuò)幾率,會(huì)大大減少系統(tǒng)因用戶人為的錯(cuò)誤引起的破壞。開發(fā)者應(yīng)當(dāng)盡量周全地考慮到各種可能發(fā)生的問題,使出錯(cuò)的可能降至最小。如應(yīng)用出現(xiàn)保護(hù)性錯(cuò)誤而退出系統(tǒng),這種錯(cuò)誤最容易使用戶對(duì)軟件失去信心。因?yàn)檫@意味著用戶要中斷思路,并費(fèi)時(shí)費(fèi)力地重新登錄,而且已進(jìn)行的操作也會(huì)因沒有存盤而全部丟失。
安全性細(xì)則:
- 最重要的是排除可能會(huì)使應(yīng)用非正常中止的錯(cuò)誤。
- 應(yīng)當(dāng)注意盡可能避免用戶無意錄入無效的數(shù)據(jù)。
- 采用相關(guān)控件限制用戶輸入值的種類。
- 當(dāng)用戶作出選擇的可能性只有兩個(gè)時(shí),可以采用單選框。
- 當(dāng)選擇的可能再多一些時(shí),可以采用復(fù)選框,每一種選擇都是有效的,用戶不可能輸入任何一種無效的選擇。
- 當(dāng)選項(xiàng)特別多時(shí),可以采用列表框,下拉式列表框。
- 在一個(gè)應(yīng)用系統(tǒng)中,開發(fā)者應(yīng)當(dāng)避免用戶作出未經(jīng)授權(quán)或沒有意義的操作。
- 對(duì)可能引起致命錯(cuò)誤或系統(tǒng)出錯(cuò)的輸入字符或動(dòng)作要加限制或屏蔽。
- 對(duì)可能發(fā)生嚴(yán)重后果的操作要有補(bǔ)救措施。通過補(bǔ)救措施用戶可以回到原來的正確狀態(tài)。
- 對(duì)一些特殊符號(hào)的輸入、與系統(tǒng)使用的符號(hào)相沖突的字符等進(jìn)行判斷并阻止用戶輸入該字符。
- 對(duì)錯(cuò)誤操作最好支持可逆性處理,如取消系列操作。
- 在輸入有效性字符之前應(yīng)該阻止用戶進(jìn)行只有輸入之后才可進(jìn)行的操作。
- 對(duì)可能造成等待時(shí)間較長(zhǎng)的操作應(yīng)該提供取消功能。
- 特殊字符常有;;'"><,`':"["{、\|}]+=)-(_*&&^%$#@!~,.。?/還有空格。
- 與系統(tǒng)采用的保留字符沖突的要加以限制。
- 在讀入用戶所輸入的信息時(shí),根據(jù)需要選擇是否去掉前后空格。
- 有些讀入數(shù)據(jù)庫的字段不支持中間有空格,但用戶切實(shí)需要輸入中間空格,這時(shí)要在程序中加以處理。
10.多窗口的應(yīng)用與系統(tǒng)資源:
設(shè)計(jì)良好的軟件不僅要有完備的功能,而且要盡可能的占用最底限度的資源。
- 在多窗口系統(tǒng)中,有些界面要求必須保持在最頂層,避免用戶在打開多個(gè)窗口時(shí),不停的切換甚至最小化其他窗口來顯示該窗口。
- 在主界面載入完畢后自動(dòng)卸出內(nèi)存,讓出所占用的WINDOWS系統(tǒng)資源。
- 關(guān)閉所有窗體,系統(tǒng)退出后要釋放所占的所有系統(tǒng)資源 ,除非是需要后臺(tái)運(yùn)行的系統(tǒng)。
- 盡量防止對(duì)系統(tǒng)的獨(dú)占使用。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-04-01 13:56:00] 界面爛還是界面設(shè)計(jì)爛?
- [2008-10-21 08:59:00] 關(guān)于網(wǎng)站界面設(shè)計(jì)的案例分析資源
- [2009-02-15 09:47:00] 10個(gè)有用的技術(shù)改進(jìn)你的用戶界面設(shè)計(jì)
- [2013-12-09 23:35:57] 圓形效果在界面設(shè)計(jì)上的應(yīng)用與分析
- [2008-08-08 17:23:00] 企業(yè)級(jí)Web應(yīng)用用戶界面設(shè)計(jì)雜談
- [2008-11-16 17:25:00] 界面設(shè)計(jì)中的Pattern
- [2008-05-09 14:02:00] 《Designing Interfaces》讀書筆記(2)設(shè)計(jì)模式
- [2008-06-12 13:59:00] 界面設(shè)計(jì)是應(yīng)該本地化還是國際化?
- [2008-05-09 14:04:00] 《Designing Interfaces》讀書筆記(1)
- [2008-07-04 14:58:00] 軟件界面設(shè)計(jì)要素——視覺識(shí)別
- [2009-02-17 08:44:00] 從SNS看社會(huì)化界面設(shè)計(jì)(一)
- [2013-02-01 09:46:12] 用戶體驗(yàn)與網(wǎng)頁界面設(shè)計(jì)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島高端網(wǎng)站建設(shè)公司哪家好 html和css 外貿(mào)網(wǎng)站設(shè)計(jì) 官網(wǎng)建設(shè) 青島網(wǎng)頁制作 建站常識(shí) 青島輪胎網(wǎng)站設(shè)計(jì) 網(wǎng)站的速度 網(wǎng)站建設(shè)的步驟有哪些 青島黃島、紅島網(wǎng)站建設(shè)公司 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 平面設(shè)計(jì) 青島網(wǎng)絡(luò)公司 微官網(wǎng) 青島輪胎網(wǎng)站設(shè)計(jì)公司 青島網(wǎng)站SEO H5定制設(shè)計(jì) 青島flash網(wǎng)站 青島做網(wǎng)站多少錢 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 網(wǎng)站SEO 手機(jī)網(wǎng)站建設(shè) 營(yíng)銷型網(wǎng)站建設(shè) 微信小程序 營(yíng)銷型網(wǎng)站 用戶界面 css 青島SEO 力圖數(shù)字科技 輪胎網(wǎng)站設(shè)計(jì)