开发规范、设计原则

一、用户界面

1、设计原则

1）对齐

• 层次结构清晰，观察 1 像素，引导视觉流向，让用户更流畅地接收信息
• 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点

2）多元化

• 根据不同的用户体验，可快速进行界面色调切换
• 点击侧边栏头像，扩大工作区域显示，可快速折叠侧边栏和顶部导航栏
• 根据用户喜好，可折叠侧边栏，默认折叠侧边栏，取消页签模式，表单弹窗模式
• 弹窗的表单，关闭表单后，自动刷新列表数据，保留列表查询条件
• 列表操作体验清晰，不太实用的操作进行折叠隐藏
• 列表查询区域隐藏，扩大列表显示区域

3）布局色彩

• 响应式样式，12 列栅格化布局，根据屏幕大小进行自适应布局，支持平板或手机操作
• 色彩源于『自然』的设计价值观，设计师通过对自然场景的抽象捕捉

4）导航设计

• 在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航
• 支持侧边栏全部导航；或者顶部一级导航，二级以下导航在侧边栏

2、数据列表

1）列对齐方式

• 短小字符居中，比较长的字符居左，日期居中，货币或带小数点的数字居右
• 数值位数相等的字段，如：编码、编号：居中
• 字典类，如：分类、类型、类别、状态：居中
• 不规则长度，5个字符以上，名称、标题：居左
• 日期时间：居中
• 与货币相关的，金额、单价：居右
• 带小数点的数字，数量、百分数：居右
• 整数型数字，年龄，个数：居中
• 合计，与合计列对齐方式相同

2）列显示格式

• 与货币相关，金额或单价：保留两位小数，如无特殊要求，不加货币符号，不使用千分位符号，默认单位“元”，如果单位不是“元”，则必须在列标题或当前页标明单位，如：金额（万元）
• 长字符列，名称、标题、备注等：当列宽不足时，用 … 号表示无法显示的字符
• 日期：yyyy-MM-dd，日期时间：yyyy-MM-dd HH:mm，如业务无特别要求，不带秒，如需要时分秒，格式为： yyyy-MM-dd HH:mm:ss 采用24小时制
• 列宽要适中，根据内容调整列宽大小

3）其他要求

• 列表中存在与金额相关的列，或者与数量相关的列，根据业务要求，列表底部增加合计，如果列表是分页列表，合计默认为查询结果的合计，而不是当前页合计
• 合计校验：明细行合计值，与合计行值相同，不要出现明细与合计的数值不对的情况
• 汇总与明细校验：汇总值与钻取的明细合计值相同，同上
• 根据业务要求，比较大或比较耗时的页面，第一次打开时，如没有特殊要求，默认不执行查询显示数据，需要点击查询，执行显示数据，并提示“点击查询显示数据”信息
• 对于列与数字相关的，如：金额、数量、证件号码（如：身份证）或其它由长数字组成的字段，不能出现科学计数法格式
• 明细行中不能存在重复记录

4）查询条件

• 数据字典字段作为查询条件，无特殊要求，信息内容相对固定少于20行时，采用下拉选择方式，否则采用弹出对话框选择方式；有特别要求时，可以采用输入方式，进行模糊查询，除此之外，必须采用选择方式
• 查询条件为多行时，标签需要上下两端对齐，标签单行右对齐，注意美观
• 输入框或选择框，上下两端对齐，宽度适中

3、编辑表单

1）表单控件

• 必填信息，必须明确区分，标签前增加红色星号，醒目显示，必填信息在保存时必须增加必填验证
• 数值类型，必须增加数值验证
• 日期类型，必须增加日期格式验证
• 边界验证，录入信息的长度不得多于数据库字段长度，input标签必须包含增加maxlength属性
• 无特殊情况，如：电话、身份证、邮箱，能用正则表达式验证的字段必须启用验证
• 界面录入信息与列表显示信息保持一致，避免字段张冠李戴
• 界面显示信息与数字相关的，如：金额、数量、证件号码（如：身份证）或其它由长数字组成的字段，不能出现科学计数法格式
• 必须避免提交类型按钮多次执行，出现多条相同信息，在未成功之前，不能多次点击

2）其它要求

• 对整个项目进行跨浏览器的测试（必须兼容IE9+、360、Chrome、Firefox浏览器）
• 界面大小应该适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力，注意细节（观察1像素距离、列表文字对齐）
• 必须保证在最小分辨率1024x768的可视性（不允许错版），在高分辨率下页面要自适应，不能出现标题背景空白，错位情况
• 每一步操作，如保存、更新、审核，都要有提示，如：保存xx成功！
• 检查界面是否有文字错误，避免出现看不懂的文字
• 手机端或PC端图标及标题内容显示不全的，应尽量减少文字，不显示…，让文字显示全