加载中…
正文 字体大小:

视线流和鼠标流

(2007-03-22 17:07:21)
分类: 探索
这个词的起源是前阵子和同事提出优化登录和注册的表单开始的。为了优化我们注册/登录的表单,我把浅议 Web 表单设计发给同事看,然后我们的表单大概是这样子的:
视线流和鼠标流
这样的设计保证视觉的注意点和鼠标路径都是一个顺畅的、向下的过程,并且在最后关键的提交时汇聚在一起。每次都说“视线的移动”、“鼠标路径”什么的也繁琐,然后我就擅自发明了“视线流”和“鼠标流”这两个词啦~:P
如图,绿色的是视线流,红色的是鼠标流。我们没有眼动仪、没有鼠标路径研究的方法,也知道实际视线的移动决不像图示的两条线那么简单。视线可能还是Z字形向下的,要看验证码和复选框之后的内容:
视线流和鼠标流
但是这样的设计已经基本保证了用户在填写表单的时候,一步一步很顺畅,最后提交按钮出现在顺利成章的位置,一点,就OK啦。
视线流和鼠标流只是大概表示视线和鼠标路径的移动,在用户进行关键的交互任务时,要尽量保证它们的流畅,也尽量汇聚在一起
一定要说,只是关键的交互任务,比如填写表单,因为这时候用户的注意力都在这里。用户浏览网页时视线可能在整个页面里灵活变动、鼠标可能在右侧操作滚动——可见鼠标滚轮的发明是件多么好的事,视线流和鼠标流就不会扯那么远了。
 
之后另一个设计的优化又是和视线流、鼠标流相关的:
一行一行的数据,鼠标悬停的这一行背景颜色变化,这样也帮助鼠标流和视线流的汇聚:
视线流和鼠标流
然后,在这个的基础上我们有这样的交互:鼠标在这里悬停几毫秒后浮出一块:
视线流和鼠标流
问题就出现了~若这一块出现在鼠标的坐标位置上,就会遮住一部分这一行要看的东西,于是,要把它挪到下面;又考虑到用户可能让鼠标指着一行一行往下看,这一块东东不能挡住鼠标往下移;又因为需求里要求这一块浮动的区域也可以点,还要给用户鼠标移到区域内点击的机会……
最后的设计是这块东东出现在了鼠标坐标右下方一定距离的位置,保证横向、竖向的视线流/鼠标流都流畅,也有可以移动到该区域的鼠标流:
视线流和鼠标流
恩,这样就OK了~结果是“鼠标流和视线流都流畅”,这般和开发、产品一起沟通解释起来就方便了,一次优化就基本达到目的。
 
PS:弄这两个词儿出来不是要定义某种概念,只是小兔为了方便UI和开发之间沟通时候的一种描述方法
 

0

阅读 评论 收藏 转载 喜欢 打印举报
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有