2018-4-16 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
隨著時(shí)代的更新，網(wǎng)民開(kāi)始逐漸適應(yīng)使用手機(jī)來(lái)進(jìn)行網(wǎng)上活動(dòng)，如圖
從圖中可以看出，移動(dòng)端的使用率已經(jīng)很接近PC端了，這就使得我們需要在做好PC端網(wǎng)站體驗(yàn)的同時(shí)，做好移動(dòng)端的體驗(yàn)，移動(dòng)端又分為移動(dòng)端網(wǎng)站和app，咱們這次主要就移動(dòng)端網(wǎng)站來(lái)說(shuō)一說(shuō)他的規(guī)則和玩法。
在咱們使用瀏覽器搜索咱們需要的信息的時(shí)候，用PC和移動(dòng)端的搜索結(jié)果呈現(xiàn)方式和效果都是不同的，因?yàn)槠聊环直媛实年P(guān)系，可能會(huì)造成圖片的變形及排版錯(cuò)誤，如下圖。
要做好移動(dòng)端網(wǎng)站的優(yōu)化有四部分要注意
一、站點(diǎn)速度
如果從輸入網(wǎng)址后，三秒鐘還沒(méi)有加載出你的網(wǎng)站，那你的網(wǎng)站就可以出局了，影響他的因素跟你使用的服務(wù)器質(zhì)量有關(guān)，你所在地區(qū)的網(wǎng)絡(luò)質(zhì)量，你的設(shè)備的質(zhì)量，還有你網(wǎng)站是否有代碼冗余，移動(dòng)端站跟pc的網(wǎng)站代碼需要調(diào)用的代碼不一樣，如果沒(méi)有做好，只會(huì)讓網(wǎng)站速度變慢，或者坑用戶(hù)的流量。
二、移動(dòng)適配
為了提升用戶(hù)體驗(yàn)，用戶(hù)使用電腦或者移動(dòng)端查看網(wǎng)站的展現(xiàn)是不同的，這就是前面說(shuō)的，不做移動(dòng)適配，會(huì)出現(xiàn)圖片排版變形的情況。
適配的方式有兩種：
一種是跳轉(zhuǎn)適配，案例是新浪主頁(yè)。用戶(hù)在輸入新浪的網(wǎng)址后會(huì)自動(dòng)辨識(shí)你的設(shè)備及分辨率，判斷是留在該頁(yè)面還是跳轉(zhuǎn)到移動(dòng)端網(wǎng)站，有的公司網(wǎng)站技術(shù)不高，把辨識(shí)功能的代碼放在后面，等用戶(hù)已經(jīng)下載好了PC網(wǎng)站才執(zhí)行這個(gè)跳轉(zhuǎn)，這就是坑用戶(hù)流量，這是非常不可取的。
二是自適應(yīng)，顧名思義，他會(huì)根據(jù)你瀏覽器的分辨率來(lái)調(diào)整你網(wǎng)站的樣式，案例是知乎。
這兩種方式，在內(nèi)容方面，跳轉(zhuǎn)適配需要制作兩個(gè)不同的網(wǎng)站，更新內(nèi)容時(shí)也要更新兩遍，而自適應(yīng)本身就是一個(gè)網(wǎng)站，更新只需一遍。在性能上，跳轉(zhuǎn)適配可輕松戰(zhàn)隊(duì)像屏幕優(yōu)化，而自適應(yīng)需要有周全的計(jì)劃才能達(dá)到最佳效果，數(shù)據(jù)膨脹是常見(jiàn)的問(wèn)題。
三、站內(nèi)站外優(yōu)化
1、建議使用html5+css3技術(shù)
2、URL使用簡(jiǎn)短易記的
3、站點(diǎn)名稱(chēng)中出現(xiàn)“手機(jī)版”，“觸平板”字樣
4、推薦使用自適應(yīng)的適配方式
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com