IMG_0923
本书作者是Bill Scott和 Theresa Neil。分享这本书的原因是都是干货,如果已经读过《about face》或者《用户体验要素》等,这本书可以给我们的学习添枝加叶。
借这本书的简介所说,它总结出了Web界面设计的六大原则—-直截了当、简化交互、足不出户、提供邀请。这本书也展示了75种基于富交互构建Web界面的模式,所以这样说来,还是很值得读的。
而其中有一点,拖放模块让我觉得十分重要。原因在于无论是移动设备还是web端,拖放和编辑都必不可少。用书中的话说,即“拖放最大的用途就是允许用户按照自己的意愿把对象直接放在页面的相应位置上。”
而这个时候,我们需要关注两种表示目标位置的常用手段:
1、 占位符目标
2、 插入目标
而这两点,简单的来说需要注意的是:
1、 占位符拖动方面,应该通过被遮住模块的中心点位置来确定把被拖动模块放在何处.
2、 插入条既能保持页面稳定,也可以让用户看清楚放置模块后的重排效果,当然,一定的预期指示是必须的。
屏幕快照 2014-04-25 下午3.50.02
屏幕快照 2014-04-25 下午3.50.28

P.S,拖动过程中也应该尊崇:菲兹原理(Fitts’ Law)
T=a+b*log^2(D/W+1)
这是一个从起始位置移动到最终目标所需时间的函数,以供参考。

笔者在看本章的时候,掏出手机,赫然发现现在做的相对来说还不错的应用也很符合这样的交互方式,如zaker.
IMG_0931IMG_0932

第一幅图是Zaker的首页,长按磁块可以进入频道编辑页面。而点击删除时删除按钮出现,原位置删除操作变为完成,很符合标准的对称性交互。
IMG_0933IMG_0934
在频道排序下方,有排序的编辑邀请和说明,而下方的“智能排序”辅助性编辑也显得十分友好。
在长按拖动滑块时,会出现占位符缺口和目标位置。同时操作也很自然(基于边界放置,类似web端符合:在对象拖动3像素或按下超过0.5秒时启用拖动原则,)
但是这里要吐槽的是,当用户拖动想要重新排序的模块的同时,不能看到它原本叫什么名字(变成了黑色…)是不是有所不妥呢?

再次感谢这本书《Web界面设计》和以供吐槽的Zaker。如果有兴趣一起读书,我将期待与您的交流!~