如何表达App中的手势操作

1 评论 8914 浏览 24 收藏 6 分钟
大厂导师团亲自授课,超过200小时的精品课程,从0到1为你构建“产品+业务”的复合型知识体系,让你在职场竞争中脱颖而出。

在移动应用和网页中没有万能的方法展示手势。不过在教育用户操作界面时,我推荐使用内容暗示、渐进式提示和微动画。教程和引导页是万不得已才会使用的方式。

手势,是那些能够与应用程序进行交互的手指动作。触摸屏提供了很多自然手势比如:点击、滑动、缩放等活动。但是不同于用户图形界面控件,这些交互行为很难被用户发现,除非他们提前知晓手势的存在,否则他们不会尝试。

如何引导用户发现隐藏的手势操作呢?还好有一些视觉方面的交互设计技巧可以让用户知晓。

一. 首次打开时的教程和引导页

在手势类的应用里,教程和引导页是常用的办法。多数情况下在App中加入教程意味着向用户提供界面的说明。但是,UI教程不是一个解释核心功能的最高明的方式。这个方式存在两个问题:

如果你必须出一个使用指南才能让用户明白,说明你的界面没有很好的传递信息,因为用户不应该被要求在使用App前还得先读一下操作指南才行。

教程导致的另一个问题是:一旦用户进入应用,他们不得不记住所有新的使用方式。

比如,Clear 这款App开始使用时会有长达7页的教程,用户不得不耐心读完所有信息并试图记住他们。这是个很糟糕的设计,因为用户需要在使用它之前就付出大量精力。

Clear 的教程

为了避免强制性的多步引导页并试图在操作需要的坏境下教导用户(这时用户需要切实使用),借助逐步的引导,用户教程可以变成更为渐进的操作探索:

“专注于单个交互操作而不是试图解释用户界面的每个可能产生的操作”

以Android版的youtube的手势教育为例:

Android版 youtube App

这个应用有一套基于手势的交互操作,但并未使用教程来指导用户。相反,他为新用户首次打开的启动页提供了提示,每次只提示一处,且只在用户触达到相关功能时出现。

二. 如何在情境中教育用户

在情境中教育用户的技巧可以帮助用户先前从未尝试过的方式操作一个元素或界面。这种技巧通常包括细微的视觉提示和微动效。

1. 纯文本命令

这个技巧主要基于文本指令,可以促使用户使用手势,并且用简明的描述介绍操作产生的结果。

注意:使用简短的文字描述说明-文本越短,用户越可能使用它并遵从说明。

2. 提示动效

提示动效(或动画提示)展示了某个操作的效果预览。例如,Pudding Monster只使用了基于手势的技巧,就能使用户不必过多猜测就掌握了游戏的基本玩法。动画传达了功能的信息——用动画来展示一个场景,用户立刻知道该怎么做。

3. 内容暗示

内容暗示是一种微妙的视觉提示,指明了操作的可能。下面的例子阐释了卡片的内容暗示。它简明地展示了隐藏在当前卡片之后的其它卡片,很明显卡片可以滑动。

结论

总而言之,在移动应用和网页中没有万能的方法展示手势。不过在教育用户操作界面时,我推荐使用内容暗示、渐进式提示和微动画。教程和引导页是万不得已才会使用的方式。

 

英文原文:How To Communicate Hidden Gestures in Mobile App

原文地址:http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/

译者:Meng,微信公众号:「微信ID:DR_DDC」

本文由 @Meng 翻译发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Pexels,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
16013人已学习13篇文章
在产品的运营过程中,无论是产品、运营还是市场团队,都希望能清晰地了解用户的行为路径,通过用户行为分析,优化用户体验,实现更精准的运营和营销。
专题
14106人已学习13篇文章
情绪板由能代表用户情绪的文本、元素、图片拼贴而成,能够很好地帮助我们定义设计的方向。本专题的文章分享了如何应用情绪板。
专题
19546人已学习15篇文章
表单是我们比较常见的一个信息录入工具。本专题的文章提供了表单设计指南。
专题
54305人已学习14篇文章
标题党,又爱又恨。但是如果你是运营,连标题都起不好,那就呵呵哒了。
专题
12042人已学习12篇文章
2023年双十一逐渐临近,各个电商平台也摩拳擦掌开始准备。本专题的文章分享了双十一营销玩法。
专题
13478人已学习11篇文章
在工作中我们会跟客户/boss/用户等人对接需求,并把需求交付给设计师/开发等人,那么应该怎么做呢,本专题的文章分享了如何对接和交付需求。