UI 学习 二 可访问性 模式

教程:Accessibility – Material Design 3

一 颜色对比

颜色和对比度可以用来帮助用户看到和理解应用程序的内容,与正确的元素交互,并理解操作。

颜色可以帮助传达情绪、语气和关键信息。可以选择主色辅助色强调色来支持可用性。元素之间足够的颜色对比可以帮助低视力的用户看到和使用你的应用程序。

颜色3:1 指的是色彩HSB中H基本一致的情况下S是3:1。即色相相同,饱和度是3:1关系。

颜色1 #9CD67D  H:99 S:42 B:84 ; 颜色2  #1A1C18  H:90 S:14 B:11。可见颜色1的饱和度是颜色2的三倍。

1.1 对比比率

颜色对比对于用户区分各种文本和非文本元素非常重要。较高的对比度使图像更容易看到,而低对比度的图像可能对一些用户在明亮或低光条件下(例如在阳光明媚的白天或晚上)难以区分。


对比度表示一种颜色与另一种颜色的不同程度,通常写成1:1或21:1。两个数字在比例上的差别越大,颜色之间相对亮度的差别就越大。根据万维网联盟(W3C),颜色与其背景之间的对比度根据其亮度(发出的光的强度)在1-21之间。

W3C建议正文和图像文本使用以下对比度

文字类型色彩对比度
大字体(加粗14pt /楷体18pt及以上)和图形颜色:背景  =  3:1
小字颜色:背景 = 4.5:1

1.2 聚类元素

一些非文本元素,如按钮容器,其容器颜色和背景颜色之间的对比度应该达到3:1。考虑以下组合元素和色调的模式,这些模式基于Material对元素组合时的对比和功能变化的研究。

与其他元素聚集在一起的元素,比如一组按钮,需要用户从组中区分每个元素。

根据色彩的比率3:1,使得元素易于分辨。

颜色比小于3:1,元素体现不明显。

 颜色比大于等于3:1,元素易于识别。

独立于屏幕上其他元素的元素,如悬浮按钮等,由于其突出性,用户已经可以区分出来。这些元素不适用颜色比3:1,仅3:1则和以上元素不能区分,即元素区分的不够明显。

如图所示,悬浮按钮和背景并不特别明显的区别。

颜色1: #205107 H:100 S:91 B:32;颜色2: #1AC8 H:90 S:14 B:11。饱和度比大于3:1,但是看起来还是不明显。

当在集群中放置组件时,使用组件或组件类型,每个组件与背景之间的对比度至少为3:1。

每个按钮的容器颜色不符合UI背景的对比度标准,导致对低视力用户的对比度支持不足。

每个按钮的容器颜色都通过了UI背景的对比度标准,从而为低视力的用户提供了足够的对比度支持。

二 文字调整

2.1 背景

视力低下的人或喜欢大文本的人必须能够在UI中缩放文本的大小。这种调整通常通过设备操作系统设置或应用内选项来执行。

ui应该支持最小200%的文本增长。

大多数组件在调整文本大小时的行为是相同的:

  1. 文本和行高按比例缩放,乘以缩放值
  2. 填充保持为默认大小的1倍
  3. 组件中元素之间的间距保持不变,为默认大小的1倍

按钮文本以1x, 1.3x和2x比例显示。所有的顶部和底部填充为8dp。

 随着文本大小的增加,左右内边距保持恒定在24dp。

当文本大小调整不受设备操作系统控制时,提供1.5倍或2x等乘数以允许用户增加文本大小。要使用乘数计算字体的大小,请使用默认字体大小,以其乘以缩放值。

 例如,如果一个字体在1x比例下是14pt,那么当放大到2x比例时,字体大小应该是28pt: (14pt) x(比例值2)= 28。

不包含文本的组件,如进度指示器、复选框或单选按钮,不受文本大小调整的影响。

 错误样例,在设计文本调整大小时,不要调整没有文本的组件的大小。

图标字体,比如标签<i/>,应该也是跟随字体放大。其毕竟也称为图标字体,大概不算组件。

 左侧字体为1x,右侧是2x。UI文本以2x显示,其中只有文本和行高被放大;组件之间的填充与1x UI保持相同。

2.2 处理办法

通过增加容器大小、回流布局、启用滚动和添加工具提示来避免常见的文本大小调整问题。

错误示例:

  1. 无反应的容器;无意删节的文本
  2. 无反应的文本
  3. 重叠的元素
  4. 不必要的截断

2.2.1 增加容器尺寸

调整容器大小可以防止文本重叠、剪切或截断。

考虑一下文本如何以一种允许眼睛跟随一行的末尾到下一行的开头的方式回流。

  1. UI显示在1x处:按钮并排放置在标准布局中。
  2. UI显示在2x:按钮堆叠以适应文本大小调整后的有限水平宽度

2.2.2 回流布局

考虑重复布局,特别是当组件变得非常长时。为了容纳更大的文本,组件可以竖排,而不是横排固定。

2.2.3 允许容器滚动

当放大文本的长字符串无法在一个屏幕上显示时,可以考虑添加滚动条以提供对更多内容的访问。

垂直滚动比水平滚动更可取。应该只要求用户在一个方向上滚动,而不是垂直和水平滚动。

某些屏幕可能无法调整大小并显示必要的内容。在这种情况下,滚动条可以用来访问更多的文本。 

2.2.4 使用长按工具提示来放大标签

一些组件,如应用程序栏和导航栏,在更严格的空间和字符限制中定位文本。在这些情况下,您可以添加一个工具提示来在UI中显示放大的内容。

在这种情况下,组件中的文本大小仍然以1x显示,而按比例放大的文本在长按时显示在工具提示中。

工具提示是显示放大文本的最佳选择:

  1. 顶部应用程序栏
  2. 导航栏
  3. 导航导轨
  4. 标签,当固定在屏幕的顶部,滚动时不移出屏幕

放大相邻工具提示中的文本,在UI中保留内容显示的空间。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/746941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

H5 流光分割个人主页源码

源码名称&#xff1a;流光分割个人主页源码 源码介绍&#xff1a;一款流光分割特效个人主页源码&#xff0c;源码带大量跳转个人联系方式按钮和朋友按钮。同时带有个人介绍。 需求环境&#xff1a;H5 下载地址&#xff1a; https://www.changyouzuhao.cn/10241.html

电机参数辨识算法(2)——基于高频注入的磁链辨识策略

电机参数辨识算法&#xff08;1&#xff09;——基于高频注入的电感辨识策略-CSDN博客https://blog.csdn.net/m0_46903653/article/details/136722750?spm1001.2014.3001.5501上一期已经讲过了电感辨识方法。 今天这是参数辨识的第二期&#xff0c;今天来简单看看磁链的辨识。…

【数学建模】熵权法

之前我们学了层次分析法和topsis法&#xff0c;但是主观性十分强&#xff0c;有没有科学的方法得出权重呢&#xff1f;今天&#xff0c;我们来学习熵权法&#xff01; 基本概念&#xff1a; 熵权法&#xff0c;物理学名词&#xff0c;按照信息论基本原理的解释&#xff0c;信息…

SpringBoot+vue3打造企业级一体化SaaS系统

SpringBootvue3打造企业级一体化SaaS系统 简介&#xff1a;    全面提升前后端技术水平&#xff0c;独立完成全栈项目开发能力&#xff0c;快速进击全栈工程师&#xff0c;最终在面试中脱颖而出。整合后端主流技术&#xff08;Spring Boot、物理数据库隔离、加载动态权限、多…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Flex)

以弹性方式布局子组件的容器组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。Flex组件在渲染时存在二次布局过程&#xff0c;因此在对性能有严格要求的场景下建议使用Column、Row代替。Flex组…

Vue3基础笔记(1)模版语法 属性绑定 渲染

Vue全称Vue.js是一种渐进式的JavaScript框架&#xff0c;采用自底向上增量开发的设计&#xff0c;核心库只关注视图层。性能丰富&#xff0c;完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用&#xff0c;适用于场景丰富的web前端框架。灵活性和可逐步集成…

149.乐理基础-七和弦的第一转位、第二转位、第三转位

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;148.常用的7个七和弦结构与简称 上一个内容里练习的答案&#xff1a; 前置内容&#xff1a;必须看过 140.音程的转位 和 146.三和弦的第一转位、第二转位这两个 现在还是狭义上、理论上的转位&#xff0c;下面用C…

高校实验室科研仪器开放共享存在的问题及对策建议

随着科技的迅速发展和高校科研水平的提高&#xff0c;高校实验室科研仪器的开放共享已经成为推动科研进步和创新发展的重要手段。然而&#xff0c;在实际操作中&#xff0c;我们也面临着诸多问题和挑战。本文将分析高校实验室科研仪器开放共享存在的问题&#xff0c;并提出相应…

杂七杂八111

MQ 用处 一、异步。可提高性能和吞吐量 二、解耦 三、削峰 四、可靠。常用消息队列可以保证消息不丢失、不重复消费、消息顺序、消息幂等 选型 一Kafak:吞吐量最大&#xff0c;性能最好&#xff0c;集群高可用。缺点&#xff1a;会丢数据&#xff0c;功能较单一。 二Ra…

javaEE7

1. <% page pageEncoding"UTF-8"%><% page import"java.io.*"%> <% page import"java.util.*"%> <% page import"java.math.*"%> <html> <head><title>网站计数器</title></head&…

【软件测试基础篇】第二节.黑盒测试中常见方法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言⼀、等价类法&#xff08;解决穷举问题&#xff09;二、边界值法&#xff08;解决边界限制问题&#xff09;三、正交表法&#xff08;解决多条件依赖问题&#…

媒体发稿:澳门媒体发稿7个流程

推广平台澳门是一个重要的度假旅游娱乐终点&#xff0c;都是媒体领域热议的话题。对于澳门的媒体发稿营销推广要求&#xff0c;大家提供了一个简单易用的套餐系统软件&#xff0c;帮助大家在澳门媒体上发表推广文章。下面我们就根据7个阶段&#xff0c;详解构建这一套餐推广平台…

echarts tooltip提示组件框自定义浮窗内容

echarts tooltip提示组件框自定义浮窗内容 tooltip提示组件框 有三种浮窗展示方法 第一种&#xff1a;默认展示 第二种&#xff1a;字符串模板 第三种&#xff1a;回调函数 第二种 formatter&#xff08;字符串模板&#xff09; 模板变量有 {a}, {b}&#xff0c;{c}&#xff0…

C++ 作业 24/3/14

1、成员函数版本实现算术运算符的重载&#xff1b;全局函数版本实现算术运算符的重载 #include <iostream>using namespace std;class Test {friend const Test operator-(const Test &L,const Test &R); private:int c;int n; public:Test(){}Test(int c,int n…

LeetCode 热题 100 | 回溯(二)

目录 1 39. 组合总和 2 22. 括号生成 3 79. 单词搜索 菜鸟做题&#xff0c;语言是 C&#xff0c;感冒快好版 关于对回溯算法的理解请参照我的上一篇博客&#xff1b; 在之后的博客中&#xff0c;我将只分析回溯算法中的 for 循环。 1 39. 组合总和 题眼&#xff1a;c…

VBA_MF系列技术资料1-400

MF系列VBA技术资料1-400 为了让广大学员在VBA编程中有切实可行的思路及有效的提高自己的编程技巧&#xff0c;我参考大量的资料&#xff0c;并结合自己的经验总结了这份MF系列VBA技术综合资料&#xff0c;而且开放源码&#xff08;MF04除外&#xff09;&#xff0c;其中MF01-0…

Java复习02 IO流

Java复习02 IO流 首先&#xff0c;“IO”在计算机里面代表的是“输入/输出”&#xff08;Input / Output&#xff09;&#xff0c;简单来说&#xff0c;就是计算机与外部世界进行数据交流的过程。比如&#xff0c;你在键盘上敲字&#xff0c;数据就输入到计算机里了&#xff0…

FastAPI 是什么?深入解析

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建基于 Python 的 API。它是一个开源项目&#xff0c;基于 Starlette 和 Pydantic 库构建而成&#xff0c;提供了强大的功能和高效的性能。 FastAPI 官网地址&#xff1a;fastapi.tiango…

Vue3自定义指令!!!

通过自定义指令实现菜单显示和权限控制问题。 一、新建一个在src目录下创建包directives&#xff0c;在包中创建一个ts文件。 import { useStore } from "/store/pinia";function hasRoles(role: any) {const pinaRoles useStore().roles;if (typeof role "s…

【RPG Maker MV 仿新仙剑 战斗场景UI (四)】

RPG Maker MV 仿新仙剑 战斗场景UI 四 三级战斗指令菜单效果代码完成效果 下篇预告 三级战斗指令菜单 仙剑1中三级战斗的菜单内容如下&#xff1a;使用、投掷、装备这三项。 效果 在RMMV中原始菜单中是没有这三级菜单的&#xff0c;因此需要重新进行添加进去。 代码 这里贴…