Get best of the week

如何一方面设计移动应用程序

tl；博士中有 90％的现代智能手机的屏幕对角线超过5英寸。这种显示器的出现为应用程序开发人员和设计人员提出了一个根本上的新问题。让我们看看如何解决它们。



苹果公司于2007年1月推出产品之后，整个世界都缩到了我们的手掌。该公司将iPod，电话和浏览器整合为一个设备。苹果向大众市场推出了一种新型的设备，我们今天将其称为“智能手机”。这些小工具无需键盘（如BlackBerry）或手写笔（如Palm）即可使用。

iPhone的设计旨在仅用一只手即可方便地进行操作，并在屏幕上平稳地移动拇指。

史蒂夫·乔布斯（Steve Jobs）曾经说过3.5英寸是“消费者的理想尺寸”，而更大的屏幕是愚蠢的。



然而，在本世纪之交，大屏幕平板手机在市场上变得很流行。如今，不到1％的设备屏幕小于4英寸，而90％的屏幕对角线大于5英寸。

屏幕不断增长的这场竞赛为应用程序开发人员和设计人员提供了使用额外屏幕空间交付更多内容和更多功能的新机会。

例如，CNN应用程序是为数不多的能够早期使用iPhone 5的软件之一，该软件于2012年推出。开发人员不仅在美学上进行了转换，还通过突出显示标题来提高了可读性。


Apple 2012


大屏幕非常适合显示大量内容，而史蒂夫·乔布斯（Steve Jobs）对3.5英寸手机的主要考虑是单手使用。

在为期两个月的研究中（在机场，街道，咖啡馆，公共汽车和火车上），斯蒂芬·休伯（Stephen Huber）研究了用户握住手机的三种方式。



事实证明，有49％的用户用一只手握住手机，尤其是在旅途中。通常，这是智能手机的默认手柄。

在提供令人信服的论据以支持开发用于单手使用的应用程序时，Stephen还发现用户经常根据便利性和情况来改变他们的控制方式。

为什么单手设计应放在首位


我们经常在忙碌或忙碌时使用电话。这极大地影响了我们如何握住手机以及如何使用应用程序。实际上，这种抓地力比上述49％的情况更为普遍。

研究表明，普通用户每天检查手机58次，其中70％的移动互动持续不到两分钟。人们通常在“短暂的注意力分散的时间内”使用电话。


图片：救援时间

来自Simform的一组研究人员观察到了在以下几种情况下偶尔使用手机的冲动：


短时间使用智能手机的示例

Google产品总监Luke Wroblesci称这些短暂的移动使用冲动是“一个手指，一个表情”（一个拇指，一个眼球）。这反映了令人分心的环境如何使智能手机在短时间内引起部分人的注意力。他还补充说，用一只手使用智能手机的最佳方式是方便的功能支持快速交互。

如何用一根手指为如此短的间隔设计设计？


答案很简单。不断进行可用性测试，并了解用户在各种情况下如何握住手机。

如果用户经常在分散注意力的场景中使用该应用程序，那么您应该专注于开发针对可访问性和一只手使用的模板。



为了了解问题所在，让我们看一下Spotify界面的演变：


旧的Spotify导航-一个Spotify汉堡包

使用左上角的类似汉堡包的菜单来隐藏应用程序的功能并设置用户进行搜索。随着大屏幕的出现，列表中又增加了另一个设计问题：可达性。


Spotify用户遇到了一定程度的困难和不适

这迫使Spotify团队在2016年折叠了汉堡菜单，并将其主要功能-主页，浏览，搜索，广播和图书馆-置于底部，这导致总体上点击次数增加了9％，菜单项上的点击次数增加了30％。

对于典型用例，请使用标准UX模板。


如果可以使用行之有效的UX模板，为什么还要重新发明轮子。许多设计师已经设计出了用一只手使用该应用程序的方案。

我们浏览了数百个应用程序和数千个模板，以找到用于此类用途的最佳技巧和方法。让我们看看哪种方法效果最好，它们可以解决哪些问题，以及从中获得什么好处。

我们将最常见的用户行为模式和UX模板分为六类：

  1. 导航
    例如，菜单栏，标签和手势可在应用程序最重要的部分之间轻松移动。
  2. 动作
    创建，编辑，放置，添加，删除以及使用应用程序基本功能的其他动作。
  3. ,
  4. , , .

  5. , , , , , ,  — .

  6. , , , .

1.



出色的应用程序的基础是良好的导航。它有助于快速找到必要的功能以及对用户而言重要的功能。

在70％的情况下，用户可以通过导航而不是通过搜索或其他方式找到应用程序的新功能。导航面板，菜单，手势，链接，选项卡等是最常见的UX模板。

良好的导航应立即演示所有重要部分，并易于访问。

问题


常规的导航模板（例如Apple标签栏和Android滑动菜单）具有局限性。选项卡栏上仅包含有限数量的功能，并且访问快捷菜单的所有元素并不容易。

用户不必费力就能到达应用程序的重要部分；不必用手指将手指伸到屏幕顶部。这真令人不舒服。特别是如果一个人在旅途中并且非常快速地使用该应用程序。

决断


Facebook和许多其他应用程序通过将项目放置在名为“菜单”或“更多”的按钮下来解决该问题，用户可以从中访问应用程序的其他功能和部分。但是，单手使用时不理想。

  • 对于可访问性和超过五个项目的放置，不是整页，而是一个弹出菜单更适合。
  • 如果有更多内容，请扩展标签栏。
  • 高级用户的个性化标签栏。
  • 手势使用户养成方便快捷的访问习惯。
  • 返回和关闭页面应该很容易。
  • 快速跳转到应用程序的特定部分。

例如，Facebook在汉堡菜单中隐藏了许多功能，从而关闭了主屏幕。尽管它看起来漂亮且合乎逻辑，但是用一只手进行操作时，用户还是会受苦。


1.1。汉堡菜单的主要问题是什么？

使用弹出菜单而不是整页菜单


幸运的是，我们有办法解决问题。 

全页面菜单通常可以替换为弹出菜单。顾名思义，它们从下面“弹出”。这使得仅用一只手即可轻松访问选件。


1.2。弹出菜单模板。视频：乔克斯

如果内容很多，请扩展标签栏


《 Apple人机界面指南》建议在底部导航栏中放置不超过五个功能。这是“更多”选项派上用场（三分）的地方。它位于底部面板中，可以隐藏其他功能并一键打开它们。


1.3。带有附加选项面板的底部导航菜单的设计

高级用户的个性化标签栏


每个用户都是个人，并且对一个人来说很重要的功能可能对另一个人不感兴趣。为了充分利用设计，您可以允许用户自定义具有常用功能的选项卡面板。


1.4。个性化的底部标签栏，可快速访问功能

让用户养成方便快捷访问的手势


Tinder受欢迎的手势导航是一种简化单手导航的好方法。


1.5。基于手势的导航以访问应用程序功能

返回和关闭页面应该很容易。


导航不仅可以访问应用程序的屏幕或部分。请务必考虑返回，关闭屏幕或移至页面上特定部分的方法！让我们看看应用程序如何将UX手势和模板用于此类操作。


1.6。使用手势导航多个屏幕（视频：Zenly）

快速跳转到应用程序的特定部分


具有许多类别，子类别和部分的应用程序，例如书籍，Wiki，餐厅菜单，产品目录，需要组织得井井有条，以便用户查找内容时不会遇到问题。

可以按层次组织应用程序，并使用自定义UX模板来增加可访问性和易用性。


1.7。浮动标签面板和用于在各部分之间移动的手势

2.单手行动


这是什么


用户花费约50％的移动时间在智能手机上进行活动。这些是社交互动，购买，自我表达，财务，健康和生产力管理，以及对即将发生的事件的计划。所有这些模板都包括诸如创建社交消息，编辑文档等操作。

问题


在开发行动驱动的应用程序时，我们需要确保采取正确的行动。例如，用于发布消息或创建文档的按钮位于拇指附近，而不是位于屏幕顶部。

决断


请记住四个要点。

  1. . , . .
  2. , . , .
  3. .
  4. , .


主要任务是，例如拍照，创建帖子，添加文件，发布等。首先，要吸引用户的注意力是很重要的。

例如，Snapchat通常隐藏除照片和视频拍摄的主要任务以外的所有功能。此外，“提交”按钮邀请您立即分享您的故事。


2.1。通过手势，弹出菜单和浮动选项卡面板简化对基本任务的访问

使用专门为移动设备设计的菜单和控件来分解复杂的编辑任务


对于许多用户来说，手机是最常用的计算设备。一代人可以在电话上进行真正的办公室工作。例如，编辑文档。许多移动应用程序中都有此功能。

Microsoft Word和WPS Office提供了许多您可以触及的编辑工具和多级菜单。这些直观的菜单系统智能且功能强大，允许用户执行复杂的操作并做出多项选择。


2.2。屏幕底部的编辑工具可加快更改速度

设计简单的共享和发送功能而不会忘记可达性


这些天使您特别喜欢欣赏自己喜欢的音乐成为了一种超快速的选择，可以在社交网络上共享，通常只需单击一下即可。

扩展面板还有一个选项，该选项从下往上交换并允许您直接输入消息。


2.3。UX模板，用于一只手共享照片，视频，音乐和其他材料

将创建或添加内容的任务分为几个阶段


创建木板，收藏夹和愿望清单可能很棘手。让我们看一下分几个阶段输入数据的模板。

Flipboard和Airbnb将所有元素都放置在屏幕底部（拇指无法触及的范围内）。从键入到选择下一步或撤消操作，一切都非常简单。


2.4。在Thumb Reach中创建和添加图标

3.一只手在商店购物，交易和结算


这是什么


根据卡巴斯基网络安全指数，在线商店中有50％的购买是通过手机进行的。加上其他商业交易，例如预订旅行，航班，酒店房间，电影票和音乐会票，您将了解正确的移动接口设计对下订单的重要性。一个Baymard研究所的报告说，购物者的23％，放弃与货物车，由于复杂的结账过程。对于移动电话来说尤其如此，因为移动电话的过程是多步骤的，并且数据输入不是那么简单。

问题


下订单的过程需要输入大量数据并需要用户的密切关注。

  • 用一只手下订单意味着用户必须以最少的步骤和手指移动的数量完成交易。
  • 这对于旅途中的用户或需要立即完成交易的用户而言尤其重要。

决断


在单手设计中，应尽量减少用户输入。

  • 选择大小，颜色，时间/日期等选项时，应该易于查看和访问。
  • 我们可以集成Google或Apple付款系统，也可以通过密码管理器（例如，钥匙串，1Password和LastPass）自动完成输入姓名，银行卡，地址和一次性密码。
  • 我们必须仔细考虑设计，以便用户最小程度地移动手指，因为他手里拿着智能手机。

将产品添加到购物篮并轻松选择产品选项


物流在线购物可以简化为三个步骤：

  1. 将产品添加到购物车。
  2. 选择产品选项。
  3. 付款流程完成。

重要的是要使这些步骤明确，并将其放置在拇指够不到的地方。

技巧之一是在托盘中显示产品选项，然后随着您的选择向上移动。另一种方法是通过快速选择产品来滚动页面，并且选项“下订单”或“购买”静态地位于底部。


3.1。顺畅的结帐流程，可以添加产品和选择选项


3.1。在电子商务和自定义交付应用程序中将产品添加到购物车。视频：购物选择  / WE + AR TRBL  / 美味汉堡应用

使用电子钱包和密码管理器简化付款


根据《 2019年支付方式报告》，超过71％的在线交易通过电子钱包进行，例如Apple Pay，Google Pay，支付宝，Fitbit，Samsung Pay，YandexMoney等。这些钱包不仅速度更快，而且更安全，更易于使用。

结帐过程可以变得更加高效和简单。此外，要增加转化次数，您可以添加“刷卡付款”选项。


3.2。移动电子商务应用程序中的结算流程


3.2。移动电子商务应用程序中的结算过程。视频：SPACED挑战赛（旅行+ VR）  / 结帐促销代码  / 游戏化结帐

4.单手搜索，排序和过滤


这是什么


搜索，过滤和排序工具确定用户浏览网站上的产品目录或其他信息的难易程度。

过滤器是减少大量内容并找到最相关结果的好工具。

从理论上讲，它们有两种类型：排序根据特定参数组织内容，过滤消除不必要的内容。

在Baimard Institute 的“ 产品列表和过滤”研究中，发现具有平均产品列表可用性的网站的失败率达67-90％。但是，在搜索相同产品时，工具箱中的微小变化将故障率降低到了17-33％。这导致引线的倍增大约四倍。

问题


  • . , Youtube, Amazon Prime, Slack Google Maps , .
  • , , , .
  • , .
  • , , .
  • .


  • . , .
  • . «/» . , .
  • , .
  • . . . , .
  • 首先显示建议，最近使用或最常用的过滤器。

在许多应用程序中，搜索位于所使用的前5个功能中。但是许多应用程序开发人员很难访问此图标。在下面比较Apple Maps和Google Maps以及Netflix和Youtube的界面。Apple Maps和Google Maps 上的搜索栏的可访问性（放大图）Netflix and YouTube上的搜索栏的可访问性（放大图） 某些应用程序使用搜索屏幕来使用户熟悉新内容：显示建议，他们较早地搜索了趋势中的变化等等 4.1。通过搜索页面向用户演示新内容（放大图像）












搜索和过滤时删除不必要的操作


为了尽可能加快所有速度，您可以确保通过单击搜索图标立即显示键盘，并且用户可以立即输入查询。有关示例，请参阅Netflix和SpotHero应用程序。

许多应用程序，例如Amazon或Google Drive，都在主页顶部保留搜索栏。在这种情况下，最好使用手势（向下滑动），例如在Inshorts应用程序中-立即开始输入搜索查询，而不是到达页面顶部并单击搜索栏。


4.2。搜索和过滤方便使用一只手

双击搜索图标启动键盘


如果使用搜索页显示其他信息，则双击该图标将立即启动键盘，就像Microsoft News，Spotify和Reddit Apollo一样。


4.3。双击搜索图标可简化对键盘的访问

手指到达过滤器菜单应加快信息检索


在线商店，预订系统，商品/服务即时订购的应用程序及其他可能包含庞大的列表，用户必须从中选择合适的报价。

为小型设备设计过滤器菜单时，最重要的是信息层次结构。让我们看看这些示例，以了解如何设计来自大量选项的过滤和排序。他们展示了如何应对信息的复杂性而又不会使一只手握住手机的用户遭受痛苦。

过滤器应响应用户的选择并演示何时应用。

为了使此过程更加灵活，可以在后台过滤搜索结果，同时选择用户产生的选项。


4.4。在移动电子商务和自定义交付应用程序中对产品进行分类和过滤



4.4。在移动电子商务和自定义交付应用程序中对产品进行排序和过滤。视频：过滤器  / 与朋友共享汽车

5.单手输入和互动


这是什么


随着屏幕的缩小，可用空间也会减少。为了在这种情况下提高移动用户的生产力，有必要重新考虑交互的主要类型。

诸如填写表格，输入密码，选择日期/时间，突出显示之类的事情应正确地转移到触摸屏上，而不必放弃通常的隐喻。

问题


在移动设备上，输入数据非常繁琐，尤其是当您需要填写几个字段时。

将用户交互从台式计算机转移到较小的设备并不容易。以下是主要问题：

  • 数据输入速度应该很高，并且用户的拇指移动最少。
  • 必须以最少的步骤收集信息。
  • 输入字段应具有易于理解的界面和清晰度。
  • 用户对工作的印象应该是令人愉快和完整的。
  • 用户应在界面中正确定向，并且信息不应丢失。

如果一切正确完成，这将使您能够快速将数据添加到跟踪器，日历和其他类似应用程序。

解决方案


  • , , . - .
  • .
  • , , .
  • . .

,


我们都讨厌填写注册表。它们很耗时，并且需要输入不必要的信息。

可以通过将一个长表格分成几个屏幕来简化填写表格，方法是使用自动填写，拇指旁边方便的“前进/后退”按钮，以确保键盘始终存在并确保不滚动。


5.1。有关多屏幕注册的建议。视频：Zenly和Airbnb

快速输入数据，手指移动最少


屏幕底部的元素排列加快了数据输入速度，并使您可以更快地做出响应。

为此，请使用选择列表（选择器），下拉列表，滚动条和滑块。


5.2。一手输入数据即可准确填写表格。视频：潜望镜

数据输入的聪明技巧


考虑其他一些技巧，这些技巧使从用户那里获取信息更加容易。


5.3。移动应用程序中的单手数据输入。视频：桃子  / Zova锻炼与健身  / 广场命令

6.其他模板


Google目录中已经有超过200万个应用程序，而App Store中已经有183万个应用程序。在这种情况下，开发人员希望将其应用程序与其他应用程序区分开。一种方法是使标准程序功能有趣且方便。在最后一部分中，我们将考虑其中的一些交互作用。


6.1。无需调整：这些应用程序使您可以用一根手指放大和缩小


6.1。手势始终能够促进与应用程序的交互，无论是表情符号，发送图像还是收听声音剪​​辑


6.1。手势始终能够促进与应用程序的交互，无论是表情符号，发送图像还是收听声音剪​​辑。视频：作曲家概念  / 游戏化+结帐

结论


用一只手进行操作时，重要的是要确保用一根手指可以触及所有功能。如果用一只手对应用程序进行妥善管理，则可以节省用户时间，消除不必要的步骤，最重要的是，可以集中精力在用户“分散注意力的短暂间隔”中加快工作速度，这一点现在非常重要。

More articles:


All Articles