2.3 颜色、字体、图标与可访问性

2.3 颜色、字体、图标与可访问性

本节摘要：把硬编码在布局里的颜色、文字、尺寸迁移到 res 资源文件，是界面工程化的第一步；同时兼顾对比度、触摸目标、内容描述三件可访问性小事，App 才算对每位用户都体面。本节给猜数字 App 建起一套完整的资源体系。

从一坨硬编码说起

看看未经资源化的布局有多危险：界面上五个控件都写着 android:textColor="#1976D2"，某天要换品牌色，你得改五个地方，漏一处就是"阴阳界面"。正确做法是把所有可变值抽进资源文件，布局里只留引用：

<!-- 布局中引用资源：@color、@dimen、@string -->
<TextView
    android:id="@+id/tv_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/game_title"
    android:textColor="@color/primary"
    android:textSize="@dimen/title_size" />

<Button
    android:id="@+id/btn_guess"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/touch_target"
    android:text="@string/btn_guess" />
​

对应的三个资源文件，内容一目了然：

<!-- 颜色资源：colors.xml -->
<resources>
    <color name="primary">#1976D2</color>
    <color name="primary_dark">#0D47A1</color>
    <color name="surface">#FFFFFF</color>
    <color name="text_main">#212121</color>
    <color name="text_hint">#9E9E9E</color>
    <color name="success">#2E7D32</color>
</resources>

<!-- 尺寸资源：dimens.xml -->
<resources>
    <dimen name="title_size">28sp</dimen>
    <dimen name="body_size">16sp</dimen>
    <dimen name="touch_target">48dp</dimen>
    <dimen name="space_normal">16dp</dimen>
</resources>

<!-- 文字资源：strings.xml -->
<resources>
    <string name="game_title">猜数字</string>
    <string name="btn_guess">猜！</string>
    <string name="hint_input">输入 1 到 100 之间的整数</string>
</resources>
​

strings.xml 还有一层意义：多语言。 建立"默认 + 语言限定符"两套字符串资源后，系统按用户系统语言自动切换，一行代码不用改。就算暂时不做国际化，从第一天起把用户可见文字收进 strings 也是廉价的保险。

图标则放在 drawable 目录，矢量图（VectorDrawable）优先于位图——一个 XML 描述的矢量图能适配所有密度，体积还小。素材图标库里有大量现成矢量图标可直接取用。

可访问性：三件必须做的小事

可访问性常被当作"加分项"，实际是几行代码的事，却决定了视障用户、老年用户能不能用你的 App。

第一件：对比度。 文字与背景的对比度建议至少 4.5:1。灰色提示字 #9E9E9E 放在白底上约 2.8:1，不达标；换成 #757575 约 4.6:1，达标。设计定稿时用对比度工具过一遍主色组合即可。

第二件：触摸目标。 2.2 节说过 48dp 底线，此处补一个隐形杀手——ImageButton 只放图标时，图标本身可能只有 24dp。解法是让可点击区域大于图案：

<ImageButton
    android:id="@+id/btn_clear"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@android:drawable/ic_input_delete"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:contentDescription="@string/clear_input" />
​

宽高 48dp 保证点击区域，selectableItemBackgroundBorderless 提供水波纹反馈，contentDescription 是第三件事。

第三件：contentDescription。 读屏软件（TalkBack）遇到无文字的图片会念"未加标签的按钮"。给每个纯图标控件加一句描述，读屏用户就知道这是"清空输入"。猜数字 App 的清除按钮加上之后，TalkBack 会清晰读出按钮用途。

💡 关键直觉：可访问性检查不是公益劳动。字号缩放、高对比、大触摸目标，同样服务于强光下看不清屏幕、戴手套操作、临时手抖的每一个用户——把它当普通的质量问题对待。

本节要点回顾

• 资源三件套：colors/dimens/strings 收编全部可变值，改一处全局生效。
• strings 是国际化的地基：第一天就把用户可见文字收进去。
• 矢量图标优先：一份 VectorDrawable 适配所有密度。
• 对比度 ≥ 4.5:1、触摸目标 ≥ 48dp、图标必加 contentDescription：可访问性三件套，几行代码的事。
• 分界线：本章管"设计与规格"，下一章回到具体控件，开始逐个解剖基本组件。