字体大小


1.主推梯度：顶部菜单16px、左侧菜单14px、正文14px（内容少时考虑使用，留白及呼吸感使人舒适）投票率在87.5%。
2.保留梯度：顶部菜单16px、左侧菜单14px、正文12px（内容多时首选「如表格页」，尽量在内容多的情况下保持一定空间感，减轻操作压力）投票率在12.5%。

注解一：内容区的层级要注意通过板块、分割线、字号梯度拉开
注解二：一个系统只能采用一个梯队 注解三：后台系统采用主推梯度

�
14px.png
14px；投票率87.5%
12px.png
12px；投票率12.5%

列表布局

1.主推梯度：完整板块+线条分隔型，这样可以留出更多的空间给到数据表格呈现 投票率在43.75%；
2.保留梯度：板块化分型（筛选条件和表格数据分隔呈现），这样可以有明显的视觉区分，但也给数据表格呈现的空间大大降低了 投票率在43.75%

注解一：后台系统采用主推梯度

线.png
线条分割型；投票率43.75%
区块.png
区块分割型；投票率43.75%

筛选条件区域

1.区域采用栅格布局方式来实现，推荐1440分辨率下，一行呈现4列；1920分辨率下，一行呈现6列；
2.表单文字label以最长字段进行占位，采用右对齐方式实现；
3.输入框/下拉框高度固定32px；
4.查询按钮以输入框左对齐实现；
5.如果能一行呈现筛选内容，查询按钮紧靠左侧输入框/下拉框对齐；

产品建议： 1.选用对用户决策有意义、操作频次高的属性作为直接展示的组合检索条件，建议数量最好不超过5个（7±2法则）
2.优点：大而全能最大限度避免检索条件疏漏的可用性问题
3.缺点：表单内容过多可能为用户带来繁杂的第一印象，都是重点等于没有重点，增加用户的决策时间，所以同上建议数量最好不超过5个（7±2法则）
注解一：7±2法则：短时记忆能力的研究、人类头脑最好的状态能记忆7±2项信息块，在记忆5-9项信息块后人脑就开始出错了

查询按钮左对齐.png
查询按钮左对齐；投票率50%
查询按钮右对齐.png
查询按钮右对齐；�投票率18.75%
一行左对齐.png
筛选一行时，左对齐; 投票率68.75%
一行右对齐.png
筛选一行时，右对齐；投票率25%
代码实现效果
1.gutter为20px; 栅格间距，单位px，左右平分；
2.lg为6；≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象；
3.xxl为4；≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象；

  1. <Form ref="filterForm" :model="filterForm" :label-width="85" inline class="filter-form">
  2.   <Row :gutter="20">
  3.     <Col :lg="6" :xxl="4">
  4.       <FormItem label="申请单号：" prop="applicationNo">
  5.         <Input v-model="filterForm.applicationNo" clearable placeholder="请输入申请单号" />
  6.       </FormItem>
  7.     </Col>
  8.     <Col :lg="6" :xxl="4">
  9.       <FormItem label="集团编号：" prop="blocCode">
  10.         <Input v-model="filterForm.blocCode" clearable placeholder="请输入集团编号" />
  11.       </FormItem>
  12.     </Col>
  13.     <Col :lg="6" :xxl="4">
  14.       <FormItem label="酒店编号：" prop="hotelVid">
  15.         <Input v-model="filterForm.hotelVid" clearable placeholder="请输入酒店编号" />
  16.       </FormItem>
  17.     </Col>
  18.     <Col :lg="6" :xxl="4">
  19.       <FormItem label="酒店名称：" prop="hotelName">
  20.         <Input v-model="filterForm.hotelName" clearable placeholder="请输入酒店名称" />
  21.       </FormItem>
  22.     </Col>
  23.     <Col :lg="6" :xxl="4">
  24.       <FormItem label="商户渠道：" prop="payChannelCode">
  25.         <Select v-model="filterForm.payChannelCode" clearable placeholder="请选择商户渠道">
  26.           <Option v-for="item in payChannelItems" :key="item.payChannelCode" :value="item.payChannelCode">{{ item.payChannelName }}</Option>
  27.         </Select>
  28.       </FormItem>
  29.     </Col>
  30.     <Col :lg="6" :xxl="4">
  31.       <FormItem label="渠道单号：" prop="channelApplicationNo">
  32.         <Input v-model="filterForm.channelApplicationNo" clearable placeholder="请输入渠道单号" />
  33.       </FormItem>
  34.     </Col>
  35.     <Col :lg="6" :xxl="4">
  36.       <FormItem label="商户编号：" prop="merchantNo">
  37.         <Input v-model="filterForm.merchantNo" clearable placeholder="请输入商户编号" />
  38.       </FormItem>
  39.     </Col>
  40.     <Col :lg="6" :xxl="4">
  41.       <FormItem label="商户签约名称：" prop="merchantSignName">
  42.         <Input v-model="filterForm.merchantSignName" clearable placeholder="请输入商户签约名称" />
  43.       </FormItem>
  44.     </Col>
  45.     <Col :lg="6" :xxl="4">
  46.       <FormItem label="申请时间：">
  47.         <DatePicker v-model="dateRange" type="daterange" format="yyyy/MM/dd" clearable transfer :editable="false" placeholder="请选择申请时间"></DatePicker>
  48.       </FormItem>
  49.     </Col>
  50.     <Col :lg="6" :xxl="4">
  51.       <FormItem label="申请状态：" prop="applicationState">
  52.         <Select v-model="filterForm.applicationState" clearable placeholder="请选择申请状态">
  53.           <Option v-for="item in applyStateItems" :key="item.value" :value="item.value">{{ item.label }}</Option>
  54.         </Select>
  55.       </FormItem>
  56.     </Col>
  57.     <Col :lg="6" :xxl="4">
  58.       <FormItem label="申请人：" prop="applicantId">
  59.         <Select v-model="filterForm.applicantId" filterable clearable placeholder="请选择申请人">
  60.           <Option v-for="item in authorityUserItems" :key="item.userId" :value="item.userId">{{ item.userName }}</Option>
  61.         </Select>
  62.       </FormItem>
  63.     </Col>
  64.     <Col :lg="12" :xxl="8">
  65.       <FormItem label="到期时间：">
  66.         <div style="display: flex;">
  67.           <DatePicker
  68.                       style="width: 50%;"
  69.                       :value="filterForm.startDate"
  70.                       format="yyyy-MM-dd"
  71.                       clearable
  72.                       @on-change="handleStartDateChange"
  73.                       placeholder="请选择起始时间">
  74.           </DatePicker>
  75.           <span style="width: 5%; text-align: center;" class="form-item__separator">-</span>
  76.           <DatePicker
  77.                       style="width: 50%;"
  78.                       :value="filterForm.endDate"
  79.                       format="yyyy-MM-dd"
  80.                       clearable
  81.                       @on-change="handleEndDateChange"
  82.                       placeholder="请选择截止时间">
  83.           </DatePicker>
  84.         </div>
  85.       </FormItem>  
  86.     </Col>
  87.     <Col :lg="6" :xxl="4">
  88.       <FormItem label="申请单号：" prop="applicationNo">
  89.         <Input v-model="filterForm.applicationNo" clearable placeholder="请输入申请单号" />
  90.       </FormItem>
  91.     </Col>
  92.     <Col :lg="6" :xxl="4">
  93.       <div class="action-wrapper">
  94.         <Button type="primary" class="action-button mr-10" @click="handleQueryClick">查询</Button>
  95.         <Button class="action-button" @click="handleResetClick">重置</Button>
  96.       </div>
  97.     </Col>
  98.   </Row>
  99.   <Form>

页面呈现效果
image.png
1920分辨率
image.png
1440分辨率

表格呈现区域

1.主推梯度：无纵向线，文本左对齐，比较型数值（金额）右对齐，操作按钮左对齐，投票率在62.5%
2.保留梯度：有纵向线，居中对齐，比较型数值（金额）右对齐，操作按钮居中对齐，投票率在25%
注: 每一列的宽度要按照内容宽度去指定，一般只能有一列是自适应宽度的！！！【老板要求】

注解一：后台系统采用主推梯度 注释二：不使用斑马线。数据量不大且易分辨的情况下，斑马线在很多时候也是没有必要的，因为它们是同一类数据，而且水平分割线就已经能够明显区隔 注释三：减少图形元素的使用。去掉不必要的装饰和颜色，如icon、标签等，虽然能够帮助组织数据、更直观的传达信息，但物极必反，少即是多，要注意克制这些元素的使用。标签能用线性就不用面性，做到轻盈，否则表格中最重的就是标签。 � 产品建议： 1.控制列数:基于对实际业务需求、目标用户诉求及其行为的理解，列数尽量控制在7±2，列举用户更为关注的数据，用户需要的非重点、辅助性信息可以在详情中展示
注解一：7±2法则：短时记忆能力的研究、人类头脑最好的状态能记忆7±2项信息块，在记忆5-9项信息块后人脑就开始出错了
注解二：席克定律：一个人面临的选择越多，做出决定所需要的时间就越长

2.自定义列（列筛选）：在默认情况下仅展示最常用、最重要的几个指标
这样做的好处：
A.用户能在表格上方看到所有的指标名称，避免了原来需要横向拖拽才能浏览到所有指标的情况
B.用户可以根据自己的需要，自由的选择显示所需指标，隐藏不必要指标，减少干扰
需注意:系统应记住用户上一次的自定义列设置，减少用户重复操作

3.精简表头：标题需精炼准确，在准确表达标题的情况下减少不必要的用词，以达到节省表格头部空间和减轻视觉压力的作用

4.定义专有名词：对于比较复杂的表头，可以定义一个专有名词，辅以“question-circle”icon展示，鼠标hover上去对专业术语或用户不常见的名词给予该字段的详细解释，同时满足新手、普通、专家用户的需求

单行操作（行内操作）：对标表格操作列，常见的显性与隐性两种方式
A.显性操作:操作项显示在行内，直观明了
注解一：文字按钮操作项一般不多于三个，图标按钮不多于四个时，操作项跟在行条目后面； 当超过时，建议将相对低频操作选项折叠收起，点击”更多”下拉显示。操作按钮致灰时，鼠标选中可显示原因
B.隐性操作，鼠标悬停时才显示操作项，界面简洁，留更多的空间给需要查看的数据内容，减轻空间压力，减少干扰
如果行操作不那么重要，或者说行操作过于啰嗦影响用户阅读时，可将所有的操作进行隐藏，当用户鼠标悬停时进行展开所有操作。这种方式能最大程度上满足用户快速查看与编辑的需求，但是在实际使用中，用户的初次使用门槛较高，需要有一定的学习成本不常用

2.批量操作：适用于数据量较大的表格，通常把操作放在表外部上方，这样操作更便捷，同时便于批处理和单个操作。批处理操作模式允许用户对一行或多行对象执行操作，通常与复选框操作配合使用，并在选中复选框后激活表上方操作按钮，如删除、批准、拒绝、复制之类的操作，这将节省用户时间，避免重复对多行进行相同操作。

3.全局操作：统揽全局，无需选择数据内容即可进行的操作，常见的【新增】、【导入/导出】

�

无纵向线.png
无纵向线，左对齐；投票率：62.5%
有纵向线.png
有纵向线，居中对齐；投票率：25%

按钮样式

1.“查询”采用type=primary，“重置”采用type=default
2.表格顶部右侧按钮采用type=default设置，宽度自适应
3.操作区域的按钮采用纯文字呈现

1.高度：与输入框/下拉框/搜索框保持一致（32px）
2.宽度：
·四字及以下最小宽度68px
·四字以上内容区域跟随字数变化，icon算在内容区里面

�