设计思考:如何传达APP中的隐藏手势?

手势本是能够帮助用户更好的使用产品,但手势交互常被隐藏起来,因此用户如果没有发现隐藏手势,便失去了设计这些隐藏手势的功能作用。那么到底该如何向用户传达APP中的隐藏手势呢?看看这篇文章,或许你就知晓。


手势本是能够帮助用户更好的使用产品,但手势交互常被隐藏起来,因此用户如果没有发现隐藏手势,便失去了设计这些隐藏手势的功能作用。那么到底该如何向用户传达APP中的隐藏手势呢?看看这篇文章,或许你就知晓。

设计思考:如何传达APP中的隐藏手势?

手势是用户用自己的食指和拇指,与app交互的那些小动作。 触屏可以让用户使用生活中的手势,例如点击(tap),滑动(swipe)和捏合(pinch)来完成操作,但是与其他的人机界面控制不同,手势交互通常被隐藏,因此用户没有意识去尝试手势,除非他们有使用手势的经验和习惯。

如何让用户知道有隐藏手势?我们可以使用一些视觉和交互设计技巧,让用户意识到这些手势。

引导页中的指南和演示

APP传达手势相当普遍的做法是引导页和小贴士。 在许多情况下,在你应用程序中包含教程,意味着向用户显示一些说明来解释界面。 然而,这些教程不是解释APP核心功能的最优雅的方式。 这种方法有以下两个问题:

  • 如果你为你的app设计引导页,那么这不是与用户沟通的最好方式,因为用户不会在使用app之前细读引导页或小贴士。
  • 教程的另一个问题,用户一旦使用app,必须学习并记住app的所有新操作手势。

举个例子,在浏览一个强制性的app7页的引导页开始,用户必须耐心地阅读所有的信息,并尝试记住。 这是糟糕的设计,因为它强迫用户在使用APP之前学习。

设计思考:如何传达APP中的隐藏手势?

Clear的引导页

我们需要避免强制性的引导页,并试图在操作的前后教育用户使用手势(当用户真的需要时候)。几次迭代后,教程引出了更进一步的发现:

专注于一个手势交互,而不是试图为用户解释界面中的每一个可能的动作。

以Android手机版YouTube应用程式的这个手势教育画面为例:

设计思考:如何传达APP中的隐藏手势?

Youtube安卓APP

该APP有手势的交互,但不使用教程去教育用户。 相反,它在每次启动时为新用户显示的提示, 每次仅一个该app部分功能得提示。

如何在情景中教育用户

在情景中教育用户有些技巧,帮助用户快速理解那些他们没有见过的元素或界面。这种技巧通常包括不起眼的视觉提示和微妙的动画。

纯文本提示

这个技巧是简单好用的纯文本提示,提示用户执行手势,并且以简短明了的文案描述交互的结果。

注意:多使用短文本提示——文本越少,用户越有可能会读,然后实际上遵循提示 。

设计思考:如何传达APP中的隐藏手势?

Material Design

运动提示

运动提示(或动画视觉提示)显示一个预览,预览如何在执行操作时与元素进行交互。 例如,布丁怪物(Pudding Monster)的游戏操作仅有手势,但这个游戏告诉用户需要做什么,而不用多费脑猜测。 动画传达操作的信息—— 一个动画展示的场景,直观的告诉用户需要做什么。

设计思考:如何传达APP中的隐藏手势?

运动提示预览如何与元素交互。 布丁怪物(Pudding Monster)

关联暗示

关联暗示是展示例子,暗示了可能性的视觉线索。 下面的示例演示了卡片的暗示—— 它只是显示其他卡片存在于当前卡片的后面,这清楚地表明可以滑动。

设计思考:如何传达APP中的隐藏手势?

浏览导航 by Barthelemy Chalvet

结论

归根结底,如何在移动app中为用户引入手势,没有一个万金油的解决方案。 但当你教育用户使用你的UI,我建议主要通过一些趣味的调侃,循序渐进的引导,再加上微妙的动画。 引导页或小贴士只应作为最后的手段。

 

作者:Nick Babich

原文地址:https://uxplanet.org/how-to-communicate-hidden-gestures-in-mobile-app-e55397f4006b#.v63u1ae0t

译者:neven

来源:微信公众号:歪设计

本文由 @TereChen 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24881/

(0)
CatherineCatherine
上一篇 2017-05-10 00:52
下一篇 2017-05-10 02:56

相关推荐

  • web表格设计攻略

    在后台管理系统、数据类产品等的设计中,表格作为一种常见的信息组织整理手段,甚至是web页面的基础设施之一,其重要性不言自明。结合最近做的几个项目和相关设计经验总结,特此整理出这样一篇设计攻略,希望能够对你的设计有所帮助。

    2017-04-28
  • 实例剖析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。本文作者(熊猫小生)通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、雅各布·尼尔森(Jakob Nielsen)简介雅各布·尼尔森(Ja...

    2018-01-30
  • 译文 | 在UX设计中利用色彩影响情绪

    颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

    2017-05-25
  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • Axure原型设计:京东官网滚动界面

    91运营社群招募中,勾搭小编微信号:yueyingzheng88入社群每周91公开课,91风暴,全员参与,实际案例实际分析问题答疑,你提问题我解答行业专场,互联网金融,电商,新媒体运营等专场各地分站交流资源及人脉共享其他的。。。。欢迎各行业互联网运营达人加入我们91运营大家庭,会运营的人都来这里了!导读:作者分享了自己制作京东官网滚动界面原型的具体操作过程,希望大家可以从中受到些启发。正文先上京东官网原图(也可以自己搜素京东官网查看)先...

    2018-03-04
  • 给设计师的网页动画设计基础指南

    挤压和拉伸
    预期
    登台
    连续动作和姿态对应
    缓进缓出
    弧形运动
    次要动作
    时序
    夸张
    立体刻画
    吸引力

    2017-05-27
  • 从交互设计的角度,看iOS11的5点不足

    提前下载了开发者版本的iOS11体验了大半个月,除了很耗电、手机很烫以外,道长打算从交互设计的角度去浅析一下个人对iOS11部分交互以及可改进的地方,为了避免篇幅过长,所以只挑几点出来讲。

    2017-08-04
  • 布局&构图&版式设计-木卫艾欧网-交互设计学堂

    编者按:想成为一个合格的UI设计师,光会画图标可不行,今天360的@Micu设计小哥从头帮你补上版式这一课,分享他的界面构图三板斧,此外,你还能学会如何用设计语言解构画面,这可是设计师的必备职业能力呦!

    2015-01-06
  • 把握交互的第四维 — 时机关系

    日常的交互设计工作中,设计师在明确了需求目标、用户场景,搭建了信息结构之后,下一步便是构思如何让这些信息与用户之间产生有效的互动,而这就需要设计师将思路放在时间的维度上一步步的推进,这中间,便会产生许多关于“时机”问题的讨论。

    2014-12-28
  • 对交互设计的思考(译文)

    本文是一篇译文,介绍了国外设计师对于交互设计师的现状和他认为的理想状态的思考。老外的思路还是比较清奇的,在这里介绍给大家。数字革命对于有好奇心的人来说就像是淘金热。没有人知道数字媒体究竟是什么,但它实实在在的深刻影响着我们的生活。 它是一个新的未知的领域,等待用新的艺术形式,设计和方式来填充,以更好地了解这个世界。然后,世界就变成了下面这样:这是怎么回事?1.基于技术思维的交互设计交互设计从数字技术革命中应运而生。所以就像工程师一样,设...

    2018-02-02