更清晰、更易用的移动端导航菜单
Build

更清晰、更易用的移动端导航菜单

1 分钟阅读

如果你在手机上用过Brandmine,一定点过底部那五个图标。这次我们修复了两个问题:现在一眼就能看出你正在浏览哪个板块,而且菜单上的每一种颜色都符合WCAG无障碍对比度标准——浅色和深色模式下都经过了验证。

打开手机上的Brandmine,你会看到底部排列着五个图标:品牌、创始人、维度、洞察、情报。这次更新给这个菜单带来了两项实实在在的改进。

你曾经很难看出自己在哪个板块

这个菜单本该让你一眼看出当前所在的板块,但更新前它几乎做不到这一点。选中标签与其他标签唯一的区别,只是文字稍粗一点、图标轮廓略微加粗一点——而且都是白色,都在同样的青绿色背景上。以手机菜单必须使用的小字号来看,这点差异太不明显,很难一眼察觉。

移动端底部菜单更新前后对比,两个版本中洞察标签均处于选中状态
更新前:选中标签“洞察”与其他标签几乎没有区别。更新后:清晰的背景色块标出当前页面,情报标签则改用一个小巧的无障碍标记,取代了未通过对比度测试的颜色。

我们的解决办法是给选中标签加上一个明显的背景色块——一个简单、直接的信号,不需要你去留意细微的文字变化。现在,你不用多想就能知道自己在哪个板块。

让情报标签既保持橙色特征,又符合无障碍标准

情报是我们的付费报告板块,一直用橙色来突出——因为它和周围的免费内容是不同性质的目的地。但当每个标签都能用背景色块显示当前位置后,情报原本固定的橙色标记就和其他标签新增的选中色块挤在一起,看起来像是同时亮起了两种状态。

我们同时也检查了一个此前没有仔细核实过的问题:直接放在青绿色背景上的橙色文字或图标,是否真的符合无障碍对比度标准。结果是完全不符合——差距不小。WCAG AA标准要求文字对比度达到4.5:1,而我们测得橙色在青绿色背景上的对比度只有1.79:1。这不只是美观问题,而是实实在在的无障碍缺陷——对视力较弱的用户来说,这确实很难看清。

修复方案是:情报标签现在和其他标签一样,使用统一的纯白图标和文字,只在角落保留一个小小的常驻橙色圆点——它只是一个标记,不再是一大片未通过对比度测试的颜色。这个设计清晰明确,不会和选中色块混淆,也完全符合无障碍标准。

兼顾深色与浅色两种模式

这些改动本身并非深色模式的新功能——底部菜单原本就会跟随设备的深色模式设置自动适配。但这次更新中的每一种颜色,在上线前都同时在浅色和深色模式下做了检查,而不仅仅是默认模式。无论哪种模式,选中标签的色块和情报标签的标记都能保持足够的对比度。

这只是界面里很小的一部分,但却是你每次用手机打开Brandmine都会用到的地方。值得把它做对。