文档中心 > 扩展应用

设计自查

更新时间：2025/02/08 访问次数：382

使用目标
审核机制
规范组件下载

自查表中呈现的是较为大颗粒度的一些规范自查内容，帮助规避一些较为明显的规范层面的问题。更细维度的规范需在设计过程中参考设计规范，以及本文档中“规范组件下载”。

使用目标

通过对照下方表格的自查标准进行设计规范的基础走查，解决较为基础的规范问题，在提交审核后可以有效提高审核效率及通过率，降低审核中规范相关问题的发生频次。

审核机制

为提高设计规范一致性及沟通效率，设计验收前需服务商根据以下自查表内容，优先完成内部规范自查工作。初期试用阶段，通过率达到85%以上可以进入正式的设计验收流程。

说明：如遇问题可联系对接人，会及时跟进并更新规则。

通用元素

说明：规则较通用，组件级可参考下方具体要求。

分类	检查项	自查标准
文字	字号及行高	严格按字体规范使用（每个字号均有对应行高），不允许额外增加其他字号，不允许调整行高。
文字	字体	常规内容使用字系统默认字体，数字字体使用阿里巴巴普惠体102，氛围艺术字体只支持钉钉进步体。
颜色	中性色	严格按照规范使用，不允许自行添加颜色。
颜色	其他颜色	使用规范中的主题色、功能色，遵守每个颜色对应的使用场景规范。
图标	场景	面性图标一般不作为按钮且不并列使用，而是搭配其他文字或卡片形成内容组的形式；线性图标可并列使用作为按钮组。
	风格	针对场景规范选择符合场景的线性或面性图标，颜色、图标风格符合规范，提供矢量图。
	尺寸	绘制图形时需按照图标规范提供的绘制区域进行绘制。
	颜色	根据使用场景选择中性色或规范所提供的色系。
	间距	线性图标组横向间距为24px。
缺省图	样式	使用组件库提供的缺省图内容。
缺省图	样式	确保页面都有空状态的展示方式。
插画	场景	若非必须，不使用插画。
标签	标签	选择的标签样式需符合场景心智，样式与规范保持一致，不允许自己创造样式和颜色，不允许调整标签字号及间距等。
按钮	样式	跟规范保持一致，注意按钮的层级选择、用色、形状、禁用场景表达等。
按钮	组合形式	跟规范保持一致，注意按钮的优先级和主按钮-次按钮的方向以及按钮间的间距等细节，原则上排序遵循“左主右副”，优先级从高到低；同一组中主按钮、模块按钮均只允许出现1个，不可堆砌使用。

框架层

分类	检查项	自查标准
页面自适应	输出尺寸	输出宽度为720px的设计稿，设计过程中需考虑自适应方案。
页面自适应	极限尺寸	对于表格、多列分栏等场景，需给出几个临界分辨率下的适配方案及内容展示策略。
布局及流转	布局	尽量使用规范中的布局形式，若非必须不创新。
	布局	最需要用户关注的内容位于页面明显位置，必要信息能够得到突出。
	交互及流转	选择适合的下一级内容打开方式，如下钻、弹窗、抽屉、页面刷新、新开页等。
颜色	模块背景色	若非必须，不建议使用；禁止出现大面积重色，使用规范范围内的浅色较轻量的颜色，有类似模块尽量与线上保持一致；需注意要跟页面背景能有差异，不会融到一起看不清分割。
颜色	页面底色	页面背景色#FFFFFF。
导航	面包屑	面包屑用法及样式与规范保持一致，存在于有需要的二级页及更下钻的页面。
导航	功能区导航	跟示例页面规范保持一致。
结果反馈	反馈	对于用户的所有有结果的操作行为给予适合的反馈方式。
引导	引导方式	跟规范保持一致，依据引导的强弱程度选择适合的引导形式，如：不同层级的新手引导、加载提示、刷新提示、toast提示等。

内容区

分类	检查项	自查标准
布局	对齐	对齐关系合理、美观、视觉动线流畅。
布局	极限情况	各内容的临界场景考虑清晰，提供解决方案。
间距	不同组元素	有规范的按照微应用规范，没有硬性规范的采用3的倍数，大组间以18px、24px和36px为最优，小组内一般为12px、9px、6px、3px，间距越小，相邻元素的关系越紧密。
间距	同组元素	一般由相同的常见组件构成，组内各元素的间距参考常见组件的具体规范。
文字	字号	1）模块内若有二级标题字号为14px medium； 2）核心正文、大段浏览性文字为14px； 3）辅助性文字12px；
文字	颜色	1）原则上，同一模块内的中性色以不超过3种色值为佳，且不可大量使用非中性色； 2）需要突出的功能性内容可使用品牌色及场景对应的适合的功能色；
卡片	间距	内容距离卡片边缘的上下左右距离建议为12px、18px、24px三选一，卡片越大，padding建议越大。
	间距	两个卡片间的间距一般为18px。
	圆角	根据卡片大小和嵌套关系可选择6px、9px、12px。

常见组件

分类	检查项	自查标准
通用	状态	各组件的normal、hover、selected、disable等状态是否表述清晰。
通用	场景	组件的选用符合场景诉求。
Tab	样式	根据场景选择合理的tab形式，并跟规范保持一致。
	层级	tab层级由高到低选择样式。
	间距	样式间距具体参考组件规范。
筛选	场景	根据场景选择合适的筛选方式。
	场景	若有跟tab的联动关系，或筛选内存在联动关系，确保在信息层级表述上清晰无歧义。
	样式	使用组件规范的筛选组件。
翻页器	样式	根据展示的内容量级及业务诉求，选择适合的分页器样式及一页展示的内容条数。
	间距	分页器跟上内容间距12px。
	隐藏	当内容只有一页（可上下滚动），分页器隐藏不展示。
单选/复选	样式	正确选用单选和多选的选择器样式。
单选/复选	间距	单选器和多选器相邻两个选项间的左右距离为18px，文字和选框（icon）的间距为6px。
分割线	颜色	#F0F2FA。
分割线	长度	一般长度跟随内容宽度定，不通栏。
列表	样式	使用规范表格组件，表头#F7F8FA、9px圆角，横向分割线#F0F2FA，不使用纵向分割线，详细规范参见组件规范。
	自适应	考虑自适应场景下的展示，如锁列的样式；哪些为固定列哪些做自适应等等，需要进行标注。
	对齐	各列内容跟标题的对齐方式符合规范及用户使用习惯，如商品标题左对齐，金额右对齐等。
	按钮	表格内操作列按钮的展示逻辑清晰（比如按钮的隐藏/置灰/顺序等逻辑明确清晰）。
	按钮	未进行勾选时，批量操作等相关案禁用，hover按钮时展示原因。
表单	对齐	明确的对齐原则、页面展示动线清晰流畅。
	间距	两个表单项的纵向间距为16px，标题和内容（input/select组件）的横向间距为16px。
	状态	各表单项的交互逻辑清晰，报错、置灰禁用等样式及链路完善。
	必填	必填项后增加*，且与文案间距3px。
	未填	未填写时，输入框内有暗文提示。
	未填	必填项未填写完整时，提交类按钮禁用且hover时Tooltips给予提示。
	按钮	表单全局按钮一般页面置底悬浮（不在服务上开放坑位内，由官方控制）。
	按钮	内部模块按钮跟在模块下方，按钮组左侧第一个按钮跟输入框左对齐。除【下一页】按钮以外场景，主按钮均在左侧。
步骤条	场景	选用的步骤条类型符合场景特点，样式符合规范。
弹窗	位置	在容器上下左右居中的位置。
	样式	结合场景及弹窗内容选择适合的弹窗类型及尺寸,宽度最大560px，高度最高480px。
	按钮组	弹窗按钮的位置正确，按钮组按钮的顺序从左到右重要性依次降低，一般【确定】按钮在左侧，【取消】按钮在右侧。

文案

分类	检查项	自查标准
数字	字体	数字字体应使用规范字体：Alibaba Sans 102。
数字	字体	金额、数量、日期时间及其他数字相关内容。