版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
\o"淺談WebApp前端設計原則"淺談WebApp前端設計原則關于WebApp隨著web2.0時代的到來,越來越多的應用程序都是基于Web環(huán)境來構建的。這樣做的好處顯而易見,用戶可以方便地使用瀏覽器來訪問應用,而不需要安裝客戶端程序。而在企業(yè)內部,很多應用也都采用了這種模式,以便于安裝和部署,特別是在業(yè)務變化頻繁,需要經(jīng)常對應用程序進行更新的情況下,WebApp更是為我們提供了很大的便利。WebApp作為Web環(huán)境中的應用,和網(wǎng)站以及傳統(tǒng)的Winform式應用有著千絲萬縷聯(lián)系,同時也有很明顯的區(qū)別。與網(wǎng)站相比:共同點在于用戶都是通過瀏覽器來訪問,不需要安裝其他客戶端。區(qū)別也很明顯,網(wǎng)站的功能在于展示,用戶訪問網(wǎng)站的目的就在于獲取信息;而WebApp則不然,用戶訪問它更重要的目的在于交互,執(zhí)行各種操作,不僅僅要從中獲取數(shù)據(jù),還要向應用中存儲數(shù)據(jù),并讓應用執(zhí)行自己所需要的功能。與Winform式應用相比:共同點在于二者都是應用,都會完成一定的業(yè)務功能。區(qū)別的一方面在于安裝和部署的方式,WebApp是通過瀏覽器來訪問的,不需要經(jīng)過繁瑣且耗時的安裝過程,直接就可以使用。而且,當系統(tǒng)升級的時候,用戶也不需要重新部署,只需要在瀏覽器中重新打開就好。區(qū)別的另一方面在于二者所提供的用戶體驗不同,因為瀏覽器的限制,WebApp帶給用戶的體驗還比不上傳統(tǒng)的Winform式應用,盡管現(xiàn)在有了很多可以在瀏覽器中運行的類似于富客戶端的技術,像Silverlight、Flex等等,但想要提供與Winform式應用一樣豐富的體驗,還有很多需要努力的地方。
關于WebApp前端設計在架構上,不管是何種應用,在構建的時候都會體現(xiàn)出分層的思想。最經(jīng)典的就是三層架構:表現(xiàn)層、業(yè)務邏輯層和數(shù)據(jù)層,而WebApp前端設計所關注的就在于表現(xiàn)層。
前端設計的目標想要設計出合理且易于讓用戶使用的WebApp界面,讓用戶獲得最好的體驗,從而更好地使用應用來完成所需要的功能。為了達到這個目標,有三點原則可供遵循,那就是:簡單、美觀和規(guī)范。接下來讓我依次對其進行說明。原則之一:簡單簡單的目的就是要方便用戶的使用,但是要簡單到什么樣的程度呢?用什么標準來衡量我們的界面設計是否簡單呢?我認為有兩點基本的標準:l
不需要思考——界面上所有元素所提供的功能一目了然,沒有歧義,易于理解。l
不需要學習——不需要復雜的培訓,所有的功能遵循操作的習慣,直接上手可以使用。還記得之前有人把全自動的相機叫做“傻瓜”相機,其實我們所要設計的就是“傻瓜”式的應用界面,進而讓我們的應用成為“傻瓜”式的應用,那樣會贏得更多客戶,而不是讓人望而生畏。想要達到這樣的標準,我們需要怎么做呢?首先,界面上的元素要少,放置太多只會讓用戶覺得不知所措,需要仔細觀察和思考之后,才知道對哪些元素進行操作才能夠達到自己的目的。我們經(jīng)常會在一些產品的界面上看到許多不必要的元素,比方說在輸入聯(lián)系方式的時候,有“電話”、“地址”、“傳真”、“手機”、“Email”,這些都沒有問題,如果出現(xiàn)“地址2”、“電話2”等備用的信息,我們會發(fā)現(xiàn)它們對于絕大多數(shù)用戶來說都是沒有任何意義的,也不會用到,只是為了以防萬一,對于這些元素,我們大多可以刪除掉。其次,要讓應用的后臺做更多的工作,盡可能地把更多的操作自動化,而不是把所有的任務都交給用戶完成。這樣會減少用戶的操作,同時也就減少了出現(xiàn)誤操作的可能。接下來我們以Google翻譯為例,來理解一下上述的內容,如圖1所示。首先,在Google翻譯中,界面上的元素很少,可供操作的主要就是“源語言”、“目標語言”、“翻譯”按鈕,以及一個大大的輸入框,每個元素都很容易理解,輸入框也很明顯,讓我們一看到就知道是要把需要翻譯的內容放到其中。當我們在輸入框中輸入內容的時候,應用的后臺功能就開始顯示威力了,它會自動地幫我們識別出語言的種類,然后自動地把翻譯出來的結果放在結果顯示的位置。我們所有做的操作只是輸入了想要翻譯的內容。試想一下,如果沒有達到簡單的效果的話,我們會怎么做呢?首先我肯定需要選擇“源語言”和“目標語言”,輸入完所要翻譯的內容之后,再點擊“翻譯”按鈕,然后才能夠看到結果。和Google翻譯所提供的簡單相比,這樣的方式多了很多不必要的操作。上述的簡單更多關注的是界面元素,其實還有另一個方面的簡單,那就是操作上的簡單。對于系統(tǒng)的操作,我們會使用輸入工具主要就是兩種:鼠標和鍵盤。(當然還有觸摸屏的方式,而且已經(jīng)在手機和平板電腦上的應用越來越廣泛,但暫時不在我們討論的范圍之內。)那么我們的目的就很明確了,想要達到操作上的簡單,一方面要減少點擊鼠標和敲擊鍵盤的次數(shù),另一方面要減少鼠標和鍵盤操作之間切換的次數(shù)。在此我依然用Google的產品作為例子,請看圖2中Google日歷輸入活動的界面。圖2在Google日歷創(chuàng)建活動
比方我們現(xiàn)在要創(chuàng)建的活動是“到會議室開會”,時間在上午7點,那么我們在Google日歷中所要做的操作就是:點擊日期(鼠標點擊一次)→輸入內容“上午7點到會議室開會”(鍵盤輸入)→確定(回車一次)。就是這么簡單,活動的內容和時間都已經(jīng)分析完畢,新的活動已經(jīng)創(chuàng)建。如果是在Outlook中做同樣的一件事,需要什么樣的步驟呢?圖3顯示的是Outlook“新建約會”的界面。
圖3在Outlook中創(chuàng)建約會在Outlook中步驟有:選擇日期(雙擊鼠標)→輸入主題(鍵盤輸入)→輸入地點(鍵盤輸入)→取消對“全天”的選擇(鼠標點擊)→選擇開始時間(鼠標選擇)→選擇結束時間(鼠標選擇)→輸入內容(鍵盤輸入)→保存關閉(鼠標點擊)。不需要再做過多說明,一切都已經(jīng)很清楚了。我們不僅多做了很多鼠標和鍵盤的操作,而且還多次在鼠標和鍵盤之間進行切換。和Google日歷相比,操作復雜了很多。簡單這一原則會節(jié)省用戶的時間,而時間是最寶貴的,這也是我把“簡單”放在第一位的原因所在。原則之二:美觀對于任何一個應用的界面來說,美觀都是非常重要的。應用的界面就像是人的臉,看上去讓人覺得舒服,然后才會有更多的人喜歡它,否則即便功能再強大,使用起來也會讓人覺得不舒服。然而,美觀并不意味著我們要使用很多的圖片、很多種顏色。使用圖片會降低頁面載入的效率,而使用過多顏色,不僅不會讓人覺得美觀,反而會覺得亂七八糟。組成頁面的元素可以主要可分為三類:文字、圖片和控件。所以,想要達到美觀的效果,我們同樣需要基于這三類元素來思考。在此我想借鑒一下《寫給大家看的設計書》一書中所提到的幾點排版原則,那就是:重復——同樣作用的元素的風格、顏色統(tǒng)一對比——不同作用的元素,要有鮮明的對比,可以使用字體、顏色等等方面來達到對比的效果。對齊——靈活使用左對齊、右對齊、居中對齊等對齊方式,讓元素的排列顯得整齊、規(guī)矩。親密性——有關聯(lián)的元素要盡可能“親密”地排列,而無關聯(lián)的元素之間要有足夠的“距離”來產生美。還是用例子來說明,首先我們來看圖4中的界面:這個界面中有不少問題,讓我們采用上面的四點原則來檢查一下。重復:這一點界面上體現(xiàn)的還不錯,各種文字和界面的風格還是很統(tǒng)一的。對比:這里的問題在于上面的標題部分和下面的內容部分之間的對比不夠強烈,僅僅是對字體加粗,不能夠給人一種很醒目的感覺。對齊:內容部分的文字標簽和控件都采用了左對齊,但第二行的文字過長,看起來比較亂;并且下面的兩個按鈕與內容框之間沒有對齊(應該是右對齊)親密性:文字標簽和控件本來應該是比較“親密”的關系,但是卻因為都采用左對齊的方式,離得比較遠。針對以上問題,我們可以對上面的界面做出一些調整,如圖5所示:圖5調整后的界面首先我們把標題的字體調大,加強了與內容文字的對比,顯得更加醒目;然后把標簽文字設為右對齊,與相應的控件的親密性大大加強;最后調整最下面的按鈕,使其與內容框右側對齊,達到了美觀的目的。由此看來,只要我們理解并使用好這九個字,就能夠設計出比較美觀的界面了。原則之三:規(guī)范作為程序員,大家都知道在項目開始之前要制定比較嚴格的代碼規(guī)范,這樣才能夠讓代碼的可維護性更好。但是,這些規(guī)范往往都是針對的都是高級語言,像Java、C、C++、VB等等。其實,WebApp的前端頁面同樣也是由代碼組成的,只不過是HTML樣式的代碼,對于這些代碼,也同樣需要規(guī)范。并且,和編程用的高級語言相比,這里的代碼還有特殊需要注意的問題:l
ID屬性的設置——在編程的時候,我們都會給變量命名,而在前端界面的代碼中,各個元素也需要有自己的名字,那就是ID屬性。經(jīng)常會看到界面中的元素只有name屬性,而沒有id屬性;或者id屬性的名稱就是button1、button2之類無意義的名稱,這樣的情況都應該得到規(guī)范。l
瀏覽器的兼容性——比方說,在前端界面的代碼中,每個元素的屬性值可以放在引號之中,也可以把引號省略,有些瀏覽器具備比較好的糾錯能力,也能夠正確地顯示界面。但是為了達到瀏覽器的兼容性,還是建議把所有屬性值都放在引號之中,那樣可以避免不必要的麻煩。想要讓應用能夠在更多的瀏覽器中使用,就一定要有規(guī)范來限制,否則很可能就需要限制應用只能在特定的瀏覽器中使用了。l
CSS的使用——對于元素的樣式,要盡量使用CSS來控制,而不能隨心
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年度電子產品全國分銷委托代銷售協(xié)議3篇
- 要印的資料“我是一棵偉岸的樹”
- 有趣的美術課程設計
- 號召全民抗疫的倡議書范文(5篇)
- 2024原礦粗選生產線生產原料及輔料采購合同3篇
- 油畫直播教學課程設計
- 2024年度債轉股合同復雜多條款與債務重組后的資產流動性管理3篇
- 支援核酸采樣的感言(6篇)
- 招生方案模板集錦六篇
- 深圳花卉油畫課程設計
- 共同出資成立新公司專項方案
- 露天煤礦隱蔽致災地質因素普查報告編寫細則
- 主動脈夾層介入手術的護理
- 高素質農民培育培訓
- 機電安裝工程施工質量標準及驗收規(guī)范
- 過程控制系統(tǒng)及儀表 王再英等 課后答案(全)
- 《綠色化學化工技術》課件
- 民法典中的勞動法與勞動糾紛解決的法律適用
- 廣東省廣州市黃埔區(qū)2023-2024學年八年級上學期期末生物試卷+
- 四川省達州市2023-2024學年八年級上學期期末歷史試題(含答案)
- 國開電大??啤侗O(jiān)督學》期末紙質考試總題庫2024版
評論
0/150
提交評論