统一性
- 设计风格
统一设计风格，定义全局的CSS变量
1.1.1. Color system
1.1.2. Gradient
1.1.3. Spacing
1.1.4. Links
1.1.5. Paragraphs
1.1.6. Container
1.1.7. Typography
1.1.8. Forms
1.1.9. Buttons
1.2.1. Tables
1.2.2. Modals
1.2.3. Toasts
1.2.4. Tooltips
1.2.5. Pagination
1.2.6. Dropdowns
1.2.7. Placeholders
1.2.8. Alerts
1.2.9. ...
2. 数据展示
提供良好的阅读/浏览体验
2.1.1. 数据超出盒子展示 ... 省略，加title或者tooltip显示全部内容。
2.1.2. 图片加载失败展示缺省图片。
2.1.3. 没有数据的字符串展示缺省字符，例如： -- 不要空白。
2.1.4. 货币单位、千分位、精度要统一。
2.1.5. 时间显示格式、提交格式、时区处理统一。
2.1.6. 暂无数据 No Data 处理。
2.1.7. 我是有底线的，这个在下拉加载列表管用。
3. 操作及提示
每个操作/交互，都应该有反馈
3.1.1. 确认对话框
3.1.2. 错误提示框
3.1.3. 成功提示框
3.1.4. 加载提示框
3.1.5. 全局锁屏或加载风格
3.1.6. 操作超时时间
4. 专业词汇
方便团队沟通，变量命名
3.1.1. 词汇表
3.1.2. 大小写，标点符号等。
5. 分辨率适配
满足不同设备、不同人群
5.1.1. 是否支持静态布局或者响应式布局
5.1.2. 是否支持弹性布局（移动端，建议使用弹性布局）
5.1.3. 是否支持字体放大缩小
表单
大家都很不愿意填太多表单的，请做好一点吧
- 输入框
-
1.1. 输入提示
1.1.1. 最基本的是label标签，表达要准确，简短。 1.1.2. 需要有placeholder 1.1.3. 如有必要还可以加help链接、tooltip提示、底部文字描述 1.1.4. 必填字段提示 1.1.5. 文件输入框，需要提示上传的文件类型、文件大小。 -
1.2. 默认值
1.2.1. 默认值是一个提升交互体验的一个很重要的小技巧。 1.2.2. 填表单是最烦的，特别是长表单，能不能不用填这么多？如果不行，可不可以用默认值？ -
1.3. 正确输入
1.3.1. 首先要保证正确输入，这个是最基本的。 1.3.2. 错误校验，非法的输入要给出友好的提示。 1.3.3. 输入类型限制，包括数据类型，不同的平台上还可以设置键盘类型，比如数字键盘、26键键盘。 1.3.4. 有效输入长度，最小最大长度。最大长度很容易被忽略，这个最容易出错，通常表现在数据库长度不够。 1.3.5. 正则表达式，一些特殊场景或者常用的一些规则校验。 -
1.4. 现场保护
1.4.1. 表单操作很可能会被意外中断，现场保护能让用户再次回来的时候接着填写。 -
1.5. 交互反馈
1.5.1. focus、blur、disabled、readonly、hover 等各种交互状态需要正确表达出来。 1.5.2. 输入错误状态 1.5.3. loading状态， 比如下拉选择项异步加载中。 1.5.4. 光标自动focus。 1.5.5. 自动完成、输入历史等。 1.5.6. 快速清除输入数据，比如提供clear按钮。 1.5.7. 动态显示当前输入长度/最大输入长度，通常在多行输入框上体现。 1.5.8. 键盘操作，tab键切换光标，anter键提交等。 1.5.9. 脏值检测。 1.6.1. 避免键盘遮挡，输入完成自动收回。 -
1.6. 无障碍
1.6.1. 有些特殊的应用会要求满足特殊人群的使用。比如残障人士，有一些政府的应用是硬性的。 -
1.7. 安全性
1.7.1. 密码输入框，APP上面还会自定义键盘。 1.7.2. 防SQL注入。 1.7.3. 输入数据转义，防XSS攻击。 -
1.8. 数据处理
1.8.1. 图片上传压缩比例，主要考虑APP，WEB上不好处理。 1.8.2. 数据是否需要统一大小写转换 1.8.3. 数据前后空格trim处理 1.8.4. 密码加密 1.8.5. 电话号码前面自动补区号 1.8.6. 元转分，分转元 1.8.7. 时间提交格式转换
组件 / 控件
细节拉满，不要吝啬你的代码，多写一点
-
链接
1.1.1. hover经过样式，带下划线或者其他提高对比度的方式 1.1.2. 鼠标手势变成可点击状态 1.1.3. 颜色一般高亮，区别于周围不可以点击的文本 1.1.4. 非文本链接，比如图片，需要加上alt属性
2. 按钮
2.1.0. 状态显示（active、disabled、fucus、keydown、keyup、loading、hover）
2.1.1. 不同状态对应的外观。
-
2.2. 交互反馈
2.2.1. 防抖动/节流，比如提交动作，需要做防抖动处理，避免重复提交。 2.2.2. 鼠标手势，不同状态对应需要显示不同的鼠标手势。 2.2.3. 点击之后，如果需要长时间的等待，需要加loading。 2.2.4. 返回按钮，看表单重要性，是否需要加警告确认框，避免误点退出表单编辑。 2.2.5. 删除按钮，通常情况下，需要先询问确认一次。 2.2.6. 保存按钮，结合表单脏值检测，判断是否需要提交表单，或者是禁用激活按钮来控制。 2.2.7. 键盘支持。
-
图片
3.1.1. 无图处理，没有图片或者加载失败 3.1.2. 加上alt属性 3.1.3. 图片是否需要裁剪，有没有溢出，考虑最佳展现方式 3.1.4. 图片点击是否可以查看放大图
-
列表
4.1.1. hover经过item样式需要区别于其他的 4.1.2. active某个item的样式要区别于其他的 4.1.3. 可点击范围要扩大到整个item，通常情况下a链接容易忽略可点击范围
界面 / 路由 / 操作
无缝衔接，众享丝滑
-
进入页面
1.1.1. 先确认是否需要锁屏加载？ 1.1.2. 如有锁屏加载，就必须得有解锁。考虑异常情况，包括错误、超时等。 -
操作及提示
2.1.1. 下拉刷新，正常情况下，在APP上一些展示页面都需要做。比如：订单详情，列表。 2.1.2. 上拉加载更多 2.1.3. 表单页面提交，需要锁屏，提交按钮loading中。 2.1.4. 弹窗需要考虑是否需要防止误点关闭。 -
返回/离开
3.1.1. 是否需要清除页面数据？特别是APP端内存非常有限。 3.1.2. 返回/离开之前是否需要检查警告有未完成的操作？ -
路由管理
4.1.1. 正确使用push、replace、goback，不同端路由栈规则不一，比如小程序路由栈好像默认最深是8层还是9层，超过可能会出问题。 4.1.2. 路由是否正确返回。特殊场景，主要在有步骤的界面，最后一个步骤成功之后，最好不能再返回到中间某一步，应该回到主页或者第一步。
异常
死也要体面一点
-
服务器异常
1.1.1. 状态码5XX，统一处理风格 1.1.2. 状态码4XX，统一处理风格 1.1.3. 状态码502，统一处理风格 1.1.4. 服务器升级中 -
客户端异常
2.1.1. 错误信息收集上报。 2.1.2. 避免空指针异常，导致应用崩溃。 -
操作被中断
3.1.1. 表单是否需要现场保护，中断之后恢复。 3.1.2. http请求应该被取消。
网络
大哥5G套餐了解一下
-
网络状态
1.1.1. 网络正常或者断开提醒。 1.1.2. 弱网环境提醒。 1.1.3. 是否确认使用移动网络？个别场景
性能
争取跟领导多要点时间提升性能，顺便提升自己
1. Lighthouse 指标优化
2. 组件优化
3. 缓存优化
兼容性
老一辈前端的最有发言权
-
浏览器兼容
1.1.1. 低版本浏览器兼容提醒 1.1.2. 不同浏览器样式兼容检查 1.1.3. 不同浏览器JS兼容检查
平台特性
个性没有什么不好，就是苦了程序员
-
IOS
1.1.1. 刘海屏处理 1.1.2. 底部tabbar处理
