1、一個Web系統的界面設計和開發L工作流程（下圖，是整個開發過程中與界面設計相關的主要流程工作）需求分析j蚊要設計，八詳細設計在需求分析階段,在概要設計階段,在詳細設計階段,從最初需求分析開始，我就加入項目，自始自終參加整個開發過程。參與了對客戶的訪問和調研；參與了部分系統設計分析工作；完成了整個系統界面設計和Demo制作，并提交用戶反饋;在代碼開發階段,參與了系統表現層的設計開發。2.需求分析在需求分析階段，主要針對界面交互相關問題，對用戶進行若干調研。主要包括以下容 受眾用戶群調查 系統使用環境調查 受眾用戶使用習慣調查 用戶對舊版本軟件使用情況調查這一階段，由于成本原因，我并沒有直接訪問客

2、戶進行調查。工作主要是提出某些具體問題，由需求調研人員，以問卷或口頭問答方式，對客戶進行調研。另外，公司經駿豐富的客服人員和市場人員，也是非常重要的需求來源之一。本系統的客戶群主要為國家省市下屬質檢單位，最終受眾年齡從年輕到較高齡都有。對于普通國家機關人員，一般對計算機系統和網絡不夠熟悉，計算機環境一般，甚至比較差，少有配置優良的環境。在這種環境下，用戶對計算機使用一般沒有使用傾向，大多更適應手工操作。對本系統的前代使用，最主要意見是使用困難，不方便。還有其他具體調查反饋，如用戶基本不使用鼠標右鍵，年齡較大的用戶難以看清密集的較小文字等等。3 .界面設計原則在概要設計階段，根據需求階段的調研結

3、果，我整理了系統界面設計的基本原則。因為在代碼開發階段，很多時候界面的具體制作是由開發人員直接寫代碼，因此必須確定一定的原則和規，以保證系統界面的統一般適用原則 簡單明了原則：用戶的操作要盡可能以最直接最形象最易于理解的方式呈現在用戶面前。對操作接口，直接點擊高于右鍵操作，文字表示高于圖標示意，盡可能的符合用戶對類似系統的識別習慣。 方便使用原則：符合用戶習慣為方便使用的第一原則。其它還包括，實現目標功能的最少操作數原則，鼠標最短距離移動原則等。 用戶導向原則：為了方便用戶盡快熟悉系統，簡化操作，應該盡可能的提供向導性質的操作流程。 實時幫助原則：用戶需要能陵時響應問題的用戶都助。 提供高級自

4、定義功能：為熟悉計算機及軟件系統的高級用戶設置自定義功能，可以對已經確定的常規操作以及系統的方方面面進行符合自身習慣的自定義設置。包括常規操作、界面排版、界面樣式等種種自定義。 界面色彩要求：計算機屏幕的發光成像和普通視覺成像有很大的不同，應該注意這種差別作出恰當的色彩搭配。對于需用戶長時間使用的系統，應當使用戶在較長時間使用后不至于過于感到視覺疲勞為宜。例如輕松的淡彩為主配色，灰色系為主配色等等。切忌色彩過多，花哨艷麗，嚴重妨礙用戶視覺交互。 界面平面版式要求：系統樣式排版整齊劃一，盡可能劃分不同的功能區域于固定位置，方便用戶導航使用；排版不宜過于密集，避免產生疲勞感。B/S構架適用原則 頁

5、面最小：由于Web的網絡特性，盡可能減小單頁面加載量，降低圖片文件大小和數量，加快加載速度，方便用戶體險。 屏幕適應：Web界面需要適應不同用戶屏幕大小。 瀏覽器兼容：需要適應不同瀏覽器瀏覽效果，雖然目前可不考慮不同瀏覽器差別，但仍需考慮IE瀏覽器版本差異帶來的客戶端不同效果。 最少垂直滾動：盡可能減少垂直方向滾動，盡可能不超過兩屏。 禁止水平滾動：由于將導致非常惡劣的客戶體驟，盡可能禁止瀏覽器水平滾動操作。 避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合用戶體駿習慣，盡可能避免。本系統應用原則 瘦客戶端要求：由于客戶應用環境配置大多較低，除服務器可單獨配置較靈活外，應該保證瘦客戶端，使用戶容易

6、使用。例如盡量不要使用復雜的JS腳本和HTC組件，不要在客戶端使用IE整合XML/XSLT等 大數據量表格的水平擴展要求：本系統中存在大數據量的列表，需要較大的交互界面支持，為避免水平滾動，應盡可能獲取大的屏幕水平空間。 桌面面板導航簡化操作：為了實現方便簡捷的用戶操作，應該保證用戶絕大多數操作可通過首頁桌面面板的導航來實現。 用戶自適應定義：提供較多的可訂制功能，尤其對桌面面板提供強大的定制功能；使用戶能夠將最常用的功能定義到桌面面板，每次登錄即可直接使用，簡化用戶操作。 用戶常用操作記錄定義：對某些需定義操作的功能如查詢、搜索等，提供系統自動記憶和客戶定制功能,系統可自動記憶用戶前廣3次操

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

8、了解，歸納整個系統界面交互中常見的交互形式，例如在本系統中就包括列表、查詢、搜索、填寫表單、項目分解、項目選擇、審批、報告等等；只有清晰的了解整個系統需求，才能較好的把握整個界面設計的統一性。當然，這也和界面設計人員的經臉有很大關系。4.1 主界面設計設計主界面，確定系統基本風格，是概要設計中的工作之一。首頁主界面的主要實現功能是導航，它要達到的目的，是盡可能使用戶僅通過首頁面板就可以完成所有常規任務。Q0 二 B 修2 口的天分 口口儂手 00初好 彳忸辯”Q程皆注白喬k訪W。口不照噌曬A40度為芝列及-林彳娟秋.D -加物通注歸之分» HteUitti > 1 W.1I5&

9、#187;天于杳瞥內電U硒9t煙a a4 i KftH-XMitaShSfli $ Mona天子江瑪» )us xMjrauz i 壞冬R工由知» 2W32.K U方身及-MGKsSa 2 x)8，tq-公司:大©11，： gq3. OSXUWJAft利于元處員工騎會=乃通1：皿與皆山福也臺之文鐵次用?0十艮比動里| 依MM四上m/歡迎使用吉天2質檢版sa«»3：檢人XWA完舶期鬲幺產七索三于三aICO)1225XXIC01X1WT笛不麗1耿l*/tT短555ZOOT12Z>XW0JX1MT墨企支13產ARM芥ft*555SMQ312Zi

10、xwoiriM?*至好。產MiiiHfT季三思108124XWOIKSWTK£Mf：XiWa時H:芥fr空曷Q1?若該主界面包含以下部分用戶信息區域顯示當前用戶信息用戶導航區域用戶頁面導航，收藏功能可以將當前功能頁面收藏到快捷功能面板用戶導航功能樹用戶頁面導航，收藏功能可以將當前功能頁面收藏到快捷功能面板Q曰業務流程demo自業務委托，門合同評審任務分解口子任務單檢蛉記錄匚1報告編制日報告審核口報告終審0報告發放a基礎錯案demo口客尸管理口人事管理口設備管理e3系統管理擊moL口流程定義）口表單定義報告定義功能樹隱藏可水平擴展頁面空間桌面面板用戶幫助導航用戶登錄時可根據用戶類型，自

11、動加載相關使用幫助或導航。O用戶幫助向導1向導2O幫助向導3用戶向導4Q主任務通知區域通知用戶系統業務流程中的待辦事宜；通知用戶辦公系統相關信息。目待辦事宜列表+待審批委托單 12 2003.11.5+待檢驗計劃 3 2003.11.5+其他待處理項目1 5 2003.11.3+其他待處理項目2 1 2003.11.8+待官核用告 2 2003.11.12目辦公信息+緊念通知 2003.11.5+關于春節期間放假通知 2003.12.S+關于元旦期間放假通知 2003.12.S+年終公司工作總結通知 2003.12.1S十年終公司全體吊工大會通如 2003.12 .茄+關于元旦曷工馀合舉辦通的

12、1 2002.12.下用戶快捷面板為了能方便快捷的訪問系統功能，避免每次訪問樹形菜單較深級次的繁瑣操作，用戶可將通過導航欄中的收藏按鈕，將當前頁面收藏到該面板中；該面板出現在所有業務頁面，用戶可以隨時訪問自己定義的功能頁面。該導航在首頁以面板形式出現，在其他頁面以下拉菜單形式出現。快捷面板_+快隹功能列表十快建功能列表+計劃管理抽樣單+任務分派+自定義快捷功能+快便功能+自定義快捷功能+快捷功能口區用戶自定義功能區域用戶可將相關查詢搜索等功能定義到首頁面板，例如：最新完成報告察看、報告搜索、檢驗流程察看等等I/新完成報告3報告編導報告名稱主檢人主審人完成日期H2D031321267某企業某品牌

13、產品檢驗報告先三李三思2003.12.25H20O31321267某企業某晶6$產品檢會報告光三李三思2003.12.25H20O31321267某企業某國法產品檢駱報告張三至三思200312.25)(20031321267某企業某品牌產品檢驗報告非三李三忠2003.12.25H20O33321267某企業某牌產品檢騏報告張三李三思2003.12.25更鄉結果4.2.典型界面以下是系統中幾個比較典型的界面模型。女弟impaaf«s：中“8白，#促母。2口卻靛言口哈E制O隹與力1白公匕H不宣僚紀口界暑H9口片不OJJftfttt爭O整的科26口茶R*R*a儲2&孑*UM“6；0

14、9123>919理理至?品”找找，才OW1223如»««w3izin仁拓白話名旅Z2md松）旗HMW312201&蛤編6松3MOI2.25膛叫QI1MQ”目歸伐名§1X4A0M2.23強82紇史23露日系雪仃支,一十紀期h套一今大住工？9修女工后院任多阜幺a%，停小的=匕七口五余冏任備其寰阪林S京"解銅RT電電aGM-RCyrS903*2口樂穿行口加仔口名少M子屈辯”QG玲召口廿15耐n®4nGQ擰依修Wwnxe。口同5加g。0萬秀芳&七3寸%Rll>>于也勢差，fl勢分*mww82rttMX

15、1;8535F2H欣巖金K力配口；山不先京：gx.i.nia務名余：不域！通!區二盤總段n史&ihMBus配仁期要瀏饒r犯中百蠅心心人易開a,?，B*K?*tK在馬方:為制了電務.。:J&死口胃F1”第亢fRN匕作2和號必值義七見康I用E。Itffe14±de/ftSwEwaA5l:4±1c7ex妙仙>演小愕i口/少吃用e»i口任衣分口學代務”Oft殺uAR名茶？工修¥金正以飛給1T寰死尊在；3H151不付*常會七K*:也*左及«*R0!里免我RH；：公PI”大：201.hU富名燈WE蝌名。3彳的工城A.Rn«x

16、eO0不也若38M：3,4gA3于圮：.KKWtl：9I1«SHEZmi127)12911z«變KKHSiKtSU««*«««<«66836.2000«*«JC合脩“m.楊崎露000*00-2000臺忖車徊懺UM)anuS08%(K00。®尋修車6B8*38-200U®男3Q她|包£l%在整個系統界面的設計過程中，需要注意整個系統的統一，設計風格要一致，界面中的交互元素，從色彩、樣式到排版方式、具體位置都要具備延續性，這樣才能使用戶盡快習慣整個系統操作。4.3

17、.典型交互模式界面交互中，根據功能不同，有不同的交互方式。應該盡量提取抽象，盡可能減少交互模式的種類，或者把交互方式盡可能設計的類似，以方便用戶快速熟悉系統。下面列舉3個系統中比較典型的交互模式，供大家參考。單項選擇業國2»止務妻托船務圣托珞1拄建功能列友二J寫委足手并毀迂靠既您樂號:耍非內容，委托時阻：SPCTA：3SHC0JB.:費用像盒：察.日擊此圖赫用到tfc氣期連葬粗，不允產喊人.LLLLr-*|http7/l«calhe*(一內關Deo-icr©x.££：(»ttra»1Zxpl«rJulXIspj&#

18、171;，此的可界出a：避定詢送到3不尤許手工監名尸名稀者尸繪號簽妁書尸件fit送開某量S?至生產企業HB20344412黑臺資金業回名戶名林2H6203444114息就2企業回|林作公客戶名林aHB-20344410晟電也企業EHPA.容尸名瓊4HB2Q34令1】否民奔企業回i-1保存Cb|?箕節客尸名窩17生優;12f尸殘號叵4p%Kpr-w>vr提示：覬楣Q布鋪自動生喝其合同多項選擇曲多委托現裝索托同并圖S握水立古此除可找出y口日臉算毅，不允5要先單序號：1變先內營：矮蘢時日：r-鏟指白;r-項目新XPLjfffliflifl；r函1樣品列要|迪舜列聶 J樣品名比©Kff

19、iK»«密把口期殛碰年選車場J處方 腳雙祥陸名的3母程軍富健碰車生產會上92003.12.25寰應至均械妒后英必注豐生產史過22003. L 2.25罌試探品右秸2JE«fiS2003.12.25回配在品名密4莖維ta32003. i 2.23回1 234& laswaa訪|抵都2好過 回國|財3 http： /l«eolhoxt - 客天De.e - Nier«z«£t Xnt«r&et txplor«r；或曲酊臂出依不允湃手工而工步人.筌東二笠死提災后將CJ昵毓孌先合同.項目分解（GI