视线流和鼠标流

来源：百度文库编辑：神马文学网时间：2024/04/29 22:24:22

这个词的起源是前阵子和同事提出优化登录和注册的表单开始的。为了优化我们注册/登录的表单，我把浅议 Web 表单设计发给同事看，然后我们的表单大概是这样子的：

这样的设计保证视觉的注意点和鼠标路径都是一个顺畅的、向下的过程，并且在最后关键的提交时汇聚在一起。每次都说“视线的移动”、“鼠标路径”什么的也繁琐，然后我就擅自发明了“视线流”和“鼠标流”这两个词啦~:P
如图，绿色的是视线流，红色的是鼠标流。我们没有眼动仪、没有鼠标路径研究的方法，也知道实际视线的移动决不像图示的两条线那么简单。视线可能还是Z字形向下的，要看验证码和复选框之后的内容:
但是这样的设计已经基本保证了用户在填写表单的时候，一步一步很顺畅，最后提交按钮出现在顺利成章的位置，一点，就OK啦。

视线流和鼠标流只是大概表示视线和鼠标路径的移动，在用户进行关键的交互任务时，要尽量保证它们的流畅，也尽量汇聚在一起。
一定要说，只是关键的交互任务，比如填写表单，因为这时候用户的注意力都在这里。用户浏览网页时视线可能在整个页面里灵活变动、鼠标可能在右侧操作滚动——可见鼠标滚轮的发明是件多么好的事，视线流和鼠标流就不会扯那么远了。
之后另一个设计的优化又是和视线流、鼠标流相关的：
一行一行的数据，鼠标悬停的这一行背景颜色变化，这样也帮助鼠标流和视线流的汇聚：

然后，在这个的基础上我们有这样的交互：鼠标在这里悬停几毫秒后浮出一块：

问题就出现了~若这一块出现在鼠标的坐标位置上，就会遮住一部分这一行要看的东西，于是，要把它挪到下面；又考虑到用户可能让鼠标指着一行一行往下看，这一块东东不能挡住鼠标往下移；又因为需求里要求这一块浮动的区域也可以点，还要给用户鼠标移到区域内点击的机会……
最后的设计是这块东东出现在了鼠标坐标右下方一定距离的位置，保证横向、竖向的视线流/鼠标流都流畅，也有可以移动到该区域的鼠标流：

恩，这样就OK了~结果是“鼠标流和视线流都流畅”，这般和开发、产品一起沟通解释起来就方便了，一次优化就基本达到目的。
PS:弄这两个词儿出来不是要定义某种概念，只是小兔为了方便UI和开发之间沟通时候的一种描述方法
转自Amihttp://blog.sina.com.cn/u/5772b0e70100087z

视线流和鼠标流 2009视线鼠标爱心版(打电脑不用双手，只用眼睛就可以了) 光电鼠标、激光鼠标、蓝光鼠标和蓝影鼠标之间的区别鼠标手症状和治疗 2009视线鼠标-------超神奇！打电脑都不用双手，只用眼睛就可以了| 软件下载| 下... 卡斯特羅會見大學生談養生和全球氣候變暖(圖) - 环球视线 - 002pc - 和讯博客鼠标的失败和可口可乐的成功 Java视线论坛 :: 阅读主题 - 规则引擎推理系统和学习系统有本质的区别 Java视线论坛 :: 阅读主题 - 结合struts和hibernate谈J2EE架构的数据表示 “我想和爸爸妈妈在一起”（民生视线） ——走近留守儿童冯华 Java视线论坛 :: 阅读主题 - 结合struts和hibernate谈J2EE架构的数据表示国内企业首创竹键盘和竹鼠标供不应求可DIY文字和颜色的鼠标跟随透明flash 可DIY文字和颜色的鼠标跟随透明flash 如何在鼠标右键新建和删除菜单选项？房产中介的鼠标轨迹-股票频道-和讯网电脑鼠标常见的故障和解决的方法电脑鼠标常见的故障和解决的方法配合使用鼠标和键盘打开“我的电脑”窗口 QTP模拟鼠标和键盘事件方法整理无法用鼠标选择网页内容和右键复制怎么办？必须承认 @ 教研视线分层教学 @ 教研视线我的视线