在 B 端产品做设计的该用时候,第一件事是端设决定界面的结构布局,导航放在哪成为一件急需考虑的计导事情。典型的份对,有横向导航与纵向导航之分,该用拿 ant design 来举例,端设如下面 2 张图所示。计导
两者看起来都行,但选择哪个,心里会有第一眼的直觉,但光有直觉不行,还得罗列个 123 出来,这样展示方案的时候,才能服己服人。
△ 横向导航
优点:
缺点:
优点:
缺点:
他们都可以在已有的方向上进行扩展,如下图:
但总体来说,单独的横向导航方式层级不能超过 3 层,多于 3 级就不利于用户的阅读和选择。
△ 纵向导航扩展
相对于横向,纵向的拓展性强,不管多少级都可以一直往下加,但层级高过于 3 层,用户对导航的分辨和记忆会明显下降。
当然,有时候单独只有横向或者纵向一种导航不能完全满足我们的需求,根据以上特点,我们也可以有如下组合的形式。
△ 组合导航
很明显,这样的组合导航,适用于一级导航不太多(最好少于 5 个)且内容权重差别很明显,一级导航之后的导航内容和层级比较多且内容复杂。
另外,如果嫌纵向导航占空间,则可以考虑将纵向导航做成可折叠收起的模式,适用于贴着浏览器的纵向导航。
△ 可折叠的纵向导航
总结
责任编辑:未丽燕 来源: 优设 B端导航设计
(责任编辑:休闲)
30周年纪念4K重制《超级马里奥》真人电影将于9月15日重映