部落格
文章響應式設計3 分鐘閱讀

用真實內容檢查響應式版面配置

兩張精心打磨的截圖可能掩蓋中間寬度下的版面配置問題。較長的名稱、縮放和內容關系,能揭示固定稿件看不到的問題。

作者 設計審查團隊

桌面與手機之間的版面配置空檔

導航欄可能在寬屏桌面上顯示正常,在手機上也能切換成緊湊菜單,卻在兩者之間的寬度下出現尷尬換行。兩欄表單也可能遇到同樣的問題:斷點切換前,標簽已經擠在一起。只看兩個端點的截圖,會漏掉這段區間。

在內容開始難以使用的寬度附近調整窗口。關鍵不是某個熟悉的設備尺寸是否通過,而是內容放不下時,版面配置能否做出合理響應。

用真實內容替換理想化標簽

試試較長的組織名稱、已支持語言中的譯文標簽、缺失的圖片,以及比示例大得多的數值。這些都是常見的內容情況,不是什麼復雜邊緣案例。它們能揭示版面配置是否暗中依賴短文字或完整數據。

有意識地決定文字何時換行、截斷或移到另一行。截斷裝飾性說明或許可以接受;如果隱藏了兩個帳戶名稱中用於區分它們的部分,就可能讓人選錯帳戶。

列堆疊後仍保留內容關系

寬屏上,說明文字可能緊挨着它所解釋的控件。內容堆疊後,另一個區塊可能把它們隔開。檢查窄屏版面配置時,應從上到下閱讀,而不只是確認所有元素都還在螢幕上。

也要檢查放大文字和頁面縮放後的體驗。固定頁眉或粘性操作欄可能會占掉大量可用空間。內容全部存在,並不代表用戶一定能讀懂它或找到下一個操作。

描述具體故障,而不只是斷點

可橫向滾動的比較表,與迫使整頁橫向滾動的段落並不是一回事。應描述哪個區域溢出、造成了什麼困難,以及復現問題時使用了什麼內容。這樣可以避免用籠統的“隱藏溢出”改動掩蓋重要資訊。

一條有用的交接說明可以是:“在這個寬度下使用完整組織名稱時,帳戶選擇器擋住了保存操作。”下一位審查者就能復現問題,並確認控件關系已經恢復,不必猜測“手機端壞了”具體指什麼。

參考資料與延伸閱讀

繼續學習

使用 Design Audit 探索您的網站

提交 URL,讓下一次審閱變成有針對性的行動計劃。