开发者投稿｜声网产品评测

macOS Edeg浏览器 + 安卓Chrome浏览器测试（成功）

Safari上可以完整看到两个画面，mac电脑上也是。

这是mac上edge浏览器上的效果：

下面是iPad上的效果：

两个端都可以完整显示画面，声音也是正常的。

macOS Edge浏览器 + macOS Safari浏览器（成功）

测试OK的，两边的浏览器都可以完整显示内容。

建议：多端的网页适配还有待优化，电脑网页端问题不大，主要是移动端和平板端看不到对方，也听不到声音。

水晶球点开默认内容是空的

左侧栏有个水晶球，点开可以看右边的内容。

https://console.agora.io/analytics/call/search?projectId=rUdQPffKN4z

可点开后发现，右侧是空白的列表。

只有当我点击搜索通话后，才会出现最近的通话结果。虽然有这个提示，但提示在中间，按钮在右上角。

另外这个通话含义有些不明确，按照字面意思上理解，像是在打电话。

实际上列表上的这些，都是视频多方会话，用通话两个字，似乎无法涵盖视频的通信的含义。

建议：默认显示最近的列表是最好的。其次是把中间提示图案拉一个长箭头图形，指向按钮；或者是在中间也放一个搜索的按钮。就像下面这样：

建议通话状态中加一列

还是通话调查，右上角有个筛选，可以查看【通话已结束】和【通话进行中】。

既然如此，在全部的列表中，加一个状态显示会不会更直观一些呢。

另外这里的【问题调查】只有下面一个【通话调查】，可以把上个层级拿掉，直接显示为通话调查。

我猜这里可能是想给后续的产品功能留下余地，不过这个面板这么长，应该不用再弄个三级菜单了，这个空白区域最多也不会超过十个吧，要是超过的话，就应该往最左侧的图标那一栏添加了。

不过这样看起来也算美观，只是功能性偏弱了一些，能用一行显示就不用两行，简洁会更好，这是我的看法哈。

个人设置缺少账号id显示

一般来说，每个网址的账号，都会有唯一标识的id，通过这个id可以在后台查到该用户的所有信息。

目前我在这个页面只能看到我绑定的、设置过的信息，看不到ID，也不知道哪个信息可以作为主键。这样不利于后续的用户反馈。

建议：增加ID的显示，可以自定义名称，比如声网io的id可以叫agoraID。以后用户咨询或问题反馈，直接提供agoraID会更高效一些。

费用中心金额显示延迟问题

网址：https://console.agora.io/finance/deposit/offline

进入费用中心，可以查看账户余额。但这个点开后是空的，需要等待几秒后，才可以正常显示。

无论是第一次点击访问，还是二次访问，都会出现这个加载延迟的问题。

无论是银行转账，还是支付宝，余额显示慢，都是如此。

初步判断是请求延迟的问题，点击这个页面会有4个请求。

建议：优化请求加载顺序，尽量合并请求，或者是在数据未完全加载之前，加一个loading动画提示。

充值金额没有验证

支付宝：https://console.agora.io/finance/deposit/alipay

这里的充值金额，默认给出了红色提示，说要输入大于1.00的数字，但这个验证做的不够友好。首先不应该已进入页面就提示，其次是输入框应该禁止非数字小数的输入。

建议：增加正则判断，过滤非数字字符。用input事件监听就好。

银行转账备注信息不明确

银行转账：https://console.agora.io/finance/deposit/offline

一般来说，银行转账是可以附带一条转账消息的，但这个CID提示有点奇怪，实际转账中是否需要严格遵守这个格式呢？如果我写的冒号是英文的不是中文的呢？还是说我需要覆盖一个数字就可以了？

一旦有一个小细节没处理好，可能这个转账就是失效的。

建议：加一个复制按钮，或者专门设计一个更大更醒目的框框。现在看起来页面内容太挤了，下面的打款账号也是，多加点margin和padding会好很多。

账单列表和一次性账单不一致

账单列表：

https://console.agora.io/finance/billing?tab=monthly-bills

一次性账单：

https://console.agora.io/finance/billing?tab=once-bills

前者是有标题显示的，后者是标题没有显示。

建议：补充【一次性账单】标题文字。

交易列表no data提示

点击进入，乍一看没什么，仔细看会发现，在加载loading的时候，下方有一个no data的字眼。

等加载完成后，这个字才消失。

建议：这是个小细节，建议加载loading的时候，不显示这个字。

发票暂无账单提示

这个问题跟上面no data是一样的，建议加载时候不显示。

余额数字样式基线没有对齐

费用中心的每个余额，都存在这样的问题。

支付充值——支付宝：

支付充值——银行转账：

交易列表表格缺少边框

https://console.agora.io/finance/transactions

下面的记录只有一条，但第一眼看上去好像没有数据一样。第一行的数据背景色，跟外面的灰色是一样的，看起来不够明显。

而且上面的表头跟下面的行内容，感觉不是一个整体。如果加上框线，去掉这个灰色背景，感觉会好很多。

我尝试修改了下css样式，效果如下。

虽然也不太好看，但只要改下配色，再遵循亲密性原则，就会有很明显的区分。

建议：修改表格样式，让表格内容更显眼。

交易信息下方没有数据条数显示

https://console.agora.io/finance/transactions

还是交易信息的问题，感觉内容太少，有多少条记录，当前页展示多少条数据，都没有体现出来。

另外表格表头只有日期、交易号、交易类型、金额、余额这4列，还可以加上产品类型、支付渠道等表头。如果在末尾有个客服小图标，点击后可一键反馈有疑问的交易信息，用户体验会更好。

建议：新增必要的表头字段。

成员角色身份缺少说明

成员管理：https://console.agora.io/member

这里新增的邮箱，做了简单的xx@xxx.com验证，但还是不完全。

有条件的话，最好做一下邮箱真实性判断，减少用户填写出错的概率。

而且这个成员添加后，默认是选择的这个【财务】身份，这个就有点奇怪了，如果不太注意，下个成员添加后，默认也是财务。

我看了下这里面的几个角色，有财务、工程师、客服技术支持、产品运营、管理员，感觉这里的角色分配比较乱，客服和技术支持要么合并，要么分开，产品和运营也应该是两个单独的角色，整体看下来角色的身份和职责都不够清晰。

即便选择了合适的角色身份，但依旧不清楚每个角色是做什么的，有什么样的权限区别，在这个页面也没有帮助文档超链接，也没有简单的提示问题说明。

建议：拆分角色名称，增加必要的角色权限说明，引导用户分配合适的角色给成员。

套餐包表格框线问题

套餐包管理：https://console.agora.io/packages

这里的表格有框线，可以比较好的看到表格内容。

但仍然存在框线不明显的问题，容易跟外面的白色和灰色色块交界处混淆。

建议：单独设计表格样式，明暗度、间距进一步区分。

套餐包购买卡片内容区分不明显

套餐包购买：https://console.agora.io/packages/minPackage

首先点进来可以看到有几个套餐，可以根据上面的产品、类型切换，下面会给出不一样的套餐。

但问题是，这么多套餐，我怎么知道我需要买多少的、用多少的呢。下面的2.5万分钟，跟25k分钟是两种计数方式，最好还是统一一下，而且这两条可以说是完全重复的。8.55000这个看起来像是85万多，后面的000最好去掉，以免误导。

95折扣不用单独写，直接写在价格的后面，加一个小括号删除线标原价，再标记一个95折的红色icon小图标在卡片右上角即可。这样套餐就一目了然。

套餐卡片可以这样设置：

体验套餐A：2.5万分钟，单价0.0085分钟，适合个人网站、个人微信小程序，总价210元。

企业套餐B：25万分钟，单价0.0081分钟，适合公司产品APP，总价2025元。

……

依次类推，这样用户既可以很快的知道套餐内容是什么，也可以很快的做出决策，选择最合适的套餐。

建议：修改套餐卡片描述；调整套餐卡片样式。

套餐产品类型选中态不明显

这个产品和类型，点击后只有一个淡蓝色的边框，远远看上去好像没有选中一样，

我在控制台修改了css，像这样把标签的背景色改成蓝色，文字颜色改成白色，就会看起来很明显，用户也可以很明确的知道自己勾选的是什么。

建议：修改标签样式，改文字颜色和背景色即可。

Github登录问题后切换中文不彻底

我第一次是用的Github登录，发现进去控制台是英文的，后面在设置中修改后，感觉还是没有完全变成中文环境。因为控制台的部分页面标题，显示还是英文的。

这可能跟我上网挂了代理有关，但没有找到确切的原因。建议在登录的时候，提示用户选择语言，而不是默认就变成了英文。

总结

这次体验的内容主要是声网Agora控制台，每一个页面我都进行了深度体验，发现了一些细节上的问题。有的是bug导致不能正常使用，有的是体验方面的细节影响用户的操作和判断。希望可以通过这次评测内容，帮助声网在控制台这块做的更加人性化，功能更加丰富全面。也感谢声网和infoQ联合举办的这次评测活动，希望能够与声网开发团队、infoQ编辑部有更多的深入交流，不断学习总结技术经验，日后产出更多更丰富的技术内容，与开发者们一起，共建社区内容。