响应式网站在移动端一定要这么长么?

响应式设计中,长度往往被忽略。在手机上,网页可能会被拉得很长。我们应该设法解决这个问题吗? 如今,在设计响应式网站时,我们倾向将重点放在屏幕在各式宽度内保持其良 […]

2018年6月5日

响应式设计中,长度往往被忽略。在手机上,网页可能会被拉得很长。我们应该设法解决这个问题吗?

如今,在设计响应式网站时,我们倾向将重点放在屏幕在各式宽度内保持其良好的内容格式上。这是有道理的,因为水平滚动并不是特别人性化,所以通常会设计出浏览器被限制的视点宽度。

在较小的屏幕上,将内容放到单个列中是最合理的。并且内容只要保持在适当的宽度内,使用者就不会再考虑整个页面的长度。结果我注意到,在我个人的设计网站中,很多都是内容叠加太多,导致移动页面的长度往往相当长。所以这篇文章建议您在设计响应式网站时,至少应该注意浏览器的视点长度。

让我们来看一个例子

谷歌的Nexus登陆页面是一个非常典型的现代营销页面。它有一个非常不错、干净的设计以及流畅的页面响应。你可以把它放在任何尺寸的屏幕上,它将在屏幕宽度内很好地进行格式化。

但是如果你把它放在你的手机上,你可能会注意到你需要滑动很多才能浏览整个页面。在我的MacBook上,页面长度约为4500像素 —— 这大约是浏览器窗口可见长度的6倍。相比之下,在我的手机上,页面长度约为6200像素,大约是可见长度的10倍。这并非是先天不足,没有任何设计法则要求你必须让网站在不同大小的设备上保持长度一致,但我认为这是一个有趣的观察点,这值得我们深入挖掘。

 所以那有什么问题吗?

同样,我不认为页面的整体长度存在固有的问题。不过我注意到,在许多响应式设计中,目标明确的分组很容易在大屏幕上看到,但是当移动屏幕上的内容开始堆叠时,视点就会变得混乱。例如,在Nexus页面上,第二部分将三个硬件功能组合在一起。在足够大的屏幕上,您可以并排看到这三个区块,并且这个部分最终会到达浏览器的可视区域的顶点。然而在移动设备上,您最终只能看到其中一块。当你滚动界面时,这3个区域并不会组合在一起——这不是最差的界面,但也不会是最理想的。

那还有别的选择吗?

最近,我一直试着使用设备的视点长度作为粗略的规范,以帮助我确定应该如何布局内容。其目的是为了解决我前面提到的问题,即在任何设备上都可以合理地查看那些想要组合在一起的内容。在Nexus样例中,他们原始设计的备选方案可能如下所示。

通过大幅缩小部分标题和缩略图的大小,我们可以将这个部分所有相同的内容放入同一个视图中。这种变化本身可能只是一个小的推进式改进,但总体而言,我发现遵循这一指导原则,会导致用户在使用移动设备时浏览滑动页面布局变得更加清晰。

退一步来说…

我刚才给你看的设计没有什么特别之处。这只是实现同样的目标中许多布局的一种——将内容放在特定的部分中,可以更显眼地集中起来。如果您决定使用视点高度作为移动布局的规范,您应该探索各种可以定位内容的方法。根据您设计的上下文和内容的性质,不同的布局可能会有更棒的效果。

文章来源:https://www.viget.com/articles/do-responsive-sites-have-to-be-so-tall-on-mobile/?ref=webdesignernews.com

责编:洪宇轩

翻译:刘艺

发表评论

电子邮件地址不会被公开。 必填项已用*标注