行動裝置網頁 – 自適應網頁 25 個設計重點 (Google 行動網站)
行動裝置網頁 25 個設計重點的文章中，鵠崙設計在超過百個網站作品中擷取手機版網站設計範例，結合 Google行動網站認證測驗中 行動版網站設計要點，以模擬手機網站的方式呈現給各位觀看，希望能讓想要架設網站的站長們可以對行動版網頁設計方式有更清楚直觀的了解。
25 個設計原則並非筆者憑空想像，其來源是參考 Google 開發人員網站 中對於行動網站的研究說明文件：What Makes a Good Mobile Site?與鵠崙設計在行動版網頁設計的實際經驗相互融合，所提供的案例都是真正在線上運作的網站。
想了解行動網站如何設計，但看了很多說明文件跟教學文章，還是不懂手機版網頁實際呈現的效果？今天這篇文章，相信一定能帶給你對行動裝置網頁設計方面的實質幫助。
延伸閱讀：
什麼是 RWD 響應式設計？為何網站需要 RWD 功能？
RWD 響應式設計 在網頁設計與網站架設的優勢
一、行動裝置網頁 版面設計要點
1. 吸引注意的呼叫行動按鈕（Call To Action）
在產品與服務的網站頁面中加入呼叫行動按鈕，不要設計的太小，放置於容易被注意到的位置。
客戶網站頁面：上尊企業-產品介紹
2. 網頁主選單結構簡單化
在行動版網頁上瀏覽不同於在電腦上使用滑鼠操作，點擊螢幕的操作方式具有一定的限制，因此在手機版網站主選單中注意不要設計過於複雜的結構項目與過多字數的標題文字。
客戶網站頁面：上尊企業-產品列表
3. 網頁標誌 (Logo) 快速返回首頁
Logo 圖示能代表網站品牌識別，同時也設計首頁連結可以讓有限的行動網站版面空間獲得充分運用。
客戶網站頁面：寶濟工業-首頁
4. 避免全版面廣告
在行動裝置網站中使用全版面廣告容易造成使用者操作中斷、瀏覽動線受阻、網站迷路等不好的體驗，建議如下方使用網頁元素間空隙呈現廣告區域為較佳方式。
客戶網站頁面：蘭姆酒吐司-首頁
二、站內搜尋網頁設計要點
5. 在網頁顯眼處引導用戶使用站內搜尋功能
行動上網的用戶通常會想要快速找到想要瀏覽的產品或服務，而非耗費時間在尋找上，將站內搜尋功能放置於明顯處將有助於使用者網站體驗。
客戶網站頁面：百城機械-首頁
6. 讓站內搜尋結果顯示相關性
使用簡單的關鍵字詞讓使用者能夠在站內搜尋結果中更精準找到想要尋找的產品或服務。
客戶網站頁面：鵠學苑-首頁
7. 為產品及服務項提供篩選功能
使用篩選功能為使用者節省廣泛尋找產品的時間，更有效率的到達目的頁面，並獲取相似商品的比較資訊。
客戶網站頁面：溢勝纖維-產品介紹
8. 完善的網頁內容分類結構
結構式分類項目可將使用者劃分為不同目標群體，有助於網站成效分析外，更能提升頁面轉換率。
客戶網站頁面：溢勝纖維-按布種分類
三、電子商務功能網頁設計要點
9. 讓使用者瀏覽網頁內容後再提供資料填寫表單
行動版網頁版面已相當受限，瀏覽不易，在使用者尚未了解相關資訊前不斷要求填寫資表單，將消耗使用者耐心，一定機率提升網頁跳出率。
客戶網站頁面：千富企業-電子型錄
10. 讓訪客未註冊也能進行網頁購物
行動裝置網頁在輸入資訊時的操作方式較不便利，跳脫必須註冊才能購物或詢價的限制，能提供使用者更流暢的購物程序。
客戶網站頁面：群羊針織-購物流程（須加入商品至購物車）
11. 預先填入顧客資料簡化網頁購物程序
加快註冊會員購物流程時間將提升網路行銷品牌競爭力。
客戶網站頁面：群羊針織-購物流程（須註冊會員並加入商品至購物車）
12. 聯絡方式點按後能直接跳轉撥號畫面
不需切換網頁與撥號畫面，一鍵點擊即可聯絡客服，即時服務能提升使用者網站停留意願。
網站頁面：鵠崙設計-網頁設計常見問題
13. 不同大小的畫面中網頁元素比例都能正常顯示
以響應式設計技術建構手機版網頁，在不同大小的顯示裝置上都能呈現一樣的版型樣式，讓使用者能輕鬆完成裝置轉換執行閱讀及操作網站內容。
客戶網站頁面：寶濟工業-內孔刀具介紹頁面
四、行動裝置網頁表單設計要點
14. 輸入數字時提供行動裝置數字鍵盤
在行動裝置上輸入相關資訊對使用者而言相當費時，提供數字鍵盤能讓表單內容完成更快速，減少誤點數字狀況。
網站頁面：鵠崙設計-聯絡我們
15. 更便捷的行動網頁資訊選擇方式
行動版網頁表單項目中設計下拉式選單配合核取方塊，為使用者提供便捷完成表單填寫的操作模式。
客戶網站頁面：千富企業-聯絡我們
16. 提供網頁月曆功能便於選取
不需要自行輸入年月日，採用點選日期的操作方式能有效提升手機版網頁易用性。
網站頁面：鵠學苑-聯絡我們
17. 網頁表單設計填寫說明與資料驗證
詳細描述行動裝置網頁表單欄位資料提示與資訊正確度，輔助使用者更容易完成表單送出。
客戶網站頁面：群羊針織-商店結帳流程
18. 網頁表單欄位設計簡潔易懂
盡量簡化欄位數量，設計適合行動裝置閱讀文字的大小與欄位點選間距。
客戶網站頁面：寶濟工業-聯絡我們
五、行動裝置網頁版面外觀配置與實用性設計要點
19. 網站中每一網頁都設計成適合行動裝置瀏覽
必須考慮的是當使用者在不同行動網頁中跳轉時所看到的畫面內容是否具有一致性，並且轉換裝置進入網頁後是否會造成使用者對瀏覽動線有所困惑。
20. 產品文字說明與圖片應合理配置
運用去背圖片與合理文字大小及版面配置間距，讓產品具有更好的可讀性，增加使用者閱讀意願，
客戶網站頁面：百城機械-食品機械
21. 在產品說明網頁中顯示該品項細節照片
行動版網頁中圖片比起文字敘述更加重要，提供高解析度產品特寫照片能更有效吸引訪客目光。
客戶網站頁面：寶濟工業-產品單頁介紹（ 10度前掃刀 ）
22. 注意行動網站在橫式與直式的呈現畫面
必要時給予使用者提醒以橫式或直式瀏覽網頁可以獲得最佳體驗。
客戶網站頁面：千富企業-服務項目
23. 在行動裝置瀏覽器中同一視窗或分頁操作網站
在行動裝置網頁操作時如果不斷另開分頁，容易讓訪客因分頁過多找不到原本頁面，並且需要不斷切換分頁，造成時間上不必要的浪費。
客戶網站頁面：鵠學苑-首頁（需以行動裝置瀏覽器開啟）
24. 在網頁上顯示電腦版網頁與行動版網頁的切換選項
建議使用 RWD 響應式設計處理行動裝置網頁顯示問題，不需要建立兩個不同網址的大小網站，如果沒有使用標準連結元素( Canonical link element ) 做處理，容易出現下圖中的狀況，電腦開啟手機版網站及手機開啟電腦版網站的畫面，會有很大的網頁版型誤差，使用 RWD 響應式設計將一次解決網頁多裝置螢幕顯示問題。
延伸閱讀：
25. 行動網頁設計放置商家地圖(Google Map)
可縮放並查看企業及商家周邊地區的 Google Map功能對行動版網站有很大的幫助，讓使用者更快速找到可購買產品或提供服務的商店位置。另外也可以在 Google 商家 中設定企業資料，讓使用者更容易找到銷售據點。
客戶網站頁面：溢勝纖維-聯絡我們
結語
行動裝置網頁 25 設計原則是需要逐步修改，並非一兩天就能夠完成，為達到最好效率，建議可以與鵠崙設計聯絡，將有專人為您做行動網頁健檢與諮詢，並提供最佳解決方案做為參考。
鵠崙設計內文客戶案例網頁設計作品：
RELATED
相關文章
-
網頁新知
2019.01.11
網站建置必看重點 – 10 個網站製作前必須了解的知識與概念！
-
網頁新知
2019.01.28
Google reCaptcha v3 發布，以後不用再點選 我不是機器人？
-
網頁新知
2022.05.23
還在SMART原則？來認識SMARTER目標，七步驟達成KPI！
-
網頁新知
2023.05.23
Variant是什麼？Figma新手必須知道！輕鬆打造系統化的元件庫
想了解更多資訊內容嗎？歡迎立即聯繫鵠崙設計！