首页 > 其他分享 >手势交互!人人都会用的交互方式应该如何设计?

手势交互!人人都会用的交互方式应该如何设计?

时间:2024-01-16 10:31:27浏览次数:38  
标签:交互方式 交互 用户 设计 滑动 操作 手势

一、什么是手势交互

手势交互是指通过手部动作来进行人机交互的一种方式。随着移动设备和触摸屏技术的普及,手势交互成为了一种重要的交互方式。它可以使用户更加直观地操作设备,提升用户体验,同时也可以拓展设备的交互维度,使得用户可以通过更加丰富的手势来完成各种操作。

手势交互!人人都会用的交互方式应该如何设计?_交互设计

手势交互的优势主要体现在以下几个方面:

1)直观自然

人们在日常生活中习惯了用手部动作来表达自己的意图,因此手势交互可以使用户更加直观地理解和操作设备,降低了学习成本。

2)丰富多样

相比于传统的点击、滑动等操作,手势交互可以包含更多元的操作方式,例如捏合、轻扫、旋转等,使得用户可以通过不同的手势完成更加丰富的操作。

3)空间感知

手势交互可以利用设备的传感器来感知用户的手部动作,从而实现对用户在空间中的精确跟踪,这为一些特定领域的应用提供了可能,例如虚拟现实、增强现实等。

手势交互做得好,也能更好的达成商业目标,抖音和快手就是一个很好的例子,通过向上或向下滑动的方式,即可切换上一条或下一条视频,结合推荐算法,便让短视频成为风靡全球的休闲娱乐活动,就算很多没有接触过智能设备的老人,也能快速上手短视频应用。其中就离不开手势交互的贡献,我们也能从中看到手势交互的魅力。


二、如何设计手势交互

手势交互可以极大的提高用户操作体验,目前已经有很多优秀的手势交互案例。比如经典的触摸屏滑动解锁功能,从iPhone 4开始到现在,仍在被沿用。因为手势是一种交互方式,往往用语言很难描述其实际使用场景以及效果,所以我们可以通过一些设计方法,来完成手势交互设计。

1、手势交互设计原则

手势交互也是一种人机交互行为,所以在设计手势交互时,需要遵循一些原则来确保交互的效果和用户体验。首先是简洁性原则,即手势操作应该尽量简单明了,避免过多复杂的手势操作。其次是一致性原则,即不同的手势应该有明确的含义,并且在不同的场景下保持一致性,这样可以降低用户的认知负担。另外还有反馈性原则,即系统应该对用户的手势操作给予及时有效的反馈,以便用户能够准确地感知到他们的操作是否生效。

一致性、简洁性、反馈性原则,在几乎所有交互设计中都需要注意,有了设计原则之后,我们再一起来看看如何设计一个具体的手势交互。

2、如何设计手势交互

在具体设计手势交互时,需要考虑到不同设备的屏幕尺寸和分辨率差异,以及用户的习惯和偏好。同时还需要考虑到手势的灵敏度和容错性,确保用户可以轻松地完成手势操作,并且不会因为一些无意识的手部动作而导致误操作。此处我们以滑动删除列表项的交互来举例,看如何来详细设计一个手势交互。

1)确认触发方式

我们希望用户在向左滑动列表时,列表右侧会出现删除按钮,用户点击删除按钮,即可完成删除动作。

所以此处的触发方式为:滑动,执行动作为:移动列表

2)设计具体的交互参数

当滑动动作产生时,列表会跟随手指进行移动,并且在手指回滑时,可以取消滑动操作,这是其一;其二是滑动区域会有最大范围,超出范围后,便不再改变界面或做弹簧效果,弹簧效果可以参考下拉刷新,滑动越远,界面元素移动的距离越短。

确认这些参数后,我们便可以着手去制作交互了。

3)制作和预览交互效果

我们需要用到原型设计软件,来帮助我们完成手势交互的设计工作,并且在完成后,可以进行预览。因为是制作原型,我们用设计最快最简单的原型设计工具,摹客RP来进行设计。

用摹客的手势交互举例

一些基础操作便不再此赘述,大家可以到摹客官网教程或社区中进行学习。

1、首先我们需要创建一个列表,通过左侧官方内置的WeUI组件库,快速创建一个静态的微信首页界面,如下所示:

手势交互!人人都会用的交互方式应该如何设计?_触摸屏_02

2、拖动列表的交互链接点到自身(自身如果是编组,记得拖动到浅红色的宽边框上来选择编组)

手势交互!人人都会用的交互方式应该如何设计?_手势操作_03

3、完成第二步后松开鼠标,设置交互参数为:左滑时,移动自己到(-88,168)的位置处,缓动为变速;

手势交互!人人都会用的交互方式应该如何设计?_触摸屏_04

4、对删除按钮做点击后,移动列表到(0,168)的位置处的交互,这样,我们就完成了一个完整的交互设置。点击右上角的预览,即可查看最终效果,也可以下载手机APP,在手机上打开这个项目,进行预览。

手势交互!人人都会用的交互方式应该如何设计?_交互设计_05

预览地址:https://rp.mockplus.cn/rps/cEqN11f37K/bS8j9Obuc?

!请注意,原型中只给第二条做了这个效果。

以上是采用摹客RP完成的一个很简单的手势交互效果,其他手势也可以借助这款工具完成设计。


综上,手势交互作为一种重要的人机交互方式,在移动设备和触摸屏技术的推动下得到了广泛应用。在设计手势交互时,需要遵循简洁、一致、反馈等原则,并考虑到设备差异和用户习惯。优秀的手势交互设计能够提升用户体验,使得用户能够更加便捷自然地操作设备。可以使用摹客RP、Axure完成这类交互原型设计工作。


标签:交互方式,交互,用户,设计,滑动,操作,手势
From: https://blog.51cto.com/u_14691742/9267772

相关文章

  • R语言关联规则模型(Apriori算法)挖掘杂货店的交易数据与交互可视化
    原文链接:http://tecdat.cn/?p=22732 原文出处:拓端数据部落公众号 关联规则挖掘是一种无监督的学习方法,从交易数据中挖掘规则。它有助于找出数据集中的关系和一起出现的项目。在这篇文章中,我将解释如何在R中提取关联规则。关联规则模型适用于交易数据。交易数据的一个例子可以......
  • Microsoft 365 新功能速递:通信合规性–检测Copilot for Microsoft 365交互模板
    51CTO博客链接:https://blog.51cto.com/u_13637423即将推出的MicrosoftPurviewCommunicationCompliance是一个新模板,专门用于分析所有CopilotforMicrosoft365提示和响应,预计在2024年1月底正式发布。CommunicationCompliance正在引入一个新模板,专门用于分析所有CopilotforMi......
  • Powersehll交互式输入定义方法-03
    定义和使用交互式输入时,有一些注意事项需要考虑。以下是一些常见的注意事项:提示信息清晰:在提示用户输入时,确保提示信息清晰、明确,并提供必要的上下文说明,使用户知道预期的输入内容。输入验证和错误处理:对于用户输入的值,进行必要的验证和错误处理。确保输入符合预期的格式、类型或范......
  • 如何使用Highcharts创建交互式数据可视化
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • 基于Java框架失物招领信息交互平台
    本论题国内外研究动态及研究意义:在我们的生活中,丢东西这件事经常发生,处处可见,丢钥匙、丢钱包、丢手机、丢宠物等等。一旦丢东西,就会给失主带来极大不便和损失。所以,在我们生活工作的社区里,就需要失物招领系统,给失主和捡到物品的人提供一个平台,让失主尽快找回失物,减少损失。失主可......
  • 一键与图片对话!LLM实现图片关键信息提取与交互
    本期文心开发者说邀请到飞桨开发者技术专家徐嘉祁,主要介绍了如何通过小模型与大模型的结合,解决数据分析中的问题。项目背景在智能涌现的大模型时代,越来越多的企业和研究机构开始探索如何利用大模型来提升工作效率,助力业务智能化转型。但其实小模型与大模型结合后,能够更加高效、低成......
  • Qt QProcess进程间调用及交互通信,完整示例
    1.概述使用Qt进行应用程序开发,主要是通过QProcess类用于启动外部程序并与其进行通信.1.1.运行进程要启动进程,需要运行的程序的名称和命令行参数作为参数传递给start()。参数以QStringList形式提供。start()方法原型:voidstart(constQString&program,constQStringList&a......
  • #星计划# 在OpenHarmony上使用网络组件axios与Spring Boot进行前后端交互
    在OpenHarmony上使用网络组件axios与SpringBoot进行前后端交互#jitoa#此博客由金陵科技学院-开放原子开源社李俊杰编写仓库地址:axiosTest·AtomGit_开放原子开源基金会代码托管平台结果演示:在OpenHarmony上使用网络组件axios与SpringBoot进行前后端交互_哔哩哔哩_bilib......
  • Three.js——十三、自定义大小画布、UI交互按钮以及3D场景交互、渲染画布为文件(图片)
    画布全屏以及自定义大小画布<!--canvas元素默认是行内块元素--><divclass="model"style="background-color:#ff0000;"width="300"height="180"></div>画布随窗口变化//画布跟随窗口变化window.onresize=function(){constwidth......
  • 人机交互主板定制_基于联MT8735安卓核心板的自助查询机/触摸一体机方案
    人机交互主板是一种商用智能终端主板,主要用于各种场景下的人机交互应用。它广泛适用于广告机、工控一体机、教学一体机、智能自助终端、考勤机、智能零售终端、O2O智能设备、取号机、计算机视觉、医疗健康设备以及机器人设备等。这款人机交互主板采用了联发科MTK8735芯片平......