網站導航的(de)布局非常(chang)靈活。
一般(ban)情(qing)況下(xia),網(wang)站導航位于(yu)頂部居中或縱(zong)向居左的偏多。如果網(wang)站導航位于(yu)右側,為了(le)避免干(gan)擾,原來在(zai)右側下(xia)方出現的友情(qing)鏈接和廣告按(an)鈕可能就不(bu)會(hui)在(zai)第(di)一屏(ping)出現,或者(zhe)把它們放置在(zai)頁(ye)面左下(xia)方。
如(ru)果網站導航位(wei)于頁面底部(bu),則通常在折疊(die)位(wei)置以上,即一屏之內(nei)能看到。
導(dao)航布局(ju)(ju)的各種方式常(chang)常(chang)混合使用,比如:全局(ju)(ju)導(dao)航在(zai)標(biao)志(zhi)下方居左水平排(pai)列,實用性導(dao)航位于頂部右側(ce)水平排(pai)列,局(ju)(ju)部導(dao)航垂直左側(ce)排(pai)列。
1.橫向頂部
主導(dao)(dao)航水(shui)平位于(yu)(yu)頁面上方,這就是(shi)導(dao)(dao)航的(de)(de)常見(jian)位置。人們常規(gui)的(de)(de)閱(yue)讀習慣是(shi)從上到下、從左到右,所以主導(dao)(dao)航菜單一(yi)(yi)般(ban)都布局(ju)在(zai)頁面頂部,水(shui)平排列。對于(yu)(yu)布局(ju)穩定(ding)的(de)(de)全局(ju)導(dao)(dao)航,用戶(hu)的(de)(de)閱(yue)讀經驗使(shi)其知(zhi)道全局(ju)導(dao)(dao)航的(de)(de)常規(gui)位置和功(gong)能,雖然關注度不高,一(yi)(yi)旦需要(yao)使(shi)用時(shi)卻可(ke)以輕松定(ding)位。
2.縱向左側
按照視線流從上到下、從左(zuo)到右的習(xi)慣,也會把全局導(dao)航或局部導(dao)航設置在(zai)頁面左(zuo)側垂(chui)直排列。
3.橫向底部
如果(guo)導(dao)航(hang)位于頁面下方折疊位置以上:
一(yi)種情況是頁面內(nei)容比較少,一(yi)屏(ping)就可以全部顯示;
另一(yi)種情況是(shi)內容很多,需要拖動滾(gun)動條才能看下面的內容,但(dan)拖動滾(gun)動條時,導航(hang)的位(wei)置始終位(wei)于底部,并(bing)不(bu)會(hui)隨(sui)滾(gun)動條向上滾(gun)動以致(zhi)消(xiao)失,即采用了浮動布局(ju)法。
4.縱向居中
縱向(xiang)居中(zhong)的導(dao)航會把整個網頁一分為二(er),信(xin)息(xi)內容分列左(zuo)右兩(liang)側。用戶瀏覽(lan)信(xin)息(xi)時(shi)會受(shou)到中(zhong)間導(dao)航條(tiao)的干擾(rao),思維出現停(ting)頓和(he)跳躍(yue)。
比較好的處理方法是,縱向居中的導(dao)航(hang)平(ping)常(chang)收(shou)起狀態,光標滑(hua)過(guo)后(hou)展開,單(dan)擊選(xuan)擇某菜單(dan)項后(hou)再(zai)次收(shou)起,空出版面來(lai)顯示具體內容(rong)。
5.隨意布局
貌似隨意布置(zhi)的(de)導航菜單,給(gei)人自然放(fang)松的(de)感(gan)覺,但(dan)是在細節處(chu)理上,網站設(she)計風格(ge)應保持(chi)一致(zhi),文字、顏色、圖形、背景、投影燈視覺元素設(she)計應統一。各導航菜單間距小于(yu)導航菜單整體(ti)與其他內容面積(ji)之間的(de)距離(li),或者導航菜單周(zhou)圍有大(da)面積(ji)留(liu)白,從整體(ti)看,有很明確的(de)信息(xi)塊的(de)印象。
6.浮動布局
浮動(dong)布局的(de)(de)導(dao)(dao)航(hang)菜單,通常使用(yong)在設計感強、頁(ye)面較長的(de)(de)網站上,如果只(zhi)在第(di)一(yi)屏設置主導(dao)(dao)航(hang)菜單,向下滑動(dong)時主導(dao)(dao)航(hang)隨之(zhi)滑動(dong),既可以節(jie)省(sheng)空間,又可能讓用(yong)戶(hu)在頁(ye)面中的(de)(de)任何(he)位置隨時使用(yong)。