1.页面布局
设计规则#
尺寸#
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
- 顶部导航（大部分系统）：一级导航高度
64px，二级导航48px。
- 顶部导航（展示类页面）：一级导航高度
80px，二级导航56px。
- 顶部导航高度的范围计算公式为：
48+8n。
- 侧边导航宽度的范围计算公式：
200+8n。
交互#
- 一级导航和末级的导航需要在可视化的层面被强调出来；
- 当前项应该在呈现上优先级最高；
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
视觉#
导航样式上需要根据信息层级合理的选择样式：
- 大色块强调
建议用于底色为深色系时，当前页面父级的导航项。
- 高亮火柴棍
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
- 字体高亮变色
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
- 字体放大
12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。组件概述#
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout中。
Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在Layout中。
本项目采用T型布局
2.标准色
3.标准字
本项目对字体进行了统一规范，力求在不同平台、浏览器下能显示出最佳效果。使用MacOS(iOS)优先的策略，在不支持苹方字体的情况下，使用备用字体。
字体代码
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;字体使用规范
4.图标
- 图标风格上符合产品的整体视觉风格,比如线条圆润或直角。
- 图标要设计简单,条条框框数量不要超过3条以保证易辨认。
- 图标用简单的象征图案来表达其功能或含义。
通过控制简单识别的图标,可以更好地对界面元素进行视觉传达。
5.按钮
- 主按钮尺寸一般为120px x 40px左右,次按钮为100px x 36px左右。
- 按功能和重要级区分主次按钮:主按钮以主色为底,次按钮用空心或边框形式。
- 文字按钮配合图标使用,文字置于图标右侧。
- 按下后明显的点击反馈,采用颜色加深
- 常用的按钮形状有圆角矩形、圆角、镂空、图标按钮等可供选择。
- 提交类主按钮在各区块采用相同的位置,一般置于右上方。
- 悬停提示文字需要简洁,如"点击提交"。
- 避免过多按钮排列给用户选择负担。
- 按钮内只放必要的文字,控制在4个字以内,8个字以内。
- loading状态采用循环动画反馈,防止重复点击。
通过按钮形状、颜色、位置的规范可以更好地吸引用户点击和明确操作反馈
按钮类型有：默认按钮、主按钮、虚线按钮、文字按钮以及四种颜色按钮。
幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
不可用状态按钮
6.导航
- 导航栏使用易识别的文字加图标进行分类。
- 当前页面对应的导航要高亮显示,采用颜色变化或下划线标识。
- 导航样式多端统一,比如手机端为下拉而PC端为横向。
- 如果导航层级多,要分主导航和子导航区分。
- 主导航一级选项控制在5个以内。
- 次级导航可以放在侧边栏固定位置。
- 导航项名称简洁明了,2-4个字为宜。
- 导航条在页面顶部或者侧边固定,提供快速切换。
- 面包屑导航让用户明确当前位置。
- 悬停或点击交互要设计明确的视觉反馈。
导航设计的规范可以让用户快速定位,
优点:侧边导航是以树形控件的方式来表示的，相对于顶部导航，无论是数量和层级，扩展性均较好。
方便寻找：由于纵向浏览无需把每个单个菜单完整浏览，相对水平菜单，定位更快。
7.表单
- 表单通过字段描述、提示、验证反馈帮助用户填写。
- 表单字段描述置于输入框上方,保持字号、对齐一致。
- 输入框内设定默认占位符提示用户输入内容。
- 输入框大小根据文本长度和类型合理设置。
- 多选框和单选框需要整齐排列,并配有替代文字。
- 下拉选择菜单给出选项,默认显示主要选项。
- 提交按钮在表单底部统一固定区域。
- 表单字段分组采用灰底突出边框的视觉形式。
- 验证失败的字段采用红色边框高亮,并给出错误提示。
- 验证通过的字段绿色边框反馈,提升满足感。
- 表单采用响应式布局,移动端可栅格化排列。
通过表单规范的文字、布局、交互可以提升用户填写效率
8.表格
- 表格需要标题行,表头需用加粗字体强调。
- 内容以左对齐为主,数字内容可右对齐。
- 使用单一的线条样式分割表格,线条使用灰色。
- 表格内容过多时,可以固定表头方便浏览。
- 表格可以配合符号区分正负情况。
- 可交替使用背景色来区分不同行。
- 重要数据可以用颜色标注突出。
- 表格直接显示比较关键的数据。
- 允许自定义表格列宽,方便用户浏览。
- 表格可以采用响应式设计兼顾移动端。
- 表格样式简洁大方,不要过多装饰线条。
通过表格的文字布局和样式设计,可以展示重要的数据,提高可读性。
9.反馈
- 加载等待时使用循环动画来表示正在加载。
- 文字描述采用"加载中"等简短语,可放复杂位置。
- 操作成功后使用绿色打钩与"成功"表示。
- 失败反馈采用红色叹号与"失败"等文字表明。
- 错误或警示性文字使用红色来显示。
- 反馈图标与文字组合使用,补充说明问题。
- 反馈显示在操作区域附近,而非浮窗。
- 成功反馈显示1-2秒后自动消失。
- 失败反馈需要提示用户重新操作的内容。
- 反馈样式简洁大方,避免太复杂的设计。
通过设计规范,可以让用户明确当前状态和下一步操作。
1.提示框
2.提示弹窗
3.消息提示
