界面設(shè)計(jì)報(bào)告2500字

界面設(shè)計(jì)報(bào)告2500字

網(wǎng)吧管理系統(tǒng)用戶界面設(shè)計(jì)報(bào)告機(jī)構(gòu)公開信息項(xiàng)目名稱，《用戶界面設(shè)計(jì)報(bào)告》版本歷史?機(jī)構(gòu)名稱，2002Page2of7項(xiàng)目名稱，《用戶界面設(shè)計(jì)報(bào)告》目錄0.文檔介紹40.1文檔目的40.2文檔范圍40.3讀者對(duì)象40.4參考文獻(xiàn)40.5術(shù)語與縮寫解釋41.應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范52.界面的關(guān)系圖和工作流程圖53.主界面64.子界面A65.子界面B76.美學(xué)設(shè)計(jì)77.界面資源設(shè)計(jì)78.其他7?機(jī)構(gòu)名稱，2002Page3of7項(xiàng)目名稱，《用戶界面設(shè)計(jì)報(bào)告》0.文檔介紹本文檔是介紹用戶界面設(shè)計(jì)0.1文檔目的本文檔的編寫為下階段的設(shè)計(jì)、開發(fā)提供依據(jù)，為項(xiàng)目組成員對(duì)界面設(shè)計(jì)需求的詳盡理解，以及在開發(fā)開發(fā)過程中的協(xié)同工作提供強(qiáng)有力的保證。同時(shí)本文檔也作為項(xiàng)目評(píng)審驗(yàn)收的依據(jù)之一。0.2文檔范圍前臺(tái)設(shè)計(jì)0.3讀者對(duì)象前臺(tái)美工及本系統(tǒng)開發(fā)成員0.4參考文獻(xiàn)0.5術(shù)語與縮寫解釋?機(jī)構(gòu)名稱，2002Page4of7項(xiàng)目名稱，《用戶界面設(shè)計(jì)報(bào)告》1.應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范本系統(tǒng)界面設(shè)計(jì)遵循一致的準(zhǔn)則，使用的EXT見面，控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。2.界面的關(guān)系圖和工作流程圖說明：后臺(tái)框架各個(gè)界面之間的關(guān)系圖和工作流程圖：?機(jī)構(gòu)名稱，2002Page5of7項(xiàng)目名稱，《用戶界面設(shè)計(jì)報(bào)告》3.主界面說明：前臺(tái)框架4.子界面A說明：次頁面中的對(duì)象只是大體的描述頁面中的框架，具體樣式將在后期開發(fā)中進(jìn)行?機(jī)構(gòu)名稱，2002Page6of7項(xiàng)目名稱，《用戶界面設(shè)計(jì)報(bào)告》5.子界面B該導(dǎo)航用于引導(dǎo)用戶對(duì)本系統(tǒng)的相關(guān)操作，可瀏覽本站餐品，注冊(cè)成為會(huì)員，可查個(gè)人購(gòu)物記錄等等…具體涉及到的功能具體增加6.美學(xué)設(shè)計(jì)7.界面資源設(shè)計(jì)界面設(shè)計(jì)時(shí)所設(shè)計(jì)到的圖標(biāo)，圖像以及界面的組件均來自“模板”8.其他?機(jī)構(gòu)名稱，2002Page7of7

第二篇：軟件工程用戶界面設(shè)計(jì)報(bào)告5300字目錄0.文檔介紹20.1文檔目的20.2文檔范圍20.3讀者對(duì)象20.4參考文獻(xiàn)20.5術(shù)語與縮寫解釋21.應(yīng)當(dāng)遵循的界面設(shè)計(jì)規(guī)范32.界面的關(guān)系圖和工作流程圖53.主界面54.子界面A65.子界面B76.美學(xué)設(shè)計(jì)77.界面資源設(shè)計(jì)錯(cuò)誤！未定義書簽。8.其他錯(cuò)誤！未定義書簽。文檔介紹0.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.2文檔范圍文檔包括公用界面設(shè)計(jì)，學(xué)生用戶界面設(shè)計(jì)，教師用戶界面設(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ì)。0.3讀者對(duì)象登陸網(wǎng)站的游客、注冊(cè)成會(huì)員的學(xué)生、教師以及管理員。0.4參考文獻(xiàn)提示：列出本文檔的所有參考文獻(xiàn)（可以是非正式出版物），格式如下：[1]張海藩，《軟件工程導(dǎo)論（第5版）》，清華大學(xué)出版社，19xx年01月[2]楊培添，《軟件界面設(shè)計(jì)》，電子工業(yè)出版社，20xx年02月[3]林銳，《Web軟件用戶界面設(shè)計(jì)指南》，電子工業(yè)出版社，20xx年5月[4]吳士力，汪孝宜，胡儔，《網(wǎng)絡(luò)系統(tǒng)開發(fā)實(shí)例精粹（JSP版）》，電子工業(yè)出版社，20xx年8月[5]黃艷群，黎旭，李榮麗，《設(shè)計(jì)·人機(jī)界面》，北京理工大學(xué)出版社，20xx年5月/view/43210.html?wtp=tt/view/119481.htm0.5術(shù)語與縮寫解釋1.應(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)向原則：明確到底誰是使用者，要站在用戶的觀點(diǎn)和立場(chǎng)上來考慮設(shè)計(jì)軟件。要作到這一點(diǎn)，必須要和用戶來溝通，了解他們的需求、目標(biāo)、期望和偏好等。網(wǎng)頁的設(shè)計(jì)者要清楚，用戶之間差別很大，他們的能力各有不同。比如有的用戶可能會(huì)在視覺方面有欠缺（如色盲），對(duì)很多的顏色分辨不清；有的用戶的聽覺也會(huì)有障礙，對(duì)于軟件的語音提示反映遲鈍；而且相當(dāng)一部分用戶的計(jì)算機(jī)使用經(jīng)驗(yàn)很初級(jí)，對(duì)于復(fù)雜一點(diǎn)的操作會(huì)感覺到很費(fèi)力。另外，用戶使用的計(jì)算機(jī)機(jī)器配置也是千差萬別，包括顯卡、聲卡、內(nèi)存、網(wǎng)速、操作系統(tǒng)以及瀏覽器等都會(huì)有不同。設(shè)計(jì)者如果忽視了這些差別，設(shè)計(jì)出的網(wǎng)頁在不同的機(jī)器上顯示就會(huì)造成混亂。?KISS原則：KISS原則就是"KeepItSimpleAndStupid"的縮寫，簡(jiǎn)潔和易于操作是網(wǎng)頁設(shè)計(jì)的最重要的原則。畢竟，軟件建設(shè)出來是用于普通網(wǎng)民來查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒有必要在網(wǎng)頁上設(shè)置過多的操作，堆集上很多復(fù)雜和花哨的圖片。該原則一般的要求，網(wǎng)頁的下載不要超過10秒鐘（普通的撥號(hào)用戶56Kbps網(wǎng)速）；盡量使用文本鏈接，而減少大幅圖片和動(dòng)畫的使用；操作設(shè)計(jì)盡量簡(jiǎn)單，并且有明確的操作提示；軟件所有的內(nèi)容和服務(wù)都在顯眼處向用戶予以說明等。?布局控制：關(guān)于網(wǎng)頁排版布局方面，很多網(wǎng)頁設(shè)計(jì)者重視不夠，網(wǎng)頁排版設(shè)計(jì)的過于死板，甚至照抄他人。如果網(wǎng)頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會(huì)干擾瀏覽者的閱讀。一般在網(wǎng)頁設(shè)計(jì)上所要遵循的原理有：?Miller公式。根據(jù)心理學(xué)家GeorgeA.Miller的研究表明，人一次性接受的信息量在7個(gè)比特左右為宜?？偨Y(jié)一個(gè)公式為：一個(gè)人一次所接受的信息量為7±2比特。這一原理被廣泛應(yīng)用于軟件建設(shè)中，一般網(wǎng)頁上面的欄目選擇最佳在5～9個(gè)之間，如果軟件所提供給瀏覽者選擇的內(nèi)容鏈接超過這個(gè)區(qū)間，人在心理上就會(huì)煩躁，壓抑，會(huì)讓人感覺到信息太密集，看不過來，很累。例如A的欄目設(shè)置：Main、MyAol、Mail、People、Search、Shop、Channels和Devices共八個(gè)分類。M的欄目設(shè)置：MSNHome、MyMSN、Hotmail、Search、Shopping、Money和People&Chat共七項(xiàng)。然而很多國(guó)內(nèi)的軟件在欄目的設(shè)置遠(yuǎn)遠(yuǎn)超出這個(gè)區(qū)間。?（2）分組處理。上面提到，對(duì)于信息的分類，不能超過9個(gè)欄目。但如果你的內(nèi)容實(shí)在是多，超出了9個(gè)，需要進(jìn)行分組處理。如果，你的網(wǎng)頁上提供幾十篇文章的鏈接，需要每隔7篇加一個(gè)空行或平行線做以分組。如果你的軟件內(nèi)容欄目超出9個(gè)，如微軟公司的軟件，共有11個(gè)欄目，超過了9個(gè)。為了不破壞Miller公式，在設(shè)計(jì)時(shí)使用藍(lán)黑兩種顏色分開，具體可以訪問?視覺平衡：網(wǎng)頁設(shè)計(jì)時(shí)，也要各種元素（如圖形、文字、空白）都會(huì)有視覺作用。根據(jù)視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達(dá)到視覺平衡，在設(shè)計(jì)網(wǎng)頁時(shí)需要以更多的文字來平衡一幅圖片。另外，按照中國(guó)人的閱讀習(xí)慣是從左到右，從上到下，因此視覺平衡也要遵循這個(gè)道理。例如，你的很多的文字是采用左對(duì)齊〈Align=left〉，需要在網(wǎng)頁的右面加一些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網(wǎng)頁都會(huì)設(shè)置一個(gè)頁眉部分和一個(gè)頁腳部分，頁眉部分常放置一些Banner廣告或?qū)Ш綏l，而頁腳部分通常放置聯(lián)系方式和版權(quán)信息等，頁眉和頁腳在設(shè)計(jì)上也要注重視覺平衡。同時(shí)，也決不能低估空白的價(jià)值。如果你的網(wǎng)頁上所顯示的信息非常密集，這樣不但不利于讀者閱讀，甚至?xí)鹱x者反感，破壞該軟件的形象。在網(wǎng)頁設(shè)計(jì)上，適當(dāng)增加一些空白，精煉你的網(wǎng)頁，使得頁面變的簡(jiǎn)潔。?色彩的搭配和文字的可閱讀性：顏色是影響網(wǎng)頁的重要因素，不同的顏色對(duì)人的感覺有不同的影響，例如：?紅色和橙色使人興奮并使得心跳加速；黃色使人聯(lián)想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對(duì)瀏覽者產(chǎn)生什么影響，為網(wǎng)頁設(shè)計(jì)選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。?為方便閱讀軟件上的信息，可以參考報(bào)紙的編排方式將網(wǎng)頁的內(nèi)容分欄設(shè)計(jì)，甚至兩欄也要比一滿頁的視覺效果要好。?另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（Arial，CourierNew，Garamond，TimesNewRoman，中文宋體）最易閱讀，特殊字體用于標(biāo)題效果較好，但是不適合正文。如果在整個(gè)頁面使用一些特殊字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），這樣讀者閱讀起來感覺一定很糟糕。該類特殊字體如果在頁面上大量使用，會(huì)使得閱讀頗為費(fèi)力，瀏覽者的眼睛很快就會(huì)疲勞，不得不轉(zhuǎn)移到其他頁面。?和諧與一致性：通過對(duì)軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使得設(shè)計(jì)良好的網(wǎng)頁看起來應(yīng)該是和諧的?；蛘哒f，軟件的眾多單獨(dú)網(wǎng)頁應(yīng)該看起來像一個(gè)整體。軟件設(shè)計(jì)上要保持一致性，這又是很重要的一點(diǎn)。一致的結(jié)構(gòu)設(shè)計(jì)，可以讓瀏覽者對(duì)軟件的形象有深刻的記憶；一致的導(dǎo)航設(shè)計(jì)，可以讓瀏覽者迅速而又有效的進(jìn)入在軟件中自己所需要的部分；一致的操作設(shè)計(jì)，可以讓瀏覽者快速學(xué)會(huì)在整個(gè)軟件的各種功能操作。破壞這一原則，會(huì)誤導(dǎo)瀏覽者，并且讓整個(gè)軟件顯的雜亂無章，給人留下不良的印象。當(dāng)然，軟件設(shè)計(jì)的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風(fēng)格，或者隨著時(shí)間的推移不斷的改版軟件，會(huì)給瀏覽者帶來新鮮的感覺。?個(gè)性化：?符合網(wǎng)絡(luò)文化企業(yè)軟件不同于傳統(tǒng)的企業(yè)商務(wù)活動(dòng)，要符合Internet網(wǎng)絡(luò)文化的要求。首先，網(wǎng)絡(luò)最早是非正式性、非商業(yè)化的，只是科研人員用來交流信息。其次，網(wǎng)絡(luò)信息是只在計(jì)算機(jī)屏幕上顯示而沒有打印出來閱讀，網(wǎng)絡(luò)上的交流具有隱蔽性，誰也不知道對(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ò)語言，創(chuàng)造一種休閑的、輕松愉快、非正式的氛圍會(huì)使軟件的訪問量大增。?塑造軟件個(gè)性另外，軟件的整體風(fēng)格和整體氣氛表達(dá)要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè)CI。2.界面的關(guān)系圖和工作流程圖經(jīng)客戶要求及小組討論，本接口學(xué)習(xí)網(wǎng)站各個(gè)界面關(guān)系圖如下：設(shè)計(jì)流程：?確定網(wǎng)站的整體風(fēng)格：由于我們?cè)O(shè)計(jì)的是學(xué)習(xí)網(wǎng)站，所以采用大方得體的風(fēng)格。?網(wǎng)頁色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴。?確定網(wǎng)頁設(shè)計(jì)的工具：用Dreamweaver來設(shè)計(jì)整個(gè)網(wǎng)站的界面設(shè)計(jì)，用Photoshop來設(shè)計(jì)背景、框架等，用Fireworks來對(duì)已經(jīng)設(shè)計(jì)好的圖片進(jìn)行切割成模塊，以便插入Dreamweaver中，用Flash進(jìn)行美工設(shè)計(jì)、網(wǎng)頁配色，制作CI、LOGO、Banner等網(wǎng)頁動(dòng)畫制作。?編寫JSP語言3.主界面為了頁面導(dǎo)航的清晰，本網(wǎng)站采用了框架式頁面設(shè)計(jì)。頁面頭放在上框架，課程介紹模塊放中框架，下框架是放接口技術(shù)相關(guān)圖片。功能導(dǎo)航、登陸界面放在右框架。?課程介紹模塊設(shè)計(jì)該模塊利用photoshop軟件制作，制作邊框，結(jié)合圖片文字，對(duì)接口技術(shù)課程做個(gè)簡(jiǎn)單的介紹。?教學(xué)資源模塊設(shè)計(jì)?登陸界面設(shè)計(jì)效果如下：4.教學(xué)資源界面?教學(xué)課件：分章節(jié)介紹接口技術(shù)相關(guān)知識(shí)網(wǎng)頁的左邊顯示章節(jié)目錄，右邊是對(duì)應(yīng)的知識(shí)講解。?視頻教程：提供相關(guān)的視頻講解教學(xué)內(nèi)容及實(shí)驗(yàn)?課程習(xí)題：?題庫(kù)制作一個(gè)文件叫wordlist.jsp，在這個(gè)頁面中，先顯示接口技術(shù)知識(shí)的章節(jié)名稱，再顯示某個(gè)章節(jié)所涵蓋的詳細(xì)目錄，并提供【瀏覽】按鈕，當(dāng)學(xué)生單擊【瀏覽】按鈕的時(shí)候，會(huì)彈出一個(gè)模式窗口，打開word文件，讓學(xué)生瀏覽該word文件。?答案：上述同樣的方法打開一個(gè)word文檔，可以查看對(duì)應(yīng)的答案。?課程實(shí)驗(yàn)：將實(shí)驗(yàn)步驟及附圖添加進(jìn)網(wǎng)頁當(dāng)中，讓學(xué)生們可以通過瀏覽網(wǎng)頁學(xué)習(xí)制作實(shí)驗(yàn)。5.在線測(cè)試界面首先創(chuàng)建一個(gè)名為test的數(shù)據(jù)庫(kù)，本程序采用SQLServer2000數(shù)據(jù)庫(kù)編程，然后連接到網(wǎng)頁當(dāng)中。?出卷模塊測(cè)試。在主頁左邊的導(dǎo)航欄上單擊“出卷”鏈接，系統(tǒng)進(jìn)入出卷頁面。填寫各類題型的數(shù)目、分值分配、考試時(shí)間和試卷編號(hào)等信息，單擊“提交”按鈕，系統(tǒng)就會(huì)自動(dòng)從題庫(kù)中隨即提取題目組合成一份新的試卷。?在線考試模塊測(cè)試。單擊主頁導(dǎo)航欄的“在線考試”鏈接，系統(tǒng)進(jìn)入試卷選擇頁面。6.美學(xué)設(shè)計(jì)?確定網(wǎng)站的整體風(fēng)格：由于我們?cè)O(shè)計(jì)的是學(xué)習(xí)網(wǎng)站，所以采用大方得體的風(fēng)格。?網(wǎng)頁色彩的搭配：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或ICON做點(diǎn)綴。?網(wǎng)頁配色基本概念（1）白紙黑字是永遠(yuǎn)的主題，誰都說不出不好來。（2）網(wǎng)頁最常用流行色·蘭色——藍(lán)天白云，沉靜整潔的顏色?！ぞG色——綠白相間，雅致而有生氣?！こ壬顫姛崃遥瑯?biāo)準(zhǔn)商業(yè)色調(diào)?！ぐ导t——寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色，（3）顏色的忌諱·忌臟——背景與文字內(nèi)容對(duì)比不強(qiáng)烈，灰暗的背景令人沮喪！·忌純——艷麗的純色對(duì)人的刺激太強(qiáng)烈抗議，缺乏內(nèi)涵?！ぜ商俸每吹念伾?，也不能脫離整體。脫離群眾是自取其辱！·忌花——要有一種主色貫穿其中，主色并不時(shí)面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù)上居少數(shù)，但起決定作用。·忌粉——顏色淺固然顯的干凈，但如果對(duì)比過弱，整得蒼白無力了，就象病夫一樣無可救藥?！に{(lán)色忌純，綠色忌黃，紅色忌艷。（4）幾種固定搭配·藍(lán)白橙：藍(lán)為主調(diào)。白底，藍(lán)標(biāo)題欄，橙色按鈕或I