小屏幕移動設(shè)備網(wǎng)頁設(shè)計注意事項

0 評論 6675 瀏覽 0 收藏 6 分鐘

在過去,小屏幕移動設(shè)備網(wǎng)頁通常也被稱之為WAP頁,或WAP站。
原因是這類網(wǎng)頁起源于一個叫WAP的無線協(xié)議。
WAP能夠運行于各種無線網(wǎng)絡(luò)之上,如GSM、GPRS、CDMA等。WML是無線注標(biāo)語言(Wireless-Makeup-language)的英文縮寫。支持WAP技術(shù)的手機(jī)能瀏覽由WML描述的Internet內(nèi)容。

而如今的小屏幕移動設(shè)備,比如手機(jī),都已經(jīng)具備訪問WWW的能力。其內(nèi)置的瀏覽器,或是第三方瀏覽器大多是WebKit引擎。
也因此沒人再用WML組織WAP站點了,一般都是用HTML+CSS的方式。


在設(shè)計小屏幕移動設(shè)備網(wǎng)頁時,你可能先得了解這么一些前提:

  • 手機(jī)屏幕分辨率亂得一塌糊涂,什么分辨率都有!
  • 我們的手機(jī)上網(wǎng)費用賊貴賊貴!
  • UC瀏覽器擁有了賊大的市場占有率!

關(guān)于UC瀏覽器:

沒錯,不得不提它。誰叫它的市場占有率高呢。
對于UC瀏覽器而言,顯然是非常適合我國國情的,它給用戶最大限度地節(jié)約手機(jī)上網(wǎng)流量。(UC瀏覽器打的口號貌似也就是省流量這一招了)。
基于移動應(yīng)用,以及文本的可讀性,UC瀏覽器也體現(xiàn)了大字體、大行距等特性。
UC瀏覽器相對于其他手機(jī)瀏覽器而言,對HTML標(biāo)簽和CSS屬性存在有特殊的、自定義的處理方式。
而所做的這些特殊處理,按目前來看,應(yīng)該將會繼續(xù)保留較長一段時間,直到手機(jī)上網(wǎng)費用得到較大幅度的下降,令消費者更大膽地移動上網(wǎng)之時。

在實際開發(fā)中,我們發(fā)現(xiàn)了UC瀏覽器對CSS存在一些“特殊照顧”:

  • 不支持font-family屬性,也就是說,在UC瀏覽器你只能看到一種字體;
  • 不支持font-szie屬性,也就是說,在UC瀏覽器你只能看到一樣大小的字體;
  • 不支持width、height、padding、margin、line-height屬性,也就是說,在UC瀏覽器只能通過p、br等HTML標(biāo)簽來換行以達(dá)到字符上下間隔;
  • 不支持固定像素的寬度,100%顯示頁面,也就是說,在UC瀏覽器始終將看到的是“滿屏的”;
  • 不支持浮動、層疊布局,float和position屬性無效,也就是說,在UC瀏覽器你只能看到“左對齊”。
  • 支持background-color,但不支持background-image,也就是說不支持CSS背景圖顯示,在UC瀏覽器你只能看到背景色。

不過,個人仍然認(rèn)為,如今建設(shè)小屏幕移動設(shè)備網(wǎng)頁,完全可依據(jù)WebKit引擎的瀏覽器作為標(biāo)準(zhǔn)進(jìn)行界面開發(fā)。
換句話說,我們設(shè)計支持UC瀏覽器的網(wǎng)頁,而不是設(shè)計以UC瀏覽器為標(biāo)準(zhǔn)的網(wǎng)頁。
這樣做還有個好處,可以在大部分的手機(jī)瀏覽器上保證相對一致的樣式。
而針對UC這種連float等標(biāo)準(zhǔn)CSS屬性也不支持的瀏覽器,別過于糾結(jié)它!
但為了保證界面中各元素在UC瀏覽器仍具有良好的閱讀順序,嚴(yán)重建議HTML編碼人員留意各個HTML標(biāo)簽的先后順序。
因為只有在支持float、position屬性的瀏覽器下,頁面各個容器才可以任意浮動或?qū)盈B的。否則,瀏覽器將按HTML標(biāo)簽的先后順序顯示。
另外一些小屏幕移動設(shè)備網(wǎng)頁設(shè)計的相關(guān)補(bǔ)充:

  • 網(wǎng)站頭(header)
    考慮到小屏幕移動設(shè)備的一些特性,設(shè)計網(wǎng)頁時,有些可以去掉網(wǎng)站頭(包括LOGO、全局導(dǎo)航什么的)。
    比如flick的查看大圖頁面就去掉了網(wǎng)站頭。

    這里我自創(chuàng)了一句時髦的設(shè)計原則:“針對于小屏幕移動設(shè)備的界面設(shè)計,在某些指定任務(wù)的界面,應(yīng)優(yōu)先于讓用戶關(guān)注當(dāng)前任務(wù),而不是應(yīng)用程序本身。” 這個原則是行得通的,同樣適用于設(shè)計移動設(shè)備應(yīng)用程序~
    打個比方說,如果你在設(shè)計小屏幕移動設(shè)備訪問的郵箱時,完全可以在寫信、郵件閱讀頁去掉網(wǎng)站頭~

  • 鏈接聚焦(hover)
    各個瀏覽器均自定義了鏈接的hover樣式,比如有的瀏覽器給鏈接聚焦時加了邊框,有的瀏覽器給鏈接聚焦時加個背景色之類。因此小屏幕移動設(shè)備網(wǎng)頁不需要在CSS中編寫hover樣式。
  • 鼠標(biāo)事件(mouseover)
    考慮到觸摸屏操作,用戶無法用手指進(jìn)行over的操作,因此應(yīng)禁止在應(yīng)用于移動設(shè)備訪問的網(wǎng)頁使用mouseover。

來源:http://uedc.163.com/2946.html

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!