首頁 > web前端 > H5教程 > 行動端網站設計最佳化要點

行動端網站設計最佳化要點

一个新手
發布: 2017-09-20 09:12:57
原創
1636 人瀏覽過

行動端雖然限於手機效能、網路等限制因素,無法達到如同PC的優秀效果,但行動端也有其獨有的優勢,例如可以透過手機特有的重力感應功能做視差滾動,「加速度」感應器實現「搖一搖」等優雅有趣的人機互動。

影響行動裝置網站首頁的視覺元素

  • 網頁載入時間

  • 網站格式[設計與回應]

  • 可見搜尋功能

  • 點擊呼叫

  • 可見登入

  • #社群媒體功能

  • App展示

#網頁載入時間
主要影響因素是靜態資源檔案、圖片等


網站格式[設計與回應]


可見搜尋功能


#點選呼叫


#可見登入


#社群媒體功能



App展示


行動版首頁設計規格


行動裝置專題頁設計規格


設定安全區

無論行動裝置或PC端,都應該確定一個安全區域作為使用者的視觸區域,重要資訊都應該放置在安全區域內。行動裝置安全區設定:移動螢幕寬度兩側適當留白,首屏高度做反應適配。


控制圖片大小

專題的頭圖往往給使用者很強的視覺衝擊,但由於行動裝置網路限制,載入一張圖片的等待成本往往比PC上大得多,因此頭圖的延展區域適合使用純色、漸層可平舖的素材來減少網路流量,提高載入速度。

字體
專題頁中,主要字號應控制在3個以內,字體盡量使用行動端系統預設字體渲染,避免隨意使用字體字號,並且保證字號是整數。

一般行動端字號是PC端的兩倍。


控制互動區域

行動端往往為指控面板,手指在螢幕熱區最小感應是44px,在行動端互動區域設計時,應注意此問題。

###減少跳轉 ###限於手機網路環境,頁面的跳轉會對使用者產生更大的心理不安,因此應盡可能的在一個頁面中合理展示關鍵訊息。若跳轉必要,可使用展開、浮出、下拉等方式減少使用者的心理效力。 ###

以上是行動端網站設計最佳化要點的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板