移動端圖片與文字搭配的基本原則
在移動端，螢幕尺寸有限，用戶瀏覽時間碎片化，因此圖片和文字的搭配需要簡潔高效。圖片應輔助文字表達核心資訊，而非單純裝飾；文字則需清晰、簡潔，避免在圖片上疊加過多文字導致閱讀困難。一般來說，圖片占螢幕比例不宜超過50%，關鍵文字資訊盡量放在圖片下方或旁邊，確保易讀性。
常見搭配方式及適用場景
圖文上下排列
最常見的方式，上方圖片、下方文字，適合產品展示、步驟說明等。圖片能先吸引注意力，文字隨後解釋細節。注意圖片高度不宜過長，避免用戶需要大幅滾動才能看到文字。
圖文左右排列
在較寬的手機螢幕上（如平板手機或橫屏時），左右排列可以同時展示圖片和文字。但需控制文字長度，一般用於圖示+標題、人物+簡介等短內容。
圖片上疊加文字
常用於Banner或重點提示。需要確保文字與圖片背景有足夠對比度，可以使用半透明遮罩、文字陰影或將文字放在圖片下方1/3處。避免文字過多，一般不超過20個字。
需要注意的細節
- 圖片載入速度：移動端網路不穩定，圖片需壓縮至合理大小（建議100KB以下），使用WebP格式或懶載入技術，避免影響頁面開啟速度。
- 文字大小與行距：正文字體不小於16px，行距1.5倍以上，按鈕或標籤文字應更大。圖片中的文字（如海報）需確保在小屏上可辨認。
- 點擊區域：如果圖片或文字可點擊，熱區大小至少44x44px，避免誤觸。
- 避免圖片文字重疊：除非特殊設計，否則盡量將文字與圖片分開，減少視覺干擾。
實際檢查建議
在網站上線前，建議在不同尺寸的手機（如4.7英寸、6.1英寸、6.7英寸）上預覽頁面，檢查圖片是否變形、文字是否完整顯示、圖文間距是否合適。也可以使用瀏覽器開發者工具模擬移動端效果。透過實際體驗，才能確保圖片與文字的搭配達到預期效果。
總之，移動端圖文搭配需要以用戶快速獲取資訊為目標，避免過度設計。合理控制圖片與文字的比例、位置和載入效能，能有效提升企業官網的閱讀體驗。
