1、一個Web系統(tǒng)OA界面設(shè)計和開發(fā)早在中國IT業(yè)方興未艾之時，計算機應(yīng)用系統(tǒng)主要以功能實現(xiàn)為主，幾乎沒有界面設(shè)計這個概念。時至今日，隨著計算機和網(wǎng)絡(luò)的不斷普及，社會信息化程度日益加深，用戶和市場的不斷成熟，人們已經(jīng)不僅僅滿足于夠用”而是更加強調(diào) 好用”易用”；因此，不論是普通最終用戶的個人軟件， 還是企業(yè)應(yīng)用的大型系統(tǒng)， 界面設(shè)計在系統(tǒng)構(gòu)建中都成為了一個非 常重要的方面。但是，（至少在中國）由于IT業(yè)發(fā)展滯后、市場還不夠成熟等原因，在絕大多數(shù)企業(yè)中，界 面設(shè)計在軟件系統(tǒng)開發(fā)中還沒有獲得與之重要性相匹配的一席之地，并且在企業(yè)運作和協(xié)調(diào)中也沒有形成成熟的模式和解決方案，如何做好界面設(shè)計和開發(fā)， 仍然

2、是大家不斷研究探討的一個問題。我寫這篇文章，主要內(nèi)容是我參加一個面向質(zhì)檢行業(yè)的Web系統(tǒng)界面設(shè)計和開發(fā)工作的過程，包括其間的一些構(gòu)思和想法；希望能和大家一起探討一下這個問題，供大家參考。另外，我同時承擔(dān)了系統(tǒng)開發(fā)和界面設(shè)計工作，所以，雖然這是一篇討論界面設(shè)計的文章， 我會盡量把文章限制在界面設(shè)計范圍內(nèi)，但也有可能包含一些開發(fā)和系統(tǒng)設(shè)計的內(nèi)容，請大家辨析清楚，歡迎指正。1工作流程F圖，是整個開發(fā)過程中與界面設(shè)計相關(guān)的主要流程工作。需求分析概要設(shè)計定義結(jié)構(gòu)樹系統(tǒng)功能定義功能描象流程分析検決劃分用戶優(yōu)先級系統(tǒng)功能界面設(shè)計制作功能結(jié)構(gòu)、分析y風(fēng)格設(shè)計界血類型抽象界面類型 設(shè)計界面DEMO 制作用戶評測

3、完成從最初需求分析開始，我就加入項目，自始自終參加整個開發(fā)過程。 在需求分析階段，參與了對客戶的訪問和調(diào)研； 在概要設(shè)計階段，參與了部分系統(tǒng)設(shè)計分析工作； 在詳細(xì)設(shè)計階段，完成了整個系統(tǒng)界面設(shè)計和Demo 制作，并提交用戶反饋；在代碼開發(fā)階段，參與了系統(tǒng)表現(xiàn)層的設(shè)計開發(fā)。2. 需求分析在需求分析階段，主要針對界面交互相關(guān)問題，對用戶進(jìn)行若干調(diào)研。主要包括以下內(nèi)容受眾用戶群調(diào)查系統(tǒng)使用環(huán)境調(diào)查受眾用戶使用習(xí)慣調(diào)查用戶對舊版本軟件使用情況調(diào)查 這一階段， 由于成本原因， 我并沒有直接訪問客戶進(jìn)行調(diào)查。 工作主要是提出某些具體問題， 由需求調(diào)研人員， 以問卷或口頭問答方式， 對客戶進(jìn)行調(diào)研。 另外，

4、 公司經(jīng)驗豐富的客服人 員和市場人員，也是非常重要的需求來源之一。本系統(tǒng)的客戶群主要為國家省市下屬質(zhì)檢單位， 最終受眾年齡從年輕到較高齡都有。 對于普 通國家機關(guān)人員， 一般對計算機系統(tǒng)和網(wǎng)絡(luò)不夠熟悉， 計算機環(huán)境一般， 甚至比較差， 少有 配置優(yōu)良的環(huán)境。 在這種環(huán)境下， 用戶對計算機使用一般沒有使用傾向， 大多更適應(yīng)手工操 作。對本系統(tǒng)的前代使用，最主要意見是使用困難，不方便。還有其他具體調(diào)查反饋， 如用戶基本不使用鼠標(biāo)右鍵， 年齡較大的用戶難以看清密集的較小3. 界面設(shè)計原則 在概要設(shè)計階段， 根據(jù)需求階段的調(diào)研結(jié)果， 我整理了系統(tǒng)界面設(shè)計的基本原則。 因為在代 碼開發(fā)階段， 很多時候界

5、面的具體制作是由開發(fā)人員直接寫代碼， 因此必須確定一定的原則 和規(guī)范，以保證系統(tǒng)界面的統(tǒng)一。一般適用原則簡單明了原則：用戶的操作要盡可能以最直接最形象最易于理解的方式呈現(xiàn)在用戶面前。對操作接口， 直接點擊高于右鍵操作， 文字表示高于圖標(biāo)示意， 盡可能的符合用戶對類似系 統(tǒng)的識別習(xí)慣。方便使用原則：符合用戶習(xí)慣為方便使用的第一原則。其它還包括，實現(xiàn)目標(biāo)功能的最少 操作數(shù)原則，鼠標(biāo)最短距離移動原則等。用戶導(dǎo)向原則：為了方便用戶盡快熟悉系統(tǒng)，簡化操作，應(yīng)該盡可能的提供向?qū)再|(zhì)的操 作流程。實時幫助原則：用戶需要能隨時響應(yīng)問題的用戶幫助。提供高級自定義功能：為熟悉計算機及軟件系統(tǒng)的高級用戶設(shè)置自定義功

6、能，可以對已經(jīng) 確定的常規(guī)操作以及系統(tǒng)的方方面面進(jìn)行符合自身習(xí)慣的自定義設(shè)置。 包括常規(guī)操作、 界面 排版、界面樣式等種種自定義。界面色彩要求：計算機屏幕的發(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)架適用原則頁面最小：由于 Web的網(wǎng)絡(luò)特性，盡可能

7、減小單頁面加載量，降低圖片文件大小和數(shù)量， 加快加載速度，方便用戶體驗。屏幕適應(yīng)： Web 界面需要適應(yīng)不同用戶屏幕大小。瀏覽器兼容：需要適應(yīng)不同瀏覽器瀏覽效果，雖然目前可不考慮不同瀏覽器差別，但仍需考慮 IE 瀏覽器版本差異帶來的客戶端不同效果。最少垂直滾動：盡可能減少垂直方向滾動，盡可能不超過兩屏。禁止水平滾動：由于將導(dǎo)致非常惡劣的客戶體驗，盡可能禁止瀏覽器水平滾動操作。避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合用戶體驗習(xí)慣，盡可能避免。本系統(tǒng)應(yīng)用原則瘦客戶端要求：由于客戶應(yīng)用環(huán)境配置大多較低，除服務(wù)器可單獨配置較靈活外，應(yīng)該保 證瘦客戶端， 使用戶容易使用。 例如盡量不要使用復(fù)雜的 J

8、S 腳本和 HTC 組件， 不要在客戶 端使用 IE 整合 XML/XSLT 等等。大數(shù)據(jù)量表格的水平擴展要求：本系統(tǒng)中存在大數(shù)據(jù)量的列表，需要較大的交互界面支持， 為避免水平滾動，應(yīng)盡可能獲取大的屏幕水平空間。桌面面板導(dǎo)航簡化操作：為了實現(xiàn)方便簡捷的用戶操作，應(yīng)該保證用戶絕大多數(shù)操作可通 過首頁桌面面板的導(dǎo)航來實現(xiàn)。用戶自適應(yīng)定義：提供較多的可訂制功能，尤其對桌面面板提供強大的定制功能；使用戶 能夠?qū)⒆畛Ｓ玫墓δ芏x到桌面面板，每次登錄即可直接使用，簡化用戶操作。用戶常用操作記錄定義：對某些需定義操作的功能如查詢、搜索等，提供系統(tǒng)自動記憶和 客戶定制功能， 系統(tǒng)可自動記憶用戶前 13次操作，

9、 或者用戶可自定義操作記錄， 方便以后 使用。大數(shù)據(jù)量表格的水平擴展要求：本系統(tǒng)中存在大數(shù)據(jù)量的列表，需要較大的交互界面支持， 為避免水平滾動，應(yīng)盡可能獲取大的屏幕水平空間。4. 系統(tǒng)分析在概要設(shè)計過程中， 界面設(shè)計人員需要瀏覽需求分析報告， 了解用戶的工作流程， 和整個系 統(tǒng)功能，再根據(jù)這些原始需求功能，歸納整理分析，并針對用戶交互設(shè)計需要，提出意見， 參與系統(tǒng)設(shè)計。其中包括對原始功能的分類歸納， 提出系統(tǒng)交互需要的新功能， 對用戶功能實現(xiàn)的優(yōu)先級進(jìn) 行定義等等。例如， 提出用戶自定義快捷面板功能， 常用操作自動記錄功能等， 需要在概要設(shè)計時盡早提 出，以方便作好系統(tǒng)規(guī)劃。另外， 需要對整個

10、系統(tǒng)中的常見功能有比較清晰的了解， 歸納整個系統(tǒng)界面交互中常見的交 互形式， 例如在本系統(tǒng)中就包括列表、 查詢、 搜索、 填寫表單、 項目分解、 項目選擇、 審批、 報告等等；只有清晰的了解整個系統(tǒng)需求，才能較好的把握整個界面設(shè)計的統(tǒng)一性。當(dāng)然， 這也和界面設(shè)計人員的經(jīng)驗有很大關(guān)系。4.主界面設(shè)計設(shè)計主界面， 確定系統(tǒng)基本風(fēng)格， 是概要設(shè)計中的工作之一。 首頁主界面的主要實現(xiàn)功能是 導(dǎo)航，它要達(dá)到的目的，是盡可能使用戶僅通過首頁面板就可以完成所有常規(guī)任務(wù)。0 |Q| = ._!；=口 印 邑曙勺 ?(!<> 昌苗 Bftfl* O口醉鼻宜尊 容0爭畤"畑 ©0不

11、廉曙:i.K* tyeae:pE» Q iJnQjiJl.-nm卩帕冷才劃1 f-需于書耳稍點笊砂忙If-M-冨H舲曲01 4 K« aiJ<-JiTjLntrtta'L* wuat«* X»ii!Rlli2 I *ma ait 3WU 1ih *<(!«丄f2vttJI-Ul耳n營割盤滋良工黑盅帀繪-卻旦X*呃M覽貶-打斤土為工強土豈辦;v MtUM wirc4血坦芒趣曇出矗3B耳r>A劉人KXCtllHLMfEJ厶夏曲IFJ1H幻凰恆聲 E3S3.I± a鈕巒百諭*特三辛詐sm i2 薯疋CdatMLXF

12、竝匹 5 產(chǎn) JSJSKjli"1fl£Z3Z®3CQ 1? 3比立的耳即2>3®3MU ISK冨£2沙占*#1蛀g也空If帶vntw該主界面包含以下部分用戶信息區(qū)域顯示當(dāng)前用戶信息用尸: 角色：鏘管琛員用戶導(dǎo)航區(qū)域用戶頁面導(dǎo)航，收藏功能可以將當(dāng)前功能頁面收藏到快捷功能面板首1可1幫辭1退出口返回G前進(jìn)區(qū):刷新E1收藏用戶導(dǎo)航功能樹用戶頁面導(dǎo)航，收藏功能可以將當(dāng)前功能頁面收藏到快捷功能面板曰 業(yè)務(wù)流程dewiD1包業(yè)務(wù)否托合同評審I- 口任務(wù)分解子任務(wù)單；檢臉記錄.口報告漏制 口報告審核 丨L 報告鏤審 L 口報告發(fā)放 O 基礎(chǔ)檔案血1W

13、客戶管理.口人爭管理 j L.Q設(shè)備管理 Q曰系統(tǒng)管理demot- 口流程定義I- 口表單定義：口報吉定丈功能樹隱藏可水平擴展頁面空間桌面面板用戶幫助導(dǎo)航 用戶登錄時可根據(jù)用戶類型，自動加載相關(guān)使用幫助或?qū)Ш健［坑脩魩蚢n佝導(dǎo)】O問導(dǎo)2O幫助向?qū)?O用戶向?qū)?O主任務(wù)通知區(qū)域 通知用戶系統(tǒng)業(yè)務(wù)流程中的待辦事宜；通知用戶辦公系統(tǒng)相關(guān)信息。目待辦爭宜列表L目辦公信+持審批委托單| 12 200B41S+緊急通知|200.11.5待檢驗計劃|31200B.11S+關(guān)于春節(jié)期間放假通知|2003.12.25+苴他待處珪項目1p S |2009413+關(guān)于元旦期間戰(zhàn)假通知| 2003,1225+苴他待處

14、理項目z1 1 1200941,$+年終公司工作總結(jié)通知|2003,12 4E+侍審核報告1 z 1Z003.1112*年鏤公司全林員工大會通知|2003.1Z .26+關(guān)于元旦員工晚會舉辦通知|2003.1226用戶快捷面板 為了能方便快捷的訪問系統(tǒng)功能，避免每次訪問樹形菜單較深級次的繁瑣操 作，用戶可將通過導(dǎo)航欄中的收藏按鈕，將當(dāng)前頁面收藏到該面板中；該面板出現(xiàn)在所有業(yè)務(wù)頁面，用戶可以隨時訪問自己定義的功能頁面。該導(dǎo)航在首頁以面板形式出現(xiàn)，在其他頁面以下拉菜單形式出現(xiàn)。快35面板_ _ _ _ -+快捷功能列表+快捷功能列表+計劃管理+抽徉單+任務(wù)分派+自定義快11功能+快捷功能+自定義快

15、捷功能+快捷功能用戶自定義功能區(qū)域 用戶可將相關(guān)查詢搜索等功能定義到首頁面板，例如：最新完成報告 察看、報告搜索、檢驗流程察看等等快魏面板_ _ _ _ +快捷功能列表+快捷功能列表+計劃首理+抽祥單+任務(wù)分派+自定義快捷功能+快捷功能+自定義快捷功能+快捷功能0135典型界面 以下是系統(tǒng)中幾個比較典型的界面模型。jJjJax 1I <)h | !f：sbeoouaooQS|盤HGE 港I”幫磚LJ.HUUli死研5壯u建誅三hbK<O3i12±»I113i±!k吏謔曲愴站抑沖1S.Z»it污：北走顱命馬確書益片st"nrlfrs-

16、TS*!両；勇箏包*陌征* s Ww r ff*>t?s總旳立.何>疋鬲3jJ對桎野出更邑世恃素看 京i話冃酥亙不5h (wrstDS' 百jJcj皿O-xvO處<zO«rw ISBM9QO>KTfWrw>|wmxtiKHA.KPaaBH.cj皿cj皿u樂2 it5：a««xKr±.大*:勺怖心任力，任1*;肓1：切涼cj皿cj皿MMWOtWMpZ>U14m»Oir«Mo-xvO處<z O«RW ISBM9QO>KTfWrw>|wmxtiKHA.KPaaBH.cj

17、皿cj皿u樂2 it5：a««xKr±.大*:勺怖心任力，任1*;肓1：切涼cj皿cj皿MMWOtWM|盤m畫*I1E4ESH覆器打LJ.Hfl:WV1ZZB歸 Id 胡>10紳帕殍總、苗it栓哮侖«240*9 1S.Z»w*i： Jtsas-st »-ritnrt-Ta*i>£: via*iirfE+ hf n*>t: s is laijtf.口口已口口 udQa口趕將出吏邑*童盲Si帝訶0在整個系統(tǒng)界面的設(shè)計過程中，需要注意整個系統(tǒng)的統(tǒng)一， 設(shè)計風(fēng)格要一致，界面中的交互元素，從色彩、樣式到排版方式、具體

18、位置都要具備延續(xù)性，這樣才能使用戶盡快習(xí)慣整個 系統(tǒng)操作。6典型交互模式界面交互中，根據(jù)功能不同，有不同的交互方式。 應(yīng)該盡量提取抽象， 盡可能減少交互模式 的種類，或者把交互方式盡可能設(shè)計的類似，以方便用戶快速熟悉系統(tǒng)。下面列舉3個系統(tǒng)中比較典型的交互模式，供大家參考。單項選擇j«咅此郵M撐掰 日畔;S擇肛不丸 :曲n xifllSA.宴圧由容MMHi 席戶掘釦 9UCIA; 曹用it易:喜戶名雷宮戶“號善戶性fii進(jìn)捕HB20344412<臺缶全業(yè)茴"事戶5（52HB003444H44國査生業(yè)回HB2D34-i410X回薯A名株4HB20344411W回；此圖標(biāo)可齊岀取光許手工慎3|lil; Ip： fflat-胡F黃UmMib - 覽耳1!申嗟£Zsli幺|1»*右戶劭愼亦*戶燉EU123 4多項選擇£；y?"蜩麻業(yè)餐盡吒迥示爲(wèi)由址齢可理出哲 曰IB刪幣，不尤31J6聖序弓：l委兀內(nèi)畔:春托時何;切tdaa«A：苛項目分解（GIF動畫4楨）子任雋分解子任務(wù)輪號： HB2003122931斗任勢名轟：某單位碰碰車設(shè)備檢驗含同分配日期:20