淺談Web App前端設(shè)計(jì)原則

\o"淺談WebApp前端設(shè)計(jì)原則"淺談WebApp前端設(shè)計(jì)原則關(guān)于WebApp隨著web2.0時(shí)代的到來(lái)，越來(lái)越多的應(yīng)用程序都是基于Web環(huán)境來(lái)構(gòu)建的。這樣做的好處顯而易見(jiàn)，用戶可以方便地使用瀏覽器來(lái)訪問(wèn)應(yīng)用，而不需要安裝客戶端程序。而在企業(yè)內(nèi)部，很多應(yīng)用也都采用了這種模式，以便于安裝和部署，特別是在業(yè)務(wù)變化頻繁，需要經(jīng)常對(duì)應(yīng)用程序進(jìn)行更新的情況下，WebApp更是為我們提供了很大的便利。WebApp作為Web環(huán)境中的應(yīng)用，和網(wǎng)站以及傳統(tǒng)的Winform式應(yīng)用有著千絲萬(wàn)縷聯(lián)系，同時(shí)也有很明顯的區(qū)別。與網(wǎng)站相比：共同點(diǎn)在于用戶都是通過(guò)瀏覽器來(lái)訪問(wèn)，不需要安裝其他客戶端。區(qū)別也很明顯，網(wǎng)站的功能在于展示，用戶訪問(wèn)網(wǎng)站的目的就在于獲取信息；而WebApp則不然，用戶訪問(wèn)它更重要的目的在于交互，執(zhí)行各種操作，不僅僅要從中獲取數(shù)據(jù)，還要向應(yīng)用中存儲(chǔ)數(shù)據(jù)，并讓?xiě)?yīng)用執(zhí)行自己所需要的功能。與Winform式應(yīng)用相比：共同點(diǎn)在于二者都是應(yīng)用，都會(huì)完成一定的業(yè)務(wù)功能。區(qū)別的一方面在于安裝和部署的方式，WebApp是通過(guò)瀏覽器來(lái)訪問(wèn)的，不需要經(jīng)過(guò)繁瑣且耗時(shí)的安裝過(guò)程，直接就可以使用。而且，當(dāng)系統(tǒng)升級(jí)的時(shí)候，用戶也不需要重新部署，只需要在瀏覽器中重新打開(kāi)就好。區(qū)別的另一方面在于二者所提供的用戶體驗(yàn)不同，因?yàn)闉g覽器的限制，WebApp帶給用戶的體驗(yàn)還比不上傳統(tǒng)的Winform式應(yīng)用，盡管現(xiàn)在有了很多可以在瀏覽器中運(yùn)行的類似于富客戶端的技術(shù)，像Silverlight、Flex等等，但想要提供與Winform式應(yīng)用一樣豐富的體驗(yàn)，還有很多需要努力的地方。

關(guān)于WebApp前端設(shè)計(jì)在架構(gòu)上，不管是何種應(yīng)用，在構(gòu)建的時(shí)候都會(huì)體現(xiàn)出分層的思想。最經(jīng)典的就是三層架構(gòu)：表現(xiàn)層、業(yè)務(wù)邏輯層和數(shù)據(jù)層，而WebApp前端設(shè)計(jì)所關(guān)注的就在于表現(xiàn)層。

前端設(shè)計(jì)的目標(biāo)想要設(shè)計(jì)出合理且易于讓用戶使用的WebApp界面，讓用戶獲得最好的體驗(yàn)，從而更好地使用應(yīng)用來(lái)完成所需要的功能。為了達(dá)到這個(gè)目標(biāo)，有三點(diǎn)原則可供遵循，那就是：簡(jiǎn)單、美觀和規(guī)范。接下來(lái)讓我依次對(duì)其進(jìn)行說(shuō)明。原則之一：簡(jiǎn)單簡(jiǎn)單的目的就是要方便用戶的使用，但是要簡(jiǎn)單到什么樣的程度呢？用什么標(biāo)準(zhǔn)來(lái)衡量我們的界面設(shè)計(jì)是否簡(jiǎn)單呢？我認(rèn)為有兩點(diǎn)基本的標(biāo)準(zhǔn)：l

不需要思考——界面上所有元素所提供的功能一目了然，沒(méi)有歧義，易于理解。l

不需要學(xué)習(xí)——不需要復(fù)雜的培訓(xùn)，所有的功能遵循操作的習(xí)慣，直接上手可以使用。還記得之前有人把全自動(dòng)的相機(jī)叫做“傻瓜”相機(jī)，其實(shí)我們所要設(shè)計(jì)的就是“傻瓜”式的應(yīng)用界面，進(jìn)而讓我們的應(yīng)用成為“傻瓜”式的應(yīng)用，那樣會(huì)贏得更多客戶，而不是讓人望而生畏。想要達(dá)到這樣的標(biāo)準(zhǔn)，我們需要怎么做呢？首先，界面上的元素要少，放置太多只會(huì)讓用戶覺(jué)得不知所措，需要仔細(xì)觀察和思考之后，才知道對(duì)哪些元素進(jìn)行操作才能夠達(dá)到自己的目的。我們經(jīng)常會(huì)在一些產(chǎn)品的界面上看到許多不必要的元素，比方說(shuō)在輸入聯(lián)系方式的時(shí)候，有“電話”、“地址”、“傳真”、“手機(jī)”、“Email”，這些都沒(méi)有問(wèn)題，如果出現(xiàn)“地址2”、“電話2”等備用的信息，我們會(huì)發(fā)現(xiàn)它們對(duì)于絕大多數(shù)用戶來(lái)說(shuō)都是沒(méi)有任何意義的，也不會(huì)用到，只是為了以防萬(wàn)一，對(duì)于這些元素，我們大多可以刪除掉。其次，要讓?xiě)?yīng)用的后臺(tái)做更多的工作，盡可能地把更多的操作自動(dòng)化，而不是把所有的任務(wù)都交給用戶完成。這樣會(huì)減少用戶的操作，同時(shí)也就減少了出現(xiàn)誤操作的可能。接下來(lái)我們以Google翻譯為例，來(lái)理解一下上述的內(nèi)容，如圖1所示。首先，在Google翻譯中，界面上的元素很少，可供操作的主要就是“源語(yǔ)言”、“目標(biāo)語(yǔ)言”、“翻譯”按鈕，以及一個(gè)大大的輸入框，每個(gè)元素都很容易理解，輸入框也很明顯，讓我們一看到就知道是要把需要翻譯的內(nèi)容放到其中。當(dāng)我們?cè)谳斎肟蛑休斎雰?nèi)容的時(shí)候，應(yīng)用的后臺(tái)功能就開(kāi)始顯示威力了，它會(huì)自動(dòng)地幫我們識(shí)別出語(yǔ)言的種類，然后自動(dòng)地把翻譯出來(lái)的結(jié)果放在結(jié)果顯示的位置。我們所有做的操作只是輸入了想要翻譯的內(nèi)容。試想一下，如果沒(méi)有達(dá)到簡(jiǎn)單的效果的話，我們會(huì)怎么做呢？首先我肯定需要選擇“源語(yǔ)言”和“目標(biāo)語(yǔ)言”，輸入完所要翻譯的內(nèi)容之后，再點(diǎn)擊“翻譯”按鈕，然后才能夠看到結(jié)果。和Google翻譯所提供的簡(jiǎn)單相比，這樣的方式多了很多不必要的操作。上述的簡(jiǎn)單更多關(guān)注的是界面元素，其實(shí)還有另一個(gè)方面的簡(jiǎn)單，那就是操作上的簡(jiǎn)單。對(duì)于系統(tǒng)的操作，我們會(huì)使用輸入工具主要就是兩種：鼠標(biāo)和鍵盤(pán)。（當(dāng)然還有觸摸屏的方式，而且已經(jīng)在手機(jī)和平板電腦上的應(yīng)用越來(lái)越廣泛，但暫時(shí)不在我們討論的范圍之內(nèi)。）那么我們的目的就很明確了，想要達(dá)到操作上的簡(jiǎn)單，一方面要減少點(diǎn)擊鼠標(biāo)和敲擊鍵盤(pán)的次數(shù)，另一方面要減少鼠標(biāo)和鍵盤(pán)操作之間切換的次數(shù)。在此我依然用Google的產(chǎn)品作為例子，請(qǐng)看圖2中Google日歷輸入活動(dòng)的界面。圖2在Google日歷創(chuàng)建活動(dòng)

比方我們現(xiàn)在要?jiǎng)?chuàng)建的活動(dòng)是“到會(huì)議室開(kāi)會(huì)”，時(shí)間在上午7點(diǎn)，那么我們?cè)贕oogle日歷中所要做的操作就是：點(diǎn)擊日期（鼠標(biāo)點(diǎn)擊一次）→輸入內(nèi)容“上午7點(diǎn)到會(huì)議室開(kāi)會(huì)”（鍵盤(pán)輸入）→確定（回車一次）。就是這么簡(jiǎn)單，活動(dòng)的內(nèi)容和時(shí)間都已經(jīng)分析完畢，新的活動(dòng)已經(jīng)創(chuàng)建。如果是在Outlook中做同樣的一件事，需要什么樣的步驟呢？圖3顯示的是Outlook“新建約會(huì)”的界面。

圖3在Outlook中創(chuàng)建約會(huì)在Outlook中步驟有：選擇日期（雙擊鼠標(biāo)）→輸入主題（鍵盤(pán)輸入）→輸入地點(diǎn)（鍵盤(pán)輸入）→取消對(duì)“全天”的選擇（鼠標(biāo)點(diǎn)擊）→選擇開(kāi)始時(shí)間（鼠標(biāo)選擇）→選擇結(jié)束時(shí)間（鼠標(biāo)選擇）→輸入內(nèi)容（鍵盤(pán)輸入）→保存關(guān)閉（鼠標(biāo)點(diǎn)擊）。不需要再做過(guò)多說(shuō)明，一切都已經(jīng)很清楚了。我們不僅多做了很多鼠標(biāo)和鍵盤(pán)的操作，而且還多次在鼠標(biāo)和鍵盤(pán)之間進(jìn)行切換。和Google日歷相比，操作復(fù)雜了很多。簡(jiǎn)單這一原則會(huì)節(jié)省用戶的時(shí)間，而時(shí)間是最寶貴的，這也是我把“簡(jiǎn)單”放在第一位的原因所在。原則之二：美觀對(duì)于任何一個(gè)應(yīng)用的界面來(lái)說(shuō)，美觀都是非常重要的。應(yīng)用的界面就像是人的臉，看上去讓人覺(jué)得舒服，然后才會(huì)有更多的人喜歡它，否則即便功能再?gòu)?qiáng)大，使用起來(lái)也會(huì)讓人覺(jué)得不舒服。然而，美觀并不意味著我們要使用很多的圖片、很多種顏色。使用圖片會(huì)降低頁(yè)面載入的效率，而使用過(guò)多顏色，不僅不會(huì)讓人覺(jué)得美觀，反而會(huì)覺(jué)得亂七八糟。組成頁(yè)面的元素可以主要可分為三類：文字、圖片和控件。所以，想要達(dá)到美觀的效果，我們同樣需要基于這三類元素來(lái)思考。在此我想借鑒一下《寫(xiě)給大家看的設(shè)計(jì)書(shū)》一書(shū)中所提到的幾點(diǎn)排版原則，那就是：重復(fù)——同樣作用的元素的風(fēng)格、顏色統(tǒng)一對(duì)比——不同作用的元素，要有鮮明的對(duì)比，可以使用字體、顏色等等方面來(lái)達(dá)到對(duì)比的效果。對(duì)齊——靈活使用左對(duì)齊、右對(duì)齊、居中對(duì)齊等對(duì)齊方式，讓元素的排列顯得整齊、規(guī)矩。親密性——有關(guān)聯(lián)的元素要盡可能“親密”地排列，而無(wú)關(guān)聯(lián)的元素之間要有足夠的“距離”來(lái)產(chǎn)生美。還是用例子來(lái)說(shuō)明，首先我們來(lái)看圖4中的界面：這個(gè)界面中有不少問(wèn)題，讓我們采用上面的四點(diǎn)原則來(lái)檢查一下。重復(fù)：這一點(diǎn)界面上體現(xiàn)的還不錯(cuò)，各種文字和界面的風(fēng)格還是很統(tǒng)一的。對(duì)比：這里的問(wèn)題在于上面的標(biāo)題部分和下面的內(nèi)容部分之間的對(duì)比不夠強(qiáng)烈，僅僅是對(duì)字體加粗，不能夠給人一種很醒目的感覺(jué)。對(duì)齊：內(nèi)容部分的文字標(biāo)簽和控件都采用了左對(duì)齊，但第二行的文字過(guò)長(zhǎng)，看起來(lái)比較亂；并且下面的兩個(gè)按鈕與內(nèi)容框之間沒(méi)有對(duì)齊（應(yīng)該是右對(duì)齊）親密性：文字標(biāo)簽和控件本來(lái)應(yīng)該是比較“親密”的關(guān)系，但是卻因?yàn)槎疾捎米髮?duì)齊的方式，離得比較遠(yuǎn)。針對(duì)以上問(wèn)題，我們可以對(duì)上面的界面做出一些調(diào)整，如圖5所示：圖5調(diào)整后的界面首先我們把標(biāo)題的字體調(diào)大，加強(qiáng)了與內(nèi)容文字的對(duì)比，顯得更加醒目；然后把標(biāo)簽文字設(shè)為右對(duì)齊，與相應(yīng)的控件的親密性大大加強(qiáng)；最后調(diào)整最下面的按鈕，使其與內(nèi)容框右側(cè)對(duì)齊，達(dá)到了美觀的目的。由此看來(lái)，只要我們理解并使用好這九個(gè)字，就能夠設(shè)計(jì)出比較美觀的界面了。原則之三：規(guī)范作為程序員，大家都知道在項(xiàng)目開(kāi)始之前要制定比較嚴(yán)格的代碼規(guī)范，這樣才能夠讓代碼的可維護(hù)性更好。但是，這些規(guī)范往往都是針對(duì)的都是高級(jí)語(yǔ)言，像Java、C、C++、VB等等。其實(shí)，WebApp的前端頁(yè)面同樣也是由代碼組成的，只不過(guò)是HTML樣式的代碼，對(duì)于這些代碼，也同樣需要規(guī)范。并且，和編程用的高級(jí)語(yǔ)言相比，這里的代碼還有特殊需要注意的問(wèn)題：l

ID屬性的設(shè)置——在編程的時(shí)候，我們都會(huì)給變量命名，而在前端界面的代碼中，各個(gè)元素也需要有自己的名字，那就是ID屬性。經(jīng)常會(huì)看到界面中的元素只有name屬性，而沒(méi)有id屬性；或者id屬性的名稱就是button1、button2之類無(wú)意義的名稱，這樣的情況都應(yīng)該得到規(guī)范。l

瀏覽器的兼容性——比方說(shuō)，在前端界面的代碼中，每個(gè)元素的屬性值可以放在引號(hào)之中，也可以把引號(hào)省略，有些瀏覽器具備比較好的糾錯(cuò)能力，也能夠正確地顯示界面。但是為了達(dá)到瀏覽器的兼容性，還是建議把所有屬性值都放在引號(hào)之中，那樣可以避免不必要的麻煩。想要讓?xiě)?yīng)用能夠在更多的瀏覽器中使用，就一定要有規(guī)范來(lái)限制，否則很可能就需要限制應(yīng)用只能在特定的瀏覽器中使用了。l

CSS的使用——對(duì)于元素的樣式，要盡量使用CSS來(lái)控制，而不能隨心