技術(shù)資訊
鼠標(biāo)懸停的交互
2009-03-03 22:27:00
在當(dāng)當(dāng)找以前買的書的時候遇到了這個東西:
(當(dāng)當(dāng)網(wǎng))
“我的書架”中的“閱讀進(jìn)度-修改”當(dāng)當(dāng)是用MouSEOver展開的菜單。
讓我感覺有點突然,又說不出哪里有什么問題。所以我決定綜合我所了解的各種情況來研究一下這個MouseOver的問題。
一、鼠標(biāo)懸停在界面設(shè)計中的用途
- 觸發(fā)事件。減少點擊操作,更便利的人機(jī)交互,如前面當(dāng)當(dāng)?shù)摹靶薷摹辈僮骺颉?SPAN id=more-30>
- 表示可點。這個通常與鼠標(biāo)指針變化為“手形”一起用,告訴用戶這個是可以“按”的。
(Facebook) - 懸停菜單。
(Facebook) - 顯示操作選項??杀苊獠僮鬟x項重復(fù)出現(xiàn)所造成的頁面排版和顯示的混亂。
(飯否) - 指示鼠標(biāo)的位置,幫助瀏覽(如上圖中鼠標(biāo)懸停后出現(xiàn)的背景顏色),常用于多個內(nèi)容顯示列表。
- 幫助選擇,常用于評分系統(tǒng)。
(豆瓣) - 詮釋細(xì)節(jié)信息。HTML中的alt就有這種作用,也可以用CSS和JavaScript來實現(xiàn)更多的效果和媒體信息。
(Flickr) - 內(nèi)容展示。許多門戶網(wǎng)站為了節(jié)省信息空間,通常把信息集中在相同位置,用內(nèi)嵌Tab實現(xiàn)信息顯示,有時候Tab還會自動播放。
(騰訊網(wǎng))
二、懸停觸發(fā)事件的顯示效果
顯示效果就像從前用FrontPage做網(wǎng)頁設(shè)過程頁面效果一樣,有很多,而且能更多。這里總結(jié)一些現(xiàn)在網(wǎng)頁中常用的幾個效果,并不一定只會觸發(fā)一個效果,有時候會是幾個效果同時或先后用到。不用懷疑,這些效果的用途跟其他被操作觸發(fā)的事件幾乎是相同的。
- 即現(xiàn)和即逝
(Facebook) - 漸現(xiàn)和漸隱
- 展開和縮攏
(Yahoo) - 抽拉式
(WordPress管理后臺) - 過程加載
三、懸停菜單的要素
懸停菜單是鼠標(biāo)懸停中使用得最多的一個用途。我試著分析一些案例,總結(jié)一下懸停菜單的要素,也許對朋友們在將來做交互設(shè)計中會有一些幫助。我總會用“盡可能”、“最好”這種詞語,因為我說的并不是在制定一項標(biāo)準(zhǔn)。
- 可視。被懸停對象本身看上去是可以點的,類似像:文字鏈接、圖標(biāo)鏈接、按鈕、區(qū)域、符號等;
(Yahoo) - 統(tǒng)一。綜合上面兩條,不管是懸停、還是點擊,觸發(fā)的都盡可能是相同的事件(這一點上,可以和點擊操作進(jìn)行區(qū)別)。如果不相同,建議使用點擊菜單,而非懸停菜單;
- 獨立。懸停時不會因為進(jìn)行下一步操作而“觸犯”到其他不相關(guān)的事件,使當(dāng)前操作中斷。在Tab使用中經(jīng)常遇到這種問題,不般不建議在不轉(zhuǎn)換位置橫的向菜單中使用懸停效果;
- 合理。既然為了“節(jié)省”點擊操作,同樣接下來的操作也最好不要弄得太復(fù)雜,否則還是留給點擊菜單操作吧。
四、聯(lián)想:什么情況下用懸停效果?
在什么情況下用懸停(over),什么情況下用移開(out),什么情況下用按下(press),什么情況下用放開(realese),什么情況下用拖拽(drag)……這些問題,都跟我們使用操作系統(tǒng)鼠標(biāo)單雙擊一樣的值得思考。這些問題是兩面性的,你用著成了習(xí)慣,所以就知道什么是單擊,什么是雙擊;而另一面,正是因為我們?nèi)粘5牧?xí)慣,操作系統(tǒng)才為我們看到的安排上單擊和雙擊兩種操作。更奇妙的是,你還可以給操作系統(tǒng)更換這個習(xí)慣,把需要單擊和雙擊的操作都調(diào)個個兒。
在我教媽媽使用電腦的時候,她經(jīng)常搞不清什么時候該單擊,什么時候該雙擊,而我卻沒有去仔細(xì)思考,用怎樣的語言組織這個區(qū)分方法。
我的理解:操作系統(tǒng)(很遺憾我只用過Windows)中的單擊應(yīng)該主要有三個目的,一是選中對象,二是展開操作,三是快速開啟/運(yùn)行。
雙擊的主要就兩個目的打開和運(yùn)行。
但這種說法,對于剛剛才接觸電腦的媽媽來說,似乎不那么容易記住呢?!
讓我們跳出這種邏輯思維吧,不必要想著數(shù)據(jù)和效果的區(qū)別,只需要想象我們平時生活中的如何處理。
什么東西會讓我們要去拉、去推、去拖、去放,也有一些不需要用力(或是用了輕微的力)就可以被你帶動改變起來。
如:拉門、推窗、拖碗、播種,被擋住光線的地方會變成陰影,手動一動可以扇出一絲風(fēng)來……
在做這些效果選擇時,盡量不去挑戰(zhàn)用戶的耐心和思考,這樣我們就功德圓滿了。
五、使用懸停的一些提示
- 慎用懸停效果
如果不能做到明確、易懂,盡少用戶造成困擾,最好的方法是不用懸停效果。跟我們的生活上的理想一樣,我們主動去推動一件事的機(jī)會總是大得多,不需要為了融合一方面的需求(減少用戶的操作)而忽略了其他的感知。 - 相同符號不應(yīng)出現(xiàn)效果的混用
這里指的混用并不是說一個網(wǎng)站不可以用多種效果,而是特指某些我們認(rèn)為是相同或相似的標(biāo)識。如倒三角【▼】,在許多地方是用來點開或展開下拉菜單,但如果同個網(wǎng)站在不同的區(qū)域倒三角點或不點出現(xiàn)混亂,這樣用戶會像我媽媽那樣思考:什么時候該點,什么時候只用移上去就好了?
WordPress管理后臺多處用到三角和倒三角符號,但效果卻各不相同,下面從左到右效果分別是:點擊、懸停/點擊、點擊展開。
- 懸停和點擊在菜單中常用方法
有許多時候有著相同的用途,但更多的時候點擊菜單用于“選項”、“操作”,懸停菜單用于“擴(kuò)展”和“詮釋”。
經(jīng)過上面許許多多的思考和分析,終于明白當(dāng)當(dāng)?shù)膽彝2僮鳛槭裁锤杏X有點怪了:看上去不可點(光藍(lán)色字體?),鼠標(biāo)移上去想點的時候突然跳出來操作框,“嚇一跳”的感覺。哈哈。不過,其實心里還是有點欣慰的,因為我不用點了。。。不過,也許這種欣慰來源于職業(yè),其他用戶會不會也這么覺得呢?
最后,請不要因為我寫了這么多而陷入疑惑,這些都是個人研究和提議,你可以突破它、改善它。
原文:http://p.pnq.cc/ue/?p=30
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2008-12-23 08:56:00] 偉大的交互界面都來自…
- [2013-12-31 12:30:29] div圓角和陰影以及鼠標(biāo)放上去白色圖層漸變CSS控制
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
建站常識 企業(yè)網(wǎng)站 青島網(wǎng)站制作 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 青島網(wǎng)站SEO 空白和簡潔的設(shè)計 搜索引擎蜘蛛 青島網(wǎng)頁設(shè)計 SEO 企業(yè)網(wǎng)站設(shè)計 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 高端網(wǎng)站設(shè)計 官網(wǎng)建設(shè) 微信開發(fā) 微官網(wǎng) 青島網(wǎng)站案例 網(wǎng)站策劃 程序開發(fā) 青島網(wǎng)絡(luò)公司 手機(jī)網(wǎng)站建設(shè) 集團(tuán)官網(wǎng) 網(wǎng)站開發(fā) 青島SEO 青島IT資訊 青島輪胎網(wǎng)站設(shè)計 版面布局 青島網(wǎng)頁制作 海信網(wǎng)絡(luò)科技 網(wǎng)站制作 青島網(wǎng)站建設(shè)公司哪家好