VC程序界面設(shè)計(jì)規(guī)范模板

VC程序界面設(shè)計(jì)規(guī)范制作日期執(zhí)行日期PagePAGE12/121目的界面是軟件與用戶交互的最直接的層，界面的好壞決定用戶對(duì)軟件的第一印象。而且設(shè)計(jì)良好的界面能夠引導(dǎo)用戶自己完成相應(yīng)的操作，起到向?qū)У淖饔?。同時(shí)界面如同人的面孔，具有吸引用戶的直接優(yōu)勢。設(shè)計(jì)合理的界面能給用戶帶來輕松愉悅的感受和成功的感覺，相反由于界面設(shè)計(jì)的失敗，讓用戶有挫敗感，再實(shí)用強(qiáng)大的功能都可能在用戶的畏懼與放棄中付諸東流。2范圍本文適用于軟件組在開發(fā)所有具備界面的應(yīng)用系統(tǒng)。3界面設(shè)計(jì)規(guī)范3.1字體顏色基調(diào)應(yīng)以WINDOWS顏色（灰色）為主，同一個(gè)窗體中除白、黑、灰色之外，其它的顏色總數(shù)不宜超過3種；窗體和控件（除EDIT、RICHEDIT等編輯控件外）的背景色也宜用灰色，當(dāng)一個(gè)控件有輸入焦點(diǎn)或鼠標(biāo)焦點(diǎn)時(shí)，可以用較明亮的顏色；非激活狀態(tài)下，字體前景宜用黑色，背景用灰色；前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，最好少用深色，如大紅、大綠等。常用色考慮使用Windows界面色調(diào)；如果使用其他顏色，主色要柔和，具有親和力與磁力，堅(jiān)決杜絕刺目的顏色；大型系統(tǒng)常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。字體的大小要與界面的大小比例協(xié)調(diào)，通常使用的字體中宋體9-12較為美觀，很少使用超過12號(hào)的字體，建議使用宋體9號(hào)字；一般選系統(tǒng)常用的字體，絕對(duì)不要選自己加入的而系統(tǒng)沒有的字體；界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。3.2窗體及布局屏幕對(duì)角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置；父窗體或主窗體的中心位置應(yīng)該在對(duì)角線焦點(diǎn)附近。即采取屏幕居中；子窗體位置應(yīng)該在主窗體的左上角或正中；多個(gè)子窗體彈出時(shí)應(yīng)該依次向右下方偏移，以顯示出窗體標(biāo)題為宜；一般窗體的大小應(yīng)該可以讓用戶自己調(diào)整，默認(rèn)長寬接近黃金點(diǎn)比例（寬高比為4:3），切忌長寬比例失調(diào)；要考慮到用戶可能會(huì)用到不同的分辨率，在開發(fā)時(shí)應(yīng)使用當(dāng)時(shí)流行的分辨率；除非必要，否則不宜用模態(tài)窗體，但可以讓用戶選擇使窗體成為模態(tài)窗體；應(yīng)用程序的大小不固定時(shí)(拖動(dòng)窗口的右下角時(shí)可以改變窗體大小)，應(yīng)處理窗體變化時(shí)窗體內(nèi)各控件大小和位置的變化；窗體上控件布局要合理，不宜過于密集，也不能過于空曠，要合理的利用空間；除主窗體外，其他窗體大部分都要支持敲“Esc”鍵退出的功能，除非設(shè)計(jì)文檔中特殊指明；對(duì)于有增加、修改或刪除等有變動(dòng)操作的頁面，要隨操作及時(shí)刷新；對(duì)于數(shù)據(jù)錄入界面，重點(diǎn)考慮如何提高用戶的錄入速度，例如界面中有“身份證號(hào)”和“出生日期”，當(dāng)用戶輸入了一個(gè)合法的身份證號(hào)后，系統(tǒng)應(yīng)該自動(dòng)根據(jù)身份證號(hào)將出生日期提取出來并填入“出生日期”控件中；如果系統(tǒng)中需要經(jīng)常錄入一些重復(fù)數(shù)據(jù)，應(yīng)考慮將其提取出來，讓用戶進(jìn)行一次配置，然后系統(tǒng)自動(dòng)根據(jù)配置完成該信息的錄入，例如：系統(tǒng)有登記企業(yè)信息的功能，其中企業(yè)信息包括該企業(yè)所在的省、市、區(qū)，由于該系統(tǒng)安裝到某個(gè)市級(jí)單位后，所登記企業(yè)的所在省、市都是確定的，讓用戶每次登記時(shí)都重復(fù)選擇省、市將給用戶帶來很大的不便，應(yīng)該由用戶在系統(tǒng)初始化時(shí)設(shè)置好缺省的省、市，在企業(yè)登記時(shí)只要選擇該企業(yè)所在的區(qū)即可，這樣就提高了用戶的登記效率窗體顯示后，缺省的焦點(diǎn)應(yīng)該設(shè)在最合理的控件上，方便用戶操作。3.3控件使用按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置，要與界面的大小和空間要協(xié)調(diào)；避免空曠的界面上放置很大的按鈕；放置完控件后界面不應(yīng)有很大的空缺位置；如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放，對(duì)于窗體中包含ListView、TreeView、DBGrid、StringGrid等控件，必須支持最大化，使用戶能夠盡量多的獲得信息，當(dāng)處于“往下還原”狀態(tài)時(shí)，默認(rèn)窗體應(yīng)居中；重要的命令按鈕與使用較頻繁的按鈕要放在界面上較注目的位置；與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽，一般用灰色顯示，沒法使用該按鈕；對(duì)可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的機(jī)會(huì)，并且將按鈕的缺省焦點(diǎn)置在“取消”按鈕上；大多數(shù)下拉框（ComboBox），應(yīng)該不允許用戶輸入，如果需要輸入，應(yīng)在設(shè)計(jì)文檔中指出；當(dāng)下拉框（ComboBox）允許用戶不選擇任何選項(xiàng)時(shí)，不應(yīng)顯示一個(gè)空的選項(xiàng)，應(yīng)使用文字描述，如“請(qǐng)選擇…”等；對(duì)于文本框（TextBox）一般需要根據(jù)其對(duì)應(yīng)的數(shù)據(jù)庫字段的類型以及長度來限制用戶允許輸入的字符和長度；對(duì)于ListView以Report形式（ViewStyle屬性=vsReport）顯示數(shù)據(jù)，一般要求實(shí)現(xiàn)列排序，如果由于特殊原因不能實(shí)現(xiàn)列排序，應(yīng)該禁止用戶點(diǎn)擊列；日期輸入框限制只能接受正確的日期輸入，拒絕錯(cuò)誤的日期輸入，日期輸入框在日期輸入后要按既定的日期格式顯示日期；不允許單選組內(nèi)只有一個(gè)單選鈕可選，應(yīng)默認(rèn)選定第一個(gè)單選鈕；拒絕輸入和選擇的文本框和其它控件的顯示區(qū)域必須設(shè)定為灰色；密碼輸入框必須按掩碼的方式顯示；輸入型控件一般不允許只輸入空格或可存入輸入值兩端的空格；為統(tǒng)一起見不要使用分組框、按鈕等控件做分隔線，應(yīng)按如下做法：用PictureControl，屬性設(shè)為Etched和Frame，使該控件縮小到一條直線。3.4安全與提示對(duì)程序的退出、寫數(shù)據(jù)等有破壞可能或數(shù)據(jù)丟失可能的操作應(yīng)該給用戶一次確認(rèn)的機(jī)會(huì)；非法的輸入或操作應(yīng)有足夠的提示說明；對(duì)運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無限期的等待；提示、警告、或錯(cuò)誤說明應(yīng)該清楚、明了、恰當(dāng)；對(duì)于需要執(zhí)行長時(shí)間的操作，必須使用狀態(tài)條，讓用戶了解進(jìn)展情況，避免使用戶誤解為死機(jī)，同時(shí)把鼠標(biāo)光標(biāo)暫時(shí)變成沙漏形狀，以指示一個(gè)漫長的操作，要求用戶應(yīng)該等待；可以用沙漏光標(biāo)指示短暫的等待，對(duì)于長時(shí)間的等待，可以考慮使用一個(gè)無模式對(duì)話框，并在上面顯示簡短的消息，描述正進(jìn)行什么處理；系統(tǒng)的提示框樣式應(yīng)統(tǒng)一，即使用標(biāo)準(zhǔn)的Windows提示框，其中包括標(biāo)題、圖標(biāo)、提示語和功能按鈕，圖標(biāo)使用要規(guī)范，要根據(jù)提示信息的性質(zhì)選擇不同的圖標(biāo)，而且除非嚴(yán)重的錯(cuò)誤，一般不使用“X”圖標(biāo)，以免使用戶產(chǎn)生畏懼心理。3.5菜單與工具欄菜單通常采用“常用--主要--次要--工具--幫助”的位置排列，符合流行的Windows風(fēng)格；下拉菜單要根據(jù)菜單選項(xiàng)的含義進(jìn)行分組，并切按照一定的規(guī)則進(jìn)行排列，用橫線隔開；一組菜單的使用有先后要求或有向?qū)ё饔脮r(shí)，應(yīng)該按先后次序排列；沒有順序要求的菜單項(xiàng)按使用頻率和重要性排列，常用的放在開頭，不常用的靠后放置，重要的放在開頭，次要的放在后邊；如果菜單選項(xiàng)較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列；對(duì)常用的菜單要有快捷命令方式；與進(jìn)行的操作無關(guān)的菜單項(xiàng)一般要用屏蔽的方式加以處理，如果采用動(dòng)態(tài)加載方式——即只有需要的菜單才顯示——最好；菜單前的圖標(biāo)不宜太大，與字高保持一致最好；主菜單的寬度要接近，字?jǐn)?shù)不應(yīng)多于四個(gè)，每個(gè)菜單的字?jǐn)?shù)能相同最好；主菜單數(shù)目不應(yīng)太多，最好為單排布置；完成相同或相近功能的菜單用橫線隔開放在同一位置；菜單前的圖標(biāo)能直觀的代表要完成的操作；菜單深度一般要求最多控制在三層以內(nèi)；菜單的說明要跟彈出的窗體一致；大型軟件一般工具欄要求可以根據(jù)用戶的要求自己選擇定制；相同或相近功能的工具按鈕放在一起；工具欄中的每一個(gè)按鈕要有及時(shí)提示信息；一條工具欄的長度最長不能超出屏幕寬度；狀態(tài)條要能顯示用戶切實(shí)需要的信息，常用的有：目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯(cuò)誤信息等，如果某一操作需要的時(shí)間較長，還應(yīng)該顯示進(jìn)度條和進(jìn)程提示；狀態(tài)條的高度以放置五號(hào)字為宜，滾動(dòng)條的寬度比狀態(tài)條的略窄；菜單和工具條要有清楚的界限，菜單要求凸出顯示，這樣在移走工具條時(shí)仍有立體感；右鍵快捷菜單采用與菜單相同的準(zhǔn)則，且右鍵快捷菜單在對(duì)話框中不應(yīng)出現(xiàn)；在窗體工具攔中的按鈕可以用圖標(biāo)，文字可以寫上也可以不寫，如果不寫則一定要使用tip來提示用戶該按鈕完成的功能；在按鈕中使用的圖片要能表達(dá)按鈕對(duì)應(yīng)功能的意義；不宜對(duì)普通的按鈕只用圖標(biāo)做外觀。3.6幫助幫助文件宜用html格式，因?yàn)閔lp格式的文件只能在windows中用；操作時(shí)要提供及時(shí)調(diào)用系統(tǒng)幫助的功能，常用F1；在界面上調(diào)用幫助時(shí)應(yīng)該能夠及時(shí)定位到與該操作相對(duì)的幫助位置，也就是說幫助要有即時(shí)針對(duì)性；用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助主題詞；打包新系統(tǒng)時(shí)，對(duì)作了修改的地方在幫助文檔中要做相應(yīng)的修改；在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶難以自己解決可以方便的尋求新的幫助方式。3.7常用快捷鍵在菜單及按鈕中應(yīng)盡量就常用的操作功能使用快捷鍵，可以讓喜歡使用鍵盤的用戶操作得更快一些，應(yīng)用軟件中快捷鍵應(yīng)盡量與Windows保持一致；面向事務(wù)的組合組合鍵Ctrl-DCtrl-FCtrl–HCtrl-ICtrl-NCtrl-SCtrl-O功能刪除尋找替換插入新記錄保存打開編輯組合鍵Ctrl-ACtrl-CCtrl-VCtrl-XCtrl-ZCtrl-Y功能全選拷貝粘貼剪切撤消操作恢復(fù)操作文件操作組合鍵Ctrl-PCtrl-W功能打印關(guān)閉系統(tǒng)菜單組合鍵Alt-FAlt-EAlt-TAlt-WAlt-H功能文件編輯工具窗口幫助任務(wù)組合鍵Ctrl-F4Alt-F4EnterEsc功能關(guān)閉窗口結(jié)束應(yīng)用缺省按鈕/確認(rèn)操作取消按鈕/取消操作 功能按鈕組合鍵Alt-YAlt-CAlt-NAlt-DAlt-Q功能確定取消否刪除退出組合鍵Alt-AAlt-EAlt-BAlt-RAlt-W功能添加編輯瀏覽讀寫3.8視圖的選擇（單/多文檔介面類型）對(duì)于一個(gè)簡單的文本編輯器應(yīng)用程序，選擇CEditView；對(duì)于一個(gè)能編輯多信息文本格式(RTF)文件的應(yīng)用程序，選擇CRichEditView(這一選擇將導(dǎo)致應(yīng)用程序?yàn)槲臋n類選擇CRichEditDoc類)；對(duì)于一個(gè)圖形應(yīng)用程序，選擇CScrollView；對(duì)于一個(gè)簡單的監(jiān)控或帳目管理應(yīng)用程序，選擇CListView；要著手創(chuàng)建一個(gè)資源管理器類型的應(yīng)用程序，請(qǐng)選擇CTreeView(在以后的步驟中，可以手工添加一個(gè)CListView)；在對(duì)話框模板外創(chuàng)建一個(gè)視圖，選擇CFormView(一個(gè)對(duì)話框是一個(gè)被幾個(gè)控件窗口占據(jù)的窗口，諸如按鈕和編輯框)。3.9MFC應(yīng)用程序類型的選擇如果創(chuàng)建一個(gè)用戶界面需求有限的應(yīng)用程序，或如果想界面完全單一，那么就創(chuàng)建一個(gè)對(duì)話框應(yīng)用程序，典型的對(duì)話框應(yīng)用程序包括配置硬件設(shè)備的應(yīng)用程序、屏幕保護(hù)程序和游戲程序等；對(duì)話框要易用且簡潔，字體和控件的組織搭配要得體，能簡單不復(fù)雜，各控件的焦點(diǎn)、Tab順序等要講究，視應(yīng)用場合要適當(dāng)支持鍵盤，在簡潔易用的前提下，力求個(gè)性化，設(shè)計(jì)得更加友好，程序各對(duì)話框的風(fēng)格要保持一致；如果應(yīng)用程序要編輯一個(gè)文檔，應(yīng)該選擇單/多文檔界面類型，這里的“編輯一個(gè)文檔”是廣義上的意思，所指的文檔可以是一個(gè)文本文件、電子數(shù)據(jù)表文件、第三方數(shù)據(jù)庫的一個(gè)或多個(gè)表、或者是自己的二進(jìn)制文件，甚至可以是大量硬件設(shè)備的儲(chǔ)存設(shè)置，編輯僅僅表示對(duì)其中任何一個(gè)類型的文檔進(jìn)行添加、刪除或修改操作；單文檔界面應(yīng)用程序一次只允許處理一個(gè)文檔，如果應(yīng)用程序?qū)嶋H上一次只需處理一個(gè)文檔，諸如監(jiān)視一組硬件設(shè)備的應(yīng)用程序，那么應(yīng)該選擇單文檔界面，否則應(yīng)該創(chuàng)建一個(gè)多文檔界面應(yīng)用程序，即使在開始時(shí)一次編輯多個(gè)文檔并未顯出有任何好處；一個(gè)多文檔界面應(yīng)用程序允許一次編輯多個(gè)文檔，它并不比一個(gè)單文檔界面應(yīng)用程序復(fù)雜，但卻帶來了一次至少查看多個(gè)文檔的方便；在重要的窗口或區(qū)域應(yīng)能彈出右鍵，實(shí)現(xiàn)常見操作，工具欄上放最常用的操作按鈕，必要時(shí)動(dòng)態(tài)更換按鈕，狀態(tài)欄顯示足夠多的有用信息，消息主控在Mainframe中，單文檔的主控也可在View中，所有的對(duì)話框的彈出或非模態(tài)對(duì)話框的控制都在主控窗口中完成，具體的數(shù)據(jù)處理放在單獨(dú)的文件中或設(shè)計(jì)成類，在App類中實(shí)現(xiàn)Ini讀寫，各數(shù)據(jù)對(duì)象的定義和析構(gòu)，全局變量的賦值和初始計(jì)算，存盤退出等，各視圖的OnDraw和GDI畫圖盡量使用內(nèi)存位圖的方式，以免閃爍。3.10操作的便利性為方便用戶的使用，所有的輸入控件應(yīng)該按tab鍵和回車鍵排序，特別是密碼輸入時(shí)，應(yīng)該能用回車切換輸入框的焦點(diǎn)；常用的按鈕要有鍵盤快捷方式；界面應(yīng)按功能劃分出區(qū)域，要有功能說明或標(biāo)題；界面及按鈕的風(fēng)格應(yīng)盡量統(tǒng)一；界面要支持鍵盤自動(dòng)瀏覽按鈕功能，即按Tab鍵的自動(dòng)切換功能；界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置；有輸入的界面進(jìn)入時(shí)焦點(diǎn)應(yīng)停留在第一個(gè)EDIT上；界面上的控件擺放的數(shù)目是否過多。一般最好不要超過10個(gè)，多于10個(gè)應(yīng)建議使用分頁界面顯示；同一界面的功能數(shù)量是否過多，一般最好不要多于10個(gè)，過多導(dǎo)致使用不便；分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab；默認(rèn)按鈕要支持Enter及選擇操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作；可寫控件檢測到非法輸入后應(yīng)給出說明并能自動(dòng)獲得焦點(diǎn)；Tab鍵的順序與控件排列順序要一致，目前流行總體從上到下，同時(shí)行間從左到右的方式；復(fù)