WebApp是針對NativeApp而產(chǎn)生的,Webapp最直接明了的定義就是一個針對Iphone、Android優(yōu)化后的移動網(wǎng)站,它使用的技術(shù)無非就是HTML或HTML5、CSS3、JavaScript,服務(wù)端技術(shù)JAVA、PHP、ASP等。
今天,25學堂需要跟大家淺談WebAPP設(shè)計的五個注意點及如何去設(shè)計webAPP
1. 必須要適配所有的智能手機設(shè)備
移動設(shè)備的屏幕是各式各樣的,對設(shè)計影響較大的主要是屏幕分辨率、尺寸、屏幕方向這些因素?,F(xiàn)在的iOS設(shè)備有320×480,640×960,1136×640,1024×768,2048×1536這些分辨率,3.5寸、4寸、7.9寸、9.7寸這些尺寸等,未來還有更大的尺寸。
所以,需要解決Web app在不同屏幕下的界面適配問題。
最佳解決辦法有2個:
1、在寫前端頁面的時候,css 采用100%布局
2、采用html5技術(shù)來布局開發(fā)。
1.1 適配不同分辨率
通過響應(yīng)式網(wǎng)頁的設(shè)計方法提升頁面在不同分辨率下的兼容性:

由于手機屏幕尺寸下,一般來說只能一個模塊一個模塊地從上到下排列。此時設(shè)計者就需要考慮模塊擺放的優(yōu)先級了。一般來說,用戶重點關(guān)注的、最近更新、與用戶相關(guān)的信息應(yīng)該放在前面。
另外最好以主流分辨率480×800進行設(shè)計,對略高于和略低于該分辨率的屏幕可將界面元素進行縮放,對間距、邊距進行適當調(diào)整。
所以,在設(shè)定容器、圖片、文本框的寬度時最好避免使用px單位,使用%可使頁面在不同分辨率屏幕下保持布局和頁面結(jié)構(gòu)不發(fā)生改變。
1.2 平板電腦
使用CSS3的媒體查詢(media query)語句可獲得瀏覽器的高寬和設(shè)備的像素比,并可根據(jù)開發(fā)者的需要對不同的設(shè)備應(yīng)用不同的樣式表。所以開發(fā)者可以控制一個頁面在不同設(shè)備上的表現(xiàn)。
由于手機屏幕和平板電腦的屏幕尺寸和像素都相去甚遠,所以為了充分利用平板電腦的大屏優(yōu)勢,以獲得良好的用戶體驗,最好在兩種設(shè)備上使用不同的界面布局。相信iOS用戶都有這樣的感覺:有的App只適配iPhone,在iPad上運行則無法布滿屏幕,只能點“2X”按鈕顯示一個粗糙的界面。還有一種App可同時兼容iPhone和iPad,在手機和平板的屏幕上都能完美顯示,用戶也無需單獨下載兩個版本。很明顯,后者使用起來更方便,更美觀。
Mobile Web App使用媒體查詢功能即可實現(xiàn)這種功能。那么在平板電腦上,有哪些需要注意的設(shè)計點呢?
因為平板電腦多在橫屏下使用,所以使用分欄視圖可在一個界面內(nèi)顯示兩個層級的內(nèi)容,方便用戶快速切換item。

首頁多以宮格視圖、Tab為主,微博、QQ這種以內(nèi)容為主的界面將分欄視圖作為默認首頁也是可以的。在手機上最常使用的list在平板上就不是很常用了,整個屏幕顯示list,不僅浪費空間,也沒有分欄視圖的操作高效。
需要注意的是,IE9以下的瀏覽器不支持media query.
1.3 橫豎屏切換
由于目前還不能在webkit內(nèi)核里禁止設(shè)備方向的旋轉(zhuǎn),所以如果用戶的設(shè)備開啟了屏幕方向根據(jù)重力自動旋轉(zhuǎn),那么運行于瀏覽器的Web App也是會跟著旋轉(zhuǎn)的。
如果能夠捕捉到設(shè)備的方向,可以對橫豎屏分別進行布局設(shè)計,但最好能保證界面風格和樣式不會有大的變化。

反例就是iPhone的音樂App,在豎屏下會顯示歌曲list,但是切換到橫屏下顯示專輯封面。兩種界面風格跳動太大會導(dǎo)致部分用戶不適應(yīng),以為是兩個不同的頁面。計算器App也只有在橫屏下才顯示科學計算模式,豎屏下用戶根本無法切換到該模式,連引導(dǎo)也沒有。

宮格視圖是橫豎屏切換最平滑的布局,看看iOS系統(tǒng)的主屏幕就知道了。一個個應(yīng)用程序圖標在橫豎屏切換時,幾乎只是圖標旋轉(zhuǎn)了一下方向。
還有一點就是切換到橫屏時,可自動進入全屏模式以顯示更多的內(nèi)容。否則標題欄和底部欄將會占去很多空間
2.WebAPP的交互動效
受瀏覽器性能影響,很多Native App能實現(xiàn)的華麗動畫在Web App項目里的表現(xiàn)并不是很好。所以應(yīng)該果斷去掉非必要的動效以保證Web App能夠運行流暢。
因為很多動效會對用戶起到很好的引導(dǎo)作用,如果沒有這些動畫,可能會導(dǎo)致用戶對界面邏輯關(guān)系的理解產(chǎn)生混亂。這就對動效的設(shè)計提出了較高的要求。
總結(jié)了一下Web App的幾點動效設(shè)計原則:
●盡量不使用不必要的動效。
●優(yōu)先使用簡單的動畫。如平移、縮放。盡量避免使用3D動畫。
●避免刷新頁面。因為整個頁面白屏,瀏覽器走進度條的體驗會給用戶瀏覽網(wǎng)頁的感覺,而不是在使用app
●框架元素優(yōu)先顯示。只在內(nèi)容加載區(qū)域顯示loading動畫
●避免跳變。在不影響性能的情況下,可盡量用縮放和平移動畫,保證用戶視覺焦點的延續(xù)性和理解的延續(xù)性。
●同類界面/對象,同層級界面/對象的動效保持一致??蓭椭脩衾斫猱a(chǎn)品架構(gòu)和導(dǎo)航邏輯。
●高層級界面的動效對應(yīng)高級物理位置。如果左右平移的動畫是用來切換上下一層級,那么首頁應(yīng)該是在最左邊,如iOS。如果前后切換的動畫是用來切換上下一層及,那么首頁應(yīng)該是在最上面,如Windows Phone。
3.WebAPP的內(nèi)容布局和APP的風格要保持一致
講導(dǎo)航和信息內(nèi)容布局的文章眾多,Mobile Web App既然要實現(xiàn)Native App的操作體驗,照傳統(tǒng)的移動客戶端的設(shè)計模式去設(shè)計即可。只需要記住你設(shè)計的Web App需要運行在iOS, Android, Windows Phone等多個平臺,多種設(shè)備上即可。
由于iOS相比其他平臺,沒有back按鍵,所以在iOS上運行需要保證界面內(nèi)的導(dǎo)航能夠?qū)崿F(xiàn)閉環(huán)。所以Android上有些操作可以通過Menu鍵喚出,但是在iOS上就需要直接暴露出來。
下圖左側(cè)是Zaker的Android版,右側(cè)是iPhone版。Android版的菜單欄需要點擊Menu鍵才出現(xiàn)。
4.善于使用Native App的UI相關(guān)控件
使用Native App的UI控件,可以讓Mobile Web App更有Native App的操作體驗。常見的如Badge,Back button,Bubble,Picker,Indicator,Title bar,Dialog,Toast,Loading,Drap down to refresh,Notification等。下圖分別是Facebook的Native App和Web App,由于后者使用了客戶端常見的一些UI控件,所以用戶很難從視覺上識別出后者是Web App.

避免使用傳統(tǒng)的Web UI控件,如面包屑、文字鏈:

另外,在控件尺寸上也應(yīng)該像Native App那樣提供盡量大點擊區(qū)域的控件。參照經(jīng)驗和各平臺的官方人機界面指南,可以知道適合用戶手指點擊的尺寸應(yīng)該在7-9mm之間,不能小于7mm。相鄰點擊控件的行距不應(yīng)小于2mm。
5. WebAPP后期需要針對瀏覽器進行優(yōu)化
為了兼顧瀏覽器的性能和交互,需要注意以下幾點:
●頁面使用盡量少的DOM元素;
●簡化動效;
●避免與瀏覽器的交互沖突,如左右滑動,如瀏覽器的tab bar, action bar, 以及瀏覽器全屏后的虛擬按鈕;
●考慮保存用戶的哪些數(shù)據(jù):設(shè)置、個人數(shù)據(jù)、閱讀錨點、跳出頁面等。
●規(guī)則圖形用Canvas繪制,避免向服務(wù)器請求img.
●注意離線數(shù)據(jù)存儲,通過manifest定義需要被緩存的文件,以便用戶離線時使用。
●減少數(shù)據(jù)請求頻率。
所以,當我們在設(shè)計webAPP的時候,不管采用哪種方法,都必須要注意這5大方面。才能設(shè)計出來優(yōu)秀的webAPP。再者要多練習多閱讀相關(guān)webAPP知識點。
全站高品質(zhì)素材免費下載!