小梁建站专注重庆中小企业网站建设SEO优化,让您网站更具价值!

当前位置:首页 > WEB前端学习 > 解析拖拽动作网页元素经历的5种显示状态

解析拖拽动作网页元素经历的5种显示状态

时间:2018-08-17 23:22 来源:重庆网站制作公司(www.seozol.cn) 作者:重庆网站建设公司

          解析拖拽动作网页元素经历的5种显示状态
 
 
 与传统列表选中后添加删除相比,直接拖拽的方式可减少用户的记忆负担,尤其元素处于多状态变化过程中。拖拽方式实现元素状态变化显得更加高效。拖拽的方式依赖与视觉识别而不是用户的记忆,实时的状态变化,使用户更加清楚前后变化的操作结果。
 
页面上一个元素从初始状态到拖拽完成共经历了:
 
   初始状态->选中状态->拖拽状态->拖拽到达放置位置状态->松开结果状态
 
状态1:初始状态
 
初始状态
 
 
状态2:选中状态(开始拖动元素之前鼠标焦点处于该元素上或手机长按该元素)


选中状态
 
 
状态3:拖拽状态(拖动过程鼠标或手指长按开始拖动,此时元素随鼠标或手指一同移动)
 

拖拽状态

 
 
状态4:拖拽到达放置位置状态(当手指或鼠标制定区域,拖动可放置被激活,提示用户此时松开可完成拖动动作)
 


拖拽到达放置位置状态
 
状态5:松开结果状态(拖动完成,起始位置元素被删除,元素新增至右边区域)
 
 

松开结果状态
小结:
 
    
一个简单的用户拖拽动作包含丰富的状态变化,在设计这些状态变化的过程中尽量把我用户的心里预期,揣摩用户的心智模型,进而实现用户的心里预期。
 
 
本文标签:

版权声明:本文:解析拖拽动作网页元素经历的5种显示状态 由重庆网站制作公司(www.seozol.cn)原创内容,如需要转载请注明原文网址:重庆网站建设公司http://www.seozol.cn/

 
喜欢看,就分享到:

围观: 9999次 | 责任编辑:重庆网站建设公司

回到顶部