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

UI界面設(shè)計、交互設(shè)計及程序開發(fā)在網(wǎng)絡(luò)項目開發(fā)進程中，這個階段也叫做構(gòu)建階段,是工作量最大、最艱苦也是最難以控制的階段。無論一座大樓的設(shè)計藍圖多宏偉，若沒有管道工、泥瓦匠、水電工等各類工匠一磚一瓦地艱辛積累，密切協(xié)作，這座大樓始終是空中樓閣、空中樓閣。―:界面設(shè)計打開用戶之門對于以Web服務(wù)為模式的項目,無論是訪問用戶仍是系統(tǒng)管理員,主要工作都是通過閱讀器的界面交互完成。給系統(tǒng)設(shè)計合理友好的*作界面就像給人穿衣服一樣，合體舒適的搭配能給人線人一新的感覺，反之則令人敬而遠之，乃至失去進一步深切了解的興趣，這無疑不是開發(fā)人員所期望的結(jié)果。以網(wǎng)站為表現(xiàn)方式的系統(tǒng)界面設(shè)計所涉及的知識遠遠超過了美術(shù)的范圍,作為一個優(yōu)秀的Web界面設(shè)計師來講,需要掌握的不單單是電腦制圖的能力,還應(yīng)該具有心理學(xué)、廣告創(chuàng)意、美術(shù)工藝、排版藝術(shù)等多方面的綜合素質(zhì)，系統(tǒng)界面絕不是孤芳自賞令人難以理解的抽象畫，而應(yīng)該成為絕大多數(shù)用戶一路接受的最方便的日用品。關(guān)于Web美工創(chuàng)作的*作技能不是本文所關(guān)注的，咱們希望知道的是用戶最需要的是什么樣的界面？按照筆者的經(jīng)驗，在進行產(chǎn)品設(shè)計和項目開發(fā)的界面設(shè)計中是有所不同的。產(chǎn)品一般是指可大量分發(fā)銷售的成熟性的產(chǎn)品，具體用戶是不肯定的，而項目大多是針對具體客戶的需求進行開發(fā)，不具備二次銷售的條件，固然，在二者之間總還是能找到共同點的。產(chǎn)品設(shè)計由于面對的是未知的用戶，因此界面設(shè)計必需挖掘的是用戶習(xí)慣和觀念的共性,公共化產(chǎn)品（例如郵件系統(tǒng)、BBS、門戶網(wǎng)站等）、商業(yè)應(yīng)用產(chǎn)品（例如交易系統(tǒng)、電子辦公系統(tǒng)）或?qū)I(yè)應(yīng)用產(chǎn)品（例如財務(wù)系統(tǒng)、殺毒系統(tǒng)）等等,需要考慮的是所有人或某一類的人的共同習(xí)慣和審美觀念,而不是刻意地出奇招、不斷地考驗用戶的智商和耐心。 項目開發(fā)則相反，面對明確的具體用戶考慮更多的是個性化設(shè)計，或許有些是超級規(guī)的要求，可是用戶已經(jīng)具有特殊的偏好和習(xí)慣時，應(yīng)盡可能知足用戶的需求進行設(shè)計。在筆者參與某個行業(yè)的辦公系統(tǒng)設(shè)計進程中，用戶就提出了超級特別的要求，所有的界面不能出現(xiàn)外國人和外國場景的形象，每一頁都需要變換顏色，另外站點題目要大得出乎尋常，失去比例，這時美工只能遷就用戶的心理和習(xí)慣，可是這樣的設(shè)計用到產(chǎn)品設(shè)計上，大多人都會感到不舒暢。不論是產(chǎn)品設(shè)計還是項目開發(fā)，界面設(shè)計都應(yīng)該遵循以下共同的規(guī)則：*界面風(fēng)格需要一致：每一個新的系統(tǒng)對用戶來說都是一次新的學(xué)習(xí)過程，若是界面風(fēng)格常常轉(zhuǎn)變，不維持統(tǒng)一，無疑更增加了用戶的學(xué)習(xí)難度，也許會致利用戶的厭煩。比如:第一頁的導(dǎo)航條是圖片型的放在頁面頂部橫排的，而在第二頁導(dǎo)航條卻成了文字型居左豎排，用戶會為了捉摸不清設(shè)計師的用意而大光其火。再比如，有些設(shè)計師考慮到用戶方便，在頁面上放置了后退的按鈕，但是如果不注意維持一致的話，用戶也許會糊涂后退、回顧頁、BACK、上一頁這些按鈕究竟有什么區(qū)別?也許非常惱火你是不是拿他在開涮！*界面元素對象化：在程序設(shè)計中需要注重模塊化，而界面設(shè)計中對象化一樣非常重要。將界面元素對象化，比如底部版權(quán)信息、導(dǎo)航條等，圖片、JS也盡可能復(fù)用，比如站點標(biāo)志、搜索按鈕、轉(zhuǎn)動信息的JS文件等等；*成立標(biāo)準的文檔管理和設(shè)計規(guī)范:界面設(shè)計涉及的要素比較多，文件類型復(fù)雜，而界面文件往往還需要另外通過程序進行編譯，這就要求了界面設(shè)計人員必須成立規(guī)的設(shè)計規(guī)范和標(biāo)準的文檔管理方式：*制定文件命名標(biāo)準*設(shè)定文件統(tǒng)一路徑*保留原始創(chuàng)作文件（例如PSD、Fla源文件）*最終完成文件（通過用戶認可的文件）*單獨管理摸版文件（經(jīng)過編譯或嵌入程序的文件）*考慮用戶偏好習(xí)慣和方便性：我們經(jīng)?？梢月牭浇缑嬖O(shè)計師說："怎么在我機械上看得好好的，怎么在你那里就變樣了？”其實道理很簡單，用戶的*作環(huán)境和習(xí)慣與設(shè)計環(huán)境是有不同的，界面設(shè)計同程序一樣需要進行測試，主要測試的對象為：*瀏覽器類型和版本兼容問題：假設(shè)有個很重要的菜單是需要IE5.5支持的，但是用戶萬一使用的是IE4.0版本，那么這個菜單就再也打不開，結(jié)果可想而知；*分辨率界面設(shè)計師的屏幕也許是17寸的分辨率甚至做到1280x960都是可以接受的，但是用戶的如果用的14寸顯示器，分辨率只能達到640x480,界面布局看起來會很好笑；*字體大小:利用樣式表精準控制頁面元素,特別是字體是很重要的。有很多用戶喜歡更改瀏覽器默許的字體顯示大小當(dāng)設(shè)計師看到用戶將字體顯示調(diào)整成最大而將表格撐得亂七八糟的時候，或許會痛心疾首的；*考慮特殊情況：用戶或許在瀏覽器設(shè)置了禁止顯示圖片或禁止JS腳本等，有必要為圖片設(shè)置好尺寸以避免影響其他元素的顯示,并有其他的方式代替JS需要顯示的效果和信息。*編寫幫忙：無論何等超卓的界面設(shè)計對用戶來說都是陌生的，那么編寫站點幫助或軟件幫助是個非常有效的辦法，把你的設(shè)計意圖和使用介紹明明白白地告知用戶，在用戶碰到困難的時候能夠取得最快的幫助，不但可以降低用戶的不滿程度，同時可以幫助用戶加倍系統(tǒng)深入地學(xué)習(xí)和掌握。二：交互設(shè)計成立溝通的橋梁作為交互設(shè)計人員應(yīng)該讀讀AlanCooper的《軟件創(chuàng)新之路》，被譽為"VB之父"地AlanCooper明確地提出了將程序開發(fā)劃分為交互設(shè)計和編碼設(shè)計兩大部份，筆者超級贊同。"軟件愈來愈難用，愈來愈難學(xué)。”咱們不止一次地聽到用戶如此地抱怨，或許程序員以為機械就是如此理解程序的，隨著系統(tǒng)的日趨復(fù)雜和功能的不斷壯大，軟件原來越難用，門坎愈來愈高是很正常的，可是別忘記用戶才是系統(tǒng)的所有者和利用者，期望用戶成為計算機專家的要求顯然是難以接受的。在國內(nèi)無論是從事商務(wù)的技術(shù)人員仍是技術(shù)型的商務(wù)人員都極為缺乏，交互設(shè)計師就理所固然地應(yīng)該成為彼此溝通的橋梁。程序員和用戶的不同是很明顯的，因此通過交互設(shè)計建立良好的溝通是非常需要的。（一）交互設(shè)計師的偏重點并非在程序的編碼實現(xiàn)，而注重于用戶如何最好地與系統(tǒng)交互*作，在設(shè)計中重點需要考慮的是：*系統(tǒng)易用性：并非每一個用戶都是計算機的熟練用戶，面對隱藏的層和特殊設(shè)計的菜單可能會抓瞎，用戶不見得能明白雙擊左鍵能自動滾屏或如何能讓自動滾屏停下來、直接看最下面的結(jié)果？交互設(shè)計師特別需要重視的就是系統(tǒng)的易用性。有條件的話，可讓不同的陌生用戶從首頁開始*作，不給予任何提示和幫忙，觀察用戶的上手和熟練程度，記錄并查找所有的陷阱和缺點，加以改良。*流程簡便：“簡單就是美"，在系統(tǒng)交互設(shè)計方面更是如此，如何用最少的*作，最明顯的提示和幫助，完成一項流程的*作是需要花大力氣進行優(yōu)化的。*盲點測試：用戶的*作并不是嚴格的依照系統(tǒng)的提示順序進行,也不必然會依照系統(tǒng)的提示要求去做，而程序員在設(shè)計的進程中是依照既定的邏輯進行開發(fā)的，測試中也不免以自己的習(xí)慣*作，這時就可能出現(xiàn)盲點，即系統(tǒng)存在未被測試到的狀態(tài)環(huán)境。編寫測試軟件或利用其他測試工具可以大大提高測試的靠得住性。例如一份表單正常提交以后，假設(shè)用戶利用歷史記錄后退，回到提交前的狀態(tài)，這時修改了提交內(nèi)容，又再一次提交，那么結(jié)果是什么呢？再比如，假設(shè)設(shè)計的彈出窗口的尺寸是700x500,且不可改變大小,隱藏轉(zhuǎn)動條，而用戶萬一利用640x480的分辨率,那么彈出的窗口中，用戶如何能點擊到最下面的按鈕？*犯錯及異樣提示：凡是軟件都是有BUG的因此對各類出錯或異常狀態(tài)給予用戶一個友好的提示和幫助，并提示用戶可能是由于什么原因，那么用戶會愉快的多。筆者碰到過一個用戶注冊系統(tǒng)，用戶注冊后希望修改密碼,有的能做成功,而有些人怎么也改不了，檢查了很長時間才發(fā)現(xiàn)由于密碼設(shè)置的是很多于三位不大于八位，許多用戶密碼超過了八位,因此無法修改成功,可是由于沒有提示出錯原因，所以用戶就不斷拼命地提交，最后只好憤怒地去投訴。再例如發(fā)布信息的時候,可能會因為填寫時間太長,提交時被系統(tǒng)拒絕數(shù)據(jù)丟失,那么用戶辛辛苦苦撰寫的內(nèi)容永遠消失了，還有什么比這個更令用戶沮喪的嗎？在填寫的輸入部份給用戶一個時間提示，或允許后退找回適才的內(nèi)容，至少可以讓用戶容易接受一些。*利用用戶環(huán)境測試利用用戶的*作環(huán)境進行測試，用戶的服務(wù)器、網(wǎng)絡(luò)線路和客戶機或許跟開發(fā)環(huán)境不同龐大，用戶的機械配置、網(wǎng)絡(luò)環(huán)境對系統(tǒng)的要求是不一樣的。比如設(shè)計客戶端的APPLET時也許會因為客戶機的內(nèi)存不足而崩潰，也可能因為文件過大，遠程訪問時處置時間過長而響應(yīng)失敗，。（二）Web的交互設(shè)計師需要掌握的技術(shù)主如果Javascript、VBscript、Dhtml、Flash等，還需要了解心理學(xué)、人因工程學(xué)、系統(tǒng)工程等方面的經(jīng)驗和知識，認真把握每一個交互動作的合理性和可行性，這個交互或許是個鏈接，也可能是個表單、提示窗口或是轉(zhuǎn)動條的拉動距離，檢查是不是最優(yōu)化和最合理的方式。舉個很簡單的例子，在鏈接列表過量出現(xiàn)翻頁的時候，程序員很自然地會將上一頁、下一頁的翻頁按鈕放在了最底下，可是列表很長的時候，用戶每次翻頁的時候都需要把滾動條拉到最下面才可以點擊到翻頁按鈕，用戶可能就會抱怨，明明知道在某一頁，卻每次要點擊后拉滾動條尋覓翻頁按鈕，而若是將翻頁按鈕在列表的上面也放一條，而且設(shè)置直接跳轉(zhuǎn)到某頁的按鈕，則大大減輕了用戶的工作量，類似的例子在咱們的設(shè)計中不足為奇。三：程序開發(fā)是系統(tǒng)的基石程序員進行編碼，組成了系統(tǒng)的基礎(chǔ)。在進行系統(tǒng)分析和軟件建模以后，程序開發(fā)便進入實質(zhì)性的進程。但是在程序員動手之前不單需要和系統(tǒng)分析員打交道，還要和界面工程師，交互設(shè)計師，業(yè)務(wù)流程分析員和客戶交流，除理解程序邏輯之外，同時需要理解界面設(shè)計和交互設(shè)計的要求，使得程序開發(fā)成功的可能性大大提高，達到事半功倍的效果。隨著網(wǎng)絡(luò)開發(fā)技術(shù)的日趨發(fā)展和用戶需求的不斷增加，系統(tǒng)開發(fā)中的編碼工作日趨繁重，不單單需要考慮性能和功能的實現(xiàn)，而且需要考慮此后的保護和擴展，需要考慮到系統(tǒng)的集成和穩(wěn)定，許多略微復(fù)雜一些的系統(tǒng)開發(fā)便再也不是一個人能獨立完成的，因此程序開發(fā)需要遵循嚴格規(guī)范的開發(fā)過程。*文檔規(guī)范：軟件即文檔。 良好的文檔習(xí)慣是系統(tǒng)開發(fā)極為重要的，文檔是程序的一部份，程序員花一按時間進行文檔編寫是分內(nèi)的工作。具有完整的文檔記錄，對于系統(tǒng)今后的二次開發(fā)、查錯、升級具有重大的作用。可以說即便代碼全數(shù)扔掉，只要文檔完整，很快就可以夠再造一個系統(tǒng)出來，而只保留了代碼，缺乏文檔的時候，就像被抽了脊梁的標(biāo)本，再難站起來恢恢復(fù)樣。*編碼規(guī)范：編碼規(guī)范包括了程序排版、注釋、命名、可讀性、變量、程序效率、質(zhì)量保證、代碼編譯、代碼測試和版本控制等等注意事項。程序員最多見的問題之一：“他人寫的代碼看不懂，與其改寫不如重寫”。大體上都是沒有依照編碼規(guī)范開發(fā)的緣故。所以我們常常聽說某個程序員離職以后，他所寫的那些模塊就無法維護和管理了。*代碼復(fù)用：代碼復(fù)用是程序員的夢想，也是系統(tǒng)成熟度的重要標(biāo)志，關(guān)于代碼復(fù)用方式的討論不在本文之列，但是做為代碼復(fù)用是程序員走向成熟和提升的必經(jīng)之路。*測試測試再測試：筆者在軟件工程的討論會上，微軟的一名項目領(lǐng)導(dǎo)在介紹微軟如何保證產(chǎn)品質(zhì)量時說：“微軟質(zhì)量保證的秘密就是：測試測試再測試！”在IE4.0的開發(fā)小組中，200名開發(fā)程序員意外還有200多名測試工程師，而且測試工程師的水平乃至高于開發(fā)工程師。測試是系統(tǒng)質(zhì)量最直接有效的手腕。在國內(nèi)的開發(fā)環(huán)境達到這樣的投入和水平顯然是不太現(xiàn)實的但是盡可能提高測試環(huán)境和增強測試管理是程序員和測試工程師一路的方向。四：本階段的重點工作:在這個階段是整個項目組參與角色最多，也是協(xié)作最密切最難控制的進程，筆者以為做為項目領(lǐng)導(dǎo)特別需要關(guān)注以下問題：1：成立項目小組的溝通渠道：溝通是項目小組具有密切協(xié)作形成凝聚力的最重要的手腕,在項目開發(fā)過程隨著各個角色的工作進展，沖突和矛盾是必不可少的，無論是通過論壇、郵件、會議、口頭仍是私下溝通項目管理人員有責(zé)任和義務(wù)建立小組通暢及時的溝通渠道按照有經(jīng)驗的HR經(jīng)理分析:有效的溝通應(yīng)該是在問題發(fā)生的48小時之內(nèi)，不然解決的效率會