关于简单拖动操作的交互思考

  一个非常简单的题目:设计一个交互方式,把一个图标从A处移动到B处。

  通常最直接的方式是在A处用鼠标左键按住图标 ,然后移动到B处松开。好了,就是这样一个简单的交互操作。

  这里面其实有很多问题需要考虑周全,才能让一个简单的拖动给人感觉从容流畅,让用户毫无障碍的去完成他的目标,仅仅是一个简单拖动操作。

  简单列举一下用户可能会遇到的问题:

  用户可能不知道这个图标可以拖动

  用户拖动了图标不知道B处可以放下图标就会停留在B处

  用户在拖动的过程中会担心是不是半路这个图标就掉了

  用户的鼠标不太好用 AB两个位置和要拖动的图标又不是很大的时候就很容点错位置

  这个过程中还会有其它的种种问题影响用户做这样一个简单的操作 就不一一列举了 毕竟这个是探讨如何设计的帖子 不是提问题的 哈哈

  如何解决这些问题呢?

  我个人喜欢把这种设计还原到生活中去,先找生活中的模型。根据生活中的模型来设计一个交互 让用户非常熟悉的去完成他的目标 甚至都感觉不到你设计的存在那样最好了。

  体会一下这样一个场景:

  在外面吃饭的时候,桌子上会有很多杯子盘子什么的已经放满了。这时候服务员来上菜,需要我挪动一下面前的酒杯

  我会很自然的用手拿起酒杯放到桌子的另一个地方

  这个就是拖动一个图标从A移动到B的生活中的模型之一

  在拿杯子之前我十分的却确定这个杯子是可以用手很从容的拿了起来

  这个杯子我同样可以很容的放到桌子的另一个不妨碍上菜的地方

  这个杯子在这一瞬间其实有好多个状态

  停放在桌面A处的状态; 我的手触碰到杯子的一瞬间的状态, 这时候我的手会有一个感觉 这个杯子是真是存在的; 杯子在被我即将端离桌桌面的一个状态, 这时候我的手会有另一个感觉这个杯子很轻,可以很容易的把它拿起来; 杯子离开桌面往B处移动的过程中有一个状态,这个时候杯子在手里 里面的酒可能会有轻微的晃动;杯子接触桌面B的一瞬间的一个状态,我的手知道哦杯子碰到桌面了,可以准备松手了; 杯子平稳的停留在B处又是一个状态,这个时候我的手已经离开杯子了 而且我很确信这个杯子可以被放在这里 放在这里很安全。

  设计整个拖放的过程可以来模拟用手移动酒杯的过程

  1.在鼠标移动到图标上之前,要让用户毫不迟疑的确信这个东西可以拖动

  解决这个问题就需要在用户进行拖动操作之前给与用户很强的心里暗示,这个东西可以拖动

  如图所示


  当一个2d的图标放在一个平面上的时候,很难让用户觉得这个东西可以用鼠标拖动。

  如果设计成1的这种感觉用户就很容易感觉到这个图标可以动(还是还原到生活中 通常一个平面上有一个不深的小洞洞的时候, 这个小洞洞里面如果有个小东西 很多人会不自然的伸指头去扣一下里面的东西)。

  2.鼠标移动到图标上的时候图标要有响应,类似当手接触到杯子的时候一下就感觉到了这个东西很轻可以从容的移动。

  如图这个设计不一定是最好的设计,但至少这个过程让用户在拖动之前就知道哦 这个东西是活的,可以动。


  3.按住拖动的过程中图标要很好的跟这鼠标移动,如果在这个过程中能有个大小或者阴影的变化就最靠谱了,可惜很多时候在网页游戏的技术条件下很难实现。

  4.放置的位置B 最简单的方案就是做成跟A一致的感觉,这样用户就可以不用费脑筋的知道。B处可以放置这个图标,同样这个图标在下落的过程中能有一定的变化就最靠谱了。

  5.如果这个图标比较小,那么用户鼠标响应的安全位置要做的稍微大一点,整个A区域鼠标移动上去都有反应才好,这个区域还不能太大,如果在A区域以外就有鼠标响应用户会觉得这个不和常理,出问题了。

  说了这么多。其实就是为了实现一个很基本的拖动操作而已,像这种简单基本的交互操作还有很多很多。每一种都有很多道理在里面,对这些道理理解的越深 对生活观察的越细致,设计出来的东西就越容易被用户接受。

  Don’t make them think

  也许还有很多更好的方式来实现这个移动。但是,尽量不要在这样的东西上玩花样 用户这个时候的目标是移动这个图标,仅此而已。不要试图在这上面炫耀技术或者创意,不要干扰用户,让他们从容的完成他们的目标才好。

  说两句题外话

  现在的手机屏幕很大,但还是因为图标太多,一屏显示不开,于是就有了各种各样的滑动切换屏幕操作。

  但是只要仔细感觉一下就会发现,不管是左右滑动还是上下滑动 ,这种滑动最好的体验还是pre和iPhone上的,整个andriod系和黑莓系的手机。都做不出那么从容顺畅的感觉,WP7的手机我没用过,希望能做的更好。

  仅仅是一个看起来无比简单的滑动操作而已 其实里面也是有很多可以挖掘和深入的设计。只要用心观察,用心设计。

时间: 2024-10-07 20:43:01

关于简单拖动操作的交互思考的相关文章

窗体标题栏外的拖动操作

窗体标题栏外的拖动操作 (作者:张均洪) 2004-9-3 我们知道对窗体的拖动只需要点住标题栏,拖动鼠标就可以了.但有些时候我们想在窗体的标题栏外的区域实行拖动窗体的操作.这时就要需要我们自已写些代码了,下面是我的做法,供大家参观. 新建一个窗体FORM1,并放入两个RADIOBUTTON控件,第一个是确定是否窗体拖动,第三个是确定是否指定某一区域进行窗体拖动. 以下是窗体代码: using System;using System.Collections.Generic;using Syste

再谈客户区对话框拖动操作

<无标题对话框的拖动>,示范了如何用鼠标点击窗口或对话框背景(即客户区)进行拖动操作,文章中提供的解决方法在没有上下文菜单的情况下运行很正常,一旦有上下文菜单时,文中所提供的方法便显现出了缺陷--上下文菜单无法显示出来.本文将针对这个问题对前一篇提出的方法进行改进. 当初实现拖动的基本思路是改写 OnNcHitTest 例程,让鼠标在客户区中的点击始终返回 HTCAPTION 而不是 HTCLIENT,从而诱使 Windows 实现拖动操作.没想到这样做使上下文菜单的操作出现了混乱,原因是如果

python模拟鼠标拖动操作的方法_python

本文实例讲述了python模拟鼠标拖动操作的方法.分享给大家供大家参考.具体如下: pdf中的书签只有页码,准备把现有书签拖到一个目录中,然后添加自己页签.重复的拖动工作实在无趣,还是让程序帮我实现吧,我可以喝点水,休息一下了 1. Python代码 复制代码 代码如下: # # _*_ coding:UTF-8 _*_ __author__ = 'wp' import win32api import win32con import win32gui from ctypes import * i

ubuntu 14.04-ubuntu 输入gedit,结果如图,我是小白,能不能提供一个简单易操作的方法

问题描述 ubuntu 输入gedit,结果如图,我是小白,能不能提供一个简单易操作的方法 10C 解决方案 建议还是使用vi或vim吧. 解决方案二: 或许在tty1终端下不支持,试试terminal,应该就可以打开了 解决方案三: 你这是在tty终端环境下,不是在x视窗下,gedit是一个gtk的图形界面程序,在这个环境下当然不能运行了 解决方案四: 装个vim吧,那个好用 解决方案五: gedit是图形界面的编辑器,要去图形界面下打开,纯字符界面还是用vim吧. 解决方案六: 字符界面,用

怎样在vc6.0编译器中实现一些简单的操作

问题描述 怎样在vc6.0编译器中实现一些简单的操作 今年刚学c语言,大作业用vc6.0编译,想添加一些很简单的界面,比如背景颜色,亮度等,可以用lowvideo() ,textcolor() ,.textbackground()函数,这些函数都在conio.h里面,但是vc6.0里面好像没有conio.h头文件,请问这个问题怎么解决呢?之前看到有用windows.h,但是那个好像太麻烦,有没有简单一点的办法实现呢? 解决方案 VC++ 6.0 简单的调试操作vc6.0实现操作excle之下篇

php实现的简单数据库操作Model类_php技巧

本文实例讲述了php实现的简单数据库操作Model类.分享给大家供大家参考,具体如下: 该数据库模型类可实现数据库的增删改查,简化数据库操作. 1. config.php代码: <?php define("HOSTNAME","127.0.0.1"); define("USERNAME","root"); define("PASSWORD",""); define("DA

app-新手求问,用playmaker做一个可以用游戏手柄方向键操作的交互

问题描述 新手求问,用playmaker做一个可以用游戏手柄方向键操作的交互 新手求问,用playmaker做一个可以用游戏手柄方向键操作的交互.图片是自己学习研究的可以实现键盘上方向键控制移动,但是连上游戏手柄后只能用左右方向键,前后方向键不能实现.最后的效果是希望能够实现生成在手机上的app中用游戏手柄控制方向的交互~跪谢!!! 解决方案 这个问题有点难要特出办法才解决,另求高人在线吧

oc-OC 实现简单通讯录操作

问题描述 OC 实现简单通讯录操作 实现简单通讯录操作.? 1.定义联系?人类Contact.实例变量:姓名.性别.电话号码.住址.分组名称.?方 法:初始化?方法(姓名.电话号码).显?示联系?人信息? 2.在main.m中定义可变数组,管理所有联系?人.可以添加新联系?人对象,如果姓名 或电话号码为空,打印添加失败.? 3.获取某个分组下的所有联系?人.? 4.根据电话号码搜索联系?人.? 5.获取所有?女性联系?人? 6.根据姓名删除联系?人? 7.删除某个分组全部联系?人 ? 8.展?示

使用DOTNETBAR控件, 想实现DATAGRIDVIEWX数据往advTree的节点上的拖动操作

问题描述 如题,在使用DOTNETBAR控件时,想实现DATAGRIDVIEWX数据往advTree的节点上的拖动操作,拖动到advTree控件上后,如何选定节点? 解决方案 解决方案二:没人来吗~自己顶下,有实例最好~