窥见匠心：带你细看 ApiCatcher 桌面端的用户体验设计
ApiCatcher 致力于成为一款让用户称赞"好用"的 HTTPS 抓包和调试工具，目前已支持 iOS、macOS 和 Windows 三个平台。
我们在做 ApiCatcher 桌面端产品设计时，也考虑了很多细节上的用户体验。 这篇博客跟大家分享，桌面端为了让查看请求更"愉悦"，我们做了哪些细节上的设计。
我们将请求信息和响应信息放在一个组件内平等显示，不需要切换Tab，这能够一览整个请求，信息内聚。 与 iOS 不同，iOS 设备屏幕小，使用 Tab 切换是更好的选择，而电脑屏幕大，不切换Tab更能发挥出屏幕大的优势。
我们将请求详情设计为通用的组件，让请求历史页面、收藏页面、API文档页面，都可以复用这个组件。 请求详情组件里面的每个卡片也都是独立的小组件设计，例如用于显示请求/响应Body的卡片。 这种设计不仅让代码更具扩展性、更健康，也为用户带来了一致的体验，无论是在请求历史页面查看请求详情， 还是在收藏页面查看请求详情，或是API文档页面查看请求详情，都是一致的体验。 无论在请求详情组件，还是在请求重放组件，查看请求/响应 Body 也都是一致的体验。 通过一个个小组件组成大组件，大组件组成页面，就像搭积木一样的设计。
如果你觉得这样布局会让 Body 视图宽度变窄，不好阅读JSON，我们做了这些细节设计：
- 请求详情标题左侧我们加了点击可以展开/收起请求历史列表栏的ICON，这样可以把页面更多空间用来展示请求详情。
- 如果你觉得这样宽度还是不够，我们在 Body 卡片上加了全屏 ICON，点击可以打开独立的窗口预览整个 Body。
全屏独立窗口预览 Body 的设计：
- 可以设置自动换行取消水平滚动，或是保持水平滚动不自动换行。
- 提供行号，可以折叠 JSON Path。
- 可搜索并高亮搜索结果。
为了方便对比多个请求，我们在请求详情组件的右上角添加了"独立窗口" ICON，点击会用独立窗口展示当前请求详情。
当然，如果是想对比两个请求的请求 Body 或响应 Body，我们提供了 JSON Diff 按钮，点击可以弹出独立窗口查看对比。
"重放"按钮也可多次点击打开多个窗口，这有什么用途呢？
当我们需要传不同参数测试一个接口时，参数改来改去很麻烦，直接打开多个窗口，每个窗口配置不同参数，点击重放即可测试。
这与将重放配置保存为多个案例，切换案例发送测试请求的方案不同，因为切换后，测试结果也会立即清空。
以上就是我们为了让用户使用 ApiCatcher 桌面端查看请求更愉悦，在产品设计方面做的努力。 不过，由于 ApiCatcher 桌面端使用跨平台技术开发，而非原生，其实整体体验上还是有些欠缺，并没有让我非常满意，这也是一点遗憾。 如果未来有更多用户支持我们，选择 ApiCatcher，我们会考虑重新用原生技术开发桌面端产品，以期获得更好的用户体验。
希望大家喜欢我们的设计，也欢迎每位用户给我们反馈更多建议，让ApiCatcher更好用。