第一章：UI淺論

問題：什么是UI，什么又是UI設(shè)計師？

在我的職業(yè)生涯中，聽到的最多的字眼就是“美化一下”?？梢哉f，在2004年以前，是很少有人聽過UI這個詞的。那么，什么是UI呢？可能會有人說“User-interface, 用戶界面”，哦，原來是界面——畫面——用戶能看到的東西。確實如此么？不，UI除了用戶界面，還有更深層次的含義，那就是“人機接口”，界面是用戶和計算機系統(tǒng)交互的橋梁和紐帶，不止我們看到的是界面，鼠標(biāo)、鍵盤、Mic、顯示器，甚至計算機的Power開關(guān)，界面無所不在，沒有了界面，你不止是無法去看，而是無法去用。那么，UI的深層次含義是什么？對，UI的深層次含義就是“交互”，是“使用”，而不是“看”。這個觀念很重要，同時也帶出了“UI設(shè)計師”這一職位的真正含義：UI設(shè)計師絕不是美工（或者說絕不是僅僅做“美化”工作而已），UI設(shè)計師是一個技術(shù)崗位而非藝術(shù)崗位，如果考察一名UI設(shè)計師的能力素質(zhì)模型，那么他應(yīng)該同時具備4個維度的能力：

1、溝通和文檔撰寫能力：如果說UI是人與機器交互的橋梁和紐帶，那么UI設(shè)計師就是軟件設(shè)計開發(fā)人員和最終用戶時間交互的橋梁和紐帶，如果UI設(shè)計師不能具備很好的溝通和理解能力，不能撰寫出優(yōu)秀的指導(dǎo)性原則和規(guī)范，那么，他將無法體現(xiàn)出自己對于開發(fā)人員和客戶的雙重價值，也無法完成他的本職工作。

2、過硬的技術(shù)能力：你可以不會寫Java，但你絕對不可以不清楚Java是什么，他能夠?qū)崿F(xiàn)什么。即使你不能寫代碼，但你起碼要懂得如何去“實現(xiàn)”。舉個例子，你要做一個Grid控件，首先，你應(yīng)該清楚，到底有哪幾種數(shù)據(jù)格式，以及其存儲方式：既可以通過HTML的Mark來獲取數(shù)據(jù)，亦可以通過JSON對象或Array，又或者是XML甚至于字符串。其次，你要知道在Server端實現(xiàn)和在Client端實現(xiàn)到底哪個更適合當(dāng)前的環(huán)境。這些都要依靠過硬對技術(shù)和豐富的經(jīng)驗，不懂技術(shù)的UI設(shè)計師，既做不出合理的設(shè)計，也不可能和開發(fā)人員做到有效的溝通。簡言之，UI設(shè)計師起碼要精通主流的表現(xiàn)層開發(fā)技術(shù)（如果是做Web表現(xiàn)層，一般需要精通HTML、CSS、Javascript、XML技術(shù)，甚至JSP、Java也要達到工作層），對于市面主流的設(shè)計模式，技術(shù)路線以及開源框架都要有足夠的了解?？梢哉f，UI設(shè)計師在技術(shù)素質(zhì)能力方面，要盡可能的朝著“表現(xiàn)層架構(gòu)師”的方向去努力。

3、圖形設(shè)計能力和原型開發(fā)：UI設(shè)計師一生中從事的最多的工作應(yīng)該就是圖形和原型設(shè)計，那么，首先說說什么是原型設(shè)計。原型法是迭代式開發(fā)中設(shè)計階段常用的手段，原型設(shè)計應(yīng)該貫穿需求、概要設(shè)計和詳細設(shè)計這三個階段。開發(fā)原型的目的是，把設(shè)計轉(zhuǎn)為用戶可以看懂的“界面語言”，同時也對開發(fā)人員起到一定的指導(dǎo)作用（甚至可以作為開發(fā)的一部分）。用戶界面原型更顯示的價值體現(xiàn)就是，它可以幫助軟件設(shè)計人員提早發(fā)現(xiàn)設(shè)計各個階段的缺陷，在開發(fā)前解決這些潛在的問題，大幅降低軟件開發(fā)的風(fēng)險和成本。這與傳統(tǒng)的瀑布式開發(fā)有了本質(zhì)的區(qū)別，目前國內(nèi)大多數(shù)公司仍然采用的是瀑布式開發(fā)方式，并且將UI設(shè)計放在開發(fā)階段的后期來進行。這不僅使UI設(shè)計師無法充分發(fā)揮自己所長，只能做做“美化工作”亡羊補牢，更使得開發(fā)出的產(chǎn)品往往存在致命的設(shè)計缺陷而無法滿足客戶需求。所以，各公司中的“美工”是軟件開發(fā)方法的落后和不完善早就的，而非“美工”或UI設(shè)計師這個職業(yè)本身。我們再來說一下圖形設(shè)計能力，其實，UI設(shè)計師只是個泛稱，在UI設(shè)計行業(yè)內(nèi)部，還大致分為以下幾種角色：可用性和交互設(shè)計師、視覺企劃、用戶體驗研究人員、圖形用戶界面設(shè)計師等。大家通常理解的UI設(shè)計師，其實是GUI設(shè)計師（例如國內(nèi)的Rokey，他就是一名非常優(yōu)秀的GUI設(shè)計師，目前供職于Microsoft），GUI設(shè)計師的主要工作就是視覺定位以及創(chuàng)作。稍后的章節(jié)會詳細介紹GUI設(shè)計師的職責(zé)以及日常工作。如果UI設(shè)計師不具備過硬的圖形創(chuàng)作能力，那么，他根本無法表達他心目中的美，也就無從談起“交流”了。圖形設(shè)計能力，是每一名UI設(shè)計師最初具備的，最基礎(chǔ)的能力。也是最能夠衡量一名UI設(shè)計師能力水平的部分。

4、人因?qū)W理論和認知心理學(xué)：這個概念雖然有些大，但卻是每一名UI設(shè)計師在事業(yè)穩(wěn)固后畢生都要努力去探索的領(lǐng)域、可以說，設(shè)計的根本就是“人”，做人本的界面，自然需要了解人，了解人的行為。例如，你不可能設(shè)計這樣一個界面，在同一時間同一個界面上的不同位置顯示兩條重要的提示信息——因為，人，在同一時間的關(guān)注點只能由一個，這是生理決定的，而不是某個人的主觀臆斷。再舉個例子，為什么Windows每次一次版本升級或多或少都會找到以前的影子，你可能會說，這是Microsoft的設(shè)計風(fēng)格。不，那不是風(fēng)格，而是一種習(xí)慣，以前是Microsoft的習(xí)慣，現(xiàn)在，你用了Windows，那么，你也有了這種習(xí)慣。Apple和Microsoft的操作系統(tǒng)孰優(yōu)孰劣？答案是，隨你喜歡。是啊，多么簡單的一個道理——喜歡，喜歡是一種習(xí)慣，你又如何能篤定你認為的“正確”的設(shè)計恰好是人們所喜歡的呢？這里可以稍帶提一下Extjs，Ext的風(fēng)格，簡言之，就是桌面應(yīng)用的傳統(tǒng)交互風(fēng)格（WMIP），而Web的風(fēng)格是什么？如果要我來說，我更傾向于Web是一本翻開的雜志，一片展現(xiàn)設(shè)計師才華的熱土，為什么這樣說呢？因為Web的不確定和開放性。以我的經(jīng)驗而言，WebUI設(shè)計，是所有軟件UI設(shè)計領(lǐng)域中最困難的，也是限制最多的（往往這些限制還存在不確定性），一名優(yōu)秀的WebUI設(shè)計師，即使轉(zhuǎn)而做桌面程序UI設(shè)計或移動設(shè)備界面設(shè)計，也是相對比較容易成功的。因此，作為WebUI設(shè)計師，排斥桌面UI風(fēng)格是可以理解的，正是源自于他的習(xí)慣，他的“喜歡”。后面的章節(jié)會詳細的闡述有關(guān)于人因?qū)W和人本界面相關(guān)的理論，在此就不贅述了。

那么，至此，大家應(yīng)該大概了解了UI和UI設(shè)計師這兩個名字的內(nèi)在含義。關(guān)于“美工”的問題，也應(yīng)該有了自己的結(jié)論，我就不再做解釋了。再說一個題外話：UI設(shè)計師在我目前供職的公司的職位體系中是比較高的技術(shù)職位，相當(dāng)于高級軟件工程師，需要有3年以上行業(yè)經(jīng)驗方能勝任;而資深UI設(shè)計師是與軟件設(shè)計師平級的，他們共同的上層職位是架構(gòu)師。這跟某些公司所招收的“美工”是有很大區(qū)別的。

第二章：UI設(shè)計基礎(chǔ)——圖形設(shè)計

1、色彩設(shè)計：

美學(xué)相關(guān)的知識（色彩構(gòu)成、平面構(gòu)成等等）我就不再贅述了，相信從事此類行業(yè)的人員無人不知無人不曉了。這里簡要說說WebApp設(shè)計中，色彩以及構(gòu)圖的特別之處吧。

首先是色彩。從事過廣告和印刷業(yè)設(shè)計工作的人員應(yīng)該都接觸過一種東西，那就是標(biāo)準(zhǔn)色板。顏色是什么？你所看到的未必就是真的，反言之，真的你未必會看得到，呵呵，說的有些抽象了。還是舉個實際例子吧，#f0f0f0這個很淺的灰色，目前80%的客戶都已經(jīng)升級到LCD顯示器了，而大部分LCD顯示器是無法正確顯示這個的，即使顯示了，各款顯示器也會有很大的差異，為什么會這樣？源于LCD的面板類型，LCD面板大概分為以下幾種類型：NT、VA、IPS。VA和IPS面板的顯示能力都可與CRT媲美了，雖然價格比較高，但其超大的可視角度（178）和完全的色彩還原，實為設(shè)計師們拋棄CRT的一劑強心劑（當(dāng)然，大多數(shù)專業(yè)的圖形設(shè)計師，這輩子都無法舍棄鉆石瓏CRT，呵呵，不一樣就是不一樣）。而NT面板占當(dāng)前市場的絕大部分，原因就是它響應(yīng)速度快，造價低廉。22寸的LCD只賣2000元不到，不用看都知道其采用的一定是造價低廉的NT面板，NT面板由于其固有的技術(shù)限制，其顯示能力僅僅是16.2M色（目前的16.7M色NT面板應(yīng)該是采用震蕩模擬的方式實現(xiàn)的），顏色是設(shè)計師的命根子，缺顏色，就意味著你苦心打造的設(shè)計很可能到了客戶那里完全走了樣。我曾見過很多界面，選用的都是這些淺淺的灰色，看起來倒是很淡雅，但是，你真的考慮到了用戶實際工作環(huán)境么？假如他用的恰好是一款不怎么出彩的廉價LCD，那你的設(shè)計豈不是要讓人嗤之以鼻了？綜上所述，首先，設(shè)計師必須保證自己的設(shè)計有很好的易曲性——在各種復(fù)雜環(huán)境下都要保證“可用”且不出現(xiàn)嚴(yán)重的視覺干擾。你需要至少在CRT和NT面板的LCD上檢查自己設(shè)計，看看是否有因為缺色而導(dǎo)致的布局異常和視覺干擾，在這里，我不得不BS一下Microsoft的live mail，在缺色的NT面板下，完全走了樣，既看不出邊框，也沒有了底色，這絕對是失敗的視覺設(shè)計，相比之下，Yahoo!mail的設(shè)計就要好上百倍了（包括二者的Portal也同樣如此）。

除了使用環(huán)境的硬件差異，還有一點就是色彩設(shè)置的差異（甚至有時候是顯卡太差導(dǎo)致的），那種只支持增強16位色的PCI插口顯卡基本已經(jīng)絕種了，要知道，那可是奔騰MMX時代的經(jīng)典之作。目前最底端的顯卡，也支持至少24位真彩色了，而支持32位色的顯卡更是遍地都是。但是，仍然有人在不知情（“不會”使用電腦的軟件用戶真不占少數(shù)）的情況下使用了16位增強色的設(shè)置，帶來的后果呢，自然是難看的等高線和惡心的色彩搭配。

綜上所述，因為WebUI的受眾十分廣泛且不確定，而由于技術(shù)架構(gòu)的特點，我們不能也不想對最終用戶要求什么（如果要求人家裝這改那的，還不如做個Setup來得實際）。因此，充分保證你的設(shè)計的易曲性，是每一名WebUI設(shè)計師在作視覺設(shè)計時首先應(yīng)該把握好的一個尺度。桌面應(yīng)用由于其硬件環(huán)境的可控性，是可以超前和華麗的，但是，Web設(shè)計，尤其是基于Web的企業(yè)級應(yīng)用的用戶界面設(shè)計，就必須要讓自己隨時保持清醒的頭腦。看看Javaeye的界面，它很樸素但很美觀，我相信，沒有人會對他特別的喜歡或者特別的厭惡，如果搞一個投票，相信80%的人都會表示接受，而另外20%的人應(yīng)該會表示無所謂。這就是UI視覺設(shè)計中追求的80/20原則，我們不需要特別華麗的外觀，只要80%以上的人滿意。這里再提一下Ext，捫心自問，有多少人是被他的外觀吸引的呢？外觀的喜好會讓人產(chǎn)生強烈的先入為主的觀念，這也正是為什么大多數(shù)應(yīng)用軟件都喜歡在外觀上求突破做概念的原因了（好多軟件版本升級最大的改進便是外觀）。但是，行業(yè)軟件絕對不是以外觀的華麗來取勝的，或者說，當(dāng)前國內(nèi)市場上，行業(yè)軟件尚未達到那種只能在外觀上尋求突破的高度。因此，作為應(yīng)用軟件領(lǐng)域的UI設(shè)計師，你可以去做做概念，吸引一下人們的眼球，來獲取一席之地。但行業(yè)軟件的UI設(shè)計師絕對不應(yīng)該把自己主要的精力放在視覺設(shè)計上，這不僅會讓你迷失方向，也會讓你們的產(chǎn)品迷失方向。

2、構(gòu)圖和視覺風(fēng)格設(shè)計：

我們只討論以下三類常見的應(yīng)用，至于3D界面和虛擬現(xiàn)實暫不討論了，它們是：Web應(yīng)用、桌面應(yīng)用、移動設(shè)備。

首先我們來看一下桌面應(yīng)用，可以這樣說，操作系統(tǒng)是桌面用戶界面設(shè)計的領(lǐng)頭軍，換言之，UI設(shè)計師在進行桌面UI設(shè)計時，首先應(yīng)該考慮的就是操作系統(tǒng)環(huán)境。而往往，某個特定軟件環(huán)境下的桌面應(yīng)用，UI也是有諸多限制的，這個限制，就是系統(tǒng)固有的交互風(fēng)格設(shè)定。舉例來說，我們經(jīng)常會在看到某一軟件界面后這樣說“哇，還是Mac風(fēng)格的好看！”“這個是用.Net開發(fā)的吧”“Swing做的破東西太難看了，還賊慢”，為什么會出現(xiàn)這樣的情況呢？因為，大多數(shù)情況下，我們在某個操作系統(tǒng)環(huán)境下進行軟件的設(shè)計與開發(fā)，其組件和控件必然會不可避免的使用操作系統(tǒng)自身提供的UI API，也就是說，無論你做什么樣的軟件，都需要遵從相關(guān)操作系統(tǒng)用戶界面的開發(fā)規(guī)范。Windows有個Offcial Reference，在MSDN上。同樣的，Apple，Java乃至Nokia，他們都有相應(yīng)的長篇累牘的API文檔和開發(fā)規(guī)范。那么，這里又不得不提到了Ext，Ext的API文檔是什么？呵呵，它與以上這些操作系統(tǒng)的GUI規(guī)范無異，它的API文檔就是它的開發(fā)規(guī)范。所以，我曾經(jīng)這樣講“Ext再怎么折騰，也是Ext”，現(xiàn)在各位應(yīng)該真正了解我的意思了吧。Ext在我看來，已經(jīng)不是Web UI了，我更傾向于把它歸結(jié)為桌面UI的Windows系列內(nèi)。桌面UI有個最基本的衡量標(biāo)準(zhǔn)WIMP（window、icon、menu、pointer），很明顯的，Ext是桌面UI風(fēng)格。而它的交互方式和Windows如出一轍，因此，我把它定位為基于瀏覽器的、Windows風(fēng)格的桌面UI庫。

總結(jié)一下，桌面應(yīng)用的常見布局，就是：多為框架結(jié)構(gòu)，由Grid、Toolbar、Menu、Form、Icon等控件構(gòu)成。

再來看一下Web應(yīng)用，我曾不止一次的提到這樣一個觀點，那就是，Web是自由且開放的。正因為其開放性，才有了今天的Ext、Ajax以及Thin Client和Rich Client之爭。Web設(shè)計到底應(yīng)該是怎樣的？這個沒有定論，因為Web是大家的Web，存在即合理。Web設(shè)計，最應(yīng)該考慮的就是“設(shè)計的上下文”，在一個完全開放的平臺上進行設(shè)計，就如同在一張白紙上作畫。最大的限制不是技術(shù)，而是設(shè)計師本身。只有設(shè)計師能夠決定自己的設(shè)計究竟該如何去做，同樣，也只有他的能力會限制自己的設(shè)計。結(jié)合上下文關(guān)系，如果你開發(fā)的是Web mail程序，對于多年使用Outlook已經(jīng)形成根深蒂固的使用習(xí)慣的用戶來說，你要如何做這樣的界面設(shè)計？開發(fā)一個全新的無人觸及的新奇東東么？不，那背離了設(shè)計的人本本質(zhì)，所以，滿足用戶最簡單的辦法就是，在Web上設(shè)計開發(fā)一個與Outlook風(fēng)格和外觀類似的應(yīng)用，讓用戶完全沒有壓力，在熟悉地環(huán)境下高效的開展自己的工作。那么，如果你要開發(fā)的是一個新聞發(fā)布系統(tǒng)，自然就要符合用戶對于Web的既定認識和習(xí)慣，把應(yīng)用設(shè)計得如同報紙、雜志一般，并且提供良好的內(nèi)容分類和搜索，以期讓用戶很容易的找到自己想要的資源，在最短的時間內(nèi)獲取更多有價值的信息（RSS和Portal都是因此而產(chǎn)生的）。再比如，你要設(shè)計開發(fā)的是一款信息管理系統(tǒng)，那么，很可能高效方便的增刪改功能和強大的報表、查詢系統(tǒng)，才是UI設(shè)計首先需要考慮的（桌面風(fēng)格的UI很適合做此類應(yīng)用）。又或者，你要開發(fā)一個體現(xiàn)出業(yè)務(wù)流程性的龐大復(fù)雜的行業(yè)應(yīng)用，那么，體現(xiàn)出行業(yè)解決方案的高度概念性和軟件對于業(yè)務(wù)流程的規(guī)范和指導(dǎo)作用，這是在設(shè)計UI時主要需要考慮的。而所有這些，在Web上統(tǒng)統(tǒng)可以實現(xiàn)，這要歸功于Ajax，歸功于全世界的開發(fā)者和設(shè)計師的共同努力。

總結(jié)一下，Web界面的常用布局——如果說到傳統(tǒng)，那么，自然是平板式的文本流（Web在設(shè)計之初就是為了研究人員之間文檔的共享和查看）。但是，Web發(fā)展到今天，我真的不知道該如何去總結(jié)它的布局風(fēng)格了。只能說，常見的有：Banner-navi-content布局（多見于網(wǎng)站和多數(shù)Web應(yīng)用），左右框架式布局（常見于基于內(nèi)容和數(shù)據(jù)維護的Web應(yīng)用）、Portal布局（企業(yè)Portal或門戶）等等。

最后，說一下移動設(shè)備的用戶界面。典型的就是手機上的應(yīng)用軟件，顏色和尺寸以及圖形處理性能是其最主要的限制?；旧?，在各個平臺上開發(fā)應(yīng)用程序，都要遵從平臺的開發(fā)指南和規(guī)范，而風(fēng)格大致也都是與操作系統(tǒng)本身一致的，再此不作贅述了。其實，之所以單獨提一下移動設(shè)備，是因為某些行業(yè)軟件還需要考慮PDA和手機用戶的需要，這也成為我們在設(shè)計風(fēng)格定位和技術(shù)選型上的一個制約條件。

3、圖標(biāo)、CSS、結(jié)構(gòu)與表現(xiàn)分離：

圖標(biāo)按其創(chuàng)作風(fēng)格，大致可分為兩種：矢量圖標(biāo)和像素圖標(biāo)。在沒有Alpha通道的幾年前，圖標(biāo)幾乎都是像素風(fēng)格的，生硬而簡潔（例如windows2000的圖標(biāo)），但是十分耐看。近年來，隨著Alpha通道逐漸普及，圖標(biāo)開始變得越來越絢麗（主要歸功于Apple），越來越寫實，設(shè)計師們?yōu)榱藙?chuàng)造出更加絢麗的圖標(biāo)，逐漸改用矢量設(shè)計軟件來進行創(chuàng)作。WindowsXP風(fēng)格的圖標(biāo)就是矢量圖標(biāo)。繪制圖標(biāo)幾乎成了所有UI設(shè)計師的看家本事，也是衡量一名UI設(shè)計師在GUI設(shè)計方面能力水平的標(biāo)尺。方寸之地方顯英雄本色，呵呵。那么，圖標(biāo)除了好看以外，還有別的什么功能么？其實，圖標(biāo)在圖形用戶界面的主要作用是輔助識別，每個人在成長過程中，最先認識事物是通過對其輪廓的識別，而不是靠文字。因此，圖標(biāo)多會采用最為簡潔的方式表現(xiàn)出事物的功能和特點：比如，突起的東西表示它應(yīng)該是可以點擊的，小信封表示這是一封郵件，放大鏡表示這里是搜索。一直以來，圖標(biāo)都在盡可能的貼近實際，但是，并不是所有的Web上的事物都可以找到現(xiàn)實中的存在。學(xué)習(xí)能力是人類與生俱來的一種能力，初遇Web的人類開始不斷的學(xué)習(xí)和了解這個世界，他們知道了什么是鼠標(biāo)指針，什么叫光標(biāo)，什么是鏈接，什么又是滾動條。正是人類不斷的認知，促成了習(xí)慣，也就形成了如今的各類用戶界面風(fēng)格。最早的Web是沒有圖標(biāo)的，或者說，在Web上，圖標(biāo)的概念和桌面UI完全不同。WebUI中，圖標(biāo)的作用往往是輔助說明，而非“點擊”，這與桌面UI中圖標(biāo)的功能大相徑庭。因此，大家可以仔細看一下，大部分傳統(tǒng)的WebUI中，是絕對不會出現(xiàn)可以點擊的圖標(biāo)的（論壇的表情符號除外。。）。WebUI更習(xí)慣以文本的方式來展示信息，以帶有下劃線的文本來表示此處是鏈接可點擊。

綜上所述，WebUI中的圖標(biāo)和桌面應(yīng)用的圖標(biāo)有著固有的本質(zhì)區(qū)別，因此，照搬桌面UI的設(shè)計往往會將用戶引入錯誤的習(xí)慣當(dāng)中，使用戶想當(dāng)然的認為WebUI就應(yīng)該那樣去做，這對Web是不公平的，對WebUI設(shè)計更是極大的諷刺。要知道，Toolbar和Menu根本就不是WebUI的必需品——包括圖標(biāo)在內(nèi)。

再來看看CSS，CSS是什么？最早，它是出現(xiàn)在印刷業(yè)當(dāng)中的，后來才被引入Web，用來對文檔格式化。提到CSS，就不得不提到結(jié)構(gòu)與表現(xiàn)分離。說到這個，可能有人就會想到了，網(wǎng)站的裸奔節(jié)，呵呵。對于結(jié)構(gòu)與表現(xiàn)到底怎么個分離法，我相信各位都有自己的見解。我對此的理解是，Web不僅僅是CSS+HTML，還有各種服務(wù)器端技術(shù)呢。其實，與其讓HTML和CSS做到結(jié)構(gòu)與表現(xiàn)分離倒不如讓開發(fā)人員在編碼的時候，做到結(jié)構(gòu)與表現(xiàn)分離。我并不是結(jié)構(gòu)與表現(xiàn)分離這種思想的堅決擁護者，我會在必要的時候用Table去做布局，即使HTML代碼增多了，那又如何，我換來的是良好的兼容性，再也不用特別去關(guān)注各個瀏覽器在CSS解析和渲染上的微小差異，這么做值得。只要通過某種方式，讓開發(fā)人員只需要書寫簡單的Tag就可以開發(fā)頁面，誰還會去關(guān)注HTML和CSS的結(jié)構(gòu)與表現(xiàn)分離呢？當(dāng)然，tag的封裝不止是這么一個原因而已，稍后的章節(jié)我會詳細論述。

每一個UI設(shè)計師，都是從處理圖片開始職業(yè)生涯的，慢慢的，他們發(fā)現(xiàn)，為什么每一次自己的設(shè)計都會讓開發(fā)人員眉頭緊鎖說無法實現(xiàn)或十分困難呢？技術(shù)到底是怎樣的呢？后來，UI設(shè)計師們學(xué)會了HTML，哦~ 原來HTML是這樣地，他們的設(shè)計開始變得更加實際了，他們不僅能夠處理和設(shè)計圖片，同時也能夠為開發(fā)人員提供必要的HTML支持了。再后來，他們發(fā)現(xiàn)，為什么自己的設(shè)計加載速度總是那么的慢，而別人的設(shè)計加載起來這么快呢？后來，他們慢慢懂得了切圖，懂得了CSS。后來的后來，他們不僅懂得HTML和CSS，而且還能夠考慮到性能和兼容性，并開始注意編碼的藝術(shù)，知道了什么叫做設(shè)計模式，什么叫做抽象和封裝。至此，他們才真正的把自己提升到了WebUI設(shè)計師的高度。他們發(fā)現(xiàn)自己越來越懶，寧可通過CSS復(fù)雜的編碼來實現(xiàn)一個特效，也不愿去花時間繪制一個圖片（比如陰影）。他們寫的代碼越來越少，CSS越來越多，慢慢的，結(jié)構(gòu)與表現(xiàn)分離了，HTML變成了通篇的DIV和UL，CSS文件如天書一般洋洋灑灑數(shù)十kb。因此，結(jié)構(gòu)與表現(xiàn)分離是一個思想上的自然演變過程。我看到今天，有那么多的設(shè)計師以此為準(zhǔn)則、以此為規(guī)范，不禁感慨，WebUI不是那樣的，Table無罪。當(dāng)你因為無法用DIV+CSS實現(xiàn)某種布局轉(zhuǎn)而引入大量的JS或干脆換個設(shè)計的時候，這么做值得么？

總結(jié)一下，CSS無疑給了WebUI設(shè)計師更大的發(fā)展空間，它是WebUI設(shè)計師的一把利劍，當(dāng)然它同樣也是一把雙刃劍。過份依賴CSS只會讓你的設(shè)計越來越簡潔、越來越無趣，這就是CSS下的迷失。圖片不是罪，如果你不想自己的靈感一點點的枯竭，那么，重新拾起圖片吧，你會發(fā)現(xiàn)設(shè)計原來可以更美的（參見Vista相關(guān)網(wǎng)站，設(shè)計可以更美的）。這里再小小的提一下Ext，雖然它自帶主題的支持，但是，它真能夠做到讓設(shè)計師隨心所欲么？想隨心所欲又要付出多大的代價呢？

本章結(jié)論，WebUI的圖形設(shè)計，其自由度是由交互風(fēng)格和技術(shù)架構(gòu)雙重作用決定的。限制了交互風(fēng)格和技術(shù)架構(gòu)，就等于限制了圖形設(shè)計風(fēng)格，也就相當(dāng)于限制了UI設(shè)計師的發(fā)揮。因此，讓UI設(shè)計師來選擇和決定交互風(fēng)格和技術(shù)架構(gòu)是UI設(shè)計不可或缺的關(guān)鍵一步。只有真正從用戶業(yè)務(wù)的角度出發(fā)，合理的定位交互風(fēng)格和技術(shù)架構(gòu)，才有可能做出真正符合用戶習(xí)慣和需求的界面。設(shè)計師真正需要駕馭的不是技術(shù)而是設(shè)計本身。因此，在這里，我想說：永遠不要在技術(shù)面前迷失了方向。是設(shè)計去選擇技術(shù)，而不應(yīng)該讓技術(shù)來決定設(shè)計。

第三章： UI設(shè)計基礎(chǔ)——可用性和交互設(shè)計

Temp:

“您需要什么樣的界面？”大多數(shù)用戶對此的回答幾乎都是“大氣點兒”、“漂亮點兒”、“用著方便”，這時候你會怎么去做？這是你想要的答案么？這時候，“美工”往往都會收到這樣的任務(wù)——做幾套效果圖給用戶選一個，要做的細一點兒，跟最終實現(xiàn)的效果一樣。這應(yīng)該是國內(nèi)大部分軟件公司都會優(yōu)先采用的做法，那么，這真的就正確么？答案是否定的。首先，對于某種特定場合的應(yīng)用來說，并不是只有一套界面最合適，界面這東西，就不存在完美一說，尤其是受眾來自不同年齡層次和社會層次的情況下。而，往往客戶方代表只有少數(shù)幾個人，有決定權(quán)的更是僅有一人而已。他的決定，往往只代表他的主觀想法，作為UI設(shè)計師，做出多套圖形設(shè)計效果圖讓“他”來選擇，這本身就是非常不負責(zé)任的。我們常戲稱自己為搞“大眾藝術(shù)”的，原因就是，我們的設(shè)計要符合大多數(shù)人的喜好和習(xí)慣，而不是特定的某個人，來宣揚他的個性。那么，說了這么多，正確的做法應(yīng)該是什么呢？首先，UI設(shè)計師應(yīng)該運用自己的行業(yè)經(jīng)驗，為用戶確立一個最保守的交互風(fēng)格設(shè)計。那么，什么又是交互風(fēng)格設(shè)計呢？簡言之，桌面應(yīng)用和Web應(yīng)用就是兩種交互風(fēng)格，針對不同用戶和不同應(yīng)用，首先應(yīng)該為他確定的就是交互風(fēng)格，這往往可以通過簡單的圖形就足以概括。比如，在紙張或白板上描繪一個草圖，再創(chuàng)建若干典型用例，圖解給用戶，看看是否符合用戶的業(yè)務(wù)習(xí)慣和使用場景。這就是“概念設(shè)計階段”，你可以選用的道具有很多：Flash、PPT、白板、紙張、甚至與筆和墨水瓶，充分發(fā)揮你的想象力和溝通能力，我們要的就是最終溝通的結(jié)果，只有交互方式確立了，你才可以真正的開始設(shè)計（這時候你會發(fā)現(xiàn)，那種剛聽到需求就開始做效果的做法是多么的冒險）。