XX系統(tǒng)用戶界面設(shè)計

1、XX系統(tǒng)用戶界面設(shè)計報告文件狀態(tài)：文件標(biāo)識：XX系統(tǒng)-SD-UIV草稿當(dāng)前版本：1.0正式發(fā)布作者：正在修改完成日期：10-03-14機(jī)構(gòu)公開信息版本歷史版本/狀態(tài)作者參與者起止日期備注|1.0新建0.1文檔目的40.2文檔范圍40.3讀者對象40.4參考文獻(xiàn)40.5術(shù)語與縮寫解釋4應(yīng)當(dāng)遵循的界面設(shè)計規(guī)范41.1 :易用性:51.2易用性細(xì)則5界面的關(guān)系圖和工作流程圖52.1前臺管理完成界面功能一覽52.3界面關(guān)系及工作流程6前臺管理界面關(guān)系62. 界面關(guān)系63.1登錄界面6頁面說明6頁面遷移圖6頁面說明7前置條件8關(guān)聯(lián)數(shù)據(jù)表8補(bǔ)充說明：83.2前臺管理主界面8頁面說明8頁面遷移圖9頁面說明9

2、3.3入網(wǎng)登記單界面11頁面說明11頁面遷移圖11頁面說明124.總后總結(jié):150.文檔介紹0.1文檔目的XX系統(tǒng)用戶界面設(shè)計報告。是為了開發(fā)XX系統(tǒng)而編寫，主要面向系統(tǒng)分析員、程序員、測試員、實(shí)施員和最終用戶。本說明書是整個軟件開發(fā)的依據(jù)，它對以后階段的工作起指導(dǎo)作用。本文也是項(xiàng)目完成后系統(tǒng)驗(yàn)收的依據(jù)。0.2文檔范圍本文檔主要包含以下幾部分：1. 文檔介紹2. 界面設(shè)計規(guī)范3. 界面關(guān)系圖4. 主界面說明0.3讀者對象本文檔的讀者主要包含以下幾類：1. 界面設(shè)計人員2. 美工人員3. 編碼人員4. 測試人員0.4參考文獻(xiàn)提示：列出本文檔的所有參考文獻(xiàn)（可以是非正式出版物），格式如下：標(biāo)識符作

3、者，文獻(xiàn)名稱，出版單位（或歸屬單位），日期例如：AAA作者，立項(xiàng)建議書，機(jī)構(gòu)名稱，日期SPP-PROC-SDSEPG,系統(tǒng)設(shè)計規(guī)范，機(jī)構(gòu)名稱，日期0.5術(shù)語與縮寫解釋縮寫、術(shù)語解釋GIFGraphicsInterchangeFormat的縮寫圖像交換格式的縮寫應(yīng)當(dāng)遵循的界面設(shè)計規(guī)范界面是軟件與用戶交互的最直接的層，界面的好壞決定用戶對軟件的第一印象。而且設(shè)計良好的界面能夠引導(dǎo)用戶自己完成相應(yīng)的操作，起到向?qū)У淖饔?。用戶原則：1.1:易用性：按鈕名稱應(yīng)該易懂，用詞準(zhǔn)確，屏棄模棱兩可的字眼，要與同一界面上的其他按鈕易于區(qū)分，能望文知意最好，理想的情況是用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)

4、的正確操作。1.2易用性細(xì)則：1) :完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動的距離。2) :按功能將界面劃分局域塊，用Frame框括起來，并要有功能說明或標(biāo)題。3) :界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前，位置也應(yīng)放在窗口上較醒目的位置。4) :同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示。5) :復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。6) :復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。7) :選項(xiàng)數(shù)相同時多用選項(xiàng)框而不用下拉列表框。8) :界面空間較小時使用下拉框而不用選項(xiàng)框。9) :選項(xiàng)數(shù)叫少時使用選項(xiàng)框，相反使用下拉列表

5、框。10) :專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼。1. 界面的關(guān)系圖和工作流程圖2.1前臺管理完成界面功能一覽界面名稱界面標(biāo)識功能說明寬帶互聯(lián)網(wǎng)入網(wǎng)登記單accept_innet.aspx填寫客戶的入網(wǎng)信息，提交客戶入網(wǎng)信息。前臺管理首界面Default.aspx顯示前臺管理中的全部功能菜單。繳費(fèi)受理fee.aspx.提供繳費(fèi)的條件。繳費(fèi)登記單fee_print.aspx顯示對應(yīng)客戶的信息及帳戶余額，填寫客戶繳費(fèi)金額。業(yè)務(wù)受理單print.aspx對駁回的業(yè)務(wù)受理進(jìn)行信息修改。業(yè)務(wù)受理單print_result.aspx顯示搜索結(jié)果。修改密碼user_manag

6、e.aspx對用戶的密碼進(jìn)行修改。XX系統(tǒng)前臺管理一覽表XX系統(tǒng)前臺管理一覽表2.3界面關(guān)系及工作流程前臺管理界面關(guān)系業(yè)務(wù)查詢業(yè)務(wù)受理修改密碼搜索結(jié)果查詢結(jié)果_查詢結(jié)果"：繳費(fèi)登記_：（詳細(xì)資料（詳細(xì)資料J新客戶入網(wǎng)7故障申請1'停機(jī)申請圖2-1XX系統(tǒng)客戶端界面關(guān)系及工作流程圖2. 界面關(guān)系3.1登錄界面3.1.1 頁面說明登錄頁面為系統(tǒng)入口頁面，只有通過登錄方可使用系統(tǒng)，不同用戶對應(yīng)不同權(quán)限，權(quán)限不同的用戶進(jìn)入系統(tǒng)后的界面菜單項(xiàng)是不同的。登錄成功，轉(zhuǎn)向主界面main.jsp。權(quán)限信息參見3.XX權(quán)限設(shè)置頁面。3.1.2 頁面遷移圖前臺管理主界面后臺管理主界面>施工管

7、理主界面前臺管理主界面后臺管理主界面>施工管理主界面補(bǔ)充說明:登錄對象標(biāo)識功能操作前臺管理用戶Login.aspx是非鎖定的經(jīng)過審核的注冊用戶登錄到新聞管理頁面，管理員則登錄到管登錄施工管理用戶Login.aspx后臺管理用戶Login.aspx理員管理頁面.3.1.3 頁面說明界面原型用PM'0下反記注払圖3-1XX系統(tǒng)登錄界面login.aspx3.1.3.2 輸入控件名稱控件類型欄目名稱必填約束初值Usernametext用戶名V最小值10000Passwordpassword密碼V非空6-10位LoginButtonsubmit提交補(bǔ)充說明3.1.3.3 處理動作步驟處理

8、說明填寫信息1輸入用戶名、密碼點(diǎn)擊登錄2單擊“登錄按鈕”進(jìn)行驗(yàn)證3判斷用戶是否輸入，若無，提示輸入判斷資料4判斷用戶名、密碼是否合法返回信息5顯示提示信息“您的登錄嘗試不成功。請重試?！?.1.3.4 輸出控件名稱控件類型欄目名稱說明前置條件前置條件說明關(guān)聯(lián)數(shù)據(jù)表數(shù)據(jù)表說明BBC_EMPLOYEE存儲用戶的用戶編號和密碼補(bǔ)充說明讀寫數(shù)據(jù)表時的注意事項(xiàng)，若簡單讀取，可空白補(bǔ)充說明:對于此界面的其他補(bǔ)充說明。3.2前臺管理主界面頁面說明顯示前臺管理中的全部功能菜單。通過功能菜單進(jìn)入相應(yīng)得的功能界面，主顯示區(qū)域顯示主要業(yè)務(wù)申請一入網(wǎng)申請，停機(jī)申請，故障申請。單擊入網(wǎng)申請按鈕，進(jìn)入新客戶入網(wǎng)登記單界面

9、。細(xì)Hands1322頁面遷移圖前臺管理界面業(yè)務(wù)受理頁面說明界面原型搜索結(jié)果查詢結(jié)果）修改密碼'補(bǔ)充說明:寬帶受理和業(yè)務(wù)受理是同一個界面。費(fèi)受理i寃帶收費(fèi)管理柔統(tǒng)扎F亍清|停機(jī)申詣|如申爲(wèi)|血務(wù)記于壬咁.10D0D理覘葺瑪對鳥雲(yún)訓(xùn)Pt涉血脈罠Wi百hpjri炭i住20D5AHJkgJrtt張富佻占盜丁世蚩丘爸00劃曲妁*逢辻用戶修用山赳硏&外M寶鴉II理宗豈花IL芽抽崔出n壽址曼"眇當(dāng)mH尸很春書戶怙弓：簫玉熬:注雀新客戶入網(wǎng)故障申請停機(jī)申請専戶2斜Mfi號茗P袒S刪!蠢星HHk1004310024111ARlotus訕02丘111入網(wǎng)LQ007UKB1111AF1&

10、#171;«!LOO1畑張飛UBTIO(R9WD6TAF?LOL0T1033d人網(wǎng)*r*mi我斥酗I1E辺iI用尸劃處IV.4ME的業(yè)爵疑、二阿申詒323.2輸入控件名稱控件類型欄目名稱必填約束初值txtAidTextBox業(yè)務(wù)記錄查詢最小值10000ddITpyeDropDownList駁回的業(yè)務(wù)類型7設(shè)定值：入網(wǎng)申請/停機(jī)申請/故障申請。入網(wǎng)申請btnlnNetnput業(yè)務(wù)受理入網(wǎng)申請btnStopnput業(yè)務(wù)受理停機(jī)申請btnTroublenput業(yè)務(wù)受理故障申請補(bǔ)充說明界面中和還有些相同的功能，其控件基本上相似就不在這里一一列出。323.3處理爰理騙尋''烷導(dǎo)

11、不需垢.W業(yè)務(wù)記錄查詢處理:動作步驟處理說明填寫受理編號1輸入受理編號，非空點(diǎn)擊搜索2單擊“搜索”進(jìn)行驗(yàn)證3判斷用戶是否輸入，若無，提示輸入打開頁面4打開處理結(jié)果頁面選擇業(yè)務(wù)類型處理:動作步驟處理說明選擇下拉1選擇不同的業(yè)務(wù)受理類型顯示記錄2顯示選擇的駁回業(yè)務(wù)受理記錄業(yè)島燮理.入網(wǎng)申諳停機(jī)申請故厚申請業(yè)務(wù)受理處理:動作步驟處理說明單擊按鈕1單擊需要受理的處理按鈕打開新界面2顯示進(jìn)行的業(yè)務(wù)受理記錄單輸出控件名稱控件類型欄目名稱說明gvListGridView駁回業(yè)務(wù)受理記錄顯示被審核駁回的受理記錄323.4前置條件前置條件說明成功登錄系統(tǒng)用戶使用合法的帳號成功登陸寬帶管理系統(tǒng)323.5關(guān)聯(lián)數(shù)據(jù)表

12、數(shù)據(jù)表說明客戶信息表(BBC_CUSTOMER表)存儲客戶信息的表業(yè)務(wù)受理表(BBCACCEPT)用業(yè)務(wù)受理表進(jìn)行保存。實(shí)際工作的流程中，業(yè)務(wù)受理需要業(yè)務(wù)受理號，受理人編號，時間日期，審核人編號，要求等字段內(nèi)容服務(wù)類型表(BBCSERVICE)業(yè)務(wù)的種類控制也需要進(jìn)行管理業(yè)務(wù)受理類別表(BBCACCEPTTYPE)在業(yè)務(wù)受理的時候?qū)I(yè)務(wù)信息進(jìn)行區(qū)分補(bǔ)充說明暫無323.6補(bǔ)充說明:對于此界面的其他補(bǔ)充說明。3.3入網(wǎng)登記單界面頁面說明入網(wǎng)登記單界面顯示了入網(wǎng)客戶需要填寫的各項(xiàng)信息，并且對填寫的信息做基本的驗(yàn)證,同時提供了入網(wǎng)登記單的打印功能。入網(wǎng)登記單提交完成以后，自動生成業(yè)務(wù)受理記錄?？蛻羧刖W(wǎng)

13、成功以后彈出提示信息，失敗同樣顯示提示信息。3.3.1 頁面遷移圖(業(yè)務(wù)受理新客戶入網(wǎng)七1-提示信息補(bǔ)充說明：用戶填寫客戶填寫基本資料，提交通過腳本檢測：通過驗(yàn)證提交服務(wù)器程序處理，同時顯示提示信息。驗(yàn)證沒有通過，返回頁面同時顯示各項(xiàng)提示信息。333頁面說明界面原型寬帶互聯(lián)網(wǎng)入網(wǎng)登記單業(yè)昜提五：加占標(biāo)號的恵頂請您務(wù)必填寫藝生缶號,2U5S客尸議號:10D66懺入方式：QJIIKLALAfX*1.:S戶資糾（專戶境場）I*有律證伴：廠身般注廣罕官狂廠1AH廣戶匚廠簿工百養(yǎng)業(yè)訥艇*證甘號嗎：1*用尸SSU：廣牛人廣険廣網(wǎng)吧廣單位局憾冋客尸泰車：dd單位:1卞逋信flit：1h廉S!瑪：1o厳垂人：

14、1h図系龍番：1*話用E丄1丄：1宜叢11址：1G乙用苓頂目C諸薯戶說就冨，棄焼帚溜TI帰前面工錚）擔(dān)網(wǎng)力式：r虛in按導(dǎo)專繼廣且尿湮平：廣12K廣比廣九邛兇廣4M廣加苣工方宴：廣電諭粽AD孔廣誤電iSUSL粽PJISL邁口政糕燦EL*是舌需哥調(diào)試：廠是秦用尸貳畫備：廠用戸目雷廠租用廠世用廠至費(fèi)握棗r耳它*軸費(fèi)周期：廣母E廠半年廣更至度廠一費(fèi)是否慎惠：廠是廠否*參蠢擔(dān)：1*3.ft®1i申誦丙田不人祁宙百明上苯席三F1勞全庫翼并呂已越識京國有同盍求登怔申頁血帽音的匚互甘網(wǎng)服等的鍛日剛吋1問:2045122515：95：45*提交申請孕H打卬人魅鱉記單輸入控件名稱控件類型欄目名稱必填約

15、束初值RBL_innetRadioButtonList接入方式V定制（注釋1）TbNameTextBox客戶姓名V最多8字符RBLPaperRadioButtonList有效證件V定制（注釋2）TBPapernTextBox證件號碼V最長字符數(shù)18RBLUser_typeRadioButtonList客戶類別V定制（注釋3）TBAddressTextBox通信地址V最長字符數(shù)50TBPastalcodeTextBox郵政編碼X6位TblinkmanTextBox聯(lián)系人V最多8字符TBEmailTextBox常用EmailX電子郵件地址TBUnitsTextBox單位V最多50字符TBSetAd

16、dTextBox安裝地址V最多50字符TBphoneTextBox聯(lián)系電話V最多5位區(qū)號一最多8號碼RBLService_content1RadioButtonList組網(wǎng)方式V定制（注釋4）RBLService_content2RadioButtonList速率V定制（注釋5）RBLServicecontent3RadioButtonList施工方式V定制（注釋6）RBLServicecontent4RadioButtonList是否調(diào)試V定制（注釋7）RBLService_content5RadioButtonList用戶端設(shè)備V定制（注釋8）RBLServicecontent6Radio

17、ButtonList繳費(fèi)周期V定制（注釋9）DDLServerTypeDropDownList服務(wù)類別V定制（注釋10）RBLService_content7RadioButtonList是否優(yōu)惠定制（注釋11）TBMemoTextBox備注V最多100字符TBUserRequreTextBox客戶要求X最多100字符注釋說明表:編號項(xiàng)目定制內(nèi)容1接入方式ADSL接入口LAN接入2有效證件身份證軍官證護(hù)照戶口簿工商營業(yè)執(zhí)照3客戶類別個人單位網(wǎng)吧單位局域網(wǎng)4組網(wǎng)方式虛擬撥號專線其它5速率512K1M1.5M2M4M6M6施工方式電話加裝ADSL裝電話和ADSL裝ADSLISDN改裝ADSL7是否需要調(diào)試是否8用戶端設(shè)備用戶自備租用借用免費(fèi)提供其它9繳費(fèi)周期每月半年每季度一年10是否優(yōu)惠是否11服務(wù)類別60元包月，2M600元包年，2M計時2元/小時12受理類別入網(wǎng)停機(jī)故障13審核狀態(tài)等待通過駁回處理動作步驟處理說明填寫客戶資料1輸入受理編號，非空點(diǎn)擊提交申請2單擊“提交申請”按鈕進(jìn)行驗(yàn)證3判斷用戶輸入是否合法，若無后非法，提示輸入顯示提示信息4服務(wù)器程序進(jìn)行處理，返回提示信息輸出控件名稱控件類型欄目名稱說明LB_C_IDLabel客戶帳號顯示客戶提交成功以后的客戶帳號LB_A_IDLabel受理編號顯示客戶提交成功以后的受理編號323.