做页面前,多页面的逻辑的大概的理解,否则很容易做错或漏做功能。比如
- 判断内容是动态的(内容运营或用户创建的内容),还是固定的。
- 判断哪些是链接。
- 判断哪些是列表,PC的话,是否需要分页;移动端,是否是会做下拉无限加载。
- 链接要用
a
。 - 用合适表单的元素。4个及以下选项的选择用
radio
或checkbox
, 4个以上的用select
。单行文本用input[type=text]
, 多行文本用textarea
。
- 类名需要符合 BEM 命名法。
- 类名起名参考 CSS 类名起名参考。
- 不要用拼音。
- 用英文,拼写要正确。
- 是否有漏做的功能。
- 链接和按钮的 hover(PC) 或 active(手机) 效果。
- 多 Tab(选项卡)下每个 Tab 下的内容。
- 动态内容(内容运营或用户创建的内容)
- 单行的文本内容,如果文字太长,是否会导致换行,从而导致样式错乱。 一般用超出隐藏(text-overflow)来做。如果用超出隐藏,要给元素设置足够的高度,否则可能会出现,文字上面有部分隐藏。
- 图片是否会拉伸变形。主要是用户上传的图片。
- 需要设置图片的最大宽度。
- 给动态的内容,设置了固定的宽高。如果内容溢出,会导致后面元素与动态内容发生重叠。
- 是否有漏做的功能。
- 调用接口,错误和成功的提示。
- 表单的验证。
- 非空。
- 格式。如:手机,邮箱,网址。
- 逻辑关系。如:结束时间要晚于开始时间。人数不能是负数和小数。
- 哪些元素是链接,链接的跳转地址是否正确。
- 开关,单选,多选状态变化时,有的导致有些元素显示状态的变化。
- 手机上的列表,是否做了下拉无限加载。
设计稿上可能会漏掉这些功能。
- 加载数据,提交数据时有
加载中
的提示。 - 用户的交互,成功后,需要给用户反馈。如 提交表单 成功后,显示 操作成功。
- 用户执行某些删除操作,需要用户再次确认,来避免误删。
- 新增表单避免用户二次提交。可以让按钮文字变为提交中,按钮不能点。
- 列表没有数据时的显示内容。可以显示 暂无数据。
- 金额的标识。前面有
¥
或后面有元
。