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

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

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

2、寫(xiě)解釋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ì)是為了滿(mǎn)足軟件專(zhuān)業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對(duì)軟件的使用界面進(jìn)行美化優(yōu)化規(guī)化的設(shè)計(jì)分支。界面設(shè)計(jì)文檔可以讓用戶(hù)對(duì)軟件產(chǎn)品有了更直觀的了解，并且了解各個(gè)模塊的設(shè)計(jì)及用意。 0.2 文檔圍 文檔包括員工管理界面設(shè)計(jì)，客戶(hù)管理界面設(shè)計(jì)，產(chǎn)品管理界面設(shè)計(jì)，其中各個(gè)界面包括框架設(shè)計(jì)，編程設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動(dòng)條及狀態(tài)欄設(shè)計(jì)。

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

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

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

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

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

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

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

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

11、作完畢后退出系統(tǒng)。 5.子界面B 管理界面 該模塊的主要功能： 1、用戶(hù)信息管理 2、工資信息管理 3、用戶(hù)出勤信息管理 該模塊功能的操作方式：管理員通過(guò)此功能來(lái)對(duì)員工的工資信息進(jìn)行管理，做好員工工資的管理工作。 可以進(jìn)行一些基本的操作：1、用戶(hù)權(quán)限管理2、員工基本信息 增3、員工基本信息 刪4、員工基本信息 改 同時(shí)可以作進(jìn)一步的操作：1、基本工資信息2、獎(jiǎng)懲信息的查刪3、扣稅款信息的查刪4、工資查詢(xún)5、打印工資條以及出勤信息的查詢(xún)及記錄。 6.美學(xué)設(shè)計(jì) 確定的整體風(fēng)格：由于本系統(tǒng)軟件設(shè)計(jì)的是面向中小型企事業(yè)單位用的軟件，為了能更方便管

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

13、 　　·忌花——要有一種主色貫穿其中，主色并不時(shí)面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。 ·忌粉——顏色淺固然顯的干凈，但如果對(duì)比過(guò)弱，整得蒼白無(wú)力了，就象病夫一樣無(wú)可救藥。 　·藍(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ì)

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