PC和移动端有哪些交互差异?来看这篇全面总结。

PC和移动端有哪些交互差异?来看这篇全面总结!

一、前言

众所周知,PC 和移动端是当前人机交互的主要互动设备。经过十多年的发展,两者已经产生了成熟的交互范式,前者主要基于键鼠交互,后者以触屏交互为主。而为了适应不同设备的交互方式差异,提供更完善的用户体验,即便是相同的功能/组件也会衍生出细节上的差异。

本期将探讨这些隐藏在细微处的交互差异,从而更深入了解用户体验中设备/行为/界面的关系。

二、五个小案例

1. 输入框的清除按钮

清除按钮(clear button)是用来清除输入框内容的按钮。当输入框中存在内容时,出现在输入框的末端,点击后可清空已输入内容。pc
通过键鼠操作可以快速删除,但基于触屏交互的移动端删除操作较为麻烦。因此清除按钮在移动端中更常见,特别是在登录注册、搜索框等页面。清除按钮可以快速清空内容,提高操作效率,降低输入错误时的负面影响。

PC和移动端有哪些交互差异?来看这篇全面总结!

虽然在 web 界面中很少使用上述的清除按钮,但"快速清除内容"的需求依然存在。主要出现在多项内容同时清空的场景,例如 b 端筛选中常用的"重置/清除"功能,以及多选框中快速清空选项。

PC和移动端有哪些交互差异?来看这篇全面总结!

2. Hover 态

光标 hover(悬停)是 PC 端的常用的轻量交互操作,当光标悬停时界面元素会产生状态改变。Hover 可以为用户显示隐藏的信息(展示 tooltips/二级菜单);或指示按钮状态,提示用户此处可点击触发事件。

PC和移动端有哪些交互差异?来看这篇全面总结!

但是移动端的光标(手指)不会长期悬停在屏幕上,所以不会有 hover
态。而且指尖轻触即表示"点击",因此按钮将直接从"normal"变为"pressed"状态。相比于 pc
少了"hover"作为中间状态,因此在界面设计上移动端按钮需要明确的引导性,以传递"此处可点击"的信息。

对于 hover 的二级菜单,移动端需要多点击一步展开,或者 tab 切换进行快速跳转。

PC和移动端有哪些交互差异?来看这篇全面总结!

3. 按钮 VS 手势

复杂的手势输入是移动端的优势,但 PC 端需要更多按钮来承载功能。下拉刷新是移动端 feed
流常用的操作,将页面刷新和下滑手势丝滑的结合起来。在 PC 中如要实现内容区域的便捷刷新,则需要添加一个[刷新]按钮。在 banner
轮播中,pc 通常会提供准确的"上/下一页"按钮,而移动端中普遍通过滑动查看上/下一张。类似的案例还有图片放大缩小、视频音量调节。

PC和移动端有哪些交互差异?来看这篇全面总结!

究其原因,鼠标操作一般都有精确的操作/点击对象,因此通过按钮触发事件更为普遍。手势操作可以基于整体对象进行滑动/拖拽,这是符合用户手势操作心智的交互方式。同时手势操作的准确度低,屏幕空间有限,用手势代替按钮的性价比很高。

4. 长按与右键

右键呼出更多菜单是 PC 端的常用操作,移动端中的对应操作则由单击长按完成。而对于针对对象的编辑菜单,在 pc
端需要选中文本对象后需要点击右键,而移动端中选中文本后会立刻弹出菜单。这由于移动端中没有像"ctrl+c""ctrl+v"一样的快捷操作,快速弹出菜单减少用户操作步骤;而且选中后若再次叠加一个长按行为,很容易误判成单击从而取消选中。

PC和移动端有哪些交互差异?来看这篇全面总结!

PC和移动端有哪些交互差异?来看这篇全面总结!

5. 弹窗

PC 端信息反馈的样式更加多样,包括 tooltip、toast、message、drawer 等。相比移动端有更多非模态弹窗,应用方式更灵活,用户使用过程流畅。由于屏幕面积小,移动端弹窗面积占比更大,对用户而言打断感受更强,在设计过程中需要谨慎。

PC和移动端有哪些交互差异?来看这篇全面总结!

PC和移动端有哪些交互差异?来看这篇全面总结!

同时,移动端和 pc 的弹窗按钮位置也有所区别。目前移动端中强引导按钮普遍在右侧,而 win 系统中强引导按钮在左侧(MacOS 则在右侧)。

PC和移动端有哪些交互差异?来看这篇全面总结!

三、小结

交互方式差异深刻影响了 PC 和移动端界面形态,这些设计细节隐藏在日常交互行为中。虽然使用已有组件库时很容易忽略,在多端系统设计过程中依然需要注意这些差异性细节。

移动端

  1. 缺少 hover
  2. 输入相对不便
  3. 点击准确性低
  4. 手势操作便捷
  5. 长摁呼出菜单

PC 端

  1. hover 能实现轻量级的交互
  2. 输入方式高效快捷
  3. 光标点击准确
  4. 右键呼出菜单

即使是相同的产品功能也会产生差异化的交互变体,这些变化可能是基于设备限制、程序限制或人机交互行为。在多端产品时,如果忽略了这些交互细节,除了影响产品可用性,还可能违背用户的使用习惯,导致产品体验细节的缺位。

PC和移动端有哪些交互差异?来看这篇全面总结!

整体来看,交互界面不仅是功能的可视化载体,他还缝合了设备应用和用户行为,是产品使用流程的中枢。往前,界面/交互设计中应该兼容硬件能力,并传递准确的用户输入数据;往后,设计应该向用户传递设备的能供性,将设备能力转换成可感知的界面上的能供性,从而为用户提供完整且细致的产品体验流程。

作者:ASAK设计

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/240657.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
重蔚的头像重蔚管理团队
上一篇 2023年3月7日 13:00
下一篇 2023年3月7日 13:00

相关推荐

  • 两种常见的交互要素  

      培养用户的习惯 微交互能够鼓励用户进行更多的交互,其实不仅仅如此,它还应该有效地作用于培养用户习惯上!以此构成习惯的回圈。一般培养好使用者习惯需要通过下面三个步骤: 提示:帮助用户进行操作的提示…

    2022年6月25日
    0105
  • 交互体验提升——实际环境

      什麽是交互设计的实际环境?一般来说,包含着两个方面:其一使用者打开页面时的时空状态,其二使用者的交互手势。其一主要指的是用户在现实生活当中流览页面时的交互体验是否便捷、有效、无干扰性等。其二则…

    2022年6月25日
    0114
  • 觉得搜索设计简单?看大厂如何把搜索功能玩出花。

    编者按:在搜索功能上,天花板级别的设计师还能玩出什么花样?本文梳理了众多大厂的搜索设计细节,一次性看个够!搜索的本质是什么?无疑是内容的召回和信息的推荐。可随着时代的发展和行业公司的内卷,不少公司除…

    2023年3月2日 SEO操作
    02
  • APP移动端UI界面交互动效设计探讨。

    产品设计界有这样一个有趣的问题"如果每个人都在忙于完成ui界面设计,那么谁来完善产品用户体验?"一个优秀的触动人心的APP移动应用,它的交互动效设计一定是一流的。交互动效设计在用户体验设计中占有非…

    2023年2月14日 SEO操作
    021
  • 怎提升界面按钮的可见即可得效果

    合格的界面按钮设计,用户看到它就知道它能够被点击,并且大致知道是点击还是触摸的形式。在界面设计流程当中,按钮这一元素一般都会以各种各样的尺寸出现。但是,要具备良好的可见即可得的效果,这并不是容易的事…

    2022年6月25日
    0131
  • 初学者来收!交互设计中常见的7个误区。

    学习任何东西,最好都能重头开始,本文阅读时长大约 5 分钟。内容仅代表个人观点,欢迎各位探讨... 我身边有不少的同事或朋友转型交互设计的经历,他们的原职位有些是产品经理、销售或设计师。而我本人也是一名交互…

    2023年3月7日 SEO操作
    01
  •  有直接的线框图後即可展开交互设计?  

      不少的网页设计项目是客户他们直接给予线框图的,对於设计师来说是否就意味着只需要直接根据线框图即可进行设计工作?又或者是充其量优化线框图当中的细节,补充遗漏场景? 其实,线框图不过是客户自身的需…

    2022年6月25日
    0203
  • 如何深入产品找到设计目标?来看大厂的实战案例。

    当我们做项目的时候,最重要的就是设计目标的确定,这关系着我们的方案是否真正解决产品问题。然而这个目标可不是我们以为的用户需要这样改,也不是产品告诉我们这么改,甚至更不可能是拍脑袋定的,那这个影响大局…

    2023年3月7日 SEO操作
    00

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息