前端需求/设计文档自查表

前言

我们不考虑需求的合理性，边界等，仅仅从前端的角度规避一些常见的交互设计或体验的问题，目标只有一个：保质准时上线，不给团队挖坑。

需求文档不需要多么高保真，重点关注:

• 逻辑是否清晰

• 各个状态是否考虑周全

• 表达是否有歧义

• 新功能是否存在关联功能的改造

这只是第一版，后面将根据实际情况持续更新。。。

设计

风格统一

常见的取色，边距，各种状态颜色，与整体风格一致。

icon的统一

保证相似功能或模块的iconfont统一，如无特殊情况，不建议再往iconfont库里面添加新的icon。

icon是否有必要，含义是否明确

Icon 和插画在 UI 上是被拿来帮助人们更了解这个功能的含义，这世界上没有比直接用文字写出来更好的方法，如果你 icon 的存在没有办法帮助用户辨识，请不要放。
一旦你拥有使用 icon 或是插画的欲望，请先确定你的情况符合以下的情境：

• 空间很有限实在放不下文字，必须得用一些比较小的 icon 来表现。

• 这是一个通用的 icon ，完全不需要提示的情况下大家都能了解那是什么（比如表示下载的 icon ）

• 文字实在太多了，有些比较重要的部分需要用插图来吸引人注意。

如果你需要需要一整个系列的 icon 或是插画，确保这些 icon 彼此之间的风格是一致的。

小屏显示

设计在小屏（1366px）上显示情况如何，是否有问题？是否考虑响应式？

滚动条

数据区域超出时，是否会出现滚动条？滚动条是否会影响设计效果。

排版合理

操作区域，内容显示等，排版合理，交互统一。

交互

风格统一

类似的功能交互一致。

动画

某些地方是否需要动画，动画表现形式是否整体统一，开发出来是否自然顺畅，优雅细腻？有没有性能问题？

最好在原型上有所体现或标注。

用户实现一个功能的操作步骤是否最少

区分虚浮下拉和点击下拉的使用场景，同样功能实现，让用户操作尽可能简单快捷。
反例：当前线上的时间选择

从A到B的中间状态

• 点击瞬间

• 进入后无数据是是否有loading

• 是否有过场动画

• 中间过程能否取消

文案一致

文案的句式，用词应该一致准备，文案应该有温度。

icon或菜单等的点击区域

前端自己把控，注意提醒设计预留空间。

功能

权限

是否需要考虑权限，如果有，权限设计是否清晰全面，是否有歧义？各个权限下对应的状态需求文档和设计文档是否有所体现？

数据极限状态

数据为空，溢出时分别怎么显示？如果是数字，是否有范围。

数据的默认排列方式

这个实现应该主要是后台的事。

时间区间选择

时间区间选择是否有范围，是否有不可用日期？

功能边界

当前的需求是否有影响到其他的业务流程，那些模块可能会有风险和遗漏。

表单

• 表单是否有默认值和提示文字？

• 输入过程中，是否有联动的东西？（一个输入框是基于另外一个输入框的）

• 表单博客提交时（数据有误，输入不全，条件不满足等），是否需要将submit按钮disable掉？

• 提交时数据校验规则，错误提示方式。

• 提交成功和失败后的动作。

• 防止表单重复提交。

无图模式

有图片的地方，没有图片的情况下，显示什么？

键盘操作

有些输入框或者表单的地方，是否需要考虑键盘操作。
如高级搜索:按enter键就确定搜索。

多个步骤中途取消

特别是导入导出，上传下载，连续表单。
如：订单导入，分为3步，任何一步放弃了，怎么处理。

操作失败的反馈

表单提交失败，获取信息失败（如订单详情）等。

是否有需要保存用户输入的数据或者进度

页面有多个状态时，刷新后是否要求保存当前操作状态？
如：高级搜索，要求保存用户当前搜索的内容（即刷新后不丢失）

中间状态数据存储对前端开发是否友好

如：之前的智能下单页，是一个可能会出现翻页的可编辑表格，但实际功能是一个表单，翻页时，订单的数据如何存储。

其他

参考（强烈建议前端的童鞋看一看）

• 交互设计自查表的建立：思路与项目实例解析

• 交互设计方案衡量标准的五层总结——阿里鸿影