1、对齐

• 文案类：如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 

• 表单类：冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 

• 表格类：表体数据默认的对齐原则： 

    ◦ 文本对齐方式一般为左对齐； 

    ◦ 数值、金额靠右，表头文字右对齐处理； 

    ◦ 合并表头居中显示文字。 

    ◦ 操作列：居左。

3、一致性

• 颜色：网页上颜色不能够滥用，会导致视觉疲劳或无法突出重要内容，如主题色可以用于文字链接、按钮、导航等多处显示。 

• 空间：间距上需要有一致性，规律的排版可以方便设计开发工作和提升用户的页面阅读体验。 

• 文案：文案的使用和排版格式具有统一性可以明确内容层级关系，提升阅读效率。

行宽

• 行宽 / 行高：是指一行字的高度。计算行宽的简单方法，使用 Robert Bringhurst 的方法：行宽 = 字号 x 30。如果定义网站的基础字号为 14px，那么最适宜基础行宽为：14（字号） x 30 = 360px （行宽）。较适宜的宽度为 40-70 个字符。 

• 从生理结构分析，人在阅读文字的时候，理解并传递到大脑的信息是有限的。用户在阅读时，目光左右上下巡视、扫描和阅读，这意味着阅读要求大量的眼球运动。行宽越大，眼睛移动的距离太宽太多。宽度较大，眼动位移较大，读者阅读换行时容易串行。 

• 行宽越短，眼睛阅读折行的次数太多。行数较多，眼动跳跃次数多，读者阅读行时会感觉到文字不连续。

行高

• 行距 / 行高：Photoshop 里为从一行文字的底部到另一行文字底部的间距。但在前端代码实现上， 行距会自动平均分配到文字上下端，因此这里说的行距 / 行高为每行字体占用的高度空间。 

• 行间距：从一行文字的底部到另一行文字顶部的间距。 

• 行距（行高) = 字号 + 行间距 

   ◦ 例如：字号 24px，行距 / 行高为 32px，根据 web 页面平均分配原则，行距就是从文字的顶端上移 4px 到文字底部下移 4px 的距离。

列表页

• 按钮：显示在列表表头上方，独立一行显示，按钮顺序根据优先级排序，最多显示3个按钮，超过3 个用【更多】。如果按钮无主次，可全部使用次级按钮。表头字段必须显示完整。

• 查询条件统一都需要有【重置】按钮。

• 列表页【重置】按钮定义：重置的是查询条件，清空/恢复默认值可根据实际项目需求自定，重置对表格数据不起作用，重置完成后再点击查询才会更改表格显示内容。  

• 点击【重置】后，立即查询

• 查询和重置按钮，默认居右展示（只有1个查询条件的除外，紧挨查询条件展示），如果查询条件填满某一行，放不下就换一行靠右展示。 

• 查询条件默认展示两行，超过两行查询条件自动折叠，展示展开按钮，支持展开和收起查询条件。

• 下拉框支持搜索过滤功能，包括下拉单选和下拉复选框。

• 列表页数据行操作列按钮，统一超链接文字展示，最多展示三个，超过三个自动折叠，显示更多， 常用操作居左，需谨慎操作的按钮突出显示，并且需有二次确认操作。 

• 数据列无法一屏展示，展示水平滚动条时，操作列默认冻结展示。

• 列表页数据表头右上⻆位置，展示列表操作icon，比如页面刷新和列字段管理，可以对列表数据进行管理；

• 表格内容紧凑展示，适配至少两种屏幕分辨率 

• 滑动时，表头固定在顶部

查询条件

下拉选 

1. 不要「全部」选项，想要实现“全部”，不选即可。 

标题展示

1. 前端实现输入框获取焦点时，placeholder自动上移

日期组件

1. 日期选择条件，只支持日期范围或单个日期，原则上不允许同一个页面上交叉使用，若要使用日期范围选择一天，那开始日期和结束日期相同即可

2. 日期范围选择器，如果不需要选择时间，则默认开始日期的默认时间是00:00:00，结束日期的默认时间是23:59:59。该规范涉及到接口规范，协作时跟服务端沟通好

3. 日期组件高度固定，可能引起时间展示不全，暂不管，看用户反馈

每行个数 

1. 固定每个元素的宽度，3个（带日期范围）或4个（不带日期范围）

查询按钮 

1. 当前行放得下，放到最右边 

2. 当前行放不下，放到下一排的最右边 

布局 

1. tab放置位置 

    a. 如果查询条件不同，相当于独立页面，tab放到顶部 

    b. 如果查询条件相同，则tab放在查询区域和（操作按钮+table）中间，居左展示

滚动条 

1. 垂直方向或水平方向，只出现一个滚动条，且样式保持一致 

2. 垂直滚动时，整个内容区域（包括查询、表格）滚动，表格表头固定到顶部时吸住 

3. todo：设置滚动条默认值

表格 

1. 表头、内容紧凑

表单类

• 必填项显示的星号，统一放在title的左边。

• 数据存储、流程切换等情况，正向操作放在右边，取消操作放左边。如在表单填写页、弹窗中。

校验 

1. 所有必填输入框，如果只输入空格，都算没输入，在提交时需要校验。

页面跳转

• 点击新增操作打开表单填写类页面、查看数据表格的某一条详情信息时，如果需要展示内容很少，在一个窗口内能显示完全，可采用模态窗口展示而非独立页面。 

分页器

• 一页就能展示所有数据的情况下，使用一屏展示方案；

• 如果一页不能展示所有数据，使用tab展示方案； 

• 分页/翻页控件默认挨着列表table右下方展示。

按钮

（1）主按钮

主按钮为页面中按钮区最为核心的操作，在日常场景中，主要按钮一般都为新建、编辑、保存这一类正向的操作，强调页面中最为核心的功能，能够让用户一看到主按钮就明白大致在页面中需要如何操作。

但在主按钮的使用中，要遵循以下两个原则： 

• 在页面当中，按钮区域的主按钮最好只有一个，否则会对页面的主要功能造成干扰。

• 并不是每一个页面都需要有主按钮，不要因为源码缺失主按钮而强行加上。因为在实际使用中，时常遇到按钮之间为平级的关系，强行添加，容易造成页面层级混乱。

在主按钮中，按钮状态的设计也会跟随物理世界进行相应的映射，因此在设计时需考虑现实生活中的状态。 

比如用户的悬停状态时，一般都将按钮抬起并亮度增加，其目的是为了提示用户可以点击，而用户在按下时，用加黑来表示用户按下的状态，与现实生活中按钮的状态类似，因此按钮状态应该映射物理世界。

（2）次按钮/标准按钮 

次按钮在页面中出现最为频繁，在日常使用中，如果你不太确定使用何种按钮时，那使用它，大概率没有错。因为它运用广泛，出现频率也最高，因此也被人们称为标准按钮。

（3）文字按钮/链接 

文字按钮为页面中视觉层级较低的按钮形式，因而可以在页面中大面积的重复使用，文字按钮与链接基本一致，且没有太多区分，所以在设计上，文字按钮与链接基本相同。 

文字按钮重复的出现，以表格页面当中的操作列表最为突出，因为表格当中常用的操作最好能够直接展现出来，因此表格中基本都采取文字按钮的形式。

（4）按钮菜单 

按钮菜单为设计中许多操作的集合，通常是将高频的操作以及一些低频的操作进行整合，组成的按钮菜单。这样既能够减少页面元素的冗杂，同时也能够满足业务对于功能的需求。

举个例子，在表格设计当中，B端设计师最常用到的按钮菜单就是新建，这类新建按钮其实是必不可少的，同时业务需要，还需要多个业务按钮进行展开，按钮菜单的出现，帮助用户进行按钮的整理， 同时也满足业务需求。

（5） 危险按钮 

危险按钮在删除操作中最为常见，通常是为了警告用户，这个数据删除不可恢复，让用户谨慎考虑。在常见的删除操作中，都需要用户进行再次确认，避免失误操作。

可能造成损失的操作，特别是破坏性操作，如果不是用户期望点击的按钮，应该尽量远离常用按钮。 

如果此时主按钮放在左边，危险按钮就放右边，反之亦然。