响应式设计（responsive web design）的视图显示法

原文“View mode” approach to responsive web design
链接 https://medium.com/@danielwi/view-mode-approach-to-responsive-web-design-914c7d3795fb

---

反思我们创建的webapps（译者注：基于网络平台的应用和需要下载客户端的区别，也就是相当于网页版qq和客户端安装包版qq的区别），以创建更好的用户体验。无论屏幕的大小怎样。

失去80％的屏幕空间迫使您专注于为你的客户提供最重要的功能

对我而言，它真正总结了响应式网页设计的一切。为什么移动优先方法迫使我们专注于任何webapp真正重要的功能 - 其内容！

移动优先的另一大优点是，它迫使我们（设计师和开发人员）创造性的思考能够将功能和特点集成到webapps的方式。“画布外导航”方法是一个很好的例子。有时需要大量空间，这个功能可以在一个比较小的屏幕上以用户友好和优雅的方式并入。

当你有一个附带复杂和深层次的文本结构的网页，画布外导航是特别有效的。因为当用户专注文本的时候它能够从视图上隐藏导航，当用户想要导航的时候，视图改变，导航变成焦点。而且它允许导航占用所需的空间，为用户提供对webapps内容的良好概述。

这种方法可以有效地用于其他功能，如搜索，过滤内容，购物车等等。

让我们来看一个常见功能的例子：筛选内容。

上面你看到的是一个产品列表的线框图，可以通过一些列参数对列表进行筛选。

这是相同页面的移动版本，所有参数都很好地堆叠在彼此之间。

当用户开始筛选内容的时候会发生什么？实际上一切都像假定的一样运转，内容在被筛选。但是视觉上，对于用户而言什么也没发生。因为用户正在筛选的内容被折叠放在下面，用户从来没有看见他选择的实际结果——这个问题我看到过很多次。webapp没有移动优先的一个典型指标。

解决方案可能是隐藏移动版本的一些参数，或者当用户完成设置过滤参数时，将视图向下滚动到内容——这俩个我都看到过，没有一个提供真正不错的用户体验。

使用不同的视图模式

解决问题的另一种方法是开始使用不同的视图模式。 那就是将webapp的不同功能划分成单个视图。

让我们回到以前的例子。 如果代替带有筛选参数框，我们放置一个名为“筛选结果”的按钮或类似的东西。 当用户点击此按钮时，它会激活一个新的视图，占据大约70％的屏幕尺寸。 它可能看起来像这样：

在这个视图中用户看到的是和以前一样的参数，当他做选择的时候在背景上更新结果（可视化展示他的动作对内容有影响），并且当用户关闭视图时，视图滑走，用户能够再次专注于内容。

这个方法也能被用于搜索，在我看来，在移动网页上这是一个非常不好的功能。

在移动视图上大部分搜索被隐藏在位于头部的搜索按钮上，当用户点击按钮，滑出一个小的输入区域。有时输入区域被设置为当它向下滑动时滑出智能手机输入键盘，自动获得焦点。

这实际上是个还不赖的解决方案，特别是如果你记住自动对焦。

但是，如果我们在搜索中使用视图模式方法怎么样？当用户点击搜索按钮，一个顶部带有输入区域的新视图滑出，并自动获得焦点，键盘向上滑动。 下面你可以看到2个解决方案并列：

视图模式方法的优点在于，你可以使用更多的垂直屏幕空间，可以根据用户类型显示一些实时搜索结果或搜索建议。它还允许异步加载结果，避免完整的页面加载再显示结果。 如果用户找不到他正在寻找的东西，他们可以关闭视图并返回到仍在后台的视图/页面。

不仅对于移动版本

在一个webapp的移动版上使用这个方法有很多优点。它将对用户而言的重要功能带入焦点，但仅在他们需要时。视图从内容顶部滑入，允许屏幕有更多的垂直空间。并且因为我把内容放置到独立的视图，用户能够分别滑动视图——这允许更加复杂的筛选参数，更多搜索结果或更深的导航。但是最重要的是它能够让用户不分心的专注于webapp的内容。

这种方法的优点也可以用在桌面，平板电脑或任何一个屏幕尺寸版本的webapp上。这里对于内容很重要的视图、过滤参数可以在页面右侧显示，以便用户不需要单击按钮来显示过滤参数（参见下面的示例）。 或者可以在页面的右侧放置一系列图标，允许用户在以下视图之间切换：搜索，购物车，评论，反馈，筛选选项等。

在所有屏幕尺寸上使用此方法也可为用户提供所有设备上更加统一的体验。

所以如果我改写我在本文开头提到的Luke Wroblewski的报价，应该像这样：

“失去80％的屏幕空间迫使我们重新考虑我们构建webapps的方式，无论屏幕尺寸如何，让客户在需要专注于功能是非常重要的，也从而创造出更好的用户体验。“