一般適用原則

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

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

·用戶導(dǎo)向原則：為了方便用戶盡快熟悉系統(tǒng)，簡化操作，應(yīng)該盡可能的提供向?qū)再|(zhì)的操作流程。

·實(shí)時幫助原則：用戶需要能隨時響應(yīng)問題的用戶幫助。

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

·界面色彩要求：計(jì)算機(jī)屏幕的發(fā)光成像和普通視覺成像有很大的不同，應(yīng)該注意這種差別作出恰當(dāng)?shù)纳蚀钆?。對于需用戶長時間使用的系統(tǒng)，應(yīng)當(dāng)使用戶在較長時間使用后不至于過于感到視覺疲勞為宜。例如輕松的淡彩為主配色，灰色系為主配色等等。切忌色彩過多，花哨艷麗，嚴(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ǎo)致非常惡劣的客戶體驗(yàn)，盡可能禁止瀏覽器水平滾動操作。

·避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合用戶體驗(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ù)量的列表，需要較大的交互界面支持，為避免水平滾動，應(yīng)盡可能獲取大的屏幕水平空間。

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

·用戶自適應(yīng)定義：提供較多的可訂制功能，尤其對桌面面板提供強(qiáng)大的定制功能；使用戶能夠?qū)⒆畛Ｓ玫墓δ芏x到桌面面板，每次登錄即可直接使用，簡化用戶操作。

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

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

4.系統(tǒng)分析

在概要設(shè)計(jì)過程中，界面設(shè)計(jì)人員需要瀏覽需求分析報告，了解用戶的工作流程，和整個系統(tǒng)功能，再根據(jù)這些原始需求功能，歸納整理分析，并針對用戶交互設(shè)計(jì)需要，提出意見，參與系統(tǒng)設(shè)計(jì)。

其中包括對原始功能的分類歸納，提出系統(tǒng)交互需要的新功能，對用戶功能實(shí)現(xiàn)的優(yōu)先級進(jìn)行定義等等。

例如，提出用戶自定義快捷面板功能，常用操作自動記錄功能等，需要在概要設(shè)計(jì)時盡早提出，以方便作好系統(tǒng)規(guī)劃。

另外，需要對整個系統(tǒng)中的常見功能有比較清晰的了解，歸納整個系統(tǒng)界面交互中常見的交互形式，例如在本系統(tǒng)中就包括列表、查詢、搜索、填寫表單、項(xiàng)目分解、項(xiàng)目選擇、審批、報告等等；只有清晰的了解整個系統(tǒng)需求，才能較好的把握整個界面設(shè)計(jì)的統(tǒng)一性。當(dāng)然，這也和界面設(shè)計(jì)人員的經(jīng)驗(yàn)有很大關(guān)系。

4.主界面設(shè)計(jì)

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

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

該主界面包含以下部分

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

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


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

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


用戶導(dǎo)航功能樹 用戶頁面導(dǎo)航，收藏功能可以將當(dāng)前功能頁面收藏到快捷功能面板

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


功能樹隱藏 可水平擴(kuò)展頁面空間

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

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


桌面面板用戶幫助導(dǎo)航 用戶登錄時可根據(jù)用戶類型，自動加載相關(guān)使用幫助或?qū)Ш健?br>

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


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

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


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

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


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

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

6.典型交互模式

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

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


單項(xiàng)選擇

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


多項(xiàng)選擇

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


項(xiàng)目分解（GIF動畫 4楨）

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

7.Demo開發(fā)

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

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

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

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

8.結(jié)語

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

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