建站常識(shí)
說說tab設(shè)計(jì)
2009-07-25 08:33:00
要想在不寬裕的頁面展現(xiàn)豐富的內(nèi)容，現(xiàn)在通用的做法使用tab，在一塊區(qū)域通過tab切換來更換該區(qū)域的內(nèi)容。這篇文章分析了tab設(shè)計(jì)很在理，今天我也談?wù)勎易チ藥讉€(gè)案例，談?wù)剬ab設(shè)計(jì)的看法。
我的意見是合理的tab設(shè)計(jì)應(yīng)該是這兩種類型：
第1種 鼠標(biāo)單擊切換。此種情形下tab是沒有鏈接的（但是在選中的tab區(qū)域內(nèi)增加 更多或者more鏈接）。
第2種 鼠標(biāo)懸浮切換。此種情況下很多tab都加了鏈接，所以 a:hover 應(yīng)該生效，也就是鼠標(biāo)?？繒r(shí)有下滑下或顏色等提示。其實(shí)這也是Norman設(shè)計(jì)理念里，對于用戶恰當(dāng)Feedback（反饋）的實(shí)踐。
在實(shí)際案例中，我們看到了一些好的設(shè)計(jì)，也有些我不贊成的設(shè)計(jì)，這里稍做分享。
案例一：yahoo美國首頁，屬于第1種tab設(shè)計(jì)，但是注意右下角的框框哦。
案例二：淘寶首頁的tab設(shè)計(jì)有三處，但是仔細(xì)看一下，卻發(fā)覺各有差異。比較疑惑的是，為什么首頁只有3個(gè)tab設(shè)計(jì)，但是卻各不一樣呢？難道一個(gè)頁面需要多個(gè)前端介入？
第一個(gè)tab設(shè)計(jì)屬于單擊切換，無附加鏈接。（頂）
第二個(gè)tab設(shè)計(jì)屬于懸浮切換，但是沒有 a:hover 來反饋tab上的鏈接。（扁）
第三個(gè)tab設(shè)計(jì)屬于懸浮切換，添加了 a:hover 反饋tab上的鏈接。（頂）
案例三：QQ彈窗。
最不招人喜歡的QQ彈窗，tab上也沒有鏈接反饋，相信qq.com的流量很多是被這樣無辜地騙來的。（扁）
插播一段：我一直對QQ彈窗的設(shè)計(jì)有微辭，一個(gè)只能放5個(gè)tab的位置居然間接的放了7個(gè)，于是不得不多出一個(gè)左右翻滾tab的設(shè)計(jì)。至于增加一個(gè)看起來意義不大卻比較顯眼的 [您可以拖動(dòng)該頁卡進(jìn)行排序] 真正價(jià)值有多少。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感？
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站！
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容？
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊？
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看，這個(gè)網(wǎng)站就成功了一大半！
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么？有什么作用？
- [2022-05-17 11:29:32] 作為消費(fèi)者，應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇？
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢？
延伸閱讀
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島好的網(wǎng)站優(yōu)化公司 外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站制作 青島黃島、紅島網(wǎng)站建設(shè)公司 集團(tuán)官網(wǎng) 網(wǎng)站推廣 新的元素 力圖 官網(wǎng)建設(shè) 微信營銷的優(yōu)勢 青島網(wǎng)頁制作 SEO 高端輪胎網(wǎng)站設(shè)計(jì) 企業(yè)建站 集團(tuán)性網(wǎng)站 版面布局 手機(jī)網(wǎng)站建設(shè) 青島網(wǎng)站優(yōu)化 微官網(wǎng) 青島開發(fā)區(qū)建站公司 微信開發(fā) robots 網(wǎng)站交互設(shè)計(jì) H5專題頁面 青島高端網(wǎng)站設(shè)計(jì)公司哪家好 青島網(wǎng)站建設(shè)公司哪家好 插畫 青島不錯(cuò)的英文網(wǎng)站建設(shè)公司 青島IT資訊 網(wǎng)站視覺
