一般適用原則

·簡單明了原則：用戶的操作要盡可能以最直接最形象最易于理解的方式呈現(xiàn)在用戶面前。對操作接口，直接點擊高于右鍵操作，文字表示高于圖標示意，盡可能的符合用戶對類似系統(tǒng)的識別習慣。

·方便使用原則：符合用戶習慣為方便使用的第一原則。其它還包括，實現(xiàn)目標功能的最少操作數(shù)原則，鼠標最短距離移動原則等。

·用戶導向原則：為了方便用戶盡快熟悉系統(tǒng)，簡化操作，應該盡可能的提供向導性質的操作流程。

·實時幫助原則：用戶需要能隨時響應問題的用戶幫助。

·提供高級自定義功能：為熟悉計算機及軟件系統(tǒng)的高級用戶設置自定義功能，可以對已經確定的常規(guī)操作以及系統(tǒng)的方方面面進行符合自身習慣的自定義設置。包括常規(guī)操作、界面排版、界面樣式等種種自定義。

·界面色彩要求：計算機屏幕的發(fā)光成像和普通視覺成像有很大的不同，應該注意這種差別作出恰當?shù)纳蚀钆?。對于需用戶長時間使用的系統(tǒng)，應當使用戶在較長時間使用后不至于過于感到視覺疲勞為宜。例如輕松的淡彩為主配色，灰色系為主配色等等。切忌色彩過多，花哨艷麗，嚴重妨礙用戶視覺交互。

·界面平面版式要求：系統(tǒng)樣式排版整齊劃一，盡可能劃分不同的功能區(qū)域于固定位置，方便用戶導航使用；排版不宜過于密集，避免產生疲勞感。

B/S構架適用原則

·頁面最?。河捎赪eb的網絡特性，盡可能減小單頁面加載量，降低圖片文件大小和數(shù)量，加快加載速度，方便用戶體驗。

·屏幕適應：Web界面需要適應不同用戶屏幕大小。

·瀏覽器兼容：需要適應不同瀏覽器瀏覽效果，雖然目前可不考慮不同瀏覽器差別，但仍需考慮IE瀏覽器版本差異帶來的客戶端不同效果。

·最少垂直滾動：盡可能減少垂直方向滾動，盡可能不超過兩屏。

·禁止水平滾動：由于將導致非常惡劣的客戶體驗，盡可能禁止瀏覽器水平滾動操作。

·避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合用戶體驗習慣，盡可能避免。

本系統(tǒng)應用原則

·瘦客戶端要求：由于客戶應用環(huán)境配置大多較低，除服務器可單獨配置較靈活外，應該保證瘦客戶端，使用戶容易使用。例如盡量不要使用復雜的JS腳本和HTC組件，不要在客戶端使用IE整合XML/XSLT等等。

·大數(shù)據量表格的水平擴展要求：本系統(tǒng)中存在大數(shù)據量的列表，需要較大的交互界面支持，為避免水平滾動，應盡可能獲取大的屏幕水平空間。

·桌面面板導航簡化操作：為了實現(xiàn)方便簡捷的用戶操作，應該保證用戶絕大多數(shù)操作可通過首頁桌面面板的導航來實現(xiàn)。

·用戶自適應定義：提供較多的可訂制功能，尤其對桌面面板提供強大的定制功能；使用戶能夠將最常用的功能定義到桌面面板，每次登錄即可直接使用，簡化用戶操作。

·用戶常用操作記錄定義：對某些需定義操作的功能如查詢、搜索等，提供系統(tǒng)自動記憶和客戶定制功能，系統(tǒng)可自動記憶用戶前1~3次操作，或者用戶可自定義操作記錄，方便以后使用。

·大數(shù)據量表格的水平擴展要求：本系統(tǒng)中存在大數(shù)據量的列表，需要較大的交互界面支持，為避免水平滾動，應盡可能獲取大的屏幕水平空間。 

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.主界面設計

設計主界面，確定系統(tǒng)基本風格，是概要設計中的工作之一。首頁主界面的主要實現(xiàn)功能是導航，它要達到的目的，是盡可能使用戶僅通過首頁面板就可以完成所有常規(guī)任務。

screen.width-500)this.width=screen.width-500; border=0>

該主界面包含以下部分

用戶信息區(qū)域 顯示當前用戶信息

screen.width-500)this.width=screen.width-500; border=0>


用戶導航區(qū)域 用戶頁面導航，收藏功能可以將當前功能頁面收藏到快捷功能面板

screen.width-500)this.width=screen.width-500; border=0>


用戶導航功能樹 用戶頁面導航，收藏功能可以將當前功能頁面收藏到快捷功能面板

screen.width-500)this.width=screen.width-500; border=0>


功能樹隱藏 可水平擴展頁面空間

screen.width-500)this.width=screen.width-500; border=0>  

screen.width-500)this.width=screen.width-500; border=0>


桌面面板用戶幫助導航 用戶登錄時可根據用戶類型，自動加載相關使用幫助或導航。

screen.width-500)this.width=screen.width-500; border=0>


主任務通知區(qū)域 通知用戶系統(tǒng)業(yè)務流程中的待辦事宜；通知用戶辦公系統(tǒng)相關信息。

screen.width-500)this.width=screen.width-500; border=0>


用戶快捷面板 為了能方便快捷的訪問系統(tǒng)功能，避免每次訪問樹形菜單較深級次的繁瑣操作，用戶可將通過導航欄中的收藏按鈕，將當前頁面收藏到該面板中；該面板出現(xiàn)在所有業(yè)務頁面，用戶可以隨時訪問自己定義的功能頁面。該導航在首頁以面板形式出現(xiàn)，在其他頁面以下拉菜單形式出現(xiàn)。

screen.width-500)this.width=screen.width-500; border=0>


用戶自定義功能區(qū)域 用戶可將相關查詢搜索等功能定義到首頁面板，例如：最新完成報告察看、報告搜索、檢驗流程察看等等

screen.width-500)this.width=screen.width-500; border=0>

5.典型界面

以下是系統(tǒng)中幾個比較典型的界面模型。

screen.width-500)this.width=screen.width-500;

border=1>

screen.width-500)this.width=screen.width-500;

border=1>

screen.width-500)this.width=screen.width-500; border=1>

screen.width-500)this.width=screen.width-500; border=1>

在整個系統(tǒng)界面的設計過程中，需要注意整個系統(tǒng)的統(tǒng)一，設計風格要一致，界面中的交互元素，從色彩、樣式到排版方式、具體位置都要具備延續(xù)性，這樣才能使用戶盡快習慣整個系統(tǒng)操作。

6.典型交互模式

界面交互中，根據功能不同，有不同的交互方式。應該盡量提取抽象，盡可能減少交互模式的種類，或者把交互方式盡可能設計的類似，以方便用戶快速熟悉系統(tǒng)。

下面列舉3個系統(tǒng)中比較典型的交互模式，供大家參考。


單項選擇

screen.width-500)this.width=screen.width-500; border=1>


多項選擇

screen.width-500)this.width=screen.width-500; border=1>


項目分解（GIF動畫 4楨）

screen.width-500)this.width=screen.width-500; border=1>

7.Demo開發(fā)

Demo是詳細設計階段的重要成果之一，在對系統(tǒng)進行詳細的分析設計之后，開發(fā)出界面Demo原型，主要作用是提供給合作客戶，在基本功能、系統(tǒng)組成和易用性上進行測試。

本系統(tǒng)的Demo主要包括界面的設計制作，和部分客戶端表現(xiàn)層腳本的開發(fā)。為了在后面的實際業(yè)務開發(fā)中盡可能獲得重用，Demo的制作在頁面規(guī)范、CSS樣式定義和JS腳本編寫方面都嚴格遵循了系統(tǒng)開發(fā)規(guī)范，并在以后的代碼編寫工作中嚴格執(zhí)行。

本系統(tǒng)整個Demo包括大約50個頁面，耗時月3周。

在后續(xù)的開發(fā)過程中，仍然要嚴格控制整個開發(fā)過程，保證整個系統(tǒng)界面的統(tǒng)一，并隨時維護更新系統(tǒng)界面的設計。

8.結語

文章太長了……需要對以前很多東西進行回顧，實在很困難。很多細節(jié)，包括很多設計、技術上的東西，都已經記憶不清了，文章也顯得有些紊亂。

因此，如果大家有什么疑問，或有意見、指正，請?zhí)岢龌騺硇排c我交流。