webapp設計注意事項

標籤：

色彩設計

　　美學相關的知識(色彩構成、平面構成等等)我就不再贅述了，相信從事此類行業的人員無人不知無人不曉了。這裡簡要說說WebApp設計中，色彩以及構圖的特別之處吧。

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

　　除了使用環境的硬體差異，還有一點就是色彩設定的差異(甚至有時候是顯卡太差導致的)，那種只支援增強16位色的PCI插口顯卡基本已經絕種了，要知道，那可是奔騰MMX**的經典之作。目前最底端的顯卡，也支援至少24位真彩色了，而支援32位色的顯卡更是遍地都是。但是，仍然有人在不知情(“不會”使用電腦的軟體使用者真不佔少數)的情況下使用了16位增強色的設定，帶來的後果呢，自然是難看的等高線和噁心的色彩搭配。

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

構圖和視覺風格設計

　　我們只討論以下三類常見的應用，至於3D介面和虛擬現實暫不討論了，它們是：Web應用、案頭應用、行動裝置。

　　首先我們來看一下案頭應用，可以這樣說，作業系統是案頭使用者介面設計的領頭軍，換言之，UI設計師在進行案頭UI設計時，首先應該考慮的就是作業系統環境。而往往，某個特定軟體環境下的案頭應用，UI也是有諸多限制的，這個限制，就是系統固有的互動風格設定。舉例來說，我們經常會在看到某一軟體介面後這樣說“哇，還是Mac風格的好看!”“這個是用.Net開發的吧”“Swing做的破東西太難看了，還賊慢”，為什麼會出現這樣的情況呢?因為，大多數情況下，我們在某個作業系統環境下進行軟體的設計與開發，其組件和控制項必然會不可避免的使用作業系統自身提供的UI API，也就是說，無論你做什麼樣的軟體，都需要遵從相關作業系統使用者介面的開發規範。Windows有個Offcial Reference，在MSDN上。同樣的，Apple，Java乃至Nokia，他們都有相應的長篇累牘的API文檔和開發規範。那麼，這裡又不得不提到了Ext，Ext的API文檔是什麼?呵呵，它與以上這些作業系統的GUI規範無異，它的API文檔就是它的開發規範。所以，我曾經這樣講“Ext再怎麼折騰，也是Ext”，現在各位應該真正瞭解我的意思了吧。Ext在我看來，已經不是Web UI了，我更傾向於把它歸結為案頭UI的Windows系列內。案頭UI有個最基本的衡量標準WIMP(window、icon、menu、pointer)，很明顯的，Ext是案頭UI風格。而它的互動方式和Windows如出一轍，因此，我把它定位為基於瀏覽器的、Windows風格的案頭UI庫。

　　17xuee給你總結一下，案頭應用的常見布局，就是：多為架構結構，由Grid、Toolbar、Menu、Form、Icon等控制項構成。

　　再來看一下Web應用，我曾不止一次的提到這樣一個觀點，那就是，Web是自由且開放的。正因為其開放性，才有了今天的Ext、Ajax以及Thin Client和Rich Client之爭。Web設計到底應該是怎樣的?這個沒有定論，因為Web是大家的Web，存在即合理。Web設計，最應該考慮的就是“設計的上下文”，在一個完全開放的平台上進行設計，就如同在一張白紙上作畫。最大的限制不是技術，而是設計師本身。只有設計師能夠決定自己的設計究竟該如何去做，同樣，也只有他的能力會限制自己的設計。結合上下文關係，如果你開發的是Web mail程式，對於多年使用Outlook已經形成根深蒂固的使用習慣的使用者來說，你要如何做這樣的介面設計?開發一個全新的無人觸及的新奇東東麼?不，那背離了設計的人本本質，所以，滿足使用者最簡單的辦法就是，在Web上設計開發一個與Outlook風格和外觀類似的應用，讓使用者完全沒有壓力，在熟悉地環境下高效的開展自己的工作。那麼，如果你要開發的是一個新聞發布系統，自然就要符合使用者對於Web的既定認識和習慣，把應用設計得如同報紙、雜誌一般，並且提供良好的內容分類和搜尋，以期讓使用者很容易的找到自己想要的資源，在最短的時間內擷取更多有價值的資訊(RSS和Portal都是因此而產生的)。再比如，你要設計開發的是一款資訊管理系統，那麼，很可能高效方便的增刪改功能和強大的報表、查詢系統，才是UI設計首先需要考慮的(案頭風格的UI很適合做此類應用)。又或者，你要開發一個體現出商務程序性的龐大複雜的行業應用，那麼，體現出行業解決方案的高度概念性和軟體對於商務程序的規範和指導作用，這是在設計UI時主要需要考慮的。而所有這些，在Web上統統可以實現，這要歸功於Ajax，歸功於全世界的開發人員和設計師的共同努力。

　　總結一下，Web介面的常用布局——如果說到傳統，那麼，自然是平板式的文字資料流(Web在設計之初就是為了研究人員之間文檔的共用和查看)。但是，Web發展到今天，我真的不知道該如何去總結它的布局風格了。只能說，常見的有：Banner-navi-content布局(多見於網站和多數Web應用)，左右架構式布局(常見於基於內容和資料維護的Web應用)、Portal布局(企業Portal或門戶)等等。

最後，說一下行動裝置的使用者介面。典型的就是手機上的應用軟體，顏色和尺寸以及圖形處理效能是其最主要的限制。基本上，在各個平台上開發應用程式，都要遵從平台的開發指南和規範，而風格大致也都是與作業系統本身一致的，再此不作贅述了。其實，之所以單獨提一下行動裝置，是因為某些行業軟體還需要考慮PDA和手機使用者的需要，這也成為我們在設計風格定位和技術選型上的一個制約條件。

表徵圖、CSS、結構與表現分離

　　表徵圖按其創作風格，大致可分為兩種：向量表徵圖和像素表徵圖。在沒有Alpha通道的幾年前，表徵圖幾乎都是像素風格的，生硬而簡潔(例如windows2000的表徵圖)，但是十分耐看。近年來，隨著Alpha通道逐漸普及，表徵圖開始變得越來越絢麗(主要歸功於Apple)，越來越寫實，設計師們為了創造出更加絢麗的表徵圖，逐漸改用向量設計軟體來進行創作。

　　WindowsXP風格的表徵圖就是向量表徵圖。繪製表徵圖幾乎成了所有UI設計師的看家本事，也是衡量一名UI設計師在GUI設計方面能力水平的尺規。方寸之地方顯英雄本色，呵呵。那麼，表徵圖除了好看以外，還有別的什麼功能麼?其實，表徵圖在圖形化使用者介面的主要作用是輔助識別，每個人在成長過程中，最先認識事物是通過對其輪廓的識別，而不是靠文字。因此，表徵圖多會採用最為簡潔的方式表現出事物的功能和特點：比如，突起的東西表示它應該是可以點擊的，小信封表示這是一封郵件，放大鏡表示這裡是搜尋。一直以來，表徵圖都在儘可能的貼近實際，但是，並不是所有的Web上的事物都可以找到現實中的存在。學習能力是人類與生俱來的一種能力，初遇Web的人類開始不斷的學習和瞭解這個世界，他們知道了什麼是滑鼠指標，什麼叫游標，什麼是連結，什麼又是捲軸。正是人類不斷的認知，促成了習慣，也就形成了如今的各類使用者介面風格。最早的Web是沒有表徵圖的，或者說，在Web上，表徵圖的概念和案頭UI完全不同。WebUI中，表徵圖的作用往往是輔助說明，而非“點擊”，這與案頭UI中表徵圖的功能大相徑庭。因此，大家可以仔細看一下，大部分傳統的WebUI中，是絕對不會出現可以點擊的表徵圖的(論壇的Emoji除外。。)。WebUI更習慣以文本的方式來展示資訊，以帶有底線的文本來表示此處是連結可點擊。

　　綜上所述，WebUI中的表徵圖和案頭應用的表徵圖有著固有的本質區別，因此，照搬案頭UI的設計往往會將使用者引入錯誤的習慣當中，使使用者想當然的認為WebUI就應該那樣去做，這對Web是不公平的，對WebUI設計更是極大的諷刺。要知道，Toolbar和Menu根本就不是WebUI的必需品——包括表徵圖在內。

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

　　每一個UI設計師，都是從處理圖片開始職業生涯的，慢慢的，他們發現，為什麼每一次自己的設計都會讓開發人員眉頭緊鎖說無法實現或十分困難呢?技術到底是怎樣的呢?後來，UI設計師們學會了HTML，哦~ 原來HTML是這樣地，他們的設計開始變得更加實際了，他們不僅能夠處理和設計圖片，同時也能夠為開發人員提供必要的HTML支援了。再後來，他們發現，為什麼自己的設計載入速度總是那麼的慢，而別人的設計載入起來這麼快呢?後來，他們慢慢懂得了切圖，懂得了CSS。後來的後來，他們不僅懂得HTML和CSS，而且還能夠考慮到效能和相容性，並開始注意編碼的藝術，知道了什麼叫做設計模式，什麼叫做抽象和封裝。至此，他們才真正的把自己提升到了WebUI設計師的高度。他們發現自己越來越懶，寧可通過CSS複雜的編碼來實現一個特效，也不願去花時間繪製一個圖片(比如陰影)。他們寫的代碼越來越少，CSS越來越多，慢慢的，結構與表現分離了，HTML變成了通篇的DIV和UL，CSS檔案如天書一般洋洋洒洒數十kb。因此，結構與表現分離是一個思想上的自然演變過程。我看到今天，有那麼多的設計師以此為準則、以此為規範，不禁感慨，WebUI不是那樣的，Table無罪。當你因為無法用DIV+CSS實現某種布局轉而引入大量的JS或乾脆換個設計的時候，這麼做值得麼?

　　總結一下，CSS無疑給了WebUI設計師更大的發展，它是WebUI設計師的一把利劍，當然它同樣也是一把雙刃劍。過份依賴CSS只會讓你的設計越來越簡潔、越來越無趣，這就是CSS下的迷失。圖片不是罪，如果你不想自己的靈感一點點的枯竭，那麼，重新拾起圖片吧，你會發現設計原來可以更美的(參見Vista相關網站，設計可以更美的)。這裡再小小的提一下Ext，雖然它內建主題的支援，但是，它真能夠做到讓設計師隨心所欲麼?想隨心所欲又要付出多大的代價呢?

　　WebUI的圖形設計，其自由度是由互動風格和技術架構雙重作用決定的。限制了互動風格和技術架構，就等於限制了圖形設計風格，也就相當於限制了UI設計師的發揮。因此，讓UI設計師來選擇和決定互動風格和技術架構是UI設計不可或缺的關鍵一步。只有真正從使用者業務的角度出發，合理的定位互動風格和技術架構，才有可能做出真正符合使用者習慣和需求的介面。設計師真正需要駕馭的不是技術而是設計本身。因此，在這裡，我想說：永遠不要在技術面前迷失了方向。是設計去選擇技術，而不應該讓技術來決定設計。

 

webapp設計注意事項