Web Design tab標籤效果的用戶體驗研究

細微處提高tab標籤鼠標效果的用戶體驗
Tab標籤的切換效果在網頁設計裡幾乎是無所不在,只要做網站,就會有這個效果,當然,我不是想談怎麼去實現它(代碼網上一抓一大把,水平參差不齊)
討論:Tab效果,實現切換是鼠標經過切換好還是鼠標點擊切換好?
從用戶的使用角度來講,通過越少的動作能達到獲得更多的信息才是更好的,那麼可以說鼠標經過就切換比鼠標點擊要好。附:現在網站上這種標籤樣的東西非常多,也經常會給人迷惑感,設計做出來看上去是標籤,點擊以後卻直接打開一個新頁面,或者轉跳,也許這不是瀏覽者的意願,(這讓我想起了很多網站設計論壇,或者新聞,在首頁新聞裡看到的明明是條新聞標題,點擊以後進入的不是新聞,而是新聞的欄目首頁,讓我頓刻有受騙的感覺)所以點擊效果的tab,只有用戶不在乎是否跳轉他才肯定的去點擊。
提升用戶體驗:既然鼠標經過的效果好,有什麼細微之處可以提高?
說到這個問題,還是那天客戶提出的要求讓我感覺到確實是個很細微的地方 ,頁面如:侏羅紀軟件的首頁:http://www.jurassic.com.cn/他的下方有個tab切換的效果,當看到這個效果的時候,我當然就按平時的做法(具體不說了)馬上做好,效果無非是鼠標放上去切換,代碼上,如果客戶要求鼠標是點擊效果,只需要將mouseover改成click,然後裡面的執行代碼就一樣一樣。但挑剔的客戶客戶突然提出:這個Tab效果切換的太快了,鼠標隨便劃拉一下就切換,網頁寄存感覺太靈敏了。心裡暗罵客戶真是事兒多,但無奈還是改,將切換代碼寫成函數,再用settimeout來延遲400毫秒來實現切換的函數,改完這步,感覺是延遲了,但鼠標滑過每個標籤還是切換,只是推遲函數執行,改變它,小問題!在mouseout裡加個cleartimeout,這樣,用戶在Tab標籤上鼠標停留時間不超過400毫秒的滑過,就不會引起tab內容的切換,這樣真的就避免了無意的鼠標滑過引起切換。改完以後感覺客戶的要求確實是對的, 雖然只是細微的一步,細微到我做了這麼久的Tab效果都已經爛熟爛抄的效果,而沒有注意過這個問題,細微到很多人在瀏覽網站上重來沒有感覺到這是需要處理才能更好實現的效果(做完後又去看了一些門戶和其他網站的Tab切換,發現很多切換都做了細微的延遲處理,以前怎麼沒有發現這個問題).改完後,由於Tab標籤上,客戶沒有要求加鏈接,乾脆再加上一個點擊效果,完成後就是點擊直接切換,或者鼠標在標籤上稍微停頓切換內容,這樣算是用戶體驗達到了很好的提升,兼顧了各種用戶習慣。
後感後言
一個優良的代碼應該具備哪些條件,總結應該如下(自己的一些看法):1,兼容能力強,邏輯合理,結構優化,執行效率高能為更多的情況考慮,減少DOM訪問,將代碼盡量用於邏輯及自定義操作(這個和js網頁腳本開發特點有關),多寫幾行甚至幾十行代碼是很值得的。2,易讀性,模塊化,所謂易讀性,當然首先要有良好的代碼習慣,書寫習慣以及盡量在需要的地方留有註解說明,模塊化的代碼更便於調用,和避免同樣的效果,僅僅是因為對象的id,class,標籤名稱而反覆寫,所以應該說,更推崇腳本庫的使用,庫不是萬能的,但是有了庫確實簡化了很多不瞭解而需要很多步驟去實現的代碼,或者不需要的重複代碼。3,擴展能力強,易於以後不可預料的修改,擴展和易於維護,這個更應該在代碼結構上,從一開始就想好,當然這個和自身水平以及經驗有很多關係.同樣的,我認為以上幾點也適用於web標準頁面的書寫,好的web頁面代碼應該充分掌握網站結構的特點,定義樣式或者html代碼的結構應該從整站出發,而只考慮當前頁面,當前模塊,往往我們會多寫出許多重複的代碼,重複的樣式,而到最後自己也被繞糊塗了
Tab關鍵代碼展示
function tabChange(tabHead,headAddClass,tabBox,boxAddClass){var timeout;function eachClass(){jQuery(tabHead).each(function(i){jQuery(tabHead).eq(i).removeClass(headAddClass);jQuery(tabBox).eq(i).removeClass(boxAddClass);});}window.addClass = function(a){eachClass();jQuery(tabHead).eq(a).addClass(headAddClass);jQuery(tabBox).eq(a).addClass(boxAddClass);}jQuery(tabHead).each(function(i){jQuery(tabHead).eq(i).mouseover(function(){timeout =setTimeout("addClass("+i+")", 400);});jQuery(tabHead).eq(i).mouseout(function(){clearTimeout(timeout);});jQuery(tabHead).eq(i).click(function(){addClass(i);return false;});});