一個(gè)Web系統(tǒng)的界面設(shè)計(jì)和開發(fā).doc

一個(gè)Web系統(tǒng)的界面設(shè)計(jì)和開發(fā)1.工作流程（下圖，是整個(gè)開發(fā)過程中與界面設(shè)計(jì)相關(guān)的主要流程工作）從最初需求分析開始，我就加入項(xiàng)目，自始自終參加整個(gè)開發(fā)過程。在需求分析階段，參與了對(duì)客戶的訪問和調(diào)研；在概要設(shè)計(jì)階段，參與了部分系統(tǒng)設(shè)計(jì)分析工作；在詳細(xì)設(shè)計(jì)階段，完成了整個(gè)系統(tǒng)界面設(shè)計(jì)和Demo制作，并提交用戶反饋；在代碼開發(fā)階段，參與了系統(tǒng)表現(xiàn)層的設(shè)計(jì)開發(fā)。2.需求分析在需求分析階段，主要針對(duì)界面交互相關(guān)問題，對(duì)用戶進(jìn)行若干調(diào)研。 主要包括以下內(nèi)容受眾用戶群調(diào)查系統(tǒng)使用環(huán)境調(diào)查受眾用戶使用習(xí)慣調(diào)查用戶對(duì)舊版本軟件使用情況調(diào)查這一階段，由于成本原因，我并沒有直接訪問客戶進(jìn)行調(diào)查。工作主要是提出某些具體問題，由需求調(diào)研人員，以問卷或口頭問答方式，對(duì)客戶進(jìn)行調(diào)研。另外，公司經(jīng)驗(yàn)豐富的客服人員和市場人員，也是非常重要的需求來源之一。 本系統(tǒng)的客戶群主要為國家省市下屬質(zhì)檢單位，最終受眾年齡從年輕到較高齡都有。對(duì)于普通國家機(jī)關(guān)人員，一般對(duì)計(jì)算機(jī)系統(tǒng)和網(wǎng)絡(luò)不夠熟悉，計(jì)算機(jī)環(huán)境一般，甚至比較差，少有配置優(yōu)良的環(huán)境。在這種環(huán)境下，用戶對(duì)計(jì)算機(jī)使用一般沒有使用傾向，大多更適應(yīng)手工操作。對(duì)本系統(tǒng)的前代使用，最主要意見是使用困難，不方便。 還有其他具體調(diào)查反饋，如用戶基本不使用鼠標(biāo)右鍵，年齡較大的用戶難以看清密集的較小文字等等。 3.界面設(shè)計(jì)原則在概要設(shè)計(jì)階段，根據(jù)需求階段的調(diào)研結(jié)果，我整理了系統(tǒng)界面設(shè)計(jì)的基本原則。因?yàn)樵诖a開發(fā)階段，很多時(shí)候界面的具體制作是由開發(fā)人員直接寫代碼，因此必須確定一定的原則和規(guī)范，以保證系統(tǒng)界面的統(tǒng)一。一般適用原則簡單明了原則：用戶的操作要盡可能以最直接最形象最易于理解的方式呈現(xiàn)在用戶面前。對(duì)操作接口，直接點(diǎn)擊高于右鍵操作，文字表示高于圖標(biāo)示意，盡可能的符合用戶對(duì)類似系統(tǒng)的識(shí)別習(xí)慣。方便使用原則：符合用戶習(xí)慣為方便使用的第一原則。其它還包括，實(shí)現(xiàn)目標(biāo)功能的最少操作數(shù)原則，鼠標(biāo)最短距離移動(dòng)原則等。用戶導(dǎo)向原則：為了方便用戶盡快熟悉系統(tǒng)，簡化操作，應(yīng)該盡可能的提供向?qū)再|(zhì)的操作流程。實(shí)時(shí)幫助原則：用戶需要能隨時(shí)響應(yīng)問題的用戶幫助。提供高級(jí)自定義功能：為熟悉計(jì)算機(jī)及軟件系統(tǒng)的高級(jí)用戶設(shè)置自定義功能，可以對(duì)已經(jīng)確定的常規(guī)操作以及系統(tǒng)的方方面面進(jìn)行符合自身習(xí)慣的自定義設(shè)置。包括常規(guī)操作、界面排版、界面樣式等種種自定義。界面色彩要求：計(jì)算機(jī)屏幕的發(fā)光成像和普通視覺成像有很大的不同，應(yīng)該注意這種差別作出恰當(dāng)?shù)纳蚀钆?。?duì)于需用戶長時(shí)間使用的系統(tǒng)，應(yīng)當(dāng)使用戶在較長時(shí)間使用后不至于過于感到視覺疲勞為宜。例如輕松的淡彩為主配色，灰色系為主配色等等。切忌色彩過多，花哨艷麗，嚴(yán)重妨礙用戶視覺交互。界面平面版式要求：系統(tǒng)樣式排版整齊劃一，盡可能劃分不同的功能區(qū)域于固定位置，方便用戶導(dǎo)航使用；排版不宜過于密集，避免產(chǎn)生疲勞感。B/S構(gòu)架適用原則頁面最?。河捎赪eb的網(wǎng)絡(luò)特性，盡可能減小單頁面加載量，降低圖片文件大小和數(shù)量，加快加載速度，方便用戶體驗(yàn)。屏幕適應(yīng)：Web界面需要適應(yīng)不同用戶屏幕大小。瀏覽器兼容：需要適應(yīng)不同瀏覽器瀏覽效果，雖然目前可不考慮不同瀏覽器差別，但仍需考慮IE瀏覽器版本差異帶來的客戶端不同效果。最少垂直滾動(dòng)：盡可能減少垂直方向滾動(dòng)，盡可能不超過兩屏。禁止水平滾動(dòng)：由于將導(dǎo)致非常惡劣的客戶體驗(yàn)，盡可能禁止瀏覽器水平滾動(dòng)操作。避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合用戶體驗(yàn)習(xí)慣，盡可能避免。本系統(tǒng)應(yīng)用原則瘦客戶端要求：由于客戶應(yīng)用環(huán)境配置大多較低，除服務(wù)器可單獨(dú)配置較靈活外，應(yīng)該保證瘦客戶端，使用戶容易使用。例如盡量不要使用復(fù)雜的JS腳本和HTC組件，不要在客戶端使用IE整合XML/XSLT等等。大數(shù)據(jù)量表格的水平擴(kuò)展要求：本系統(tǒng)中存在大數(shù)據(jù)量的列表，需要較大的交互界面支持，為避免水平滾動(dòng)，應(yīng)盡可能獲取大的屏幕水平空間。桌面面板導(dǎo)航簡化操作：為了實(shí)現(xiàn)方便簡捷的用戶操作，應(yīng)該保證用戶絕大多數(shù)操作可通過首頁桌面面板的導(dǎo)航來實(shí)現(xiàn)。用戶自適應(yīng)定義：提供較多的可訂制功能，尤其對(duì)桌面面板提供強(qiáng)大的定制功能；使用戶能夠?qū)⒆畛Ｓ玫墓δ芏x到桌面面板，每次登錄即可直接使用，簡化用戶操作。用戶常用操作記錄定義：對(duì)某些需定義操作的功能如查詢、搜索等，提供系統(tǒng)自動(dòng)記憶和客戶定制功能，系統(tǒng)可自動(dòng)記憶用戶前13次操作，或者用戶可自定義操作記錄，方便以后使用。大數(shù)據(jù)量表格的水平擴(kuò)展要求：本系統(tǒng)中存在大數(shù)據(jù)量的列表，需要較大的交互界面支持，為避免水平滾動(dòng)，應(yīng)盡可能獲取大的屏幕水平空間。 4.系統(tǒng)分析在概要設(shè)計(jì)過程中，界面設(shè)計(jì)人員需要瀏覽需求分析報(bào)告，了解用戶的工作流程，和整個(gè)系統(tǒng)功能，再根據(jù)這些原始需求功能，歸納整理分析，并針對(duì)用戶交互設(shè)計(jì)需要，提出意見，參與系統(tǒng)設(shè)計(jì)。其中包括對(duì)原始功能的分類歸納，提出系統(tǒng)交互需要的新功能，對(duì)用戶功能實(shí)現(xiàn)的優(yōu)先級(jí)進(jìn)行定義等等。例如，提出用戶自定義快捷面板功能，常用操作自動(dòng)記錄功能等，需要在概要設(shè)計(jì)時(shí)盡早提出，以方便作好系統(tǒng)規(guī)劃。另外，需要對(duì)整個(gè)系統(tǒng)中的常見功能有比較清晰的了解，歸納整個(gè)系統(tǒng)界面交互中常見的交互形式，例如在本系統(tǒng)中就包括列表、查詢、搜索、填寫表單、項(xiàng)目分解、項(xiàng)目選擇、審批、報(bào)告等等；只有清晰的了解整個(gè)系統(tǒng)需求，才能較好的把握整個(gè)界面設(shè)計(jì)的統(tǒng)一性。當(dāng)然，這也和界面設(shè)計(jì)人員的經(jīng)驗(yàn)有很大關(guān)系。 4.1主界面設(shè)計(jì)設(shè)計(jì)主界面，確定系統(tǒng)基本風(fēng)格，是概要設(shè)計(jì)中的工作之一。首頁主界面的主要實(shí)現(xiàn)功能是導(dǎo)航，它要達(dá)到的目的，是盡可能使用戶僅通過首頁面板就可以完成所有常規(guī)任務(wù)。該主界面包含以下部分用戶信息區(qū)域 顯示當(dāng)前用戶信息用戶導(dǎo)航區(qū)域 用戶頁面導(dǎo)航，收藏功能可以將當(dāng)前功能頁面收藏到快捷功能面板 用戶導(dǎo)航功能樹 用戶頁面導(dǎo)航，收藏功能可以將當(dāng)前功能頁面收藏到快捷功能面板功能樹隱藏 可水平擴(kuò)展頁面空間 桌面面板用戶幫助導(dǎo)航 用戶登錄時(shí)可根據(jù)用戶類型，自動(dòng)加載相關(guān)使用幫助或?qū)Ш健?主任務(wù)通知區(qū)域 通知用戶系統(tǒng)業(yè)務(wù)流程中的待辦事宜；通知用戶辦公系統(tǒng)相關(guān)信息。 用戶快捷面板 為了能方便快捷的訪問系統(tǒng)功能，避免每次訪問樹形菜單較深級(jí)次的繁瑣操作，用戶可將通過導(dǎo)航欄中的收藏按鈕，將當(dāng)前頁面收藏到該面板中；該面板出現(xiàn)在所有業(yè)務(wù)頁面，用戶可以隨時(shí)訪問自己定義的功能頁面。該導(dǎo)航在首頁以面板形式出現(xiàn)，在其他頁面以下拉菜單形式出現(xiàn)。用戶自定義功能區(qū)域 用戶可將相關(guān)查詢搜索等功能定義到首頁面板，例如：最新完成報(bào)告察看、報(bào)告搜索、檢驗(yàn)流程察看等等42.典型界面以下是系統(tǒng)中幾個(gè)比較典型的界面模型。 在整個(gè)系統(tǒng)界面的設(shè)計(jì)過程中，需要注意整個(gè)系統(tǒng)的統(tǒng)一，設(shè)計(jì)風(fēng)格要一致，界面中的交互元素，從色彩、樣式到排版方式、具體位置都要具備延續(xù)性，這樣才能使用戶盡快習(xí)慣整個(gè)系統(tǒng)操作。43.典型交互模式界面交互中，根據(jù)功能不同，有不同的交互方式。應(yīng)該盡量提取抽象，盡可能減少交互模式的種類，或者把交互方式盡可能設(shè)計(jì)的類似，以方便用戶快速熟悉系統(tǒng)。下面列舉3個(gè)系統(tǒng)中比較典型的交互模式，供大家參考。單項(xiàng)選擇多項(xiàng)選擇項(xiàng)目分解（GIF動(dòng)畫 4楨）44.Demo開發(fā) Demo是詳細(xì)設(shè)計(jì)階段的重要成果之一，在對(duì)系統(tǒng)進(jìn)行詳細(xì)的分析設(shè)計(jì)之后，開發(fā)出界面Demo原型，主要作用是提供給合作客戶，在基本功能、系統(tǒng)組成和易用性上進(jìn)行測試。本系統(tǒng)的Demo主要