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中，是絕對不會出現能夠點擊的圖標的(論壇的表情符號除外。。)。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設計不可或缺的關鍵一步。只有真正從用戶業務的角度出發，合理的定位交互風格和技術架構，纔有可能作出真正符合用戶習慣和需求的界面。設計師真正須要駕馭的不是技術而是設計自己。所以，在這裏，我想說：永遠不要在技術面前迷失了方向。是設計去選擇技術，而不該該讓技術來決定設計。