博客
文章响应式设计3 分钟阅读

用真实内容检查响应式布局

两张精心打磨的截图可能掩盖中间宽度下的布局问题。较长的名称、缩放和内容关系,能揭示固定稿件看不到的问题。

作者 设计审查团队

桌面与手机之间的布局空档

导航栏可能在宽屏桌面上显示正常,在手机上也能切换成紧凑菜单,却在两者之间的宽度下出现尴尬换行。两栏表单也可能遇到同样的问题:断点切换前,标签已经挤在一起。只看两个端点的截图,会漏掉这段区间。

在内容开始难以使用的宽度附近调整窗口。关键不是某个熟悉的设备尺寸是否通过,而是内容放不下时,布局能否做出合理响应。

用真实内容替换理想化标签

试试较长的组织名称、已支持语言中的译文标签、缺失的图片,以及比示例大得多的数值。这些都是常见的内容情况,不是什么复杂边缘案例。它们能揭示布局是否暗中依赖短文本或完整数据。

有意识地决定文本何时换行、截断或移到另一行。截断装饰性说明或许可以接受;如果隐藏了两个账户名称中用于区分它们的部分,就可能让人选错账户。

列堆叠后仍保留内容关系

宽屏上,说明文字可能紧挨着它所解释的控件。内容堆叠后,另一个区块可能把它们隔开。检查窄屏布局时,应从上到下阅读,而不只是确认所有元素都还在屏幕上。

也要检查放大文字和页面缩放后的体验。固定页眉或粘性操作栏可能会占掉大量可用空间。内容全部存在,并不代表用户一定能读懂它或找到下一个操作。

描述具体故障,而不只是断点

可横向滚动的比较表,与迫使整页横向滚动的段落并不是一回事。应描述哪个区域溢出、造成了什么困难,以及复现问题时使用了什么内容。这样可以避免用笼统的“隐藏溢出”改动掩盖重要信息。

一条有用的交接说明可以是:“在这个宽度下使用完整组织名称时,账户选择器挡住了保存操作。”下一位审查者就能复现问题,并确认控件关系已经恢复,不必猜测“手机端坏了”具体指什么。

参考资料与延伸阅读

继续学习

使用 Design Audit 探索您的网站

提交 URL,让下一次审阅变成有针对性的行动计划。