側(cè)邊欄是B端項(xiàng)目頁(yè)面中的重要組成部分，前面我們有寫過對(duì)側(cè)邊欄的一些基本的介紹，解釋了它的功能、交互，但并沒有用太多篇幅介紹視覺上的思路。

在最近學(xué)員提交的項(xiàng)目作業(yè)中，發(fā)現(xiàn)側(cè)邊欄的設(shè)計(jì)都有很大的改進(jìn)空間，所以專門出一篇解決導(dǎo)航視覺問題的小分享。

問題太明顯的案例我就不放了，先看看下面這套：

只看導(dǎo)航的話，設(shè)計(jì)是沒有太大問題的。但把所有頁(yè)面連貫起來一起看，就會(huì)明顯發(fā)現(xiàn)，整體的視覺感受太?“蒼白”?了。

這種情況即信息缺乏層次，容易導(dǎo)致我們不容易找到視覺重心，看起來和用起來都累。

再者，有一點(diǎn)非常重要但是很多新人沒意識(shí)到的，就是：

放進(jìn)作品集的 B 端項(xiàng)目作品是需要經(jīng)過精心調(diào)整的！

如果展示出來的效果像上面這樣白茫茫一片，是很影響整體觀感的。一定不要信面試官嘴上說?”視覺“?不重要，主要看你業(yè)務(wù)邏輯和交互的處理方式。沒有讓人滿意的視覺輸出會(huì)直接導(dǎo)致職業(yè)評(píng)價(jià)的降低。

下面，就長(zhǎng)話短說，直接進(jìn)入到導(dǎo)航設(shè)計(jì)的實(shí)例演示和建議。

第1：制造對(duì)比度

盡量讓導(dǎo)航和主要內(nèi)容區(qū)域有差異化，制造對(duì)比，讓我們查看主要內(nèi)容或者查看導(dǎo)航的時(shí)候視覺重心不會(huì)受到另一部分內(nèi)容影響。

這個(gè)步驟最簡(jiǎn)單的方法就是調(diào)整導(dǎo)航背景色，可以是深色也可以是淺色。

不要認(rèn)為側(cè)邊欄用了深色就是搶內(nèi)容區(qū)域注意力，在深色襯托中白色會(huì)更突出。但如果要應(yīng)用主色，就一定要確保品牌色合適，不要用熒光色或者奇怪的漸變。

第2：圖標(biāo)要有設(shè)計(jì)感

側(cè)邊欄的圖標(biāo)是有很大發(fā)揮空間的，它能最快速提升組件設(shè)計(jì)感。雖然這是 B 端項(xiàng)目不應(yīng)該像移動(dòng)端應(yīng)用首頁(yè)快速入口那些圖標(biāo)一樣，用非常浮夸 BlingBling 的圖標(biāo)。

但是，也有大量簡(jiǎn)約、有趣、有細(xì)節(jié)的圖標(biāo)種類可以使用。

尤其是，可以在選中狀態(tài)下做文章，這樣就可以最大限度保證設(shè)計(jì)感的同時(shí)又不失簡(jiǎn)潔性?(找個(gè)幾個(gè)不同風(fēng)格的做示意)。

第3：選中要有細(xì)節(jié)

如果畫面本身內(nèi)容多，可以讓選中簡(jiǎn)單點(diǎn)只是變動(dòng)圖標(biāo)和文字色彩，或者增加一個(gè)淺色的選中背景框。

如果想要選中更突出一點(diǎn)，就可以填充更多的設(shè)計(jì)細(xì)節(jié)進(jìn)去。例如添加主色背景、漸變色、連接右側(cè)背景、添加選中標(biāo)識(shí)等。

第4：適當(dāng)增加細(xì)節(jié)元素

有時(shí)候?yàn)榱俗屧O(shè)計(jì)內(nèi)容看起來更飽滿，我們也需要有意識(shí)的增加導(dǎo)航上面的小細(xì)節(jié)。

比如之前提過的為模塊進(jìn)行分組，并添加小字標(biāo)題。或者，在右側(cè)添加紅點(diǎn)、提醒數(shù)字都可以讓導(dǎo)航看起來更成熟更完整。

最后，可以再看看做了調(diào)整的版本和原版本之間的對(duì)比。

只要了解哪些方向可以發(fā)力，我們就可以投入更多精力進(jìn)行探索，開發(fā)出更多有趣的方案出來。

在日常練習(xí)和作品集輸出中，不要過度催眠自己視覺完全不重要，盡可能提升自己的視覺上限，越能保證我們真實(shí)輸出的水平和質(zhì)地。

結(jié)尾

最后，順便收集了一波優(yōu)秀的側(cè)邊導(dǎo)航欄。

大家到「超人的電話亭」公眾號(hào)回復(fù)?“側(cè)邊導(dǎo)航”?就可獲取這些參考，希望你們的導(dǎo)航設(shè)計(jì)不會(huì)再這么枯燥了！

新一期B端產(chǎn)品設(shè)計(jì)全能班即將十一放假結(jié)束就開課了，有提升需要的同學(xué)記得聯(lián)系我～