关于侧边栏的设计要点

 

只看导航的话，设计是没有太大问题的。但把所有页面连贯起来一起看，就会明显发现，整体的视觉感受太 “苍白” 了 

这种情况即信息缺乏层次，容易导致我们不容易找到视觉重心，看起来和用起来都累

再者，有一点非常重要但是很多新人没意识到的，就是：放进作品集的 B 端项目作品是需要经过精心调整的！

下面，就长话短说，直接进入到导航设计的实例演示和建议。

第1：制造对比度

尽量让导航和主要内容区域有差异化，制造对比，让我们查看主要内容或者查看导航的时候视觉重心不会受到另一部分内容影响。

这个步骤最简单的方法就是调整导航背景色，可以是深色也可以是浅色。

不要认为侧边栏用了深色就是抢内容区域注意力，在深色衬托中白色会更突出。但如果要应用主色，就一定要确保品牌色合适，不要用荧光色或者奇怪的渐变。 

 

第2：图标要有设计感

侧边栏的图标是有很大发挥空间的，它能最快速提升组件设计感。虽然这是 B 端项目不应该像移动端应用首页快速入口那些图标一样，用非常浮夸 BlingBling 的图标。但是，也有大量简约、有趣、有细节的图标种类可以使用。 

尤其是，可以在选中状态下做文章，这样就可以最大限度保证设计感的同时又不失简洁性 (找个几个不同风格的做示意)。 

第3：选中要有细节

如果画面本身内容多，可以让选中简单点只是变动图标和文字色彩，或者增加一个浅色的选中背景框。

如果想要选中更突出一点，就可以填充更多的设计细节进去。例如添加主色背景、渐变色、连接右侧背景、添加选中标识等。 

第4：适当增加细节元素

有时候为了让设计内容看起来更饱满，我们也需要有意识的增加导航上面的小细节

比如之前提过的为模块进行分组，并添加小字标题。或者，在右侧添加红点、提醒数字都可以让导航看起来更成熟更完整。 

最后，可以再看看做了调整的版本和原版本之间的对比。 

 

在日常练习和作品集输出中，不要过度催眠自己视觉完全不重要，尽可能提升自己的视觉上限，越能保证我们真实输出的水平和质地。