体验好的电商APP长啥样？这里总结了7种绝佳的UI设计原则

新闻

作者：站长之家
最近，国外设计师Jennifer Jhang对一些顶级的电子商务APP如耐克、苹果、三星、Ebay、Banggood以及Best Buy等产品进行了研究，并总结了 7 种主要的用户界面模式。

1. 登录：多个选项

登录通常是第一个障碍，设置不当会导致用户花费很多精力在上面。为了减少用户登录的难度，可以增加登录的灵活性。



尝试“懒人”登录模式。这种情况下，应该设计可选择的登录选项，比如可以让用户直达购物车或者其他功能。比如允许用户在创建账户之前，可以用游客的身份试用APP并体验其价值。

另外，考虑通过将登录选项直接关联外部账户如Facebook、谷歌(国内的比如微博、微信等)就能注册新的账户登录。这让用户可以跳过填写注册表单，而只需单击 2 次即可登录。

在Banggood的账户界面，你可以清楚的看到，想要访问“已查看”、“优惠券”内容就需要登录，Banggood还在登录时提供关联外部账户选项。

2. 搜索：支持文本、图像、声音、条形码

Pinterest CEO说过：“我真的相信相机将成为下一个键盘。”



互联网开始于一个基于文本的搜索栏，但正在演变为可以采取其他多种方式进行搜索。比如采用一个文本和图片方式的组合，无疑可以增强搜索交互。

通过视觉人工智能，图像搜索开辟了一个新的搜索方式。你不仅可以通过视觉线索识别产品，图像搜索还可以让你基于图像上下文发现新想法。例如，如果你拍了一张西红柿的照片，搜索结果可能会提供西红柿炒蛋的食谱。

另外扫描条形码可以减少出错的可能性，并能让你直接找到产品。语音搜索增加了可访问性，并为忙于其它事务的用户提供了便利。

3. 浏览：产品类别

除了直接搜索，用户还参与浏览来查找商品。产品类别可以让用户更清晰有序的的方式浏览和发现产品。



产品类别通过以一种直观的方式将产品进行分组，从改善用户搜索查找产品的能力。这就像走进一家杂货店，一眼望过去就是的我们想找的商品商品摆放的大概位置。

很多应用程序有一个单独的产品分类屏幕。其他的包括在“主页”页面上的产品类别部分。为了能向用户提供更愉快的浏览体验，可以考虑将图像或图标与类别标签结合起来。

下面，你将看到每个应用程序处理产品类别显示的不同方式。

4. 卡片的多样性和一致性

卡片是用户首先与APP交互的UI元素。卡片的多样性和一致性有助于为应用创造一个让人深刻的第一印象。



尝试为不同类型的信息创建不同类型的卡片。这在视觉上区分了信息，并帮助用户学习视觉语言。没有多样性，很难一眼就看出一张卡片代表了什么，因为它们看起来都一样。

另外，也要努力使卡片在每个屏幕上保持一致。如果你有一个特定信息的卡片类型，试着让它始终保持相同的设计风格和尺寸大小等等，这样它才容易识别。

苹果商店使用了多样性和一致性，创造了一个清晰的视觉词汇。

5. 不同用户阶段采用不同的CTA(行动呼吁)

本文开头提到的几个APP中采用的CTA按钮有几种常见模式。通常在用户不同浏览阶段会有不同的CTA按钮。



例如，Ebay有连续的“保存”、“添加到购物车”和“现在购买”按钮。当你想立即购买某一特定物品时，“立即购买”是很好的选择。然而，当用户等待打折或比较商品时，“省钱”按钮则是更好的选择。“添加到购物车”在用户一次购买少量物品时很有意义的。

而当用户还没有完全准备好购买时，页面只有一个“现在购买”按钮，那么无法解决他们的加购需求。这可能会阻碍用户的购物体验。

6. 特定产品页面的顶部标签

为了试图包含购买决策所需的所有细节，特定产品的详情页可能很长。



根据尼尔森的一项研究，以下是一个产品页面最受欢迎的功能列表：

必须拥有：产品名称，图像，价格，选项，可用性，添加到购物车，描述