建站常識
左側(cè)導(dǎo)航條
2010-07-22 08:08:00
原文地址:http://developer.yahoo.com/ypatterns/navigation/bar/leftnav.html
用戶為了完成任務(wù)需要找到必須的內(nèi)容和功能.左側(cè)導(dǎo)航條在垂直的緊湊的空間內(nèi)提供給用戶快速訪問已分類內(nèi)容的入口.
解決什么問題?
用戶為了完成任務(wù)需要找到必要的內(nèi)容和功能.
什么時候用?
分類至少有4個
分類可能會超過10個
分類的標(biāo)題可能會很長或者是系統(tǒng)生成
頁面寬度沒問題
推薦二級導(dǎo)航內(nèi)容;比如,當(dāng)在信息架構(gòu)層面,所展示的分類是這個頁面標(biāo)題的子元素時
當(dāng)展開/隱藏是有必要的
為了讓二級或三級導(dǎo)航條有更好的可見性,可以用來替代標(biāo)簽或頂部導(dǎo)航條
分類是屬于一個單獨的產(chǎn)品
具體解決辦法是什么?
在頁面標(biāo)題下方以一列的方式顯示一系列鏈接,并且左對齊.
對于更高級別的導(dǎo)航可以結(jié)合標(biāo)簽組和/或頂部導(dǎo)航條
左側(cè)導(dǎo)航條給于當(dāng)前位置特殊的視覺標(biāo)識.通過對顏色,字體或者其他方式來表示”選中狀態(tài)”.
左側(cè)導(dǎo)航條內(nèi)的所有頁面本身也該顯示在導(dǎo)航條內(nèi),同時必須正確的標(biāo)識當(dāng)前位置
左側(cè)導(dǎo)航條中文字標(biāo)簽周圍的元素都應(yīng)該是可點的,而不只是文字本身
一個左側(cè)導(dǎo)航條最多有兩層導(dǎo)航
當(dāng)需要展示兩層導(dǎo)航并且有很多的一級分類和二級分類時,應(yīng)考慮使用可折疊的左側(cè)導(dǎo)航條(或者手風(fēng)琴導(dǎo)航)
可點父導(dǎo)航 VS 靜態(tài)父導(dǎo)航(Semantic Parents)
可點父導(dǎo)航(左圖) VS 靜態(tài)父導(dǎo)航(右圖)
(譯者注:忘了過去某個項目中跟同事還爭了好久,現(xiàn)在看各有各的好處和用法,只要滿足基本原則即可)
當(dāng)把左側(cè)導(dǎo)航條中的鏈接進行分類后,分類的名字可以是靜態(tài)的(語義的)或者是動態(tài)的(可點的).靜態(tài)父導(dǎo)航只是定義了下面的子分類.可點父導(dǎo)航不僅僅是定義了子分類,他們還鏈接到一個特殊的目標(biāo)頁.
永遠(yuǎn)不要在相同左側(cè)導(dǎo)航中將可點父導(dǎo)航和靜態(tài)父導(dǎo)航混合使用.
關(guān)注內(nèi)容的劃分范圍(符合用戶的心智模型)比關(guān)注頁面的展示更重要.因為最常見的錯誤是將一系列沒意義的內(nèi)容歸在一類.
盡可能降低分類之間的交集
讓分類之間的界限盡可能的清晰(例如,很容易猜到想要的東西是否在一個分類中)
避免過于寬泛或者過于特殊的分類名字.
為什么使用這個組件?
頂部導(dǎo)航條提供給用戶一種很方便,簡潔分類展示方式,讓用戶訪問品類繁多的有組織的內(nèi)容
可訪問性
當(dāng)使用”彈出式”或”滑動式”菜單時,粗心的做法會導(dǎo)致有鼠標(biāo)的用戶可以訪問下級菜單(通過鼠標(biāo)劃過)或者點擊鏈接,但是鍵盤用戶只能做到后者.解決辦法是讓用戶可以通過Enter或Return鍵來觸發(fā)(通常會用在靜態(tài)父導(dǎo)航中).
開放式問題?
對于長文字我們該如何解決?在左側(cè)導(dǎo)航中我們是否應(yīng)該避免文字換行?
為什么至少需要4個分類?對于只有3個或者更少的分類時對那些設(shè)計師有什么建議嗎?
如果頁面寬度成問題,是否有其他的可選建議?
來源:http://pd4.me/blog/methodology/leftnav_yahoo_pattern_translate/
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(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è)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(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è)計都有哪些新的趨勢?
延伸閱讀
- [2010-07-20 08:16:00] 頂部導(dǎo)航條
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
力圖數(shù)字科技 視覺靈感 英文網(wǎng)站建設(shè) 蘋果系統(tǒng) 平面設(shè)計 青島高端網(wǎng)站建設(shè)公司哪家好 輪胎網(wǎng)站設(shè)計 php程序 網(wǎng)站推廣 青島好的網(wǎng)站優(yōu)化公司 html和css 集團官網(wǎng) 網(wǎng)站建設(shè)的步驟有哪些 青島網(wǎng)絡(luò)公司 H5定制設(shè)計 微官網(wǎng)帶來的好處 GOOGLE 手機端的網(wǎng)站 力圖 膠南網(wǎng)站建設(shè)公司 青島做網(wǎng)站多少錢 官網(wǎng)網(wǎng)站建設(shè) 青島輪胎網(wǎng)站設(shè)計 H5 企業(yè)網(wǎng)站為什么要備案 企業(yè)建站 青島網(wǎng)站建設(shè)公司哪家好 網(wǎng)站設(shè)計 青島網(wǎng)站營銷 交互設(shè)計