B端視覺小課堂:關于側邊欄的設計要點

7 評論 6749 瀏覽 34 收藏 7 分鐘

側邊欄在B端設計中的重要性毋庸置疑,好的側邊欄取決于它的配色、圖標、細節和排版等。這篇文章以一套案例出發,帶大家直接進入到導航設計的實例演示,希望對你有所幫助~

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

在最近學員提交的項目作業中,發現側邊欄的設計都有很大的改進空間,所以專門出一篇解決導航視覺問題的小分享。

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

B端視覺小課堂:關于側邊欄的設計要點

B端視覺小課堂:關于側邊欄的設計要點

B端視覺小課堂:關于側邊欄的設計要點

B端視覺小課堂:關于側邊欄的設計要點

只看導航的話,設計是沒有太大問題的。但把所有頁面連貫起來一起看,就會明顯發現,整體的視覺感受太“蒼白”了。

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

再者,有一點非常重要但是很多新人沒意識到的,就是:

放進作品集的 B 端項目作品是需要經過精心調整的!

如果展示出來的效果像上面這樣白茫茫一片,是很影響整體觀感的。一定不要信面試官嘴上說”視覺“不重要,主要看你業務邏輯和交互的處理方式。沒有讓人滿意的視覺輸出會直接導致職業評價的降低。

下面,就長話短說,直接進入到導航設計的實例演示和建議。

一、制造對比度

盡量讓導航和主要內容區域有差異化,制造對比,讓我們查看主要內容或者查看導航的時候視覺重心不會受到另一部分內容影響。

這個步驟最簡單的方法就是調整導航背景色,可以是深色也可以是淺色。

B端視覺小課堂:關于側邊欄的設計要點

不要認為側邊欄用了深色就是搶內容區域注意力,在深色襯托中白色會更突出。但如果要應用主色,就一定要確保品牌色合適,不要用熒光色或者奇怪的漸變。

B端視覺小課堂:關于側邊欄的設計要點

B端視覺小課堂:關于側邊欄的設計要點

二、圖標要有設計感

側邊欄的圖標是有很大發揮空間的,它能最快速提升組件設計感。雖然這是 B 端項目不應該像移動端應用首頁快速入口那些圖標一樣,用非常浮夸 BlingBling 的圖標。

但是,也有大量簡約、有趣、有細節的圖標種類可以使用。

B端視覺小課堂:關于側邊欄的設計要點

尤其是,可以在選中狀態下做文章,這樣就可以最大限度保證設計感的同時又不失簡潔性(找個幾個不同風格的做示意)。

B端視覺小課堂:關于側邊欄的設計要點

三、選中要有細節

如果畫面本身內容多,可以讓選中簡單點只是變動圖標和文字色彩,或者增加一個淺色的選中背景框。

如果想要選中更突出一點,就可以填充更多的設計細節進去。例如添加主色背景、漸變色、連接右側背景、添加選中標識等。

B端視覺小課堂:關于側邊欄的設計要點

四、適當增加細節元素

有時候為了讓設計內容看起來更飽滿,我們也需要有意識的增加導航上面的小細節。

比如之前提過的為模塊進行分組,并添加小字標題?;蛘?,在右側添加紅點、提醒數字都可以讓導航看起來更成熟更完整。

B端視覺小課堂:關于側邊欄的設計要點

最后,可以再看看做了調整的版本和原版本之間的對比。

B端視覺小課堂:關于側邊欄的設計要點

B端視覺小課堂:關于側邊欄的設計要點

B端視覺小課堂:關于側邊欄的設計要點

只要了解哪些方向可以發力,我們就可以投入更多精力進行探索,開發出更多有趣的方案出來。

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

我們下篇再賤~

 

本文由 @酸梅干超人 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 側邊導航欄的選中細節前端說實現不了嗚嗚嗚嗚嗚

    來自廣東 回復
  2. 我覺得配色圖標都是小事,側邊欄的名稱才是最難和最重要的。

    來自河南 回復
  3. 學到了,側邊導航欄要與內容區分開,這樣才能讓用戶看得更直觀,更容易做出決策

    來自廣東 回復
  4. 哈哈哈哈,不過有時候一些小細節組件會讓我會很難受呀,比如那個未讀小紅點

    來自福建 回復
  5. 這個側邊欄的設置我很喜歡網易云,可以自己調色。

    來自湖北 回復
  6. 側邊欄可以放一些關聯功能,做這些的基礎就是為了讓用戶更好的使用產品

    來自河北 回復
  7. 學到了,側邊欄使用熒光色和漸變色確實有點喧賓奪主,影響整體的視覺呈現

    來自浙江 回復