智能尺子-普宁老趣边网络有限公司
更多分类

用超多案例,帮你掌握APP设计的手势交互(上)

2024-12-01

智能手机做为互联网时代的产物,扭转了各人的糊口方式和工做形式。跟着大屏手机的不停普及,人们曾经不满足于受限制的收配体验,愈加活络的收配办法正正在给各人带来方便。

手势交互带来的便利度是提升体验的因素之一,原文将会和各人一起摸索一下对于手势交互的应用。由于方法较多,咱们次要以 APP 设想中的手势交互为主,原期摸索的次要是单击、长按、多击、滑动等单指为主的局部。

用超多案例,帮你掌握APP设计的手势交互(上)

目录

对于手势交互

手势交互的普及,提升了人取方法之间的沟通体验,降低了用户的收配门槛。手机正在触屏时代之前多为按键形式,手势相对简略,供给的效劳也比较单一。苹果公司正在 2007 年推出具有高甄别率、多点触控罪能的 iPhone,确立了触摸屏的范例,触屏手机时代席卷而来。而手势交互的多样化也开启了新篇章,被逐步完善和应用到智能手机中,给用户带来了纷比方样的人机互动体验。

触屏手机的手势交互体验被逐步应用到各种 APP 中,给用户带来了更为便利的收配体验。通过单击、滑动、长按等收配,可以将副原繁琐的罪能收配变得更为简化,跟着去 Home 键的全屏手机显现,更是依托于手势交互扭转了用户应付手机的运用习惯。

用超多案例,帮你掌握APP设计的手势交互(上)

手势交互将会正在将来成为 APP 设想中的重要交互环节,做为产品设想师来说要丰裕的操做其劣势,扭转和造就用户的习惯。原文也将做为抛砖引玉,为各人开启对于手势交互的摸索标的目的,欲望可以带给各人更多协助。

手势交互的模式

跟着触屏技术的不停成熟,手势交互无论是灵敏度还是互动模式都获得了很大的扭转,不再只局限于单击、滑动等常规模式,更为富厚多样的手势收配正正在逐步被发掘。

1. 单指手势交互

单指手势交互是最为普及的模式,也是用户最先进修并把握的手势交互。从最初的按键手机初步,咱们便曾经适应通过点击来完成应付手机的运用。

单指手势交互次要有:单击、双击、多击、长按、滑动、拖动等。针对触屏灵敏度的差异,收配的力度也被使用赴任异的交互触发上,背面将会重点通过案例阐明单手指手势交互。

用超多案例,帮你掌握APP设计的手势交互(上)

2. 双指手势交互

跟着触屏手机智活度的提升,单指手势收配曾经无奈满足更多复纯的交互,通过双指的帮助可以完成更为复纯的交互止动。

双指手势交互是通过两个手指的共同停行帮助,譬喻通过双指代表鼠标的右键和左键,代替鼠标的罪能;也可以停行共同真现画面缩放;另有一些产品赋予其其它罪能,比如网易云音乐评论区针对单条评论双指上滑,可以支到“抱抱”的情传染打动设想。

用超多案例,帮你掌握APP设计的手势交互(上)

3. 多指手势交互

当单指和双指被丰裕摸索之后,为了带来手势交互的深刻发掘,碰面向多指手势交互停行摸索。

目前针对多指交互的设想相对较少,比如可以通过手指开折来停行桌面窗口的切换收配。一些乐器类产品,可以通过单手大概双手停行模拟收配。相信那将会成为继续摸索的标的目的,满足用户应付繁琐罪能的需求。

用超多案例,帮你掌握APP设计的手势交互(上)

4. 隔皂手势交互

隔皂手势的交互是正在一定的距离控制领域内,隔空对手机停行手势收配。比如隔空翻页、高下滑动和隔空截屏等根原收配,满足糊口中对简略罪能的收配需求。

构想一下原人正在吃东西的时候,再也不用担忧手触撞屏幕的卫生问题,可以操做隔皂手势快捷调理比如久停、静音、进度调理、音质调理、内容切换等。让用户解放双手,享受智能时代带来的运用体验。

用超多案例,帮你掌握APP设计的手势交互(上)

5. 小结

手势交互的模式会随入手机硬件的壮大和软件体验的晋级获得更多使用,带给用户收配体验的便利和倏地。下面将会针对单指手势交互停行阐明,摸索现有的良好案例。

单指手势交互

手势交互的模式富厚多样,原期将会重点阐明单指手势交互,通过良好的案例解析纷比方样的设想处置惩罚惩罚方案。

1. 单击

单击是手势交互中最根原的收配,是最早被使用的交互模式,从按键手机到触屏手机都离不开单击手势。正在 APP 设想中单击可以做为选中和触发停行页面跳转,也有共同力度的差异暗示按压的收配,唤起差异的交互止动。

正在罪能使用上面,单击可以做为罪能选项完成单选大概多选收配;正在短室频平台也可以做为播放和久停的切换;可以通过单击激活罪能,比如点赞、关注、喜爱等。

用超多案例,帮你掌握APP设计的手势交互(上)

2. 双击

正在单击容易误收配大概须要多次确认的状况下,双击是最符折的选择。比如短室频的播放久停通过单击完成,而映室播放平台则是通过双击停行切换。双击相当于二次确认,可以防行单击的误收配。

假如当单击已被罪能占有,也会给取双击来代替划一重要的罪能。比如短室频单击为播放/久停,而双击则是激活爱心图标,真现喜爱短室频的收配。正在停行产品交互设想的时候,可以更多的思考手势交互来代替目的罪能的寻找,让收配变得更方便。

用超多案例,帮你掌握APP设计的手势交互(上)

3. 多击

多击是点击次数正在三次大概以上,但凡用于较为复纯的收配,大概唤起愈加隐藏的罪能。比如苹果手机可以通过三击翻开帮助触控,再次三击停行封锁。

假如当单击和双击手势交互曾经正在当前页面被占用,可以思考多击收配,尽管进修老原删多,但是通过新手引导的进修可以逐步造就用户习惯。习惯造就之后将会进步用户收配倏地度,也能进步隐藏罪能的运用率。

用超多案例,帮你掌握APP设计的手势交互(上)

4. 长按

单击属于高触发型,容易被误收配,而长按须要共同一定的光阳,符折须要用户确认后的罪能激活。当咱们须要激活一些隐藏罪能大概重要收配的时候可以运用长按,比如苹果手机长按屏幕可以激活使用打点;咱们正在编辑文原的时候长按可以真现选择、全选、复制、剪切、粘贴等帮助收配。

长按可以帮助当前收配,而不会烦扰当前正正在停行的收配。做为帮助性量和复纯罪能激活都是很是不错的选择,也能做为快捷预览,长按激活松开退出,正在 APP 设想场景中使用较为宽泛。

用超多案例,帮你掌握APP设计的手势交互(上)

5. 滑动

滑动是最根原的手势交互之一,正在 APP 设想中非屡屡见,不少罪能收配都离不开滑动那一动态收配。

可以通过高下滑动翻阅全屏联接性内容;摆布滑动可以对内容卡片、轮播 Banner、罪能模块切换和页面转场等停行收配;滑动还能正在屏幕中停行创做,比如一些绘画类 APP 便是通过手指滑动停行创做的;除了高下摆布滑动以外,斜角滑动也被丰裕操做,可以正在收配当前 APP 的时候激活手机系统的局部罪能收配。滑动是手势交互的根原收配,可以正在滑动的标的目的上面作更多延伸,满足更多罪能的激活。

用超多案例,帮你掌握APP设计的手势交互(上)

6. 拖动

正在滑动的根原上删多一定的压力,就会造成拖动的手势交互。拖动的收配可以对一些罪能停行位移,也能对一些浮层元素停行位置的改观。也有一些收配上面拖动和滑动是类似的,比如进度类罪能的收配,正在没有压力的时候也能通过滑动扭转控件的位置,有些是薄弱压力就能真现拖动。

一些产品首页罪能可以真现自界说,正在停行自界说罪能编辑的时候但凡便是正在激活后停行拖动真现位置的扭转。拖动由于须要两个止动的联结,可以有效的预防误收配。

用超多案例,帮你掌握APP设计的手势交互(上)

单指手势交互正在 APP 设想中使用很是普遍,跟着用户习惯的造就,相信还会显现更便利的收配和更多手势交互的帮助。删强良好案例的积攒和阐明,将有助于咱们进一步把握更多的玩法,下面将会为各人分享一些良好案例。

线上案例阐明

基于良好案例之上威力不停引发灵感,摸索出更多的设想处置惩罚惩罚方案。下面分享一些 APP 的上线案例,欲望那些案例可以帮助各人停行了解,从单击、双击、多击、长按、滑动、拖动停行案例涌现。

1. 单击进入全屏形式

单击

尽管手机逐步进入大屏时代,但是用户还是欲望与得更少的烦扰,全屏形式的收配可以让烦扰降到最低。

百度舆图 APP 正在收配后会有弹窗式的内容涌现,用户可以通过单击屏幕退出弹窗,再次单击则会进一步隐藏根原控件,进入全屏形式。通过单击的手势交互来简化内容构造,降低烦扰带给用户更会合的收配体验。

用超多案例,帮你掌握APP设计的手势交互(上)

2. 双击头像“拍一拍”

双击

正在微信群聊大概取摰友聊天的时候,为了重点提示摰友,可以通过双击摰友头像停行“拍一拍”,挥舞的头像和震动的提示删强摰友对信息的关注度。

联结双击的手势交互,正在不扭转当前规划的状况下删强社交属性,加强摰友间的互动提示,通过手势富厚了社交体验。

用超多案例,帮你掌握APP设计的手势交互(上)

3. 双击最大化图片预览

双击

正在图片预览的时候,可以通过双击最大化图片,便捷对细节的不雅察看。通过双击的手势交互来快捷放大图片,正在不少相册使用、电商产品、微信等社交产品中都有涉足,只有是全屏形式下预览图片,都可以通过该手势交互完成缩放。

双指缩放属于慢止动,而双击最大化属于快捷一步到位,符折查察图片细节等收配。但凡是双击最大化,再次双击规复一般。

用超多案例,帮你掌握APP设计的手势交互(上)

4. 三击激活“帮助触控”

多击

单击和双击的手势交互较为常见,而三击手势使用较少,有待深刻摸索。目前来说,带有 Home 键的苹果系列手机,可以通过三击 Home 键激活“帮助触控”倏地键,再次三击隐藏倏地键。

通过三击可以快捷激活罪能倏地键,减少了多个轨范途径,也不会招致用户误收配。

用超多案例,帮你掌握APP设计的手势交互(上)

5. 长按快捷预览出色片段

长按

通过爱奇艺 APP 刷剧的时候,正在查抄映室做品的历程中,可以通过长按做品封面停行快捷预览,播放出色片段来判断能否值得逃剧。

通过长按激活弹窗,可以正在不扭转当前规划构造的前提下,停行更多罪能收配。符折针对隐藏式罪能,也能防行误收配。

用超多案例,帮你掌握APP设计的手势交互(上)

6. 长按联结位置区域厘革

长按

不少映室类产品正在全屏播放室频时,除了通过拖动进度条停行快进/倒退之外,也能通过长按屏幕停行快进。

而腾讯室频 APP 取之差异的是联结了屏幕区域,正在全屏形态下,右侧区域长按快退,左侧区域长按快进。长按联结位置区域厘革罪能形态,深刻了手势交互的收配,也能带来纷比方样的收配体验。

用超多案例,帮你掌握APP设计的手势交互(上)

7. 长按滑动真现多选

长按

正在百度网盘 APP 中可以通过单击选择控件对文件停行选择收配,也可以通过长按整个区域真现选中,长按历程中可以联结滑动真现多选。

长按滑动停行多选针对文件较多的场景很是方便,也不用担忧误收配。正在一些相册使用中点击选择按钮之后也可以通过滑动真现多选,收配途径多一步。无论是通过激活选择按钮,还是长按都是起到二次确认的做用,长按滑动收配相对更简略。

用超多案例,帮你掌握APP设计的手势交互(上)

8. 长按取光阳跨度的联结

长按

长按激活罪能比较常见,但是联结光阳长短的厘革相对较少。苹果手机桌面的使用打点,正在长按使用图标时会弹窗展示罪能列表,继续维持长按则会进入使用打点,跟着长按的光阳跨度纷比方样激活差异罪能需求。

正在手势交互设想历程中,除了通过止动的差异激活罪能收配之外,也可以联结光阳跨度、力度、位置等停行组折交互,来满足多重罪能收配的需求。

用超多案例,帮你掌握APP设计的手势交互(上)

9. 可以挪动的红包

滑动

通过红包吸引用户进而转化是不少电商产品的玩法,正在必要 APP 中红包通过倒计时的模式营造出紧迫感,促运用户立刻便用,进而进步红包的运用率。红包悬浮正在右侧会盖住分类的展示,为理处置惩罚惩罚那个问题红包借助滑动手势可以挪动,用户可以正在右侧导航栏到底部标签栏之间任意滑动,便捷预览分类。

单指滑动是罕用的手势交互,精准定位元素之后可以拖动使其扭转位置,不只便捷内容的展示也不会组成底层内容的浏览烦扰。

用超多案例,帮你掌握APP设计的手势交互(上)

10. 通过右滑程度控制增除

滑动

右滑动是产品设想中很是普遍的手势交互,通过右滑开展列表隐藏罪能,比如编辑、置顶、增除等。

正在脉脉 APP 的音讯模块,音讯列表右滑可以停行置顶和增除,假如继续往右侧滑动则会真现主动增除,以此来代替点击增除图标完成增除收配的轨范。通过右滑共同点击增除收配途径多一步,而右滑程度控制增除效率更高,针对一些音讯较多的产品,可以便操做户快捷清算未读音讯。

用超多案例,帮你掌握APP设计的手势交互(上)

11. 列表式设想中的摆布滑动交互

滑动

正在列表式设想中,比较隐藏式的交互便是右滑和左滑,但凡右滑增除较为常见。而大局部的列表设想中都没有摸索过左滑交互,除非是左滑返回大概退出等收配。

正在小宇宙 App 的订阅栏目中,应付关注的内容列表右滑为增除(不喜爱),左滑则是添加到播放列表中。丰裕应用了摆布滑动的手势交互,不只收配方便也带给用户纷比方样的运用体验。

用超多案例,帮你掌握APP设计的手势交互(上)

12. 下拉程度映响罪能厘革

滑动

手势下滑造成下拉刷新曾经成为产品设想中的根原收配,为了进一步延展罪能,不少产品正在下拉历程中依据下拉的程度判断是刷新还是进入二层楼(流动大概罪能模块)。

但凡是通过控制下拉的距离来作判断,会提示“松开刷新”的字样,假如继续下拉则会激活罪能厘革。进入二级罪能界面大概二层楼流动界面,深度的罪能开发带给用户更多的选择性。

用超多案例,帮你掌握APP设计的手势交互(上)

13. 拖动完成自界说设置

拖动

跟着用户对赋性化的需求晋级,不少产品都开放了局部罕用罪能模块的自界说设置。比如网易云音乐 APP 的底部导航栏正在设置环节中,即可通过拖动完成自界说设置。

操做压力联结滑动可以真现拖动手势交互,应付一些须要用户郑重收配的罪能比较符折,也能有效避免误收配。

用超多案例,帮你掌握APP设计的手势交互(上)

14. 拖动叠加真现使用建组

拖动

当用户下载的使用不少的时候,但凡都会通过建组打点手机桌面上的各种使用软件。可以通过拖动使用叠加到其余使用软件上真现主动建组,建组、进组、移出等收配均可通过拖动手势完成,收配很是方便。

拖动手势交互针对一些避免误收配的罪能比较符折,相当于二次确认的历程。

用超多案例,帮你掌握APP设计的手势交互(上)

15. 拖动交互自界说标签导航

拖动

阿里云盘 APP 底部标签栏的设想去掉了传统的图标+笔朱模式,而间接以杂文原模式设想罪能模块。给取了摆布可滑动的交互模式,便捷展示更多罪能入口。

用超多案例,帮你掌握APP设计的手势交互(上)

左侧设想了全副罪能的入口,点击之后以图标+笔朱的模式展示所有罪能模块,图标设想也是很是的精致美不雅观。用户也可以通过编辑来自界说设置底部导航的牌序,通过拖动罪能列表的方式真现自界说设置。便捷依据用户原人的运用习惯来停行自界说,进步用户的运用体验。

用超多案例,帮你掌握APP设计的手势交互(上)

总结

手势交互正在 APP 设想中的普及带给用户更便利的运用体验,防行过多内容的展示所带来的运用烦扰。通过手势交互前期的用户习惯造就,一旦造就完成应付用户来说是很是友好的收配之旅。

原期次要为各人分享的是单指手势交互,后续将会为各人继续延伸更多对于手势交互的内容,欲望原期摸索的标的目的可以带给你更多的协助。

大厂出品!14个贴心的手势交互设想细节

跟着触屏时代的普及,借助手势交互可以进步用户的收配便利度和效率。

浏览文章 >

接待关注做者的微信公寡号:「黑马家族」

用超多案例,帮你掌握APP设计的手势交互(上)