智能手机网站设计的表现！

申请免费试用、咨询电话：400-8352-114

人们越来越多地使用他们的智能手机，台式电脑的替代品，即使是活动，如购物和采购。越来越多的人摆脱台式机和手机优化的网站上购买的产品和服务，网站创建者可以使用建立的设计模式，以帮助启动一项移动电子商务项目。

有一个很好的移动电子商务的经验是相当重要的。事实上，最近的研究发现，人们有67％的可能进行购买，如果一个网站，他们已经达到了自己的手机是智能手机友好的。

电源的设计模式，他们告诉你其他设计师如何解决类似的问题，所以，你是不是总是重新发明轮子。它们还可以使您设计的方式，以满足人们的期望开发从他们使用的其他网站，他们鼓励你考虑的设计方法，你会不会想到在自己的网站。

在这篇文章中，专注于智能手机，而不是平板电脑，我们来看看设计模式和方法用于移动电子商务功能，包括以下内容：

• 首页页面，
• 网站导航，
• 建议搜索，
• 搜索结果中，
• 搜索过滤和排序，
• 产品页，
• 照片画廊，
• 购物车，
• 检查的帐户或作为嘉宾，
• 表格。

本文中的所有例子都来自运行在智能手机上的浏览器的移动网站。大多数是从大型跨部门的零售商，因为他们有大量的产品目录的功能，如搜索，过滤和排序的搜索结果，需要一个深思熟虑的方法。电子商务也有无数的本地应用程序，这些模式可以适用于他们。

主页

在移动设备上访问时，主页的有关内容，帮助用户找到他们所寻找的。常见的模式是简单的单栏布局的特色网站或产品类别的促销和单栏列表。关键字搜索，通常包括主页，链接到商店定位器和注册形式的宣传电邮及忠诚度计划。

亚马逊和梅西的混合使用的促销内容和列表菜单中。

目标的宣传内容占用更多的屏幕空间，不是一个简单的列表，但更强的视觉冲击。Threadless的使用的仪表盘模式，这是比较常见的，在本机应用程序在移动电子商务网站。

如果购物者来到你的网站快速比较价格，然后一个简单的列表模式和搜索功能可能是更可取的。如果他们是来探索促销和销售，然后由目标所采取的方式可能是比较合适的。为了回答这些问题，你需要挖掘分析，以了解消费者在您的网站正在做的。

站点范围的导航

除了使用作为主导航中心的主页，也有许多网站导航菜单大部分自己的网页中，通常会在标头中。这使购物者能够很容易地从一个网站的一部分，到另一个，而无需返回到主页。

Lowe的站点范围内的菜单的每个选项的图标。百思买的菜单中有两栏布局，导航按钮，而不是列表项。Lowe的菜单包括页面出现时，而百思买的页面的内容推下来的画面。

梅西的站点范围内的菜单，其中包含的子菜单选项。CVS有两列菜单的每个选项的图标。在这两种情况下，菜单被显示在页面顶部的。

正如你可以看到从上面的截图中，有几种方法来设计站点范围内的菜单。Lowe的设计是简单的，和图标添加一个漂亮的视觉抛光位。事实上，其余的页面淡出到背景中，当用户选择使用的导航帮助用户专注于当前的任务。CVS似乎比较混乱中，有两列选项，每个项目都配有图标。CVS'菜单还放置的特定抽头目标彼此靠近，可呈现的触摸屏上的可用性问题。

有趣的是，大型电子商务网站通常没有太多的导航选项一次显示。他们试图平衡视觉的导航与您的网站的信息架构设计，仔细考虑的项目，应在全球导航。使用网站分析看菜单选项购物单击帮助你决定了什么应该是在菜单中。不同的设计方案进行A / B测试和可用性测试，看一个人是否有太多的选项和压倒的人，不只是建议，但必须找到最佳的解决方案 - 为您的企业和您的用户。

建议搜索

建议搜索，也被称为提前键入或自动完成，结果显示潜在的，作为购物键入几个字符。常用搜索到的条件，这是一个真正的方便购物者，特别是如果搜索词是长期的。建议搜索的一个限制是，点击虚拟键盘上错误的字符是很容易的，这将改变建议的结果。显示常见的“正确”的结果，而不是可能是有用的。另外，考虑使用一个改进的自动推荐图案键入需要输入查询，以减少的量，以最有效的方式，并利用移动带宽较慢。

Office Depot的网站在搜索框中：键入“DRAF” 带来了几种可能的结果。错误输入“拖”而不是“DRAF”的人谁是试图找到起草用品会导致意外的结果。攻牙到预定的相邻的信1是虚拟键盘上的常见问题。

虽然设计者人错误输入查询不能做任何事情，他们可以确保有其他的方法来得到到产品页面输入错误的结果，如钻的产品类别或站点范围内的菜单中的顶级类别的下拉列表。网站管理人员也可以罚款调整自己的搜索功能，建议“草案”查询类型为“dragt的结果。”你有能力做到这一点，将取决于您使用的搜索引擎技术。

搜索结果

用于移动电子商务网站的搜索结果：表显示和网格显示两种主要的模式。表格显示缩略图的照片和一些基本信息，如产品名称和价格在一个紧凑的行。网格显示大图片的描述性信息较少。有些网站允许消费者在这两种视图之间切换。

Zappos的搜索结果中显示其一个网格，允许其产品的大照片，一个明智的选择，像鞋的销售市场。沃尔格林有一个表，其中包括在商店寻找项目，将项目添加到购物车按钮。

OfficeMax公司要求消费者在选择一个子类别广泛的搜索字词，如“纸”。一个子类一旦被选中，结果显示为一个表。搜索的“剪刀”，其中就有更少的子类，消费者直接到表视图的结果。

有消费者选择一个子类别，可能会出现问题，如果它不清除的产品适合在一个复杂的层次结构。在的OfficeMax公司上面的例子中，有人找他们的家用打印机为8.5×11英寸的纸张可能不知道是否在“复制”或“多用途纸激光打印纸。”一个更好的方法可能是在搜索过滤器中列出的子类别，在那里他们可以在上下文中与其它过滤器一样，“颜色”和“大小”。定期测试（每4-6个星期）具有代表性的用户，通常搜索的术语和最畅销的产品可以让您深入了解哪种方法是更好的。A / B测试也可以发现其中的一个方法是否得到更多的人的产品页面，并导致更高的转换率。

Gap的网站的访问者看到一个表，显示默认情况下，看到一个网格显示的选项。请注意，差距也保持在关键字字段中的搜索字词。

峡让消费者选择如何，让他们从一个简单的扫描列表的视图放大图片查看搜索结果。差距可能保留一些产品的信息，但-例如价格-在网格显示（作为Zappo的）。详细信息，如价格和颜色使它更容易为购物者确定哪些产品，他们希望了解更多有关。

保持该领域中的术语也提醒消费者他们寻找什么，并让他们很容易缩小结果的另一个词（如“红”）的搜索字词。

搜索峡为“男装T恤”需要购物的页面没有结果（未显示），并没有链接到搜索结果为“男子吨的衬衫。”间隙可以提高其搜索通过添加一个“难道你的意思吗？”的类型结果页面的问题。谷歌处理这种情况，列出“男装T恤”建议的查询，然后提交结果为“男装T恤”，如果该建议被忽略。

排序结果

结果排序，帮助消费者组织沿着一个连续的值，通常是数字的，如价格和消费者的评级结果一大套。通用接口模式进行排序的按钮和下拉菜单。

沃尔玛让消费者选择三个按钮对结果进行排序。西尔斯使用类似的方法，但与“分段控制”。JavaScript框架，如jQuery Mobile的这些应用程序接口部件更容易为设计者提供。

JC Penney公司可以通过下拉菜单进行排序，稍微定制的风格，而Eddie Bauer的使用浏览器的默认下拉菜单。这两个触发浏览器的本地控制下拉菜单（在这些例子中，iPhone选择器）。

沃尔玛的按钮之间的间距的大小和大方，让您更好的自来水的目标，不过，公平地说，沃尔玛只有三个选项，而西尔斯有四个。西尔斯列入“全部”按钮可以让购物者回到原来的结果页面，如果他们没有找到他们想要的东西后，排序。使用下拉菜单是一个比较安全的选择，因为它是现代移动浏览器的支持，并允许较长的列表的排序选项。然而，它也需要花费大量宝贵的空间。这些类型的设计权衡，可以定期检测与评估。

筛选结果

过滤器使购物者，缩小其结果的基础上的一个或多个属性，如颜色，品牌和规模。过滤器通常是组织的类型（称为面），与每个小刻面（例如下出现的几个值，颜色是一个面，和红色的一个方面是值）。通用接口模式显示过滤选项的下拉菜单，下拉列表和手风琴显示。从一个面内时，可以应用一个或多个值中选择滤波。虽然允许一个单一的搜索值超过一个方面，技术上是可行的，它带有一个更高的互动成本，并可能导致的任何结果（例如，交叉培训，成本不超过75美元的运动鞋）。

CVS使用下拉菜单中的“筛选”选项卡中进行筛选。选择一个菜单选项，将立即对结果进行筛选。JC Penney公司提供了一个下拉列表中，选择过滤器和显示产品的数量相匹配的过滤器值。JC Penney公司也可以在一个屏幕上，贸易是购物者点击“应用”按钮被选中多个值从一个方面。

科尔的每个过滤器类型，使用的手风琴公开了一组复选框。Threadless的暴露了其搜索方面作为按钮的值。在这两个网站，选择一个过滤器值将立即筛选结果。

显示项目的数量可根据每个面值到什么样的消费者将得到每次选择提供了更大的透明度。Threadless的“的方式显示所有可用的内容值占据整个屏幕，但它为消费者提供了在一目了然地查看所有的过滤提供给他们的选择。无论你采取这种方式，或者使用像科尔的手风琴很可能依赖上的方面值是多少目前对于一个给定的产品类别。如果您的目录具有高度的变异面值为每个类别的数量，那么您将需要进行实验，以找到合适的设计。你可以因为消费者使用这些产品类别过滤器的最优化过滤界面。

产品页

产品页面是电子商务网站，真正展示他们的产品在细节。他们是不是一个“模式”这个词的真正意义上的，而是一个集合的模式，包括如制表符，的手风琴和照片画廊。两种常见的方法到产品页面的所有产品的信息或一个网页的标签或手风琴，以便逐步披露的信息，消费者需要一个很长的网页。

三星和戴尔的逐步披露内容上的产品页面，其中有很多购物者的信息。三星使用的手风琴公开的信息块，而戴尔使用制表符。

Cabela的办公用品都使用了一个很长的网页显示的产品信息。这种方法需要更多的刷卡向上和向下得到的信息，但它使购物与小标签，或操纵手风琴头。你的选择将取决于信息的量与产品相关联的信息可以被分解成逻辑部分以及如何。

龙产品比分解成可管理的数据块用制表符或手风琴的页面，页面需要更多的滚动。他们还要求消费者把更多的精力放在寻找特定的信息，他们正在寻找。在我自己的可用性测试，我听到有人表示这两种方法的喜好，但他们似乎有一个简单的工作分解成逻辑块的页面。如果你使用这种方法，请确保最初没有显示任何内容呈现快速购物者点击的选项卡或手风琴。

最明显的方式来完成，这是加载页面的所有内容，一度让隐藏的内容几乎立即出现。这种方法有它的优势，为用户的网络连接时下降，而他们之间的切换部分。最大的缺点是，所有的产品信息已被下载，无论是实际查看或不增加更多的负载对服务器和使用更多的购物者的数据计划，该计划可计量。

图片库

照片画廊特别是在电子商务行业，如服装和消费电子产品的关键。您可能需要从三个不同的角度，家得宝在购物时，看到一个扳手，但更多的图像时找衣服，鞋子或者高端智能手机或平板。几个常用的模式是swipeable画廊，“双点击放大，缩小”，用于选择照片的缩略图。

Payless使用一个swipeable的画廊，从不同的角度，以显示其产品。用户也可以点击放大才能看到细节，如缝合和扣眼。

Payless明智地保持其“丝锥放大”调出屏幕上的几秒钟，给购物者的时间去了解如何浏览网页，仍然注意到它。放大照片查看产品的详细信息的能力是非常重要的服装和鞋。

码头工人（上图左）有一个swipeable照片画廊，双，挖掘到放大的细节的，消费者可以看到一个产品在不同的颜色。列维的（右上图）采取了类似的做法，加上缩略图的表示照片在画廊的角度。泊坞窗“网站上选择一个新的颜色会导致整页刷新，而李维斯没有。

李维斯保持大多数的页面刷新时，购物者改变颜色，起初似乎是一个更好的用户体验。但是，从简要回顾了两个网站于同日在同一天的时间，码头工人的整页刷新，出现了运行速度更快的时候，我拍了拍色样页的新的照片出现的那一刻。列维的缓慢可能已造成需要被刷新，除了主照片，照片，或其他看不见的因素，如交通繁忙的负载由五个缩略图。每种方法都有其取舍。

三星（左上图）和戴尔（上图右）都使用他们的产品swipeable照片画廊。三星采用了画廊到的手风琴在其产品上，而戴尔使用一个单独的页面。

三星的做法似乎更加人性化，因为它具有较少的页面浏览。三星和戴尔都去大型的高清晰度照片，在昂贵的产品时，因为很明显的图像质量是至关重要的。戴尔的方法的一个优点是，它可以让购物者把重点放在自己的照片，没有任何分散注意力的页面内容。

购物车

购物车显示产品通常使用表模式。除了要购买的内容显示，他们还提供额外的功能，例如能够保存命令，保存到我的最爱我的喜爱，删除或更新的数量，选择送货或店内取货，适用于促销或优惠券代码，并检查了。一旦产品已被添加，购物车被普遍达到通过在网站的页眉或全球导航菜单中的选项图标。

每个表行的罗威的购物车（左上图）允许用户删除相应的产品从他们的车，它包括用于运输或店内取货的选项。床浴和超越（右上图）也允许删除的项目;表中的每一项产品的数量可以改变一个按钮上越走越远更新的页面。

板条箱和桶（左上图），允许用户删除产品，保存到收藏夹和更新数量的表中的行。每一行还包括运输成本和交货时间等信息。Payless（右上图），也可以让消费者更新的数量和删除项目，它的车还提供了一个选择的交付选项，包括将产品送到一个Payless专卖店（未显示）。

购物车应提供最大的效用，因为消费者购买的最后一点是接近的。让购物更改数量，移除项目和应用推广或优惠券代码，而不必去到另一个页面，让他们迅速通过采购渠道的关键。如果你觉得这增加了太多的内容的页面，你可以使用渐进披露背后的手风琴，直到它需要隐藏一些内容（如促销代码字段）。

结帐

Checkout是更多的比的图案的方法，形成模式，虽然可以应用到付款处流量。许多电子商务网站允许客户使用移动自己的网站上检查出与现有的帐户或作为嘉宾。人谁已经有一个帐户，结帐过程是通过使用现有的付款和发货信息，大大简化。

克拉奇菲尔德和诺德斯特龙都允许客户检查作为嘉宾或通过使用他们现有的帐户。让手机购物已签出作为嘉宾把他们的订单后，创建一个帐户和密码重置都支持。

亚马逊的电子邮件地址，要求的第一页，结账时，顾客是否有一个帐户，或作为嘉宾被检查出。的经验是非常像网站用户的桌面上。目标移动网站上提供的选项中的帐户，以检查为客人或创建一个帐户。两者都支持密码重置。

允许客户登录或检查作为嘉宾，并重置其密码是一个必须为移动电子商务的网站。另外，还要考虑邀请消费者到自己的手机上创建一个帐户后，把他们的订单，因为他们已经给了你足够的信息（输入密码除外），这样做的。这可以让客人更有可能的努力创建一个帐户，因为在这一点上应该是最小的。

的“创建一个Target.com”的按钮可能会导致一些废弃的购物车如果购物者走这条路，并决定这是太多的努力。确认订单，然后再邀请注册在发票上页可能会更好。限制初始结帐屏幕两种选择，可以提高转换，因为购物者将有更少的决定，使工作时，在小屏幕上。更少选择的关键任务，如检查出效果更好。

表格

形式是最常用的移动电子商务，搜索，检查，登记，并输入优惠券和促销代码。请注意形式为小屏幕设计时的一些良好做法：

• 将表格上面的标签输入字段，使他们不推卸屏幕，当用户放大到输入。
• 使用HTML5输入类型显示相应的键盘使用领域。对于电子邮件地址，使用类型=“电子邮件”。对于数字字段，如邮政编码，使用类型=“数字”或“电话”（后者将显示一个数字键盘，更大的按钮）。
• 领域的强制性只有在绝对必要。这将减少摩擦，让客户通过了结帐过程。

最好的方式来处理形式的智能手机是使用很少能可能。您可以使用地理位置建议购物者的ZIP代码，你可以让客户使用他们先前输入的帐户信息时，使用你的网站。请记住，最好的形式是一个购物者从来没有完成。

CVS（上图左一）不带数字键盘，当用户点击“邮政编码”字段，并在结账页面。这需要从购物者，以获得正确的键盘的一个不必要的抽头。，CVS也赞同标签左边的表单域，在那里他们可以得到推过屏幕，如果用户缩放到一个领域。板条箱和桶（右上图），有更多的移动友好的形式。它带来了大的数字键盘，当有人点击“邮政编码”字段中。它还顶部对齐表单标签，这样他们就不会滑落的页面。

请记住，形式是如何的购物网站上完成交易。要特别注意他们，并尽你所能来完成他们的互动成本降低。有时，它甚至可能意味着试图完全不同的东西。例如，Typeform最近提出了一种新的经验，反应更迅速，简单和用户友好的Web表单。我们的想法是要求在一个时间只有一个问题，但它突出显示，让用户键入快捷键，填写表格时。这不是选项，在任何情况下，将工作，但某些形式可能是相当有帮助的。

结论

随着移动电子商务作为零售商的收入来源的重要性日益增加，手机优化的网站都提供很多的功能，消费者所需要和期望的基础上桌面的购物体验。的研究工作英镑品牌和SmithGeiger显示的，移动的消费者更愿意购买时，该网站是移动的。

通过使用现有的设计模式，能够更迅速地得到您的电子商务网站准备的小屏幕，你就可以开始探索不同的选择。但不停止现有的模式，使用它们作为出发点，探索设计，并帮助您考虑的选项，你可能没有想到的。浏览器功能的增加，使界面设计和交互模式从本地应用程序到您的浏览器为基础的智能手机的购物体验。

本文作者来自北京北京信，转载请注明出处：北京北京信（https://www.fanpusoft.com/）