本文探讨了电商网站UI设计的关键要素，强调了简洁导航、产品页面细节展示和规格选择的重要性。建议使用多功能导航，如简化菜单、智能搜索功能，以及在产品页面上清晰呈现运费和退货政策等重要信息。此外，产品规格应易于选择，避免让用户在下单前做过多决策，以提高转化率。
Nov 10 阅读时长约12分钟
作者：Suzanne Scacca
翻译：Fiona
审校：Fiona
当你想象购物者在你创建的电商平台中浏览时，你或多或少希望他们遵循这个过程：
步骤1：进入首页或者分类页。
步骤2：使用导航元素引导用户进到商店，并根据他们要查找的特定内容进行准确定位。
步骤3：查看他们感兴趣产品的描述和其他相关的购买详细信息。
步骤4：选择产品规格(如果可能)，然后将所需的物品添加到购物车中。
步骤5：付款。
他们在执行过程中可能会遇到一些偏差(例如浏览相关产品，仔细阅读不同的类别以及将商品保存到心愿单以备不时之需)。但是，在大多数情况下，这是你建立的最重要的也是最有效的途径。
在这种情况下，对于设计师来说，特别重要的是要使购物者在此过程中遇到的界面元素很准确。如果用户界面内有任何不顺畅，你不仅会发现路径偏离意外增加，而且还会从该网站反馈出更多偏离。
因此，这就是以下文章将要重点讨论的内容：如何确保ui设计在用户浏览过程中具有吸引力，直观，有趣且顺畅。
让我们研究一下用户从进入到结帐时会遇到的用户界面的三个部分。我将使用Shopify构建的电商网站来做这一点：
1. 创建跟随用户浏览的多功能导航
曾经有一段时间，电商网站拥有大型菜单，用户必须对其进行分类以找到所需的产品类别，子类别和再下一级类别。虽然你现在仍然可能遇到这种情况，但更好的是根据购物者的浏览进程进行导航。
主要菜单
首先要做的是简化主菜单，使其在主类别标题下仅一层级。例如，这是United By Blue的网站展示。
图片来源：United By Blue
“商店”下的产品类别都整齐地展示在“女士”和“男士”等标题分类下。
唯一的例外是带有图像的“新到货品”和“口罩和面部遮盖物品”这几个类别。这同主菜单中“礼物”用浅蓝色字体和“销售”用红色字体有相同的原因相同。这些对于United By Blue的购物者来说是最新和相关的类别，因此应该突出显示它们(同时不能太过突出)。
回到网站，让我们看看设计者如何使移动网站井井有条：
United By Blue移动网站使用了更加便于移动的菜单设计。
我们不会将桌面菜单直接缩小到用户手机，变成需要在此处放大和缩小的菜单，而是看到了适合移动屏幕的菜单。
与桌面网站相比，它需要多点击几下，但购物者应该不会对此感到困扰，因为菜单不会太多层级(同样，这就是为什么我们不能再使用大型菜单的原因)。
产品搜索结果页面
如果你要为具有复杂库存(即很多产品和类别层次)的客户构建电商网站，则“产品结果”页面需要自己的导航系统。
为了帮助购物者缩小一次查看的产品数量，可以在此页面的设计中包括以下两个元素：
1. 通过产品规格在缩小搜索结果。
2. 根据购物者的优先级排序整理产品。
我在Horne网站上的搜索产品结果页面突出显示了这些：
图片来源：Horne
虽然可以将筛选功能放在左侧栏中，但放在上方，水平对齐的设计是更好的选择。
这种设计可以节省空间，以此可以一次展示更多产品，这也是一种对手机端展示更好的选择：
看看过滤器，排序和搜索在Horne移动网站上的显示方式。
请记住，UI设计的一致性对用户来说很重要，尤其是随着越来越多的购物者采取多途径进行购物。通过在设备之间一致地显示筛选/排序选项，将在浏览过程中为他们创造出更加可预测和舒适的体验。
面包屑设计&搜索
随着用户更深入地进入电商平台，他们仍然可能需要导航的帮助。有两个UI导航元素可以帮助他们解决问题。
第一个是产品页面左上角的面包屑设计，类似于tentree的操作：
Tentree如何使用面包屑来帮助购物者从产品页面导航的示例。(图片来源：tentree)
这种设计最好在类别中包含子类别的网站上使用。用户距离产品结果页面越来越深入，筛选和分类的便利性也越来越差，这时候面包屑导航将变得越来越重要。
另一方面，搜索栏是一个导航元素，无论购物者在购物过程中的哪一步，都应始终可用。这适用于各种规模的店铺。
现在，搜索栏无疑会帮助那些时间紧张，找不到所需的东西或只是想快速找到自己已知的产品的用户。但是，可以主动预测用户正在寻找什么的 以AI为驱动的搜索栏是更明智的选择。
这是在Horne网站上的应用如下：
看一下Horne网站中包含的智能搜索功能。(图片来源：Horne)
即使用户尚未输入完搜索词，该搜索栏也会开始提供建议。左边是匹配的关键字，右边是相应的最匹配的产品。最终目标是加快用户的搜索速度，减少他们原本可能会感到的压力，或沮丧。
2. 在产品页面上一次性显示最相关的详细信息
Vitaly Friedman最近在LinkedIn上分享了此提示：
他是对的。访客花更多的时间来挖掘有关产品的详细信息，他们放弃并尝试另一家商店的机会就越大。
对于许多用户而言，单独收取运费是一个巨大的症结所在，不幸的是，太多的电商网站一直等到结帐时才告知他们运送成本和延误时间。
因此，有63％的电商用户由于运费而最终放弃了在线购物，而有36％的电商用户由于收到产品需要长时间而放弃。
这些并不是电商用户想要提前知道的唯一细节。他们还想知道：
退货和退款政策，
使用条款和隐私政策，
可用的付款方式，
提供全渠道购买和取货方式选择，
等等。
但是，这一切要如果在首屏展示？
在折叠上方显示30秒间距
这就是Vitaly所说的。你无需将所有产品的细节都压在折叠上。但是商店应该只能使用该空间中的商品来销售产品。
例如，Bluebella具有节省空间的设计，并且不会影响可读性：
Bluebella的节省空间的设计提供了购物者需要的所有产品细节。(图片来源：Bluebella)
图片库位于页面左侧，其余部分可用于产品摘要。由于标题字体的大小以及页面的层次结构各不相同，因此很容易理解。
根据其设计方式，您可以知道最重要的细节是：
产品名称;
产品价格；
产品型号选择；
添加至购物车和心愿单按钮；
配送和退货信息(整齐地显示在一行上)。
由于可以像手风琴一样用来折叠和展开，其余产品的详细信息都可以放在折叠上方。
如果还有其他会影响用户下定决心的重要细节，例如产品评论或尺寸指南，请在首屏上建立链接，将其移至页面下方的相关部分。
快速说明：出于明显的原因，这种布局无法在移动设备上使用。因此，当30秒间距出现在折页下方时，产品图片将获得最高收入。
使多余的UI元素小一些
即使您能够简洁地提供产品说明，弹出窗口，聊天窗口小部件等额外的销售和营销元素也可能与冗长的产品页面一样令人讨厌。
因此，请确保不会像Partake一样进行布局：
图片来源：Partake
左下角的红色符号使用户能够控制网站的可访问性功能。右下角的“奖励”按钮实际上是一个弹出窗口，样式就像一个聊天小部件。当打开时，它会邀请用户加入忠诚度计划。
这两个小部件只有在单击时才打开。
Allbirds就是包含了多余其他元素的网站，但同时也避免了上面的方式：
图片来源：Allbirds
在这个网站中，在他的右下角包含一个自助聊天窗口，需要进行点击才能打开。它还将有关当前退货政策的信息放在顶部的消息栏中，以给到更多产品页面，也更加关注于产品的详细信息。
3. 使产品规格尽可能的易于选择
对于某些产品来说，用户除了：“我是否要将此商品添加到购物车中？”
以外，无需做出其他决定， 对于其他产品来说，用户必须先选择产品规格，然后才能将商品添加到购物车。在这种情况下，需要使此过程尽可能轻松。你可以采取一些措施来实现这些。
假设您设计的商店出售女士内衣。在这种情况下，你必须提供颜色和尺码等规格。
但是，你不想为每个产品创建一个下拉选项。想象一下，如果您要求用户单击“颜色”，而他们不得不对十几种选项进行排序，那将是多么乏味。另外，如果它是标准的下拉选择器，则色标可能不会出现在列表中。取而代之的是，用户必须选择一个颜色并等待产品照片更新才能看到它的外观。
这就是为什么你应该决定如何设计每一个规格。
让我们以Thinx的此产品页面为例：
Thinx产品页面包括针对特定版本设计的版本。(图片来源：Thinx)
此页面上有两种规格：
颜色规格显示一行色样。单击后，将显示颜色名称，并且产品照片将相应调整。
尺码规格列出了从xxs到3xl的尺码。
注意大小是如何附带“尺码图表”的链接的。这是因为，与颜色规格不同，颜色可以非常清晰的看到商品区别，而尺码会在商店之间以及区域之间有所改变。该图表为如何选择尺码提供了明确的指导。
现在，Thinx对每个规格使用一个方形按钮。不过，如果你想在用户在规格上做出的选择之间做出区分(说实话，这可能是更好的设计选择)，则可以对其进行改变。
例如，Kirrin Finch网站将其尺码放置在空盒子中，将颜色选项放置在实心圆中：
图片来源：Kirrin Finch
虽然差异不大，但是应该足以帮助用户从决策到决策的平稳过渡，并且不会错过任何必填字段。
现在，假设你的店铺不出售服装。而是销售床一类的物品，其中显然不包括颜色或尺寸之类的选择。至少，与衣服不同。
除非可以使用众所周知的缩写，符号或数字来表示每个规格，否则应使用另一种选择器。
例如，这是Leesa网站上的产品页面。我已经打开“选择您的尺寸”选项，以便于查看这些选项的展示方式：
图片来源：Leesa
为什么这是一个下拉列表而不是框？
首先，尺码名称的长度不同。因此，选择器的框大小将不一致，或者其中一些将有大量的空白。看起来真的不好看。
而且，Leesa明智地利用了这个小空间来提供有关每种床垫尺寸的更多信息(即正常价格与销售价格)。因此，这不仅是针对特定规格选择器的最佳设计，而且还是在产品页面上展示大量信息的有效途径。
关于缺货的注释
如果您想消除在线购物过程中的所有摩擦，请确保针对缺货的款式设计出独特的样式。
再次仔细查看Kirrin Finch示例：
图片来源：Kirrin Finch
毫无疑问，哪些选项可用，哪些不可用。
尽管有些用户在意识到自己喜欢的衬衫颜色只有几种尺寸时可能会感到沮丧，但想像一下，如果他们在选择所有规格之后才发现缺货，他们会感到多么生气？
如果选择产品是他们在单击“添加到购物车”之前采取的最后一步，请不要向他们隐藏此信息。你要做的就是在用户花时间阅读，关注和喜欢上产品之前，发现“16”尺码的商品已经售罄。
包裹
他们在说什么？好的设计是看不见的？
这是为电商网站设计这些关键用户界面时需要记住的。当然，你客户的商店必须具有吸引力且令人难忘...但是，将用户带入网站的UI元素不应让他们暂停。因此，在为用户设计主要购物流程时，简单和易用是您的首要任务。
如果您有兴趣将这些UI设计理念用于新客户，请考虑以商店拓展人的身份加入Shopify合作伙伴计划。通过为客户建立新的Shopify商店或将商店从其他商业平台迁移到Shopify，您将能够不断获得收入。
原文：https://www.smashingmagazine.com/2020/11/best-practices-ecommerce-ui-design/
感谢阅读，以上内容由花火译文小组翻译，转载请注明出处！
往期精彩译文
通往成功的6个步骤：重新设计一款应用程序
谷歌新的应用程序图标为什么不好以及如何改进
栅格化设计终极指南
Office以全新的图标迎接工作的新时代
如何提升你的用户界面设计能力
- END -
花火圆桌
花火社群自2017年成立至今已经汇集了 18000+设计小伙伴，在这里 有干货、有直播、常分享、共成长 ，快来加入我们吧！
扫一扫
1282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
