一個Web系統(tǒng)的界面設計和開發(fā)復習過程

1、一個web系統(tǒng)的界面設計和開發(fā)一個Web系統(tǒng)的界面設計和開發(fā)1 .工作流程下列圖,是整個開發(fā)過程中與界面設計相關的主要流程工作江培設it撤要設計用戶伏左稅克津分析東比仇罪 片用柯中31抽象*面設計制柞功能繪尚界擊史V風格設計界類學界面處鬧用尸,劑從最初需求分析開始,我就參加工程,自始自終參加整個開發(fā)過程在需求分析階段,參與了對客戶的訪問和調研;在概要設計階段,參與了局部系統(tǒng)設計分析工作；在詳細設計階段,完成了整個系統(tǒng)界面設計和Demo制作,并提交用戶反應；在代碼開發(fā)階段,參與了系統(tǒng)表現層的設計開發(fā).2 .需求分析在需求分析階段,主要針對界面交互相關問題,對用戶進行假設干調研.主要包括以下內容

2、受眾用戶群調查 系統(tǒng)使用環(huán)境調查 受眾用戶使用習慣調查 用戶對舊版本軟件使用情況調查這一階段,由于本錢原因,我并沒有直接訪問客戶進行調查.工作主要是提出某些具體問題,由需求調 研人員,以問卷或口頭問答方式,對客戶進行調研.另外,公司經驗豐富的客服人員和市場人員,也是 非常重要的需求來源之一.本系統(tǒng)的客戶群主要為國家省市下屬質檢單位,最終受眾年齡從年輕到較高齡都有.對于普通國家機關 人員,一般對計算機系統(tǒng)和網絡不夠熟悉,計算機環(huán)境一般,甚至比擬差,少有配置優(yōu)良的環(huán)境.在這 種環(huán)境下,用戶對計算機使用一般沒有使用傾向,大多更適應手工操作.對本系統(tǒng)的前代使用,最主要 意見是使用困難,不方便.還有其他

3、具體調查反應,如用戶根本不使用鼠標右鍵,年齡較大的用戶難以看清密集的較小文字等等. .界面設計原那么在概要設計階段,根據需求階段的調研結果,我整理了系統(tǒng)界面設計的根本原那么.由于在代碼開發(fā)階 段,很多時候界面的具體制作是由開發(fā)人員直接寫代碼,因此必須確定一定的原那么和標準,以保證系統(tǒng) 界面的統(tǒng)一.一般適用原那么簡單明了原那么：用戶的操作要盡可能以最直接最形象最易于理解的方式呈現在用戶面前.對操作接口, 直接點擊高于右鍵操作,文字表示高于圖標示意,盡可能的符合用戶對類似系統(tǒng)的識別習慣.方便使用原那么：符合用戶習慣為方便使用的第一原那么.其它還包括,實現目標功能的最少操作數原那么, 鼠標最短距離移

4、動原那么等.用戶導向原那么：為了方便用戶盡快熟悉系統(tǒng),簡化操作,應該盡可能的提供向導性質的操作流程.實時幫助原那么：用戶需要能隨時響應問題的用戶幫助提供高級自定義功能：為熟悉計算機及軟件系統(tǒng)的高級用戶設置自定義功能,可以對已經確定的常規(guī)操 作以及系統(tǒng)的方方面面進行符合自身習慣的自定義設置.包括常規(guī)操作、界面排版、界面樣式等種種自 定義.界面色彩要求：計算機屏幕的發(fā)光成像和普通視覺成像有很大的不同,應該注意這種差異作出恰當的色 彩搭配.對于需用戶長時間使用的系統(tǒng),應當使用戶在較長時間使用后不至于過于感到視覺疲勞為宜. 例如輕松的淡彩為主配色,灰色系為主配色等等.切忌色彩過多,花哨艷麗,嚴重阻礙用

5、戶視覺交互.界面平面版式要求：系統(tǒng)樣式排版整潔劃一,盡可能劃分不同的功能區(qū)域于固定位置,方便用戶導航使 用；排版不宜過于密集,防止產生疲勞感.B/S構架適用原那么頁面最?。河捎?Web的網絡特性,盡可能減小單頁面加載量,降低圖片文件大小和數量,加快加載速 度,方便用戶體驗.屏幕適應： Web界面需要適應不同用戶屏幕大小.瀏覽器兼容：需要適應不同瀏覽器瀏覽效果,雖然目前可不考慮不同瀏覽器差異,但仍需考慮IE瀏覽器版本差異帶來的客戶端不同效果.最少垂直滾動：盡可能減少垂直方向滾動,盡可能不超過兩屏禁止水平滾動：由于將導致非常惡劣的客戶體驗,盡可能禁止瀏覽器水平滾動操作.防止隱藏右鍵操作：瀏覽器的右

6、鍵操作不符合用戶體驗習慣,盡可能防止.本系統(tǒng)應用原那么瘦客戶端要求：由于客戶應用環(huán)境配置大多較低,除效勞器可單獨配置較靈活外,應該保證瘦客戶端, 使用戶容易使用.例如盡量不要使用復雜的JS腳本和HTC組件,不要在客戶端使用IE整合XML/XSLT 等等.大數據量表格的水平擴展要求：本系統(tǒng)中存在大數據量的列表,需要較大的交互界面支持,為防止水平 滾動,應盡可能獲取大的屏幕水平空間.桌面面板導航簡化操作：為了實現方便簡捷的用戶操作,應該保證用戶絕大多數操作可通過首頁桌面面 板的導航來實現.用戶自適應定義：提供較多的可訂制功能,尤其對桌面面板提供強大的定制功能；使用戶能夠將最常用 的功能定義到桌面面

7、板,每次登錄即可直接使用,簡化用戶操作.用戶常用操作記錄定義：對某些需定義操作的功能如查詢、搜索等,提供系統(tǒng)自動記憶和客戶定制功能,系統(tǒng)可自動記憶用戶前13次操作,或者用戶可自定義操作記錄,方便以后使用.大數據量表格的水平擴展要求：本系統(tǒng)中存在大數據量的列表,需要較大的交互界面支持,為防止水平 滾動,應盡可能獲取大的屏幕水平空間.4.系統(tǒng)分析在概要設計過程中,界面設計人員需要瀏覽需求分析報告,了解用戶的工作流程,和整個系統(tǒng)功能,再 根據這些原始需求功能,歸納整理分析,并針對用戶交互設計需要,提出意見,參與系統(tǒng)設計.其中包括對原始功能的分類歸納,提出系統(tǒng)交互需要的新功能,對用戶功能實現的優(yōu)先級進

8、行定義等 等.例如,提出用戶自定義快捷面板功能,常用操作自動記錄功能等,需要在概要設計時盡早提出,以方便 作好系統(tǒng)規(guī)劃.另外,需要對整個系統(tǒng)中的常見功能有比擬清楚的了解,歸納整個系統(tǒng)界面交互中常見的交互形式,例 如在本系統(tǒng)中就包括列表、查詢、搜索、填寫表單、工程分解、工程選擇、審批、報告等等；只有清楚 的了解整個系統(tǒng)需求,才能較好的把握整個界面設計的統(tǒng)一性.當然,這也和界面設計人員的經驗有很 大關系.4.1 主界面設計設計主界面,確定系統(tǒng)根本風格,是概要設計中的工作之一.首頁主界面的主要實現功能是導航,它要 到達的目的,是盡可能使用戶僅通過首頁面板就可以完成所有常規(guī)任務.a fWTE_*n e

9、口曲亨曼族 QfiWE u.H在暖上口澗峭X仙百*WtFH ikzri-Hiq合屯用wsHHimm11中BJSWMflJlf如電登件110碑豐不且富uif咄I Hsmi回回戛域:由叢生心時及n*右屈以曰.*乃安才小花瞰*-期MM - SJMSS觸跑口甲,盆不代叫*H口大町用二 g后田處* 口下星務 口電注 Fm 二代3；F*nwwQ| rf = AM0口和MXWFFO: Ht占H.K Io土|H*去it uaer | SI1性E?j比更漕u4n：HJ,AiJMAli；在整個系統(tǒng)界面的設計過程中,需要注意整個系統(tǒng)的統(tǒng)一,設計風格要一致,界面中的交互元素,從色 彩、樣式到排版方式、具體位置都要具備

10、延續(xù)性,這樣才能使用戶盡快習慣整個系統(tǒng)操作.4 . 3.典型交互模式界面交互中,根據功能不同,有不同的交互方式.應該盡量提取抽象,盡可能減少交互模式的種類,或 者把交互方式盡可能設計的類似,以方便用戶快速熟悉系統(tǒng).F面列舉3個系統(tǒng)中比擬典型的交互模式,供大家參考單項選擇亞勢第耗緊*也品隼酢號； 日擊就的卻肄于西 即思.恢不丸 產聚人.kiAf ; /Jl*c1曹玉JJo Irryp.f* *I & lrnq-1 :Explfirffr幺i此新H群凈13i色建可局川 不無訐手工NSIM*SWfli等戶齒口：孽口目.：雪胤Ota：LLLHP那么眼等戶導言戶勝St,遑舞意仁君.生產密曲I-IB2 0

11、344412吉胃奎業(yè)回害戶考時2M&20344114A但苜也回層作客戶名廊3HB2034 442(1曷包客把北匠府即.1茁Q至史客戶名4S3Ma20B4Wll看的笑曾回L用不12 34R慨竄學戶三陰摩跖牌號臼多項選擇兆方委授垠提里求甥:3Ht四容：|一女花RI、客戶借網：宗用麻口； |一麗| V+部K等拜日期軍里R生生產空d9宅號車堤博護罡,耳登車生下全女23ea2-25回眄詞怦曷名用M茶單枝9會吵/羽國躺療顯書于斗s*tk31WI.I3.39回i i a1g 國加工燈|#扁府位 回點擊龍磬標可可比四 目瑚聞錠5不苒.產下工箱九一、1磋*連瑞隼場修訕 陽1州1:品名他3HR海曬或評號也 :設定

12、可法判不允百丁工院：ftftHT 圖,MK.撥r霎料單瞿:依口口外生把七周.工程分解GIF動畫4楨了任錦分解于杵葬*甘： 1-#20031229314分配 FUR 2005 13130件套書醇：某單1碰蚌諛箸梅鼬合同委聿完成：工程笠號理目名者：檢蔓傕羽.Ml0031L士士乘客可觸展之處棱股楸聯(lián)車063406-3000一HtfaoaL 127313的槌骷同阿王GB&406-20aUHI2O03L137914下兩鼠,平攔巖物苔拮例GBMOC 2OQ0儂的工11 ft*任務立凄要欠T索產降葉后國.目作方一 T住處-提型史U驗裝工程摧取費廢：斫香惶航;日抬曩畜畜選眼費度：標宿岳推糠擇人二回函包W即庭詼三百麗 9J黑盤心 |4洎 顯示音同耳也信息提示二通過點擊EJS白亮表超右的臟 ,分配你需要自聞目到住袈分睇咕建卷中.再進眼度臉上；珀二成靠讀操性 度存杳卜分解亍柱辱,必不在斯白珈口分解二半口才整更交完成！4 . 4.Demo 開發(fā)Demo是詳細設計階段的重要成果之一,在對系統(tǒng)進行詳細的分析設計之后,開發(fā)出界面Demo原型,主要作