• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 鼠標(biāo)懸停的交互	共有1275人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108060 發(fā)貼等級(jí)：21 發(fā)貼數(shù)：1159 回貼數(shù)：1282 被砸雞蛋：1 獲贈(zèng)鮮花：182

發(fā)表時(shí)間：2019/6/29 19:18:00 樓　主 鼠標(biāo)懸停的交互 　　在當(dāng)當(dāng)找以前買的書的時(shí)候遇到了這個(gè)東西： 　　(當(dāng)當(dāng)網(wǎng))“我的書架”中的“閱讀進(jìn)度-修改”當(dāng)當(dāng)是用MouseOver展開的菜單。讓我感覺有點(diǎn)突然，又說不出哪里有什么問題。所以我決定綜合我所了解的各種情況來研究一下這個(gè)MouseOver的問題。 　　一、鼠標(biāo)懸停在界面設(shè)計(jì)中的用途 　　觸發(fā)事件。減少點(diǎn)擊操作，更便利的人機(jī)交互，如前面當(dāng)當(dāng)?shù)摹靶薷摹辈僮骺?。表示可點(diǎn)。這個(gè)通常與鼠標(biāo)指針變化為“手形”一起用，告訴用戶這個(gè)是可以“按”的。(Facebook)懸停菜單。(Facebook)顯示操作選項(xiàng)?？杀苊獠僮鬟x項(xiàng)重復(fù)出現(xiàn)所造成的頁面排版和顯示的混亂。(飯否)指示鼠標(biāo)的位置，幫助瀏覽(如上圖中鼠標(biāo)懸停后出現(xiàn)的背景顏色），常用于多個(gè)內(nèi)容顯示列表。幫助選擇，常用于評(píng)分系統(tǒng)。(豆瓣)詮釋細(xì)節(jié)信息。HTML中的alt就有這種作用，也可以用CSS和JavaScript來實(shí)現(xiàn)更多的效果和媒體信息。(Flickr)內(nèi)容展示。許多門戶網(wǎng)站為了節(jié)省信息空間，通常把信息集中在相同位置，用內(nèi)嵌Tab實(shí)現(xiàn)信息顯示，有時(shí)候Tab還會(huì)自動(dòng)播放。(騰訊網(wǎng)) 　　二、懸停觸發(fā)事件的顯示效果顯示效果就像從前用FrontPage做網(wǎng)頁設(shè)過程頁面效果一樣，有很多，而且能更多。這里總結(jié)一些現(xiàn)在網(wǎng)頁中常用的幾個(gè)效果，并不一定只會(huì)觸發(fā)一個(gè)效果，有時(shí)候會(huì)是幾個(gè)效果同時(shí)或先后用到。不用懷疑，這些效果的用途跟其他被操作觸發(fā)的事件幾乎是相同的。 　　即現(xiàn)和即逝(Facebook)漸現(xiàn)和漸隱展開和縮攏(Yahoo)抽拉式(WordPress管理后臺(tái))過程加載 　　三、懸停菜單的要素懸停菜單是鼠標(biāo)懸停中使用得最多的一個(gè)用途。我試著分析一些案例，總結(jié)一下懸停菜單的要素，也許對(duì)朋友們?cè)趯碜鼋换ピO(shè)計(jì)中會(huì)有一些幫助。我總會(huì)用“盡可能”、“最好”這種詞語，因?yàn)槲艺f的并不是在制定一項(xiàng)標(biāo)準(zhǔn)。 　　可視。被懸停對(duì)象本身看上去是可以點(diǎn)的，類似像：文字鏈接、圖標(biāo)鏈接、按鈕、區(qū)域、符號(hào)等；(Yahoo)統(tǒng)一。綜合上面兩條，不管是懸停、還是點(diǎn)擊，觸發(fā)的都盡可能是相同的事件（這一點(diǎn)上，可以和點(diǎn)擊操作進(jìn)行區(qū)別）。如果不相同，建議使用點(diǎn)擊菜單，而非懸停菜單；獨(dú)立。懸停時(shí)不會(huì)因?yàn)檫M(jìn)行下一步操作而“觸犯”到其他不相關(guān)的事件，使當(dāng)前操作中斷。在Tab使用中經(jīng)常遇到這種問題，不般不建議在不轉(zhuǎn)換位置橫的向菜單中使用懸停效果；合理。既然為了“節(jié)省”點(diǎn)擊操作，同樣接下來的操作也最好不要弄得太復(fù)雜，否則還是留給點(diǎn)擊菜單操作吧。 　　四、聯(lián)想：什么情況下用懸停效果？ 　　在什么情況下用懸停(over)，什么情況下用移開(out)，什么情況下用按下(press)，什么情況下用放開(realese)，什么情況下用拖拽(drag)……這些問題，都跟我們使用操作系統(tǒng)鼠標(biāo)單雙擊一樣的值得思考。這些問題是兩面性的，你用著成了習(xí)慣，所以就知道什么是單擊，什么是雙擊；而另一面，正是因?yàn)槲覀內(nèi)粘５牧?xí)慣，操作系統(tǒng)才為我們看到的安排上單擊和雙擊兩種操作。更奇妙的是，你還可以給操作系統(tǒng)更換這個(gè)習(xí)慣，把需要單擊和雙擊的操作都調(diào)個(gè)個(gè)兒。在我教媽媽使用電腦的時(shí)候，她經(jīng)常搞不清什么時(shí)候該單擊，什么時(shí)候該雙擊，而我卻沒有去仔細(xì)思考，用怎樣的語言組織這個(gè)區(qū)分方法。我的理解：操作系統(tǒng)（很遺憾我只用過Windows）中的單擊應(yīng)該主要有三個(gè)目的，一是選中對(duì)象，二是展開操作，三是快速開啟/運(yùn)行。 　　雙擊的主要就兩個(gè)目的打開和運(yùn)行。但這種說法，對(duì)于剛剛才接觸電腦的媽媽來說，似乎不那么容易記住呢？！讓我們跳出這種邏輯思維吧，不必要想著數(shù)據(jù)和效果的區(qū)別，只需要想象我們平時(shí)生活中的如何處理。什么東西會(huì)讓我們要去拉、去推、去拖、去放，也有一些不需要用力（或是用了輕微的力）就可以被你帶動(dòng)改變起來。如：拉門、推窗、拖碗、播種，被擋住光線的地方會(huì)變成陰影，手動(dòng)一動(dòng)可以扇出一絲風(fēng)來…… 　　在做這些效果選擇時(shí)，盡量不去挑戰(zhàn)用戶的耐心和思考，這樣我們就功德圓滿了。 　　五、使用懸停的一些提示 　　慎用懸停效果如果不能做到明確、易懂，盡少用戶造成困擾，最好的方法是不用懸停效果。跟我們的生活上的理想一樣，我們主動(dòng)去推動(dòng)一件事的機(jī)會(huì)總是大得多，不需要為了融合一方面的需求（減少用戶的操作）而忽略了其他的感知。相同符號(hào)不應(yīng)出現(xiàn)效果的混用這里指的混用并不是說一個(gè)網(wǎng)站不可以用多種效果，而是特指某些我們認(rèn)為是相同或相似的標(biāo)識(shí)。如倒三角【▼】，在許多地方是用來點(diǎn)開或展開下拉菜單，但如果同個(gè)網(wǎng)站在不同的區(qū)域倒三角點(diǎn)或不點(diǎn)出現(xiàn)混亂，這樣用戶會(huì)像我媽媽那樣思考：什么時(shí)候該點(diǎn)，什么時(shí)候只用移上去就好了？WordPress管理后臺(tái)多處用到三角和倒三角符號(hào)，但效果卻各不相同，下面從左到右效果分別是：點(diǎn)擊、懸停/點(diǎn)擊、點(diǎn)擊展開。 　　懸停和點(diǎn)擊在菜單中常用方法有許多時(shí)候有著相同的用途，但更多的時(shí)候點(diǎn)擊菜單用于“選項(xiàng)”、“操作”，懸停菜單用于“擴(kuò)展”和“詮釋”。 　　經(jīng)過上面許許多多的思考和分析，終于明白當(dāng)當(dāng)?shù)膽彝２僮鳛槭裁锤杏X有點(diǎn)怪了：看上去不可點(diǎn)（光藍(lán)色字體？），鼠標(biāo)移上去想點(diǎn)的時(shí)候突然跳出來操作框，“嚇一跳”的感覺。哈哈。不過，其實(shí)心里還是有點(diǎn)欣慰的，因?yàn)槲也挥命c(diǎn)了。。。不過，也許這種欣慰來源于職業(yè)，其他用戶會(huì)不會(huì)也這么覺得呢？ 　　最后，請(qǐng)不要因?yàn)槲覍懥诉@么多而陷入疑惑，這些都是個(gè)人研究和提議，你可以突破它、改善它。 奈薇建站網(wǎng)致力于，讓每個(gè)中國人、每個(gè)中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個(gè)回貼   分0頁

上一頁 / 下一頁   當(dāng)前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶