如何通过设计实现单手操作APP来解决挑战

• 能快速跳转到具有智能UX模式的页面部分

例如，Facebook在一个汉堡式菜单中隐藏了大量可能会把主屏幕弄得乱七八糟的功能。尽管这种模式看上去更加整洁，用户却不能实现单手操作。

是什么让汉堡式菜单成为一个真正的问题?

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

值得庆幸的是，我们有办法来解决这个挑战——

整页菜单可以替换为弹出式菜单，就像它的名字一样，意味着从底部“弹出”。这样，即使单手操作，也可以更容易地访问选项。

弹出式菜单设计的移动UX模式(视频资料来源:Joox)

Pocket：Pocket的弹出菜单列出了已保存的文章和视频，允许用户将文章和视频保存到不同收藏夹中方便以后查看。

Joox：Joox的汉堡菜单点击后向上滑动出现许多选项，加强了通过单手操作访问其功能的能力。

Salesforce：Salesforce的“show more”选项可以从底部向上展开一系列操作，如创建、发表和上传等，使日志记录轻松无障碍。

1.3.2当你有更多内容时，使用扩展的标签栏

人机界面指南建议在底部导航栏中不超过5个功能。这使得App开发人员很难在最前端呈现额外的核心功能。

这就是“更多”选项(图标是三个点)派上用场的地方。它位于底部栏中，可以隐藏其他功能，单击后显示这些功能。

设计底部导航按键，可扩展更多的选项

Notebook：底部标签栏用“更多“按钮来展示额外的功能。

Xender：用户可以滑动“网络“图标来访问浏览器。

Microsoft Teams：允许用户向上滑动底部菜单选项卡来访问更多功能。

1.3.3个性化的标签栏可以让用户快速访问他们喜欢的内容

每个用户都是不同的，对一个用户重要的功能对另一个用户可能不那么重要。为了充分利用你的App，你可以允许用户自定义他们的标签栏与经常使用的功能。

个性化的底部标签栏允许快速的功能访问

Tweetbot：允许用户通过长按底部菜单设置他们想要的功能。

Plex：用户可以使用喜爱的媒体选项来组织其导航栏，从而实现轻松的流媒体播放。

Feedly：读者可以通过选择浏览最近发布的内容或他们喜爱的内容来个性化他们的阅读列表。

1.3.4使用手势可以通过塑造用户习惯来增加易用性

Tinder的出现让基于手势的导航大受欢迎，促进了单手操作的使用。如果使用得当，手势可以帮助扩展单手使用的导航。

基于手势操作的App导航功能

Instagram：右滑进入相机，左滑进入消息

Snapchat：右滑查看消息，左滑浏览发现

Chrome：下滑除了可以重载页面，用户还可以附加左滑打开一个新页面，或右滑关闭已有的页面。

1.3.5从设计“到达”到使用手势和可访问性“返回”

导航不只是要到达一个界面或App的某个部分，重要的是要设计如何返回到原界面、关闭一个界面或者跳转到另一个页面！让我们看看App应该如何使用手势和UX模式来轻松地完成这些事情。

在多个屏幕之间跳转(视频来源: Zenly)

Airbnb：从让用户在“空间”预览中滑动，到用向下滑动的手势关闭屏幕，Airbnb让功能的可访问性变得很轻松。

Zenly：用户使用下拉手势打开页面，并在其多级流中来回移动。

Zomato：除了右滑退出界面外，Zomato还允许用户向下滑动来关闭带有定制选项的项目。

1.3.6快速跳转到App的不同部分

具有许多类别、子类别和分区的App（如书籍、wiki、餐厅菜单、产品）可能需要更多的组织性，以确保用户不会在查找内容功能时遇到困难。

可以在层次结构中组织这些内容，并使用UX模式来增加可访问性和易用性。

浮动标签栏和在各部分之间跳转的手势

Zomato：浮动标签栏可以让用户快速跳转到他们喜爱的食物区域

NeuBible：用户右滑可以跳到喜欢的章节，左滑可以跳到喜欢的页面

Kindle：点击页面后会显示一个滚动条，它能让用户快速跳转到电子书的任何页面

2、设计核心动作的单手操作模式

 2.1是什么?

核心动作包括创建、编辑、发布、添加、删除等等。用户将50%与手机交互的时间用于自我表达、社交互动、网上购物、理财、健康和工作以及计划即将到来的活动。这些动作驱动的UX模式包括创建社交帖子、编辑文档等等。

2.2设计挑战

在设计动作驱动的App时，我们必须确保它们不会处于次要地位，比如将发布或创建按钮放在App顶端而不是大拇指旁边。

2.3解决方案

在设计这些核心动作的用户体验时，需要记住四件事。

• 核心动作应该通过图标或按钮的突出位置来吸引用户的注意力。不要把它们放在App的右上角，在那里它们可能很难被注意到。它应该很容易被触碰到，而不需要借助第二只手或过度的伸展。
• 最重要的是，用户应该能够单手完成整个创建和添加的任务流。这包括取消任务、打开键盘打字、进入下一个步骤等等。
• 使用多层次的编辑菜单和控制来设计复杂的编辑功能。
• 以可达性为目标，你也可以让分享和发送东西变得简单。

2.3.1 App核心功能的按钮或图标应该能吸引用户

一个App的核心功能可能是拍照、创建帖子、添加文件以及共享等。我们有必要让用户首先关注到这些功能，并让它易触达、易发现。

例如，Snapchat隐藏了所有内容，只激励用户捕捉照片和视频。此外，用户点击“发送”按钮可以立刻与其他人分享他们的故事。

通过手势、弹出式菜单和浮动标签栏，使核心任务易于访问

Snapchat：从捕捉瞬间到筛选和发送，用户可以用拇指指尖完成所有操作。

PDF Export：推出一个菜单，允许用户创建文件夹和上传媒体文件。

Scanbot：Scanbot的抽屉包含其核心功能，如设置页面类型、打开灯、导入图像和选择多页功能

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

对于许多用户来说，手机是最常用的计算设备。有的用户在他们的手机上完成工作。例如，文档编辑不再只是电脑的工作，因为许多App都提供这项服务。

Microsoft Word和WPS Office提供了大量编辑工具和多级菜单。这些直观的菜单系统智能而又强大，允许用户做复杂的操作和多种选择。

将编辑工具放在屏幕的下半部分以便更快的修改

Microsoft Word：可以滑出一个抽屉，里面有多种编辑工具，允许用户单手访问多个选项。

WPS：提供了许多编辑选项，从文本编辑到插入文件。

AfterLight：用户可以使用编辑工具来完善图像，这些工具遍布多个区域，还可以通过滑动手势进行进一步调整

2.3.3以可达性为目标，你也可以让分享和发送文件变得简单

如今，社交媒体的超快可共享选项（通常只需点击一次）大大增强了我们对喜爱音乐的体验。

你可以使用一个从底部向上滑动的共享扩展，允许用户直接输入文本信息。

用于单手共享照片、视频、音乐等的UX模式

Shazam：点击“更多选项”中的分享按钮可以选择大量的社交平台选项

YouTube：中心的“分享”选项允许用户向选定的朋友发送个性化信息

Tumblr：在每篇帖子的底部都放置了一个便于用拇指操作的箭头形“分享”图标，从而加快了分享速度

2.3.4将创建或添加任务划分为多个步骤

创建图板、收藏夹和愿望列表可能会很麻烦，尤其是当它们位于最顶端时。让我们看看处理多步骤数据输入的模式。

Flipboard和Airbnb把所有东西都放在底部——拇指够得着的地方。从输入到选择下一步或取消操作都非常简单。

将“创建”和“添加”图标放在拇指可及的范围内以便单手使用

Flipboard：点击底部的“+”图标，会弹出一个带有“创建新杂志”选项的可滚动的弹出窗口，用于对新闻进行分类。

Airbnb：点击收藏图标后显示一个带有“+”图标的半弹出式抽屉，点击“+“图标创建新表单并允许输入名称，让整个过程变得简单。

YouTube：当保存视频时，会显示一个“新播放列表”选项，点击后会弹出输入框和键盘。

3、设计在移动过程中更快的结帐和交易体验

3.1是什么?

根据卡巴斯基网络安全指数，50%的电子交易发生在移动电话上。再加上诸如预订乘车、机票、酒店房间、电影票和音乐会门票等商业交易，你就会意识到设计移动支付体验是多么重要。Baymard研究所的一份报告显示，23%放弃购物的用户是因为复杂的结账过程。对于正在移动的用户来说尤其如此，结账是一个多步骤的过程，输入数据并不容易。

3.2设计挑战

结帐过程需要特别仔细地输入一些数据。

• 设计单手结账体验意味着用户用最少的拇指移动和最简的步骤来完成交易。
• 这对于正在移动或需要立即执行操作的用户尤其重要。

3.3解决方案

设计一个单手结账的体验，我们必须尽量减少对用户的信息需求。

当选择产品的尺寸、颜色、时间/日期等偏好选项时，它们应该是易于发现和访问的。

我们可以使用谷歌和Apple wallet这样的支付App，或者使用Keychain、1password和LastPass这样的App自动填充姓名、信用卡、地址和一次性密码等信息。

我们还必须强调简单和幅度最小的手指动作。

3.3.1将商品添加到购物车中，并在拇指够得着的地方选择产品偏好

网上购物的逻辑可以简化为三个步骤——添加物品到购物车，选择产品的种类，最后完成支付过程。

作为设计师，我们不仅要让这些选择引人注目，而且还要把它们放在拇指够得着的地方，这一点至关重要。

实现这一目标的一种方法是将产品偏好选项显示在一个可上滑的界面中，当用户选择了一个产品时，该界面就会向上滑动。

另一种方法是让用户滚动页面，快速选择不同的产品偏好选项，而“下单”或“购买”选项则停留在页面底部。

付款流程顺畅，可选择添加产品和选择产品样式

Wish：“购买”选项允许用户在结账时选择尺寸和颜色，只需轻轻一扫就可以购买

Amazon：右滑选择“货到付款”的支付选项

Myntra：允许用户从底部的弹出式抽屉中选择产品样式，直接将其带到快速的多步骤结账过程中

3.3.2使用电子钱包和密码管理器进行快速支付

《2019年支付方式报告》显示，超过71%的在线交易是通过电子钱包完成的，如Apple Pay、Google Pay、支付宝、Fitbit、三星支付、YandexMoney等。这些支付方式不仅被认为速度更快，而且更安全、更容易操作。

结帐过程可以变得更加高效和简单。更重要的是，你还可以添加一个刷卡支付选项来提高转化率。

移动电子支付结账的UX模式

Swiggy：分步结账流程将“查看购物车”、“选择地址”、“查看详细账单”和“支付选项”均置于拇指移动范围内，简化了支付过程

Uber：将“去哪里”、“乘车类型”、“付款模式”和“出发时间设置”的输入控件均放在下半部分，使得打车变得轻松。

移动电子支付结账的UX模式

4、以可达性为主要目标的内容搜索、筛选和排序

4.1是什么?

如果没有正确的UX设计，找到正确的功能对用户来说将是一项乏味的挑战。搜索、筛选和排序工具决定了用户浏览App的难易程度。

筛选器是一个很有用的工具，它可以压缩大量的内容，找到最相关的结果。

从理论上讲它们是不同的：排序是根据某个参数重新组织内容，筛选则是将其从视图中删除。

Baymard对产品列表和筛选的研究发现，产品列表可用性一般的网站的购物放弃率为67-90％。其中大约有17％至33％的用户放弃了产品是因为，他们试图在电子商务站点中利用稍微调整过的工具集找到完全相同的产品类型。这导致潜在客户增加了大约4倍。

4.2设计挑战

• 手机上的搜索应该要做到易触达。Youtube、Amazon Prime、Slack、谷歌Maps的搜索按钮被放在了界面的右上角，使得用户很难触碰到搜索按钮。
• 当存在很多参数和类别时，要组织好筛选的信息层次结构，以便用户能够快速找到他们想要查找的内容。
• 在用户界面管理多级信息，特别是当有许多类别且每个类别有许多产品时。
• 根据不同的状态改变用户界面，比如“应用了筛选”和“应用了什么筛选”。
• 所有这些操作都应该由用户自己来完成。

 4.3解决方案

使用手势或易于访问的按钮进行搜索。当用户进入搜索界面时，给出建议并立即给出文本框。

使用用户的语言，并在筛选时考虑用户的意图。将筛选/排序按钮放在用户可以触及的地方。同时，用一只手即可打开和关闭筛选页面。

为了解决信息复杂性，可以使用两步筛选控制或并行筛选控制。

立即使用筛选。让筛选基于用户的操作进行交互。允许用户选择多个选项。更改筛选类别以匹配已应用的筛选。

首先显示推荐，最近使用或最频繁使用的信息。

对于许多App来说，搜索是使用最多的5个功能之一，但搜索图标却总是较难被触达。下面是苹果地图和谷歌地图以及Netflix和Youtube的对比。

比较搜索栏的可达性-苹果地图和谷歌地图

比较搜索栏的可达性——Netflix和YouTube

一些App将搜索界面用作内容发现界面，向用户推荐他们喜欢的内容，他们之前搜索过的内容，和流行的内容等等。

创建一个可供用户发现内容搜索页面

Instagram：“搜索”选项将用户带到一个内容发现页面，该页面是根据他们以前的搜索定制的

StubHub：从一个选定的地点列出了流行的社交活动，如体育、音乐会、剧院等，使用户可以轻松地从大量活动中探索

Meet Up：将即将到来的事件分为今天、明天、本周和更多，让用户选择他们想要去的地方和时间

4.3.1从搜索和筛选中删除冗余的步骤

为了让用户更快地使用搜索功能，我们可以这样做：当用户点击标签栏上的搜索图标时，键盘会立即弹出，这样用户可以立即开始输入他们的查询。

许多App如Amazon或Google Drive都在主页顶部显著位置放置了搜索栏。在这种情况下，我们可以向下滑动（如Inshorts APP）立即开始输入，而不必到达顶部点击搜索栏。

便捷的搜索和筛选。

Netflix：只要在“搜索”图标上点击一下，用户就可以直接访问键盘进行输入

SpotHero：点击一下“搜索”图标，用户即可输入目的地信息来预定停车地点，还能通过一系列筛选来进一步细化。

Inshorts：用户通过下滑手势开始搜索，从而了解特定的新闻

4.3.2双击搜索图标，弹出键盘

如果你想使用你的搜索页面向用户展示一些信息，那么你也可以使用双击来拉起键盘，比如微软新闻、Spotify和Reddit Apollo。

双击“搜索”图标可轻松访问键盘

Microsoft News：双击“搜索”图标将拉起一个键盘，不仅可以让用户输入，还能（点击键盘上的搜索键）访问下一个页面

Spotify：双击“搜索”图标将拉起一个键盘，并且实时显示用户输入的结果

Reddit Apollo：双击“搜索”图标将拉起一个键盘，并且在用户输入时提供搜索建议

4.3.3拇指可触及的筛选应该让用户更快地找到信息

在线购物、预订、定制和其他类似服务的App可以包含供用户选择的清单。

为小型设备设计筛选时，最需要考虑的是信息层次结构。让我们看看这些例子，了解在选项很多的情况下如何设计筛选和排序。这些案例演示了如何在不影响单手使用的情况下处理复杂的信息。

为了使此过程更具响应性，可以在用户选择选项时在后台同时筛选搜索结果。

电子商务类及定制类App的排序和筛选

Zomato：Zomato的半屏幕弹出式菜单允许用户选择多个排序和筛选选项，以缩小满足用户喜好的结果范围。

Myntra：吸顶/底的“搜索”和“排序”栏列出了包含项目数的筛选。此外，还用粉红圆点提示已经应用了筛选。

Kayak：通过其视觉上吸引人的过滤器，在用户选择他们的预订偏好时更新可用航班的数量。

电子商务类及定制类APP的排序和筛选

5、输入和交互模式的设计

5.1是什么?

屏幕越小，占用的空间就越小。为了提高移动用户的工作效率，必须重新考虑基本的用户交互。

滑块、滚动选择器、选择器、下拉菜单、表单填充、缩放、滚动条等是构成App的基本模块。

诸如填写表格、输入密码、选择日期/时间、进行选择等操作，弹窗必须在不放弃pc端已有模式的前提下很好地将其转换为触摸界面。

5.2设计挑战

在移动设备上输入数据是很繁琐的，尤其是在需要填充大量数据字段的情况下。

将用户交互转换到更小的设备上进行并不容易，最大的挑战是:

• 用户输入的速度应该要尽可能快，用户的拇指移动距离应该要尽可能短。
• 收集信息应该使用最少的步骤。
• 输入控件设计应该具有易于理解的界面和隐喻。
• 这种经历应该是愉快的和持续的。
• 用户必须知道他们的位置并且信息不能丢失。

5.3解决方案

任何用户操作如填写表单或作出选择都应该靠近底部。操作和选择的流程应该是一致的，不出现任何不和谐的界面变化。

继续下一步所需的信息应该在拇指能够触及的范围内。

包括通知在内的数据输入选项应该清晰明了并接近底部。

较大的表单可以分为多步表单和多屏表单。这种多页面方法应该可以很容易地前进和后退。

5.3.1从注册表单开始修正填写表单的问题

我们都讨厌填写注册表格。他们很费时间，而且要求提供不必要的信息。

通过将冗长的表单转换为多个页面，填写表单就不那么麻烦了。使用自动填充、拇指可触达的”上一个“和“下一个“按钮、连续的键盘显示以及不滚动的设置使这种方法更为快捷简单。

多屏注册流程的范例(视频资料来源: Zenly & AirBnB)

Zenly：Zenly的多步骤注册流程允许用户输入基本信息。此外，用户还可以添加和邀请其朋友。

Uber：Uber的多页面登录流程使用电话号码进行注册。验证码直接弹出在键盘上，方便拇指操作。

Airbnb：Airbnb在其多级注册界面的顶部添加了一个进度条，用来显示用户在注册流程中的位置。

5.3.2以最少的拇指移动从用户那里获得快速输入

将用户输入控件定位在屏幕的底部，可以更快地输入数据并提示响应。

使用选择器、下拉菜单、滚动条和滑块为用户提供信息。

用于准确填写表单的单手输入控件(视频来源:Periscope)

Periscope：在选择某一评论时，Periscope会在弹出菜单中显示“举报”选项，允许用户对不适当的评论进行分类

Actions：使用基于手势的曲线滑块，让用户安排会议提醒

Periscope：当用户选择一条评论时，Periscope的弹出菜单允许用户浏览其他评论、回复评论、查看和屏蔽用户个人档案

5.3.3用于用户输入控件的其他智能模式

让我们看看其他使得输入信息变得更容易的模式。

为表单设计的单手输入控件(视频来源:Peach | Zova Workout & Fitness | Square Order)

Peach：点击“添加朋友…”选项推出一个抽屉，允许用户输入朋友的用户名并跟随。

Zova Workout & Fitness：Zova将记录健身活动类型、持续时间和时间的流程游戏化，使用滑块和选择器使之变得有趣并具有互动性。

Square Order：为了自定义用户订单，Square Order将选择类别分布到多个页面中，底部则放置一个CTA按钮。

6、用于媒体播放、照片拍摄、照片编辑和地图导航模式的其他模式

谷歌商店中有超过200万个App，而App Store中有183万个应用程序，设计师们必须让他们的App脱颖而出。实现此目的的一种方法是把APP的一些常见功能设计得对用户来说更有趣、更流畅。我在最后一节总结了各种用户交互模式。

这些APP允许用户用一个拇指放大或缩小界面

Instagram：不论用户是在拍摄照片还是录制视频，都可以通过上滑放大界面，下滑缩小界面。

Google Maps：用户可以通过简单的拖拽手势缩放界面，使得地标或附近的位置浏览起来不费力。

Zenly：用户可以通过一个流畅的推拉手势来放大朋友的周围环境。更重要的是，它同时适配惯用左惯用右手的用户。

无论是选择表情符号、发送图像，还是音频剪辑，手势操作都可以为这类App交互提供便利

Snapchat：点击输入栏里的“笑脸”图标，会在一个可滚动的抽屉里显示大量表情符号，让用户轻松表达自己的想法。

Slack：点击“图片”图标，slack就会推出一个半屏幕的抽屉，让用户自己选择并发送视频和图片。

Pockets：滑动手势可以让用户前后移动来听音频片段。弹出菜单还包括播放、音频速度、跳过和存档等选项。

无论是选择表情符号、发送图像，还是音频剪辑，手势都可以为这类APP交互提供便利

Composer Concept：结合弹出菜单和手势，允许用户通过滑动来查看附件选项。

Gamification + Checkout：这个多页面结账流程的概念显示了一个进度条，每当用户输入一条付款信息时，它都会移动一点。

结论

可达性是为单手操作进行设计的一个重要因素，但它不仅是为了确保所有东西都能让用户接触到。单手操作效果好的App还可以节省用户的时间，消除摩擦，省略不必要的步骤，最重要的是加快App“短时间突发的零星使用行为”的操作。