T: 400-6065-301
63
响应式设计革命确实在我们身上（如果还没有发生！），即使电子商务网站没有像其他行业那样积极地采用响应式设计，它也越来越受欢迎。
揭阳网站制作到目前为止，大多数响应式设计思想都围绕着从移动设备到桌面的各种体验。然而，很少有人关注将这一范围扩展到标准桌面屏幕之外的机会，以创造针对现代大型显示器优化的体验。考虑一下：
在我们今年早些时候进行基准测试的50个美国领先电子商务网站中，只有18％优化了大型显示器的设计（但这些网站中有94％的设计针对移动设备进行了优化）。
大约四分之三的电子商务销售仍然发生在PC上，而不是移动设备上（见这里，这里和这里）。
大约三分之一的用户访问超过1350像素的屏幕（请参阅此处，此处和此处）。（注意：当然，屏幕和浏览器宽度之间存在差异 - 浏览器的实际用户数量会更低。我们建议您在网络统计信息中跟踪浏览器大小，以获得最准确的显示效果此细分受众群在您的网站上。）
基于这些统计数据，为具有大屏幕的用户制作优化的体验似乎值得付出努力。事实上，大屏幕设计可能会成为响应式电子商务设计的下一个前沿。
在本文中，我们将探讨电子商务设计师如何使用响应式升级来为大屏幕用户创建量身定制的体验。我们将介绍一个核心原则，以及11个提升电子商务体验不同部分的想法，以应对电子商务可用性研究中观察到的各种可用性挑战。本文最初由Baymard Institute 出版。
请注意宜家搜索结果页面周围的所有空白区域。在我们的电子商务产品清单研究中，很明显，在美学驱动的产品垂直领域，例如家居装饰，用户需要大量的缩略图来准确评估产品。利用额外的屏幕空间来提供这是电子商务网站需要考虑的许多“响应式升级”想法之一。
大屏幕提供的额外屏幕空间通常不被用作大片白色海洋，而实际页面内容被塞进一个经过优化以适合笔记本电脑屏幕的紧凑设计。在极小的情况下，内容可以给予更多的喘息空间，在大尺寸显示器上的元素之间有一些额外的空白区域。
然而，“响应倍增”可以进一步予以推动，为客户提供卓越的体验，通过使用额外的空间，提供更大的图片，更多的产品列，更好的网页内容和相关网站的行动更容易获得（筛选和排序对大屏幕监视器的用户， “添加到购物车”按钮等）。
基本上有两种方法可以利用额外空间：在页面上插入其他内容（即仅在大规模分辨率下可用的内容），并以不同方式呈现现有页面内容（即重新定位元素，更改其布局，比例起来，等等）。
您会注意到本文中的所有示例都说明了现有页面内容如何以不同方式呈现（有时非常显着）。这是因为插入仅在大规模分辨率下可用的全新页面内容通常不是一个好主意。当然，也有例外，但一般来说，如果内容不够重要，无法在“常规”桌面视图中显示，那么它很可能也不足以在更大的屏幕上显示。
更大的屏幕并不意味着用户突然想要一个难以扫描的狭窄布局，较小的屏幕也不意味着用户永远不会要求他们之前在网站上看到的任何类型的信息。因此，显示相同的内容，但不同地“打包”它，以便针对正在显示的屏幕进行优化。
永远不要将不重要的内容添加到页面中，因为页面上有空间。同样，重要内容不应仅仅因为屏幕空间有限而被忽略（请参阅“ 您的移动和桌面网站应该如何不同？ ”中的测试结果，其中记录了此原则）。应该以大规模分辨率插入新页面内容的唯一时间是，该内容仅在较大的显示器上有意义，而不是在常规屏幕上。
因此，作为一般规则，当以大规模分辨率添加新页面内容时，警告铃声应响起。有几次它是合理的，但大多数情况下，内容要么太不重要，不能在常规屏幕尺寸上显示，因此也应该从大型版本中排除或者实际上很重要，因此应该包括在页面上无论屏幕大小。显然，重要内容可能需要根据可用空间的不同而有所不同，但在设计的所有版本中都应该以某种形式或形式提供。
遵循避免新内容的原则，而不是以不同方式呈现现有内容，让我们看一下响应式升级可能在电子商务网站上工作的一些方法。
通过将图纸分层到Wayfair.com的屏幕截图上，可以说明以下所有示例。现在，Wayfair的桌面设计目前根本没有响应（即页面没有缩放，布局不会根据浏览器大小重新排列），既不“向上”也不“向下” - 页面的宽度保持固定，无论用户的视口。因此，说明如何针对具有大屏幕的用户优化电子商务网站上的不同类型的页面是一个很好的案例。
在这些示例的实际实现中，其他页面元素也可能重新排列并且可能缩放（尤其是诸如页眉和页脚之类的页面元素），但是出于这些基本图示的目的，元素被简单地移动一点。这些例子应该被视为灵感，根据您网站的产品垂直和目标，有些显然会比其他更适合您。
通过放弃叠加层而不是永久地将对话框与其他“首屏”内容并排放置，可以在大屏幕上使注册叠加层不那么突兀。这将使注册对话框不那么具有侵入性，因为它不会阻挡整个页面，但它仍然会使对话框高度可见，因为它仍会在页面加载后立即显示（因为它放在首页上方）。
现在，对注册不感兴趣的用户显然会发现这个对话框更容易被忽略，因为他们不再需要主动解除它。然而，在我们的可用性研究中，大多数测试对象只是简单地关闭了传统的叠加对话框而没有阅读其内容，通常将这些叠加称为“弹出窗口”（参见“ 避免这5种类型的电子商务图形 ”）。这是一种重叠失明。相反，当这些用户被放置在页面折叠上方时，他们实际上可能更有可能阅读注册对话框，因为在看到该元素时，他们不会花费所有注意力来尝试找到解除它的方法。
标题中最受欢迎的链接（例如，登录用户的帐户和订购链接）和页脚（客户服务和常见问题解答链接）可以显示在主页的框中，当有空间时。显然，链接仍然可以在标题菜单和页脚部分中的原始位置访问。在大屏幕上，这些快捷方式也可以直接在主页上使用。
这是页面上剩余可用内容的一个很好的示例，但显示方式不同。这不是新内容，而是以不同方式显示现有内容，以优化大屏幕上用户的体验。在这种特殊情况下，链接快捷方式框的颜色可能会轻微褪色，使其看起来是其他内容的次要。
主页旋转木马充满了可用性问题，必须非常小心地实施（参见我们的测试研究中观察到的八个旋转木马要求）。在较大的屏幕上，旋转木马当然可以简单地向上扩展，使得显示的滑块更大。但是，如果幻灯片是正方形或甚至只是相当高，那么放大旋转木马幻灯片实际上最终可能会在大型监视器上将页面内容的其余部分推到视口之外 - 尽管视口增加了，但仍会减少主页概述！对此的解决方案是将旋转木马滑块转换为多列视图，同时显示两个或三个幻灯片。
如果幻灯片的总数与列数相匹配，那么轮播的有问题的交互功能甚至可以隐藏起来，有利于幻灯片的静态多列布局。如果幻灯片多于列，则它们当然仍需要幻灯片旋转功能或带行的网格表示。
当用户将项目添加到购物车时，大多数电子商务供应商希望采取以下两种操作之一：用户寻找更多要添加到购物车中的商品，或者他们购买购物车中的商品。继续浏览其他产品显然对收入很有帮助，但这也意味着买家的悔恨更有可能产生 - 特别是如果用户在搜索其他产品时很难浏览网站。
通过内联常规下拉菜单（可从页面标题中获取），供应商向用户提供其购物车中已有商品的概览 - 提醒他们他们已找到的优质产品（当然，他们应该最好绝对在离开前购买！）。这使用户可以轻松访问结帐流程，从而有助于完成销售。
此外，在我们对主页和类别导航的研究期间，经常观察用户重新打开他们的购物车只是为了浏览先前添加的项目的名称。例如，他们可能会重新打开购物车以查看他们刚刚添加的相机的型号名称，以便找到匹配的相机包。永久显示购物车将使用户更容易找到匹配的商品，因为它可以直接比较当前正在浏览的商品列表和购物车中的商品。
在基于网格的产品列表中利用额外屏幕空间的最明显方法之一是重新排列产品，以便它们出现在其他列中。这可以大大增加屏幕上可见的产品数量。在上面的示例中，用户从能够在其视口中看到六个产品看到十个。
这种方法可以在大屏幕上显着优化产品列表视图，但要小心谨慎。如果产品列的数量过多，那么网格将最终变得更难以扫描，因为用户将淹没信息并且他们的眼睛将难以从一条线路行进到下一条线路（文本具有最佳线路长度的原因）。
因此，将您的产品限制为五到八列（取决于列表项目的大小和垂直产品），以防止用户迷失在信息的海洋中。
利用产品列表中额外视口空间的另一种显而易见的方法是扩展每个列表项以适合用户的屏幕。例如，您可以显着增加产品缩略图的大小，使用户可以更详细地检查每个产品的美观。这在视觉驱动的产品垂直方面具有明显的好处，因为它最大化了所传达的视觉信息量，使用户更容易识别他们喜欢的产品。
但是，再次建议自行决定，因为简单地放大图像通常会导致列表项高度大幅增加（假设保持纵横比），这实际上可以大大减少屏幕上的产品数量。请注意，在上图中，第二行列几乎完全被推出了视图。
因此，在产品列表中缩放图像时的权衡是增加每个产品的可用视觉细节水平，但代价是限制用户对可用产品的概述，因为视口中可容纳的产品数量较少。
通过在用户的屏幕加宽时组合前两种方法 - 即通过添加列和增加每个列表项的大小 - 我们可以获得两全其美的效果。增加了每个产品的可视信息，但维护了概览，因为只要列表项达到高度阈值，产品网格就会重新排列以显示其他列。
这样，列表项可以增长以显示关于每个产品的额外视觉信息，而不会增长到足以损害适合屏幕的产品总数。实际上，由于附加列，视口中的产品数量将增加。因此，所示产品的总数和它们各自的分辨率都得到改善。
利用额外屏幕空间的另一种方法是通过“粘性”元素将过滤和排序工具永久地附加到用户的视口。这将为用户提供有关他们当前正在查看的产品的附加上下文，并且可以轻松访问以操纵产品列表的条件。
固定内容有效地使主要内容的可用空间更小。因此，每当将内容固定到视口的边缘时，仅在具有足够空间的屏幕轴上执行此操作，以使固定内容不会在该轴上消耗太多空间。例如，如果不应用@media检查有足够空间可用的视口高度规则（例如，基于高度的查询），请不要将内容固定到屏幕的顶部或底部。
但是，通过适当的检查，粘性过滤侧边栏甚至可以重新排列以占用多列，工具分布在两列或三列中。如果过滤工具栏是水平的，如果视口足够高，您可以将其附加到屏幕顶部，或者如果水平空间很大，则可以在滚动时将其重新定位到侧边栏中。浏览器高度可以类似地用于动态调整截断阈值以过滤值，增加截断设置之前显示的过滤值的数量，随着屏幕高度的增加。
在测试期间，当受试者登陆产品页面并确定产品不适合他们时，他们将继续浏览或离开网站。让用户轻松完成前者显然符合供应商的利益。通过显示建议的替代和补充产品或在上面的页面折叠侧栏最近查看过的项目的列表，你即刻呈现一条退路，他们必须决定，他们目前正在观察该产品是不适合他们的用户。
让用户轻松地从一种产品导航到下一种产品对于他们的产品查找能力至关重要。当然，产品类别可以类似地推广，但要注意用户流程 - 用户是在产品列表和产品页面之间来回发送，还是可以从一种产品转到另一种产品？
有时前者很有吸引力，因为它为用户提供了更加连贯的网站产品概述，但显然来回流动也带来了更多的摩擦。因此，请确保您在促销元素中建议的路径在类别和产品页面目标之间达到合理的平衡。
产品页面可能很长。它们可以包含图像，描述，规格，客户评论，替代和补充产品的建议，常见问题解答等。
我们所有的可用性研究都表明，更多信息几乎总是更好（只要内容质量好 - 即有用，值得信赖且合理准确）。然而，这也意味着用户有时可能会远离产品的核心环境（即名称，价格，任何可能的变化和“购买”按钮）。要提供永久性上下文并始终保持“购买”按钮，请将粘性产品摘要放在大屏幕上的额外空间中，并在用户向下滚动页面时将其附加到视口边缘。
这个粘性产品摘要基本上可以是产品列表项设计的略微修改版本; 或者，如果它附着在用户屏幕的水平轴上，它可以呈现出更纤细的美感。无论哪种方式，目的都是为用户提供永久的产品背景，使他们能够看到名称，价格和任何变化，即使他们在客户评论中处于深层次。当然，当用户正在阅读来自快乐客户的好评时，始终保持“添加到购物车”按钮。
在结账时，大量的水平空间将被闲置，因为页面往往非常集中，因为多列表单在结账时会导致重大的可用性问题。在大屏幕上，这个巨大的白色海洋空间可以通过订单摘要和客户支持细节进行调整。订单摘要在整个结账体验中将是一个不变的元素，并作为用户离开拥有的产品的持续提醒。
同时，如果用户在结账过程中遇到麻烦，客户支持功能可以从其共同的页脚位置向上移动，以使其随时可用。如果您担心客户支持率过高，那么您可以根据购物车的订单价值以及用户结账过程的距离以及是否遇到验证错误，更有选择地推广详细信息。
令人惊讶的是，目前很少有电子商务供应商优化其网站的大屏幕设计。即使是那些提供优化的大屏幕体验的18％的领先电子商务供应商也只是朝这个方向迈出了第一步。鉴于拥有大屏幕的大部分用户，响应式升级是一个成熟且具有潜力的领域。
在实现响应式升级时，请记住“相同内容，不同包装” 的核心原则。一条内容对所有用户都很重要，或者对于大型显示器上的用户来说也不够重要; 仅仅因为用户在屏幕上有更多空间并不意味着他们想要一连串低质量的内容。相反，探索以不同方式呈现现有页面内容的方法，以便为具有大屏幕的用户创建更好的体验。
本文中涉及的11个想法都基于相同内容，不同包装的原则 - 采用现有页面内容和缩放或重新定位，有时显着，其他时间巧妙地：
内联注册覆盖
页眉和页脚快捷方式
内联轮播幻灯片
内联填充车
其他产品列
更大的产品列表图像
缩放和重新排列产品列表
粘性过滤器
最近浏览过的商品
粘性产品页面摘要
粘性订单摘要和客户支持
您是否有其他想法来优化大型显示器的电子商务网站？在评论部分分享。是时候为大屏幕用户优化电子商务体验了。
揭阳网站制作
热门分享
最新文章
随机推荐
