首页 > 优化 > 关键词  > APP设计最新资讯  > 正文

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

2020-10-15 08:40 · 稿源:站长之家

最近,国外设计师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. 特定产品页面的顶部标签

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

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

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

值得拥有的:评级或评论,附加图片,视频,缩放/平移,相关推荐,愿望列表

在页面顶部放置标签是帮助用户快速找到感兴趣话题的一种方法。它们甚至在用户开始向下滚动之前就显示屏幕内容。

标签应该包含相同层级的相关内容,同时应该要可展开更多详情。在添加主题时,可以使用可滚动的固定标签。

在这里,Samsung Shop和Chewy使用固定标签,而Drop使用可滚动标签。

7.付款:渐进式展示

渐进式展示信息是指显示适量的信息。它通过多屏展示分解信息,同时仍然揭示主要主题,从而降低了复杂性。

如果没有做到这点,用户可能会觉得结账很乏味,甚至会放弃购物。面对一张填满信息的表格会让人看着难受,看到同样的表格被分成几个部分,感觉上就更容易处理。还要记住,你需要在页面的下半部分留出放置键盘的空间。

组织这种复杂性的一些方法是使用手风琴效果、列表或进度指示器。手风琴垂直展开,展开列表就会展示一个屏幕页面,显示更多信息。进度指示器显示用户在结账步骤中的的进程。

耐克似乎使用了手风琴效果、chewy和使用列表模式,而Drop在结帐时使用了进度指示器。

结论

通过研究当前的APP,你可以学到很多东西。观察产品设计决策背后的原因,我们可以找到新的见解。使用合适的UI模式创建一个从下载到结账的无缝体验的APP。

注:文章由站长之家编译自uxdesign,原文标题《7 UI patterns in e-commerce apps》。

手机点击关注站长之家旗下公众号站长视界,ID:chinazshijie,可阅读更多精彩创业案例,让你收获新的赚钱思路。

  • 相关推荐
  • 大家在看
  • 腾讯云服务器12.12限时秒杀-1核2G首年50元

    腾讯云服务器12.12多种机型限时抢购,1核2G服务器4.17元/月,2核4G服务器6.17元/月,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

    广告
  • 手动禁止APP获取全部权限!结果APP仍能获取用户信息

    随着移动互联网的发展,人们的衣食住行都离不开各种各样的APP。在用户使用APP的过程中,不少APP超范围、高频词索取权限,收集用户个人信息。12月25日,据央视财经频道报道,一些APP在后台运行时可能就在偷偷窃取个人信息,安全专家汤啸骅随机安装了一款APP,打开软件并禁止所有权限,退出等待几分钟之后,检测发现该APP仍然在获取用户信息。汤啸骅表示,APP推到后台的时候,它还有一些访问用户个人信息和位置的动作。专家指出,用?

  • 玩物得志APP依托电商平台优势,推动文玩行业持续健康发展

    随着玩物得志APP这类专业化线上平台的兴起,文玩藏品的传播途径变得更广了,交易效率变得更高了,让更多人得以接触到这一行业...在这个过程中,文玩生意的边界在不断扩大,与此同时这个传统行业也开始“触网”,带动了大量的新玩家们不断地涌入,给文玩行业带来了新的增量...玩物得志APP将持续借助互联网创新模式,成为连接文玩艺术品爱好者和商家的桥梁,真正为文玩行业赋能,带领更多人感受文玩的魅力...

  • APP不得捆绑下载

    为了进一步规范移动互联网应用程序信息服务管理,国家互联网信息办公室对 2016 年 8 月 1 日正式施行的《移动互联网应用程序信息服务管理规定》进行了修订,现向社会公开征求意见。意见反馈截止时间为 2022 年 1 月 20 日。

  • 美国即将对APP安装的反垄断法投票 App Store或有重大变化

    据《华尔街日报》报道,美国参议院司法委员会今天批准了《美国创新和选择在线法案》,之后该法案将进入参议院投票...该法案还将支持第三方APP的安装,iPhone和iPad用户届时可以通过其他渠道安装应用程序,而不是 App Store‌...据苹果公司称,第三方APP安装将更难保护个人设备的隐私和安全,从而损害竞争并阻碍创新...苹果公司敦促参议院司法委员会不要批准该法案,但现在将推进...

  • App Store Connect现可追踪分析App内活动

    苹果公司今天宣布,为 iOS 和 iPadOS 平台创建应用的开发者现在可以查看任何应用内活动的分析数据。分析数据包括事件页面浏览量、提醒和通知数据,以及由事件驱动的下载和重新下载的数量。每个指标都可以按地区、来源类型、设备等进行细分和查看,这样你就可以更好地了解应用内事件如何影响你的应用增长。应用内活动在应用内和 App Store 上公布,这有助于客户了解他们可以参与的活动的时间。应用内活动涵盖了从游戏比赛、电影首映

  • 山姆APP默认好评被罚

    案情显示,2020 年 10 月 13 日至 2021 年 5 月 17 日期间,当事人利用山姆会员商店APP线上销售商品,在“我的评价”中,当用户未及时对真实交易的商品作出主动评价时,APP后台系统则会自动默认五星好评,并将默认五星好评自动计算在好评率里进行展示,存在对商品的用户评价作虚假的商业宣传,欺骗、误导消费者...广东市场监管局表示,“默认好评”并非真实用户评价,虚假的好评率数据是对既有消费评价的曲解,并将对潜在消费者形?

  • 注销APP账号,怎么这么难?

    不久前,中国消费者协会发布《50款APP账号注销及自动化推荐退订测评报告》,点名20款APP存在注销账号难的问题,对象包括常用APP淘宝、饿了么、麦当劳、腾讯视频、南方航空等等,存在的问题包括未注明注销条件、条件设置不合理、流程设置不合理等。

  • 不要下载微粒贷APP,你会被骗的!

    他们一般会承诺下载APP就能开通微粒贷或是获得更高额度,通常还会给你发一个来源不明的链接,然后就是一步步骗你掏钱...微粒贷的官方入口在微信支付或手Q钱包,大家如果想开通微粒贷的话,先去这两个地方看看是否有“微粒贷”图标...像微粒贷APP这种骗局,其实就是诈骗分子利用了产品高知名度和用户不了解的信息差,一步步骗取你的信任...

  • 元宇宙,倒在App store

    回顾过去的一年,元宇宙这个概念,有人在吵,更有人在“炒”,同时也有人在做,多多少少还是上线(或迭代)了几个产品,比如国内的希壤、虹宇宙,国外的TheSandbox、Horizon Worlds、Roblox等,倒也吸引了不少流量...在国内平台,天下秀开发的元宇宙App“虹宇宙”在测试阶段也同样引发了一波虚拟炒房热潮...“炒房热”席卷各大元宇宙平台如TheSandbox、Decentraland、虹宇宙等等,而在这些元宇宙平台的背后,有一项技术应用尤为瞩目——“区块链”......

  • 学习UI设计必须掌握的5款设计软件

    我自己在大厂呆过 2 年,遇到不少非常优秀的UI设计人员,对于这些优秀设计人员的共同点呢,我总结了基本上 2 点,一要有视觉思维,二要技术到家...设计工作需要较强的沉浸体验感,该软件具有强大的资料库,能够提高设计质量,获得切合实际的草图设计,使得设计师取得理想的设计成果,提高设计价值...页面中展现了设计进度情况,提高了设计过程的透明程度,使得设计人员掌握任务实时进展状况,提高设计协作效率与质量...同时它也具有强大的资料库,能够提高设计质量,获得切合实际的草图设计,使得设计师取得理想的设计成果......

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天