建站
咨詢
售后
建站咨詢
新聞中心
在 B 端產(chǎn)品做設(shè)計的時候，第一件事是決定界面的結(jié)構(gòu)布局，導(dǎo)航放在哪成為一件急需考慮的事情。典型的，有橫向?qū)Ш脚c縱向?qū)Ш街?，?ant design 來舉例，如下面 2 張圖所示。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、樺甸網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、樺甸網(wǎng)絡(luò)營銷、樺甸企業(yè)策劃、樺甸品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供樺甸建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
兩者看起來都行，但選擇哪個，心里會有第一眼的直覺，但光有直覺不行，還得羅列個 123 出來，這樣展示方案的時候，才能服己服人。
△ 橫向?qū)Ш?/p>
橫向?qū)Ш?/h3>
優(yōu)點：
- 通常使用比較少的菜單，簡單，容易記憶。
- 位于頁面頂部，不占用橫向空間。
- 由于位于頂部，在視覺上更突出，更容易識別。
- 菜單選項之間視覺權(quán)重的區(qū)分更明顯，左邊最強右邊最弱。
缺點：
- 擴展性有限，不能很好地承載大量和多層級菜單。
- 占用屏幕高度，特別是當(dāng)固定于屏幕頂部時。
- 來回切換菜單選項時，橫向移動鼠標(biāo)的距離更長，操作效率更低。
△ 縱向?qū)Ш?
縱向?qū)Ш?/h3>
優(yōu)點：
- 能夠承載的菜單項數(shù)量和層級更多，擴展性強。
- 不占用屏幕高度且可以收起，為內(nèi)容提供更多空間。
- 在菜單間切換時鼠標(biāo)移動距離短。
- 能夠更好地適應(yīng)屏幕寬度較小的設(shè)備。
缺點：
- 菜單數(shù)量多層級復(fù)雜時，不容易記憶。
- 菜單選項文字不宜過長，可能會截斷。
- 各菜單選項之間的視覺權(quán)重差別不明顯。
他們都可以在已有的方向上進行擴展，如下圖：
△ 橫向?qū)Ш綌U展
但總體來說，單獨的橫向?qū)Ш椒绞綄蛹壊荒艹^ 3 層，多于 3 級就不利于用戶的閱讀和選擇。
△ 縱向?qū)Ш綌U展
相對于橫向，縱向的拓展性強，不管多少級都可以一直往下加，但層級高過于 3 層，用戶對導(dǎo)航的分辨和記憶會明顯下降。
當(dāng)然，有時候單獨只有橫向或者縱向一種導(dǎo)航不能完全滿足我們的需求，根據(jù)以上特點，我們也可以有如下組合的形式。
△ 組合導(dǎo)航
很明顯，這樣的組合導(dǎo)航，適用于一級導(dǎo)航不太多(最好少于 5 個)且內(nèi)容權(quán)重差別很明顯，一級導(dǎo)航之后的導(dǎo)航內(nèi)容和層級比較多且內(nèi)容復(fù)雜。
另外，如果嫌縱向?qū)Ш秸伎臻g，則可以考慮將縱向?qū)Ш阶龀煽烧郫B收起的模式，適用于貼著瀏覽器的縱向?qū)Ш健?nbsp;
△ 可折疊的縱向?qū)Ш?/p>
總結(jié)
- 橫向?qū)Ш揭子洃?、易看，各?dǎo)航權(quán)重區(qū)分明顯，越靠左越重要，但切換效率慢。
- 縱向?qū)Ш綌U展性強，可折疊，各導(dǎo)航權(quán)重區(qū)分不明顯，切換效率更高。
- 如果兩者都不能單獨滿足，可嘗試組合的形式。
分享題目：該用哪類B端設(shè)計導(dǎo)航？來看這份對比！
網(wǎng)頁路徑：http://m.5511xx.com/article/coogehj.html
