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

标签: 交互设计IXD 博客blog 手机mobile | 发表时间:2012-03-09 11:04 | 作者:张雅秋
出处:http://www.zhangyq.com

  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》

相关 [hover 烧香 移动设备] 推荐:

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

- - 用户体验与交互设计
  hover是指鼠标悬浮状态,网页设计师们再熟悉不过. 有时,hover是为点击区域提供更多的信息. 比如,dribbble上,hover显示作品更多信息.   有时,hover提供更多的操作. qzone单条feed上面的屏蔽更多操作.   无论用于哪种方式,即便网页中非常常见,在触屏移动设备中hover将不复存在.

Thumbnail Hover Zoom 各大瀏覽器上最好的網路相簿縮圖放大鏡

- helloyj - 電腦玩物
當我們在上網瀏覽時,有時候會看到很多「縮圖」,這時候必須點擊進入該圖片的專屬網頁後才能看到原始的高解析大圖片,這樣的動作多做幾次應該就會開始覺得麻煩了吧. 所以各大瀏覽器上,都有開發一些「縮圖放大鏡」擴充套件,只要滑鼠懸停在這些小圖上,就會自動彈出大圖,不用換頁便能更輕鬆瀏覽各大網路相簿. 今天要介紹在Google Chrome、Opera、Firefox上的這類「縮圖放大鏡」,我盡我所能的去比較和找出這些瀏覽器上「最好」的套件,但或許有遺珠,或是有更好的選擇,這部份就留待朋友們幫忙回饋補充了.

移动设备手势设计初探

- redhobor - 腾讯CDC
  嘿~最近在做各种移动端的产品,设计啊体验啊操作啊,用的手都起茧,工作之余也思考了“手”这种较新的交互方式,以及它与界面的关系. 本文从手势的种类,应用场景,存在的可用性问题以及如何设计四个大的部分谈起,在此抛砖引玉供大家思考和学习.   移动设备大行其道的今天,手势是一个流行词汇,那手势是什么呢.

移动设备里的硬件功能

- - 雷锋网
【编者按】本文作者 @kentzhu 如果你想猎杀一只虎你得首先搞清楚了虎的习性与弱点,不然就好比是绣花枕头的屠龙术. 同样的道理,如果你想做好移动产品的设计,你得首先搞清楚移动设备的基本属性. 知道移动设备有哪些能力才能驾驭这些能力并创造出优雅的体验. 在移动设备里,常见可以被利用的硬件包括:话筒、GPS、距离感应器、环境光感应器、影像传感器、磁阻传感器、重力感应器、方向感应器、加速感应器、三轴陀螺仪、RFID、NFC、裸眼3D、温度计、震动感应器等.

移动设备阅读体验

- - 曉生語錄
一直想对移动设备阅读体验进行较为完整的研究和学习,但内容太多,涉及到非常多的传统平面设计知识,目前仅初步地完整字体部分. 常用的栅格分割适合移动设备多分辨率复杂内容的自动排版,内容可控制时是否可以模仿杂志的复杂不规则排版方式,以达到最佳的阅读体验. 2.移动设备上最佳的字体有什么必要的设计要素. 如下图,更多的内容包括字体颜色、字间距、行间距和字体渲染等,不同的内容需要不同的字体.

移动设备之滑动的维度

- - 盒子UI
在iOS交互模型的最底层,有一个“空间”的概念(具体可见 ios空间模型),而空间最基本的属性就是三个维度. 滑动依存于屏幕这个二维环境,也可以从维度这个角度去思考. 最常见的滑动例如ios里删除短信息的操作,这里的滑动是最基础的,可以理解成一维的、被赋予了唯一功能的操作. 但如果认为滑动就是这么简单,那可能忽略了滑动可以为设计带来的千变万化.

[转载] 用于移动设备的各种术语的解释

- Charles - 黑莓时光
转载一篇来自 ss1271的奋斗 的文章,为我们分享并解释了一些和移动设备相关的各种术语,有兴趣的朋友可以来看看,能学到不少东西呢. 以下图文均来自 ss1271的奋斗 的文章,同样建议大家跳转详细阅读. 作为信息黄埔毕业生的译者&编者按——. 当你在使用各式各样的Android或者iPhone、iPod Touch、iPad、Apple TV神马的时候,有没有想过那些包装盒上标明的数据和网络制式都是神马意思.

在这个移动设备泛滥的时代里

- sy - Engadget 中国版
Pollitico.com漫画. 移动设备是否已经改变了你的生活方式. 引用来源 | 此文章网址 | 转寄此文章 | 回应.