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

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