大家愈加多地用他们的智能手机，台式电脑的替代品，即便是活动，如购物和采购。愈加多的人摆脱台式机和手机优化的网站上购买的商品和服务，网站创建者可以用打造的设计模式，以帮助启动一项移动电商项目。
有一个非常不错的移动电商的经验是相当要紧的。事实上，近期的研究发现，大家有67％的可能进行购买，假如一个网站，他们已经达到了我们的手机是智能手机友好的。
电源的设计模式，他们对你说其他设计师怎么办类似的问题，所以，你是否一直重新创造轮子。它们还可以使你设计的方法，以满足大家的期望开发从他们用的其他网站，他们鼓励你考虑的设计办法，你是否会想到在我们的网站。
在这篇文章中，专注于智能手机，而不是平板电脑，大家来看看设计模式和办法用于移动电商功能，包含以下内容智能手机网站建设的表现！订阅的粉碎电子书图书馆，并得到即时的无限访问所有粉碎图书，公布在过去和将来，包含数字版本，大家的印刷书本。至少有24水平电子图书一年，60电子书在第一年。订阅！）
在手机上访问时，主页的有关内容，帮助用户找到他们所探寻的。容易见到的模式是简单的单栏布局的特点网站或商品类别的营销和单栏列表。关键词搜索，一般包含主页，链接到商店定位器和注册形式的宣传电邮及忠诚度计划。
亚马逊和梅西的混合用的营销内容和列表菜单中。
目的的宣传内容占用更多的屏幕空间，不是一个简单的列表，但更强的视觉冲击。Threadless的用法的仪表盘模式，这是经常见到的，在本机应用程序在移动电商网站。
假如购物者来到你的网站迅速比较价格，然后一个简单的列表模式和搜索功能可能是更可取的。假如他们是来探索营销和销售，然后由目的所采取的方法可能是做合适的。为了回答这类问题，你需要挖掘剖析，以知道买家在你的网站正在做的。
除去用作为主导航中心的主页，也有很多网站导航菜单大多数我们的网页中，一般会在标头中。这使购物者可以比较容易地从一个网站的一部分，到另一个，而不需要返回到主页。
Lowe的站点范围内的菜单的每一个选项的图标。百思买的菜单中有两栏布局，导航按钮，而不是列表项。Lowe的菜单包含页面出现时，而百思买的页面的内容推下来的画面。
梅西的站点范围内的菜单，其中包括的子菜单选项。CVS有两列菜单的每一个选项的图标。在这两种状况下，菜单被显示在页面顶部的。
正如你可以看到从上面的截图中，有几种办法来设计站点范围内的菜单。Lowe的设计是简单的，和图标添加一个好看的视觉抛光位。事实上，其余的页面淡出到背景中，当用户选择用的导航帮助用户专注于目前的任务。CVS好像比较混乱中，有两列选项，每一个项目都配有图标。CVS'菜单还放置的特定抽头目的彼此挨近，可呈现的触摸屏上的可用性问题。
有趣的是，大型电商网站一般没太多的导航选项一次显示。他们试图平衡视觉的导航与你的网站的信息构造设计，仔细考虑的项目，应在全球导航。用网站剖析看菜单选项购物单击帮你决定了什么应该是在菜单中。不一样的设计策略进行A / B测试和可用性测试，看一个人是不是有太多的选项和压倒的人，不仅仅是建议，但需要找到好的解决方法 - 为你的企业和你的用户。
建议搜索，也被叫做提前键入或自动完成，结果显示潜在的，作为购物键入几个字符。常用搜索到的条件，这是一个真的的便捷购物者，尤其是假如搜索关键词是长期的。建议搜索的一个限制是，点击虚拟键盘上错误的字符是比较容易的，这将改变建议的结果。显示容易见到的“正确”的结果，而不是可能是有用的。另外，考虑用一个改进的自动推荐图案键入需要输入查看，以降低的量，以效果最好的方法，并借助移动带宽较慢。
Office Depot的网站在搜索框中智能手机网站建设的表现！表显示和网格显示两种主要的模式。表格显示缩略图的照片和一些基本信息，如商品名字和价格在一个紧凑的行。网格显示大图片的描述性信息较少。有的网站允许买家在这两种视图之间切换。
Zappos的搜索结果中显示其一个网格，允许其商品的大照片，一个明智之选，像鞋的销售市场。沃尔格林有一个表，其中包含在商店探寻项目，将项目添加到购物车按钮。
OfficeMax公司需要买家在选择一个子类别广泛的搜索字词，如“纸”。一个子类一旦被选中，结果显示为一个表。搜索的“剪刀”，其中就有更少的子类，买家直接到表视图的结果。
有买家选择一个子类别，或许会出现问题，假如它不清除的商品合适在一个复杂的层次结构。在的OfficeMax公司上面的例子中，有人找他们的家用打印机为8.5×11英寸的纸张可能不了解是不是在“复制”或“多作用与功效纸激光打印纸。”一个更好的办法可能是在搜索过滤器中列出的子类别，在那里他们可以在上下文中与其它过滤器一样，“颜色”和“大小”。按期测试（每4-6个星期）具备代表性的用户，一般搜索的术语和最畅销的商品可以让你深入知道哪种办法是更好的。A / B测试也可以发现其中的一个办法是不是得到更多的人的商品页面，并致使更高的转换率。
Gap的网站的访问者看到一个表，显示默认状况下，看到一个网格显示的选项。请注意，差距也维持在关键词字段中的搜索字词。
峡让买家选择怎么样，让他们从一个简单的扫描列表的视图放大图片查询搜索结果。差距可能保留一些商品的信息，但-比如价格-在网格显示（作为Zappo的）。详细情况，如价格和颜色使它更容易为购物者确定什么商品，他们期望知道更多有关。
维持该范围中的术语也提醒买家他们探寻什么，并让他们比较容易缩小结果的另一个词（如“红”）的搜索字词。
搜索峡为“男装T恤”需要购物的页面没结果（未显示），并没链接到搜索结果为“男子吨的衬衣。”间隙可以提升其搜索通过添加一个“难道你的意思吗？”的种类结果页面的问题。Google处置这样的情况，列出“男装T恤”建议的查看，然后提交结果为“男装T恤”，假如该建议被忽视。
结果排序，帮助买家组织沿着一个连续的值，一般是数字的，如价格和买家的评级结果一大套。通用接口模式进行排序的按钮和下拉菜单。
沃尔玛让买家选择三个按钮对结果进行排序。西尔斯用类似的办法，但与“分段控制”。Javascript框架，如jQuery Mobile的这类应用程序接口部件更容易为设计者提供。
JC Penney公司可以通过下拉菜单进行排序，稍微定制的风格，而Eddie Bauer的用法浏览器的默认下拉菜单。这两个触发浏览器的当地控制下拉菜单（在这类例子中，iPhone选择器）。
沃尔玛的按钮之间的间距的大小和大方，让你更好的自来水的目的，不过，公平地说，沃尔玛只有三个选项，而西尔斯有四个。西尔斯列入“全部”按钮可以让购物者回到原来的结果页面，假如他们没找到他们想要的东西后，排序。用下拉菜单是一个比较安全的选择，由于它是现代移动浏览器的支持，并允许较长的列表的排序选项。然而，它也需要花费很多宝贵的空间。这类种类的设计权衡，可以按期测试与评估。
过滤器使购物者，缩小其结果的基础上的一个或多个属性，如颜色，品牌和规模。过滤器一般是组织的种类（称为面），与每一个小刻面（比如下出现的几个值，颜色是一个面，和红色的一个方面是值）。通用接口模式显示过滤选项的下拉菜单，下拉列表和手风琴显示。从一个面内时，可以应用一个或多个值中选择滤波。虽然允许一个单一的搜索值超越一个方面，技术上是可行的，它带有一个更高的互动本钱，并可能致使的任何结果（比如，交叉培训，本钱低于75USD的运动鞋）。
CVS用下拉菜单中的“筛选”选项卡中进行筛选。选择一个菜单选项，将立即对结果进行筛选。JC Penney公司提供了一个下拉列表中，选择过滤器和显示商品的数目相匹配的过滤器值。JC Penney公司也可以在一个屏幕上，贸易是购物者点击“应用”按钮被选中多个值从一个方面。
科尔的每一个过滤器种类，用的手风琴公开了一组复选框。Threadless的暴露了其搜索方面作为按钮的值。在这两个网站，选择一个过滤器值将立即筛选结果。
显示项目的数目可依据每一个面值到哪种买家将得到每次选择提供了更大的透明度。Threadless的“的方法显示所有可用的内容值占据整个屏幕，但它为买家提供了在一清二楚地查询所有些过滤提供给他们的选择。无论你采取这种方法，或者用像科尔的手风琴非常可能依靠上的方面值是多少现在对于一个给定的商品类别。假如你的目录具备高度的变异面值为每一个类别的数目，那样你将需要进行实验，以找到适合的设计。你可以由于买家用这类商品类别过滤器的最佳化过滤界面。
商品页面是电商网站，真的展示他们的商品在细节。他们是否一个“模式”这个词的真的意义上的，而是一个集合的模式，包含如制表符，的手风琴和照片画廊。两种容易见到的办法到商品页面的所有商品的信息或一个网页的标签或手风琴，以便逐步披露的信息，买家需要一个非常长的网页。
三星和戴尔的逐步披露内容上的商品页面，其中有不少购物者的信息。三星用的手风琴公开的信息块，而戴尔用制表符。
Cabela的办公用品都用了一个非常长的网页显示的商品信息。这种办法需要更多的刷卡向上和向下得到的信息，但它使购物与小标签，或操纵手风琴头。你的选择将取决于信息的量与商品有关联的信息可以被分解成逻辑部分与怎么样。
龙商品比分解成可管理的数据块用制表符或手风琴的页面，页面需要更多的滚动。他们还需要买家把更多的精力放在探寻特定的信息，他们正在探寻。在我一个人的可用性测试，我听到有人表示这两种办法的爱好，但他们好像有一个简单的工作分解成逻辑块的页面。假如你用这种办法，请确保刚开始没显示任何内容呈现迅速购物者点击的选项卡或手风琴。
最明显的方法来完成，这是加载页面的所有内容，一度让隐藏的内容几乎立即出现。这种办法有它的优势，为用户的互联网连接时降低，而他们之间的切换部分。大的缺点是，所有些商品信息已被下载，无论是实质查询或不增加更多的负载对服务器和用更多的购物者的数据计划，该计划可计量。
照片画廊尤其是在电商行业，如服饰和消费电子商品的重点。你可能需要从三个不一样的角度，家得宝在购物时，看到一个扳手，但更多的图像时找衣服，鞋子或者高档智能手机或平板。几个常见的模式是swipeable画廊，“双点击放大，缩小”，用于选择照片的缩略图。
Payless用一个swipeable的画廊，从不一样的角度，以显示其商品。用户也可以点击放大才能看到细节，如缝合和扣眼。
Payless明智地维持其“丝锥放大”调出屏幕上的几秒钟，给购物者的时间去知道怎么样浏览网页，仍然注意到它。放大照片查询商品的详细情况的能力是尤为重要的服饰和鞋。
码头工人（上图左）有一个swipeable照片画廊，双，挖掘到放大的细节的，买家可以看到一个商品在不一样的颜色。列维的（右上图）采取了类似的做法，加上缩略图的表示照片在画廊的角度。泊坞窗“网站上选择一个新的颜色会致使整页刷新，而李维斯没。
李维斯维持大部分的页面刷新时，购物者改变颜色，起初好像是一个更好的客户体验。但，从简要回顾了两个网站于同日在同一天的时间，码头工人的整页刷新，出现了运行速度更快的时候，我拍了拍色样页的新的照片出现的那一刻。列维的缓慢可能已导致需要被刷新，除去主照片，照片，或其他看不见的原因，如交通繁忙的负载由五个缩略图。每种办法都有其取舍。
三星（左上图）和戴尔（上图右）都用他们的商品swipeable照片画廊。三星使用了画廊到的手风琴在其商品上，而戴尔用一个单独的页面。
三星的做法好像愈加人性化，由于它具备较少的页面浏览。三星和戴尔都去大型的好看的晰度照片，在昂贵的商品时，由于非常明显的图像水平是至关要紧的。戴尔的办法的一个优点是，它可以让购物者把重点放在我们的照片，没任何分散注意力的页面内容。
购物车显示商品一般用表模式。除去要购买的内容显示，他们还提供额外的功能，比如可以保存命令，保存到我的最爱我的喜欢，删除或更新的数目，选择送货或店内取货，适用于营销或折扣券代码，并检查了。一旦商品已被添加，购物车被常见达到通过在网站的页眉或全球导航菜单中的选项图标。
每一个表行的罗威的购物车（左上图）允许用户删除相应的商品从他们的车，它包含用于运输或店内取货的选项。床浴和超越（右上图）也允许删除的项目;表中的每一项商品的数目可以改变一个按钮上越走越远更新的页面。
板条箱和桶（左上图），允许用户删除商品，保存到珍藏夹和更新数目的表中的行。每一行还包含运输本钱和交货时间等信息。Payless（右上图），也可以让买家更新的数目和删除项目，它的车还提供了一个选择的出货选项，包含将商品送到一个Payless专卖店（未显示）。
购物车应提供大的功用，由于买家购买的最后一点是接近的。让购物更改数目，移除项目和应用推广或折扣券代码，而不必去到另一个页面，让他们飞速通过采购途径的重点。假如你感觉这增加了太多的内容的页面，你可以用渐进披露背后的手风琴，直到它需要隐藏一些内容（如营销代打字段）。
Checkout是更多的比的图案的办法，形成模式，虽然能应用到付款处流量。很多电商网站允许顾客用移动我们的网站上检查出与现有些帐户或作为嘉宾。人哪个已经有一个帐户，结帐过程是通过用现有些付款和发货信息，大大简化。
克拉奇菲尔德和诺德斯特龙都允许顾客检查作为嘉宾或通过用他们现有些帐户。让手机购物已签出作为嘉宾把他们的订单后，创建一个帐户和密码重置都支持。
亚马逊的邮件地址，需要的第一页，结账时，客户是不是有一个帐户，或作为嘉宾被检查出。的经验是很像网站用户的桌面上。目的移动网站上提供的选项中的帐户，以检查为客人或创建一个帐户。两者都支持密码重置。
允许顾客登录或检查作为嘉宾，并重置其密码是一个需要为移动电商的网站。另外，还要考虑邀请买家到我们的手机上创建一个帐户后，把他们的订单，由于他们已经给了你足够的信息（输入密码除外），如此做的。这可以让客人更大概的努力创建一个帐户，由于在这一点上应该是最小的。
的“创建一个Target.com”的按钮或许会致使一些废弃的购物车假如购物者走这条路，并决定这是太多的努力。确认订单，然后再邀请注册在发票上页或许会更好。限制初始结帐屏幕两种选择，可以提升转换，由于购物者或有更少的决定，使工作时，在小屏幕上。更少选择的重点任务，如检查出成效更好。
形式是最常见的移动电商，搜索，检查，登记，并输入折扣券和营销代码。请注意形式为小屏幕设计时的一些好做法智能手机网站建设的表现！智能手机网站建设的表现！网页URL：
