如何让用户发掘移动应用中的“隐藏”手势

简介: 本文讲的是如何让用户发掘移动应用中的“隐藏”手势,我们将与应用进行交互的手指活动称为手势。可触摸界面为我们使用诸如点击、滑动、捏合等自然手势来控制应用提供了可能。但与图形控制界面相比,这些控制手势往往难以被用户感知
本文讲的是如何让用户发掘移动应用中的“隐藏”手势,

我们将与应用进行交互的手指活动称为手势。可触摸界面为我们使用诸如点击、滑动、捏合等自然手势来控制应用提供了可能。但与图形控制界面相比,这些控制手势往往难以被用户感知,也就是说,如果用户不是事先就知道可以用特定的手势进行操控,他们是不会去刻意尝试(使用手势)的。

如何帮助用户发掘这些隐藏的手势呢?幸运的是,当下已经有几种可视交互设计技巧供我们选择,来让这些手势浮出水面了。

启动应用时展示教程和演示

许多手势驱动的应用偏向于利用教程和演示来指导用户使用。这通常意味着你会展示一些指令指南,来解释应用界面的操作规则。但是,通过界面教程来解释应用的核心功能并不是最优雅的方法。该方法有以下两个缺点:

  • 如果你必须要为你的应用提供配套的指令说明,那就说明你没有为用户提供一个友好的体验,因为你不能期望每个用户都会在使用应用之前阅读说明。

  • 另一个问题则是,用户必须在开始使用应用之前,记住所有他们才刚刚了解到的操控方法。

打个比方,Clear 应用启动时会强制展示 7 页长的使用指南,而用户必须仔细地阅读所有信息,并尽量的记住它们。这其实是非常糟糕的设计,因为用户必须在体验应用之前做许多准备工作。

68747470733a2f2f63646e2d696d616765732d31

Clear 应用中的教程

避免一次性展示包含多个步骤的演示,试着在对应的会话上下文中再进行指导(当用户实际使用该功能时)。通过多次小的演示,教程其实可以变成一段渐进式的探索之旅:

将关注点放在一次特定的交互上,而不是试着将所有可能用到的指令全都呈现在界面上。

就拿 YouTube 应用安卓端的手势教程界面为例:

68747470733a2f2f63646e2d696d616765732d31

YouTube 安卓客户端

该应用同样是基于手势交互的,但它没有以教程形式向用户展示指令。相反,它仅在新用户首次进入应用的某些界面时,展示与该界面相关的使用提示。

如何在上下文中指导用户

在上下文中对用户进行指导的技巧,是为了帮助用户掌握那些他们从未使用过的操作方式来与界面元素交互。这项技巧通常包括 小巧的界面提示 以及 简短的动画示意 。

纯文本指令

这项技巧基于文本指令来提示用户进行某种手势操作,并精简的描述该操作所起到的作用。

**小贴士:**尽可能缩短指令文字长度 - 文字越精简,用户就越可能仔细地读完并根据指令完成操作。

68747470733a2f2f63646e2d696d616765732d31

图片源于:Material Design

动态提示(Hint Motion)####

动态提示(或者说界面提示动画)为元素交互动作的方式和结果提供了预览。举个例子, Pudding Monsters 的游戏机制是完全基于手势的,但它却能让用户较为准确地猜测到交互的方式。动画诠释了功能信息 - 展示一个带有动画的场景,用户便能清楚的知道该怎么做了。

68747470733a2f2f63646e2d696d616765732d31

动态提示为元素的操控提供了预览。图片来源:Pudding Monsters

内容梳理(Content Teases)

内容梳理属于简单视觉线索(subtle visual clues)的一种,用于表明操作的可能性。下面的例子展示了如何对卡片视图进行内容梳理 - 它简单地在当前卡片下展示了其它的卡片,以此来说明此处可以使用滑动操作。

68747470733a2f2f63646e2d696d616765732d31

展览式的导航功能。 图片来源:Barthelemy Chalvet

总结

归根结底,没有一个万能的方法,能够满足所有在移动应用或是 web app 中指导用户使用手势的需求。但当涉及到指导用户如何使用界面时,我建议你尽量在相应上下文中使用弹性内容来显示指南,渐进式地展示信息 并配合简短的动画。教程和演示是迫不得已时才考虑的手段。

感谢阅读!






原文发布时间为:2017年1月16日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。
目录
相关文章
|
1月前
|
机器学习/深度学习 人工智能 算法
探索移动应用无障碍功能的设计与实现
【4月更文挑战第2天】 随着智能移动设备的普及,应用程序已成为日常生活的重要组成部分。然而,对于有视觉、听力或其他身体限制的用户来说,传统的应用界面和交互方式可能构成重大障碍。因此,本文将深入探讨移动应用的无障碍功能设计,分析现有技术标准与挑战,并提出创新性的设计理念和技术实现策略,以期推动更包容性的数字生态建设。
|
12天前
|
存储 前端开发 JavaScript
【亮剑】在Web开发中,滚动事件(onScroll)是一个常见且强大的交互手段。
【4月更文挑战第30天】在React中,利用`onScroll`事件可实现无限滚动、动态加载和视差效果。通过`componentDidMount`和`componentWillUnmount`(类组件)或`useEffect`(函数组件)添加/移除滚动监听器。为了优化性能,需注意节流、防抖、虚拟滚动和避免同步计算。实战案例展示了如何结合Intersection Observer实现无限滚动列表,当最后一个帖子进入视口时加载更多数据。关注性能,确保应用流畅。
|
11月前
|
Java Linux vr&ar
【EasyAR实战项目】图像追踪+触屏交互
全网首发EasyAR图像追踪实战项目,零基础也能做AR项目!本文章从下载Unity、EasyAR SDK开始,到模型的导入再到图像识别的处理到交互脚本的编写最后到项目的导出和运行结果,步骤解析的十分详细,非常适合新手小白做AR开发。
188 0
|
存储 搜索推荐
语音平台开发,展现社交属性的重要功能
语音平台开发,展现社交属性的重要功能
|
前端开发
小视频源码,可控的跑马灯,无需焦点
小视频源码,可控的跑马灯,无需焦点
262 0
|
编解码 前端开发 Android开发
聊聊安卓折叠屏给交互设计和开发带来的变化
很多年前,前端同学都觉得PC端的适配(兼容处理)难,都认为移动端的时代适配会容易得多,也无需考虑那么多的事情。事实并非如此,移动端的时代同样面临着各种适配的处理。特别是刘海机的出现,前端需要考虑刘海机适配。
1985 0
苹果iOS13系统被曝光,或加入黑暗模式及多窗口显示
新系统将会适用于苹果所有内置软件,因此人们在光线不充足或是夜间使用手机时,眼部承受的压力更小。
542 0
|
Web App开发 JavaScript 前端开发
跨浏览器指纹追踪技术:毫无障碍的查看你的浏览记录
本文讲的是跨浏览器指纹追踪技术:毫无障碍的查看你的浏览记录,使用浏览器上网,已经成为现代人生活中不可或缺的一部分。而浏览器中的插件,字体,UA头文件,位置设置,时区设置,防追踪选项是否打开,是否开启了广告拦截等可以标识用户的信息
2005 0