
咱們先問(wèn)自己幾個(gè)扎心的問(wèn)題:現在打開(kāi)自己公司的網(wǎng)站,用手機刷刷看:
頁(yè)面是不是得手動(dòng)放大縮小才能看清字?
圖片是不是半天加載不出來(lái),或者比例都亂了?
點(diǎn)個(gè)按鈕是不是感覺(jué)手指頭太粗,總誤觸旁邊?
滑動(dòng)起來(lái)是不是一頓一頓,感覺(jué)特別慢?
如果你的回答里有幾個(gè)“是”,那不好意思,你可能正在勸退一多半的用戶(hù)。因為現在大部分人都是用手機上網(wǎng)的,網(wǎng)站做不好手機端,就像開(kāi)店不打掃衛生,東西再好,顧客進(jìn)門(mén)就想走。
簡(jiǎn)單說(shuō),就是讓你在電腦上做的網(wǎng)站,能在各種大小、各種型號的手機屏幕上,都看著(zhù)舒服、用著(zhù)順手。
這不是簡(jiǎn)單的把電腦版網(wǎng)站按比例縮小就完事了。手機屏幕窄、操作靠手指、網(wǎng)絡(luò )環(huán)境多變,這都需要專(zhuān)門(mén)的設計和調整。
第一,速度是第一生命線(xiàn)
沒(méi)人愿意等。在手機上,耐心更少。
壓縮圖片:別把電腦上的大圖直接扔到手機站上,用專(zhuān)門(mén)的工具壓縮,清晰度夠用就行。
簡(jiǎn)化代碼:清理沒(méi)用的代碼,能加快加載速度。
考慮“懶加載”:先加載用戶(hù)能看到的內容,下面的等用戶(hù)滑下去再加載,別一次性全堆上來(lái)。
挑個(gè)靠譜的服務(wù)商:服務(wù)器響應快不快,對速度影響巨大。
第二,布局要“手指友好”
手指不是鼠標,操作精度低。
按鈕做大點(diǎn):別設計得太小太密,免得用戶(hù)點(diǎn)不中,著(zhù)急。
留夠間距:內容之間、段落之間,留出足夠的空白,看著(zhù)不擠,點(diǎn)起來(lái)也不容易出錯。
簡(jiǎn)化導航:電腦上那一排復雜的菜單,在手機上最好收起來(lái),變成清晰明了的“漢堡包”菜單(三條橫線(xiàn)那種圖標)。
字體用對:字號不能太小,默認起碼要保證在手機上不用放大就能輕松閱讀。
第三,內容要“直給”
手機屏幕小,用戶(hù)注意力短。
突出重點(diǎn):把用戶(hù)最關(guān)心的信息(比如產(chǎn)品核心賣(mài)點(diǎn)、聯(lián)系方式、行動(dòng)按鈕)放在最顯眼的位置。
精簡(jiǎn)文字:段落要短,多用小標題、列表,讓人一眼掃過(guò)去就能抓住重點(diǎn)。
優(yōu)化表單:如果需要用戶(hù)填表,能少一欄是一欄。盡量用下拉選擇代替手動(dòng)輸入,自動(dòng)調起手機的數字鍵盤(pán)或郵箱鍵盤(pán)。
第四,交互要符合手機習慣
別讓用戶(hù)覺(jué)得別扭。
可以左右滑的圖(輪播圖),要容易操作,指示清晰。
能用滑動(dòng)解決的問(wèn)題,就別非讓用戶(hù)去點(diǎn)一個(gè)很小的按鈕。
別用Flash之類(lèi)的東西,很多手機根本不支持。
第五,別忘記測試!
這是最實(shí)在的一步。
別只用最新款的手機測。找幾臺不同牌子、不同尺寸、不同系統的舊手機,真機上去劃一劃、點(diǎn)一點(diǎn)。
在不同的網(wǎng)絡(luò )環(huán)境下(比如用4G、用稍慢的WiFi)都試試,看看加載速度怎么樣。
把手機橫過(guò)來(lái)(橫屏)看看,布局會(huì )不會(huì )亂掉。
它考驗的是,你是不是真的在乎用戶(hù)在手機上的感受。一個(gè)加載飛快、瀏覽順暢、操作輕松的手機網(wǎng)站,傳遞出的信息是:“我尊重你的時(shí)間和體驗,我的產(chǎn)品/服務(wù)也值得你信賴(lài)?!?/p>
現在就去用手機打開(kāi)你自己的網(wǎng)站,像個(gè)挑剔的用戶(hù)一樣用上五分鐘。每一個(gè)讓你皺眉、讓你等待、讓你找不到地方的瞬間,都是一個(gè)需要立刻記下來(lái)的優(yōu)化點(diǎn)。
這件事沒(méi)有“做完”的時(shí)候,因為技術(shù)和用戶(hù)習慣總在變。但把它當成一個(gè)持續改進(jìn)的過(guò)程,你的網(wǎng)站才能真正抓住移動(dòng)時(shí)代里,那些最重要的流量和人心。