web开发功能设计札记

0. 前端设计检查原则

1. 【优先参考】阿里巴巴antd规范
   持续维护
2. 【备用参考】 内部设计规范 https://design.d.com
   针对内部场景优化, 标注细致，但停止维护，在阿里规范未尽解释方面可参考此规范
3. 边界检查
   

测试角度的边界检查范围

1. 浏览器标题栏

标题应包含 [页面标题] - 模块 - 网站名称 - [移动版]

内容类页面应包含内容标题
任务状态类页面站点Icon应可反映执行状态

理由：

1. 在一个浏览器打开多个选项卡时，可对各个页面进行区分
2. 搜索引擎对各个页面按标题来进行收录
3. favicon.ico大小(待研究)
4. 移动版页面应增加移动版字样, 对搜索引擎进行页面版本判断有利，也便于用户判断

百度SEO标题规范

2. 路由跳转原则

1. 浏览器前进回退按钮的支持程度
2. 浏览器快速切换前进回退按钮时的请求不应乱序
3. 进行路由跳转时，默认后的页面地址应该在地址栏进行补全(跳转后页面和跳转前页面有不同的含义)
   跳转后代表一个确定的页面
   跳转前代表默认页面(默认页面可实现为用户可配置)

3. 加载提示

1. 接口响应时间较长时应在页面给出加载中的提示
2. 如果已判断无法完成加载或加载取消，应关闭加载中提示，并给出必要的错误提示

4. 输入部件

注意检查输入过长时的交互体验

密码输入框
密码输入框建议提供可选的显示密码功能
密码输入框建议对密码安全级别进行提示
密码输入框必须对用户输入的密码进行字符串输入规则校验，复制粘贴进行输入密码时建议删除头尾不必要的空格和回车，必要时给予用户提示，以防在粘贴密码时因多输入了空格而导致密码错误

描述类输入框(昵称，评论), 注意测试对emoji表情的支持, 注意检查符号表情在win7等低版本系统的兼容性问题
手机输入框, 建议评估是否需要格式化优化显示(4-4-3), 是否需要隐藏敏感信息功能(中间四位)

5. 表格组件

不定列数表格

1. 列数较少未充满屏幕时，应可自动拉伸
2. 列数过多屏幕装不下时，应采用滚动条机制
3. 注意表格滚动条的粗细(如果从美观角度确实需要比较细的滚动条, 那么应考虑扩大焦点范围)，方面用户易于选中
4. 通常行高应定高, 不随内容而拉高
5. 表格添加和删除时，表格数据刷新的问题的考量(从用户希望看到哪个范围的数据，对服务器性能压力的影响，一致性方面考量)

批量操作按钮

1. 表格多选删除应只删除本页数据，如确实需要删除多页数据，应加另外一个按钮明确提示删除多页，并给出多页删除警示确认框，如果非筛选删除，则可以利用清空功能替代

6. 可拖拽类组件

1. 鼠标左键进行拖拽操作时，如不予其他快捷键冲突，按住鼠标右键应该也可以拖拽，按住Ctrl,Shift,Alt键盘按键不应影响拖拽操作的有效性
2. 可拖拽的按钮应按照习惯显示十字形鼠标指针
3. 拖拽时可考虑对键盘上下左右按钮的支持以支持粗粒度的位置调整，可配置按住Shift按钮支持细粒度的位置调整
4. 注意拖拽时的与其他组件或关键定位点的对齐提示设计
5. 注意组件的复制粘贴的快捷键支持(Ctrl+C Ctrl+P)
6. 注意多组件框选的支持设计（shift和鼠标方式, 鼠标框选方式）
7. 有标题的组件重命名快捷点(F2, 没有其他操作冲突时支持双击重命名)重命名，Delete删除等常见键盘操作的支持
8. 节点的选中效果应加载MouseDown事件(而不是click事件), 拖动应理解为拖动选中区域
   但在多选拖动时应特殊处理为MouseUp事件
9. 鼠标悬停效果与选中效果应有所区分
10. 注意检查快捷键的触发范围(通常应该是当前获得焦点的区域)，防止在不该触发的位置触发快捷键响应(例如焦点已经在画布外围时)
11. 框选类组件，注意鼠标移出画布区域后浏览器doc区域后的边界问题处理，应可保持住框选状态

7. 列表页

1. 列表页的过滤选项及翻页选项应出现在浏览器url中, 使其可被分享
2. 除非确保分页页数不多(在未来的一段时间内)，那么分页按钮建议包含最前一页(页少时的默认页码中的最大页对此页码时最后一页的提示不够明显)，最后一页，应该包含输入页码(可用于随机抽查数据)等按钮
3. 注意慢速网络情况下，快速切换页码时的请求响应一致性问题(建议根据优缺点和实际情况选择实现方式, 哪种更优既选择策略待讨论)
   1）可通过生成唯一请求id保证顺序
   优点:
   在用户明确错误操作时，可直接忽略上次操作而选择其它一页(通常认为此种方式概率不高)
   2）可通过阻塞用户点击保证顺序(百度采用此方式)
   优点:
   可提示用户当前正在请求，请稍等，稍安勿躁
   可避免用户的无意义操作，造成服务器压力

8. 目录树

原则: 不要偷偷摸摸的帮用户处理, 应告知

1. 目录树中的节点复制
2. 目录树中的节点移动
3. 节点重名处理
   前端排查重名问题(如果重名, 需给出用户提示, 并将失败处理当时的选择权交给用户 自动重命名, 手动重命名, 撤销操作等) 后端只做重名检查(如果重名则失败)