这些手势交互设计你个get到了吗?

Date 2024-03-10 13:12:17

  与手势交互相关的体验记录。随着触摸屏时代的普及,手势交互可以提高用户的操作方便性和效率。那么,我们经常使用哪些手势交互呢?这些手势交互在产品中的应用是否被忽略?


这些手势交互设计你个get到了吗?


  01.在评论区,双指向上滑动,发出“拥抱”


  在听你最喜欢的音乐时,参与评论可以表达你对音乐的共鸣,或者你可以看到其他听众的评论来寻找知己。网络云音乐的评论区隐藏着一个手势互动,双手指向上滑动的评论会给它一个拥抱,两个恶棍微笑拥抱的动画显示在评论的右下角,然后“收到拥抱”的标签提示将显示在用户的头像下面。

  在不添加新功能入口的同时,双手指手势交互可以满足需求,不仅可以破坏原始结构,还可以给用户带来不同的操作体验。你注意到这个隐藏的鸡蛋了吗?在未来,除了发现视觉表面的可见内容外,我们还应该加强手势交互的操作,以找到更隐藏的功能。

  2.双击头像“拍一拍”

  在微信群聊天或与朋友聊天时,为了关注提醒朋友,你可以双击朋友的头像“拍摄”,摇头和振动提示可以加强朋友对信息的关注。结合双击手势互动,加强社会属性,增强朋友之间的互动提示,不改变当前布局,通过手势丰富社会体验。

 03.长按与时间跨度的结合

  长按激活功能比较常见,但结合时间长短的变化相对较少。苹果手机桌面的应用管理将在长按应用图标时弹出窗口显示功能列表。如果长按继续维护,将进入应用管理。不同的功能需求将随着长按时间跨度的不同而激活。在手势交互设计过程中,除了不同动作的激活功能操作外,还可以结合时间跨度、强度和位置进行组合交互,以满足多功能操作的需要。

  04.可移动的红包

  许多电子商务产品都是通过红包来吸引用户并进行转换的。在必要的应用程序中,红包以倒计时的形式创造了一种紧迫感,以促进用户立即使用,从而提高红包的利用率。红包悬挂在左侧会阻挡分类显示。为了解决这个问题,红包可以在滑动手势的帮助下移动,用户可以在左导航栏到底标签栏之间滑动,以便于预览和分类。单指滑动是一种常见的手势交互。在准确定位元素后,它可以拖动并改变位置,这不仅方便内容的显示,而且不会对底部内容的阅读造成干扰。

 05.同一功能不同的手势交互

  在观看视频时,短视频是单击控制播放/暂停,而视频播放软件则是双击控制。由于长视频用户需要长时间观看,触摸屏容易导致误操作,双击是形成二次确认,降低误操作的概率。由于短视频播放内容相对较短,播放/暂停可以通过单击控制,双击是更多功能的辅助。同一功能需要在不同的场景中配合不同的手势。在设计产品时,我们可以根据业务类型和用户场景的差异来满足更多功能的操作。用户习惯的培养将提高其操作体验。

  06.单击进入全屏模式

  虽然手机已经逐渐进入了大屏幕时代,但用户仍然希望得到更少的干扰,而全屏模式的操作可以最大限度地减少干扰。百度地图将在操作后呈现弹出式内容,用户可以通过单击屏幕退出弹出式窗口,再次单击将进一步隐藏基本控制器,进入全屏模式。简化内容结构,减少干扰,为用户带来更集中的操作体验。

  7.长按激活单击退出

  iOS的设计更多地探索了手势交互。全屏模式充分发挥了手势,也给我们带来了更多的手势交互理解。在苹果手机桌面上,我们可以通过长按激活应用程序管理,单击退出管理模式,操作非常方便。没有必要在当前的设计中添加更繁琐的控制器。借助手势,我们的设计可以更简单,减少过多内容对用户的干扰。

 08.通过左滑程度控制删除

  在产品设计中,左滑是一种非常常见的手势交互,通过左滑展开列表隐藏功能,如编辑、置顶、删除等。在脉搏应用程序的消息模块中,可以将消息列表向左滑动以放置顶部并删除它。如果继续向左滑动,它将自动删除,而不是单击删除图标来完成删除步骤。点击左滑删除操作路径多一步,左滑程度控制删除效率更高。对于一些消息较多的产品,用户可以快速清理未读消息。

  以上是优漫教育小编为您介绍的“[广州UI设计培训]:你得到这些手势交互设计了吗?相关内容,学习UI设计培训,您可以参考优曼教育提供的UI学习路线。学习路线包括PS软件介绍、人工智能和品牌设计、视觉表达技术、网络视觉设计、图标设计、产品交互、移动终端设计等。根据优曼提供的UI学习路线图,您可以清楚地了解您需要掌握的知识 !  

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计