交互设计|大屏里的指尖奥秘——手势交互三分设共 2175字,需浏览 5分钟 ·2022-03-06 02:34 ▲点击"三分设"关注,回复"社群"加入我们欢迎来到专业设计师学习交流社区三分设|精选全球用户体验设计知识转自:淘宝设计编辑:章欣怡共 1899 字 17 图 预计阅读 5 分钟随着大屏时代的全面普及,新颖好用的手势交互能够给用户带来更高的效率和更有趣的体验,即便是最基础的手势也可以在不同场景里焕发新的光彩。今天我们一起来看看都有哪些让人愉悦的手势设计吧!Part 1单手操作:复杂功能也能轻松拿捏当下手机屏幕越来越大,给单手操作带来不少困难,不少 os 和 app 针对单手操作提供了更加便利的手势交互,让用户能够轻松使用。1. 单手轻便缩放「高德」对于地图的缩放提供了多种手势操作来应对不同的场景:常规场景下两指搓动缩放;单手场景下双击可按一定比例放大地图,而双按滑动则可以无缝缩放地图,彻底解决单手对于缩放地图的不友好;2. 单手快进快退影视 app 的全屏播放状态,基本形成了一套完善的交互操作心智,通过左右滑动、上下滑动以及区域长按等操作实现亮度、音量、快速进退和速率播放等功能、借助手势能力帮助用户尽可能的在单手状态下快捷实现基本操作;3. 系统级单手模式屏幕太大一只手无法掌控?目前绝大多数安卓 os 都可以通过不同的手势操作触发单手模式,在牺牲屏占比的情况下使用户能单手触达所有内容;如华为的「鸿蒙」通过底部横滑悬停的方式触发。Part 2多段式操作:一个手势的多种选择在有些 app 里,同一个按钮或手势采用多段式交互,比如根据不同的触发时长呈现不同的功能效果,以此来帮助用户实现更便捷的操作或更多的功能选择。1. 相似功能的递进「bilibili」的点赞按钮除了单击为点赞功能外,还有很符合产品特色的 “一键三连” 功能,即通过长按点赞按钮可以同时触发点赞、投币、收藏功能,已成为 B 站的标志性互动方式;「网易云音乐」的返回键,在长按时可以直接返回最上级主页,满足用户不同的返回需求。2. 不同功能的跨越淘宝首页下拉手势,根据拖拽距离产生两种交互结果:正常短距离下拉提示 “松开刷新”,而持续下拉则会进入淘宝二楼承接页。这样的方式也给用户多一种选择。Part 3轻便功能:预约舒坦的操作体验通过手势创新,我们也可以对一些以往较为繁琐的功能进一步简化,以更合理的方式高效实现;1. 未读消息快速清理对于强迫症患者来说,在「QQ」消息列表内的小红点快捷清空操作非常痛快,用户可以直观的将某条消息的未读红点直接拖拽删除。2. 随心所欲的画幅「bilibili」在全屏观看视频的状态下,可以通过双指操作让用户随心所欲的控制画幅大小和角度。3. 视频快速预览「youku」在主页里长按单个内容卡片,会进入预览模式播放该节目的简短切片让用户快速决策。4. 文件快速多选「百度网盘」里当用户点击并按住文件选择控件时,结合滑动可以实现快速多选。Part 4创新手势除了常规手势外,很多 os 会在系统级别定制一些更创新的手势,来方便用户实现快捷创新功能。1. 按压面积的识别在锤子手机的「samrtisanos」里,对图片或文字大面积的长按会唤起大爆炸模式,可快速识图或编辑文字内容。2. 按压关节的识别华为「鸿蒙」的截图功能通过识别关节敲击来实现;基于这种技术能力,可根据不同的关节动作来实现局部截图、滚动截图等功能。3. 隔空手势的识别华为「鸿蒙」摄像头可读取用户隔空手势,根据手势触发各种交互动作,使用户在特殊场景下不接触手机屏幕实现多种常规功能。The End写在最后手势是使用移动设备最基本的手段,在应用设计中,我们可以充分使用各种手势带来的便捷,帮助用户提升产品体验;当然,即便是最简单的点击与长按等手势操作,也可以结合具体场景,通过创新的交互响应来传递产品功能或解决用户的痛点。— The end —以下三分设文章,你可能也感兴趣▽ 📚 原创文章精选📚告别加班!使用设计系统方法更快地构建产品如何评估设计质量,提升设计技能你常常忽略的 7 个具有破坏性的体验鸿沟一篇文章告诉你服务设计到底能做什么?看 Apple CarPlay 如何提升驾驶安全和驾驶体验一起看看《对马岛之魂》如何打造初次对抗体验制定 “小目标”,了解产品管理中的结构化思维35+ 的 Windows 系统到底有什么了不起?导师与学员的高效交流 APP 设计 —— Lightship🙋 我们一起聊设计 🙋♂️高质量,学设计行交流微信群期待与更多优秀用户体验设计师一起成长PS:欢迎大家关注三分设,每天早上9点,准时充电。分享优质设计、创意灵感、新知新识,定期大咖老师直播分享,零距离连麦,答疑解惑。 添加小小虫微信号【 Lil_Bug 】,备注【 三分设 】加入!(只面向星标了公众号三分设的粉丝) 点亮『在看』,百万年薪↓↓ 浏览 58点赞 评论 收藏 分享 手机扫一扫分享分享 举报 评论图片表情视频评价全部评论推荐 交互设计 : 交互设计 《交互设计》全面介绍了交互设汁的起源、基本概念和交互系统的组成以及交互设计过程中的主要方法、原则和评交互设计 : 交互设计 0交互设计 : 交互设计 交互设计 : 交互设计 0ETSwipeCell手势交互ETSwipeCell是UITableView手势交互的子类。ETSwipeCell手势交互0ETSwipeCell手势交互ETSwipeCell 是 UITableView 手势交互的子类 。ETSwipeCell手势交互0交互设计交互设计0交互设计《交互设计》结合大量的网页和软件设计的实践,系统的介绍交互设计的原理、原则、流程工具和方法,特别提出交互设计0交互设计交互设计0SAStickyHeader手势交互工具SAStickyHeader 是一个简单stickyheader,可以通过滑动手势支持多图像。SAStickyHeader手势交互工具06种手势交互DemoiOS的6种手势Demo,包括单击(UITapGestureRecognizer)、左右滑动(UISwipeGestureRecognizer)、旋转(UIRotationGestureRecogni6种手势交互Demo06种手势交互DemoiOS的6种手势Demo,包括单击(UITapGestureRecognizer)、左右滑动(UIS6种手势交互Demo0点赞 评论 收藏 分享 手机扫一扫分享分享 举报