用 Pixso 变量制作新闻 App 的适老版，先保留同一套内容与组件，再为字号、间距、控件尺寸设置“标准版”和“适老版”两组值，绑定到相应图层后切换查看。字体变大后，还要检查长标题换行、按钮是否被挡住，以及用户能否顺利返回；不能只把整张页面等比放大。
这篇教程先完成标准版与大字界面的设计对照，再按无障碍设计检查要点继续处理文字缩放、焦点和操作范围。变量能帮助批量调整设计属性，适老化体验还需要结合实际内容和用户任务判断。
适老化变量先服务阅读任务，不是把整张页面放大
新闻 App 的大字模式首先要保证“看懂标题、找到播放、知道当前位置”这几件事。保留同一套新闻内容和组件，再分别调整字号、行高、间距与触区变量，才能在标准版和大字版之间比较真实差异。图片和背景不必跟着文字等比放大，否则标题变大后会挤压播放入口，反而降低可用性。
用属性角色记录标准版与大字版的差异
| 属性角色 | 标准版 | 大字版调整 | 验收边界 |
|---|---|---|---|
| 标题字号与行高 | 保持列表密度，标题可快速扫读 | 字号、行高随变量增大，允许标题两行 | 不截断关键词，也不把来源和时间挤出卡片 |
| 内容间距 | 卡片与分组间距适中 | 增加段落和卡片间距，保留分组关系 | 间距变大后仍能判断标题属于哪一条新闻 |
| 操作触区 | 播放、收藏和更多操作并列 | 扩大按钮与行高，降低误触相邻项 | 播放入口始终可见，底部导航不遮住最后一项 |
| 辅助文字 | 来源、时间和提示较紧凑 | 允许换行，使用独立的辅助文字角色 | 不能只靠颜色区分来源，弱对比文字仍需可读 |
大字模式下可选的新闻标题、播报中、加载失败和无内容状态应使用同一套变量；“听新闻”按钮在加载时显示处理中，失败时说明重试动作，不要因为字号切换而丢失反馈。适老化检查是对实际任务和内容的检验，不能仅凭变量已绑定就宣称达到某个无障碍等级。
用长标题、系统放大和返回路径做移动验收
- 用超过一行的新闻标题、双语来源和两位数时间测试换行，确认标题、来源和操作按钮的阅读顺序稳定。
- 在系统字体放大、横屏和低带宽图片加载失败时检查：播放、收藏、返回和重试入口都能找到，卡片不会水平溢出。
- 打开详情后返回列表，确认滚动位置与“已读/播放中”状态保留；切换标准版与大字版不应清空用户正在阅读的内容。
交付变量与状态，不只交一张大字画板
交付给研发时，为每个字号、行高、间距和触区变量注明角色、标准值、大字值、引用图层与例外；同时附上标准/大字、加载、错误和空内容的原型链接。把标题换行、焦点顺序与按钮被遮挡的情况写入验收清单，避免实现层只复制视觉尺寸而遗漏状态。
- 变量命名表达用途而非具体数值，删改变量前先查组件引用。
- 大字版中图标、文字和操作说明仍保持清晰层级，颜色不是唯一状态线索。
- 真实内容、系统字体和不同屏幕方向通过后，再与研发确认可调整的最小范围。
1. 新建Pixso设计文件
打开 Pixso 工作台，新建一个设计文件，或复制一份已有的新闻 App 页面作为练习。还没有工作台时，可以注册/登录Pixso账号后新建文件。把标准版与适老版画板放在同一个文件中，后面用相同新闻内容比较两种模式。
2. 绘制标准版界面
先在标准版画板上确定新闻列表、搜索入口与底部导航的位置，再整理成组件。Pixso 的矢量编辑、文本、变量和自动布局功能可以用于这一步；内容结构明确后，再处理适老版的字号与间距变化。
如下图所示，使用Pixso的矢量工具、文本工具以及自动布局等功能，绘制本次案例产品的标准版界面。对于界面中需要用到的图标，可以使用Pixso中的插件iconfont直接调用，可以加快界面绘制速度。
对于界面中需要用到的顶部状态栏，可在Pixso资源社区寻找适合目标平台的组件，再根据资源的使用说明复制到设计文件。状态栏、新闻列表和底部导航应使用相同设备基准，避免把不同尺寸的资源直接拼在一起。
3. 添加变量
绘制好标准版的产品界面后，可基于它的设计规范适配适老版。字号、间距、图标尺寸和颜色可以按阅读任务调整；新闻列表中还可以设计“听新闻”的入口，帮助读者发现收听功能。先画清楚入口的显示与状态，再由研发实现音频或文字转语音的播放能力。
为了更方便地切换界面元素的属性，可以用变量控制两种模式的差异。不要将页面里所有相同数值都绑定到同一个变量：新闻标题字号、导航文字字号和图标尺寸虽然有时相等，使用目的却不同，后续可能分别调整。
在Pixso中，点击上图右侧属性面板的“管理变量”图标，会出现一个弹窗页面，然后按照提示创建一个变量集。
在新建的变量集中，点击右上角的“创建变量模式”图标，可新建一个变量模式并为其命名为“适老版”，然后将默认的变量模式改为“标准版”。
修改好变量模式名称后，根据绘制的产品界面规范，点击变量集弹窗页面中的“创建变量”按钮，创建间距、字号、文本、颜色等需要变化的基础属性，并根据其使用场景进行命名。
在Pixso的变量中，支持文本变量、数值变量、颜色变量、布尔变量4种变量，本次案例中均有涉及。
把变量对应到新闻页的具体对象
可先用下面这组数值比较两种模式，单位均为本例设计画布中的尺寸值，不是适老化合格标准，也不能直接等同于平台的字体设置。上线时还要与研发约定系统字号和布局单位。
| 变量用途 | 标准版起点 | 适老版起点 | 需要一起观察 |
|---|---|---|---|
| 新闻标题字号 | 16 | 20 | 长标题换行后，时间与图片是否仍对齐 |
| 新闻卡片上下间距 | 12 | 16 | 列表变长后，底部导航是否挡住最后一条 |
| 操作按钮高度 | 40 | 48 | 文字放大后按钮仍完整，触摸范围清楚 |
| 搜索提示文案 | 搜索新闻 | 输入想看的新闻 | 较长提示不挤压搜索与清除入口 |
| 听新闻入口可见性 | 隐藏 | 显示 | 出现后不覆盖新闻正文与返回入口 |
“听新闻”入口用布尔变量控制显隐，标题字号和按钮高度使用数值变量，搜索提示使用文本变量。变量名称表达对象和用途，例如“新闻标题字号”，比“数字1”更容易交接。颜色变量也应按文字、背景等用途分别绑定，避免放大后仍有低对比的辅助信息。
4. 应用变量
在创建好变量后，对于字体的字号变量，可在右侧属性面板文本分类下的字号选择菜单中，点击“应用变量”在弹出的变量弹窗页面选择对应的数值变量名，如下图所示。
对于文本内容变量，在右侧属性面板的内容项旁点击变量图标，然后在弹窗中选择对应文本变量。这里绑定的是字符串内容；字号大小需要另外绑定数值变量，不会因为改了搜索提示文字就自动变大。
对于页面中的图标尺寸变量，可以在右侧属性面板的宽和高中，选择“应用变量”，然后选择对应的数值变量名。
对于文字或按钮的颜色变量，可以在右侧属性面板中，点击填充的颜色在弹出的弹窗中，找到“变量”标签，再选择对应的颜色变量名。
对于只在适老版显示的收听按钮，可使用布尔变量控制可见性：选中对应图层，在右侧属性面板的图层属性处应用相应布尔变量。标准版设为隐藏，适老版设为显示。按钮出现只是设计状态改变，并不会自动生成可播放音频。
如果隐藏后仍留下一块空白，先检查它所在的容器是否固定了高度、上下间距是否由其他空图层占据，再调整布局关系。切换模式时应让相邻内容按预期重新排列，不要用遮挡或把按钮移出画板的方式假装隐藏。
5. 查看适配效果
为界面中相关元素应用变量后，选择对应的画板或容器，通过右侧属性面板切换变量模式，对照标准版与适老版的页面效果。下图展示了同一组新闻内容的两种布局；重点观察内容是否完整，而不只是比较字号是否变大。
换成长标题再看适配结果
把新闻标题替换为“社区服务中心本周新增健康咨询与办事预约服务”，再把搜索提示改为“输入想看的新闻”。在适老版中检查标题是否自然换行，卡片是否随内容增长，时间、来源和缩略图是否仍有清楚位置。不要靠强制单行省略，把读者真正需要的信息藏掉。
接着沿着“打开新闻—听新闻—暂停—返回列表”的任务查看：收听入口不能盖住正文，播放状态与暂停入口要容易区分，返回列表后仍能找到刚才的新闻。如果界面只画了一个喇叭图标，读者仍可能不清楚它能做什么，增加简短的“听新闻”文字更直接。
设计稿里的两个模式只能帮助比较方案。对于 Web 页面，WCAG 文字缩放要求关注文字放大到 200% 时内容和功能不丢失；重排要求还关注窄视口下的阅读方式及其例外。真正的浏览器缩放、系统字号与读屏行为，需要在开发后的页面上测试，不能只凭两张设计稿宣布符合标准。
最后请目标用户读完一条新闻并返回列表，观察他们停顿在哪里：找不到返回入口、误触相邻操作，还是不明白“听新闻”的状态。用这些具体反馈调整变量与布局，比单独问“字够不够大”更容易发现问题。
作为一名UI设计师，在进行产品设计时如果能够关注到弱势群体的需求与痛点，在设计时为老年用户适配合适的界面展示方式，这能够更好地提升产品的普适性与包容性，让产品有更好的体验，发挥设计的价值。
通过 Pixso 变量，可以将这组新闻页面的字号、间距和文字差异保存在同一文件中，便于团队继续调整。交付时，一并说明各变量对应的界面对象、两种模式的值和未完成的交互状态；之后再与研发共同验证真实内容和系统字号下的表现。👉快使用Pixso，轻松构建你想要的变量系统！
