標籤:

移動端優化如何做好

隨著時代的更新,網民開始逐漸適應使用手機來進行網上活動,如圖

從圖中可以看出,移動端的使用率已經很接近PC端了,這就使得我們需要在做好PC端網站體驗的同時,做好移動端的體驗,移動端又分為移動端網站和app,咱們這次主要就移動端網站來說一說他的規則和玩法。

在咱們使用瀏覽器搜索咱們需要的信息的時候,用PC和移動端的搜索結果呈現方式和效果都是不同的,因為屏幕解析度的關係,可能會造成圖片的變形及排版錯誤,如下圖。

要做好移動端網站的優化有四部分要注意

一、站點速度

如果從輸入網址後,三秒鐘還沒有載入出你的網站,那你的網站就可以出局了,影響他的因素跟你使用的伺服器質量有關,你所在地區的網路質量,你的設備的質量,還有你網站是否有代碼冗餘,移動端站跟pc的網站代碼需要調用的代碼不一樣,如果沒有做好,只會讓網站速度變慢,或者坑用戶的流量。

二、移動適配

為了提升用戶體驗,用戶使用電腦或者移動端查看網站的展現是不同的,這就是前面說的,不做移動適配,會出現圖片排版變形的情況。

適配的方式有兩種:

一種是跳轉適配,案例是新浪主頁。用戶在輸入新浪的網址後會自動辨識你的設備及解析度,判斷是留在該頁面還是跳轉到移動端網站,有的公司網站技術不高,把辨識功能的代碼放在後面,等用戶已經下載好了PC網站才執行這個跳轉,這就是坑用戶流量,這是非常不可取的。

二是自適應,顧名思義,他會根據你瀏覽器的解析度來調整你網站的樣式,案例是知乎。

這兩種方式,在內容方面,跳轉適配需要製作兩個不同的網站,更新內容時也要更新兩遍,而自適應本身就是一個網站,更新只需一遍。在性能上,跳轉適配可輕鬆戰隊像屏幕優化,而自適應需要有周全的計劃才能達到最佳效果,數據膨脹是常見的問題。

三、站內站外優化

1、建議使用html5+css3技術

2、URL使用簡短易記的

3、站點名稱中出現「手機版」,「觸平板」字樣

4、推薦使用自適應的適配方式

閱讀全文


推薦閱讀:

讓你從新開始認識UI設計師
UI設計師不就是畫手機APP圖標的嗎?憑什麼我自學一年還學不會?
設計師看過來:怎樣讓你的UI作品集脫穎而出?
四月設計白瓷盤
如何建立用戶畫像(詳細步驟)

TAG:UI設計師 |