[計(jì)算機(jī)]淺談WebApp前端設(shè)計(jì)原則

1、淺談Web App前端設(shè)計(jì)原則 關(guān)于Web App隨著web 2.0時(shí)代的到來，越來越多的應(yīng)用程序都是基于Web環(huán)境來構(gòu)建的。這樣做的好處顯而易見，用戶可以方便地使用瀏覽器來訪問應(yīng)用，而不需要安裝客戶端程序。而在企業(yè)內(nèi)部，很多應(yīng)用也都采用了這種模式，以便于安裝和部署，特別是在業(yè)務(wù)變化頻繁，需要經(jīng)常對應(yīng)用程序進(jìn)行更新的情況下，Web App更是為我們提供了很大的便利。Web App作為Web環(huán)境中的應(yīng)用，和網(wǎng)站以及傳統(tǒng)的Winform式應(yīng)用有著千絲萬縷聯(lián)系，同時(shí)也有很明顯的區(qū)別。與網(wǎng)站相比：共同點(diǎn)在于用戶都是通過瀏覽器來訪問，不需要安裝其他客戶端。區(qū)別也很明顯，網(wǎng)站的功能在于展示，用戶訪問網(wǎng)站的

2、目的就在于獲取信息；而WebApp則不然，用戶訪問它更重要的目的在于交互，執(zhí)行各種操作，不僅僅要從中獲取數(shù)據(jù)，還要向應(yīng)用中存儲(chǔ)數(shù)據(jù)，并讓應(yīng)用執(zhí)行自己所需要的功能。與Winform式應(yīng)用相比：共同點(diǎn)在于二者都是應(yīng)用，都會(huì)完成一定的業(yè)務(wù)功能。區(qū)別的一方面在于安裝和部署的方式，Web App是通過瀏覽器來訪問的，不需要經(jīng)過繁瑣且耗時(shí)的安裝過程，直接就可以使用。而且，當(dāng)系統(tǒng)升級的時(shí)候，用戶也不需要重新部署，只需要在瀏覽器中重新打開就好。區(qū)別的另一方面在于二者所提供的用戶體驗(yàn)不同，因?yàn)闉g覽器的限制，WebApp帶給用戶的體驗(yàn)還比不上傳統(tǒng)的Winform式應(yīng)用，盡管現(xiàn)在有了很多可以在瀏覽器中運(yùn)行的類似于富

3、客戶端的技術(shù)，像Silverlight、Flex等等，但想要提供與Winform式應(yīng)用一樣豐富的體驗(yàn)，還有很多需要努力的地方。 關(guān)于Web App前端設(shè)計(jì)在架構(gòu)上，不管是何種應(yīng)用，在構(gòu)建的時(shí)候都會(huì)體現(xiàn)出分層的思想。最經(jīng)典的就是三層架構(gòu)：表現(xiàn)層、業(yè)務(wù)邏輯層和數(shù)據(jù)層，而Web App前端設(shè)計(jì)所關(guān)注的就在于表現(xiàn)層。   前端設(shè)計(jì)的目標(biāo)想要設(shè)計(jì)出合理且易于讓用戶使用的Web App界面，讓用戶獲得最好的體驗(yàn)，從而更好地使用應(yīng)用來完成所需要的功能。為了達(dá)到這個(gè)目標(biāo)，有三點(diǎn)原則可供遵循，那就是：簡單、美觀和規(guī)范。接下來讓我依次對其進(jìn)行說明。原則之一：簡單簡單的目的就是要方便用

4、戶的使用，但是要簡單到什么樣的程度呢？用什么標(biāo)準(zhǔn)來衡量我們的界面設(shè)計(jì)是否簡單呢？我認(rèn)為有兩點(diǎn)基本的標(biāo)準(zhǔn)：l          不需要思考界面上所有元素所提供的功能一目了然，沒有歧義，易于理解。l          不需要學(xué)習(xí)不需要復(fù)雜的培訓(xùn)，所有的功能遵循操作的習(xí)慣，直接上手可以使用。還記得之前有人把全自動(dòng)的相機(jī)叫做“傻瓜”相機(jī)，其實(shí)我們所要設(shè)計(jì)的就是“傻瓜”式的應(yīng)用界面，進(jìn)而讓我們的應(yīng)用成為“傻

5、瓜”式的應(yīng)用，那樣會(huì)贏得更多客戶，而不是讓人望而生畏。想要達(dá)到這樣的標(biāo)準(zhǔn)，我們需要怎么做呢？首先，界面上的元素要少，放置太多只會(huì)讓用戶覺得不知所措，需要仔細(xì)觀察和思考之后，才知道對哪些元素進(jìn)行操作才能夠達(dá)到自己的目的。我們經(jīng)常會(huì)在一些產(chǎn)品的界面上看到許多不必要的元素，比方說在輸入聯(lián)系方式的時(shí)候，有“電話”、“地址”、“傳真”、“手機(jī)”、“Email”，這些都沒有問題，如果出現(xiàn)“地址2”、“電話2”等備用的信息，我們會(huì)發(fā)現(xiàn)它們對于絕大多數(shù)用戶來說都是沒有任何意義的，也不會(huì)用到，只是為了以防萬一，對于這些元素，我們大多可以刪除掉。其次，要讓應(yīng)用的后臺(tái)做更多的工作，盡可能地把更多的操作自動(dòng)化，而不是

6、把所有的任務(wù)都交給用戶完成。這樣會(huì)減少用戶的操作，同時(shí)也就減少了出現(xiàn)誤操作的可能。接下來我們以Google翻譯為例，來理解一下上述的內(nèi)容，如圖1所示。首先，在Google翻譯中，界面上的元素很少，可供操作的主要就是“源語言”、“目標(biāo)語言”、“翻譯”按鈕，以及一個(gè)大大的輸入框，每個(gè)元素都很容易理解，輸入框也很明顯，讓我們一看到就知道是要把需要翻譯的內(nèi)容放到其中。當(dāng)我們在輸入框中輸入內(nèi)容的時(shí)候，應(yīng)用的后臺(tái)功能就開始顯示威力了，它會(huì)自動(dòng)地幫我們識(shí)別出語言的種類，然后自動(dòng)地把翻譯出來的結(jié)果放在結(jié)果顯示的位置。我們所有做的操作只是輸入了想要翻譯的內(nèi)容。試想一下，如果沒有達(dá)到簡單的效果的話，我們會(huì)怎么做呢

7、？首先我肯定需要選擇“源語言”和“目標(biāo)語言”，輸入完所要翻譯的內(nèi)容之后，再點(diǎn)擊“翻譯”按鈕，然后才能夠看到結(jié)果。和Google翻譯所提供的簡單相比，這樣的方式多了很多不必要的操作。上述的簡單更多關(guān)注的是界面元素，其實(shí)還有另一個(gè)方面的簡單，那就是操作上的簡單。對于系統(tǒng)的操作，我們會(huì)使用輸入工具主要就是兩種：鼠標(biāo)和鍵盤。（當(dāng)然還有觸摸屏的方式，而且已經(jīng)在手機(jī)和平板電腦上的應(yīng)用越來越廣泛，但暫時(shí)不在我們討論的范圍之內(nèi)。）那么我們的目的就很明確了，想要達(dá)到操作上的簡單，一方面要減少點(diǎn)擊鼠標(biāo)和敲擊鍵盤的次數(shù)，另一方面要減少鼠標(biāo)和鍵盤操作之間切換的次數(shù)。在此我依然用Google的產(chǎn)品作為例子，請看圖2中G

8、oogle日歷輸入活動(dòng)的界面。圖2 在Google日歷創(chuàng)建活動(dòng) 比方我們現(xiàn)在要?jiǎng)?chuàng)建的活動(dòng)是“到會(huì)議室開會(huì)”，時(shí)間在上午7點(diǎn)，那么我們在Google日歷中所要做的操作就是：點(diǎn)擊日期（鼠標(biāo)點(diǎn)擊一次）輸入內(nèi)容“上午7點(diǎn)到會(huì)議室開會(huì)”（鍵盤輸入）確定（回車一次）。就是這么簡單，活動(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)）輸入主題（鍵盤輸入）輸入地點(diǎn)（鍵盤輸入）取消對“全天”的選擇（鼠標(biāo)點(diǎn)擊）選擇開始時(shí)間（

9、鼠標(biāo)選擇）選擇結(jié)束時(shí)間（鼠標(biāo)選擇）輸入內(nèi)容（鍵盤輸入）保存關(guān)閉（鼠標(biāo)點(diǎn)擊）。不需要再做過多說明，一切都已經(jīng)很清楚了。我們不僅多做了很多鼠標(biāo)和鍵盤的操作，而且還多次在鼠標(biāo)和鍵盤之間進(jìn)行切換。和Google日歷相比，操作復(fù)雜了很多。簡單這一原則會(huì)節(jié)省用戶的時(shí)間，而時(shí)間是最寶貴的，這也是我把“簡單”放在第一位的原因所在。原則之二：美觀對于任何一個(gè)應(yīng)用的界面來說，美觀都是非常重要的。應(yīng)用的界面就像是人的臉，看上去讓人覺得舒服，然后才會(huì)有更多的人喜歡它，否則即便功能再強(qiáng)大，使用起來也會(huì)讓人覺得不舒服。然而，美觀并不意味著我們要使用很多的圖片、很多種顏色。使用圖片會(huì)降低頁面載入的效率，而使用過多顏色，不僅

10、不會(huì)讓人覺得美觀，反而會(huì)覺得亂七八糟。組成頁面的元素可以主要可分為三類：文字、圖片和控件。所以，想要達(dá)到美觀的效果，我們同樣需要基于這三類元素來思考。在此我想借鑒一下寫給大家看的設(shè)計(jì)書一書中所提到的幾點(diǎn)排版原則，那就是：重復(fù)同樣作用的元素的風(fēng)格、顏色統(tǒng)一對比不同作用的元素，要有鮮明的對比，可以使用字體、顏色等等方面來達(dá)到對比的效果。對齊靈活使用左對齊、右對齊、居中對齊等對齊方式，讓元素的排列顯得整齊、規(guī)矩。親密性有關(guān)聯(lián)的元素要盡可能“親密”地排列，而無關(guān)聯(lián)的元素之間要有足夠的“距離”來產(chǎn)生美。還是用例子來說明，首先我們來看圖4中的界面：這個(gè)界面中有不少問題，讓我們采用上面的四點(diǎn)原則來檢查一下。

11、重復(fù)：這一點(diǎn)界面上體現(xiàn)的還不錯(cuò)，各種文字和界面的風(fēng)格還是很統(tǒng)一的。對比：這里的問題在于上面的標(biāo)題部分和下面的內(nèi)容部分之間的對比不夠強(qiáng)烈，僅僅是對字體加粗，不能夠給人一種很醒目的感覺。對齊：內(nèi)容部分的文字標(biāo)簽和控件都采用了左對齊，但第二行的文字過長，看起來比較亂；并且下面的兩個(gè)按鈕與內(nèi)容框之間沒有對齊（應(yīng)該是右對齊）親密性：文字標(biāo)簽和控件本來應(yīng)該是比較“親密”的關(guān)系，但是卻因?yàn)槎疾捎米髮R的方式，離得比較遠(yuǎn)。針對以上問題，我們可以對上面的界面做出一些調(diào)整，如圖5所示：圖5 調(diào)整后的界面首先我們把標(biāo)題的字體調(diào)大，加強(qiáng)了與內(nèi)容文字的對比，顯得更加醒目；然后把標(biāo)簽文字設(shè)為右對齊，與相應(yīng)的控件的親密性大

12、大加強(qiáng)；最后調(diào)整最下面的按鈕，使其與內(nèi)容框右側(cè)對齊，達(dá)到了美觀的目的。由此看來，只要我們理解并使用好這九個(gè)字，就能夠設(shè)計(jì)出比較美觀的界面了。原則之三：規(guī)范作為程序員，大家都知道在項(xiàng)目開始之前要制定比較嚴(yán)格的代碼規(guī)范，這樣才能夠讓代碼的可維護(hù)性更好。但是，這些規(guī)范往往都是針對的都是高級語言，像Java、C、C+、VB等等。其實(shí)，Web App的前端頁面同樣也是由代碼組成的，只不過是HTML樣式的代碼，對于這些代碼，也同樣需要規(guī)范。并且，和編程用的高級語言相比，這里的代碼還有特殊需要注意的問題：l        

13、60; ID屬性的設(shè)置在編程的時(shí)候，我們都會(huì)給變量命名，而在前端界面的代碼中，各個(gè)元素也需要有自己的名字，那就是ID屬性。經(jīng)常會(huì)看到界面中的元素只有name屬性，而沒有id屬性；或者id屬性的名稱就是button1、button2之類無意義的名稱，這樣的情況都應(yīng)該得到規(guī)范。l          瀏覽器的兼容性比方說，在前端界面的代碼中，每個(gè)元素的屬性值可以放在引號(hào)之中，也可以把引號(hào)省略，有些瀏覽器具備比較好的糾錯(cuò)能力，也能夠正確地顯示界面。但是為了達(dá)到瀏覽器的兼容性，還是建議把所有屬性值都放在引號(hào)之中，那樣可以避免不必要的麻煩。想要讓應(yīng)用能夠在更多的瀏覽器中使用，就一定要有規(guī)范來限制，否則很可能就需要限制應(yīng)用只能在特定的瀏覽器中使用了。l          CSS的使用對于元素的樣式，要盡量使用CSS來控制，而不