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

1、XX系統(tǒng) 用戶界面設(shè)計報告 文件狀態(tài)： 文件標識： XX系統(tǒng)-SD-UI V草稿 當前版本： 1.0 正式發(fā)布 作者： 正在修改 完成日期： 10-03-14 機構(gòu)公開信息版本歷史 版本/狀態(tài) 作者 參與后 起止日期 備注 1.0 新建 0.1文檔目的4 0.2文檔圍4 0.3讀者對象4 0.4參考文獻4 0.5術(shù)語與縮寫解釋4 1 .應(yīng)當遵循的界面設(shè)計規(guī)4 1.1 :易用性：5 1.2 易用性細則5 2 .界面的關(guān)系圖和工作流程圖5 2.1 前臺管理完成界面功能一覽5 1 界面關(guān)系及工作流程6 1 前臺管理界面關(guān)系6 2 .界面關(guān)系6 登錄界面6 頁面說明6 頁面遷移圖6 頁面說明7 前置條

2、件8 關(guān)聯(lián)數(shù)據(jù)表8 補充說明：8 前臺管理主界面8 頁面說明8 頁面遷移圖9 頁面說明9 入網(wǎng)登記單界面11 頁面說明11 頁面遷移圖11 頁面說明12 .總后總結(jié)：140.文檔介紹 0.1文檔目的 XX系統(tǒng)用戶界面設(shè)計報告。是為了開發(fā)XX系統(tǒng)而編寫，主要面向系統(tǒng)分析員、程序員、測試員、實施員和最終用戶。 本說明書是整個軟件開發(fā)的依據(jù)，它對以后階段的工作起指導(dǎo)作用。本文也是項目完成后系統(tǒng)驗收的依據(jù)。 0.2文檔圍 本文檔主要包含以下幾部分： .文檔介紹 .界面設(shè)計規(guī) .界面關(guān)系圖 .主界面說明 0.3讀者對象 本文檔的讀者主要包含以下幾類： .界面設(shè)計人員 .美工人員 .編碼人員 .測試人員

3、0.4參考文獻 提示：列出本文檔的所有參考文獻（可以是非正式出版物），格式如下： 標識符作者，文獻名稱，出版單位（或歸屬單位），日期 例如： AAA作者，立項建議書，機構(gòu)名稱，日期 SPP-PROC-SDSEPG,系統(tǒng)設(shè)計規(guī)，機構(gòu)名稱，日期 0.5術(shù)語與縮寫解釋 縮寫、術(shù)語 解釋 GIF GraphicsInterchangeFormat的縮寫一圖像交換格式的縮寫 .應(yīng)當遵循的界面設(shè)計規(guī) 界面是軟件與用戶交互的最直接的層，界面的好壞決定用戶對軟件的第一印象。而且設(shè)計良好的界面能夠引導(dǎo)用戶自己完成相應(yīng)的操作，起到向?qū)У淖饔谩?用戶原則： :易用性： 按鈕名稱應(yīng)該易懂，用詞準確，屏棄模棱兩可的字眼

4、，要與同一界面上的其他按鈕易于區(qū)分，能望文知意最好，理想的情況是用戶不用查閱幫助就能知道該界面的功能并進行相關(guān)的正確操作。 易用性細則： 1):完成同一功能或任務(wù)的元素放在集中位置，減少鼠標移動的距離。 2):按功能將界面劃分局域塊，用Frame框括起來，并要有功能說明或標題。 3):界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當靠前，位置也應(yīng)放在窗口上較醒 目的位置。 4):同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示。 5):復(fù)選框和選項框按選擇幾率的高底而先后排列。 6):復(fù)選框和選項框要有默認選項，并支持Tab選擇。 7):選項數(shù)相同時多用選項框而不

5、用下拉列表框。 8):界面空間較小時使用下拉框而不用選項框。 9):選項數(shù)叫少時使用選項框，相反使用下拉列表框。 10):專業(yè)性強的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼。 .界面的關(guān)系圖和工作流程圖 前臺管理完成界面功能一覽 界囿名稱 界面標識 功能說明 寬帶互聯(lián)網(wǎng)入網(wǎng)登記單 accept_innet.aspx 填寫客戶的入網(wǎng)信息，提交客戶入網(wǎng)信息。 前臺管理首界面 Default.aspx 顯示前臺管理中的全部功能菜單。 繳費受理 fee.aspx. 提供繳費的條件。 繳費登記單 fee_print.aspx 顯示對應(yīng)客戶的信息及余額，填寫客戶繳費金額。 業(yè)務(wù)受理單 pr

6、int.aspx 對駁回的業(yè)務(wù)受理進行信息修改。 業(yè)務(wù)受理單 print_result.aspx 顯示搜索結(jié)果。 修改密碼 user_manage.aspx 對用戶的密碼進行修改。 界面關(guān)系及工作流程 前臺管理界面關(guān)系 （修改布及搜索斯業(yè)務(wù)詢繳晨理）dUniQ （查詢果）（1|迥沁_）（繳費衿記。羊細料）（詳細設(shè)料）新客戶黑 圖2-1XX系統(tǒng)客戶端界面關(guān)系及工作流程圖 .界面關(guān)系 登錄界面 頁面說明 登錄頁面為系統(tǒng)入口頁面，只有通過登錄方可使用系統(tǒng)，不同用戶對應(yīng)不同權(quán)限，權(quán)限不同的用戶進入系統(tǒng)后的界面菜單項是不同的。 登錄成功，轉(zhuǎn)向主界面main.jsp。 權(quán)限信息參見3.XX權(quán)限設(shè)置頁面。

7、補充說明: 登錄對象 標識 功能 操作 前臺管理用戶 Login.aspx 是非鎖定的經(jīng)過審核的注冊用戶登錄到新聞管理頁面，管登錄 XX系統(tǒng)前臺管理一覽表 停機申請 3.1.2頁面遷移圖 前臺管理主界面 后臺管理主界面 施工管理主界面 施工管理用戶 Login.aspx 理員則登錄到管 后臺管理用戶 Login.aspx 理員管理頁面. 3.1.3頁面說明 3.1.3,1界面原型 冊司 圖3-1XX系統(tǒng)登錄界面login.aspx 3.1.3.2輸入 控件名稱 控件類型 欄目名稱 必填 約束 初值 Username text 用戶名 V 最小值10000 Password password 密

8、碼 V 非空 6-10位 LoginButton submit 提交 補充說明 3.1.3.3處理 動作 步驟 處理說明 填寫信息 1 輸入用戶名、密碼 點擊登錄 2 單擊“登錄按鈕” 進行驗證 3 判斷用戶是否輸入，若無，提示輸入 判斷資料 4 判斷用戶名、密碼是否合法 返回信息 5 顯示提示信息“您的登錄嘗試不成功。請重試。” 控件名稱 控件類型 欄目名稱 說明 3.1.4前置條件 前置條件 說明 3.1.5關(guān)聯(lián)數(shù)據(jù)表 數(shù)據(jù)表 說明 BBC_EMPLOYEE 存儲用戶的用戶編號和密碼 補充說明 讀寫數(shù)據(jù)表時的注意事項，若簡單讀取，可空白 3.1.6補充說明: 對于此界面的其他補充說明。 前

9、臺管理主界面 頁面說明 顯示前臺管理中的全部功能菜單。 通過功能菜單進入相應(yīng)得的功能界面， 主顯示區(qū)域顯示主要業(yè)務(wù)申請一入網(wǎng)申請，停機申請，故障申請。 單擊入網(wǎng)申請按鈕，進入新客戶入網(wǎng)登記單界面。 補充說明： 寬帶受理和業(yè)務(wù)受理是同一個界面。 頁面說明 金/寬帶收費管理系統(tǒng) 3北4受理I域費攝理Iat費亶*）1業(yè)務(wù)查詢I暹曲 美千葡門I聯(lián)良程flIEklish|用尸如外|站直地用 配于=翼調(diào)伸系版桃聃芭CcpjrigjLX電20D5AHlights凱 力丁漢置恚福豹iM覽處里,建過用戶便用m&岬心為必里粕力當$用尸秋落 用尸根 W：10D0D WffiSSlWffiSSl：前自營生 注

10、峰雙落巖 S業(yè)/記詢 |N辛 #每專珅|入網(wǎng)萬蕭|照機方諾|班申嘴| 業(yè)當iEiHthi, 空屋騙:慢一 選界韓 E 的韭彝類型，屋引申諂 v 需戶 F 競?cè)?6 6 號 等尸機S 業(yè)貴普型 Bfk 10043 10D24 111 人阿 能改 1 1 口皿 10026 111 K網(wǎng) LQ007LQ007 10333 111 入?yún)^(qū) 幃淳 LOOLOO 10K510K5 翼飛 是阿 韓理 皿加 im 射費 入網(wǎng) 幡/ L0L07 1OTM Af*C 睥學(xué) （前臺管/界面） 3.2.3.1界面原型 控件名稱 控件類型 欄目名稱 必填 約束 初值 txtAid TextBox 業(yè)務(wù)記錄查詢 最小值10

11、000 ddlTpye DropDownList “回的業(yè)務(wù)類型 設(shè)定值： 入網(wǎng)申請/停機申請/故障申請。 入網(wǎng)申請 btnInNet nput 業(yè)務(wù)受理 入網(wǎng)申請 btnStop nput 業(yè)務(wù)受理 停機申請 btnTrouble nput “務(wù)受理 故障申請 補充說明 界面中和還有些相同的功能，其控件基本上相似就不在這里一一列出。 3.2.3.3處理 業(yè)務(wù)記錄查詢處理: 動作 步驟 處理說明 填寫受理編號 1 輸入受理編號，非空 點擊搜索 2 單擊“搜索” 進行驗證 3 判斷用戶是否輸入，若無，提示輸入 打開頁面 4 打開處理結(jié)果頁面 選擇業(yè)務(wù)類型處理: 動作 步驟 處理說明 選擇下拉 1

12、 選擇不同的業(yè)務(wù)受理類型 顯示記錄 2 顯示選擇的駁回業(yè)務(wù)受理記錄 業(yè)務(wù)受理：|人風(fēng)申請停機鞫|旅障申請 業(yè)務(wù)受理處理: 動作 步驟 處理說明 單擊按鈕 1 單擊需要受理的處理按鈕 打開新界面 2 顯示進行的業(yè)務(wù)受理記錄單 3.2.3.4輸出 控件名稱 控件類型 欄目名稱 說明 gvList GridView 駁回業(yè)務(wù)受理記錄 顯示被審核駁回的受理記錄 3.2.3.4前置條件 條件 說明 成功登錄系統(tǒng) 用戶使用合法的成功登陸寬帶管理系統(tǒng) 3.2,3.5關(guān)聯(lián)數(shù)據(jù)表 數(shù)據(jù)表 說明 客戶信息 (BBC_CUSTOMER表 表 存儲客戶信息的表 業(yè)務(wù)受理 (BBC_ACCEPT) 表 用業(yè)務(wù)受理表進行

13、保存。 實際工作的流程中， 業(yè)務(wù)受理需要業(yè)務(wù)受理號，受理人編號，時間日期，審核人編號，要求等字段容 服務(wù)類型 (BBC_SERVICE) 表 業(yè)務(wù)的種類控制也需要進行管理 業(yè)務(wù)受理類別表 (BBC_ACCEPT_TYPE) 在業(yè)務(wù)受理的時候?qū)I(yè)務(wù)信息進行區(qū)分 補充說明 暫無 3.2.3.6補充說明: 對于此界面的其他補充說明。 入網(wǎng)登記單界面 頁面說明 入網(wǎng)登記單界面顯示了入網(wǎng)客戶需要填寫的各項信息，并且對填寫的信息做基本的驗證, 同時提供了入網(wǎng)登記單的打印功能。 入網(wǎng)登記單提交完成以后，自動生成業(yè)務(wù)受理記錄。 客戶入網(wǎng)成功以后彈出提示信息，失敗同樣顯示提示信息。 頁面遷移圖 (業(yè)務(wù)受理新客戶

14、入網(wǎng)*府 f 提示信息 補充說明： 用戶填寫客戶填寫基本資料，提交通過腳本檢測：通過驗證提交服務(wù)器程序處理，同時顯示提示信息。驗證沒有通過，返回頁面同時顯示各項提示信息。 3.3.3,1界面原型 寬帶互聯(lián)網(wǎng)入網(wǎng)登記單 業(yè)晶提示：枷底標號的表項尚感多電埴寫 空軍窈號： 2U582U58 客尸幡號; 10D6610D66 俄人方式： 廣皿，捋入LAfLAf入* 1,1,容戶資料 4 4 客戶墻寫） | | |* * 萬敏證件; 易符證廣至官江廣法殿）尸匚?？诠ど虪I也出騏* 證廿號瑪二 1 1* * 用尸變初二 個人廣當他 r r 網(wǎng)唔r單位局晡網(wǎng) 容尸荽事二 dzldzl 單位: 通信地*二 4

15、4 戴虻碼二 1 1O O MA- 族莖電法！ 鄴 揩用. 1 1 宏肇博址二 * 工根嘛小目 t t 諳尋 F F 優(yōu)譯埴 M,在嫌看要&TI&TI 喧前畫選攆） 蛆網(wǎng)方式二 虎找按巖專嫩_r_r 且自 透平二 廣也 K K 廣 1M1MLiNLiN討4M4M 廣 G G 海 苣工方至二 廣電詔插裝配 3L3L裝電話和 U UL L笨 MISLMISL0 01313 口敝帖配 5L*5L* 是否需姿調(diào)試二 是否* 用尸就卷卷二 用廠自備廠租用檔用廠免費提實 r r 其它 ，費同期： 廣等月半年廣隹季度廣一用 是否曲惠二 是舌* 壽奧生： 1 1* * 3.3.笛芷 1 1 i

16、 i申諳聲明 K 人鄒市聲時；，上埴 WF1WF1金庫雪并習(xí)已運法并同意本登記中芍面附布的工互評網(wǎng)服筠的心 日叫時間：卻叫121225152515：9595：4545 一|一申琴單打卬吳陽登記單 3.3.3.2輸入 控件名稱 控件類型 欄目名稱 必填 約束 初值 RBL_innet RadioButtonList 接入方式 V 定制（注釋1） TbName TextBox 客戶 V 最多8字符 RBLPaper RadioButtonList 有效證件 V 定制（注釋2） TBPapern TextBox 證件 V 最長字符數(shù)18 RBLUser_type RadioButtonList 客戶

17、類別 V 定制（注釋3） TBAddress TextBox 通信地址 V 最長字符數(shù)50 TBPastalcode TextBox 郵政編碼 X 6位 Tblinkman TextBox 聯(lián)系人 V 最多8字符 TBEmail TextBox 常用Email X 電子地址 TBUnits TextBox 單位 V 最多50字符 TBSetAdd TextBox 安裝地址 V 最多50字符 TBphone TextBox 聯(lián)系 V 最多5位區(qū)號一最多8 RBLService_content1 RadioButtonList 組網(wǎng)方式 V 定制（注釋4） RBLService_content2

18、RadioButtonList 速率 V 定制（注釋5） RBLService_content3 RadioButtonList 施工方式 V 定制（注釋6） RBLService_content4 RadioButtonList 是否調(diào)試 V 定制（注釋7） RBLService_content5 RadioButtonList 用戶端設(shè)備 V 定制（注釋8） RBLService_content6 RadioButtonList 繳費周期 V 定制（注釋9） DDLServerType DropDownList 服務(wù)類別 V 定制（注釋10） RBLService_content7 Rad

19、ioButtonList 是否優(yōu)惠 定制（注釋11） TBMemo TextBox 備注 V 最多100字符 TBUserRequre TextBox 客戶要求 X 最多100字符 注釋說明表: 編號 項目 定制容 1 接入方式 ADSL接入DLAN接入 2_ 有效證件 口口軍官證口護照戶口簿工商營業(yè)執(zhí)照 3_ 客戶類別 口個人口單位口網(wǎng)吧口單位局域網(wǎng) 4_ 組網(wǎng)方式 口虛擬撥號口專線口其它 5_ 速率 512KD1MD1.5MD2MD4MD6M 61 施工方式 力裝ADSL口裝和ADSL裝ADSL口ISDN改裝ADSL 7 是否需要調(diào)試 口是否 8 用戶端設(shè)備 口用戶自備口租用口借用免費提供口其它