Advertisement
  1. Web Design
  2. CSS
Webdesign

你需要了解的所有的CSS光标规则

by
Length:MediumLanguages:

Chinese (Simplified) (中文(简体)) translation by Wentao Wang (王文涛) (you can also view the original English article)

虽然全世界都在都在拥抱触摸用户界面,本文却关注更传统的鼠标输入方式。我将提出一种渐进式的交互设计增强方法;具体而言,这是对CSS光标 (cursor) 规则的一个概述。


手机上的设计策略变得日益重要。社区对于响应式的网页设计的尝试也开始成型,由于越来越针对触摸输入进行优化,这定义了新的用户交互设计。 不过,完善而精确的鼠标输入方式短期内也不会过时。 再加上网页无处不在的本性,对传统输入和触摸输入同时进行优化应该完全体现在网页界面设计之中。


一个光标的目的:沟通功能

大部分软件,无论是桌面应用、操作系统,还是简单的网站,都采用了各式各样有用的GUI指针。这些指针对界面交互起到一种辅助的作用,即建议用户在应用程序的当前屏幕坐标上可以执行什么样的任务。

想要输入或操纵文字吗?当你看到一个"i"状的光标,你知道你可以输入了。想要改变窗口大小吗?当你看到一个调整大小 (resize) 的光标,你知道你可以在 (某个方向上) 可以拖动窗口边缘了。 在上述例子中,你可看到调整大小光标是如何从视觉上建议在哪个方向上调整窗口大小的。

通过操纵界面控制功能上下文中的光标图形,你可以告诉用户何时,何地,如何操作软件。

一个例子

利用光标设计来进行沟通的伟大例子可参考Adobe的创意套装 (Creative Suite)。

Adobe的套装中的工作图标在图形上反映了它们的内在功能。在许多情况下,当选中一个特定工具时,光标形状会非常接近于此工具的图标,或精确反映这个图标。 这种简单的用户界面范例是非常强大的,它从视觉上为用户传达了应用程序工具集中每个工具的用途和功能。


网页上的光标

传统的更完善的输入方法,比如鼠标,触笔和键盘,提供了一种触摸设备不具备 (或暂时不具备) 的视觉反馈效果:悬停 (hover)。 悬停交互让用户通过相应的悬停UI元素来探索并学习应用程序的使用。这些交互中的辅助方式让用户知道了哪些元素是可交互的,并且如何对它们进行操作。

网页本质上要求普适性和可获得性。。。这种无所不包、输入不可知的方法带来了独一无二的设计挑战性。

不过,悬停交互 (比如提示框) 专门用于鼠标的UI问题。对于触摸设备,则变得不可操作了。 因为网页本质上要求普适性和可获得性,网页应用必须设计为同时适用于触摸和非触摸设备。 这种无所不包、输入不可知的方法带来了独一无二的设计挑战。用户界面必须同时考虑触摸和非触摸设备。

于是我们再次看到这个词:渐进式增强。

这种以网页为中心并需要囊括一系列输入方法的设计挑战,使得渐进式增强方法成为必然 (其实,这个概念已经被提倡过一段时间)

即使网页流量越来越被手机设备所占领 (即触摸屏设备主导),CSS光标 (cursor) 规则仍然远远谈不上过时。你总可以设计一个网站或应用UI,让它支持输入不可知方法,且可以工作在不同的设备上。 无论这些设备由触摸屏还是鼠标所控制,CSS光标规则将作为一种额外的 (虽然不是强制性的) UI改进措施,以对支持的设备进行视觉反馈。


实现内置光标

我们提到了,CSS光标可用于提示用户,鼠标可以执行哪些功能。 用户电脑的浏览器或操作系统中内置了大量的光标类型可供选择 (你可以在quirkmode.org上找到清单)。 内置光标已经不错,但你必须意识到它是依赖于用户浏览器/操作系统的。因而不同的电脑或浏览器可能会有不同的控件。这里有一个例子,可演示如何修改光标:


实现定制光标

如果你需要一个默认就不存在或不支持的光标,你可以选择采用一个定制的光标图片。这可通过类似于font-family规则的方式来定义,一旦定制光标无法加载你还可以有回退措施。

你甚至可以定义光标的位置 (点击注册处)。涉及到X和Y这两个相对于默认原点'0,0'的值;即定制光标图片的左上角。 在下面的例子中,我们将光标从左向右移动10个像素,从顶部往下移动5个像素。


跨浏览器光标规则

不幸的是,定制光标的跨浏览器支持并不如上述定义那般容易。让光标跨浏览器存在一些困扰之处。

IE只支持.CUR文件

Internet Explore 7和8只支持.CUR文件。CUR文件类似于ICO文件,区别在于你还可以从文件本身定义出光标的'热点'。如果你计划支持IE 7和8,你必须要提供一个.CUR文件。

生成你自己的.CUR文件超出了本文的范畴。不过,你可以先试试这个Photoshop插件

IE将光标文件的路径解析为网页的相对路径

几乎所有浏览器都将定制光标的URL解析为相对于样式表的路径 (W3C推荐)。然而,Internet Explorer (7-9) 将其解析为相对于HTML根目录的路径。

所以,比如我有一个新工程。在根目录下有一个"index.html"文件,还有一些图片、样式表、和定制光标的目录。目录结构如下所示:

你看,我的样式表和定制光标完全隔离开来了。

在这里,我们将写一个光标规则,它的回退既支持现代浏览器的.PNG光标,也支持IE的.CUR文件:

或者,你也可以在CSS中使用绝对路径,这时你仍然需要提供关于.CUR文件的回退:

想要更深入地学习跨平台CSS光标的实现,请参考网站useragentman.com。 要记得的是,如果你要支持触摸设备,CSS光标应该视为一种渐进式增强功能。意思是,没必要一定要求支持IE (因为用户在触屏时反正也不会看到定制光标)。


跨浏览器和平台的光标示例

如果你把CSS光标实现为渐进式增强功能,不妨看一看各个浏览器和平台下的内置光标长什么样。 这会让你在设计自己的用户界面时做出更明智的决策。这里有一个很好的参考,展示了各个操作系统下光标的模样:

Windows 7

测试过的浏览器

  • IE9
  • IE8
  • Chrome
  • Safari 5.1.7
  • Firefox
  • Opera

Windows XP

测试过的浏览器

  • IE8
  • IE7
  • Chrome
  • Safari 5.1.7
  • Firefox
  • Opera

OSX 10.8

测试过的浏览器

  • Chrome 22.0
  • Safari 6.0
  • Firefox 15.0
  • Opera 12.02

你看还是存在各种微妙的差异的,它们也许会影响你的界面设计。你还可以查看比较不同浏览器和平台下的光标的完整图表


总结

你肯定已经发现了,CSS中的光标规则是一种额外的工具,可在你的网站和应用中辅助设计你的用户界面。不过,你大概还发现了不同光标的差异取决于用户的浏览器和操作系统。

这些光标的显著差别,加上触摸屏设备的日益广泛的使用,已经让光标规则降格为一种辅助UI交互设计中的补充性角色,但并没有过时。 更慎重的做法是将光标作为渐进式增强中的一个功能,而不是完全抛弃它。现在,你已经知道如何使用了,开始创造自己的酷炫作品吧。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.