UI 学习 二 可访问性 模式

news2024/11/24 6:39:40

一 颜色对比

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

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

颜色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.coloradmin.cn/o/1512522.html

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

相关文章

【面试精讲】Java线程6种状态和工作原理详解,Java创建线程的4种方式

Java线程6种状态和工作原理详解&#xff0c;Java创建线程的4种方式 目录 一、Java线程的六种状态 二、Java线程是如何工作的&#xff1f; 三、BLOCKED 和 WAITING 的区别 四、start() 和 run() 源码分析 五、Java创建线程的所有方式和代码详解 1. 继承Thread类 2. 实现…

数据结构从入门到精通——树和二叉树

树和二叉树 前言一、树概念及结构1.1树的概念1.2 树的相关概念&#xff08;重要&#xff09;1.3 树的表示1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 二、二叉树概念及结构2.1二叉树概念2.2现实中的二叉树2.3 特殊的二叉树2.4 二叉树的性质2.5 二叉…

Linux-gdb调试

文章目录 前言查看&#xff08;显示&#xff09;源代码 list/l运行程序run/r打断点b查看断点删除断点打开/关闭断点逐过程 逐语句查看变量常显示continuefinishuntil修改指定变量退出gdb 前言 GDB&#xff0c;即GNU调试器&#xff08;GNU Debugger&#xff09;&#xff0c;是G…

【AI绘画】AI绘画免费网站推荐

人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是指一种模拟人类智能的技术。它是通过计算机系统来模拟人的认知、学习和推理能力&#xff0c;以实现类似于人类智能的行为和决策。人工智能技术包含多个方面&#xff0c;包括机器学习、深度学习、自…

JSON基础知识

目录 一、定义二、作用三、特点四、语法JSON具有以下这些形式&#xff1a;4.1 对象(JSONObject)&#xff1a;4.2 数组(JSONArray)&#xff1a;4.3 值4.4 字符串4.5 数值 五、常用的JSON解析方式5.1 org.json解析5.1.1 常用api5.1.2 get方法与opt方法对比5.1.3 使用示例5.1.3 参…

如何处理爬虫代理的404错误

目录 前言 一、什么是404错误 二、处理404错误的方法 1. 重新尝试请求 2. 使用备用代理 3. 日志记录 总结 前言 在进行网络爬虫开发过程中&#xff0c;经常会遇到一些特殊的错误&#xff0c;例如404错误。当我们使用代理服务器进行网络爬取时&#xff0c;有时候会遇到4…

C#,红黑树(Red-Black Tree)的构造,插入、删除及修复、查找的算法与源代码

1 红黑树(Red-Black Tree) 如果二叉搜索树满足以下红黑属性,则它是红黑树: 每个节点不是红色就是黑色。根是黑色的。每片叶子(无)都是黑色的。如果一个节点是红色的,那么它的两个子节点都是黑色的。对于每个节点,从节点到后代叶的所有路径都包含相同数量的黑色节点。红…

YOLOv8改进 | 图像去雾 | 利用图像去雾网络AOD-PONO-Net网络增改进图像物体检测

一、本文介绍 本文给大家带来的改进机制是利用AODNet图像去雾网络结合PONO机制实现二次增强,我将该网络结合YOLOv8针对图像进行去雾检测(也适用于一些模糊场景,图片不清晰的检测),同时本文的内容不影响其它的模块改进可以作为工作量凑近大家的论文里,非常的适用,图像去…

【线代基础】张量、向量、标量、矩阵的区别

1、标量&#xff08;Scalar&#xff09; 纯数字&#xff0c;无方向性、无维度概念。因此也叫 标量张量、零维张量、0D张量 例如&#xff0c;x18&#xff0c;x21.34 x1、x2即为标量 2、张量&#xff08;tensor&#xff09; 具有方向性&#xff0c;可以理解为一个多维数组&a…

【报错】File ‘xxx.ui‘ is not valid

Q: Pysider6中设计好的ui转py时&#xff0c;出现File ‘xxx.ui’ is not valid A&#xff1a; 重新配置外部工具 $FileName$ -o $FileNameWithoutExtension$.py $FileDir$

中间件 Redis 服务集群的部署方案

前言 在互联网业务发展非常迅猛的早期&#xff0c;如果预算不是问题&#xff0c;强烈建议使用“增强单机硬件性能”的方式提升系统并发能力&#xff0c;因为这个阶段&#xff0c;公司的战略往往是发展业务抢时间&#xff0c;而“增强单机硬件性能”往往是最快的方法。 正是在这…

elasticsearch篇:DSL查询语法

1.DSL查询文档 众所周知&#xff0c;elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1. DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出…

Linux学习:基础开发工具的使用(1)

目录 1. Linux软件包管理器&#xff1a;yum工具1.1 yum是什么&#xff08;软件商城&#xff09;1.2 yum的使用1.3 yum的背景生态 2. 项目开发与集成开发环境3. vim编辑器3.1 vim编辑器的常见模式与模式切换3.3 vim编辑器的使用3.3.1 命令模式下的常见命令&#xff1a;3.3.2 vim…

使用API有效率地管理Dynadot域名,使用API设置域名隐私保护

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

AHU 数据库 实验三

《数据库》实验报告 【实验名称】 实验3 数据库的连接查询 【实验目的】 1. 熟悉基本的连接查询的概念和作用&#xff1b; 2. 了解数据库管理系统DBMS 实现连接查询的基本方法&#xff1b; 3. 掌握SQL语言连接查询语句的语法和功能&#…

Spring之注入模型

前言 之前我写过一篇关于BeanDefinition的文章,讲述了各个属性的作用,其中有一个属性我没有提到,因为这个属性比较重要,所以这里单独开一篇文章来说明 上一篇博文链接Spring之BeanDefinitionhttps://blog.csdn.net/qq_38257958/article/details/134823169?spm1001.2014.3001…

旅游景区公共广播 园区广播 公路服务区广播

旅游景区公共广播 园区广播 公路服务区广播 旅游景区公共广播 旅游景区公共广播(又称背景音乐)简称BGM&#xff0c;它的主要作用是掩盖噪声并创造一种轻松和谐的气氛&#xff0c;是一种创造轻松愉快环境气氛的音乐。掩盖环境噪声&#xff0c;创造与旅游景区相适应的气氛&#…

48. 【Linux教程】yum 软件包管理

本小节介绍如何在 Linux 系统中使用 yum 命令软件管理。 1.yum 简介 yum 是 Red Hat 软件包管理器&#xff0c;它能够查询有关可用软件包的信息&#xff0c;从存储库获取软件包&#xff0c;安装和卸载软件包&#xff0c;以及将整个系统更新到最新的可用版本。yum 在更新&#…

(2022级)成都工业学院Java程序设计(JAVA)实验一:编写一个简单的Java程序

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、代码仅提供参考 3、如果代码不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 IntelliJ IDEA 2023.2.2 jdk17.0.6 实验要求 1、 控制台菜单。要求如下&#xff1a; 1&#xff09;…

【算法面试题】-07

小明找位置 题目描述 小朋友出操&#xff0c;按学号从小到大排成一列;小明来迟了&#xff0c;请你给小明出个主意&#xff0c;让他尽快找到他应该排的位置。 算法复杂度要求不高于nLog(n);学号为整数类型&#xff0c;队列规模<10000; 输入描述 1、第一行:输入已排成队列的…