H5收银台适老化字体规范
更新时间:2024.11.211. 范围
本指引描述了微信支付商户使用H5页面作为收银台时,H5页面在微信内展示适配用户设置大字体的要求和指引。
本指引适用于微信支付商户、服务商收款产品中H5页面设计和实现。
2. 大字体介绍
为了响应国家对App适老化与无障碍改造的要求,为更多用户都能获得良好的微信体验,微信内支持设置页面字体放大功能,用户设置大号字体后,微信内的元素会按比例放大显示,H5网页中的文字或图片也会放大,所以需要做好大号字体页面适配。
用户微信端设置大号字体有两个方法
方法1: 在微信内通过进入“设置>通用>字体大小” 来调整字体大小,设置后,微信内的页面元素都会跟随放大,效果如图1所示。
方法2: 在阅读公众号文章时通过“右上角>调整字体”来设置字体大小,设置后,微信公众号内的H5页面元素会跟随放大。
图1:如何设置大字体
3. 未做适配的收银页面案例
现有商户H5收银页面未做适配大字体时会出现信息溢出、遮挡、重叠等情况,严重影响了用户的阅读和操作,应避免以下几类情况发生。
3.1.页面元素溢出
图2:页面展示文字溢出
解决方案: 信息过大导致的溢出,可通过限制字数、设置该元素不跟随放大(见限制页面元素不放大)来解决。
3.2.信息重叠
图3:页面展示文字重叠
解决方案: 元素样式避免使用绝对高度,请使用相对单位或不设置高度。
3.3.信息遮挡
图4:页面文字被键盘遮挡
解决方案: 信息被键盘、按钮遮挡的情况,开发者可检查页面样式,避免使用100%高度,保证字体放大后页面可滚动浏览。
4. 页面适配内容和实现指引
为了给用户提供更好的使用体验,避免页面字体放大后出现信息溢出、重叠、遮挡等情况,要求开发者、设计师按如下6类指引做好页面适配。
4.1.哪些元素需要放大
默认情况下,包括文字,图标,图片,容器(cell、卡片),组件等页面中的所有元素都要跟随规则进行缩放。
当页面中的文字信息足够大(大于或等于40dp/pt),为了避免信息过大导致的溢出,设计师可以根据页面具体情况允许该文字信息不进行放大,从而避免不必要的放大。
设计师可根据页面具体情况,为该页面设置最大放大档位(针对用户侧设置字号的档位,例如安卓有8档,苹果iOS有6档),以实现更合理的页面展示效果。
图5:页面字体进行放大说明
4.2.换行
内容过多时可通过让文本信息换行的方式,避免信息被截断、重叠等情况,以保证信息展示完整。
图6:页面字体放大换行展示
4.3.页面滚动
空间不充足时,需支持页面上下滚动,以保证信息不被按钮、键盘或其他元素遮挡。
图7:页面字体放大后支持滚动条
4.4.间距
为了确保用户的阅读效率,我们推荐页面中的间距不随大字体模式进行缩放。当元素之间的间距不足以分隔信息,或者页面有足够的适配空间时,可以考虑放大间距。为了更有效地实现这一效果,我们建议开发者在开发过程中,使用绝对单位来设置间距样式,以防止间距随字体大小的变化而发生变化。
图8:页面字体放大后间距设置
4.5.拥挤情况
当文字信息过多时,放大后容易出现重叠或被截断的情况,此时应预留好内容之间的安全距离,内容过多需要换行,容器高度也相对延伸,调整内容与容器水平居中对齐。原则如下:
图9:页面字体放大后拥挤情况对比
4.6.限制页面元素不放大
当页面中的文字信息足够大,为了避免信息过大导致溢出,设计师可以根据页面具体情况设置该文字信息不进行放大。实现页面部分元素不跟随放大,开发者需按以下3个步骤操作:
步骤1: 禁止微信内网页字体大小默认缩放(Android、iOS设置方式不一样,详见代码示例中的备注1-1、1-2)。
步骤2: 监听微信网页字体大小的事件menu:setfont,获取当前设置的字体大小信息。
步骤3: 为不同的信息元素设置指定样式。
代码示例如下:
5. 验收要求
商户发布收银H5页面前, 需要做实际环境的测试和验收。
具体验收要求:在iOS手机和Android手机上分别进行验收,建议验收时考虑到最小机型的效果,如iPhone SE,安卓小屏机。在手机设置大字体后(方法见设置大号字体方法),H5网页展示效果符合上文要求后才能上线。
适配后,开发者需要自查以下3点:
页面中的文字、图片、按钮等元素均放大。
页面中文字、图片、按钮等元素没有出现信息溢出、被遮挡、重叠等情况。
将字体大小调整到第6档位时,保证页面主要文字信息最小不小于18dp/pt。