背景

隨著項(xiàng)目的越來越深入敌土，產(chǎn)品功能的逐漸擴(kuò)充浴滴，我對(duì)目前的導(dǎo)航設(shè)計(jì)感受到了一絲壓力_{壓力來自于日益增加的功能哥桥，已經(jīng)超出了導(dǎo)航當(dāng)初設(shè)計(jì)的層級(jí)設(shè)定，而如果繼續(xù)基于這個(gè)設(shè)定來做下去狸捅，雖然也有一些妥協(xié)的方案衷蜓，但一定會(huì)引發(fā)產(chǎn)品界面的失衡}如果不想這類事情的發(fā)生，只有改變最初的導(dǎo)航設(shè)計(jì)_{還好尘喝，我們?還有機(jī)會(huì)修改}

三種常見的導(dǎo)航

在整理產(chǎn)品的過程中磁浇，我瀏覽了諸多的工具類產(chǎn)品，逐漸發(fā)現(xiàn)無論哪一類的?產(chǎn)品朽褪，根據(jù)其產(chǎn)品的復(fù)雜程度置吓，都可以概括為以下幾種：

二級(jí)結(jié)構(gòu)

復(fù)雜程度較低，常見于任務(wù)管理工具缔赠，一般這類結(jié)構(gòu)的產(chǎn)品功能比較明確衍锚，相對(duì)略顯單一，例如嗤堰，Heroku戴质、worktile，其結(jié)構(gòu)可以解析為：

二級(jí)結(jié)構(gòu)

當(dāng)然梁棠，一級(jí)菜單的展示就可以發(fā)揮設(shè)計(jì)師的想象空間置森，可以只有icon~也可以變換icon與文字的位置。
例如：

二級(jí)結(jié)構(gòu)-2

這類結(jié)構(gòu)適用于產(chǎn)品的每個(gè)主對(duì)象下有數(shù)量可控的子對(duì)象符糊，且子對(duì)象的界面功能目的明確凫海。

三級(jí)結(jié)構(gòu)

相對(duì)于二級(jí)結(jié)構(gòu)，三級(jí)結(jié)構(gòu)的復(fù)雜程度略有提升男娄，一般這類結(jié)構(gòu)的產(chǎn)品行贪，會(huì)有較多功能頁面漾稀，且功能分類較為明顯，這類結(jié)構(gòu)因?yàn)槌休d量較大建瘫，且層級(jí)相對(duì)簡(jiǎn)單崭捍，使用較為普遍，例如Google的Material design介紹網(wǎng)站啰脚，或者比較常見的bootstarp的各種前端樣式樣板殷蛇，其結(jié)構(gòu)可解析為：

三級(jí)結(jié)構(gòu)

或

當(dāng)產(chǎn)品的對(duì)象比較明確，且對(duì)象下的菜單較多時(shí)橄浓，可考慮采用這種二層展開的方式粒梦，例如springloops：

三級(jí)結(jié)構(gòu)2

三級(jí)結(jié)構(gòu)相對(duì)于二級(jí)結(jié)構(gòu)而言，一級(jí)菜單的作用更多的是分類和收納荸实，二級(jí)菜單才是工具的核心內(nèi)容匀们。

這類結(jié)構(gòu)適用于，工具的功能較多准给，且零散泄朴，需要進(jìn)行分類整合，其靈活性在于還可以根據(jù)情況擴(kuò)充二級(jí)菜單下的三級(jí)子菜單露氮。

四級(jí)結(jié)構(gòu)

這類產(chǎn)品的特點(diǎn)就是龐大~充斥著各種意想不到的功能和“驚喜”祖灰，功能較多、功能之間的包含關(guān)系復(fù)雜沦辙、理解成本高是這類產(chǎn)品的共性夫植，例如Google的Developer Console、螞蟻金融云油讯。

一般4級(jí)結(jié)構(gòu)意味著用戶至少3次點(diǎn)擊才能進(jìn)入到目標(biāo)頁面详民，即便是在目標(biāo)路徑清晰的情況下，仍然讓頁面背負(fù)著較大的體驗(yàn)壓力~結(jié)合瀏覽過程中的一些實(shí)踐陌兑，可以考慮減少用戶對(duì)于目標(biāo)路徑的點(diǎn)擊沈跨，如下：

四級(jí)結(jié)構(gòu)

減少用戶發(fā)現(xiàn)菜單的路徑，如果在二級(jí)菜單下還有三級(jí)菜單兔综，則默認(rèn)將三級(jí)菜單直接展開~結(jié)構(gòu)上加以區(qū)分饿凛，從來減少用戶的點(diǎn)擊次數(shù)。

當(dāng)然软驰，四級(jí)結(jié)構(gòu)并不意味著整個(gè)產(chǎn)品所有的層級(jí)都是這么復(fù)雜涧窒，往往這類工具會(huì)出現(xiàn)三、四級(jí)交叉并存的情況锭亏，四級(jí)結(jié)構(gòu)往往適用于大型工具類的配置部分纠吴，或者需要多次分類的部分。

為什么都在左側(cè)慧瘤？

上述介紹的框架結(jié)構(gòu)全部是基于左側(cè)的設(shè)計(jì), 其實(shí)有很多產(chǎn)品仍然采用Headline作為菜單的方式戴已，例如Teambition固该，但是就我一家之言，工具類產(chǎn)品最適合將導(dǎo)航放置在左側(cè)的原因糖儡，我認(rèn)為可以總結(jié)為以下：

• 展示性好~ Headline作為菜單伐坏，會(huì)出現(xiàn)二級(jí)菜單隱藏在一級(jí)菜單之中的情況，例如
  
  

  Headline
  這種隱藏的問題在于即便是同級(jí)目錄下的切換握联，都需要通過點(diǎn)擊一級(jí)菜單來實(shí)現(xiàn)_{這樣無形中添加了用戶反復(fù)操作的成本桦沉，而左側(cè)菜單會(huì)將同級(jí)下的菜單全部展開}能夠讓用戶更加了解這一部分都是包含了哪些功能。
• 擴(kuò)展性強(qiáng)~與移動(dòng)端不同金闽，PC端界面在橫向的擴(kuò)展上總是弱于縱向的擴(kuò)展性永部，當(dāng)橫向菜單累積到一定數(shù)量的時(shí)候，如果產(chǎn)品層面不做歸納和區(qū)分呐矾，整個(gè)橫向菜單的擴(kuò)展就會(huì)變成一項(xiàng)負(fù)擔(dān)。
• 操作路徑簡(jiǎn)潔~以最遠(yuǎn)舉例的菜單項(xiàng)為例懦砂，比對(duì)下操作路徑的復(fù)雜度：

路徑1

路徑1

路徑2

路徑2

可以看出路徑2在路徑切換上蜒犯，會(huì)比路徑1少一次，路徑相對(duì)簡(jiǎn)單荞膘，并且視野范圍相對(duì)集中在左側(cè)~相對(duì)于路徑1而言會(huì)更加容易操作罚随。

綜上~就個(gè)人而言，更加偏向于左側(cè)導(dǎo)航的設(shè)計(jì)風(fēng)格羽资。

強(qiáng)調(diào)

頁面導(dǎo)航的設(shè)計(jì)與業(yè)務(wù)的復(fù)雜程度密切相關(guān)淘菩，交互設(shè)計(jì)本身就有半只腳踏在產(chǎn)品設(shè)計(jì)里面，必須在對(duì)整個(gè)業(yè)務(wù)非常了解的情況下屠升，綜合考慮后潮改，決定使用哪種風(fēng)格~為了追究簡(jiǎn)單扁平而使用簡(jiǎn)單導(dǎo)航的后果，可能會(huì)對(duì)后續(xù)的設(shè)計(jì)工作帶來更多困難腹暖，并且有返工重新設(shè)計(jì)的危險(xiǎn)汇在。