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

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

hover已死 有事烧香——移动设备的hover转化_第1张图片

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

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

hover已死 有事烧香——移动设备的hover转化_第2张图片

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

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

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

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

1、当前屏展示

  如果hover后的内容很重要,例如重要的操作和内容,那么最好的方式就直接展示到当前页面。Twitter在其官方触屏版就是这么做的。
hover已死 有事烧香——移动设备的hover转化_第3张图片

桌面端,将鼠标hover在twitter单条feed就会展示出几个操作:收藏,转发,回复。
hover已死 有事烧香——移动设备的hover转化_第4张图片

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

2、点击或滑动

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

  对于桌面端hover显示更多操作的情况。操作表(Action Sheet)也可以算作一种当前页弹出的展示方式。
hover已死 有事烧香——移动设备的hover转化_第5张图片

  如果hover后的操作不属于“下一步”,可以考虑拨动显示更多这种方式。不过,相对于点击,拨动手势不太直观,需要更多学习成本,最好采用一些隐喻或轻量的动画-让人们知道他应当如何操作。
hover已死 有事烧香——移动设备的hover转化_第6张图片

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

  同时提醒大伙,在使用不显而易见的手势(比如滑动)时,最好提供其他可选的方式。比如yahoo!邮箱,需要滑动的手势显示,同样支持全屏时候显示。
hover已死 有事烧香——移动设备的hover转化_第7张图片
3、另开一页

  如果hover所展示的信息属于扩展类型,那么在手机这么有限的屏幕下,最好把hover后的内容单独打开一页。Barnes&Noble就使用了这个方法。
hover已死 有事烧香——移动设备的hover转化_第8张图片

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

4、去掉更健康

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

部分翻译来自《mobile first》

你可能感兴趣的:(手机mobile,交互设计IXD,博客blog)