界面模式

在小屏幕上查看的设计不应看起来像大屏幕布局的缩小版本。同样,在大屏幕上查看的设计不应该看起来像是小屏幕布局的放大版本。相反,设计需要足够灵活,以适应所有屏幕尺寸。成功的响应式设计可以充分利用各种外形规格的设备。

也就是说,某些界面元素的外观可能因查看时所处的环境而异。您可能需要对同一 HTML 代码库应用截然不同的 CSS,才能充分利用不同的屏幕尺寸。在设计上,这可是一个很大的挑战!

下面介绍了您可能会面临的一些常见挑战。

在大屏幕上显示导航链接列表非常简单。我们有足够的空间容纳这些链接。

在小屏幕上,空间是最宝贵的了。在针对这种情况进行设计时,很容易将导航隐藏在按钮后面。这种解决方案的问题在于,用户必须执行两个步骤才能前往任何位置:打开菜单,然后选择一个选项。在打开菜单之前,用户想知道“我能去哪里?”

尝试寻找一种可避免导航隐藏的策略。如果项目数量相对较少,则可以设置导航的样式,使其在小屏幕上呈现效果良好。

同一个网站,包含 5 个导航链接,分别在移动浏览器和平板电脑浏览器中查看。两部设备上均会显示导航界面。

如果您的导航包含大量链接,则该模式不会缩放。在小屏幕设备上,如果链接换行两三行,导航就会显得杂乱。

一种可能的解决方案是将链接放在一行,但在屏幕边缘截断列表。用户可以水平滑动以查看无法立即显示的链接。这就是溢出模式。

这种方法的优势在于,它可以根据任何设备宽度和任意数量的链接进行缩放。其缺点是用户可能会错过最初不可见的链接。如果您对主导航使用此技术,请确保前几个链接是最重要的链接,并直观地表明列表中还有更多项目。前面的示例为指示器使用了渐变色。

万不得已时,您可以选择默认隐藏导航栏,并提供切换机制供用户显示或隐藏内容。这称为“渐进式披露”。

同一个网站,包含 5 个导航链接,分别在移动浏览器和平板电脑浏览器中查看。导航在平板电脑上可见,但在移动设备上隐藏。

确保用于切换导航显示的按钮带有标签。请勿依赖图标识字。

三个无标签的图标:第一个是三条水平线;第二版是三乘三网格;第三个是垂直排列的三个圆圈

无标签图标是“神秘肉”导航 - 用户只有咬紧该视频,才会知道里面有什么。提供文本标签,让用户知道该按钮将显示的内容。

轮播广告

导航的正确性也适用于其他内容:无论如何都不要隐藏任何内容。轮播是隐藏内容的常用方法。它看起来可能非常简洁,但您的用户很有可能永远无法发现隐藏的内容。相较于为用户提供服务,轮播界面更适合于解决组织问题,例如应该在首页上展示哪些内容。

也就是说,当空间不足时,轮播可以防止页面变得过长和杂乱。您可以采用混合方式:对于小屏幕,以轮播方式显示内容;对于大屏幕,则以网格形式显示相同的内容。

对于窄屏,使用 flexbox 以一行显示项目。内容行将超出屏幕边缘。使用 overflow-x: auto 可允许水平滑动。

@media (max-width: 50em) {
 
.cards {
   
display: flex;
   
flex-direction: row;
   
overflow-x: auto;
   
scroll-snap-type: inline mandatory;
   
scroll-behavior: smooth;
 
}
 
.cards .card {
   
flex-shrink: 0;
   
flex-basis: 15em;
   
scroll-snap-align: start;
 
}
}

scroll-snap 属性可确保项目能够以流畅的方式滑动。多亏了 scroll-snap-type: inline mandatory,物品可以卡入到位。

当屏幕足够大(在本例中比 50em 宽)时,切换到网格,按行和列显示项,而不会隐藏任何内容。

@media (min-width: 50em) {
 
.cards {
   
display: grid;
   
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
 
}
}

至关重要的是,轮播视图中的项不会占据整个宽度。如果确实如此,界面边缘不会指示还可以显示更多内容。

轮播是溢出模式的实际另一个示例。如果用户可以浏览许多项,即使在大屏幕(包括电视)上,您也可以继续使用溢出模式。此媒体滚动条使用多个轮播界面来管理大量选项。

同样,scroll-snap 属性可确保互动顺畅。另请注意,轮播界面中的图片应用了 loading="lazy"。在这种情况下,图片不是非首屏,而是在边缘之外,但同样的原则同样适用:如果用户滑动屏幕时滑动距离最远,就不会下载图片,从而节省带宽。

通过添加 JavaScript,您可以向轮播界面添加交互式控件。你甚至可以让它自动循环切换内容。但在这样做之前,请三思而后行:如果轮播界面是网页上唯一的内容,那么自动播放可能会是可行的;但是,如果有人尝试与其他内容互动(例如朗读文字),会让自动播放的轮播界面非常讨厌。您可以参阅更多轮播界面最佳做法

数据表格

table 元素非常适合用于结构化表格数据;行和列的相关信息。但是,如果表格过大,则可能会破坏您的小屏幕布局。

您可以将溢出模式应用于表。在此示例中,表封装在类为 table-containerdiv 中。

.table-container {
 
max-inline-size: 100%;
 
overflow-x: auto;
 
scroll-snap-type: inline mandatory;
 
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
 
scroll-snap-align: start;
 
padding: var(--metric-box-spacing);
}

指南

溢出模式对于小屏幕来说是一个很好的折衷方案,但要确保用户清楚地知道屏幕外的内容可触及。考虑在内容被截断的边缘添加阴影或渐变效果。

渐进式披露可以有效节省空间,但对于非常重要的内容,使用时应谨慎。它更适合于次要操作。确保为触发披露声明的界面元素添加明确标示,不要只使用图标。

优先针对小屏幕进行设计。让小屏幕设计适应大屏幕比将小屏幕设计适应大屏幕更容易。如果先针对大屏设备进行设计,有可能会出现用户后来想到的小屏幕设计。

如需了解更多布局和界面元素模式,请参阅 web.dev 模式部分。

当您根据不同的屏幕尺寸调整界面元素时,媒体查询对于确定设备的尺寸非常有用。但 min-widthmin-height 等媒体功能只是开始。接下来,您将发现众多其他媒体功能。