前端样式建议-管理控制台

管理控制台页面是一个数据聚合与数据录入为主的页面。简言而之，其核心就是报表与表单的显示。如果保证用户在查看数据能一眼看到核心数据，录入数据时能按部就班地录入就很看重控制台产品的UI设计了。

页面布局

页面布局划分

页面整体布局应该分为三大区域：导航区域，侧栏区域与内容区域

• 导航区域，显示系统相关信息、用户信息；应该顶部悬浮。
• 侧栏区域，显示系统的菜单，应该侧边悬浮，不与内容区域一起滚动
• 内容区域，是整个系统的核心区域，所有核心信息都位于此处。内容区域应该包含面包屑导航。

表单

表单是一个数据录入最核心的功能，其应该包括数据输入、数据导入、数据查看。

表单录入

建议点

• 表单输入框/输入内容应该在页面位置相对居中；表单label（标签）右对齐；右侧显示提示信息，例如：描述该项填写的原因。**

• 表单的操作按钮（提交、保存）应该置于底部居中，建议操作按钮悬浮显示

表单显示

• 表单标签（label）可以不用设置宽度，可以通过颜色区分标签与值。推荐标签使用深色，值使用浅色。在整体上行程一个对齐的效果，避免出现标签与值之间出现空白。让数据有更好的紧凑性、整洁性。

报表

报表主要服务于数据展示，数据展示的方式多种多样，注意以表格和图表为主。

表格显示相关

建议点

• 选择列、序号列应该设置左悬浮，左侧列顺序应该为先为选择列，再者为序号列
• 操作列应该设置右悬浮；操作列按钮不宜超出3个；多出的按钮应该归于一个更多按钮；操作按钮建议文字为2个；如果操作按钮与当行数据有关，应该设置禁用；如果操作按钮不与当行数据有关，应该设置隐藏；
• 表格列中最少设置一列为弹性伸缩列，即设置min-width，防止表格在大屏下出现空白空间
• 表头应该尽可能不出现换行
• 表格内容显示，如果需要保持表格整齐可以设置文本过长时，显示悬浮信息，且单元格内做缩略显示

• 查询框应该可以展开/折叠，可以减少空间的使用，折叠效果建议显示两项与查询框的操作按钮

• 对于表格的操作与汇总信息，应该独立一个容器显示，左侧应该为操作按钮（按钮建议使用小按钮），右侧为汇总信息

表格编辑相关

建议点

• 报表的编辑应该尽可能减少页面跳转，如果编辑内容较少，应该使用弹框的方式进行编辑