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

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

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

3、面設計必須挖掘的是用戶習慣和觀念的共性，大眾化產(chǎn)品（例如郵件系統(tǒng)、BBS、門戶網(wǎng)站等）、商業(yè)應用產(chǎn)品（例如交易系統(tǒng)、電子辦公系統(tǒng)）或專業(yè)應用產(chǎn)品（例如財務系統(tǒng)、殺毒系統(tǒng)）等等，需要考慮的是所有人或某一類的人的共同習慣和審美觀念，而不是刻意地出奇招、不斷地考驗用戶的智商和耐心。項目開發(fā)則相反，面對明確的具體用戶考慮更多的是個性化設計，也許有些是非常規(guī)的要求，但是用戶已經(jīng)具有特殊的偏好和習慣時，應盡可能滿足用戶的需求進行設計。在筆者參與某個行業(yè)的辦公系統(tǒng)設計過程中，用戶就提出了非常特別的要求，所有的界面不能出現(xiàn)外國人和外國場景的形象， 每一頁都需要變換顏色， 另外站點標題要大得出乎尋常，失去比例，

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

5、是不是拿他在開涮！*界面元素對象化：在程序設計中需要注重模塊化， 而界面設計中對象化同樣非常重要。將界面元素對象化，比如底部版權信息、導航條等，圖片、JS也盡可能復用，比如站點標志、搜索按鈕、滾動信息的JS文件等等；*建立標準的文檔管理和設計規(guī)范：界面設計涉及的要素比較多，文件類型復雜，而界面文件往往還需要另外通過程序進行編譯，這就要求了界面設計人員必須建立規(guī)的設計規(guī)范和標準的文檔管理方法：*制定文件命名標準*設定文件統(tǒng)一路徑*保存原始創(chuàng)作文件（例如 PSD、Fla源文件）*最終完成文件（經(jīng)過用戶認可的文件）*單獨管理摸版文件（經(jīng)過編譯或嵌入程序的文件）*考慮用戶偏好習慣和方便性：我們經(jīng)?？梢?/p>

6、聽到界面設計師說：“怎么在我機器上看得好好的，怎么在你那里就變樣了？ ”其實道理很簡單，用戶的 *作環(huán)境和習慣與設計環(huán)境是有差別的，界面設計同程序一 樣需要進行測試，主要測試的對象為：*瀏覽器類型和版本兼容問題：假如有個很重要的菜單是需要IE5.5支持的，但是用戶萬一使用的是IE4.0版本，那么這個菜單就再也打不開，結果可想而知；*分辨率：界面設計師的屏幕也許是 17寸的，分辨率甚至做到1280 X960都是可以接受的， 但是用戶的如果用的14寸顯示器，分辨率只能達到640 X480 ,界面布局看起來會很可笑；*字體大小：利用樣式表精確控制頁面元素，特別是字體是很重要的。有不少用戶喜歡更改瀏覽

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

8、軟件創(chuàng)新之路，被譽為"VB之父”地 Alan Cooper明確地提出了將程序開發(fā)劃分為交互設計和編碼設計兩大部分，筆者非常贊 同?！败浖絹碓诫y用，越來越難學。”我們不止一次地聽到用戶如此地抱怨，也許程序員 認為機器就是如此理解程序的，隨著系統(tǒng)的日益復雜和功能的不斷強大，軟件原來越難用， 門檻越來越高是很正常的，但是別忘記用戶才是系統(tǒng)的所有者和使用者，期望用戶成為計算機專家的要求顯然是難以接受的。在國內(nèi)無論是從事商務的技術人員還是技術型的商務人員都極其缺乏，交互設計師就理所當然地應該成為彼此溝通的橋梁。程序員和用戶的差別是很明顯的，因此通過交互設計建立良好的溝通是非常需要的。（一）交

9、互設計師的側重點并不在程序的編碼實現(xiàn)，而注重于用戶如何最好地與系統(tǒng)交互*作，在設計中重點需要考慮的是：*系統(tǒng)易用性：并非每個用戶都是計算機的熟練用戶，面對隱藏的層和特殊設計的菜單可能會抓瞎，用戶不見得能明白雙擊左鍵能自動滾屏或者怎樣能讓自動滾屏停下來、直接看最下面的結果？交互設計師特別需要重視的就是系統(tǒng)的易用性。有條件的話，可以讓不同的陌生用戶從首頁開始*作，不給予任何提示和幫助，觀察用戶的上手和熟練程度，記錄并查找所有的陷阱和 缺陷，加以改進。*流程簡便：“簡單就是美”，在系統(tǒng)交互設計方面更是如此，如何用最少的*作，最明顯的提示和幫助，完成一項流程的*作是需要花大力氣進行優(yōu)化的。*盲點測試:

10、用戶的*作并不是嚴格的按照系統(tǒng)的提示順序進行，也不一定會按照系統(tǒng)的提示要求去做，而程序員在設計的過程中是按照既定的邏輯進行開發(fā)的，測試中也難免以自己的習慣作，這時就可能出現(xiàn)盲點，即系統(tǒng)存在未被測試到的狀態(tài)環(huán)境。編寫測試軟件或利用其他測試工具可以大大提高測試的可靠性。例如一份表單正常提交以后，假如用戶利用歷史記錄后退,回到提交前的狀態(tài)， 這時候修改了提交內(nèi)容，又再一次提交，那么結果是什么呢？再比如,假如設計的彈出窗口的尺寸是700 X500 ,且不可改變大小，隱藏滾動條，而用戶萬一使用640 X480的分辨率，那么彈出的窗口中，用戶如何能點擊到最下面的按鈕？*出錯及異常提示：凡是軟件都是有 BU

11、G的，因此對各種出錯或異常狀態(tài)給予用戶一個友好的提示和幫助,并提示用戶大概是由于什么原因，那么用戶會愉快的多。筆者遇到過一個用戶注冊系統(tǒng)，用戶注冊后希望修改密碼，有的能做成功，而有些人怎么也改不了，檢查了很長時間才發(fā)現(xiàn)由于密碼設置的是不少于三位不大于八位，許多用戶密碼超過了八位，因此無法修改成功， 但是由于沒有提示出錯原因，所以用戶就不斷拼命地提交，最后只好憤怒地去投訴。再例如發(fā)布信息的時候，可能會因為填寫時間過長，提交時被系統(tǒng)拒絕數(shù)據(jù)丟失，那么用戶辛辛苦苦撰寫的內(nèi)容永遠消失了，還有什么比這個更令用戶沮喪的嗎？在填寫的輸入部分給用戶一個時間提示，或允許后退找回剛才的內(nèi)容，至少可以讓用戶容易接受

12、一些。*利用用戶環(huán)境測試利用用戶的*作環(huán)境進行測試，用戶的服務器、網(wǎng)絡線路和客戶機也許跟開發(fā)環(huán)境差別巨大，用戶的機器配置、網(wǎng)絡環(huán)境對系統(tǒng)的要求是不一樣的。比如設計客戶端的APPLET時也許會因為客戶機的內(nèi)存不足而崩潰，也可能因為文件過大， 遠程訪問時處理時間過長而響應失敗，。（二） Web的交互設計師需要掌握的技能主要是Javas cript、VBs cript、Dhtml、Flash等，還需要了解心理學、人因工程學、系統(tǒng)工程等方面的經(jīng)驗和知識，認真把握每個交互動作的合理性和可行性，這個交互也許是個鏈接，也可能是個表單、提示窗口或者是滾動條的 拉動距離，檢查是否最優(yōu)化和最合理的方式。舉個很簡單

13、的例子， 在鏈接列表過多出現(xiàn)翻頁的時候，程序員很自然地會將上一頁、下一頁的翻頁按鈕放在了最底下，但是列表很長的時候， 用戶每次翻頁的時候都需要把滾動條拉到最下面才可以點擊到翻頁按鈕，用戶可能就會抱怨，明明知道在某一頁，卻每次要點擊后拉滾動條尋找翻頁按鈕，而如果將翻頁按鈕在列表的上面也放一條，并且設置直接跳轉到某頁的按鈕，則大大減輕了用戶的工作量，類似的例子在我們的設計中屢見不鮮。三：程序開發(fā)是系統(tǒng)的基石程序員進行編碼，構成了系統(tǒng)的基礎。 在進行系統(tǒng)分析和軟件建模以后， 程序開發(fā)便進 入實質性的過程。但是在程序員動手之前不單需要和系統(tǒng)分析員打交道，還要和界面工程師，交互設計師，業(yè)務流程分析員以及

14、客戶交流， 除了理解程序邏輯以外， 同時需要理解界面設 計和交互設計的要求，使得程序開發(fā)成功的可能性大大提高，達到事半功倍的效果。隨著網(wǎng)絡開發(fā)技術的日益發(fā)展和用戶需求的不斷增長，系統(tǒng)開發(fā)中的編碼工作日益繁重，不僅僅需要考慮性能和功能的實現(xiàn)， 而且需要考慮今后的維護和擴展， 需要考慮到系統(tǒng)的集 成和穩(wěn)定，許多稍微復雜一些的系統(tǒng)開發(fā)便不再是一個人能獨立完成的，因此程序開發(fā)需要遵照嚴格規(guī)范的開發(fā)過程。*文檔規(guī)范：軟件即文檔。良好的文檔習慣是系統(tǒng)開發(fā)極其重要的，文檔是程序的一部分， 程序員花一定時間進行文檔編寫是份內(nèi)的工作。具備完整的文檔記錄，對于系統(tǒng)今后的二次開發(fā)、查錯、升級具有重大的作用?？梢哉f即

15、使代碼全部扔掉，只要文檔完整，很快就可以再造一個系統(tǒng)出來，而只保留了代碼，缺乏文檔的時候，就像被抽了脊梁的標本，再難站起來恢復原樣。*編碼規(guī)范：編碼規(guī)范包含了程序排版、 注釋、命名、可讀性、變量、程序效率、質量保證、 代碼編譯、代碼測試和版本控制等等注意事項。程序員最常見的問題之一：“別人寫的代碼看不懂，與其改寫不如重寫”。基本上都是沒有按照編碼規(guī)范開發(fā)的緣故。所以我們經(jīng)常聽說某個程序員離職以后，他所寫的那些模塊就沒法維護和管理了。*代碼復用：代碼復用是程序員的夢想，也是系統(tǒng)成熟度的重要標志，關于代碼復用方法的討論不在本文之列，但是做為代碼復用是程序員走向成熟和提升的必經(jīng)之路。*測試測試再測試

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