UI界面設(shè)計(jì)交互設(shè)計(jì)及程序開(kāi)發(fā)

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

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

3、掘的是用戶習(xí)慣和觀念的共性，大眾化產(chǎn)品（例如郵件系統(tǒng)、BBS、門(mén)戶網(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)）等等，需要考慮的是所有人或某一類(lèi)的人的共同習(xí)慣和審美觀念，而不是刻意地出奇招、不斷地考驗(yàn)用戶的智商和耐心。項(xiàng)目開(kāi)發(fā)則相反，面對(duì)明確的具體用戶考慮更多的是個(gè)性化設(shè)計(jì)，也許有些是非常規(guī)的要求，但是用戶已經(jīng)具有特殊的偏好和習(xí)慣時(shí)，應(yīng)盡可能滿足用戶的需求進(jìn)行設(shè)計(jì)。在筆者參與某個(gè)行業(yè)的辦公系統(tǒng)設(shè)計(jì)過(guò)程中，用戶就提出了非常特別的要求，所有的界面不能出現(xiàn)外國(guó)人和外國(guó)場(chǎng)景的形象，每一頁(yè)都需要變換顏色，另外站點(diǎn)標(biāo)題要大得出乎尋常，失去比例，這時(shí)候美工只能遷

4、就用戶的心理和習(xí)慣，可是這樣的設(shè)計(jì)用到產(chǎn)品設(shè)計(jì)上，大多人都會(huì)感到不舒服。不管是產(chǎn)品設(shè)計(jì)還是項(xiàng)目開(kāi)發(fā)，界面設(shè)計(jì)都應(yīng)該遵循以下共同的規(guī)則：1.界面風(fēng)格需要一致：每個(gè)新的系統(tǒng)對(duì)用戶來(lái)說(shuō)都是一次新的學(xué)習(xí)過(guò)程，如果界面風(fēng)格經(jīng)常變化，不保持統(tǒng)一，無(wú)疑更增加了用戶的學(xué)習(xí)難度，也許會(huì)導(dǎo)致用戶的厭煩。比如：第一頁(yè)的導(dǎo)航條是圖片型的放在頁(yè)面頂部橫排的，而在第二頁(yè)導(dǎo)航條卻成了文字型居左豎排，用戶會(huì)為了捉摸不清設(shè)計(jì)師的意圖而大光其火。再比如，有些設(shè)計(jì)師考慮到用戶方便，在頁(yè)面上放置了后退的按鈕，但是要是不注意保持一致的話，用戶也許會(huì)糊涂后退、回首頁(yè)、BACK、上一頁(yè)這些按鈕究竟有什么區(qū)別?也許非常惱火你是不是拿他在開(kāi)涮

5、！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ì)涉及的要素比較多，文件類(lèi)型復(fù)雜，而界面文件往往還需要另外通過(guò)程序進(jìn)行編譯，這就要求了界面設(shè)計(jì)人員必須建立規(guī)的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)的文檔管理方法：* 制定文件命名標(biāo)準(zhǔn)* 設(shè)定文件統(tǒng)一路徑* 保存原始創(chuàng)作文件（例如PSD、Fla源文件）* 最終完成文件（經(jīng)過(guò)用戶認(rèn)可的文件）* 單獨(dú)管理摸版文件（經(jīng)過(guò)編譯或嵌入程序的文件）4.考慮用戶偏好習(xí)慣和方便性我們經(jīng)常可以聽(tīng)到界

6、面設(shè)計(jì)師說(shuō)：“怎么在我機(jī)器上看得好好的，怎么在你那里就變樣了？”其實(shí)道理很簡(jiǎn)單，用戶的*作環(huán)境和習(xí)慣與設(shè)計(jì)環(huán)境是有差別的，界面設(shè)計(jì)同程序一樣需要進(jìn)行測(cè)試，主要測(cè)試的對(duì)象為：5.瀏覽器類(lèi)型和版本兼容問(wèn)題：假如有個(gè)很重要的菜單是需要IE5.5支持的，但是用戶萬(wàn)一使用的是IE4.0版本，那么這個(gè)菜單就再也打不開(kāi)，結(jié)果可想而知；6.分辨率：界面設(shè)計(jì)師的屏幕也許是17寸的，分辨率甚至做到1280960都是可以接受的，但是用戶的如果用的14寸顯示器，分辨率只能達(dá)到640480，界面布局看起來(lái)會(huì)很可笑；7.字體大?。豪脴邮奖砭_控制頁(yè)面元素，特別是字體是很重要的。有不少用戶喜歡更改瀏覽器默認(rèn)的字體顯示大小

7、，當(dāng)設(shè)計(jì)師看到用戶將字體顯示調(diào)整成最大而將表格撐得亂七八糟的時(shí)候，或許會(huì)痛心疾首的；8.考慮特殊情況：用戶或許在瀏覽器設(shè)置了禁止顯示圖片或禁止JS腳本等，有必要為圖片設(shè)置好尺寸以免影響其他元素的顯示，并有其他的方式代替JS需要顯示的效果和信息。9. 編寫(xiě)幫助：無(wú)論多么出色的界面設(shè)計(jì)對(duì)用戶來(lái)說(shuō)都是陌生的，那么編寫(xiě)站點(diǎn)幫助或軟件幫助是個(gè)非常有效的辦法，把你的設(shè)計(jì)意圖和使用介紹明明白白地告訴用戶，在用戶遇到困難的時(shí)候能夠得到最快的幫助，不但可以降低用戶的不滿程度，同時(shí)可以幫助用戶更加系統(tǒng)深入地學(xué)習(xí)和掌握。二：交互設(shè)計(jì)建立溝通的橋梁作為交互設(shè)計(jì)人員應(yīng)該讀讀Alan Cooper的軟件創(chuàng)新之路，被譽(yù)為“

8、VB之父”地Alan Cooper明確地提出了將程序開(kāi)發(fā)劃分為交互設(shè)計(jì)和編碼設(shè)計(jì)兩大部分，筆者非常贊同?！败浖絹?lái)越難用，越來(lái)越難學(xué)?！蔽覀儾恢挂淮蔚芈?tīng)到用戶如此地抱怨，也許程序員認(rèn)為機(jī)器就是如此理解程序的，隨著系統(tǒng)的日益復(fù)雜和功能的不斷強(qiáng)大，軟件原來(lái)越難用，門(mén)檻越來(lái)越高是很正常的，但是別忘記用戶才是系統(tǒng)的所有者和使用者，期望用戶成為計(jì)算機(jī)專家的要求顯然是難以接受的。在國(guó)內(nèi)無(wú)論是從事商務(wù)的技術(shù)人員還是技術(shù)型的商務(wù)人員都極其缺乏，交互設(shè)計(jì)師就理所當(dāng)然地應(yīng)該成為彼此溝通的橋梁。程序員和用戶的差別是很明顯的，因此通過(guò)交互設(shè)計(jì)建立良好的溝通是非常需要的。交互設(shè)計(jì)師的側(cè)重點(diǎn)并不在程序的編碼實(shí)現(xiàn)，而注重于

9、用戶如何最好地與系統(tǒng)交互*作，在設(shè)計(jì)中重點(diǎn)需要考慮的是：1.系統(tǒng)易用性：并非每個(gè)用戶都是計(jì)算機(jī)的熟練用戶，面對(duì)隱藏的層和特殊設(shè)計(jì)的菜單可能會(huì)抓瞎，用戶不見(jiàn)得能明白雙擊左鍵能自動(dòng)滾屏或者怎樣能讓自動(dòng)滾屏停下來(lái)、直接看最下面的結(jié)果？交互設(shè)計(jì)師特別需要重視的就是系統(tǒng)的易用性。有條件的話，可以讓不同的陌生用戶從首頁(yè)開(kāi)始*作，不給予任何提示和幫助，觀察用戶的上手和熟練程度，記錄并查找所有的陷阱和缺陷，加以改進(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)

10、行，也不一定會(huì)按照系統(tǒng)的提示要求去做，而程序員在設(shè)計(jì)的過(guò)程中是按照既定的邏輯進(jìn)行開(kāi)發(fā)的，測(cè)試中也難免以自己的習(xí)慣*作，這時(shí)就可能出現(xiàn)盲點(diǎn)，即系統(tǒng)存在未被測(cè)試到的狀態(tài)環(huán)境。編寫(xiě)測(cè)試軟件或利用其他測(cè)試工具可以大大提高測(cè)試的可靠性。例如一份表單正常提交以后，假如用戶利用歷史記錄后退，回到提交前的狀態(tài)，這時(shí)候修改了提交內(nèi)容，又再一次提交，那么結(jié)果是什么呢？再比如，假如設(shè)計(jì)的彈出窗口的尺寸是700500，且不可改變大小，隱藏滾動(dòng)條，而用戶萬(wàn)一使用640480的分辨率，那么彈出的窗口中，用戶如何能點(diǎn)擊到最下面的按鈕？4.出錯(cuò)及異常提示：凡是軟件都是有BUG的，因此對(duì)各種出錯(cuò)或異常狀態(tài)給予用戶一個(gè)友好的提示

11、和幫助，并提示用戶大概是由于什么原因，那么用戶會(huì)愉快的多。筆者遇到過(guò)一個(gè)用戶注冊(cè)系統(tǒng)，用戶注冊(cè)后希望修改密碼，有的能做成功，而有些人怎么也改不了，檢查了很長(zhǎng)時(shí)間才發(fā)現(xiàn)由于密碼設(shè)置的是不少于三位不大于八位，許多用戶密碼超過(guò)了八位，因此無(wú)法修改成功，但是由于沒(méi)有提示出錯(cuò)原因，所以用戶就不斷拼命地提交，最后只好憤怒地去投訴。再例如發(fā)布信息的時(shí)候，可能會(huì)因?yàn)樘顚?xiě)時(shí)間過(guò)長(zhǎng)，提交時(shí)被系統(tǒng)拒絕數(shù)據(jù)丟失，那么用戶辛辛苦苦撰寫(xiě)的內(nèi)容永遠(yuǎn)消失了，還有什么比這個(gè)更令用戶沮喪的嗎？在填寫(xiě)的輸入部分給用戶一個(gè)時(shí)間提示，或允許后退找回剛才的內(nèi)容，至少可以讓用戶容易接受一些。5.利用用戶環(huán)境測(cè)試?yán)糜脩舻?作環(huán)境進(jìn)行測(cè)試，

12、用戶的服務(wù)器、網(wǎng)絡(luò)線路和客戶機(jī)也許跟開(kāi)發(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)槲募^(guò)大，遠(yuǎn)程訪問(wèn)時(shí)處理時(shí)間過(guò)長(zhǎng)而響應(yīng)失敗。Web的交互設(shè)計(jì)師需要掌握的技能主要是Javas cript、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)單的例子，在鏈接列表過(guò)多出現(xiàn)翻頁(yè)的時(shí)候，程序員很自然地會(huì)將上一頁(yè)、下

13、一頁(yè)的翻頁(yè)按鈕放在了最底下，但是列表很長(zhǎng)的時(shí)候，用戶每次翻頁(yè)的時(shí)候都需要把滾動(dòng)條拉到最下面才可以點(diǎn)擊到翻頁(yè)按鈕，用戶可能就會(huì)抱怨，明明知道在某一頁(yè)，卻每次要點(diǎn)擊后拉滾動(dòng)條尋找翻頁(yè)按鈕，而如果將翻頁(yè)按鈕在列表的上面也放一條，并且設(shè)置直接跳轉(zhuǎn)到某頁(yè)的按鈕，則大大減輕了用戶的工作量，類(lèi)似的例子在我們的設(shè)計(jì)中屢見(jiàn)不鮮。三：程序開(kāi)發(fā)是系統(tǒng)的基石程序員進(jìn)行編碼，構(gòu)成了系統(tǒng)的基礎(chǔ)。在進(jìn)行系統(tǒng)分析和軟件建模以后，程序開(kāi)發(fā)便進(jìn)入實(shí)質(zhì)性的過(guò)程。但是在程序員動(dòng)手之前不單需要和系統(tǒng)分析員打交道，還要和界面工程師，交互設(shè)計(jì)師，業(yè)務(wù)流程分析員以及客戶交流，除了理解程序邏輯以外，同時(shí)需要理解界面設(shè)計(jì)和交互設(shè)計(jì)的要求，使得程

14、序開(kāi)發(fā)成功的可能性大大提高，達(dá)到事半功倍的效果。隨著網(wǎng)絡(luò)開(kāi)發(fā)技術(shù)的日益發(fā)展和用戶需求的不斷增長(zhǎng)，系統(tǒng)開(kāi)發(fā)中的編碼工作日益繁重，不僅僅需要考慮性能和功能的實(shí)現(xiàn)，而且需要考慮今后的維護(hù)和擴(kuò)展，需要考慮到系統(tǒng)的集成和穩(wěn)定，許多稍微復(fù)雜一些的系統(tǒng)開(kāi)發(fā)便不再是一個(gè)人能獨(dú)立完成的，因此程序開(kāi)發(fā)需要遵照嚴(yán)格規(guī)范的開(kāi)發(fā)過(guò)程。1.文檔規(guī)范：軟件即文檔。良好的文檔習(xí)慣是系統(tǒng)開(kāi)發(fā)極其重要的，文檔是程序的一部分，程序員花一定時(shí)間進(jìn)行文檔編寫(xiě)是份內(nèi)的工作。具備完整的文檔記錄，對(duì)于系統(tǒng)今后的二次開(kāi)發(fā)、查錯(cuò)、升級(jí)具有重大的作用?？梢哉f(shuō)即使代碼全部扔掉，只要文檔完整，很快就可以再造一個(gè)系統(tǒng)出來(lái)，而只保留了代碼，缺乏文檔的時(shí)候

15、，就像被抽了脊梁的標(biāo)本，再難站起來(lái)恢復(fù)原樣。2.編碼規(guī)范：編碼規(guī)范包含了程序排版、注釋、命名、可讀性、變量、程序效率、質(zhì)量保證、代碼編譯、代碼測(cè)試和版本控制等等注意事項(xiàng)。程序員最常見(jiàn)的問(wèn)題之一：“別人寫(xiě)的代碼看不懂，與其改寫(xiě)不如重寫(xiě)”?；旧隙际菦](méi)有按照編碼規(guī)范開(kāi)發(fā)的緣故。所以我們經(jīng)常聽(tīng)說(shuō)某個(gè)程序員離職以后，他所寫(xiě)的那些模塊就沒(méi)法維護(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í)說(shuō)：“微軟質(zhì)

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