antdesign 柱状图_以Ant Design为例来说说B端设计的基本套路

嗯，重要的是不知道怎么下手，怎么办？你倒是说啊！要套路(*^▽^*)

这就道来，按照下面的法则，至少可以让设计不会出大错。

一、整体的框架图

首先，一般B端的页面展示如上图所示，按照功能模块，可以分为主导航、状态栏、标题栏、头部区域、内容区域。

二、主导航

主导航，典型的，有  横向导航与  纵向导航之分，这个之前阁主有详细的文章分析过，有兴趣的同学可以点击查看这里  《B端设计之导航》

| 横向导航

优点：

1. 通常使用比较少的菜单，简单，容易记忆；

2. 位于页面顶部，不占用横向空间；

3. 由于位于顶部，在视觉上更突出，更容易识别；

4. 菜单选项之间视觉权重的区分更明显，左边最强右边最弱；

缺点：

1. 扩展性有限，不能很好的承载大量和多层级菜单；

2. 占用屏幕高度，特备是当固定于屏幕顶部时；

3. 来回切换菜单选项时，横向移动鼠标的距离更长，操作效率更低；

| 纵向导航：

优点：

1. 能够承载的菜单项数量和层级更多，扩展性强；

2. 不占用屏幕高度且可以收起，为内容提供更多空间；

3. 在菜单间切换时鼠标移动距离短；

4. 能够更好地适应屏幕宽度较小的设备；

缺点：

1. 菜单数量多层级复杂时，不容易记忆；

2. 菜单选项文字不宜过长，可能会截断；

3. 各菜单选项之间的视觉权重差别不明显。

三、状态栏

状态栏，它的定位是全局功能，或者是系统操作。比方说有一些全局搜索、设置、通知等功能，将会放在这里。设计上来说，