1 AntV

（1）节点展示：

• 异常/正常节点颜色区分；
• 可以对节点进行归类，combo方式。

（2）节点交互：比如点击某个tab之后，当前节点可以高亮，并且与之关联的边也高亮。

（3）对于每一个图而言，顶部可以给出重要的结论。

（4）数字展示：对于敏感数字，考虑等宽字体，向右对齐。

比如trace id，除了展示美化之外，也可以方便用户一目了然通过数字长短来进行比较大小。

（5）颜色：设计语言-色板分类

色板生成工具，同色系：工具1、工具2

（6）多级详情信息，抽屉展示

（7）表格/列表信息展示，考虑使用图形化，比如icon，progress

（8）标题太长怎么办

（9）图例和工具栏

• 从左到右看 ===》左上方

• 从上到下看 ===》右上方

• 位置：符合从左至右，从上至下的阅读习惯

• 增加快捷键

2 G6 & Graphin

Graphin：用G6封装的react组件库，但默认值支持circle节点类型。

G6 图表示例

3 Ant Design

（1）数据展示：表格，列表

• 批量操作，放在底部

（2）表单：表单页

数目多或者少的时候，一些设计模版，比如分页、table、form list、collapse+抽屉

（3）圆角：8px的倍数增加

（4）结果页、异常页、空状态：需要给一下用户 反馈+操作

• 设计模式 - 结果页

4 布局例子

（1）graphin 网络安全解放方案

（2）卡片式/列表式，头部放一些 职能决策+总指标卡

5 工具

（1）即时设计ui工具

（2）antd主题编辑器，可以查看页面布局和样式