Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

你需要了解的所有的CSS光標規則

by
Length:MediumLanguages:

Chinese (Traditional) (中文(繁體)) translation by Stypstive (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
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.