工資管理系統(tǒng) 用戶界面設(shè)計(jì)

《工資管理系統(tǒng) 用戶界面設(shè)計(jì)》由會員分享，可在線閱讀，更多相關(guān)《工資管理系統(tǒng) 用戶界面設(shè)計(jì)（15頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、word 工資管理系統(tǒng) 用戶界面設(shè)計(jì)報(bào)告 文件狀態(tài)： [√] 草稿 [ ] 正式發(fā)布 [ ]正在修改 文件標(biāo)識： pany-Project-SD-UI 當(dāng)前版本： 作 者： 完成日期： 2012-12-25 機(jī)構(gòu)公開信息 版 本 歷 史 版本/狀態(tài) 作者 參與者 起止日期 備注 目 錄 0. 文檔介紹4 0.1 文檔目的4 0.2 文檔圍4 0.3 讀者對象4 0.4 參考文獻(xiàn)4 0.5 術(shù)語與縮寫解釋

2、4 1. 應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)5 2. 界面的關(guān)系圖和工作流程圖5 3. 主界面5 4. 子界面A5 5. 子界面B5 6. 美學(xué)設(shè)計(jì)6 7. 界面資源設(shè)計(jì)6 8. 其他6 0. 文檔介紹 0.1 文檔目的 界面設(shè)計(jì)是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對軟件的使用界面進(jìn)行美化優(yōu)化規(guī)化的設(shè)計(jì)分支。界面設(shè)計(jì)文檔可以讓用戶對軟件產(chǎn)品有了更直觀的了解，并且了解各個模塊的設(shè)計(jì)及用意。 0.2 文檔圍 文檔包括員工管理界面設(shè)計(jì)，客戶管理界面設(shè)計(jì)，產(chǎn)品管理界面設(shè)計(jì)，其中各個界面包括框架設(shè)計(jì)，編程設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動條及狀態(tài)欄設(shè)計(jì)。 0.

3、3 讀者對象 購買系統(tǒng)的顧客、系統(tǒng)的所有者、開發(fā)者以及管理員。 0.4 參考文獻(xiàn) [1] 海藩，《軟件工程導(dǎo)論（第5版）》，清華大學(xué)，1900年01月 [2] 培添，《軟件界面設(shè)計(jì)》，電子工業(yè)，2007年02月 [3] 林銳，《Web軟件用戶界面設(shè)計(jì)指南》，電子工業(yè)，2005年5月 0.5 術(shù)語與縮寫解釋 縮寫、術(shù)語 解 釋 SPP 精簡并行過程，Simplified Parallel Process SD 系統(tǒng)設(shè)計(jì)，System Design KISS 保持簡單，Keep It Simple And Stupid … 1. 應(yīng)當(dāng)遵循的界面設(shè)計(jì)

4、規(guī) 軟件界面的設(shè)計(jì)，既要從外觀上進(jìn)行創(chuàng)意以到達(dá)吸引眼球的目的，還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理，從而使得軟件設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。軟件用戶界面的設(shè)計(jì)應(yīng)遵循以下幾個基本原則： u 用戶導(dǎo)向原則： 明確到底誰是使用者，要站在用戶的觀點(diǎn)和立場上來考慮設(shè)計(jì)軟件。要作到這一點(diǎn)，必須要和用戶來溝通，了解他們的需求、目標(biāo)、期望和偏好等。界面的設(shè)計(jì)者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會在視覺方面有欠缺（如色盲），對很多的顏色分辨不清；有的用戶的聽覺也會有障礙，對于軟件的語音提示反映遲鈍；而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)很初級，對于復(fù)雜一點(diǎn)的操作會感覺到很費(fèi)力。另外，用戶

5、使用的計(jì)算機(jī)機(jī)器配置也是千差萬別，包括顯卡、聲卡、存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會有不同。設(shè)計(jì)者如果忽視了這些差別，設(shè)計(jì)出的界面在不同的機(jī)器上顯示就會造成混亂。 u KISS原則： KISS原則就是"Keep It Simple And Stupid"的縮寫，簡潔和易于操作是界面設(shè)計(jì)的最重要的原則。操作設(shè)計(jì)盡量簡單，并且有明確的操作提示；軟件所有的容和服務(wù)都在顯眼處向用戶予以說明等。 u 布局控制： 關(guān)于界面排版布局方面，很多界面設(shè)計(jì)者重視不夠，界面排版設(shè)計(jì)的過于死板，甚至照抄他人。如果界面的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。一般在界面設(shè)計(jì)上所要遵循的原理有

6、： 視覺平衡： 根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達(dá)到視覺平衡，在設(shè)計(jì)界面時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習(xí)慣是從左到右，從上到下，因此視覺平衡也要遵循這個道理。 u 色彩的搭配和文字的可閱讀性： 顏色是影響界面的重要因素，不同的顏色對人的感覺有不同的影響，例如： 2 紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產(chǎn)生什么影響，為界面設(shè)計(jì)選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。 2 為方便閱讀軟件上的信息，可以參考報(bào)紙的編排方式將界面的容分

7、欄設(shè)計(jì)，甚至兩欄也要比一滿頁的視覺效果要好。 2 另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（中文宋體）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字體（如華文彩云，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。該類特殊字體如果在頁面上大量使用，會使得閱讀頗為費(fèi)力，瀏覽者的眼睛很快就會疲勞，不得不轉(zhuǎn)移到其他頁面。 u 和諧與一致性： 通過對軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計(jì)良好的界面看起來應(yīng)該是和諧的。。 一致的結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對軟件的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在軟

8、件中自己所需要的部分；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會在整個軟件的各種功能操作。當(dāng)然，軟件設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風(fēng)格，或者隨著時間的推移不斷的改版軟件，會給瀏覽者帶來新鮮的感覺。 u 個性化： 2 符合網(wǎng)絡(luò)文化 企業(yè)軟件不同于傳統(tǒng)的企業(yè)商務(wù)活動，要符合Internet網(wǎng)絡(luò)文化的要求。首先，網(wǎng)絡(luò)最早是非正式性、非商業(yè)化的，只是科研人員用來交流信息。其次，網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒有打印出來閱讀，網(wǎng)絡(luò)上的交流具有隱蔽性，誰也不知道對方的真實(shí)身份。另外，許多人在上網(wǎng)的時候是在家中或網(wǎng)吧等一些比較休閑，比較隨意的環(huán)境下。此時網(wǎng)絡(luò)用戶的使用環(huán)

9、境所蘊(yùn)涵的思維模式與坐在辦公室里西裝革履的時候大相徑庭。因此，整個互聯(lián)網(wǎng)的文化是一種休閑的、非正式性的、輕松活潑的文化。在軟件上使用幽默的網(wǎng)絡(luò)語言，創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍會使軟件的訪問量大增。 2 塑造軟件個性 另外，軟件的整體風(fēng)格和整體氣氛表達(dá)要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè)CI。 2. 界面的關(guān)系圖和工作流程圖 設(shè)計(jì)流程： 1、 確定軟件的整體風(fēng)格：由于本系統(tǒng)軟件設(shè)計(jì)的是面向中小型企事業(yè)單位用的軟件，為了能更方便管理信息，所有采用簡潔清晰的設(shè)計(jì)風(fēng)格。 2、 界面色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴。 3、 確定界

10、面設(shè)計(jì)的工具：用Microsoft Visual Studio 2008來設(shè)計(jì)整個軟件的界面設(shè)計(jì)。 4、 編寫JSP語言 3. 主界面 進(jìn)入登陸模塊 輸入用戶名、密碼 注冊新用戶 注冊界面 顧客身份 公共用戶界面 驗(yàn)證是否有效 注冊成功 員工 顧客 管理員 登陸成功 用戶界面 當(dāng)密碼錯誤時自動提醒出錯： 登入界面 該模塊的主要功能：1、用戶登錄： 2、修改密碼 3、注冊 4、退出系統(tǒng)。 該模塊功能的操作方式：如果是新用戶，通過注冊得到一個用戶名，接著輸入正確的用戶名和登陸密碼進(jìn)入登陸界面，待操作完畢后退出系統(tǒng)。

11、 管理界面 該模塊的主要功能： 1、用戶信息管理 2、工資信息管理 3、用戶出勤信息管理 該模塊功能的操作方式：管理員通過此功能來對員工的工資信息進(jìn)行管理，做好員工工資的管理工作。 可以進(jìn)行一些基本的操作：1、用戶權(quán)限管理2、員工基本信息 增3、員工基本信息 刪4、員工基本信息 改 同時可以作進(jìn)一步的操作：1、基本工資信息2、獎懲信息的查刪3、扣稅款信息的查刪4、工資查詢5、打印工資條以及出勤信息的查詢及記錄。 確定的整體風(fēng)格：由于本系統(tǒng)軟件設(shè)計(jì)的是面向中小型企事業(yè)單位用的軟件，為了能更方便管理信息，所有采用簡潔清晰的設(shè)計(jì)風(fēng)格。 界

12、面色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴。 u 界面配色基本概念 （1）白紙黑字是永遠(yuǎn)的主題，誰都說不出不好來。 （2）界面最常用流行色 ·蘭色——白云，沉靜整潔的顏色。 ·綠色——綠白相間，雅致而有生氣。 ·橙色——活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)。 ·暗紅——寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色。 （3）顏色的忌諱 ·忌臟——背景與文字容對比不強(qiáng)烈，灰暗的背景令人沮喪！ ·忌純——艷麗的純色對人的刺激太強(qiáng)烈抗議，缺乏涵。 ·忌跳——再好看的顏色，也不能脫離整體。脫離群眾是自取其辱！ ·忌花——要有一種主色貫穿其中，主色并不時面積最大的顏色，而

13、是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。 ·忌粉——顏色淺固然顯的干凈，但如果對比過弱，整得蒼白無力了，就象病夫一樣無可救藥。 ·藍(lán)色忌純，綠色忌黃，紅色忌艷。 （4）幾種固定搭配 ·藍(lán)白橙：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴。 ·綠白蘭：綠為主調(diào)。白底，綠標(biāo)題欄，蘭色或橙色按鈕或ICON做點(diǎn)綴。 ·橙白紅：橙為主調(diào)。白底，橙標(biāo)題欄，暗紅或桔紅色按鈕或ICON做點(diǎn)綴。 ·暗紅黑：暗紅主調(diào)。黑或灰底，暗紅標(biāo)題欄，文字容背景為淺灰色。 u 界面設(shè)計(jì)理念 （1）容決定形式 先把容充實(shí)上，再分區(qū)塊，再定色調(diào)，再處理細(xì)節(jié)。

14、 （2）先整體，后局部，最后回歸到整體。 全局考慮，把能填上的都填上，占位置。然后定基調(diào)，分模塊設(shè)計(jì)。最后調(diào)整不滿意的幾個局部細(xì)節(jié)。 （3）功能決定設(shè)計(jì)方向 看軟件的用途，決定設(shè)計(jì)思路.商業(yè)性的就要突出贏利目的；政府型的就要 突出形象和權(quán)威性的文章；教育性的，就要突出師資和課程。 7. 界面資源設(shè)計(jì) 7.1 圖標(biāo)資源 7.2 圖像資源 數(shù)據(jù)流程圖DFD: 對應(yīng)E-R圖如下 7.3 界面組件 組件：將某一特定的web應(yīng)用功能進(jìn)行封裝，包括數(shù)據(jù)和數(shù)據(jù)顯示。 組件有：Action類、meta文件…… 8. 其他 15 / 15