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

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

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

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

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

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