UI界面設(shè)計(jì)、交互設(shè)計(jì)及程序開發(fā)報(bào)告

1、UI 界面 設(shè)計(jì)、交互設(shè)計(jì)及程序開發(fā)在網(wǎng)絡(luò)項(xiàng)目開發(fā)過程中，這個(gè)階段也叫做構(gòu)建階段，是工作量最大、最艱 苦也是最難以控制的階段。不管一座大樓的設(shè)計(jì)藍(lán)圖多宏偉，若沒有管道工、 泥瓦匠、水電工等各種工匠一磚一瓦地艱辛積累，密切協(xié)作，這座大樓始終是 空中樓閣、海市蜃樓。一、界面設(shè)計(jì)打開用戶之門對(duì)于以 Web 服務(wù)為模式的項(xiàng)目，無論是訪問用戶還是系統(tǒng)管理員，主要 工 作都是通過瀏覽器的界面交互完成。給系統(tǒng)設(shè)計(jì)合理友好的 * 作界面就像給人 穿 衣服一樣，合體舒適的搭配能給人耳目一新的感覺，反之則令人敬而遠(yuǎn)之， 甚 至失去進(jìn)一步深入了解的興趣，這無疑不是開發(fā)人員所期望的結(jié)果。 以網(wǎng) 站為表現(xiàn)方式的系統(tǒng)界面

2、設(shè)計(jì)所涉及的知識(shí)遠(yuǎn)遠(yuǎn)超過了美術(shù)的范疇， 作為一個(gè) 優(yōu)秀的 Web 界面設(shè)計(jì)師來說，需要掌握的不僅僅是電腦制圖的能力， 還應(yīng)該具 備心理學(xué)、廣告創(chuàng)意、美術(shù)工藝、排版藝術(shù)等多方面的綜合素質(zhì)，系 統(tǒng)界面絕 不是孤芳自賞令人難以理解的抽象畫，而應(yīng)該成為絕大多數(shù)用戶共同 接受的最 方便的日用品。關(guān)于 Web 美工創(chuàng)作的 * 作技巧不是本文所關(guān)注的，我們希望知道的是用戶 最需要的是什么樣的界面？根據(jù)筆者的經(jīng)驗(yàn)，在進(jìn)行產(chǎn)品設(shè)計(jì)和項(xiàng)目開發(fā)的界 面設(shè)計(jì)中是有所不同的。產(chǎn)品通常是指可大量分發(fā)銷售的成熟性的產(chǎn)品，具體 用戶是不確定的，而項(xiàng)目大多是針對(duì)具體客戶的需求進(jìn)行開發(fā)，不具備二次銷 售的條件，當(dāng)然，在二者之間總

3、還是能找到共同點(diǎn)的。產(chǎn)品設(shè)計(jì)由于面對(duì)的是未知的用戶，因此界面設(shè)計(jì)必須挖掘的是用戶習(xí)慣和觀念的共性，大眾化產(chǎn)品（例如郵件系統(tǒng)、BBS、門戶網(wǎng)站等）、商業(yè)應(yīng)用 產(chǎn)品（例如交易系統(tǒng)、電子辦公系統(tǒng)）或?qū)I(yè)應(yīng)用產(chǎn)品（例如財(cái)務(wù)系統(tǒng)、殺毒 系統(tǒng)）等等，需要考慮的是所有人或某一類的人的共同習(xí)慣和審美觀念，而不 是刻意地出奇招、不斷地考驗(yàn)用戶的智商和耐心。項(xiàng)目開發(fā)則相反，面對(duì)明確的具體用戶考慮更多的是個(gè)性化設(shè)計(jì)，也許有 些是非常規(guī)的要求，但是用戶已經(jīng)具有特殊的偏好和習(xí)慣時(shí)，應(yīng)盡可能滿足用 戶的需求進(jìn)行設(shè)計(jì)。在筆者參與某個(gè)行業(yè)的辦公系統(tǒng)設(shè)計(jì)過程中，用戶就提出 了非常特別的要求，所有的界面不能出現(xiàn)外國(guó)人和外國(guó)場(chǎng)景的

4、形象，每一頁都 需要變換顏色，另外站點(diǎn)標(biāo)題要大得出乎尋常，失去比例，這時(shí)候美工只能遷 就用戶的心理和習(xí)慣，可是這樣的設(shè)計(jì)用到產(chǎn)品設(shè)計(jì)上，大多人都會(huì)感到不舒 服。不管是產(chǎn)品設(shè)計(jì)還是項(xiàng)目開發(fā)，界面設(shè)計(jì)都應(yīng)該遵循以下共同的規(guī)則：1. 界面風(fēng)格需要一致：每個(gè)新的系統(tǒng)對(duì)用戶來說都是一次新的學(xué)習(xí)過程，如果界面風(fēng)格經(jīng)常變化， 不保持統(tǒng)一，無疑更增加了用戶的學(xué)習(xí)難度，也許會(huì)導(dǎo)致用戶的厭煩。比如： 第一頁的導(dǎo)航條是圖片型的放在頁面頂部橫排的，而在第二頁導(dǎo)航條卻成了文 字型居左豎排，用戶會(huì)為了捉摸不清設(shè)計(jì)師的意圖而大光其火。再比如，有些 設(shè)計(jì)師考慮到用戶方便，在頁面上放置了后退的按鈕，但是要是不注意保持一 致的話

5、，用戶也許會(huì)糊涂后退、回首頁、BACK、上一頁這些按鈕究竟有什么 區(qū)別?也許非常惱火你是不是拿他在開涮！2. 界面元素對(duì)象化：在程序設(shè)計(jì)中需要注重模塊化，而界面設(shè)計(jì)中對(duì)象化同樣非常重要。將界面元素對(duì)象化，比如底部版權(quán)信息、導(dǎo)航條等，圖片、JS也盡可能復(fù)用，比如 站點(diǎn)標(biāo)志、搜索按鈕、滾動(dòng)信息的 JS 文件等等；3. 建立標(biāo)準(zhǔn)的文檔管理和設(shè)計(jì)規(guī)范 界面設(shè)計(jì)涉及的要素比較多，文件類型復(fù)雜，而界面文件往往還需要另外通過 程序進(jìn)行編譯，這就要求了界面設(shè)計(jì)人員必須建立規(guī)的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)的文檔 管理方法：* 制定文件命名標(biāo)準(zhǔn)* 設(shè)定文件統(tǒng)一路徑* 保存原始創(chuàng)作文件（例如 PSD 、Fla 源文件）* 最終完

6、成文件（經(jīng)過用戶認(rèn)可的文件）* 單獨(dú)管理摸版文件（經(jīng)過編譯或嵌入程序的文件）4. 考慮用戶偏好習(xí)慣和方便性我們經(jīng)?？梢月牭浇缑嬖O(shè)計(jì)師說：“怎么在我機(jī)器上看得好好的，怎么在 你那里就變樣了？”其實(shí)道理很簡(jiǎn)單，用戶的 * 作環(huán)境和習(xí)慣與設(shè)計(jì)環(huán)境是有差 別的，界面設(shè)計(jì)同程序一樣需要進(jìn)行測(cè)試，主要測(cè)試的對(duì)象為：5. 瀏覽器類型和版本兼容問題：假如有個(gè)很重要的菜單是需要IE5.5 支持的，但是用戶萬一使用的是 IE4.0 版本，那么這個(gè)菜單就再也打不開，結(jié)果可想而知；6分辨率：界面設(shè)計(jì)師的屏幕也許是 17寸的，分辨率甚至做到1280 X 960都 是可以接受的，但是用戶的如果用的 14 寸顯示器，分辨率

7、只能達(dá)到640 X 480 ，界面布局看起來會(huì)很可笑；7.字體大?。豪脴邮奖砭_控制頁面元素，特別是字體是很重要的。有不少用戶喜歡更改瀏覽器默認(rèn)的字體顯示大小，當(dāng)設(shè)計(jì)師看到用戶將字體顯示調(diào)整 成最大而將表格撐得亂七八糟的時(shí)候，或許會(huì)痛心疾首的；8.考慮特殊情況：用戶或許在瀏覽器設(shè)置了禁止顯示圖片或禁止JS 腳本等，有必要為圖片設(shè)置好尺寸以免影響其他元素的顯示，并有其他的方式代替 JS 需要 顯示的效果和信息。8. 編寫幫助：無論多么出色的界面設(shè)計(jì)對(duì)用戶來說都是陌生的，那么編寫站點(diǎn)幫助或軟 件幫助是個(gè)非常有效的辦法，把你的設(shè)計(jì)意圖和使用介紹明明白白地告訴用戶， 在用戶遇到困難的時(shí)候能夠得到最快

8、的幫助，不但可以降低用戶的不滿程度， 同時(shí)可以幫助用戶更加系統(tǒng)深入地學(xué)習(xí)和掌握。二：交互設(shè)計(jì)建立溝通的橋梁作為交互設(shè)計(jì)人員應(yīng)該讀讀 Alan Cooper 的軟件創(chuàng)新之路，被譽(yù)為“ VB 之父”地 Alan Cooper 明確地提出了將程序開發(fā)劃分為交互設(shè)計(jì)和編碼 設(shè)計(jì)兩大部分，筆者非常贊同。“軟件越來越難用，越來越難學(xué)?！蔽覀儾恢挂淮蔚芈牭接脩羧绱说乇г梗?也許程序員認(rèn)為機(jī)器就是如此理解程序的，隨著系統(tǒng)的日益復(fù)雜和功能的不斷 強(qiáng)大，軟件原來越難用，門檻越來越高是很正常的，但是別忘記用戶才是系統(tǒng) 的所有者和使用者，期望用戶成為計(jì)算機(jī)專家的要求顯然是難以接受的。在國(guó) 內(nèi)無論是從事商務(wù)的技術(shù)人員還

9、是技術(shù)型的商務(wù)人員都極其缺乏，交互設(shè)計(jì)師 就理所當(dāng)然地應(yīng)該成為彼此溝通的橋梁。程序員和用戶的差別是很明顯的，因此通過交互設(shè)計(jì)建立良好的溝通是非 常需要的。交互設(shè)計(jì)師的側(cè)重點(diǎn)并不在程序的編碼實(shí)現(xiàn)，而注重于用戶如何最好地與系 統(tǒng)交互 *作，在設(shè)計(jì)中重點(diǎn)需要考慮的是：1. 系統(tǒng)易用性：并非每個(gè)用戶都是計(jì)算機(jī)的熟練用戶，面對(duì)隱藏的層和特殊設(shè)計(jì)的菜單可 能會(huì)抓瞎，用戶不見得能明白雙擊左鍵能自動(dòng)滾屏或者怎樣能讓自動(dòng)滾屏停下 來、直接看最下面的結(jié)果？交互設(shè)計(jì)師特別需要重視的就是系統(tǒng)的易用性。有 條件的話，可以讓不同的陌生用戶從首頁開始*作，不給予任何提示和幫助，觀察用戶的上手和熟練程度，記錄并查找所有的陷阱

10、和缺陷，加以改進(jìn)。 2.流程 簡(jiǎn)便：“簡(jiǎn)單就是美”，在系統(tǒng)交互設(shè)計(jì)方面更是如此，如何用最少的 *作，最明 顯的提示和幫助，完成一項(xiàng)流程的 * 作是需要花大力氣進(jìn)行優(yōu)化的。3. 盲點(diǎn)測(cè)試：用戶的*作并不是嚴(yán)格的按照系統(tǒng)的提示順序進(jìn)行，也不一定會(huì)按照系統(tǒng)的 提示要求去做，而程序員在設(shè)計(jì)的過程中是按照既定的邏輯進(jìn)行開發(fā)的，測(cè)試 中也難免以自己的習(xí)慣 * 作，這時(shí)就可能出現(xiàn)盲點(diǎn)，即系統(tǒng)存在未被測(cè)試到的狀 態(tài)環(huán)境。編寫測(cè)試軟件或利用其他測(cè)試工具可以大大提高測(cè)試的可靠性。 例如一份表單正常提交以后，假如用戶利用歷史記錄后退，回到提交前的 狀態(tài)， 這時(shí)候修改了提交內(nèi)容，又再一次提交，那么結(jié)果是什么呢？再比如

11、，假如設(shè)計(jì)的彈出窗口的尺寸是700 X 500，且不可改變大小，隱藏滾動(dòng)條，而用 戶萬一 使用640 X 480的分辨率，那么彈出的窗口中，用戶如何能點(diǎn)擊到最下面的按鈕？4. 出錯(cuò)及異常提示：凡是軟件都是有 BUG 的，因此對(duì)各種出錯(cuò)或異常狀態(tài)給予用戶一個(gè)友好 的 提示和幫助，并提示用戶大概是由于什么原因，那么用戶會(huì)愉快的多。 筆 者遇到過一個(gè)用戶注冊(cè)系統(tǒng)，用戶注冊(cè)后希望修改密碼，有的能做成功， 而有 些人怎么也改不了，檢查了很長(zhǎng)時(shí)間才發(fā)現(xiàn)由于密碼設(shè)置的是不少于三位 不大 于八位，許多用戶密碼超過了八位，因此無法修改成功，但是由于沒有提 示出 錯(cuò)原因，所以用戶就不斷拼命地提交，最后只好憤怒地去

12、投訴。 再例如發(fā) 布信息的時(shí)候，可能會(huì)因?yàn)樘顚憰r(shí)間過長(zhǎng)，提交時(shí)被系統(tǒng)拒絕數(shù) 據(jù)丟失，那么 用戶辛辛苦苦撰寫的內(nèi)容永遠(yuǎn)消失了，還有什么比這個(gè)更令用戶 沮喪的嗎？在 填寫的輸入部分給用戶一個(gè)時(shí)間提示，或允許后退找回剛才的內(nèi) 容，至少可以 讓用戶容易接受一些。5. 利用用戶環(huán)境測(cè)試?yán)糜脩舻?*作環(huán)境進(jìn)行測(cè)試，用戶的服務(wù)器、網(wǎng)絡(luò)線路和客戶機(jī)也許跟開 發(fā)環(huán)境差別巨大，用戶的機(jī)器配置、網(wǎng)絡(luò)環(huán)境對(duì)系統(tǒng)的要求是不一樣的。比如 設(shè)計(jì)客戶端的 APPLET 時(shí)也許會(huì)因?yàn)榭蛻魴C(jī)的內(nèi)存不足而崩潰，也可能因?yàn)槲?件過大，遠(yuǎn)程訪問時(shí)處理時(shí)間過長(zhǎng)而響應(yīng)失敗。Web 的交互設(shè)計(jì)師需要掌握的技能主要是 Javas cript

13、 、VBs cript 、Dhtml 、 Flash 等，還需要了解心理學(xué)、人因工程學(xué)、系統(tǒng)工程等方面 的經(jīng)驗(yàn)和知識(shí)，認(rèn)真把握每個(gè)交互動(dòng)作的合理性和可行性，這個(gè)交互也許是個(gè) 鏈接，也可能是個(gè)表單、提示窗口或者是滾動(dòng)條的拉動(dòng)距離，檢查是否最優(yōu)化 和最合理的方式。舉個(gè)很簡(jiǎn)單的例子，在鏈接列表過多出現(xiàn)翻頁的時(shí)候，程序員很自然地會(huì) 將上一頁、下一頁的翻頁按鈕放在了最底下，但是列表很長(zhǎng)的時(shí)候，用戶每次 翻頁的時(shí)候都需要把滾動(dòng)條拉到最下面才可以點(diǎn)擊到翻頁按鈕，用戶可能就會(huì)抱怨，明明知道在某一頁，卻每次要點(diǎn)擊后拉滾動(dòng)條尋找翻頁按鈕，而如果將 翻頁按鈕在列表的上面也放一條，并且設(shè)置直接跳轉(zhuǎn)到某頁的按鈕，則大大

14、減 輕了用戶的工作量，類似的例子在我們的設(shè)計(jì)中屢見不鮮。三：程序開發(fā)是系統(tǒng)的基石程序員進(jìn)行編碼，構(gòu)成了系統(tǒng)的基礎(chǔ)。在進(jìn)行系統(tǒng)分析和軟件建模以后，程序開發(fā)便進(jìn)入實(shí)質(zhì)性的過程。但是在程序員動(dòng)手之前不單需要和系統(tǒng)分析員打交道，還要和界面工程師，交互設(shè)計(jì)師，業(yè)務(wù)流程分析員以及客戶交流，除了理解程序邏輯以外，同時(shí)需要理解界面設(shè)計(jì)和交互設(shè)計(jì)的要求，使得程序開 發(fā)成功的可能性大大提高，達(dá)到事半功倍的效果。隨著網(wǎng)絡(luò)開發(fā)技術(shù)的日益發(fā)展和用戶需求的不斷增長(zhǎng)，系統(tǒng)開發(fā)中的編碼 工作日益繁重，不僅僅需要考慮性能和功能的實(shí)現(xiàn)，而且需要考慮今后的維護(hù) 和擴(kuò)展，需要考慮到系統(tǒng)的集成和穩(wěn)定，許多稍微復(fù)雜一些的系統(tǒng)開發(fā)便不再

15、是一個(gè)人能獨(dú)立完成的，因此程序開發(fā)需要遵照嚴(yán)格規(guī)范的開發(fā)過程。1.文檔規(guī)范：軟件即文檔。良好的文檔習(xí)慣是系統(tǒng)開發(fā)極其重要的，文檔是程序的一部分，程序員花 一定時(shí)間進(jìn)行文檔編寫是份內(nèi)的工作。具備完整的文檔記錄，對(duì)于系統(tǒng)今后的 二次開發(fā)、查錯(cuò)、升級(jí)具有重大的作用?？梢哉f即使代碼全部扔掉，只要文檔 完整，很快就可以再造一個(gè)系統(tǒng)出來，而只保留了代碼，缺乏文檔的時(shí)候，就 像被抽了脊梁的標(biāo)本，再難站起來恢復(fù)原樣。2. 編碼規(guī)范：編碼規(guī)范包含了程序排版、注釋、命名、可讀性、變量、程序效率、質(zhì)量保證、代碼編譯、代碼測(cè)試和版本控制等等注意事項(xiàng)。程序員最常見的問題之一：“別人寫的代碼看不懂，與其改寫不如重寫”。

16、基本上都是沒有按照編碼規(guī)范開發(fā)的緣故。所以我們經(jīng)常聽說某個(gè)程序員離職 以后，他所寫的那些模塊就沒法維護(hù)和管理了。3. 代碼復(fù)用：代碼復(fù)用是程序員的夢(mèng)想，也是系統(tǒng)成熟度的重要標(biāo)志，關(guān)于代 碼復(fù)用方法的討論不在本文之列，但是做為代碼復(fù)用是程序員走向成熟和提升 的必經(jīng)之路。4. 測(cè)試測(cè)試再測(cè)試：筆者在軟件工程的討論會(huì)上，微軟的一位項(xiàng)目經(jīng)理在介紹 微軟如何保證產(chǎn)品質(zhì)量時(shí)說：“微軟質(zhì)量保證的秘密就是：測(cè)試測(cè)試再測(cè)試！ 在 IE4.0 的開發(fā)小組中， 200 名開發(fā)程序員意外還有 200 多名測(cè)試工程師， 而 且測(cè)試工程師的水平甚至高于開發(fā)工程師。測(cè)試是系統(tǒng)質(zhì)量最直接有效的手 段。 在國(guó)內(nèi)的開發(fā)環(huán)境達(dá)到這

17、樣的投入和水平顯然是不太現(xiàn)實(shí)的，但是盡可能 提高 測(cè)試環(huán)境和加強(qiáng)測(cè)試管理，是程序員和測(cè)試工程師共同的方向。 四：本階段 的重點(diǎn)工作：在這個(gè)階段是整個(gè)項(xiàng)目組參與角色最多，也是協(xié)作最密切最難控制的過程， 筆者認(rèn)為做為項(xiàng)目經(jīng)理特別需要關(guān)注以下問題：1. 建立項(xiàng)目小組的溝通渠道：溝通是項(xiàng)目小組具有密切協(xié)作形成凝聚力的最重要的手段，在項(xiàng)目開發(fā)過 程隨著各個(gè)角色的工作進(jìn)展，沖突和矛盾是必不可少的，無論是通過論壇、郵 件、會(huì)議、口頭還是私下溝通，項(xiàng)目管理人員有責(zé)任和義務(wù)建立小組通暢及時(shí) 的溝通渠道，根據(jù)有經(jīng)驗(yàn)的 HR 經(jīng)理分析：有效的溝通應(yīng)該是在問題發(fā)生的 48 小時(shí)之內(nèi)，否則解決的效率會(huì)降低 75 。2. 建