管理系统的UI规范

良好的软件要有好的用户体验。用户体验有很多细节，一是界面，二是交互。好的用户体验能增加用户黏性，提升满意度。
下面说说这些规范：

1. 关于整站风格
   整站的页面风格要统一，列表、表单、按钮、文字尽量用同一种风格。整站应兼容1366 * 768分辨率。

2. 关于表单
   Esc键不应直接退出或关闭表单页面；谨慎使用回车保存功能。
   提交表单时，按钮应处于“繁忙”状态，不能再次提交；提交成功后，应关闭页面，提交失败可再次提交。
   视业务类型定义提交按钮的名称，提交后需要审批的业务，建议按钮定义为：保存并提交；普通的保存业务，建议定义为：保存。
   复杂的输入项，要有相应提示；
   初始化表单时，可默认一些值，如状态，默认为正常。
   表单的内容尽量一页能展示完成，不要出现滚动条，内容过多应按业务分为多个步骤，每个步骤验证信息。

3. 关于列表
   列表页面的布局应尽量通用，如左上显示功能性按钮（新增、导出等），右上显示筛选内容。中间显示列表内容，底部显示分页。
   数据过多时，应该是表格内容进行滚动查看，而不应影响整个页面。
   列表的内容应是比较重要的数据，一些标签、状态应用不同颜色区分。
   原则上，页面显示的数据条数越多越好，避免频繁滚动查看。这些是可以通过布局优化的，比如有些未优化的布局，一整页只能显示4条订单信息，而优化后能显示10条。
   数据内容不多时，应一行一条数据，不应出现换行。
   
   数据内容一行无法展示时，可使用一行两列的形式。两列中，内容一般是相关联的。
   
   同理，一行两列也满足不了时，可使用一行三列，建议不要超过一行三列，内容过多可简化数据
   
   行被点击后，应高亮显示（第二行颜色背景色深一点）
   
   行的按钮，如果有删除业务时，一般文字颜色为红色，且点击后，要弹窗提示是否确认删除。
   单元格的信息很长建议左对齐，如标题；信息短且长度固定，建议居中，如状态、时间；数量、金额信息建议右对齐。
   设计列表时，根据内容多少，设置宽度，正好适应内容最好。如果文字太长，可用...隐藏一部分(CSS可实现)。

4. 关于详情页面
   1)、业务复杂时，详情的内容容易多，而且杂乱。在设计详情页面时，建议最好能对重要信息一目了然，并且信息之间最好有一定关联性。
   
   图片中的详情，询价书编号与询价单位之间上下间隔大约10px，间隔小能显示更多信息，视觉上也不会过于分散。用户一般的视觉习惯是从上往下看，所以越往上的信息，是比较基础和重要的。在这里，左右的数据，具有一定关联性，如编制人与联系方式，整行就是联系信息。询价起始时间和询价截止时间，整行是时间信息。
   2)、信息内容过多时，可把信息分割成多个块，这样看起来会有条理一些。就像一本书，会分为多个章节，一个章节会有很多段落。下图分成了三个块，询价信息、采购需求、备选供应商。
   
   3)、页面中，状态颜色区分，这样一目了然业务的流程。备注信息应占一行。

5. 关于弹出窗口
   窗口尺寸要根据页面内容来，内容少，窗口大，则看起来很空荡，反之则过于拥挤。

6. 关于溯源
   溯源是查出数据的源头，页面中，合理的添加溯源点，能使用户节省很多查询时间。如下图的第二行数据，有个查看合同，这个按钮不加也不影响业务，但是加了用户可以直接在列表查看合同，而不需再点击详情。
   
   该详情页面，有两个溯源点，一个询价详情，一个报价详情。点击即可查看，不需要跳转页面或复制编号进行查看。