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

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

2020-10-14 16:23 · 稿源:站长之家

最近,国外设计师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,可阅读更多精彩创业案例,让你收获新的赚钱思路。

  • 相关推荐
  • 大家在看
  • 研究了100多个App后,发现了顶部栏UI设计的模式和规则!

    为了试图分析App顶部栏设计的某些模式和规则,Yuyan研究了 100 多个应用程序。通过本文带大家一起了解App顶部栏的组成、变化,以及如何设计顶部栏的交互。01顶部栏的常见样式顶部栏是什么样子,它由什么组成? 常规顶部栏 通常,顶部栏提供有关此页面总体的信息,以及用户可能对该页面进行的潜在操作。常见的顶部栏如下所示:顶部

  • 抓住关键点,提升App搜索设计的体验!

    搜索过程中需要展示什么?如何帮助用户尽快找到他们想要的?搜索的体验如何与其他体验相联系?这是很多设计师思维模糊的地方。

  • MIUI 13全新UI设计曝光:上下滑动式电源菜单

    尽管MIUI 12今年4月才发布,6月开推稳定版,但MIUI 13的开发已经悄然进行中。日前,国外用户Enes Keskin晒出号称是MIUI 13全新电源菜单的UI设计。仅从预览来看,长按电源菜单后的柱状条带设

  • 如何设计抖音主页头图 抖音背景图怎么设计

    抖音主页头图要怎么设计会比较好看,让人留下比较深的印象呢,背景图的设计思路以及主要考虑的因素有哪些。下面我们会通过几个要点来介绍下,抖音背景图的设计注意要点,大家在抖音设计自己的头图时可以参考下。1、KOL出镜,也就是自己抖音视频里的主角出现在头图背景图里面,让他/她成为标志性IP,记得要使用好看的高清形象照,不用其他过多文字或其他修饰就能引流2、在头图里面,再次自我介绍,完成对账号的简介的补充说明,或者

  • 如何设计抖音LOGO头像 抖音logo怎么设计好看

    抖音账号的头像LOGO要怎么设计比较好看,又符合自己账号的定位属性,什么头像可以让别人一眼看了之后留下深刻印象呢,这里我们来一起了解下如何设计好一个抖音的logo头像。

  • iOS14怎么取消app资源库页面 app资源库页面怎么关闭

    苹果iOS14加入了App资源库的新功能,这个功能就是将所有手机下载安装的app全部都显示在一个页面中,可以让用户找到想要的app软件,但很多用户表示不喜欢这个app资源库,那么如何将app资源库页面删除呢,我们来一起看下吧。

  • 如约而至!科勒精选·设计中国北京设计论坛即将开幕

    亚洲高端设计大展“设计中国北京” 2020 将与全球厨卫领导品牌科勒KOHLER再度合作,邀请来自国内外顶尖的设计大师,以“以设计之道复兴世界”为主题开展为期 4 天的科勒精选·设计中国北京设计论坛。其中,展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。2020 年注定是不平凡的一年,第三届“设计中国北京”( 9 月 23 日 –9 月 26 日)重磅回归,旨在凝聚全球设计的力量,以前瞻思想深入探讨“后?

  • 科勒再度携手设计中国北京,以设计凝聚幸福点滴

    2020 年 9 月 23 日 –9 月 26 日,亚洲高端设计大展“设计中国北京” 2020 即将隆重举行,全球厨卫领导品牌科勒KOHLER作为论坛的冠名赞助商,再度携手“设计中国北京”,带来为期 4 天的科勒精选·设计中国北京 设计论坛。本届论坛汇聚来自国内外 30 余位顶尖设计师的前瞻思想,将以“以设计之道复兴世界”为主题展开探讨。展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。在设计中感知幸福生活在

  • 上直播联手稿定设计,共同推进视频直播+在线设计服务的融合之道

    近日,上直播与稿定设计达成战略合作,双方将持续探索企业视频直播与商业设计领域的跨界融合,为双方的使用受众提供更多元化的视频直播和在线设计领域的使用体验,共同推动视频直播和在线设计的融合发展。上直播是国内知名的企业直播服务商,旨在为企业提供从视频内容生产、内容运营、大数据精准营销于一体的完整营销闭环服务,衍生了教育培训、医疗、金融、企业内训、汽车、房产、互联网等众多行业的企业视频直播解决方案,当前已

  • HONOR TALENTS荣耀全球设计大赛上海艺术沙龙 畅谈设计美学“理想国”

    自 9 月 4 日上线以来,HONOR TALENTS荣耀全球设计大赛吸引了全球设计师、知名高校设计高材生的关注和投稿。线下,荣耀也与设计爱好者们积极互动交流,在上海时代广场连卡佛搭建了一个的交流平台,邀请青年设计师周桐及花粉一起在现场创作和分享精美创意作品,畅谈设计美学“理想国”。畅谈创意本源弘扬传统文化周桐,连卡佛 2020 创意集结号涌现出来的设计才子,作为中央美术学院设计院的青年设计师,其主攻媒体艺术研究方向,近?

  • vivo IFEA 分离式镜头设计荣获2020红点设计概念大奖

    2020 年 10 月 9 日,深圳 —— 享誉全球的设计界“奥斯卡”德国红点奖于线上颁奖典礼中官宣获奖名单。vivo工业设计团队凭借vivo IFEA(Interest Free Explore Amazing)分离式镜头设计,在来自 52 个国家的 4170 件作品中脱颖而出,荣获红点设计概念奖,彰显其卓越产品设计和领先创新科技。对vivo而言,成为近三年为数不多斩获红点奖的中国手机品牌,意义非凡。红点设计概念奖证书vivo IFEA分离式镜头设计示意图 德国红点奖始于 19

  • 阿里给原创设计师找“钱” 联手中华设计奖为创意孵化牵线搭桥

    原创设计如何快速变现?商家又如何找到符合自己风格的原创设计,并在卖成爆款后不被抄袭?在9月25日的第三届中华设计奖颁奖仪式上,阿里巴巴集团知识产权保护高级总监徐骏提出了包括“一键备案确权”、“智能精准授权”、“抄袭快速维权”等在内的原创保护三权服务体系,用创新技术去保护商业创新,打通原创设计供应链和产销链,保护整个行业不受抄袭困扰,建立良币驱除劣币的可持续循环机制。与赛事合作促进原创设计商业孵化本届中华设计?

  • IPU设计商Graphcore启动全球合作伙伴计划 浪潮等已加盟

    9月23日消息,Graphcore宣布推出精英合作伙伴计划,该计划是汇集渠道合作伙伴的全球网络,旨在满足客户对Graphcore两大解决方案的需求,包括AI计算平台IPU-M2000以及用于横向扩展和超级计算规模的IPU-POD。据介绍,Graphcore精英合作伙伴计划包括许多全球知名渠道伙伴、技术分销商和转售商,该计划将支持Graphcore最新的IPU-Machine: M2000 (IPU-M2000)向全球范围内的客户供货。目前Graphcore发布的合作伙伴名单包括:

  • 丐帮设计:职场人升职加薪必备神器

    随着自媒体、短视频等行业的兴起,人们对作图的需求也越来越多,尤其在职场中,互联网公司、广告公司、旅游公司的小哥哥小姐姐们常常会接到老板作图的任务,对于不懂设计的小白来说,简直令人头秃。为了解决用户作图需求这一痛点,各类图片编辑工具应运而生,丐帮设计就是其中十分优秀的一款。丐帮设计的用户群体十分广泛,无论你是做新媒体运营、产品运营、淘宝商家,还是教师、HR、销售商家,在丐帮设计都能找到你想要的模板!丐

  • 代理分销制度6个设计思路

    因为最近在做一个新的社交电商平台,所以一直忙着做平台分佣的顶层制度设计。说实话,以前我从来都没有一次认真的参与到平台分佣制度的设计中去,我主要是负责平台上线之后的运营和玩法的。

  • 聚焦“设计价值原生力”东外五十六号创新园区@2020北京国际设计周开幕

    2020 年,人类与城市进入后疫情时代的复杂变革时期。此时,设计的力量,从民生之维再出发,寻找与定义能抵抗风险韧性与穿透不确定未来持续性的真实的价值。 2020 年 9 月 25 日至 9 月 30 日,为期一周的 2020 北京国际设计周“设计之旅”东外五十六号创新园区分会场“设计价值原生力”系列主题活动正式开启。东外五十六号创新园区,一个面向未来的探索大院儿新邻里社区的创新实践场,以原生价值为核心进行设计力的重新解构,与众?

  • 好莱客全屋定制这样设计 小户型也能通透又宽敞

    许多人在家居布置中有这样的误区,认为中小户型如果想要显得更宽敞通透,就应该少放家具。但其实,这样装出来的房子非常不实用,住久了很可能出现的结果是:满屋的物品无处归置,显得更加杂乱无章。好莱客设计师提出,其实房子要想显得通透,和空间布局改造很有关系,装对了,大体积的柜子反而可以有出乎意料的效果。好莱客案例中的业主小熊家就是这样子,虽然家里住了五口人,却依旧保留了敞亮的空间效果,甚至还有种“空无一物”

  • 苹果高管讨论A14芯片的设计方法

    自上月推出采用 A14 芯片的新款 iPad Air 平板电脑以来,苹果高管已经在一系列采访中介绍了背后的一些开发细节。比如赶在 iPhone 12 发布会召开之前,苹果公司平台架构副总裁 Tim Millet、以及 Mac 和 iPad 产品营销高级总监 Tom Boger,就在接受外媒的新一轮采访期间,讲述了该定制芯片的能效问题。

  • 启旻设计服务教你怎么样迅速提高CAD的水平

    AutoCAD之所以成为个功能齐全、应用广泛的通用图形软件包。先它是个可视化的绘图软件,许多命令和操作可以通过菜单选项和工具按钮等多种方式实现。而且Auto—CAD具有丰富的绘图和绘图辅助功能,如实体绘制、关键点编辑、对象捕捉、标注、鸟瞰显示控制等,它的工具栏、菜单设计、对话框、图形打开预览、信息交换、文本编辑、图像处理和图形的输出预览为用户的绘图带来很大方便。其次它不仅在二维绘图处理更加成熟,三维功能也更加完

  • 设计师救星来了!国庆&中秋字体正确的打开姿势

    在中秋加国庆双节即将到来之际品牌宣传海报等设计没有好字体怎么能行?不少小伙伴正愁着找不到合适的字体

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签