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

1、 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。1 / 17工資管理系統(tǒng)用戶界面設(shè)計(jì)報(bào)告文件標(biāo)識(shí)：Company-Project-SD-UI當(dāng)前版本：X.Y作 者：文件狀態(tài)： 草稿 正式發(fā)布 正在修改完成日期：2012-12-25機(jī)構(gòu)公開(kāi)信息 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。版 本 歷 史版本/狀態(tài)作者參與者起止日期備注 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。 目目目 錄錄錄 0. 文檔介紹文檔介紹.40.1 文檔目的.40.2 文檔范圍.40.3 讀者對(duì)象.40.4 參考文獻(xiàn).40.5 術(shù)語(yǔ)與縮寫(xiě)解釋.41. 應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范.52.

2、界面的關(guān)系圖和工作流程圖界面的關(guān)系圖和工作流程圖.53. 主界面主界面.54. 子界面子界面 A .55. 子界面子界面 B.56. 美學(xué)設(shè)計(jì)美學(xué)設(shè)計(jì).67. 界面資源設(shè)計(jì)界面資源設(shè)計(jì).68. 其他其他.6 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。0.0. 文檔介紹文檔介紹0.10.1 文檔目的文檔目的界面設(shè)計(jì)是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對(duì)軟件的使用界面進(jìn)行美化優(yōu)化規(guī)范化的設(shè)計(jì)分支。界面設(shè)計(jì)文檔可以讓用戶對(duì)軟件產(chǎn)品有了更直觀的了解，并且了解各個(gè)模塊的設(shè)計(jì)及用意。0.20.2 文檔范圍文檔范圍文檔包括員工管理界面設(shè)計(jì)，客戶管理界面設(shè)計(jì)，產(chǎn)品管理界面設(shè)計(jì)，其中各個(gè)界面包括框架設(shè)

3、計(jì)，編程設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動(dòng)條及狀態(tài)欄設(shè)計(jì)。0.30.3 讀者對(duì)象讀者對(duì)象購(gòu)買系統(tǒng)的顧客、系統(tǒng)的所有者、開(kāi)發(fā)者以及管理員。0.40.4 參考文獻(xiàn)參考文獻(xiàn) 1 張海藩， 軟件工程導(dǎo)論（第 5 版） ，清華大學(xué)出版社，1900 年 01 月2 楊培添， 軟件界面設(shè)計(jì) ，電子工業(yè)出版社，2007 年 02 月3 林銳， Web 軟件用戶界面設(shè)計(jì)指南 ，電子工業(yè)出版社，2005 年 5 月0.50.5 術(shù)語(yǔ)與縮寫(xiě)解釋術(shù)語(yǔ)與縮寫(xiě)解釋縮寫(xiě)、術(shù)語(yǔ)縮寫(xiě)、術(shù)語(yǔ)解解 釋釋SPP精簡(jiǎn)并行過(guò)程，Simplified Parallel ProcessSD系統(tǒng)設(shè)計(jì)，System D

4、esignKISS保持簡(jiǎn)單，Keep It Simple And Stupid 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。1.1. 應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范軟件界面的設(shè)計(jì)，既要從外觀上進(jìn)行創(chuàng)意以到達(dá)吸引眼球的目的，還要結(jié)合圖形和版面設(shè)計(jì)的相關(guān)原理，從而使得軟件設(shè)計(jì)變成了一門獨(dú)特的藝術(shù)。軟件用戶界面的設(shè)計(jì)應(yīng)遵循以下幾個(gè)基本原則： 用戶導(dǎo)向原則：用戶導(dǎo)向原則：明確到底誰(shuí)是使用者，要站在用戶的觀點(diǎn)和立場(chǎng)上來(lái)考慮設(shè)計(jì)軟件。要作到這一點(diǎn)，必須要和用戶來(lái)溝通，了解他們的需求、目標(biāo)、期望和偏好等。界面的設(shè)計(jì)者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會(huì)在視覺(jué)方面

5、有欠缺（如色盲） ，對(duì)很多的顏色分辨不清；有的用戶的聽(tīng)覺(jué)也會(huì)有障礙，對(duì)于軟件的語(yǔ)音提示反映遲鈍；而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)很初級(jí)，對(duì)于復(fù)雜一點(diǎn)的操作會(huì)感覺(jué)到很費(fèi)力。另外，用戶使用的計(jì)算機(jī)機(jī)器配置也是千差萬(wàn)別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有不同。設(shè)計(jì)者如果忽視了這些差別，設(shè)計(jì)出的界面在不同的機(jī)器上顯示就會(huì)造成混亂。 KISSKISS 原則：原則：KISS 原則就是Keep It Simple And Stupid的縮寫(xiě)，簡(jiǎn)潔和易于操作是界面設(shè)計(jì)的最重要的原則。操作設(shè)計(jì)盡量簡(jiǎn)單，并且有明確的操作提示；軟件所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說(shuō)明等。 布局控制：布局控

6、制：關(guān)于界面排版布局方面，很多界面設(shè)計(jì)者重視不夠，界面排版設(shè)計(jì)的過(guò)于死板，甚至照抄他人。如果界面的布局凌亂，僅僅把大量的信息堆集在頁(yè)面上，會(huì)干擾瀏覽者的閱讀。一般在界面設(shè)計(jì)上所要遵循的原理有：視視覺(jué)覺(jué)平平衡衡：根據(jù)視覺(jué)原理，圖形與一塊文字相比較，圖形的視覺(jué)作用要大一些。所以，為了達(dá)到視覺(jué)平衡，在設(shè)計(jì) 界面時(shí)需要以更多的文字來(lái)平衡一幅圖片。另外，按照中國(guó)人的閱讀習(xí)慣是從左到右，從上到下，因此視覺(jué)平衡也要遵循這個(gè)道理。 色色彩彩的的搭搭配配和和文文字字的的可可閱閱讀讀性性 ：顏色是影響界面的重要因素，不同的顏色對(duì)人的感覺(jué)有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽(yáng)光，是一

7、種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響，為界面設(shè)計(jì)選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。為方便閱讀軟件上的信息，可以參考報(bào)紙的編排方式將界面的內(nèi)容分欄設(shè)計(jì)，甚至兩欄也要比一滿頁(yè)的視覺(jué)效果要好。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（中文宋體）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文。如果在整個(gè)頁(yè)面使用一些特殊字體（如華文彩云，華文行楷），這樣讀者閱讀起來(lái)感覺(jué)一定很糟糕。該類特殊字體如果在頁(yè)面上大量使用，會(huì)使得閱讀頗為費(fèi)力，瀏覽者的眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其他頁(yè)

8、面。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。 和和諧諧與與一一致致性性 ：通過(guò)對(duì)軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計(jì)良好的 界面看起來(lái)應(yīng)該是和諧的。一致的結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對(duì)軟件的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在軟件中自己所需要的部分；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會(huì)在整個(gè)軟件的各種功能操作。當(dāng)然，軟件設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版軟件，會(huì)給瀏覽者帶來(lái)新鮮的感覺(jué)。 個(gè)個(gè)性性化化：符合網(wǎng)絡(luò)文化企業(yè)軟件不同于傳統(tǒng)的企業(yè)商務(wù)活動(dòng)，要符合Interne

9、t 網(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ò)用戶的使用環(huán)境所蘊(yùn)涵的思維模式與坐在辦公室里西裝革履的時(shí)候大相徑庭。因此，整個(gè)互聯(lián)網(wǎng)的文化是一種休閑的、非正式性的、輕松活潑的文化。在軟件上使用幽默的網(wǎng)絡(luò)語(yǔ)言，創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍會(huì)使軟件的訪問(wèn)量大增。塑造軟件個(gè)性另外，軟件的整體風(fēng)格和整體氣氛表達(dá)要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè) CI。2.2. 界面的關(guān)

10、系圖和工作流程圖界面的關(guān)系圖和工作流程圖設(shè)計(jì)流程：1、 確定軟件的整體風(fēng)格：由于本系統(tǒng)軟件設(shè)計(jì)的是面向中小型企事業(yè)單位用的軟件，為了能更方便管理信息，所有采用簡(jiǎn)潔清晰的設(shè)計(jì)風(fēng)格。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。工資管理系統(tǒng)系統(tǒng)管理用戶信息管理工資信息管理用戶出勤信息管理用戶登錄修改密碼注冊(cè)推出系統(tǒng)用戶權(quán)限管理員工基本信息 增員工基本信息 刪員工基本信息 改基本工資信息 獎(jiǎng)懲信息的查刪扣稅款信息查刪出勤信息的查詢及記錄工資查詢打印工資條 2、界面色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON 做點(diǎn)綴。3、確定界面設(shè)計(jì)的工具 ：用 Microsoft Visual St

11、udio 2008 來(lái)設(shè)計(jì)整個(gè) 軟件的界面設(shè)計(jì)。4、編寫(xiě) JSP 語(yǔ)言3.3. 主界面主界面進(jìn)入登陸模塊輸入用戶名、密碼注冊(cè)新用戶注冊(cè)界面 顧客身份公共用戶界面驗(yàn)證是否有效注冊(cè)成功員工顧客管理員登陸成功用戶界面 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。當(dāng)密碼錯(cuò)誤時(shí)自動(dòng)提醒出錯(cuò)： 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。4.4. 子界面子界面 A A登入界面登入界面系統(tǒng)管理用戶登錄修改密碼注冊(cè)退出系統(tǒng)該模塊的主要功能：1、用戶登錄：2、修改密碼3、注冊(cè)4、退出系統(tǒng)。該模塊功能的操作方式：如果是新用戶，通過(guò)注冊(cè)得到一個(gè)用戶名，接著輸入正確的用戶名和登陸密碼進(jìn)入登陸界面，待操作完畢后

12、退出系統(tǒng)。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。5.5. 子界面子界面 B B管理界面管理界面用戶信息管理工資信息管理用戶出勤信息管理用戶權(quán)限管理員工基本信息 增員工基本信息 刪員工基本信息 改基本工資信息 獎(jiǎng)懲信息的查刪扣稅款信息查刪出勤信息的查詢及記錄工資查詢打印工資條 管理界面該模塊的主要功能：該模塊的主要功能： 1、用戶信息管理2、工資信息管理3、用戶出勤信息管理該模塊功能的操作方式：該模塊功能的操作方式：管理員通過(guò)此功能來(lái)對(duì)員工的工資信息進(jìn)行管理，做好員工工資的管理工作?？梢赃M(jìn)行一些基本的操作：1、用戶權(quán)限管理 2、員工基本信息 增 3、員工基本信息 刪 4、員工基本信息

13、 改用戶信息管理用戶權(quán)限管理員工基本信息 增員工基本信息 刪員工基本信息 改同時(shí)可以作進(jìn)一步的操作：1、基本工資信息 2、獎(jiǎng)懲信息的查刪 3、扣稅款信息的查刪 4、工資查詢 5、打印工資條以及出勤信息的查詢及記錄。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。 工資信息管理基本工資信息 獎(jiǎng)懲信息的查刪扣稅款信息查刪工資查詢打印工資條 用戶出勤信息管理出勤信息的查詢及記錄6.6. 美學(xué)設(shè)計(jì)美學(xué)設(shè)計(jì)確定網(wǎng)站的整體風(fēng)格 ：由于本系統(tǒng)軟件設(shè)計(jì)的是面向中小型企事業(yè)單位用的軟件，為了能更方便管理信息，所有采用簡(jiǎn)潔清晰的設(shè)計(jì)風(fēng)格。界面色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON 做點(diǎn)綴。 界

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

15、者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。 忌忌粉粉顏色淺固然顯的干凈，但如果對(duì)比過(guò)弱，整得蒼白無(wú)力了，就象病夫一樣無(wú)可救藥。 藍(lán)藍(lán)色色忌忌純純，綠綠色色忌忌黃黃，紅紅色色忌忌艷艷。（4 4）幾幾種種固固定定搭搭配配 藍(lán)藍(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)題欄，文字內(nèi)容背景為淺灰色。 界界面面設(shè)設(shè)計(jì)計(jì)理理念念（1 1）內(nèi)內(nèi)容容決決定定形

16、形式式 先把內(nèi)容充實(shí)上，再分區(qū)塊，再定色調(diào)，再處理細(xì)節(jié)。（2 2）先先整整體體，后后局局部部，最最后后回回歸歸到到整整體體。 全局考慮，把能填上的都填上，占位置。然后定基調(diào)，分模塊設(shè)計(jì)。最后調(diào)整不滿意的幾個(gè)局部細(xì)節(jié)。（3 3）功功能能決決定定設(shè)設(shè)計(jì)計(jì)方方向向 看軟件的用途，決定設(shè)計(jì)思路 .商業(yè)性的就要突出贏利目的；政府型的就要突出形象和權(quán)威性的文章；教育性的，就要突出師資和課程。7.7. 界面資源設(shè)計(jì)界面資源設(shè)計(jì)7.17.1 圖標(biāo)資源圖標(biāo)資源 7.27.2 圖像資源圖像資源 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。數(shù)據(jù)流程圖數(shù)據(jù)流程圖 DFD:DFD: 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。對(duì)應(yīng)對(duì)應(yīng) E-RE-R 圖如下圖如下 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。 真誠(chéng)為您提供優(yōu)質(zhì)參考資料，若有不當(dāng)之處，請(qǐng)指正。7.37.3 界面組件界面組件組件：組件：將某一特定的 web 應(yīng)用功能進(jìn)行封裝，包括數(shù)據(jù)和數(shù)據(jù)顯示。組件有：Action 類、meta 文件8.8. 其他其他 溫馨提示：最好仔細(xì)閱讀后才下載使用，萬(wàn)分感謝！