企業(yè)綜合辦公信息系統(tǒng)用戶界面設(shè)計(jì)報(bào)告

實(shí)訓(xùn)X班X組文檔編號(hào)產(chǎn)品版本密級(jí)文件狀態(tài)：[]草稿[V]正式發(fā)布[]正在修改JXPBIT20120719V1.0內(nèi)部項(xiàng)目名稱企業(yè)綜合管理系統(tǒng)共14頁(yè)企業(yè)綜合管理系統(tǒng)系統(tǒng)界面設(shè)計(jì)報(bào)告文檔作者：Dayup項(xiàng)目組長(zhǎng)：盧銘翔批準(zhǔn)人： 批準(zhǔn)日期：2012年月日版本狀態(tài)審閱者分發(fā)姓名位置分發(fā)方式審閱者分發(fā)姓名位置分發(fā)方式分發(fā)日期版本作者參與者起止日期注釋V1.0劉喜珍Dayup小組2012.07.17-2012.07.19用戶界面設(shè)計(jì)初稿I錄TOC\o"1-5"\h\z引言 3編寫(xiě)目的 3\o"CurrentDocument"讀者對(duì)象 3\o"CurrentDocument"術(shù)語(yǔ)解釋 3\o"CurrentDocument"參考資料 3\o"CurrentDocument"系統(tǒng)需求 4\o"CurrentDocument"綜合事務(wù)管理子系統(tǒng) 4\o"CurrentDocument"流程管理子系統(tǒng) 4\o"CurrentDocument"臺(tái)帳管理子系統(tǒng) 5\o"CurrentDocument"系統(tǒng)管理子系統(tǒng) 5\o"CurrentDocument"界面需求 5\o"CurrentDocument"總體設(shè)計(jì)思路 5\o"CurrentDocument"設(shè)計(jì)原則 6\o"CurrentDocument"布局設(shè)計(jì) 6\o"CurrentDocument"交互設(shè)計(jì) 7應(yīng)遵循的設(shè)計(jì)規(guī)范 9布局規(guī)范 9\o"CurrentDocument"色彩規(guī)范 9\o"CurrentDocument"字體使用規(guī)范 10\o"CurrentDocument"交互方式一致性規(guī)范 10\o"CurrentDocument"按鈕操作規(guī)范 10\o"CurrentDocument"其他規(guī)范 10界面關(guān)系圖或工作流圖 10管理員登陸 10\o"CurrentDocument"普通用戶登錄 11\o"CurrentDocument"界面設(shè)計(jì)成果 11\o"CurrentDocument"主界面 12\o"CurrentDocument"統(tǒng)一用戶管理子界面 12\o"CurrentDocument"我的事務(wù)子界面 13\o"CurrentDocument"流程管理子界面 13\o"CurrentDocument"臺(tái)帳管理子界面 14\o"CurrentDocument"系統(tǒng)管理子界面 14界面設(shè)計(jì)總結(jié) 15設(shè)計(jì)經(jīng)驗(yàn)分享 15設(shè)計(jì)缺陷總結(jié) 151引言1.1編寫(xiě)目的本章節(jié)的主要內(nèi)容是對(duì)企業(yè)綜合管理系統(tǒng)的UI設(shè)計(jì)與實(shí)現(xiàn)的編寫(xiě)目的、讀者對(duì)象、術(shù)語(yǔ)解釋、執(zhí)行標(biāo)準(zhǔn)和相關(guān)文檔進(jìn)行介紹。確定用戶界面的整體風(fēng)格，初步設(shè)計(jì)軟件的框架結(jié)構(gòu)，為項(xiàng)目的詳細(xì)設(shè)計(jì)、實(shí)現(xiàn)、測(cè)試和維護(hù)提供依據(jù)。1.2讀者對(duì)象用戶、項(xiàng)目設(shè)計(jì)人員、項(xiàng)目開(kāi)發(fā)人員、項(xiàng)目測(cè)試人員、項(xiàng)目設(shè)計(jì)人員。1.3術(shù)語(yǔ)解釋名詞/術(shù)語(yǔ)/縮寫(xiě)詞解釋申請(qǐng)單要申請(qǐng)公司發(fā)放得東西所要填的申請(qǐng)得到某物的單子工單審批公司高級(jí)管理人員看你的申請(qǐng)單，覺(jué)得符合條件，對(duì)你的申請(qǐng)進(jìn)行批準(zhǔn)，叫做審批IBMFileNet包括結(jié)構(gòu)化數(shù)據(jù)、半結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù)PE流程引擎，主要負(fù)責(zé)環(huán)境中各流程的管理CE內(nèi)容引擎，主要負(fù)責(zé)做內(nèi)容管理1.4參考資料《用戶界面的設(shè)計(jì)、實(shí)現(xiàn)和評(píng)價(jià)》徐錫山等，國(guó)防科技大學(xué)，2003.7企業(yè)綜合管理系統(tǒng)需求分析說(shuō)明書(shū)》網(wǎng)絡(luò)資料：《軟件界面設(shè)計(jì)布局標(biāo)準(zhǔn)規(guī)范》作者：披頭2系統(tǒng)需求查詢數(shù)據(jù)字典修改數(shù)據(jù)字典刪除數(shù)據(jù)字典新增數(shù)據(jù)字典查詢數(shù)據(jù)字典修改數(shù)據(jù)字典刪除數(shù)據(jù)字典新增數(shù)據(jù)字典圖2-1系統(tǒng)功能結(jié)構(gòu)圖2.1綜合事務(wù)管理子系統(tǒng)在綜合事務(wù)管理子系統(tǒng)中，含有待辦事務(wù)、我申請(qǐng)的、我處理的及草稿箱四個(gè)模塊。各模塊含有其相應(yīng)的一些功能。待辦事務(wù)：該模塊主要負(fù)責(zé)當(dāng)前登陸的用戶查看并處理自己目前需要審批的各類(lèi)流程。我申請(qǐng)的：顧名思義，是用來(lái)展現(xiàn)當(dāng)前登陸用戶之前申請(qǐng)過(guò)的所有的流程，并且可以查看相應(yīng)的流程信息。我處理的：是用來(lái)展現(xiàn)當(dāng)前登陸用的審批過(guò)的所有的流程，并且可以查看相應(yīng)的流程信息。草稿箱：是當(dāng)前登陸用戶之前還沒(méi)有完成的或者還沒(méi)有提交的流程，需要進(jìn)一步完成并提交申請(qǐng)的流程列表。2.2流程管理子系統(tǒng)本系統(tǒng)處理的流程主要包括審批流程和工單流程兩類(lèi)流程。審批流程主要是用來(lái)發(fā)起相應(yīng)的工單流程，而工單流程審批結(jié)束后，會(huì)根據(jù)工單的類(lèi)型和填寫(xiě)的信息，更新對(duì)應(yīng)的臺(tái)帳數(shù)據(jù)庫(kù)表。審批流程：是負(fù)責(zé)發(fā)起對(duì)應(yīng)的一個(gè)或多個(gè)不同的工單流程。工單流程：當(dāng)工單流程審批結(jié)束后，則根據(jù)工單上填寫(xiě)的信息對(duì)所申請(qǐng)的資產(chǎn)分配給對(duì)應(yīng)的使用人。2.3臺(tái)帳管理子系統(tǒng)臺(tái)帳管理子系統(tǒng)主要是對(duì)企業(yè)內(nèi)部的資產(chǎn)進(jìn)行統(tǒng)一的管理，包括：企業(yè)的手機(jī)卡、3G上網(wǎng)卡、電話等資產(chǎn)，主要操作包括：增加、更新、查找和刪除并提供Excel批量導(dǎo)入資產(chǎn)的功能。在該系統(tǒng)中，我們可以查看到企業(yè)相應(yīng)資產(chǎn)的基本信息、使用人信息和空閑狀態(tài)等。通過(guò)該管理系統(tǒng)，企業(yè)將更清晰，更輕松的管理企業(yè)的資產(chǎn)。2.4系統(tǒng)管理子系統(tǒng)系統(tǒng)管理主要是對(duì)用戶權(quán)限進(jìn)行管理以及數(shù)據(jù)字典的管理，權(quán)限管理包括組織機(jī)構(gòu)管理、用戶組管理、角色管理和資源管理等。主要是提供對(duì)組織機(jī)構(gòu)、用戶、角色和資源的增刪查改，以及給用戶和角色配置對(duì)應(yīng)的系統(tǒng)資源，對(duì)用戶和角色做統(tǒng)一的系統(tǒng)權(quán)限控制，使他們登陸到應(yīng)用系統(tǒng)中僅獲取各自應(yīng)有權(quán)限。例如在組織機(jī)構(gòu)管理中，用戶將看到公司的各個(gè)部門(mén)以及各部門(mén)的用戶。并能夠?qū)τ脩暨M(jìn)行添加、導(dǎo)入、修改、刪除等各種權(quán)限操作。3界面需求根據(jù)本平臺(tái)是屬于公司員工用戶管理的平臺(tái)網(wǎng)站，所以網(wǎng)站采用的是簡(jiǎn)約的風(fēng)格，運(yùn)用綠色做主色調(diào)。界面簡(jiǎn)潔，系統(tǒng)界面主要參考了其他管理平臺(tái)布局，形成了一個(gè)界面簡(jiǎn)潔，功能明確且易于操作的平臺(tái)網(wǎng)站，做到實(shí)用，兼容性強(qiáng)。4總體設(shè)計(jì)思路這個(gè)平臺(tái)主要是為企業(yè)提供一個(gè)綜合的電子流程辦公信息平臺(tái)，因此網(wǎng)站的功能模塊應(yīng)該排版清晰簡(jiǎn)潔，以方便使用人員和公司領(lǐng)導(dǎo)對(duì)公司日常辦公，使申請(qǐng)、審批，發(fā)放變得更加快捷、方便，而且上級(jí)人員申請(qǐng)只許自己直接通過(guò)網(wǎng)絡(luò)審批就可以發(fā)放工單。

主頁(yè)將把網(wǎng)站的功能和特色展現(xiàn)出來(lái)，通過(guò)幾個(gè)模塊來(lái)完成申請(qǐng)和分配過(guò)程，其中包括我的事務(wù)、流程管理、臺(tái)帳管理、系統(tǒng)管理，同時(shí)顯示出顯示流程的名稱和流程的說(shuō)明，在頁(yè)面的最上邊顯示日期、登錄人和所屬的部門(mén)。網(wǎng)站在滿足用戶需求的，保證功能完善的同時(shí)，會(huì)采用經(jīng)典藍(lán)色背景主題，給用戶清晰專業(yè)的感覺(jué)，便于人機(jī)與功能之間的交互。4.1設(shè)計(jì)原則以用戶需求作為設(shè)計(jì)中心來(lái)源，從用戶需求出發(fā)來(lái)提高用戶體驗(yàn)；功能需求為主要任務(wù)，其次是功能實(shí)現(xiàn)的方法。在界面左邊將功能統(tǒng)一顯示出來(lái)，讓用戶一眼便能明白有需要的相關(guān)操作在哪里，有哪些功能應(yīng)該怎么操作，從而提高用戶體驗(yàn)的效果；明確設(shè)計(jì)風(fēng)格，公司內(nèi)部網(wǎng)站要簡(jiǎn)潔大方，清晰美觀；遵循客戶對(duì)任務(wù)和需求的見(jiàn)解，聽(tīng)取客戶提出的意見(jiàn)，盡量修改到客戶所要求的結(jié)果；合理布局，網(wǎng)站頁(yè)面主要有文字，圖片，色彩等元素組成。界面要有機(jī)制的組織這些元素，充分清晰的表現(xiàn)出網(wǎng)站主題和信息架構(gòu)，給用戶良好的操作界面和視覺(jué)效果；響應(yīng)系統(tǒng)整體設(shè)計(jì)，系統(tǒng)初步架構(gòu)擬定好之后。4.2布局設(shè)計(jì)主界面的布局要清晰整潔，讓用戶在主界面清晰的布局上能盡快找到自己所需要的功能，要能充分展現(xiàn)系統(tǒng)所提供的信息，加強(qiáng)用戶體驗(yàn)。界面實(shí)用且兼容性強(qiáng)，以方便用戶實(shí)用。頁(yè)面的左邊是母版頁(yè)，含網(wǎng)站名稱、歡迎信息等內(nèi)容。左邊是模塊導(dǎo)航欄，通過(guò)左邊導(dǎo)航欄進(jìn)入相關(guān)模塊，在右邊主頁(yè)面顯示，主頁(yè)面根據(jù)不同模塊顯示不同內(nèi)容。母版頁(yè)（網(wǎng)站名稱，歡迎信息、時(shí)間日期）我們的團(tuán)隊(duì)Dayup我們的團(tuán)隊(duì)Dayup左側(cè)當(dāng)前模塊名稱/江西微軟技術(shù)中心表4-1布局格式設(shè)計(jì)4.3交互設(shè)計(jì)交互設(shè)計(jì)主要包括網(wǎng)站設(shè)計(jì)過(guò)程中的整體架構(gòu)設(shè)計(jì)思路和網(wǎng)站的框架實(shí)現(xiàn)思路。通過(guò)對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì)，讓產(chǎn)品和用戶之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到使用者的目標(biāo)。4.3.1設(shè)計(jì)思路界面要形成對(duì)用戶希望的使用方式，尊重用戶及其目標(biāo)。在交互設(shè)計(jì)上集中體現(xiàn)在用戶操作上的更高效率，以及用戶的滿意度。最大可能性的提示信息，在需要的地方給出相應(yīng)的提示，方便用戶操作。最大化的可見(jiàn)價(jià)值和最小化的支持成本是完全處于客戶的角度上考慮的，盡量使客戶達(dá)到低投資高回報(bào)的要求。更快、更簡(jiǎn)單的實(shí)現(xiàn)以及簡(jiǎn)單的用戶手冊(cè)更能加強(qiáng)用戶體驗(yàn)，使其用的舒心，容易操作，不至于操作復(fù)雜。安全的設(shè)計(jì)，用戶的一些隱私信息部至于被泄露，從而使網(wǎng)站的安全性加強(qiáng)，不受有害信息侵入。4.3.2實(shí)現(xiàn)思路從計(jì)算機(jī)科學(xué)的角度來(lái)說(shuō)，將交互設(shè)計(jì)看作是解決數(shù)據(jù)存儲(chǔ)和進(jìn)行有效的訪問(wèn)的技術(shù)，在設(shè)計(jì)過(guò)程中注重從算法和信息架構(gòu)上對(duì)界面交互進(jìn)行優(yōu)化，注重邏輯性；從心理學(xué)的角度來(lái)說(shuō)，將交互設(shè)計(jì)看作是非理性人在有限的認(rèn)知資源下尋求問(wèn)題解決的過(guò)程，在設(shè)計(jì)過(guò)程中注重從人的外顯行為和內(nèi)在認(rèn)知范式上對(duì)界面進(jìn)行優(yōu)化，注重情境相關(guān)性。一、頁(yè)面信息規(guī)范標(biāo)題規(guī)范用于規(guī)定整個(gè)產(chǎn)品中所有不同層級(jí)不同功能的頁(yè)面應(yīng)該使用的標(biāo)題的規(guī)則。新窗口鏈接規(guī)范用于規(guī)定頁(yè)面鏈接是采用新窗口打開(kāi)還是本窗口打開(kāi)的規(guī)則。二、交互信息規(guī)范交互提示規(guī)范主要用于規(guī)定在交互過(guò)程中交互的方式及其信息提示，包括：預(yù)先信息提示所有交互進(jìn)行前需要提供充分給用戶的預(yù)先應(yīng)該知道的提示信息。表單提交類(lèi)表單提交的步驟，每個(gè)表單項(xiàng)的要求需要給出提示信息。（如申請(qǐng)?zhí)峤淮_認(rèn)。）差異化規(guī)則當(dāng)一個(gè)功能的規(guī)則與用戶習(xí)慣的規(guī)則具有一定的差異或比較復(fù)雜時(shí)，需要給出提示。或者給出幫助鏈接。2、 操作信息提示所有交互進(jìn)行中需要提供操作相關(guān)的提示。操作確認(rèn)提示一個(gè)操作涉及數(shù)據(jù)刪除，等需要謹(jǐn)慎操作的操作需要給出刪除確認(rèn)提示框。操作錯(cuò)誤提示當(dāng)用戶的操作不符合操作的規(guī)則，需要給出操作提示。（如評(píng)論字?jǐn)?shù)為0或超過(guò)限制字?jǐn)?shù)，搜索框未輸入內(nèi)容時(shí)提交）3、 結(jié)果信息提示交互進(jìn)行后給出結(jié)果反饋是應(yīng)該給出適當(dāng)?shù)奶崾静樵冾?lèi)結(jié)果任何信息列表、查詢結(jié)果，當(dāng)對(duì)應(yīng)信息無(wú)結(jié)果的時(shí)候需要給出有無(wú)結(jié)果狀態(tài)提示。保存類(lèi)結(jié)果一個(gè)表單是用戶提交保存數(shù)據(jù)的。如設(shè)置個(gè)人資料。提交保存后需要給出提示。成功綠色、失敗紅色、普通灰色。附加類(lèi)結(jié)果一個(gè)表單是對(duì)其他數(shù)據(jù)進(jìn)行附加的，如評(píng)論等。提交成功后應(yīng)直接跳轉(zhuǎn)到操作產(chǎn)生的結(jié)果展示部分。（如提交評(píng)論后應(yīng)該直接展示給用戶他提交的評(píng)論）三、通用控件規(guī)范當(dāng)有一些功能會(huì)被多個(gè)模塊復(fù)用的時(shí)候（如標(biāo)準(zhǔn)評(píng)論框、標(biāo)準(zhǔn)好友選擇器等），需要把這些功能提煉出來(lái)設(shè)計(jì)成通用控件被多個(gè)模塊共用。有了頁(yè)面信息規(guī)范、交互信息規(guī)范、通用控件規(guī)范就能保證頁(yè)面信息的一致、交互方式及提示的一致、通用功能模塊一致。從而保證產(chǎn)品的一致性，并提高產(chǎn)品質(zhì)量。5應(yīng)遵循的設(shè)計(jì)規(guī)范5.1布局規(guī)范界面窗口長(zhǎng)寬要合適，讓用戶賞心悅目；窗口上按鈕布局要與界面協(xié)調(diào)，不能太擁擠也不要太空曠；不要有過(guò)于刺眼的顏色，色彩不要過(guò)于繁雜；菜單深度不要太深，快捷鍵不要沖突；工具欄上的圖標(biāo)簡(jiǎn)潔美觀，盡量符合其實(shí)際含義；狀態(tài)欄上要顯示操作后窗體發(fā)生的變化。5.2色彩規(guī)范前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，最好少用深色，如大紅、大綠等；主色調(diào)為淺色，淺綠或者淡藍(lán)，淡色可以使人舒適，如果使用其他顏色，主色要柔和，具有親和力與磁力，堅(jiān)決杜絕刺目的顏色;字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。5.3字體使用規(guī)范目錄頁(yè)用小字號(hào)，精致簡(jiǎn)潔整齊；正文頁(yè)用大字號(hào)。為的是讓用戶看得舒坦；慎用不容易看清楚的楷體，楷體的作用等于圖片，主要起美化版面的作用;多用對(duì)搜索引擎友好的標(biāo)粗，來(lái)表示重點(diǎn)。5.4交互方式一致性規(guī)范打開(kāi)鏈接一律在新選項(xiàng)卡中打開(kāi)，避免用戶當(dāng)前信息丟失；窗口長(zhǎng)寬比例要協(xié)調(diào)。5.5按鈕操作規(guī)范按鈕大小基本相近，忌用太長(zhǎng)的名稱，免得占用過(guò)多的界面位置;長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度；按鈕的大小要與界面的大小和空間要協(xié)調(diào)；避免空曠的界面上放置很大的按鈕。5.6其他規(guī)范首頁(yè)更新成本a） 首頁(yè)設(shè)計(jì)不能只考慮美觀、協(xié)調(diào)，要考慮24小時(shí)更新一遍之要求。更新是網(wǎng)站的生命，一定要最大限度地降低首頁(yè)更新成本。b） 交叉自動(dòng)同步更新的設(shè)計(jì)，可有效降低各種首頁(yè)更新成本，給讀者內(nèi)容豐富即時(shí)的感覺(jué)。c） 更新即時(shí)的首頁(yè)是網(wǎng)站的資源，因?yàn)槭琴Y源，更多的標(biāo)題會(huì)擁上這個(gè)首頁(yè)。如此，正循環(huán)，這個(gè)首頁(yè)也就火了。更新不即時(shí)的首頁(yè)是網(wǎng)站的雞肋，會(huì)越來(lái)越寂寞，最終會(huì)被荒廢。d） 每個(gè)首頁(yè)的設(shè)計(jì)成至少要有一個(gè)讀者點(diǎn)擊進(jìn)去的理由。即時(shí)更新比獨(dú)家內(nèi)容成本低。6界面關(guān)系圖或工作流圖6.1管理員登陸

圖6-1管理員登陸界面關(guān)系圖圖6-1管理員登陸界面關(guān)系圖,江西微軟技術(shù)中心資源管理、角色資當(dāng)?shù)卿浀挠脩魹楣芾韱T時(shí)候，管理員能看到以權(quán)限管理模塊下的角色管理、源界面，統(tǒng)一用戶管理界面下的用戶管理、群組管理以及組織單元管理界面。資源管理、角色資6?2普通用戶登錄圖6-2圖6-2普通用戶登錄界面圖當(dāng)?shù)卿浀挠脩魹槠胀ㄓ脩魰r(shí)，用戶能查看自己的用戶信息并根據(jù)需要修改用戶信息。同時(shí)用戶也可以根據(jù)管理員分配的資源權(quán)限訪問(wèn)相應(yīng)的資源模塊。.7界面設(shè)計(jì)成果7界面設(shè)計(jì)成果1=1本系統(tǒng)界面主要分為3個(gè)交互展示部分，即主標(biāo)題欄的相關(guān)操作和根據(jù)登錄用戶角色的不同而有相應(yīng)區(qū)分的功能菜單部分以及根據(jù)不同功能菜單定制的展現(xiàn)頁(yè)面。

7.1主界面圖7-1主界面布局上圖為平臺(tái)主界面格局，主界面上方為簡(jiǎn)單的一些基本操作和個(gè)人信息，退出系統(tǒng)等按鍵，下方左側(cè)為功能區(qū)，右邊為實(shí)際操作的工作區(qū)。7.2統(tǒng)一用戶管理子界面圖7-2統(tǒng)一用戶管理界面上圖為統(tǒng)一用戶管理界面，左邊功能欄列出了當(dāng)前登錄用戶所擁有的權(quán)限功能，用戶可以點(diǎn)擊進(jìn)入到相關(guān)模塊進(jìn)行管理操作。例如在組織機(jī)構(gòu)管理中，用戶將看到公司的各個(gè)部門(mén)以及各部門(mén)的用戶。并能夠?qū)τ脩暨M(jìn)行添加、導(dǎo)入、修改、刪除等各種權(quán)限操作。

7.3我的事務(wù)子界面圖7-3我的事務(wù)子界面上圖為本平臺(tái)我的事務(wù)界面，本界面保持左邊功能欄、母版頁(yè)不變，以表格的方式列出我的事務(wù)界面，用戶可以再該界面查詢待辦事項(xiàng)、我申請(qǐng)的、我處理的以及草稿箱，可以在該界面通過(guò)相關(guān)按鈕對(duì)用戶需要做的事、已經(jīng)做完的和還沒(méi)做完的事進(jìn)行查詢、修改的功能。7.4流程管理子界面圖7-4流程管理頁(yè)面上圖為流程管理