目前絕大多數(shù)手機(jī)都支持WAP 2.0。WAP 2.0的頁面設(shè)計(jì)具有更好的視覺效果,更接近網(wǎng)頁。不過由于手機(jī)千差萬別,手機(jī)瀏覽器的能力也各不相同,直接照搬網(wǎng)頁的設(shè)計(jì)與實(shí)現(xiàn),很可能讓你的WAP頁面出現(xiàn)問題。以下小貼士來自于我們的頁面設(shè)計(jì)與開發(fā)實(shí)踐。
1、當(dāng)你試圖使用背景圖時(shí),請同時(shí)搭配近似的背景色
手機(jī)上,有些瀏覽器是不支持使用背景圖片的。比如下圖,在S60v3操作系統(tǒng)的手機(jī)(如N76)上:
喜歡使用深色背景圖片和淺色文字的同學(xué)們請注意了,在不支持背景圖片的瀏覽器上,很可能由于“靠色”,而讓用戶無法分辨出這些文字。
如果你還是覺得不使用背景圖片心有不甘,那么請?jiān)谑褂帽尘皥D片時(shí)搭配一個(gè)近似的背景色吧。背景色是具備廣泛支持的,而且背景圖和背景色是可以同時(shí)設(shè)置的。這樣,即使用戶的瀏覽器不支持背景圖,也不會(huì)造成你的文本內(nèi)容無法分辨。
2、避免依賴于文本樣式(粗體、斜體、文字大小)的設(shè)計(jì),多用文字顏色
雖然綜合使用粗體、斜體和不同大小的文字可以起到突出重點(diǎn)內(nèi)容的作用,但是在手機(jī)上這樣做可能你的苦心會(huì)白費(fèi)的。 粗體、斜體和文字大小的展現(xiàn)效果在不同的手機(jī)瀏覽器上支持各不相同,如下圖:
如果你使用了這些樣式,有的手機(jī)甚至無法正確展現(xiàn),比如下圖的一款山寨機(jī):
如果你試圖通過文本樣式達(dá)到突出重點(diǎn)的作用,那么多多用顏色吧,顏色是具備最廣泛支持的。
3、內(nèi)容盡量少使用左對齊之外的方式
你使用過右對齊設(shè)置嗎?
事實(shí)上,很多瀏覽器(如一些版本的UCWEB和GO瀏覽器)是并不支持類似的右對齊的。在這些瀏覽器上,他們會(huì)跑到左邊。
4、減少復(fù)雜的布局
因此,請盡量避免使用這些CSS屬性:float、clear、position、top、left、right、bottom。如果使用,請盡量保證這不影響你的頁面內(nèi)容的正常展示。
5、避免鏈接顏色與文本顏色相同
6、為觸摸屏手機(jī)單獨(dú)做一個(gè)版本
電腦上的瀏覽器大部分都有鼠標(biāo),可以很方便地定位到一個(gè)細(xì)小的位置。
觸摸屏手機(jī)則不同,狹小的屏幕下,小號文字或者較短的鏈接,可能手指很容易產(chǎn)生誤點(diǎn)擊。請為觸摸屏手機(jī)單獨(dú)做一個(gè)版本。
觸摸屏版本,可以通過增大字號、擴(kuò)大點(diǎn)擊區(qū)域、設(shè)置明顯點(diǎn)擊標(biāo)識⋯⋯等手段來改善用戶體驗(yàn)。
7、避免使用過多的圖片
圖片可以帶來更好的視覺效果,但是在現(xiàn)在使用流量計(jì)費(fèi)的環(huán)境下,也會(huì)為用戶浪費(fèi)更多的流量,也會(huì)大大延長使用GPRS/EDGE上網(wǎng)的用戶打開頁面的速度。
因此,請盡量避免大量使用圖片。
8、減少PNG格式圖片和GIF動(dòng)畫的使用
有一些手機(jī),如某些山寨機(jī),是不支持PNG格式的圖片的。也有部分瀏覽器,如某些平臺(tái)上的UCWEB或Opera Mini,是看不到GIF動(dòng)畫的動(dòng)態(tài)效果的。
如果圖片對你很重要,請盡量不要使用PNG格式的圖片,并減少GIF動(dòng)畫的使用。
9、頁面小一些
手機(jī)是一種能力很有限的設(shè)備。過長的頁面,一方面使用并不方便(很多鍵盤手機(jī)用戶需要不斷按著向下按鈕來下翻),另一方面,很可能是打不開你的頁面的——比如Moto V3手機(jī),頁面大小超過10K,就無法打開了。為了讓更多用戶可以更好地瀏覽頁面,請減少頁面大小。