目前流行的界面設(shè)計(jì)的十條規(guī)則
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:57:38 作者:佚名
我要評(píng)論
老早前收藏的一篇文章了,發(fā)出來一起學(xué)習(xí)下
目前流行的界面風(fēng)格有三種方式:多窗體、單窗體以及資源管理器風(fēng)格,無論那種風(fēng)格,以下規(guī)則是應(yīng)該被重視的。
1.易用性:
按鈕名稱應(yīng)該易懂,用詞準(zhǔn)確,屏棄沒楞兩可的字眼,要與同一界面上的其他按鈕易于區(qū)分,能望
5.美觀與協(xié)調(diào)性:
界面應(yīng)該大小適合美學(xué)觀點(diǎn),感覺協(xié)調(diào)舒適,能在有效的范圍內(nèi)吸引用戶的注意力。
美觀與協(xié)調(diào)性細(xì)則:
-
長寬接近黃金點(diǎn)比例,切忌長寬比例失調(diào)、或?qū)挾瘸^長度。
布局要合理,不宜過于密集,也不能過于空曠,合理的利用空間。
按鈕大小基本相近,忌用太長的名稱,免得占用過多的界面位置。
按鈕的大小要與界面的大小和空間要協(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è)測試細(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)該采用加長菜單的長度而減少深度的原則排列。
菜單深度一般要求最多控制在三層以內(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í)間較長的操作應(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ú)占使用。
相關(guān)文章

15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習(xí),希望對(duì)你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁開發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來做項(xiàng)目開發(fā)使用是一件很重要的事情!!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01
- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-12-02
告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27



