|
3. Opera mini瀏覽器
這哥們是最PC化的手機(jī)瀏覽器。內(nèi)置偽鼠標(biāo)一枚，左右鍵、上下鍵均為鼠標(biāo)橫向、縱向移動(dòng)，單次按鍵大概位移10像素，長(zhǎng)按加速。
了解瀏覽器的焦點(diǎn)移動(dòng)規(guī)則后，一方面有利于我們對(duì)某個(gè)控件信息進(jìn)行優(yōu)化組織，另一方面對(duì)于多個(gè)設(shè)計(jì)方案進(jìn)行取舍的時(shí)候也有莫大的幫助。當(dāng)我們充分考慮焦點(diǎn)移動(dòng)路徑、用戶操作頻次、某信息塊權(quán)重等因素后，往往能迅速的找到最適合的設(shè)計(jì)方案。
小提示：QQ瀏覽器和UC瀏覽器默認(rèn)會(huì)給所有的圖片賦予焦點(diǎn)，也就是說哪怕頁面上某張圖片沒有鏈接，但用戶操作過程中焦點(diǎn)也會(huì)路過這張圖片。
Ⅱ、操作鍵
鍵盤機(jī)的瀏覽器（自帶、第三方）都有左右功能鍵。左功能鍵一般為菜單鍵，右功能鍵一般為返回、退出鍵。用戶在進(jìn)行“返回”操作時(shí)，基本都會(huì)通過右功能鍵完成。觸屏機(jī)雖然沒有物理功能鍵，但絕大部分的瀏覽器都在屏幕內(nèi)虛擬了一排功能鍵。并且UCweb、QQ、Opera等第三方主流瀏覽器均提供緩存功能，頁面在返回的時(shí)候均為秒讀。因此，我們不需要頻繁的為用戶提供“返回上一頁”的鏈接。后續(xù)的系列文章中，將有專門的章節(jié)對(duì)手機(jī)導(dǎo)航系統(tǒng)進(jìn)行探討。同時(shí)，某些瀏覽器也提供重定位至頁頂、至頁尾以及快速翻屏的操作，當(dāng)我們?cè)谔幚沓L(zhǎng)頁面時(shí)，對(duì)于“Top”這樣的回頂部錨點(diǎn)的處理也需要慎重。
Ⅲ、HTML & CSS支持度
各大廠商大多都有一套自制內(nèi)核的瀏覽器，甚至同一個(gè)平臺(tái)下的不同系列手機(jī)瀏覽器的解析效果也五彩繽紛，再算上市面上的多款不同內(nèi)核的第三方瀏覽器，這真的讓人無比頭大！因?yàn)楣镜募嫒菪匝芯抠Y料尚未開源，所以這里只能列出一些高危的風(fēng)險(xiǎn)點(diǎn)。有興趣的朋友可以自己著手研究下，有條件的公司也建議系統(tǒng)的做一次深入測(cè)試。這些資料對(duì)于WAP站點(diǎn)的設(shè)計(jì)有著決定性的影響！
- font屬性：176px的屏寬下，12號(hào)字一行可以放14.5個(gè)漢字，但實(shí)際上部分瀏覽器會(huì)將字體放大至14號(hào)，所以安全字?jǐn)?shù)是12個(gè)漢字/行，并且大多不支持自定義字體；
- background屬性：背景色支持很好，但背景圖片支持度則要差很多，如果你需要用到背景圖片，最好設(shè)置一個(gè)類似的背景色做優(yōu)雅降級(jí)處理；
- float、position屬性：千萬別照搬Web的層疊布局理念，這是兩個(gè)高危屬性，老老實(shí)實(shí)搭積木吧；
- margin、padding屬性：這兩個(gè)也支持不好，所以不等高、寬的設(shè)計(jì)方案在實(shí)現(xiàn)過程中兼容性問題很大；
我們?cè)谔幚砑哟�、高亮、current狀態(tài)、鏈接顏色等設(shè)計(jì)元素時(shí)，需要充分考慮方案的兼容性。因此建議所有剛接觸WAP設(shè)計(jì)的同學(xué)，在動(dòng)手之前，先認(rèn)真的了解下手機(jī)瀏覽器對(duì)于HTML & CSS的限制，這能幫你在工作中快速的給出最合適的設(shè)計(jì)方案。
出處：Mobile Design China
責(zé)任編輯：bluehearts
上一頁 手機(jī)交互-Wap設(shè)計(jì)基礎(chǔ) [3] 下一頁 手機(jī)交互-Wap設(shè)計(jì)基礎(chǔ) [5]
|
第 1 頁 
第 4 頁 手機(jī)交互-Wap設(shè)計(jì)基礎(chǔ) [4]
