在互联网产品中,快捷方式随处可见。 例如,长按B站和三连按。 本文总结了其中的两大快捷方式。 拖动和双击。 探索这两种方式的使用和设计,总结出三个实用步骤,有助于大家根据业务选择合适的快捷方式。
文章大纲:
快捷方式“拖放”快捷方式的“双击”在互联网产品中常见的情况是根据业务选择合适的快捷方式,但印象最深的是哔哩哔哩APP的三键连按,长按“点赞”“收藏”
本文还总结了两种常用的快捷键:拖动和双击。 第一节和第二节一起探索这两个快捷方式是怎么使用的吧。 第三节分享了“快捷方式”,有助于我们在工作中根据业务选择合适的快捷方式。
请关注第三节。 前面两个是专业知识,第三节是思路,面对其他快捷方式也可以转移和重用。
一、快捷方式“拖动”很常用,解决三个问题。 复制、删除、移动。
1 .复制只需拖动即可完成复制的操作很少,通常与alt键配合使用。 按下alt键后拖动可进行复制。
例如复制文件夹、用绘图软件复制图层等,与鼠标右键单击后再单击复制按钮相比,拖动更快。
拖动复制
2 .删除PC端并拖拽&; 一般会放置,一般会将删除对象直接拖到垃圾桶或回收站。
我主要想谈谈移动端的拖拽删除。 虽然目前移动端的拖拽删除还不普及,但是使用效率异常高,所以我也找了一些移动端的案例。
拖动边删除的常用方法是拖动元素后,界面会显示垃圾桶图标,拖动元素到回收位置后松开即可删除。
用微信拖动删除图片
但这种交互方式很模糊,比如微信的拖拽删除可能很多年级稍年长的人不会注意到,所以大多数产品都会选择经常出现的删除按钮进行处理。
拖放&; 放下操作适用于什么场景?
嘀嗒有一个很好的例子。
嘀嗒是拖放&; 将微滴完美融合在产品中。 可以看到下面的照片。 这是嘀嘀打车制作现场预告的界面,可以把预告卡放在自己喜欢的位置。 也就是说,拖动这个动作是这个场景的强烈动作,很容易发现。 此时,拖动&; 嵌入放下的话,用户就不会有发现不到的危险。
嘀嗒拖动卡片
嘀嘀打车的案例中也可以得到这样的经验:界面中没有一般的交互,可以考虑如何连接场景,使用户更容易找到该交互。
例如,当您移动到元素时,会显示“删除”交互组件,缺省情况下不显示“删除”按钮,并且在您移动到元素之前不会显示按钮。 在这种情况下,当用户尝试删除此元素时,鼠标移动到该元素几乎是必然的,因为用户可能找不到它,所以很好地结合了删除的交互。
3 .移动位置拖动移动位置当然,这已经是大势所趋,拖动时要注意如何让用户感知拖动。
例如,如果将聊天消息中的图片拖动到另一个朋友身上,则图片要移动,需要明显的语义符号(例如高亮)才能让用户感知拖动释放的区域。
挤出定位
线的位置
二、双击互动也是老朋友。 特别是在移动终端上,许多APP都有双击操作的快捷方式。 此外,有些操作只能双击。 例如,在嘀嗒直播之间按点赞的操作。 我第一次用的时候,还没找到按点赞的按钮…
在体验了PC端和移动端的产品后,我们发现双击操作普遍用于三个地方:缩放、暂停/播放和点赞。
目前比较明亮的是跳书,在跳书会议中可以双击放大/缩小视频画面,比点击操作有数倍的效率。
三、结合业务选择合适的快捷方式,了解拖动和双击的一般设计方式,就相当于储备了饲料,但何时使用、如何使用,需要结合实际业务进行考虑。 为此,我也总结了三个实用步骤,可以直接应用于实际设计中。
快捷方式3步骤:整理流程删除步骤快捷方式匹配
为了便于理解,通过实例举例说明了实际工作中的一些敏感信息。
看过直播,也发过弹幕吧。 其实弹幕区域是个小聊天室,发送弹幕的是聊天室的消息。 现在有助教的作用,职责是管理观众的信息。 本来,该操作由PC端进行,所以计算机的操作很方便。 但是现在有助教没有电脑,只能用手机进行信息管理操作的场景。 这就是需求的背景。
尝试使用快捷方式表达式进行应用。
第一步(整理流程我们实际上是为了解决用户在完成一个任务的过程中遇到的问题而设计的,所以一般需要整理用户的任务流,所以先整理一下用户流吧。
需求:用户在手机上完成短信管理。
可以从要求中提取三个过程:回复消息、删除消息和复制消息
然后,将这三个流程一一分解:
回复消息长按消息单击回复输入回复内容发送成功删除回复消息长按消息单击删除成功复制消息长按消息单击复制成功复制事实上我们可以进一步考虑,优化如何使过程简单高效。
步骤2 (删除步骤2 )删除步骤。
例如,多余的点击、移动端多余的手指移动、PC端多余的鼠标移动等,都是可以考虑删除的地方。
从第一步整理的流程可以看出,每个流程都必须首先唤起功能,然后才能操作。 例如,在回复中,在长按下消息唤起回复按钮后再次单击,然后进入回复过程。
其实我们真正需要的是回复、删除、复印这些最终功能,所以上一次点击是可以考虑删除的动作。
一句话,这里的删除是分析层面的删除,可以保留在设计中。 为什么呢? 由于快捷操作意味着两点,第一用户可能还不熟悉,第二可能交互很模糊,用户无法发现。
用户不熟悉这个问题,所以很容易解决,如果这个操作真的能提高效率,用户在使用中就会习惯。
如果交互很模糊,为了帮助用户养成习惯,我们需要做很多引导和提示。
例如,必须按住Ctrl A才能选择全文,而不是在按下Ctrl A时选择全文。 这就是与大众习惯的相互作用不同之处,跳过书会在用户按下Ctrl A时提示用户。 我也在用了几次之后养成了习惯。 习惯是会养成的。
第三步(调整快捷键的最后一步是调整快捷键。 这意味着可以通过使用快捷方式而不是删除快捷方式的步骤来提高操作效率。
以回复为例,普通回复通过长按消息单击回复输入回复消息回复成功。 在第二步中,提取了要删除的动作。 也就是说,让我们考虑一下“长按”“单击回复”这两个动作使用的是哪个快捷方式。
考虑到大量的上下翻页消息页面的行为,意味着点击操作可能容易发生误接触,最后决定将双击作为快捷回复的方式使用。
双击该消息可以回复该消息。
但是,这种交替行为很模糊,所以我们对两个驱动器都进行了操作。
第一,保留长按回复按钮的操作,第二,通过引导用户在回复消息时提示用户只要双击该消息就可回复,来养成用户快速手势的习惯
虽然可以通过三个步骤来组织快捷方式,但实际上做任何事情都是有章可循的,只要掌握了思路,就能举一反三。
最后回顾一下:
拖动常用于复制、删除和移动位置的双击。 常用于放大/缩小、暂停/播放、点赞快捷方式公式这3个步骤。 整理流程删除步骤匹配快捷方式正文为@馒头面包为原创,人人为产品经理,未经许可禁止转载
标题来自Unsplash,基于CC0协议
本文的观点只有代表本人,每个人在产品经理平台上只提供信息存储空间服务。