hover已死 有事烧香——移动设备的hover转化

　　hover是指鼠标悬浮状态，网页设计师们再熟悉不过。有时，hover是为点击区域提供更多的信息。

比如，dribbble上，hover显示作品更多信息。

　　有时，hover提供更多的操作。

qzone单条feed上面的屏蔽更多操作

　　无论用于哪种方式，即便网页中非常常见，在触屏移动设备中hover将不复存在。这倒也容易理解，因为在手机和人之间不再存在其他间接设备（比如鼠标），人们可以直接使用自己的手指触摸进行交互。

　　由此，所有在桌面web端依赖鼠标悬浮的交互体验都需要重新思考。hover出的信息往往不象点击那样重要：直接显示太过，没有他也不行。因此hover从桌面端倒手机端的转化不能忽视。

　　对于移动设备，你对于hover菜单的选择可以是： 当前页打开，点击或拨动显示，跳到另一页面，或者干脆放弃。

1、当前屏展示

　　如果hover后的内容很重要，例如重要的操作和内容，那么最好的方式就直接展示到当前页面。Twitter在其官方触屏版就是这么做的。

桌面端，将鼠标hover在twitter单条feed就会展示出几个操作：收藏，转发，回复。

Twitter认为这些操作足够重要，因此在移动触屏的体验上直接展示在屏幕上。

2、点击或滑动

　　在手机web 浏览器中，如果代码没有对hover进行特殊设置，会自动设为点击效果。如果你对于现有网站上hover所出的菜单无计可施，可以考虑将他设为默认点击展开。当然，这点上如果hover所出的菜单中操作逻辑上是指下一步那就最好了。但是这对于无疑会造成打断，使得操作进程中多了一步。

　　对于桌面端hover显示更多操作的情况。操作表（Action Sheet）也可以算作一种当前页弹出的展示方式。

　　如果hover后的操作不属于“下一步”，可以考虑拨动显示更多这种方式。不过，相对于点击，拨动手势不太直观，需要更多学习成本，最好采用一些隐喻或轻量的动画－让人们知道他应当如何操作。

　　USA Today更多内容分类采用的截字加阴影的效果，暗示用户拨动显示更多。同时，用户第一次进来的时候会显示一个右滑的动画。

　　同时提醒大伙，在使用不显而易见的手势（比如滑动）时，最好提供其他可选的方式。比如yahoo！邮箱，需要滑动的手势显示，同样支持全屏时候显示。

3、另开一页

　　如果hover所展示的信息属于扩展类型，那么在手机这么有限的屏幕下，最好把hover后的内容单独打开一页。Barnes&Noble就使用了这个方法。

Barnes&Noble把桌面端hover出现的更多信息，单独打开一页展示。

4、去掉更健康

　　如果hover菜单意义不大，就直接舍弃吧。去掉对于用户没啥价值的多余选择和信息，不仅会让你的界面更佳清爽，还让你省去多余的开发时间，所以别害怕扔掉hover。

部分翻译来自《mobile first》