|
01 整体的框架图 ▼ 首先，一般B端的页面展示如上图所示，按照功能模块，可以分为主导航、状态栏、标题栏、头部区域、内容区域。 02 主导航 ▼ 横向导航 优点： 1. 通常使用比较少的菜单，简单，容易记忆； 2. 位于页面顶部，不占用横向空间； 3. 由于位于顶部，在视觉上更突出，更容易识别； 4. 菜单选项之间视觉权重的区分更明显，左边最强右边最弱。 缺点： 1. 扩展性有限，不能很好的承载大量和多层级菜单； 2. 占用屏幕高度，特备是当固定于屏幕顶部时； 3. 来回切换菜单选项时，横向移动鼠标的距离更长，操作效率更低。 纵向导航 优点： 1. 能够承载的菜单项数量和层级更多，扩展性强； 2. 不占用屏幕高度且可以收起，为内容提供更多空间； 3. 在菜单间切换时鼠标移动距离短； 4. 能够更好地适应屏幕宽度较小的设备。 缺点： 1. 菜单数量多层级复杂时，不容易记忆； 2. 菜单选项文字不宜过长，可能会截断； 3. 各菜单选项之间的视觉权重差别不明显。 03 状态栏 ▼ 状态栏，它的定位是全局功能，或者是系统操作。比方说有一些全局搜索、设置、通知等功能，将会放在这里。设计上来说，难度不大。 04 标题栏 ▼ 标题栏是用来放置页面的名称的，目的是告诉用户现在所在的页面是哪，与整个网络是什么关系。一般会有4种展现形式，如下图。 最常用的是第1、2种，第4种如遇特殊情况，对页面高度空间要求高，以及页面层级为单一层级时，可以去掉不用，因为在左侧的导航也有相应的title进行提示。 05 头部区域 ▼ 头部区域一般是筛选功能。因为B端主要承载的是查看功能，所以筛选项会特别多。 值得注意的是，默认情况下查询按钮会放在筛选项之后，如果排满了，会放在筛选项右下角，如上图。有查看更多的话，“展开”按钮也会放在右下角。 头部区域有时候也会放置一些内容或者搜索项，如下图。 06 内容区域 ▼ 内容区域主要以报表、表格、表单三种形式呈现。 1. 报表 报表的布局一般是块状如下图。 报表的展现形式主要分为柱状图、条形图、折线图、饼图。 柱状图 适用于多个个体对一个变量数据维度的比较，由高到低进行排列，但有个特别的情况在于，如果可变量是时间，则按照时间顺序进行排列。
优点： 1. 一目了然地进行比较数据维度的增减； 缺点： 1. 数目太多时（超过12个），分辨起来会比较困难，则适合折线图进行显示。 条形图 适用于多个主体对一个变量数据维度的比较，由高到低或者由低到高进行排列。
优点： 1. 一目了然，容易比较数据的增减； 2. 对比较个体数量容纳比较高，可以是几个，也可以是几十个； 缺点： 1. 需要更多垂直空间在屏幕上，有时需要用户上下滚动屏幕才能看到所有的个体。 折线图 适用于对趋势的展现，Y轴的起点需要从0开始，不建议展示每个节点，对比主体数量不建议超过4个，过多也会让用户辨识度降低。
优点： 1. 特备适合于对趋势的研究； 2. 对多个主体的对比效果很明显； 缺点： 1. 对比主体不能太多。 饼图 适用于研究单个主体与整体之间的关系，找到影响整体的主要因素。主体个数不超过5个，如果超过可以使用一个“其它”选项进行囊括；占比从大到小，从12点开始按照顺时针方向进行排列。
优点： 1. 很容易地研究出，影响整体的头部因素有哪些； 缺点： 1. 各因素之间对比效果差，特别是两个因素占比很相近的时候； 2. 如果影响效果太小，容易被忽略。 2. 表格 表格适用于展示一些条例的细节，比较说充值/消费的流水、创建多条广告推广计划后的效果数据陈列等等。 在表格的设计事项中需要注意的是，每个属性对齐方式要注意。数字类的一般是左对齐，价格是右对齐。价格右对齐是方便比较金额数的多少，从左边突出的位数就能一眼看到哪个是最多与最少。如果价格一般固定在几位数的话，也可以考虑左对齐。
优点： 1. 方便check每一项的细节； 缺点： 1. 不太直观； 2. 对整体的情况缺乏大局信息的展示。 在设计的过程中需要注意，尽量精简字段，避免横向滚动。如果字段实在太长，一般会采取头几列，滚动时表头进行浮起，方便滚动过程中找到字段的主体。如果带有操作类的功能，则表尾也可以进行浮起。  |
|
|
