现在人们渐渐用智慧手机代替 PC，连购物也是如此。正当越来越多的人由电脑桌面向移动网页转移，购买产品和服务，WordPress 网站建设可以使用已存的设计模式来开启移动电子商务计划。拥有良好的电子商务经验非常重要。实际上，近期的研究发现，如果能用手机登陆购物网站且过程体验良好，多于 67% 的人都愿意下单。
WordPress 网站建设-SEO 站群认为使用设计模式的优点在于，您可以看到其他设计师是如何解决类似的问题，这样您就不用走弯路。还能使您了解到人们在其他网站使用类似功能时的需求，并以此为参考来设计网站；并鼓励您思考自己一个人做设计时不会想到的设计方法。
本文中，WordPress 网站建设-SEO 站群专注于智慧手机，而不是图表。我们将介绍一些用于移动电子商务功能的设计模式和方法，如下：·主页 ·导航 ·搜索建议 ·搜索结果·搜索过滤和分类·产品页·图片库·购物车·账户或游客登入·表格
本文中所有例子都来源于移动网页，在智慧手机浏览器中执行。大多数属于大型百货零售商，因为他们有庞大的产品目录，这就需要考虑周全的设计方式，以突出搜索，并将搜索结果进行过滤和分类。本文还有许多基于电子商务的原生 WordPress APP，许多模式都能很好的运用其上。
主页
在移动装置上访问网页，主页内容通常较少，更多是帮助多用户找到所需的内容。常见的模式就是一栏促销，一栏连结列表或产品目录，很简单。关键词搜索一般都有，还有店铺的连结，订阅促销邮件及忠诚度计划的登记表。
亚马逊和梅西都使用促销商品和列表目录混排的方式。
塔吉特的促销内容比简单列表占据萤幕更大的空间，极具视觉冲击力。
Threadless 使用仪表盘模式，比起移动电子商务网页，在原生应用中较为常见。
如果购物者来您的网站是为了快速比较价格，那么他们更需要的便是简单的列表样式和搜索功能。如果他们是来关注促销和打折的，那么塔吉特的设计模式就更合适。因此，您需要分析消费者来您的网站的目的，以此决定合适的设计模式。
导航
除了使用主页作为主要的导航中心，许多网站也在多数页面上设定了导航目录，通常是作为页头。这让消费者能轻松在页面间跳转，而无需回到主页。
lowe 的导航目录中，每个选项都有图示。 best buy 的目录则使用了两栏的排版，并且用按钮替代列表。 Lowe 的目录出现时会覆盖整个页面，而 Best Buy 的目录出现时会向下推挤萤幕上的其他内容。
Macy 的导航目录包含下级选项。 CVS 则具有双栏目录，每个选项也有图示。它们的目录都在页面顶端展示。
看了上面的萤幕截图，设计网页导航的方式多种多样。 Lowe 的设计很简洁，而且图示带来了一些视觉上的亮点。而导航以外的其余内容都隐入背景，这使多用户在选择导航内容时，更集中于当前目标。 CVS 的版式相对杂乱，两栏的选项，每个专案都搭配了图示。 CVS 的目录上有许多可以点选的 bar，相互之间很接近，这在触控式萤幕上可能导致可用性问题。
有趣的是，大型电子商务网站通常不会一次显示许多导航选项。它们尝试在导航的视觉设计和网页资讯构架之间寻求平衡，仔细考虑应存在于全站导航上的专案的数量。通过网站分析来确定消费者会点选哪个目录选项，可以帮助您决定目录上的内容。可对不同的设计进行 A/B 测试和可用性测试，看看哪种设计选项太多太杂，理想方案应使人们不但找到建议内容，也能找到需要的内容。——为了商业需求，也为了多用户需求。
搜索建议
搜索建议，也叫输入提示或自动填写，当消费者键入前几个字幕的时候就显示出可能的输入结果。在常用搜索中，这对消费者来说真的很方便，特别是当输入内容很长的时候。而搜索建议的一个局限就是：在虚拟键盘上很容易输错字，这会改变建议的结果。而显示常见 “正确” 的结果可能更有用。而且，考虑使用改进的自动建议模式来减少输入内容，在有效率的前提下使用更慢的移动频宽。
在 Office Depot 网站的搜索框中输入 “draf” 时，会自动提示数个可能的结果。如果错打成 “drag”，就会显示出一些和搜索内容无关的结果。在虚拟键盘上输错字母是很常见的问题。
人们在输入时的错误，设计师也无可奈何。不过他们可以用其他方式使消费者找到产品页，例如，产品类别或顶层类别的目录可以向下延展出列表。网站管理者也可以优化搜索引擎的功能，如当多用户输入 “dragt” 时，再建议 “draft” 的结果。您使用的搜索引擎技术将决定您解决问题的方式。
搜索结果
在移动电子商务网站上的搜索结果主要使用两种样式：表格展示和网格展示。表格展示会显示一张产品缩图和一些密集排列的基本资讯如产品名称、价格。网格展示则会显示较大的图片而使用更少的描述资讯。一些网站允许消费者在两种展示方式之间切换。
zWordPress APPos 以网格显示搜索结果，这使它可以使用更大的产品图片，使消费者买鞋的时候偏于以感性作出选择。 Walgreens 使用包含按钮的表格，按钮的功能一个是在店中找到商品，另一个是将商品加入购物车。
OfficeMax 让消费者在海量的搜索专案中——如输入 “纸” 搜索——选择子类别。一旦选择了子类，搜索结果将以表格展示出来。如果搜索 “剪刀”，搜索结果的子类别会较少，这让消费者能直接在表格中看到结果。
如果产品的分级杂乱不清，此时让消费者选择子类别可能会导致一些问题。如上面在 OfficeMax 的例子中，某人想买 8.5×11 英寸的家用列印纸，他可能不知道该在 “影印纸& 多用纸” 还是该在 “镭射纸” 的目录下找。一种比较好的解决方式就是在搜索过滤器下边列出子目录，可以与其它过滤方式并列呈现，如 “颜色” 和 “尺寸” 。每隔一段时间（4-6 周）就对具有代表性的多用户、常见搜索专案和热销产品进行测试，这可有助于您洞察哪种解决方式更佳。 A/B 测试也可以揭示出哪一种方式能让更多多用户到达产品页并具有更高的支付率。
Gap 的预设搜索结果以表格展示，同时提供网格展示方式的选择。注意，Gap 也在关键词区域保持搜索专案。
Gap 的多用户可以选择搜索商品的展示方式，这让它们可以随时在易于浏览的形式和具有大图的形式之间转换。但其实 Gap 可以在网格展示方式中保留一些商品资讯——如价格（像 ZWordPress APPo 所做的那样）
一些诸如价格和颜色的细节让多用户更容易决定想要了解哪个商品的更多资讯。
在关键词区域保持搜索文字也可以提醒多用户他们正在搜索的内容，让他们更容易通过新增一些限制词（如 “红色”）来细化搜索结果。
在 Gap 中搜索 “男式 tshirts（正确写法为 t-shirts）”，您会来到无搜索结果页面（本文未截图），而且也不提供 “男式 t-shirts” 的搜索连结。 Gap 可以在搜索结果页面新增 “您是否要搜索-某物品” 的搜索建议来提升其多用户体验。 Google 就会列出 “mens t shirts” 的搜索建议，如果多用户忽略，它就会直接呈现出 “men’s t-shirts” 的搜索结果。
结果分类
将搜索结果分类可以帮助购买多用户以一种有规律的方式组织起海量的搜索结果，通常会按照价格和消费者评分排列。常见的分类介面样式是按钮和<选择>选单。
Walmart 让多用户点选三个按钮之一来将结果分类。 Sears 使用了类似的方式，但有一个 “分段控制”，Javas cript 框架如 jQuery 移动开发正在使这些类似 WordPress APP 的介面小部件对设计师来说更易用。
J.C. Penney 可以通过有点自定义样式的<选择>选单来分类结果，Eddie Bauer 则使用了浏览器的预设<选择>选单。两者都通过浏览器的本地控制来触发<选择>选单（本例中为 iphone 选择器）
Walmart 的按钮之间空间较大，点选起来不易出错，但同时也因此无法容纳更多选项，而 Sears 有四个按钮，包含一个 “全部” 的按钮，这使得多用户在分类筛选后没有找到所需商品时可以回到初始页面。用<选择>选单是一种很安全的选择，因为现代移动浏览器都支持这种方式，这使应用可以列出更长的分类选项。但是，也占用了许多有用空间。这些都是可用常规测试方法来评估的折中设计型别。
结果过滤
过滤器让多用户可以缩小搜索范围，一般基于诸如颜色，品牌和尺寸等属性。过滤器通常要划分型别（称为分面），每个分面下会显示数个值（比如，颜色就是一种分面，红色是一种分面值）常见的展示过滤选项的介面样式是<选择>选单，下拉式选单和可折叠选单。现在在技术上使单个搜索包含数个分面值是可以实现的，但也因此带来更高的互动成本，并导致无搜索结果（比如，低于 75 美元的交叉训练运动鞋）。
CVS 在其高阶搜索中使用<选择>选单来过滤结果，选择一个选单选项将立即对结果进行过滤。 JC Penney 则提供了一个下拉选单来过滤结果，并会提示出符合过滤值的产品数量。 JC Penney 也允许一个分面带有多个值，以供多用户进行一次性的选择，确认资讯多用户要触碰 “WordPress APPly” 按钮。
Kohl’s 在其每个过滤型别中使用折叠方式收纳系列核取方块。 Threadless 把所有搜索分面的值以按钮体现。两个网站中，您只需选择一个过滤值就能立刻看到结果。
在每个分面值下面显示商品数量能让消费者更清楚地了解每个选择为他们带来的结果。 Threadless 的方式是用整一屏展示出所有可用的分面值，让消费者对所有可用搜索结果一目了然。您是选用这种方式还是使用 Kohl 的方式，取决于您打算为指定产品目录提供多少过滤分面值。如果您的产品目录在分面值方面变化不定，那么您就需要进行试验找出合适的设计方式。您可以优化那些热门的产品目录的过滤结果显示页面。
产品页面
产品页是电子商务网站真正展示产品细节的页面。它们并不关于某种模式，而是关于系列模式，包括标签，折叠导航和照片库等系列元素。产品页有两种展示方式，一是包含所有产品资讯的长页面，二是包含标签或折叠导航能将资讯收起的短页面。
三星和戴尔都在产品页上逐步揭开内容，为消费者提供许多资讯。三星使用折叠导航来展开大段内容，戴尔则使用标签。
Cabela 和 Office Depot 都使用一整个长页面来展示产品资讯。这种方式需要多用户频繁滑动萤幕来获取资讯，但他们就不用触碰标签或展开折叠导航栏。您需要根据产品资讯量的多少和分解资讯的方式来选择合理的方式。
长的产品页比起带折叠导航和标签的页面需要多用户进行更多滚动操作，也令购买者需要更费力地找出特定资讯。在我自己的可用性测试中，我了解到人们对两种方式各有偏好，但是似乎对网页资讯进行划分具有更高的可用性。如果您要采用这种方式，确保在人们触碰标签或折叠导航栏的时候，被收起来的资讯能快速显示。
一种办法就是开始便一次性载入所有资讯内容，这样触碰标签或折叠导航的时候时，被收起的内容就会立即显示。如果采用这种办法，即使多用户在各种资讯之间切换的过程中掉线了也没关系。但是有个弊端：不管多用户阅读与否，也必须下载所有的产品资讯；这为服务器带来更大负荷，而且也会占多用户较多频宽。
照片库
照片库对电子商务领域如服装和消费电子行业来说特别重要。在 Home Depot 上购物时，看衣服、鞋子、高阶智慧机或平板电脑您可能并不需要看到商品的三检视，但图片总是越多越好。常用的展示方式是可滑动的照片库，“双击照片放大”，单击缩图以选择照片。
Payless 非常英明地将 “双击放大” 的提示框放在萤幕中心并持续几秒，给购物者充分的时间去消化理解网页的操作方式。对服装和鞋子来说，放大商品图片检视细节非常重要。
Dockers（上左图）具有可滑动的照片库，双击放大检视细节，而且购物者可以检视同一商品的不用颜色。 Levi（上右图）也用了类似方式，但新增了商品缩图，显示照片库内不同视角的照片。在 Docker 上，选择另一种颜色的商品会令网页重新整理，但 Levi 不会。
Levi 网站在多用户选择商品的不同色彩时大多数网页不会重新整理，这似乎能带给多用户更好的体验。但是，如果对比 Levi 和 Dockers 网站在同一天同一时刻的表现，您会发现触碰 Levi 上的颜色标签并等待响应照片载入所花的时间，竟然比 Dockers 重新整理一整个网页的时间要多。 Levi 之所以这么慢，可能是因为它还要重新整理那 5 个缩图，加上主要照片和其他不可见的元素，这种负载比较重。看来每种方式都有利有弊。
三星（上图左）和戴尔（上图右）的照片库都可以左右滑动。三星还将折叠导航合并到产品也，戴尔则单纯只有照片。
三星的方式似乎更人性化，因为页面相对更少。三星和戴尔都使用了高解析度的照片，显然在展示价值不菲的产品时图片质量很重要。戴尔的方式有一个好处，那就是消费者会更专注于产品本身，而不被页面的其他内容干扰。
购物车
购物车通常用表格来展示商品。除了展示需要购买的商品，还提供其他功能，比如可以储存订单，储存商品到收藏夹，删除商品或更新数量，选择快递或实物店拿货，接受促销卷或优惠券，以及结账等。一旦加入了商品，就可以通过网站页头的购物车图示或者全网站导航选单进入购物车。
Lowe 的购物车（上左）允许购物者从购物车中移除类似的商品，并提供快递或实体店取货的选项。 Bed Bath&Beyond（上右）的购物车也可以移除商品，商品数量可以在表格中修改，在页面下部还有一个按钮可以重新整理网页。
Crate&Barrel（上左）的购物车每栏也允许多用户移除商品，储存到收藏夹以及更新数量。每栏还包含快递资讯如费用及送货时间。 Payless（上右）也允许消费者更新商品数量，移除商品；它的购物车还提供送货选项，可以送到 Payless 实体店（没展示截图）
购物车应该提供大的实用性，因为购物者已经接近购买的后几步了。允许购物者改变数量，移除商品，使用优惠券或促销券而无须跳转到它页，这些功能在引导消费者快速购买的过程中十分重要。如果您觉得这会使网页上内容太多，可以先将其隐藏到折叠导航栏，然后使用逐步展开的方式来显示内容（比如事先隐藏促销券区域）。
结账
结账更像是一个流程而不是模式，但是模式可以应用到结账的流程中。许多电子商务网站允许其移动端应用的顾客使用现有账户或以游客身份结账。对于已经拥有账户的多用户，使用已存的支付和快递资讯，结账的过程将非常顺畅。
Crutchfield 和 Nordstrom 都允许顾客以游客身份或使用现有账户来结账。都允许以游客身份结账的移动端应用的购买者在下订单之后建立账户，都支持重置密码。
Amazon 在结账页要求填写邮件地址，无论购物者以现有账户抑或以游客身份结账。整个流程与使用电脑网页的支付流程很相似。 Target 在移动端网页提供了几个选项：登陆或以游客身份结账或建立账户，支持密码重置。
允许顾客登入或以游客身份结账，并可以重置密码对于移动电子商务的网站来讲是必要的功能。并且，应该考虑邀请手机端多用户在提交订单后建立账户，因为他们已经提供了足够多的资讯（除了密码之外）。而且到了这一步，顾客们建立账户已经非常轻松了，他们一般不会拒绝。
按下 “建立 Target.com 账户” 的按钮之后，会导致顾客的购物车被清空，顾客会觉得太麻烦而放弃。因此，确保下单后再在发货单邀请多用户注册可能更好。限制结账页面上只有两种选项能提升支付率，因为顾客需要做出的决定更少了。在主要任务流程中如结账，越少选择通常效果越好。
表格
表格常用于移动电子商务的搜索，结账，注册和输入优惠券、促销券代码时。在为小屏设计表格时，需明白一些好用的技巧：
·将表格标签放到输入栏的上面，以免当多用户输入时，标签偏离了萤幕。
·使用 HTML 输入型别来为输入区域选择合适的键盘。如果输入邮件地址，使用；如果输入号码，如 ZIP 代码，使用或者（或者会显示带有大按键的数字小键盘）
·仅把非常必要的专案设定为必填项。这会使顾客在结账的过程中更加顺畅。
在智慧手机上，处理表格的理想方式就是要尽可能的少用它们。您可以使用地理位置服务来获取并给与购物者邮编提示，您可以利用顾客早先在使用您的网站时输入的账户资讯来引导它们进入结账流程。记住知名的表格是多用户不需要填完的表格。
CVS（上左）当多用户触碰结账页面的 ZIP 码时，并不会弹出数字键盘。这使得多用户还要再多一步（点选 123）才能弹出正确的键盘。 CVS 还把所有的标签都左对齐了，这样如果多用户放大检视某个表格区域时，这些标签就可能被挤到了萤幕外。 Crate&Barrel（上右）的表格则具有更好的可用性。当多用户触碰 ZIP 码区域，就会弹出大的数字键盘，所有的表格标签页都是放到表格区域的底部对齐。
记住，表格决定了购物者如何在网页上完成交易。一定要特别重视它们，尽一切努力简化多用户完成表格所需的互动。有时候这甚至意味着尝试一些完全不同的东西。例如，Typeform 近建议采取一种新的方式，使网络表格更积极响应，更简单，也更可用。这种方式就是一次问一个问题，问题要显着地展示，使多用户填表时可以键入快捷键。虽然这种方法不一定适用于所有情况，但有时候确实很有效。
WordPress 网站建设-SEO 站群总结
移动电子商务是商家的收入来源，其重要性与日俱增。优化的移动网页提供了许多多用户在桌面购物体验中需要和期望的功能，根据 Sterling Brands and SmithGeiger 的调查显示，移动多用户更愿意通过移动网页购物，如果网页可用性高的话。
您可以使用现存的设计模式来探索不同的方法，使电子商务网页能在小屏上更快载入。不要满足于已存的样式；把它们作为发掘设计和帮助您多思考新问题的跳板。随着浏览器效能提升，考虑将原生应用程序的介面设计和互动模式应用到基于浏览器的智慧手机购物体验中来。