軟件工程用戶界面設(shè)計報告

1、目錄0. 文檔介紹 20.1 文檔目的 20.2 文檔范圍 20.3 讀者對象 20.4 參考文獻 20.5 術(shù)語與縮寫解釋 21. 應(yīng)當(dāng)遵循的界面設(shè)計規(guī)范 32. 界面的關(guān)系圖和工作流程圖 53. 主界面 54. 子界面 A 65. 子界面 B 76. 美學(xué)設(shè)計 77. 界面資源設(shè)計 錯誤！未定義書簽其他 錯誤！未定義書簽。文檔介紹0.1文檔目的界面設(shè)計是為了滿足軟件專業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對軟件的使用界面進行美化優(yōu)化規(guī)范化的設(shè)計分支。界面設(shè)計文檔可以讓用戶對軟件產(chǎn)品有了更直觀的了解，并且了解各個模塊的設(shè)計及用意。0.2文檔范圍文檔包括公用界面設(shè)計，學(xué)生用戶界面設(shè)計，教師用戶界面設(shè)計， 其

2、中各個界面包括框架設(shè)計，編程設(shè)計，按鈕設(shè)計，面板設(shè)計，菜單設(shè)計，標(biāo)簽設(shè)計，圖標(biāo)設(shè)計，滾動條及狀態(tài) 欄設(shè)計。0.3讀者對象登陸網(wǎng)站的游客、注冊成會員的學(xué)生、教師以及管理員。0.4參考文獻提示：列出本文檔的所有參考文獻（可以是非正式出版物），格式如下：1 張海藩，軟件工程導(dǎo)論（第 5版），清華大學(xué)出版社，1900年01月2 楊培添，軟件界面設(shè)計，電子工業(yè)出版社，2007年02月3 林銳，Web軟件用戶界面設(shè)計指南，電子工業(yè)出版社，2005年5月4 吳士力，汪孝宜，胡儔，網(wǎng)絡(luò)系統(tǒng)開發(fā)實例精粹（ JSP版），電子工業(yè)出版社，2006年8月 黃艷群，黎旭，李榮麗，設(shè)計人機界面，北京理工大學(xué)出版社，200

3、7年5月0.5術(shù)語與縮寫解釋縮寫、術(shù)語解釋SPP精簡并行過程，Simplified Parallel ProcessSD系統(tǒng)設(shè)計，System Desig n1. 應(yīng)當(dāng)遵循的界面設(shè)計規(guī)范軟件界面的設(shè)計，既要從外觀上進行創(chuàng)意以到達吸引眼球的目的，還要結(jié)合圖形和版面設(shè)計的相關(guān)原理，從而使得軟件設(shè)計變成了一門獨特的藝術(shù)。軟件用戶界面的設(shè)計應(yīng)遵循以下幾個基本原則：用戶導(dǎo)向原則：明確到底誰是使用者，要站在用戶的觀點和立場上來考慮設(shè)計軟件。要作到這一點，必須要和用戶來溝通，了解他們的需求、目標(biāo)、期望和偏好等。網(wǎng)頁的設(shè)計者要清楚， 用戶之間差別很大， 他們的能力各有不同。比如有的用戶可能會在視覺方面有欠缺（

4、如色盲），對很多的顏色分辨不清；有的用戶的聽覺也會有障礙，對于軟件的語音提示反 映遲鈍；而且相當(dāng)一部分用戶的計算機使用經(jīng)驗很初級，對于復(fù)雜一點的操作會感覺到很費力。另外，用戶使用的計算機機器配置也是千差萬別，包括顯卡、聲卡、內(nèi)存、網(wǎng) 速、操作系統(tǒng)以及瀏覽器等都會有不同。設(shè)計者如果忽視了這些差別，設(shè)計出的網(wǎng)頁在不同的機器上顯示就會造成混亂。KISS原則：KISS原則就是"Keep It Simple And Stupid"的縮寫，簡潔和易于操作是網(wǎng)頁設(shè)計的最重要的原則。畢竟，軟件建設(shè)出來是用于普通網(wǎng)民來查閱信息和使用網(wǎng)絡(luò)服務(wù)。沒有必要在網(wǎng)頁上設(shè)置過多的操作，堆集上很多復(fù)雜和花

5、哨的圖片。該原則一般的要求， 網(wǎng)頁的下載不要超過 10秒鐘（普通的撥號用戶 56 Kbps網(wǎng)速）；盡量使用文本鏈接，而 減少大幅圖片和動畫的使用；操作設(shè)計盡量簡單，并且有明確的操作提示；軟件所有的 內(nèi)容和服務(wù)都在顯眼處向用戶予以說明等。布局控制：關(guān)于網(wǎng)頁排版布局方面，很多網(wǎng)頁設(shè)計者重視不夠，網(wǎng)頁排版設(shè)計的過于死板，甚 至照抄他人。如果網(wǎng)頁的布局凌亂，僅僅把大量的信息堆集在頁面上，會干擾瀏覽者的閱讀。一般在網(wǎng)頁設(shè)計上所要遵循的原理有：Miller 公式。根據(jù)心理學(xué)家George A.Miller的研究表明，人一次性接受的信息量在7個比特左右為宜?？偨Y(jié)一個公式為：一個人一次所接受的信息量為7

6、77;2比特。這一原理被廣泛應(yīng)用于軟件建設(shè)中，一般網(wǎng)頁上面的欄目選擇最佳在59個之間，如果軟件所提供給瀏覽者選擇的內(nèi)容鏈接超過這個區(qū)間，人在心理上就會煩躁，壓抑，會讓人感覺到信息太密集，看不過來，很累。例如A的欄目設(shè)置：Main、MyAol、Mail、People、Search、Shop、Channels 和 Devices 共八個分類。M 的欄目設(shè)置： MSN Home My MSN Hotmail、Search、Shopping、Money 和People & Chat共七項。然而很多國內(nèi)的軟件在欄目的設(shè)置遠遠超出這個區(qū)間。（2 ）分組處理。上面提到，對于信息的分類，不能超過9個欄

7、目。但如果你的內(nèi)容實在是多，超出了 9個，需要進行分組處理。如果，你的網(wǎng)頁上提供幾十篇文章 的鏈接，需要每隔7篇加一個空行或平行線做以分組。如果你的軟件內(nèi)容欄目超出9個，如微軟公司的軟件， 共有11個欄目，超過了 9個。為了不破壞 Miller公式， 在設(shè)計時使用藍黑兩種顏色分開，具體可以訪問視覺平衡：網(wǎng)頁設(shè)計時，也要各種元素（如圖形、文字、空白）都會有視覺作用。根據(jù) 視覺原理，圖形與一塊文字相比較，圖形的視覺作用要大一些。所以，為了達到 視覺平衡，在設(shè)計網(wǎng)頁時需要以更多的文字來平衡一幅圖片。另外，按照中國人 的閱讀習(xí)慣是從左到右，從上到下，因此視覺平衡也要遵循這個道理。例如，你的很多的文字是

8、采用左對齊Align=left>,需要在網(wǎng)頁的右面加一 些圖片或一些較明亮、較醒目的顏色。一般情況下，每張網(wǎng)頁都會設(shè)置一個頁眉 部分和一個頁腳部分， 頁眉部分常放置一些 Banner 廣告或?qū)Ш綏l， 而頁腳部分通 常放置聯(lián)系方式和版權(quán)信息等，頁眉和頁腳在設(shè)計上也要注重視覺平衡。同時， 也決不能低估空白的價值。如果你的網(wǎng)頁上所顯示的信息非常密集，這樣不但不 利于讀者閱讀，甚至?xí)鹱x者反感，破壞該軟件的形象。在網(wǎng)頁設(shè)計上，適當(dāng) 增加一些空白，精煉你的網(wǎng)頁，使得頁面變的簡潔。色彩的搭配和文字的可閱讀性：顏色是影響網(wǎng)頁的重要因素，不同的顏色對人的感覺有不同的影響，例如：紅色和橙色使人興奮并使得

9、心跳加速；黃色使人聯(lián)想到陽光，是一種快活的顏色；黑顏色顯得比較莊重，考慮到你希望對瀏覽者產(chǎn)生什么影響，為網(wǎng)頁 設(shè)計選擇合適的顏色（包括背景色、元素顏色、文字顏色、鏈節(jié)顏色等）。 為方便閱讀軟件上的信息， 可以參考報紙的編排方式將網(wǎng)頁的內(nèi)容分欄設(shè)計， 甚至兩欄也要比一滿頁的視覺效果要好。另一種能夠提高文字可讀性的因素是所選擇的字體，通用的字體（ Arial Courier New ， Garamond ， Times New Roman ，中文宋體）最易閱讀，特殊字 體用于標(biāo)題效果較好，但是不適合正文。如果在整個頁面使用一些特殊字體（如 Cloister ， Gothic ， Script ，

10、Westminster ，華文彩云，華文行楷）， 這樣讀者閱讀起來感覺一定很糟糕。該類特殊字體如果在頁面上大量使用， 會使得閱讀頗為費力， 瀏覽者的眼睛很快就會疲勞， 不得不轉(zhuǎn)移到其他頁面。 和諧與一致性：通過對軟件的各種元素（顏色、字體、圖形、空白等）使用一定的規(guī)格，使 得設(shè)計良好的網(wǎng)頁看起來應(yīng)該是和諧的。或者說，軟件的眾多單獨網(wǎng)頁應(yīng)該看起 來像一個整體。軟件設(shè)計上要保持一致性，這又是很重要的一點。一致的結(jié)構(gòu)設(shè)計，可以讓瀏覽者對軟件的形象有深刻的記憶；一致的導(dǎo)航設(shè) 計，可以讓瀏覽者迅速而又有效的進入在軟件中自己所需要的部分；一致的操作 設(shè)計，可以讓瀏覽者快速學(xué)會在整個軟件的各種功能操作。破壞

11、這一原則，會誤 導(dǎo)瀏覽者，并且讓整個軟件顯的雜亂無章，給人留下不良的印象。當(dāng)然，軟件設(shè) 計的一致性并不意味著刻板和一成不變，有的軟件在不同欄目使用不同的風(fēng)格， 或者隨著時間的推移不斷的改版軟件，會給瀏覽者帶來新鮮的感覺。 個性化：符合網(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)境所蘊涵的思

12、維模式 與坐在辦公室里西裝革履的時候大相徑庭。因此，整個互聯(lián)網(wǎng)的文化是一種休閑 的、非正式性的、輕松活潑的文化。在軟件上使用幽默的網(wǎng)絡(luò)語言，創(chuàng)造一種休 閑的、輕松愉快、非正式的氛圍會使軟件的訪問量大增。塑造軟件個性另外， 軟件的整體風(fēng)格和整體氣氛表達要同企業(yè)形象相符合并應(yīng)該很好的體現(xiàn)企業(yè) CI 。2. 界面的關(guān)系圖和工作流程圖經(jīng)客戶要求及小組討論，本接口學(xué)習(xí)網(wǎng)站各個界面關(guān)系圖如下:在線答疑丿教學(xué)課件視頻教程丨丨課程習(xí)題設(shè)計流程：確定網(wǎng)站的整體風(fēng)格：由于我們設(shè)計的是學(xué)習(xí)網(wǎng)站，所以采用大方得體的風(fēng)格。網(wǎng)頁色彩的搭配：藍為主調(diào)。白底，藍標(biāo)題欄，橙色按鈕或ICON做點綴。確定網(wǎng)頁設(shè)計的工具：用Drea

13、mweaver來設(shè)計整個網(wǎng)站的界面設(shè)計，用Photoshop來設(shè)計背景、框架等，用 Fireworks 來對已經(jīng)設(shè)計好的圖片進行切割成模塊，以便插入 Dreamweaver中，用Flash進行美工設(shè)計、 網(wǎng)頁配色，制作CI、LOGO Banner 等網(wǎng)頁動畫制作。編寫JSP語言3. 主界面為了頁面導(dǎo)航的清晰，本網(wǎng)站采用了框架式頁面設(shè)計。頁面頭放在上框架，課程介紹模塊放中框架，下框架是放接口技術(shù)相關(guān)圖片。功能導(dǎo)航、登陸界面放在右框架。課程介紹模塊設(shè)計該模塊利用photoshop軟件制作，制作邊框，結(jié)合圖片文字，對接口技術(shù)課程做個 簡單的介紹。本課程足一門計算機的綜合知識和接口電路設(shè)計課程.要求具

14、備電路、數(shù)字電路、計算 機原理、匯編程序設(shè)計等知識.通過本課程的學(xué)習(xí)和實驗.要求學(xué)生學(xué)握80X8總及主要支援 芯片的功能、皓構(gòu)、編穆方法且及基本外部設(shè)備的接口技術(shù)*具備對徹機系統(tǒng)的設(shè)計*維護 與較件硬件開發(fā)能力“;Read,教學(xué)資源模塊設(shè)計教學(xué)資源緒教學(xué)課件 稔在線測試 血網(wǎng)上答疑 強課程習(xí)題 "課程實驗 納其他資源登陸界面設(shè)計進入登陸模塊 輸入用戶名、密碼登陸成功注冊成功廣r用戶界面游客身份公共用戶界面rr注冊新用戶k_JFr11注冊界面驗證是否有效r5學(xué)生LLr教師<J管理員LJ效果如下:用戶登陸用戶各密碼:O學(xué)生0教師W W1 W14.教學(xué)資源界面教學(xué)課件：分章節(jié)介紹接口

15、技術(shù)相關(guān)知識網(wǎng)頁的左邊顯示章節(jié)目錄，右邊是對應(yīng)的知識講解。視頻教程：提供相關(guān)的視頻講解教學(xué)內(nèi)容及實驗 課程習(xí)題：題庫制作一個文件叫 wordlist.jsp，在這個頁面中，先顯示接口技術(shù)知識的章節(jié)名稱，再顯示某個章節(jié)所涵蓋的詳細目錄，并提供【瀏覽】按鈕，當(dāng)學(xué) 生單擊【瀏覽】按鈕的時候，會彈出一個模式窗口，打開word文件，讓學(xué)生瀏覽該word文件。答案：上述同樣的方法打開一個word文檔，可以查看對應(yīng)的答案。課程實驗：將實驗步驟及附圖添加進網(wǎng)頁當(dāng)中，讓學(xué)生們可以通過瀏覽網(wǎng)頁學(xué)習(xí) 制作實驗。5. 在線測試界面首先創(chuàng)建一個名為test的數(shù)據(jù)庫，本程序采用 SQL Server 2000數(shù)據(jù)庫編程，

16、然后連 接到網(wǎng)頁當(dāng)中。出卷模塊測試。在主頁左邊的導(dǎo)航欄上單擊“出卷”鏈接，系統(tǒng)進入出卷頁面。填 寫各類題型的數(shù)目、分值分配、考試時間和試卷編號等信息，單擊“提交”按鈕， 系統(tǒng)就會自動從題庫中隨即提取題目組合成一份新的試卷。在線考試模塊測試。單擊主頁導(dǎo)航欄的“在線考試”鏈接，系統(tǒng)進入試卷選擇頁面。期末試題1答案期末試題2答案期末試題3答案期末試題4咎案6. 美學(xué)設(shè)計確定網(wǎng)站的整體風(fēng)格：由于我們設(shè)計的是學(xué)習(xí)網(wǎng)站，所以采用大方得體的風(fēng)格。 網(wǎng)頁色彩的搭配：藍為主調(diào)。白底，藍標(biāo)題欄，橙色按鈕或ICON做點綴。網(wǎng)頁配色基本概念（1 ）白紙黑字是永遠的主題，誰都說不出不好來。（2）網(wǎng)頁最常用流行色蘭色一一

17、藍天白云，沉靜整潔的顏色。綠色綠白相間，雅致而有生氣。橙色一一活潑熱烈，標(biāo)準(zhǔn)商業(yè)色調(diào)。暗紅一一寧重、嚴(yán)肅、高貴，需要配黑和灰來壓制刺激的紅色，（3）顏色的忌諱忌臟一一背景與文字內(nèi)容對比不強烈，灰暗的背景令人沮喪！ 忌純艷麗的純色對人的刺激太強烈抗議，缺乏內(nèi)涵。忌跳一一再好看的顏色，也不能脫離整體。脫離群眾是自取其辱！忌花要有一種主色貫穿其中，主色并不時面積最大的顏色，而是最重要，最能揭示和反映主題的顏色，就象領(lǐng)導(dǎo)者一樣，雖然在人數(shù) 上居少數(shù)，但起決定作用。忌粉一一顏色淺固然顯的干凈，但如果對比過弱，整得蒼白無力了，就象 病夫一樣無可救藥。藍色忌純，綠色忌黃，紅色忌艷。（4）幾種固定搭配藍白橙：藍為主調(diào)。白底，藍標(biāo)題欄，橙色按鈕或ICON做點綴。綠白蘭：綠為主調(diào)。白底