外贸商城网站的首页既是品牌的门面，又能帮助新老客户更好地各取所需。

每个细节都应旨在建立更好的第一印象和鼓励特定行为，无论您的目标是售卖产品，还是获取更多的注册使用者。

商城首页的设计途径有不少。

这篇文章包含一些外贸商城首页设计的小窍门，不管您是新手还是单纯想升级一下商城网站都可以参考一下。

一、主页设计过程中遇到的问题 一个好的商城首页设计并不代表它适用于所有的电商。

如果您正在寻找一个设计方案，但是还摸不著头脑，那么可以先从以下几个问题入手： · 您希望网站访客完成什么行为？（如立即购买，注册使用者等）· 您如何才能让他们更轻松地做到这一点？ · 实现您的目标需要经过多少步骤？ · 他们需要提交多少信息才能进入到下一步？ · 有可以省略的步骤吗？ 有些消费者在访问网站的时候目的性比较明确，但是也有一部分人并不是很清楚。

您在设计网站的时候不仅需要考虑到这一点，而且还要综合考虑您为网站所设置的主要目标。

一个好的网站不但要能帮助有目的的消费者得其所需，还应能引导那些没有方向的潜在消费者。

二、商城首页设计需要达到哪些目标? 商城网站访问者在首页的平均停留时间应该在 10 至 20 秒。

从设计的角度来讲这就意味著网站的导航流程需要非常清晰，这样访问者就可以更快地为自己（和您的业务）选取最佳途径。

由于 “决策规避”（即人们通常不会花太长时间做决定）的心理现象，使得达到以上这一目标显得更为紧迫。

对于网站来说，决策规避也就是退出主页或点选返回按钮。

要想避免这一点，WordPress 外贸网站设计的首要任务就是说服潜在消费者继续留在页面上。

要做到这一点，您需要理解网站最具价值的地方所扮演的角色。

2.1  能够激发特定行为的 “首屏” 内容 当一个 WordPress 外贸网站设计师在提及主页的 “首屏” 区域时，他们指的是在来访者决定下拉页面前所看到的东西。

当您在考虑将哪些内容放在首屏及其如何与主页其它内容联合作用的时候，您应该把重心放在您希望来访者完成哪些特定行为，他们所需要的初步信息，以及您怎样可以帮他们做决定这些方面上。

以上图的 Morning Recovery 网站为例，他们的业务是售卖一款防宿醉产品。

所以他们的目标是引导潜在消费者购买他们家的龙头产品，为达到此目的他们设计了一个颜色鲜艳的、以产品为中心的视觉和一个清晰的行为号召按钮（Call to Action，以下简称 CTA）放在他们的 “首屏” 区域，以引导潜在消费者进行购买。

消费者在该页面面临两个可选捷径： 1. 点选下一步进行购买 2. 首屏下拉获取更多信息——使用者评价，视频，有关产品原料的信息。

许多网站头部会使用一个醒目的标题和具有说服力的副标题，以及引人注意的视觉来吸引新使用者并带领他们对品牌进行更深的了解。

其实从一开始您就可以通过许多方式来吸引消费者，比如说在导航栏上方设计一个促销类横幅，可以是特价促销或免邮等。

2.2 清晰的导航栏 一个主页的导航栏清晰与否取决于它的简洁度。

这可能跟您要满足不同消费者的需求有点自相矛盾，但您得保证消费者能够在主页上能够进行快速浏览。

头部导航应该越简洁明了越好，将多数消费者的需求放在首位。

Orbit Media Studios 的策略总监 Andy Crestodina 认为网站上不应有超过 7 个的导航连结。

人类使用一种叫做 “组块” 的记忆法，将信息分解成较小的 “组块” 单元进行记忆。

“组块” 越少，记起来就越容易。

在 1956 发表的一个颇具影响力的研究中，心理学教授 George Miller 总结说，我们的短期记忆通常只允许一次性容纳 7 个专案。

那些含有太多导航项的网站，往往会给人一种拥挤杂乱的感觉，因而会增加使用者离开或者走错路的可能性。

一个比较好的策略就是合理安排导航项，从左到右安排，将最重要的页面放在左侧。

如果您有很多产品和系列，那么把重点放在主要的高级系列上，使用超级选单或者下拉选单来建立二级导航。

二级导航能够更好地帮助您对产品和页面进行组织分类而不影响消费者的购物体验。

就拿 UNCONDITIONAL 的主页（如上图所示）来说，他们巧妙地通过简单的主导航和二级导航展示丰富的产品类目。

有一些网站还会根据自己的主要需求在主导航栏上设立了介绍页面（关于我们）和联络页面，常见问题（FAQ）页面，或者其它的页面。

但是如果您发现这些页面的转化效果不如预期，那么它们很可能是转化失败的问题所在。

如果是这样的话，最好把它们放在网页底部。

2.3 吸引眼球的视觉 决策规避不仅体现在导航栏上，网站上其它的因素也会对其产生影响。

在设计网站的时候清楚地认识到使用者注意力的有限能够帮您分析主次因素。

无论您是对某个产品或系列进行促销，还是想吸引潜在客户，视觉在吸引使用者的注意力方面扮演者极为重要的角色。

以下是将视觉整合到主页首屏区域的一些途径：  新增含文字的图片 这种首屏视觉的风格通常由一个单独醒目的图片，一句简单的文案和一个行为号召按钮组成。

对于那些希望把诸如限时优惠、龙头产品或当季系列之类的主要促销放在首屏上方的电商来说，这是最佳的途径。

图片幻灯播放 您也可以考虑使用图片幻灯播放来展示一个特定的折扣，一组产品或者高清产品图。

对于那些拥有一些类目且产品丰富的商家来说，这是一个不错的手段。

他们可以用它来推广其中一些产品系列或希望推广的页面。

您需要合理安排播放的先后次序，先放最主要的。

而且建议不超过三个图片，因为消费者在进入下一步前不会花太长时间看一张图片。

视频 一些品牌会从主页上一个背景介绍的视觉中获益。

但是对于那些创意性强或者较为复杂的品牌来说，在真正感兴趣之前可能有必要先告诉消费者如何使用产品。

以 Bottle Cutting Inc 的主页为例，许多访客可能还不知道他们到底需不需要他们的产品，所以品牌在主页上通过新增视频展示来增加刺激性——这也是转化过程的一个很有必要的步骤。

由于视觉起到直接和明显的作用，所以必须确保它们的高清质量及其品牌的真实代表性。

如果您不是专业摄影师，您可以请一位专业摄影师或者使用 Shopify 模板编辑中的 image picker 的免费素材相簿。

2.4 一个直接的 CTA 可以把 CTA 理解为高速公路的出口标志，它应该简短精悍，醒目而且能够对需要帮助的司机起引导作用。

您的 CTA 及其连结需要能够引导消费者采取符合主页主要目标的步骤。

它可能会转至最新产品系列的连结或者让使用者观看视频来获取更多信息。

从 CTA 按钮独特的设计中，消费者应该马上知道点选哪里。

找到这个按钮所需的时间越长，消费者就会越迷失方向或直接放弃。

上图所示的 PopSockets 主页，在带领消费者走上理想的转化道路方面就做得很不错。

他们用醒目的产品视觉来吸引注意力，而且黑白相间（与背景色区分开来）的 CTA 按钮在前方正中央。

首屏上方所显示的内容也是主页的主要目标：引导使用者直接浏览最新产品线。

在您下拉时，您可以看到更多的 CTA 按钮来购买其他产品。

2.5 易于访问的购物车 对于许多电商网站来说，购物车属于主页中不可分割的一部分。

让导航栏更直观的其中一个目的就是确保购物车更容易被找到。

一个 “置顶” 购物车（有时候又称 “slide-out” 购物车，可在部分 Shopify 模板中找到）是一种在浏览过程中全程显示的购物车，一般在页面右上角显示。

不仅如此，它还可以显示购物车里已有的商品数量。

一个显眼的购物车提示，不但显示了已加入购物车的商品数量，还可以提醒消费者他们的购买正在进行中并鼓励完成购物。

底线：使购物车一目了然而且容易进入。

Chubbies 在主页设置了一个红色提示，旨在提醒消费者购物车内的商品数量，而且还有一个置顶购物车，使得消费者很容易就可以继续购物或直接结账。

2.6 一个搜索栏（适用于更多的产品系列）除了简洁明了的导航栏与置顶购物车之外，很多电商会在主页新增一个 “搜索栏” 来帮助那些目的性比较明确的访客搜索想要的产品，特别是在网站上有很多产品或是很多内容的情况下。

旗下拥有一系列各种各样化妆品的 Morphe 就是一个很好的例子。

为了让消费者更容易找到他们想要的产品，Morphe 新增了一个智能搜索栏，它可以自动完善访客的搜索需求并推荐相应的产品，系列或者页面。

这就在主页和访客目标页之间建立了直接的桥梁。

一般来说，在经过一个完整搜索的消费者更容易完成转化。

如果您的品牌旗下拥有很多产品，一个简单快捷的搜索栏对于可能会将顾客拒之门外的复杂导航来说是一个不错的选择。

如果您想在您的 Shopify 商店里新增一个智能搜索，您可以试一试 Smart Search & Instant Search 或者 Instant Search +。

03 三、首屏之外：其它要考虑的元素 在首屏下方提供的元素（当使用者下拉滚动时）不一定就不重要——他们通常是对已有内容的强调和拓展，为相同的转化目标提供其他的实现途径，而且让消费者更容易访问其它页面。

以下是一些可以加入主页设计或底部的元素，可以根据您的网站目标来选择。

博客、视频及其他内容 博客和视频内容对于 SEO 来讲很重要，但是首屏上方的内容足以转移消费者的注意力并让他们对产品失去兴趣。

您所需要的是能够引导潜在消费的内容，而不是其它的杂七杂八的东西。

可以考虑将内容连结置于首屏下方，或者放在网页底部，特别是当内容不是业务的核心方面，但它可以让决定浏览网站的潜在消费者找到这些内容。

如果您要推广内容，您可以在主导航栏新增一个连结，但是这类推广最好放在社交媒体上，邮件或第三方网站传播，这样可以从网站外部引流。

举个例子，售卖环保且易携带的炊具和照明装置公司 BioLite Energy 通过将包含主要信息的主页视频内容插在首屏与网页底部之间的地方，避免了使用者将注意力分散到他们的核心价值主张之外。

其他从博客到 YouTube 频道等内容都在其下方。

社会认同：使用者评价、认可与媒体报道 社会认同是对品牌的认可，通过利用来自老顾客或专家的现有信任来获取潜在消费者的信任。

它可以包含媒体报道，使用者评价，社交媒体释出，Instagram 发图或者红人或专家的认可。

如果您拥有具有说服力的社会认同，建议可以将其放在主页上。

下图显示的 ErgoDox 主页撷取了社交媒体上的一些使用心得以及来自知名公司员工的推荐来作为其产品质量作担保。

但是他们把这些内容放在靠近处，在这之前介绍了产品的功效。

低优先顺序与附加产品 可以把比较早的产品和附加产品放到主页靠近网页底部处。

您需要重点推广龙头产品或最新产品线。

那些可以作为主产品的补充且不是特别贵的产品可以作为结账时的增销推广，也可以放在首屏下方方便消费者知晓，如果您卖的产品需要更换零件或替换的话。

LIV Watches 主要卖手表，但是他们也推广像表带之类的优质附加产品，把它们放在主页靠近底部的区域。

低优先顺序页面       低优先顺序页面因业务模式而异。

通常情况下，像服务条款，隐私权政策和退货政策这样的页面都是放在网页底部。

因为大多数网站都会将这些页面的连结放在网页底部，所以很多使用者如果需要去这些页面的话会直接去网页底部找。

其它如关于我们，联络信息，店铺地址，或者订单跟踪页面等也可以加到网页底部。

但是如果这些页面真的能够帮助您获得转化，或是实现其中一个主要目标的话，您也可以考虑在主导航栏上为其安排位置，甚至是加到主页设计中。

例如，一个售卖订阅服务的商家如果在主页导航栏上新增一个明显的 FAQ 可能会很大地降低销售量。

或者，像 Bellroy 这样一般需要线下购买产品的商家，您可以通过明显的 Store Locator（店铺定位）连结帮助消费者定位实体店铺。

      在决定一个页面是否属于低阶别，问问自己如果您直接将访问者导航至该页面的话您会获益多少，以及您是将消费者驱离还是导向预期效果。

04 符合手机的主页设计  手机网页浏览量在过去近十年内持续增长。

由于您的一部分流量是来自手机使用者，在主页设计的过程中也需要考虑到手机使用者这一因素。

简化主页，引导使用者的特定行为对于手机使用者来讲尤为重要。

如果您是 Shopify 使用者，在 Shopify 模板商店里的任何一个模板元素都会根据屏幕大小进行自动调整。

但是，您要考虑到那些在电脑桌面上完美展示的图片在手机屏幕上看起来可能因为被截图看起来有点怪。

CTA 按钮可能有点难找，或是被调到一个不太显眼的地方，这样消费者很容易就错过。

在 Shopify 模板编辑中，通过预览顶端的切换选项您可以很容易地预览各种主页设计在不同装置上的效果。

05 过一段时间后升级设计 您可能也很清楚，完成一个网站的主页设计没有一个绝对的解决方案。

像人口统计、品牌推广、商品数量、营销渠道或其它因素都可以通过复杂的方式影响到使用者行为。

这也就是为什么要经常把主页设计看成是正在进行中的专案，在一段时间后通过流量和销售量来评估并调整主页。