写在前面

最近在几个论坛上逛，看到不少视障朋友自己写的 APK，功能都挺棒，但界面一截图出来，明眼人一看就觉得别扭。

为啥会这样？其实道理很简单：我们看不见，写出来的应用到底长啥样、UI 合不合规范、能不能达到生产环境那种"拿得出手"的状态，我们没法直观感受到。

有人说，不是有 AI 图片描述吗？说实话，那个东西只能给你一个大概的轮廓，真正的细节——间距对不对、颜色搭不搭、按钮摆的位置怪不怪——它描述不出来，我们也没法真正 get 到。

所以多数情况下，我们做出来的界面，会有几个共性的毛病：

1. 深浅色对比度奇怪，要么晃眼要么看不清；

​

2. 顶部状态栏和底部导航栏的适配间距不规范，有时候内容顶进状态栏里，有时候顶到导航栏区域，甚至 UI 直接溢出屏幕。这其实就是 Android 的边到边（Edge-to-Edge）显示没处理好。

在明眼人看来，你的软件在前端 UI 这块儿，就是一个很奇怪、甚至不可交互的状态。

那这个问题怎么解决？视觉缺失是我们的短板，但短板可以靠技巧来补。

接下来我想抛弃那些编程术语，也不跟你说要给 AI 喂一大堆提示词，就从我们普通人能用自然语言理解的方式，聊聊怎么通过无障碍语义反推视觉 UI。

核心思路：你听到的状态，就是它长出来的样子

我们天天用屏幕阅读器，对"已选中""未选中""已开启""已关闭"这些语义再熟悉不过了。但你有没有想过，这些状态在视觉上是怎么表达的？

我认为这两者是可以触类旁通的。你把无障碍里的语义搞透了，反过来就能推出来明眼人看到的界面应该长啥样。

下面我举几个例子。

图标：按钮不只是文字，还可以是一幅小画

页面里很多按钮，视觉上是用矢量图标来表示的，不是干巴巴的文字。

- 删除按钮：一个垃圾桶的图标；

​

- 点赞/喜欢按钮（比如抖音里）：一颗爱心；

​

- 评论按钮：一个气泡，像一朵云，中间有三个小黑点；

​

- 收藏按钮：一颗五角星。

这些图标还有选中和未选中两种状态：

- 没点赞、没收藏的时候，爱心和五角星一般是空心的，或者是白色的，根据设计风格而定；

​

- 点亮之后，抖音里收藏会变成黄色的五角星，点赞会变成红色的心形。

明眼人就是靠这个颜色变化，一眼看出来"哦，这个我点过了"。

映射到屏幕阅读器这边，听到的就是"已选中"或"未选中"、"已开启"或"未开启"。你看，语义是对应的。

开关（Switch）：一颗小药丸的两种脸色

再说说开关按钮。视觉上它是一个椭圆形的药丸——就是大家生病时吃的那种小胶囊，椭圆形的，拿在手里有感觉。

假设这颗药丸左边是红色，右边是白色，那么：

- 开启状态：左边红色，右边白色，整体是亮的；

​

- 关闭状态：左边变成灰色，右边变成灰白色，整个视觉会暗下来。

这就是视觉上的"开启"和"关闭"。对应到无障碍，就是"已开启开关"和"已关闭开关"。

我跟大家说这些，是希望你们用无障碍的提示语义去推敲 AI 生成的 UI 应该怎么展示。比如你知道"已收藏"对应红色爱心，那反过来，你让 AI 做一个收藏按钮，就知道它应该长啥样、选中态该怎么变。

复选框和单选按钮：左边一个圈，右边一行字

再反推两个常见控件。

单选按钮：比如我们在屏幕阅读器的手势设置里，向左滑动点开，会看到一组选项——"向上移动""向下移动"之类的。每一行的左边是一个空心的圆形，右边是文字，居左排列。

当你选中某一行时，左边那颗空心圆就会被点亮（通常里面会出现一个实心圆点）。明眼人一看就知道："哦，当前选的是'上一项'。"

复选框：比如我们经常在协议页面看到的"我已阅读并同意"。它也是右边一行文字，左边一个方框（有些设计是圆形）。被选中之后，里面会出现一个蓝色的对勾。

映射到屏幕阅读器，听到的就是"我已阅读并同意，已选中复选框"。"已选中"对应对勾被蓝色点亮，"未选中"就是一个空框。

你看，用这套无障碍语义去反推视觉，按钮该怎么摆、状态该怎么变，心里是不是就有数了？

实战一下：一个搜索页面该怎么设计

光说不练假把式，我们拿一个搜索页面来练练手。

搜索按钮：放大镜

搜索按钮用什么图标？放大镜。一个呈 45 度摆放的放大镜，镜柄朝着我们（也就是屏幕的下方）。这就是通用的搜索图标长什么样。

它可以摆放在左上角，也可以放在搜索编辑框的右边，点击后发起搜索。这个根据你的业务场景来定。

搜索历史的清空按钮：红色文字或垃圾桶

搜索历史下面一般需要一个"清空"按钮。这里有两种做法：

- 用红色的文字写"清空"；

​

- 或者用我们前面说的垃圾桶矢量图标。

明眼人看到红色或者垃圾桶，就知道这个按钮点了会删除东西。映射到无障碍，因为我们看不出颜色，但通过 ContentDescription 能知道它是"删除"。

你看，认识了这些图标，你就可以对自己的页面做规范化、通用化的 UI 设计了。你的软件不再是只能给视障用户用，UI 做到了通用，所有人都能用得起来。这是我们在设计时可以去尝试的方向。

颜色不只是好看，还在传递信息

危险动作：红色预警

对于盲人来说，一些比较危险的动作，视觉上会用特殊颜色来标志。

比如删除，我们前面说了，可以用红色。当你点了删除按钮之后，会弹出一个"你确定要删除吗"的确认框，里面的"确认删除"按钮通常也是更醒目的红色。

比如微信里，你点一个好友，下面有"删除该联系人"，这个按钮就是红色文字；点一下，弹出的确认框里"删除"按钮也是红色的。

这就叫危险性预警。明眼人一看到红色，就知道"这个动作有风险，我得再想想，真的要删吗？"

确定和取消：权重不一样

再说说确定和取消按钮。视觉上会给它们不同的"权重"，让用户一眼看出哪个是主要操作。

比如支付的时候：

- 确认支付按钮：蓝色背景，中间白色文字写着"确认支付"，很突出；

​

- 取消/放弃按钮：没有颜色背景，就是黑色文字，或者更低调一点——灰色底，中间白色文字写"取消"。

从视觉上看，蓝色很跳，代表"确定"；灰色很暗，代表"不重要，这是取消"。这个设计对认知障碍的用户也特别友好，他们不用读文字，靠颜色和亮度就能分辨。

其余还有很多颜色代表不同的语义体系，这里就不展开了，大家可以集思广益。

别忘了色盲色弱用户

设计颜色的时候，还要考虑一类人群——我们自己就是障碍群体，所以更要想到别人。

色盲色弱的人没法清晰分辨红色、蓝色这些颜色，如果你只靠颜色来传递信息，他们就懵了。

所以在设计和 UI 规划的时候，最好内置色盲色弱模式，或者至少跟着 Android 系统的色盲设置走。确保认知障碍、色盲色弱的用户，包括我们自己用屏幕阅读器的用户，都能通过等价的语义来使用软件。

再认识几个常见图标

前面说了一些，再补充几个天天能摸到的。

1. 返回按钮：向左的箭头

我们经常摸到左上角的返回按钮，视觉上是一个向左的箭头。

形象一点说：大家都比过三角形对吧？把你的手抬起来，屈肘，尺骨鹰嘴那一面朝着左边，差不多就是返回箭头那个形状。先天全盲的朋友可能需要脑补一下，大概就是一个"＜"的样子。

返回箭头一般摆在左上角。

2. 关闭按钮：X 形

我们用屏幕阅读器摸到的关闭按钮，很多开发者习惯用一个 X 图标。就是把两只手伸出来搭在一起，左手右手叠放，形成一个 X 形状。

关闭按钮一般放在弹窗的右上角，或者一些广告页面里。

但这里有个讲究：比如我们前面说的单选按钮列表弹窗，通常应该用"取消"文字按钮来关闭，而且这个取消按钮最好放在弹窗底部，绝对不应该用 X 关闭图标。

为啥？因为弹窗一般比较高，你把 X 搁在右上角，视觉权重会很奇怪；如果底部空空的没有文字，视觉上也会头重脚轻。

那取消按钮放底部，居左还是居中？推荐居中。因为"取消"就两个字，放居左会显得左边空落落的，而且它和上面的单选按钮是一组，居中放视觉权重更平衡。这是一种设计思路。

同样的，有些地方适合用垃圾桶图标，有些地方就不适合，大家根据业务场景自己琢磨。

3. 展开/折叠：向下的小括号

展开或折叠，屏幕阅读器读的是"已收起"或"已展开"。视觉上它是一个向下的括号，U 字形。

类似于我们比剪刀手：翘起中指和食指，微微向两边分开，比剪刀手再平一点，大概就是展开/折叠图标的样子。展开的时候"手指"朝下，折叠的时候反过来（朝上）。

4. 播放/暂停：一个按钮，两张脸

这个按钮有点特殊，它跟点赞不一样。点赞是一个图标两种颜色状态，而播放/暂停是一个按钮承载两种完全不同的形状。

我把这个说清楚，因为很多人容易绕晕：

- 当前是暂停状态（还没播放）：按钮显示一个向右的等腰三角形（角朝右，另外两个角朝上下）。这时候点击它，就会开始播放。所以屏幕阅读器应该读"播放"。

​

- 当前是播放状态（正在播）：按钮显示两条竖杠（中间空开一段距离）。这时候点击它，就会暂停。所以屏幕阅读器应该读"暂停"。

注意啊，是两条竖杠，不是横杠。很多人这里会搞混。

这里有个关键点：屏幕阅读器读的是点击后会发生什么，而不是当前显示什么形状。

- 显示三角形（当前暂停）→ 点击后播放 → 读"播放"；

​

- 显示两条竖杠（当前播放）→ 点击后暂停 → 读"暂停"。

如果播放的时候读"播放"，暂停的时候读"暂停"，视障用户反而会懵：我到底点了之后会咋样？市面上的规范设计都是按"点击后的动作"来读的。

我希望大家在设计的时候，能通过这一点反推 UI 应该长什么样——你知道无障碍该读什么语义，反过来就知道按钮该用什么形状、什么状态。

最后说两句

以上这些，就是我琢磨出来的一些 UI 设计思路。核心就一句话：我们看不见，但我们天天跟无障碍语义打交道，把这些语义吃透了，反过来就能推导出视觉上该怎么设计。

不用去背那些设计规范，也不用去喂一大堆提示词，就从你最熟悉的屏幕阅读器语义出发，一个按钮一个按钮地推敲。时间长了，你心里自然就有一套 UI 的感觉了。

希望这篇帖子对大家有帮助。有什么说的不对的地方，欢迎在评论区指正，咱们一起交流。