收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4871|回复: 5

[原创] 关于简单拖动操作的交互思考

[复制链接]
发表于 2011-10-13 19:38:21 | 显示全部楼层 |阅读模式
一个非常简单的题目   设计一个交互方式  把一个图标从A处移动到B处

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

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

   1. 用户可能不知道这个图标可以拖动
   2. 用户拖动了图标不知道B处可以放下图标就会停留在B处
   3. 用户在拖动的过程中会担心是不是半路这个图标就掉了
   4. 用户的鼠标不太好用  AB两个位置和要拖动的图标又不是很大的时候就很容点错位置
   5. ……
   这个过程中还会有其它的种种问题影响用户做这样一个简单的操作  就不一一列举了  毕竟这个是探讨如何设计的帖子 不是提问题的 哈哈
   如何解决这些问题呢?

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

   体会一下这样一个场景

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

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

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

1.在拿杯子之前我十分的却确定这个杯子是可以用手很从容的拿了起来
2.这个杯子我同样可以很容的放到桌子的另一个不妨碍上菜的地方
3.这个杯子在这一瞬间其实有好多个状态

停放在桌面A处的状态;  我的手触碰到杯子的一瞬间的状态,  这时候我的手会有一个感觉 这个杯子是真是存在的;    杯子在被我即将端离桌桌面的一个状态,  这时候我的手会有另一个感觉这个杯子很轻,可以很容易的把它拿起来;  杯子离开桌面往B处移动的过程中有一个状态,这个时候杯子在手里 里面的酒可能会有轻微的晃动;杯子接触桌面B的一瞬间的一个状态,我的手知道哦杯子碰到桌面了,可以准备松手了; 杯子平稳的停留在B处又是一个状态,这个时候我的手已经离开杯子了  而且我很确信这个杯子可以被放在这里 放在这里很安全。
设计整个拖放的过程可以来模拟用手移动酒杯的过程
1.在鼠标移动到图标上之前,要让用户毫不迟疑的确信这个东西可以拖动

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

  如图所示  

36.png

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

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

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

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

37.png

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

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

5.如果这个图标比较小  那么用户鼠标响应的安全位置要做的稍微大一点  整个A区域鼠标移动上去都有反应才好    这个区域还不能太大  如果在A区域以外就有鼠标响应用户会觉得这个不和常理  出问题了
说了这么多  其实就是为了实现一个很基本的拖动操作而已  像这种简单基本的交互操作还有很多很多  每一种都有很多道理在里面   对这些道理理解的越深  对生活观察的越细致    设计出来的东西就越容易被用户接受

Don’t make them think

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

说两句题外话

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

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

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

[[i] 本帖最后由 slllllll 于 2011-10-13 19:41 编辑 ]

评分

参与人数 2威望 +2 收起 理由
nealyo + 1 感谢原创,欢迎投稿
langmuir + 1 原创内容

查看全部评分

 楼主| 发表于 2011-10-13 19:41:57 | 显示全部楼层
一个关于简单交互设计如何设计的思考   发出来欢迎大家排砖
回复 支持 反对

使用道具 举报

发表于 2011-10-14 15:46:54 | 显示全部楼层
我觉得做一个凸出来的样式,是不是比做一个凹进去的样式更容易让人觉得是可移动的?因为凹进去给人一种镶嵌的感觉,感觉是比较难移动的。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-10-15 08:34:08 | 显示全部楼层
凸出来的样式是可以让人觉得这个东西可移动,   不过有个小问题,  就在用户眼力的显示器上有个默认的心理模型是这个页面时垂直的  如果一个物品放在一个垂直的的面上的一个突出部分上,这个东西就会显得不稳固,好像要掉下来似的.    凹进去的感觉就可靠一些
回复 支持 反对

使用道具 举报

发表于 2011-10-20 09:47:41 | 显示全部楼层
学习一下先
回复 支持 反对

使用道具 举报

发表于 2011-11-1 17:56:34 | 显示全部楼层
用鼠标样式 cursor: move; 多好
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-5-19 22:45 , Processed in 0.093750 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表