這個(gè)可能是最簡(jiǎn)單也最常用的組件了，所以?xún)?nèi)容也不多……。

用戶(hù)為了完成任務(wù)需要找到必須的內(nèi)容和功能。頂部導(dǎo)航條在水平的緊湊的空間內(nèi)提供給用戶(hù)已分類(lèi)內(nèi)容的訪(fǎng)問(wèn)入口。

解決什么問(wèn)題？

用戶(hù)為了完成任務(wù)需要找到必要的內(nèi)容和功能。

什么時(shí)候用？

2-12個(gè)分類(lèi)

分類(lèi)的標(biāo)題相對(duì)較短并且可預(yù)測(cè)

分類(lèi)數(shù)量基本不會(huì)變

為一個(gè)web產(chǎn)品展示頂級(jí)導(dǎo)航時(shí)

配合標(biāo)簽來(lái)展示二級(jí)導(dǎo)航

如果頁(yè)面寬度很重要，用它來(lái)替代左側(cè)導(dǎo)航條

通過(guò)控制導(dǎo)航條的狀態(tài)來(lái)跟蹤和展示用戶(hù)當(dāng)前位置很困難，成本很大時(shí)，用它來(lái)替代標(biāo)簽。

分類(lèi)都屬于一個(gè)產(chǎn)品時(shí)

具體解決辦法是什么？

1、在一個(gè)水平的橫條上顯示一系列單行的鏈接，如果有網(wǎng)站頭部，則放到頭部之下。

2、可以通過(guò)與”標(biāo)簽”一起使用，在導(dǎo)航條中同時(shí)顯示一級(jí)和二級(jí)導(dǎo)航

3、如果只使用頂部導(dǎo)航條，最好第一個(gè)鏈接是”首頁(yè)（Home）”。應(yīng)該指向網(wǎng)站的首頁(yè)

但是如果頂部導(dǎo)航條是用在一組標(biāo)簽下，那么標(biāo)簽的第一個(gè)應(yīng)該是”首頁(yè)”并且具有同樣的功能

4、在導(dǎo)航條中用留白和”管道符” “|”（或者是垂直居中的”點(diǎn)”，或者是簡(jiǎn)單的視覺(jué)元素）來(lái)分隔每一個(gè)分類(lèi)

5、頂部導(dǎo)航條中鏈接的所有頁(yè)面本身也一定要顯示在頂部導(dǎo)航條

6、當(dāng)頂部導(dǎo)航條數(shù)量過(guò)多時(shí)，建議使用”更多。.”的鏈接，或者考慮使用左側(cè)導(dǎo)航條

7、與標(biāo)簽一起使用來(lái)顯示高層級(jí)的內(nèi)容

8、跟左側(cè)導(dǎo)航條一起使用來(lái)顯示二級(jí)或三級(jí)內(nèi)容

關(guān)注內(nèi)容的劃分范圍（符合用戶(hù)的心智模型）比關(guān)注頁(yè)面的展示更重要。因?yàn)樽畛Ｒ?jiàn)的錯(cuò)誤是將一系列沒(méi)意義的內(nèi)容歸在一類(lèi)。

1、盡可能降低分類(lèi)之間的交集

2、讓分類(lèi)之間的界限盡可能的清晰（例如，很容易猜到想要的東西是否在一個(gè)分類(lèi)中）

3、避免過(guò)于寬泛或者過(guò)于特殊的分類(lèi)名字。

為什么使用這個(gè)組件？

頂部導(dǎo)航條提供給用戶(hù)一種很方便，簡(jiǎn)潔分類(lèi)展示方式，讓用戶(hù)訪(fǎng)問(wèn)品類(lèi)繁多的有組織的內(nèi)容。

原文地址： http://developer.yahoo.com/ypatterns/navigation/bar/topnav.html

文章來(lái)源：pd4.me/blog/ 轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： 頂

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀(guān)點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。