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

工資管理系統(tǒng)用戶界面設(shè)計報告文件狀態(tài)：文件標識：Company-Project-SD-UI[V]草稿當前版本：X.Y[]正式發(fā)布作者：[]正在修改完成日期：2012-12-25機構(gòu)公開信息版本歷史目錄TOC\o"1-5"\h\z\o"CurrentDocument"0.文檔介紹4\o"CurrentDocument"0.1文檔目的4\o"CurrentDocument"0.2文檔范圍4\o"CurrentDocument"0.3讀者對象4\o"CurrentDocument"0.4參考文獻4\o"CurrentDocument"0.5術(shù)語與縮寫解釋4\o"CurrentDocument"應(yīng)當遵循的界面設(shè)計規(guī)范6\o"CurrentDocument"界面的關(guān)系圖和工作流程圖8\o"CurrentDocument"主界面10子界面A11子界面B11\o"CurrentDocument"美學設(shè)計13\o"CurrentDocument"界面資源設(shè)計15其他190.文檔介紹0.1文檔目的界面設(shè)計是為了滿足軟件專業(yè)化標準化的需求而產(chǎn)生的對軟件的使用界面進行美化優(yōu)化規(guī)范化的設(shè)計分支。界面設(shè)計文檔可以讓用戶對軟件產(chǎn)品有了更直觀的了解，并且了解各個模塊的設(shè)計及用意。0.2文檔范圍文檔包括員工管理界面設(shè)計，客戶管理界面設(shè)計，產(chǎn)品管理界面設(shè)計，其中各個界面包括框架設(shè)計，編程設(shè)計，按鈕設(shè)計，面板設(shè)計，菜單設(shè)計，標簽設(shè)計，圖標設(shè)計，滾動條及狀態(tài)欄設(shè)計。0.3讀者對象購買系統(tǒng)的顧客、系統(tǒng)的所有者、開發(fā)者以及管理員。0.4參考文獻張海藩，《軟件工程導論（第5版）》，清華大學出版社，1900年01月楊培添，《軟件界面設(shè)計》，電子工業(yè)出版社，2007年02月林銳，《Web軟件用戶界面設(shè)計指南》，電子工業(yè)出版社，2005年5月0.5術(shù)語與縮寫解釋縮寫、術(shù)語解釋

SPP精簡并行過程，SimplifiedParallelProcessSD系統(tǒng)設(shè)計，SystemDesignKISS保持簡單，KeepItSimpleAndStupid???1.應(yīng)當遵循的界面設(shè)計規(guī)范軟件界面的設(shè)計，既要從外觀上進行創(chuàng)意以到達吸引眼球的目的，還要結(jié)合圖形和版面設(shè)計的相關(guān)原理，從而使得軟件設(shè)計變成了一門獨特的藝術(shù)。軟件用戶界面的設(shè)計應(yīng)遵循以下幾個基本原則：用戶導向原則：明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設(shè)計軟件。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標、期望和偏好等。界面的設(shè)計者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會在視覺方面有欠缺（如色盲），對很多的顏色分辨不清；有的用戶的聽覺也會有障礙，對于軟件的語音提示反映遲鈍；而且相當一部分用戶的計算機使用經(jīng)驗很初級，對于復雜一點的操作會感覺到很費力。另外，用戶使用的計算機機器配置也是千差萬別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會有不同。設(shè)計者如果忽視了這些差別，設(shè)計出的界面在不同的機器上顯示就會造成混亂。KISS原則：KISS原則就是"KeepItSimpleAndStupid"的縮寫，簡潔和易于操作是界面設(shè)計的最重要的原則。操作設(shè)計盡量簡單，并且有明確的操作提示；軟件所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說明等。布局控制：關(guān)于界面排版布局方面，很多界面設(shè)計者重視不夠，界面排版設(shè)計的過于死板，甚至照抄他人。如果界面的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。一般在界面設(shè)計上所要遵循的原理有：視覺平衡:根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到視覺平衡，在設(shè)計界面時需要以更多的文字來平衡一幅圖片。另外，按照中國人的閱讀習慣是從左到右，從上到下，因此視覺平衡也要遵循這個道理。色彩的搭配和文字的可閱讀性：顏色是影響界面的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產(chǎn)生什么影響，為界面設(shè)計選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。為方便閱讀軟件上的信息，可以參考報紙的編排方式將界面的內(nèi)容分欄設(shè)計，甚至兩欄也要比一滿頁的視覺效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（中文宋體）最易閱讀，特殊字體用于標題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字體（如華文彩云，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。該類特殊字體如果在頁面上大量使用，會使得閱讀頗為費力，瀏覽者的眼睛很快就會疲勞，不得不轉(zhuǎn)移到其他頁面。和諧與一致性：通過對軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計良好的界面看起來應(yīng)該是和諧的。。一致的結(jié)構(gòu)設(shè)計，可以讓瀏覽者對軟件的形象有深刻的記憶；一致的導航設(shè)計，可以讓瀏覽者迅速而又有效的進入在軟件中自己所需要的部分；一致的操作設(shè)計，可以讓瀏覽者快速學會在整個軟件的各種功能操作。當然，軟件設(shè)計的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風格，或者隨著時間的推移不斷的改版軟件，會給瀏覽者帶來新鮮的感覺。個性化：符合網(wǎng)絡(luò)文化企業(yè)軟件不同于傳統(tǒng)的企業(yè)商務(wù)活動，要符合Internet網(wǎng)絡(luò)文化的要求。首先，網(wǎng)絡(luò)最早是非正式性、非商業(yè)化的，只是科研人員用來交流信息。其次，網(wǎng)絡(luò)信息是只在計算機屏幕上顯示而沒有打印出來閱讀，網(wǎng)絡(luò)上的交流具有隱蔽性，誰也不知道對方的真實身份。另夕卜，許多人在上網(wǎng)的時候是在家中或網(wǎng)吧等一些比較休閑，比較隨意的環(huán)境下。此時網(wǎng)絡(luò)用戶的使用環(huán)境所蘊涵的思維模式與坐在辦公室里西裝革履的時候大相徑庭。因此，整個互聯(lián)網(wǎng)的文化是一種休閑的、非正式性的、輕松活潑的文化。在軟件上使用幽默的網(wǎng)絡(luò)語言，創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍會使軟件的訪問量大增。塑造軟件個性另外，軟件的整體風格和整體氣氛表達要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè)CI。2.界面的關(guān)系圖和工作流程圖設(shè)計流程：1、確定軟件的整體風格：由于本系統(tǒng)軟件設(shè)計的是面向中小型企事業(yè)單位用的軟件，為了能更方便管理信息，所有采用簡潔清晰的設(shè)計風格。

2、界面色彩的搭配：藍為主調(diào)。白底，藍標題欄，橙色按鈕或ICON做點綴。3、確定界面設(shè)計的工具：用MicrosoftVisualStudio2008來設(shè)計整個軟件的界面設(shè)計。4、編寫JSP語言3.主界面當密碼錯誤時自動提醒出錯:子界面A登入界面系統(tǒng)管理退出系統(tǒng)注冊修改密碼用戶登錄該模塊的主要功能：i、用戶登錄：退出系統(tǒng)注冊修改密碼用戶登錄2、修改密碼3、注冊4、退出系統(tǒng)。該模塊功能的操作方式：如果是新用戶，通過注冊得到一個用戶名，接著輸入正確的用戶名和登陸密碼進入登陸界面，待操作完畢后退出系統(tǒng)。子界面B管理界面

出勤信息的查詢及記錄該模塊的主要功能：1、用戶信息管理2、工資信息管理3、用戶出勤信息管理該模塊功能的操作方式：管理員通過此功能來對員工的工資信息進行管理，做好員工工資的管理工作。出勤信息的查詢及記錄可以進行一些基本的操作：1、用戶權(quán)限管理2、員工基本信息增3、員工基本信息刪4、員工基本信息改用戶信息管理用戶權(quán)限管理員工基本信息增員工基本信息刪員工基本信息改同時可以作進一步的操作：1、基本工資信息2、獎懲信息的查刪3、扣稅款信息的查刪4、工資查詢5、打印工資條以及出勤信息的查詢及記錄。用戶權(quán)限管理員工基本信息增員工基本信息刪員工基本信息改美學設(shè)計確定網(wǎng)站的整體風格：由于本系統(tǒng)軟件設(shè)計的是面向中小型企事業(yè)單位用的軟件，為了能更方便管理信息，所有采用簡潔清晰的設(shè)計風格。界面色彩的搭配：藍為主調(diào)。白底，藍標題欄，橙色按鈕或ICON做點綴。界面配色基本概念（1）白紙黑字是永遠的主題，誰都說不出不好來。（2）界面最常用流行色.蘭色——藍天白云，沉靜整潔的顏色。.綠色——綠白相間，雅致而有生氣。.橙色——活潑熱烈，標準商業(yè)色調(diào)。.暗紅——寧重、嚴肅、高貴，需要配黑和灰來壓制刺激的紅色。（3）顏色的忌諱.忌臟——背景與文字內(nèi)容對比不強烈，灰暗的背景令人沮喪！.忌純——艷麗的純色對人的刺激太強烈抗議，缺乏內(nèi)涵。.忌跳——再好看的顏色，也不能脫離整體。脫離群眾是自取其辱！.忌花——要有一種主色貫穿其中，主色并不時面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。.忌粉——顏色淺固然顯的干凈，但如果對比過弱，整得蒼白無力了，就象病夫一樣無可救藥。.藍色忌純，綠色忌黃，紅色忌艷。（4）幾種固定搭配.藍白橙：藍為主調(diào)。白底，藍標題欄，橙色按鈕或ICON做點綴。.綠白蘭：綠為主調(diào)。白底，綠標題欄，蘭色或橙色按鈕或ICON做點綴。.橙白紅：橙為主調(diào)。白底，橙標題欄，暗紅或桔紅色按鈕或ICON做點綴。.暗紅黑：暗紅主調(diào)。黑或灰底，暗紅標題欄，文字內(nèi)容背景為淺灰色。界面設(shè)計理念（1）內(nèi)容決定形式先把內(nèi)容充實上，再分區(qū)塊，再定色調(diào)，再處理細節(jié)。（2）先整體，后局部，最后回歸到整體。全局考慮，把能填上的