移動端網(wǎng)頁設計常見禁忌

核心原則：手機屏幕小、手指粗、網(wǎng)速不穩(wěn)定、用戶大多單手操作，所有禁忌基本都違背這幾點。

一、交互 & 按鈕（容易踩坑）

1. 按鈕 / 點擊區(qū)域太小禁忌：可點擊元素小于 44×44px，文字鏈接擠在一起。手指觸控精度遠不如鼠標，極易誤觸。
2. 按鈕間距過近相鄰按鈕緊貼，容易點錯；比如提交和取消挨在一起。
3. 懸停（hover）作為核心交互移動端沒有鼠標懸停！hover 效果在觸屏上很難觸發(fā)，不要把重要提示、下拉菜單只做 hover。
4. 彈窗強制關閉困難廣告彈窗、注冊彈窗關閉按鈕極小、放在角落，甚至沒有關閉按鈕。
5. 依賴長按、雙擊等復雜手勢普通用戶很難發(fā)現(xiàn)長按功能，重要操作不要只靠長按。

二、文字與排版

1. 字體太小正文小于 14px，用戶必須手動放大頁面，體驗極差。
2. 行高太擠、字間距緊湊手機長文本閱讀容易串行，行高建議 1.4~1.6。
3. 大段密集無分段的文字整面墻文字，不分段、無留白，移動端用戶會直接劃走。
4. 低對比度文字淺灰字 + 淺背景，強光下完全看不清（無障礙也不達標）。
5. 文字全部大寫全大寫英文閱讀費力，中文全大寫無必要，壓迫感強。

三、布局 & 適配

1. 直接照搬 PC 端頁面，不做響應式頁面橫向滾動、內(nèi)容被截斷，需要雙指縮放才能看。
2. 固定寬度布局寫死width:1200px，在小屏手機溢出。
3. 橫屏優(yōu)先設計移動端絕大多數(shù)用戶豎屏瀏覽，不要強制橫屏才能使用。
4. 元素堆砌，頁面沒有留白滿屏塞滿內(nèi)容，沒有邊距，視覺擁擠，找不到重點。
5. 使用多列表格，不做適配大表格直接放在移動端，列太多橫向溢出；不折疊、不滾動處理。

四、圖片、視頻與性能

1. 直接加載 PC 端大圖幾 MB 的原圖直接渲染，加載慢、耗流量，頁面卡頓。
2. 圖片沒有懶加載首屏外圖片一次性全部加載，弱網(wǎng)下白屏、加載很久。
3. 自動播放帶聲音的視頻突然出聲，非常打擾用戶；自動播放視頻盡量靜音。
4. 大量動畫、復雜特效過多 CSS 動畫、粒子、輪播特效，低配手機掉幀發(fā)熱。

五、表單輸入（轉化重災區(qū)）

1. 表單太長，一次性展示大量輸入項一屏一堆輸入框，用戶直接放棄填寫。
2. 輸入框類型寫錯手機號不用type="tel"、數(shù)字不用type="number"，彈出普通鍵盤，增加輸入成本。
3. 表單驗證只在提交后才提示填完一長串，點提交才報錯，用戶需要全部重填；建議實時校驗。
4. 輸入框太小，被虛擬鍵盤遮擋喚起鍵盤后，輸入框跑到可視區(qū)域外，用戶看不到自己輸入的內(nèi)容。

六、導航

1. 導航菜單藏得太深多層折疊菜單，用戶要點 3 次以上才能到達核心頁面。
2. 頂部導航內(nèi)容過多一行放很多導航文字，擠壓變形，文字縮小看不清。
3. 返回邏輯混亂返回按鈕消失、返回跳錯頁面，不能回到上一頁。

七、瀏覽器與基礎體驗

1. 禁止縮放頁面（錯誤設置 viewport）

   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
   

   不建議強制禁止縮放！視力不好的用戶無法放大閱讀。?推薦：user-scalable=yes
2. 不設置 viewport頁面默認按 PC 大屏渲染，文字極小，必須縮放。
3. 彈出新標簽頁（target="_blank"）濫用移動端切換標簽麻煩，非必要不要新開頁面。
4. 強制復制、禁止頁面滾動、禁止選擇文字增加用戶反感，也影響復制手機號、地址等場景。

八、其他體驗禁忌

1. 廣告占滿首屏打開頁面大半屏是廣告，核心內(nèi)容看不到，跳出率極高。
2. 重要信息放在頁面底部用戶首屏看不到核心價值，很多人不會往下滾動。
3. 依賴 Flash移動端早已不支持 Flash。
4. 加載過程無任何加載狀態(tài)白屏不動，用戶以為頁面卡死。

簡單總結 3 條移動端黃金規(guī)則

1. 單手優(yōu)先：核心操作區(qū)放在屏幕下半?yún)^(qū)（拇指熱區(qū)）
2. 少輸入、少點擊：能選不要填，1 次點擊完成目標
3. 弱網(wǎng)友好：輕量化資源，首屏盡快出內(nèi)容