交互动作的直觉形成于『人与实物』的互动中。
在物理世界:接触物体一定有感觉。
在游戏里:与物体交互一定可以看到变化。

拖拽动作

拖拽对应的真实动作就是拖拽,就是『把物体从这里拿到那里』

多么简单直接的心智模型……

所以狸花有一个未解之谜……为什么拖拽动作在游戏交互里至今没有普遍使用。用来换卡牌、调整编队、拼字拼图……很多场景都是合适的,尤其在需要按顺序的情况下,拖拽效果拔群。有人说因为完成拖拽需要的手指移动时间长过点击,相比点击更麻烦,说得也对。但是在表达『互换』行为的时候,使用拖拽比点击更贴合直觉,比如这个——

点哪个放上去哪个没有问题,但如果我们想把第二个换一换呢?

在PC端有一种做法,鼠标点一下拿起物体,物体跟随鼠标移动,再点一下放下物体。这就是一个被简化的,不需要保持按下状态的拖拽。然而触摸屏没有悬停。

只使用点击要这样做,涉及到的状态变化多过拖拽,狸花不认为它更好用。

3.1拖拽的方向

拖拽不一定是上下左右移动的,我们把它分类为有终点的拖拽向外拖拽就可以了。

狸花真的不会取名字,总之请以图为准……当然所有拖拽都有终点

有终点的拖拽可以用于表达挑选、取回,或者『多个物体合成一个』的情景,拖拽终点有重要的意义。同时,拖拽的距离和方向是被限定的。

小声喵喵:不建议这种拖拽支持双向操作……

向外拖拽可以用于丢弃物品,经典案例即『拖拽删除』——尤其是『拖拽到面板之外删除』。这里的拖拽终点是一个范围,没有明确的落点,拖拽距离会成为一个取值范围(面板外到屏幕的极限),方向也不是一定的。

如果我们把所有用户的拖拽轨迹汇集起来,有终点的拖拽会集中在两点间最短线段上,而向外拖拽很可能得到放射形。

小声喵喵:想知道为什么现在通用的是『长按-拖拽删除』……拖拽到删除区域在手机屏幕上并不容易误触,即使删除属于重要操作,二次确认也足够反悔了?毕竟长按本身比拖拽还要不常见……

3.2拖拽的距离

一般游戏用户遇到需要拖拽的界面,会是一手持机一手拖拽的。也有少数竖屏游戏里,用户会单手拖拽。但无论哪种都是距离越长,物体意外脱手的概率越大。

不同拖拽距离下的狸花心情……示意+卖萌图

所以请尽量减短拖拽的距离/*也不要矫枉过正到几乎相连,拖拽终点会被手指挡住的*/,尤其是不要让起点和终点不在同一屏……拖拽滚屏的体验可以在手机上拖动app模拟一下,手指在设备边缘真的很容易滑脱。

拖拽终点的实际区域最好略大于视觉效果,在物体进入终点区域后自动放到正确的位置……幼年狸花就是用这个标准来筛选可以玩的拼图游戏的……

最后,拖拽路径尽量一一对应,画出来呈现平行线段组,或者收于一点。不要在起终点的路径上放别的终点。

综上所述L形界面就别拖拽了!

3.3拖拽衍生物:模拟摇杆

模拟摇杆真是个伟大的发明……虽然它长得完全不像方向键但是意外地很好懂!……关于它的心智模型来源于手柄这一点狸花存疑,用过手柄的人数至今还少于玩手游的吧……

我们与模拟摇杆交互的动作是一种连续的拖拽。与之前的所有拖拽相比,区别在于物体的位置和手指的位置不同步,这个映射关系可以大概描述为,拖拽的方向=物体移动的方向,拖拽的时间×物体速度=物体移动的距离

然后狸花发现,拖拽的距离在这里消失了。没有用上。

通过狸花对自己和其他用户的观察,在需要人物快速逃离某个地点时,大家的动作都很相似——用力拖拽摇杆,甚至连手机一起向目标方向倾斜。此时都会拖出远大于以往的距离。摇杆的中心点相对四个方向边缘的距离,是有极限取值范围的,也就是说用户能够拖拽的距离,在现有的动作习惯下是一个范围。

就像这样,有只狸花在追你!快跑哇!

那么摇杆的拖拽距离有无可能作为系数加入物体移动的映射?狸花期待答案。

小声喵喵:模拟摇杆可以支持360度的方向变化,我们也习惯了用它控制人物转向,那如果用它来控制建筑物旋转,会否优于常见的90度转向按钮?——来自一个玩开罗快要掉秃毛的狸花。/*但是狸花还是写完就玩开罗去了!*/

el-tree 拖拽互换位置_那些我们与UI交互的动作(三·拖拽)相关推荐

  1. 写出一段代码将链表中的两个节点位置互换位置_面试 leetcode 算法专题系列(二)—— 链表...

    前言:只照着常考题去刷题确实是一种方法.但调研之后发现自己还是考虑不周,刷题刷的不应该是题,而是解题的思路和熟练程度.于是我决定重新组织一下刷题笔记的讲解顺序,不再以面试常考题来刷.而是以面试出题频率 ...

  2. 写出一段代码将链表中的两个节点位置互换位置_干货||链表的技巧和算法总结...

    链表的操作总结   链表反转 这是一个简单的链表操作问题,在leetcode上面有52.7%的通过率,难度是简单.但是还是想在这里基于python做一下总结,顺便总结一下链表的各种操作. 首先先看一下 ...

  3. python列表中互换位置_如何在Python列表中切换两个项目的位置?

    I haven't been able to find a good solution for this problem on the net (probably because switch, po ...

  4. 使用vue-grid-layout完成桌面拖拽布局功能(实现两个元素互换位置)

    最近有个项目需要实现和windows桌面类似的图标拖拽功能,找了很多组件都没找到一个合适的,但通过本博主的不懈努力最后发现了两款不错的插件: sortablejs vue-grid-layout 本来 ...

  5. 一个可变布局列表,有9种布局item大小,每个item可拖拽切换位置

    代码地址如下: http://www.demodashi.com/demo/11271.html 一.准备工作 准备一台安卓设备手机,4.4以上版本 本例子实现,一个可变布局列表,有9种布局item大 ...

  6. Vue 实现拖拽模块(二)自定义拖拽组件位置

    上文介绍了 拖拽添加组件 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...

  7. vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort

    今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...

  8. 计算机word文本段落位置互换,用word怎么使两个段落互换位置

    公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:用word怎么使两个段落互换位置回答:方法一:1.选中要变换位置的段落:2.单击开始----剪切按钮:img src="https: ...

  9. 拖拽之路(五):自定义QListWidget实现美观的拖拽样式(拖拽不影响选中 + doAutoScroll)

    环境配置 :MinGW + QT 5.12 效果图: 这种自定义拖拽样式的灵感来自于Chrome浏览器的书签栏.文章中所使用的自定义QListWidget来自于:自定义QListWidget实现ite ...

最新文章

  1. 安卓adb常用简单指令
  2. 洛谷P3374 【模板】树状数组 1(Python和C++代码)
  3. ActiveRecord多表查询
  4. sudo gedit出现No protocol specified
  5. 基于SOA的银行系统架构
  6. panic与recover函数
  7. 谷歌CEO皮猜:我们想服务中国用户,但是没想好提供何种服务
  8. Ghost配置6——首页太阳系动画效果
  9. android 控件获取rect,Android自定义View圆形进度条控件(三)
  10. 揭秘:为何冬天成都游戏玩家整体水平会下滑?
  11. C盘Administrator中 .m2/repository里面是什么
  12. 怎么查看oracle是多少位的,查看 Oracle 是32位还是64位的方法
  13. 启用launch文件
  14. 一个基于WinHttp的轻量级的分片下载库介绍
  15. 从零开始教你用Unity做一个自动感应门
  16. idea当中批量替换变量名字
  17. 【凸优化】maximal 与 maximum的不同
  18. 跨境电商属于外贸吗,Starday跨境电商靠谱吗?
  19. bugku-post
  20. 梦幻西游网页版无法在虚拟机上运行【游戏】【页游】【虚拟机】

热门文章

  1. 8.18 NOIP模拟测试25(B) 字符串+乌鸦喝水+所驼门王的宝藏
  2. Wannafly挑战赛18B 随机数
  3. 【转】BYV--有向图强连通分量的Tarjan算法
  4. webapi 初识 net
  5. 本地访问网站好使外网不好用 可能是防火墙端口
  6. poj 3373 Changing Digits
  7. appiumsend_keys很慢的解决方法
  8. python中模块导入问题(已解决)
  9. Markdown引用图片,且不使用网上链接的解决方法
  10. 网易研选大数据架构演进