移动应用ui设计模式pdf_电子商务应用程序中的7种UI模式

移动应用ui设计模式pdf

I recently did a competitor analysis of current, top e-commerce apps. I observed Target, Nike, Apple, Samsung, Ebay, Chewy, Banggood, Drop, and Best Buy.

我最近对当前的*电子商务应用进行了竞争对手分析。我观察了Target，Nike，Apple，三星，Ebay，Chewy，Banggood，Drop和Best Buy。

Here are 7 major UI patterns that I found popular and/or notable among them.

这是我发现的7种主要UI模式，它们在其中很流行和/或引人注目。

1.灵活的登录 (1. Flexible sign-in)

Sign-in is often the first barrier, causing users to spend effort in completing the task. To reduce friction for first-time users, add flexibility to your sign-in.

登录通常是第一个障碍，导致用户花费精力完成任务。为了减少初学者的摩擦，请增加登录的灵活性。

Try a lazy sign-in. Here, sign-in is optional until you get to the shopping cart or other features further in the customer journey. This allows users to try out an app as a guest and experience its value even before creating an account (Levi, 2016).

尝试延迟登录。在这里，登录是可选的，直到您在客户旅程中进一步进入购物车或其他功能之前。这样一来，用户甚至可以在创建帐户之前以访客身份试用应用程序并体验其价值(Levi，2016) 。

Also, consider including other sign-in options through external accounts (i.e. Facebook, Google). This enables users to skip form-filling, and instead sign-in with a 2-click process (Levenson).

另外，请考虑通过外部帐户(例如，Facebook，Google)包括其他登录选项。这使用户可以跳过表单填写，而是通过单击两次的过程登录( Levenson )。

In Banggood’s account screen, you can clearly see that in order to access “Wishlist”, “Viewed”, and “Coupons”, sign-in is needed. Banggood also includes external account options in their sign-in.

在Banggood的帐户屏幕中，您可以清楚地看到，要访问“愿望清单”，“已查看”和“优惠券”，需要登录。 Banggood在登录时还包括外部帐户选项。

2.搜索方式：文本，图像，语音，条形码 (2. Search by: text, image, voice, barcode)

“I really believe that the camera will be the next keyboard” — Ben Silbermann, Pinterest CEO

“我真的相信相机将成为下一个键盘” – Pinterest首席执行官Ben Silbermann

The internet started with a text-based search bar, but is evolving to allow search in other ways. I saw a combination of text and other functions used to enhance search interaction.

互联网最初是基于文本的搜索栏，但现在正在发展以允许以其他方式进行搜索。我看到了文本和其他用于增强搜索交互功能的组合。

Through visual AI, image search opens up a new world of possibilities. Not only can you identify a product by visual cues, but image search lets you discover new ideas based on the image context (Wilson, 2017). For example, if you take a picture of an avocado, search results may dish up guacamole recipes.

通过视觉AI，图像搜索开辟了可能性的新世界。您不仅可以通过视觉提示识别产品，而且图像搜索还可以使您根据图像上下文发现新的想法( Wilson，2017年)。例如，如果您为鳄梨拍照，搜索结果可能会提供鳄梨调味酱食谱。

Scanning a barcode reduces the margin of error, and leads you straight to a product. Voice search increases accessibility, and provides convenience for a user occupied with another activity.

扫描条形码可减少错误余量，并直接带您进入产品。语音搜索增加了可访问性，并为从事其他活动的用户提供了便利。

3.浏览：产品类别(3. Browse by: product categories)

Along with direct search, users engage in browsing activities to find new things. Product categories allow users to browse and discover products in an organized way (Harley, 2018).

除了直接搜索，用户还可以进行浏览活动以查找新事物。产品类别允许用户以有组织的方式浏览和发现产品( Harley，2018 )。

They improve way-finding by grouping products in an intuitive way for users. It’s like walking into a grocery store and seeing items placed in aisles where we’d expect to find them.

他们通过以直观的方式将产品分组给用户来改善寻路。这就像走进杂货店并看到放在过道中的物品一样。

Looking at competitor apps, some have a separate product category screen. Others include a product category section within the “Home” screen. For a pleasant browsing experience, consider combining images or icons with category labels.

在查看竞争对手的应用程序时，有些具有单独的产品类别屏幕。其他包括“主页”屏幕中的产品类别部分。为了获得愉悦的浏览体验，请考虑将图像或图标与类别标签结合在一起。

Below, you’ll see the different ways each app tackled the display of product categories.

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

4.卡的种类和一致性(4. Card variety and consistency)

Cards are some of the first UI elements users interact with. Card variety and consistency helps create a strong, first impression of your app.

卡是用户与之交互的第一个UI元素。卡片的种类和一致性有助于为您的应用创造良好的第一印象。

Try to create different types of cards for different types of information. This sets information apart visually, and helps users learn the visual language. Without variety, it’s harder to tell at a glance what a card represents, since they all look the same.

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

Also work towards card consistency throughout each screen. If you have one card type for a specific information, try to keep it the same throughout so it’s recognizable.

还要在每个屏幕上努力实现卡的一致性。如果您使用的是特定信息类型的卡，请尝试使其始终保持相同，以便于识别。

Apple Store uses both variety and consistency, creating a crisp visual vocabulary.

Apple Store同时使用多样性和一致性，从而创建清晰的视觉词汇。

5.针对不同用户阶段的不同CTA(5. Different CTAs for different user stages)

I noticed a common pattern of having several call-to-action (CTA) buttons in these apps. Having 2–3 CTA buttons covers different user stages in the customer journey.

我注意到在这些应用程序中有多个号召性用语(CTA)按钮的常见模式。拥有2至3个CTA按钮可涵盖客户旅程中的不同用户阶段。

For example, Ebay has “Save”, “Add to cart”, and “Buy now” buttons in consecutive rows. “Buy now” is great for when you want to buy one specific item immediately. Yet, “Save” is better when you’re waiting for a sale or comparing products. “Add to cart” makes sense when you’re shopping for a handful of items at once.

例如，Ebay在连续的行中具有“保存”，“添加到购物车”和“立即购买”按钮。当您想立即购买一件特定商品时，“立即购买”非常适合。但是，当您等待销售或比较产品时，“保存”更好。当您一次购物少量物品时，“添加到购物车”才有意义。

Having only a “Buy now” button when a user isn’t quite ready to buy, may not address the nuance of their shopping behavior. This could deter users from their shopping experience.

当用户还没有准备好购买时，仅具有“立即购买”按钮可能无法解决其购物行为的细微差别。这可能会阻止用户的购物体验。

6.特定产品屏幕的顶部选项卡(6. Top tabs for specific product screen)

Specific product screens can get pretty long. This usually occurs because we try to include all the details needed for a purchase decision.

特定产品的屏幕可能会很长。这通常是因为我们试图包括购买决定所需的所有详细信息。

According to a Nielsen research study, here’s a list of top features for a product page:

根据Nielsen的一项研究，这是产品页面的主要功能列表：

Must-haves: product name, images, price, options, availability, add to cart, description
必备物品：产品名称，图片，价格，选项，可用性，添加到购物车，描述
Nice-to-haves: ratings or reviews, additional images, videos, zoom/pan, related recommendations, wishlist
好评：评分或评论，其他图像，视频，缩放/平移，相关推荐，愿望清单

Having tabs at the top is one way to help users quickly find a topic of interest. They reveal screen content even before users start scrolling down.

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

Tabs should contain related content at the same level of hierarchy. Tabs are also scalable. You can start with fixed tabs that turn scrollable as you add on topics (Material Design).

选项卡应包含相同层次结构的相关内容。标签也是可扩展的。您可以从添加主题( Material Design )时可滚动的固定选项卡开始。

Here, Samsung Shop and Chewy use fixed tabs, while Drop uses a scrollable tab.

在这里，Samsung Shop和Chewy使用固定选项卡，而Drop使用可滚动选项卡。

7.逐步披露结帐(7. Checkout with progressive disclosure)

Progressive disclosure is about showing the right amount of information. It reduces complexity by breaking up information across several screens while still revealing main topics.

逐步披露是关于显示适当数量的信息。它通过在多个屏幕上分解信息，同时仍显示主要主题来降低复杂性。

Without it, users may perceive checkout as tedious and even abandon carts. Facing a wall of fill-out forms feels overwhelming (Campbell, 2017). Yet, seeing the same forms grouped into steps feels manageable. Also keep in mind, you’ll need space for keyboards at the bottom half of screen.

如果没有它，用户可能会认为结帐是乏味的，甚至放弃了购物车。面对填充表格的墙壁感到不知所措(Campbell，2017) 。但是，将相同的表格分为几步感觉很容易管理。另外请记住，您需要在屏幕的下半部分留出足够的空间来容纳键盘。

A few ways to organize this complexity is with an accordion, list, or progress indicator. An accordion expands vertically, while a list opens to another screen to reveal more information. A progress indicator shows where the user is in the sequential steps of a checkout.

组织这种复杂性的几种方法是使用手风琴，列表或进度指示器。手风琴垂直展开，同时一个列表打开到另一个屏幕以显示更多信息。进度指示器显示用户在结帐的顺序步骤中的位置。

Nike appears to use an accordion, Chewy and Target use lists, while Drop uses a progress indicator in their checkout.

Nike似乎使用了手风琴，Chewy和Target使用清单，而Drop则在结帐时使用了进度指示器。

结论(Conclusion)

You can learn a lot from studying current applications. By observing the reason behind product design decisions, we can find new insights. Create a seamless experience with befitting UI patterns, from app download to checkout.

通过研究当前的应用程序，您可以学到很多东西。通过观察产品设计决策背后的原因，我们可以找到新的见解。从应用程序下载到结帐，通过合适的UI模式创建无缝体验。