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

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

圖6-1管理員登陸界面關系圖圖6-1管理員登陸界面關系圖,江西微軟技術中心資源管理、角色資當登錄的用戶為管理員時候，管理員能看到以權限管理模塊下的角色管理、源界面，統一用戶管理界面下的用戶管理、群組管理以及組織單元管理界面。資源管理、角色資6?2普通用戶登錄圖6-2圖6-2普通用戶登錄界面圖當登錄的用戶為普通用戶時，用戶能查看自己的用戶信息并根據需要修改用戶信息。同時用戶也可以根據管理員分配的資源權限訪問相應的資源模塊。.7界面設計成果7界面設計成果1=1本系統界面主要分為3個交互展示部分，即主標題欄的相關操作和根據登錄用戶角色的不同而有相應區分的功能菜單部分以及根據不同功能菜單定制的展現頁面。

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

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