0. 前端設計檢查原則
- 【優先參考】阿里巴巴antd規範
持續維護 - 【備用參考】 內部設計規範 https://design.d.com
針對內部場景優化, 標註細緻，但停止維護，在阿里規範未盡解釋方面可參考此規範 - 邊界檢查
![在這裏插入圖片描述]()
測試角度的邊界檢查範圍
1. 瀏覽器標題欄
標題應包含 [頁面標題] - 模塊 - 網站名稱 - [移動版]
內容類頁面應包含內容標題
任務狀態類頁面站點Icon應可反映執行狀態
理由：
- 在一個瀏覽器打開多個選項卡時，可對各個頁面進行區分
- 搜索引擎對各個頁面按標題來進行收錄
- favicon.ico大小(待研究)
- 移動版頁面應增加移動版字樣, 對搜索引擎進行頁面版本判斷有利，也便於用戶判斷
2. 路由跳轉原則
- 瀏覽器前進回退按鈕的支持程度
- 瀏覽器快速切換前進回退按鈕時的請求不應亂序
- 進行路由跳轉時，默認後的頁面地址應該在地址欄進行補全(跳轉後頁面和跳轉前頁面有不同的含義)
跳轉後代表一個確定的頁面
跳轉前代表默認頁面(默認頁面可實現爲用戶可配置)
3. 加載提示
- 接口響應時間較長時應在頁面給出加載中的提示
- 如果已判斷無法完成加載或加載取消，應關閉加載中提示，並給出必要的錯誤提示
4. 輸入部件
注意檢查輸入過長時的交互體驗
密碼輸入框
密碼輸入框建議提供可選的顯示密碼功能
密碼輸入框建議對密碼安全級別進行提示
密碼輸入框必須對用戶輸入的密碼進行字符串輸入規則校驗，複製粘貼進行輸入密碼時建議刪除頭尾不必要的空格和回車，必要時給予用戶提示，以防在粘貼密碼時因多輸入了空格而導致密碼錯誤
描述類輸入框(暱稱，評論), 注意測試對emoji表情的支持, 注意檢查符號表情在win7等低版本系統的兼容性問題
手機輸入框, 建議評估是否需要格式化優化顯示(4-4-3), 是否需要隱藏敏感信息功能(中間四位)
5. 表格組件
不定列數表格
- 列數較少未充滿屏幕時，應可自動拉伸
- 列數過多屏幕裝不下時，應採用滾動條機制
- 注意表格滾動條的粗細(如果從美觀角度確實需要比較細的滾動條, 那麼應考慮擴大焦點範圍)，方面用戶易於選中
- 通常行高應定高, 不隨內容而拉高
- 表格添加和刪除時，表格數據刷新的問題的考量(從用戶希望看到哪個範圍的數據，對服務器性能壓力的影響，一致性方面考量)
批量操作按鈕
- 表格多選刪除應只刪除本頁數據，如確實需要刪除多頁數據，應加另外一個按鈕明確提示刪除多頁，並給出多頁刪除警示確認框，如果非篩選刪除，則可以利用清空功能替代
6. 可拖拽類組件
- 鼠標左鍵進行拖拽操作時，如不予其他快捷鍵衝突，按住鼠標右鍵應該也可以拖拽，按住Ctrl,Shift,Alt鍵盤按鍵不應影響拖拽操作的有效性
- 可拖拽的按鈕應按照習慣顯示十字形鼠標指針
- 拖拽時可考慮對鍵盤上下左右按鈕的支持以支持粗粒度的位置調整，可配置按住Shift按鈕支持細粒度的位置調整
- 注意拖拽時的與其他組件或關鍵定位點的對齊提示設計
- 注意組件的複製粘貼的快捷鍵支持(Ctrl+C Ctrl+P)
- 注意多組件框選的支持設計（shift和鼠標方式, 鼠標框選方式）
- 有標題的組件重命名快捷點(F2, 沒有其他操作衝突時支持雙擊重命名)重命名，Delete刪除等常見鍵盤操作的支持
- 節點的選中效果應加載MouseDown事件(而不是click事件), 拖動應理解爲拖動選中區域
但在多選拖動時應特殊處理爲MouseUp事件 - 鼠標懸停效果與選中效果應有所區分
- 注意檢查快捷鍵的觸發範圍(通常應該是當前獲得焦點的區域)，防止在不該觸發的位置觸發快捷鍵響應(例如焦點已經在畫布外圍時)
- 框選類組件，注意鼠標移出畫布區域後瀏覽器doc區域後的邊界問題處理，應可保持住框選狀態
7. 列表頁
- 列表頁的過濾選項及翻頁選項應出現在瀏覽器url中, 使其可被分享
- 除非確保分頁頁數不多(在未來的一段時間內)，那麼分頁按鈕建議包含最前一頁(頁少時的默認頁碼中的最大頁對此頁碼時最後一頁的提示不夠明顯)，最後一頁，應該包含輸入頁碼(可用於隨機抽查數據)等按鈕
- 注意慢速網絡情況下，快速切換頁碼時的請求響應一致性問題(建議根據優缺點和實際情況選擇實現方式, 哪種更優既選擇策略待討論)
1）可通過生成唯一請求id保證順序
優點:
在用戶明確錯誤操作時，可直接忽略上次操作而選擇其它一頁(通常認爲此種方式概率不高)
2）可通過阻塞用戶點擊保證順序(百度採用此方式)
優點:
可提示用戶當前正在請求，請稍等，稍安勿躁
可避免用戶的無意義操作，造成服務器壓力
8. 目錄樹
原則: 不要偷偷摸摸的幫用戶處理, 應告知
- 目錄樹中的節點複製
- 目錄樹中的節點移動
- 節點重名處理
前端排查重名問題(如果重名, 需給出用戶提示, 並將失敗處理當時的選擇權交給用戶 自動重命名, 手動重命名, 撤銷操作等) 後端只做重名檢查(如果重名則失敗)