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

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

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

• 網頁載入時間

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

• 可見搜尋功能

• 點擊呼叫

• 可見登入

• #社群媒體功能

• App展示

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

---

網站格式[設計與回應]

---

可見搜尋功能

---

#點選呼叫

---

#可見登入

---

#社群媒體功能

---

---

App展示

---

行動版首頁設計規格

行動裝置專題頁設計規格

---

設定安全區

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

---

控制圖片大小

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

字體

---

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

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

---

控制互動區域

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

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

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