信息動態

網站設計是技術與創意的完美融合!

建站常識

說說tab設計

2009-07-25 08:33:00

彩票控湖南快乐十分开奖结果 www.pbmsz.com 要想在不寬裕的頁面展現豐富的內容,現在通用的做法使用tab,在一塊區域通過tab切換來更換該區域的內容。這篇文章分析了tab設計很在理,今天我也談談我抓了幾個案例,談談對tab設計的看法。

我的意見是合理的tab設計應該是這兩種類型:

第1種 鼠標單擊切換。此種情形下tab是沒有鏈接的(但是在選中的tab區域內增加 更多或者more鏈接)。

第2種 鼠標懸浮切換。此種情況下很多tab都加了鏈接,所以 a:hover 應該生效,也就是鼠標??渴庇邢祿祿蜓丈忍崾?。其實這也是Norman設計理念里,對于用戶恰當Feedback(反?。┑氖導?。
在實際案例中,我們看到了一些好的設計,也有些我不贊成的設計,這里稍做分享。

案例一:yahoo美國首頁,屬于第1種tab設計,但是注意右下角的框框哦。

案例二:淘寶首頁的tab設計有三處,但是仔細看一下,卻發覺各有差異。比較疑惑的是,為什么首頁只有3個tab設計,但是卻各不一樣呢?難道一個頁面需要多個前端介入?



第一個tab設計屬于單擊切換,無附加鏈接。(頂)



第二個tab設計屬于懸浮切換,但是沒有 a:hover 來反饋tab上的鏈接。(扁)



第三個tab設計屬于懸浮切換,添加了 a:hover 反饋tab上的鏈接。(頂)

案例三:QQ彈窗。



最不招人喜歡的QQ彈窗,tab上也沒有鏈接反饋,相信qq.com的流量很多是被這樣無辜地騙來的。(扁)
插播一段:我一直對QQ彈窗的設計有微辭,一個只能放5個tab的位置居然間接的放了7個,于是不得不多出一個左右翻滾tab的設計。至于增加一個看起來意義不大卻比較顯眼的 [您可以拖動該頁卡進行排序] 真正價值有多少。

延伸閱讀