字体调大 1.3 倍,页面反而更难用了——这就是没做好适老适配。

文章封面

做适老模式的时候,最开始的思路很简单:系统有个大字体模式,我把字号放大不就行了?

结果上线之后用户反馈:字是大了,但是按钮太小,点半天点不中;行高太挤,两行字叠在一起;固定高度的按钮,字大了以后直接截断了。页面反而比正常字体的时候更难用。

这时候才意识到:适老模式不是"把字放大"这么简单,是整个 UI 都要跟着调整。

一、为什么不能自己维护一套大字体

很多应用一开始的思路是:自己在设置里加个"大字体模式",用户开了就放大字体。

问题在哪?

问题说明
和系统不同步用户开了系统大字体,应用不知道
用户体验割裂系统一个字体大小,应用另一个
维护成本高自己写一套适配,每个页面都要改

API 26 之后,Accessibility Kit 提供了系统适老模式的查询和监听。应用不用自己维护状态,跟着系统走就行。

二、查询和监听系统适老状态

这段代码解决什么问题: 监听系统适老模式变化。
文件: pages/MainAbility.ets
用途: 全局适老状态管理
接入位置: 应用初始化

import accessibility from '@ohos.accessibility';

class SeniorModeManager {
  isSeniorMode: boolean = false;

  async init() {
    // 查询当前状态
    this.isSeniorMode = await accessibility.isSeniorModeEnabled();
    
    // 监听变化
    accessibility.onSeniorModeStateChange((enabled) => {
      this.isSeniorMode = enabled;
      // 通知页面刷新
    });
  }

  destroy() {
    // 记得移除监听
    accessibility.offSeniorModeStateChange();
  }
}

这里最容易踩的坑就是:每个页面都注册监听。那页面多了,监听器一大堆,内存泄漏。正确的做法是全局注册一次,状态变化通知所有页面。

三、字号放大了,还要调什么

只放大字号是不够的。

要调整的为什么
行高字大了行高不够,两行会挤在一起
按钮高度字大了按钮要更高,不然点不中
间距元素之间要留更多空间,不然太挤
信息密度一屏不要放太多东西,简化布局
点击区域按钮要更大,方便点

很多人只改了字号,其他都没动。结果就是:字大了,但是按钮还是原来那么大,用户点半天点不中。

四、固定高度为什么会出问题

还有个很容易踩的坑:固定高度。

很多组件写的时候是固定高度的,比如按钮写死 48vp 高。正常字体刚好,适老模式字放大了,直接就截断了。

正确的做法是:适老模式下,不要写死高度。用自适应高度,或者给更高的最小高度。

系统架构图

五、模式切换的时候页面状态怎么办

系统适老模式是可以在应用运行期间切换的。用户正在用着用着,切到适老模式了,这时候页面要怎么处理?

错误做法问题
直接把页面重置用户正在填表单,切换模式直接退到首页了
完全不刷新模式切了,页面还是原来的样子

正确的做法是:保留用户当前的页面状态,只刷新 UI 尺寸和字号。不要把用户正在做的操作都清掉。

六、几个容易踩的坑

第一个坑:只把字体统一放大。行高、按钮、间距都没调,页面挤成一团。

第二个坑:应用适老模式与系统状态不同步。自己维护一套,和系统对不上。

第三个坑:每个页面重复监听。全局状态搞成每个页面各自监听,内存泄漏。

第四个坑:监听注册后不释放。页面都退了,监听器还在跑。

第五个坑:字号变大但点击区域没调整。字大了按钮还是那么小,点不中。

运行效果图

这次做适老适配最大的体会是:适老模式不是"把字放大"这么简单,是整个 UI 都要跟着调整。字号、行高、按钮、间距、信息密度,每一样都要改。只放大字号,页面反而更难用。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐