如何告诉用户App的隐藏手势?这儿有3个技巧! - 优设网 - UISDC

如何告诉用户App的隐藏手势?这儿有3个技巧!

2017/01/24 评论区

how-to-communicate-hidden-gestures-1

@可乐橙_ColaChan :触屏界面提供了许多自然的手势,比如点按、滑动、双指缩放。但该如何让用户知道这些手势呢?这儿分享3个技巧!

手势操作,是通过手指轻微移动来让用户操作应用。触屏界面提供了许多自然的手势,比如点按、滑动、双指缩放。但这些交互方式不像UI控件,通常对于用户是不可见的。除非用户事先了解手势存在,否则他们并不会尝试使用。

如何加入隐藏手势呢?好在有许多视觉层面的交互设计技巧,可以让用户了解这些手势。

uisdc-app-20170124-1

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

在手势为主的应用中,教程和引导页相当常见。许多情况下,在应用中加入教程意味着向用户说明、解释界面。但是,UI教程并不是阐述应用核心功能的最简洁方式。这种方式存在两个问题:

  • 如果你要给产品准备说明书,就说明与用户的沟通还不到位,因为他们可不希望使用前还要读说明书。
  • 另一个问题在于,用户不得不记住所有这些新的用法。

举个例子,Clear应用一开始会展示7页教程,用户得耐心阅读所有信息,尝试记在脑海中。这个设计很糟糕,因为它需要用户在真正开始使用之前就付出精力。

uisdc-app-20170124-2

△ Clear的教程

避免使用强制性的多步引导,要试图在操作所处环境中教育用户(这时候用户真正需要相应功能)。几经迭代后,教程可以变成更加平缓的暗示。

关注单个操作,而不是试图在界面中解释每一个操作。

以Android版YouTube的手势操作指引为例:

uisdc-app-20170124-3

△ Android 版 Youtube

这个应用有用到手势操作,但并不是通过教程的方式教育用户。它反而是在新用户首次触发时进行了暗示,每次只介绍一处,而且只在用户进入相关功能时才触发。

如何在情境中教育用户

在情境中教育的技巧,能帮助用户以一种从未尝试过的方式操作某个元素或界面。这种技巧通常包含轻微的视觉提示和微妙的动画。

纯文本指令

这个技巧主要依靠纯文本指令,促使用户执行某个手势操作,并且简明地描述这个操作的结果。

注意:说明文字要非常简短——文字越短,用户越可能会阅读,然后才能遵照它的指引。

uisdc-app-20170124-4

△ 图片来源:Material Design

提示动效

提示动效(或者动画暗示)表现了执行操作时具体手势的效果预览。例如,Pudding Monsters游戏的诀窍就是完全依靠手势操作,但是用户不必过多猜测就能掌握基本玩法。动画传达了功能方面的信息——用动画来展现一个具体场景,用户立马明白该怎么做。

uisdc-app-20170124-5

△ 提示动效展现了如何操作一个元素。来源:Pudding Monsters

内容的暗示

内容暗示是一种微妙的视觉线索,表明了操作的可能。下面这个例子展示了卡片的内容暗示——当前卡片的下方还有其他卡片,这显然表明它是可以滑动的。

uisdc-app-20170124-6

△ 展现出导航功能。来源:Barthelemy Chalvet

结论

总之,在移动或网页应用中展现手势操作方式,并没有万能的方案。不过在教育用户操作界面时,我比较推崇通过内容暗示、渐进式提示和微妙的动画,在具体情景中教育用户。教程和引导页应该只作为最后手段。

感谢阅读!

「引导页设计指南」

  1. 顶尖指南丨《超全面指南!如何设计移动应用引导页》
  2. 实战干货丨《腾讯实战干货!怎么让引导页不再是无用小透明?》
  3. 技巧分享丨《讨厌引导页?这5个技巧帮你设计出眼前一亮的APP引导页》

原文地址http://babich.biz/how-to-communicate-hidden-gestures-in-mobile-app/
作者信息:Nick Babich
译文地址:colachan

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/how-to-communicate-hidden-gestures

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里