在移动端产品中实现适老化设计，如何借助变量功能高效完成界面优化，成为UI设计师关注的重点。特别是随着我国老龄化日渐加剧，老年用户在使用APP时常面临字体太小、界面复杂等问题。本文将通过Pixso变量功能，手把手教你实现一套高效、可复用的适老化设计方案，兼顾体验与效率。
1. 新建Pixso设计文件
通过浏览器搜索Pixso，打开Pixso官网并注册/登录Pixso账号，进入Pixso的工作台页面，点击“新建文件”创建一个空白的Pixso设计文件，如下图所示。
2. 绘制标准版界面
Pixso作为一款专业的UI/UX设计工具，功能十分强大，尤其在团队实时协作方面表现出色，它的矢量编辑、变量、组件、响应式布局功能非常简单好用，即使是新手也可以轻松上手。
如下图所示，使用Pixso的矢量工具、文本工具以及自动布局等功能，绘制本次案例产品的标准版界面。对于界面中需要用到的图标，可以使用Pixso中的插件iconfont直接调用，可以加快界面绘制速度。
其次，对于界面中需要用到的顶部状态栏，可直接在Pixso资源社区复制组件，Pixso资源社区提供了海量的免费UI设计资源，这些资源都是可以免费使用的。
3. 添加变量
绘制好标准版的产品界面后，可基于它的设计规范为其适配适老化版本的界面设计，适老化版本的的字号、间距、图标尺寸、颜色等会跟标准版有所变化，这主要是为了确保老年用户能够更佳方便的阅读新闻，另外对于新闻内容的接收在适老版中添加了语音阅读功能，用户不用看可直接靠听获取内容。
而为了更好的让设计一键替换界面元素的样式，Pixso采用了变量的方法来进行控制，可帮助设计灵活修改适配不同场景。
在Pixso中，点击上图右侧属性面板的“管理变量”图标，会出现一个弹窗页面，然后按照提示创建一个变量集。
在新建的变量集中，点击右上角的“创建变量模式”图标，可新建一个变量模式并为其命名为“适老版”，然后将默认的变量模式改为“标准版”。
修改好变量模式名称后，根据绘制的产品界面规范，点击变量集弹窗页面中的“创建变量”按钮，创建间距、字号、文本、颜色等需要变化的基础属性，并根据其使用场景进行命名。
在Pixso的变量中，支持文本变量、数值变量、颜色变量、布尔变量4种变量，本次案例中均有涉及。
4. 应用变量
在创建好变量后，对于字体的字号变量，可在右侧属性面板文本分类下的字号选择菜单中，点击“应用变量”在弹出的变量弹窗页面选择对应的数值变量名，如下图所示。
而对于文本内容变量可以在右侧属性面板的内容分类下，点击六边形图标，在弹窗的变量弹窗页面，选择对应的文本变量名，如下图所示。
对于页面中的图标尺寸变量，可以在右侧属性面板的宽和高中，选择“应用变量”，然后选择对应的数值变量名。
对于文字按钮的颜色变量，可以在右侧属性面板中，点击填充的颜色在弹出的弹窗中，找到“变量”标签，再选择对应的颜色变量名，如下图所示。
对应适老版才有的收听按钮，可使用布尔变量来控制可见性，在右侧属性面板中点击图层分类下的“应用变量”六边形图标，在弹出的变量弹窗选择对应的布尔变量名，如下图所示。
5. 查看适配效果
为界面中相关的元素都应用好变量后，可以在右侧属性面板中，点击背景分类旁的“切换变量模式”图标，在变量集中选择标准版与适老版查看对应的页面效果，如下图所示。
作为一名UI设计师，在进行产品设计时如果能够关注到弱势群体的需求与痛点，在设计时为老年用户适配合适的界面展示方式，这能够更好的提升产品的普适性与包容性，让产品有更好的体验，发挥设计的价值。
而通过本文的Pixso变量功能可构建一套清晰、结构化的变量体系，不仅能提升产品的可访问性，也帮助团队在不同使用场景中灵活响应，从而帮助设计师提升设计效率，为企业节省设计开发成本。👉快使用Pixso，轻松构建你想要的变量系统！
