UI学习 一 可访问性基础

教程:Accessibility – Material Design 3

需要科学上网,否则图片显示不出来。设计教程没有图片说明,不容易理解。

优化UI方向

  1. 清晰可见的元素
  2. 足够的对比度和尺寸
  3. 重要性的明确等级
  4. 一眼就能辨别的关键信息

传达某一事物的相对重要性

  1. 将重要的操作放在屏幕的顶部或底部(通过快捷键可以到达)
  2. 将相似层次结构的相关项彼此相邻放置

内容层次

        显示内容需按照正确的阅读顺序。从左至右,从上到下。

一、版式和排版

     1.1 app接触和指针目标大小

  1. 无背景内部 : 宽:24dp;高::24dp
  2. 有背景内部:宽:40dp;高:40dp
  3. 外部包含大小:宽: 48dp;高:48dp

        解释:对于大多数平台,考虑制作至少48 x 48dp的触摸目标。无论屏幕大小如何,这种尺寸的触摸目标的物理尺寸约为9毫米。触摸屏元件的推荐目标尺寸为7-10mm。使用更大的触摸目标来容纳更大范围的用户可能是合适的。

1.2 指针目标大小

包含区域大小: 宽:44dp;高:44dp。

解释:指针目标类似于触摸目标,但由鼠标或触控笔等运动跟踪指针设备实现。

1.3 目标间距

间隔8dp。

解释:在大多数情况下,以8dp或更多空间分隔的目标可以促进信息密度和可用性的平衡。

1.4 焦点

有利于确定焦点和动作的方面:

  1. 元素获得焦点的顺序
  2. 元素分组的方式
  3. 当焦点中的元素消失时,焦点在哪里移动
  4. 重点可以通过视觉指标和可访问性文本的组合来表达

1.5 分组

信息根据内容相关的亲密性分组。比如内容相近的分为一组。

1.6 用户体验

用户操作时,允许在操作被中断后恢复到先前聚焦的元素。

二 、文本

2.1 辅助文本

辅助文本是指屏幕阅读器辅助软件使用的文本。屏幕阅读器大声读出屏幕上的文本和元素(如按钮),包括可见和不可见的替代文本。

就是页面正常显示的文字。

2.2 替代文本

短标签文字,类似标题文字,或弹出的alert信息等。

说明性质的文字很重要,因为图像加载失败时能起到说明作用。

2.3 标题、相关文本和嵌入文本

图像内部或图像周围的文本应该考虑可访问性,因为它呈现了关于图像的关键信息。

 1、图片     2、标题    3、相关文本

相关文本和标题需要分组。分组的组间隔高度需大于行高。

2.3.1 标题

标题是出现在资产下面的文本。它们解释了资产的上下文信息——谁、什么、何时、何地。视力正常的用户和屏幕阅读器用户都依赖字幕来描述资产。

对于较长的描述,请使用标题而不是替代文本,因为它们对所有用户可用,并且替代文本限制为125个字符。

2.3.2 嵌入图片的文字

屏幕阅读器无法读取嵌入在图像中的文本。如果图像中有作为文本嵌入的重要信息,则应将这些重要信息包含在所有文本中。

2.4 基本要素和非基本要素

信息图像有必要和非必要的元素。重要信息的大文本的颜色对比度应为3:1,小文本的颜色对比度应为4.5:1。

  1. 重要元素:文本符合所有对比度和大小要求
  2. 重要元素:遵循颜色对比准则的说明的说明性视觉表示
  3. 非重要元素:装饰元素为插图创造了背景和个性。它们不传递信息,也不需要满足对比要求。

根据自己的理解,重要信息需要显示突出,并有引导作用。非重要元素则不用突出。

重要信息中,小文本的颜色要比大文本重。

重要信息大文本颜色和非重要信息颜色比重为3:1,重要信息小文本颜色和非重要信息颜色比重为4.5:1。

三 实现可访问性

通过使用标准的平台控件和语义HTML(在web上),应用程序自动包含与平台辅助技术良好配合所需的标记和代码。满足每个平台的可访问性标准并支持其辅助技术(包括快捷方式和结构)可以为用户提供高效的体验。

尽量使用原生控件显示。非原生的空间需要测试。

注:以上内容都是使用机翻,仅凭个人理解。

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

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

相关文章

数据库乐观锁

目录 数据库中实现乐观锁的示例:实现乐观锁时,常见的错误主要包括以下几个方面: 乐观锁(Optimistic Locking)是一种在数据库系统中用于解决并发问题的技术。它假设多个事务在并发执行时不会彼此冲突,只有在…

【猫头虎科技解码】探秘Drools语法:规则引擎在实战中的应用️

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

19、deque赋值操作

#include <iostream> using namespace std; #include <deque>void printdeque (const deque<int>& d) {for (deque<int>::const_iterator it d.begin(); it ! d.end(); it ){//*it 100 容器中的数据不可修改cout << *it << " &…

html5cssjs代码 006 文章排版《桃花源记》

html5&css&js代码 006 文章排版《桃花源记》 一、代码二、解释页面整体结构&#xff1a;头部信息&#xff1a;CSS样式&#xff1a;文章内容&#xff1a; 这段代码定义了一个网页&#xff0c;用于展示文章《桃花源记》的内容。网页使用了CSS样式来定义各个部分的显示效果…

在linux上部署yolov5和安装miniconda3

第一步&#xff1a;安装miniconda3 官网&#xff1a;Miniconda — Anaconda documentation 这四个命令快速而安静地安装最新的64位版本的安装程序&#xff0c;然后自行清理。要为Linux安装Miniconda的不同版本或体系结构&#xff0c;请在wget命令中更改.sh安装程序的名称。 …

AI怎么抠图?分享3种简单抠图小技巧

AI怎么抠图&#xff1f;AI抠图是一种利用人工智能技术从图像中精确提取出目标物体的过程。这种技术不仅提升了抠图效率&#xff0c;更保证了抠图的准确性&#xff0c;让我们能够更快速、更轻松地完成复杂的抠图任务。同时&#xff0c;随着技术的不断进步&#xff0c;AI抠图的应…

图数据库基准测试 LDBC SNB 系列讲解:Schema 和数据生成的机制

LDBC&#xff08;Linked Data Benchmark Council&#xff09;Social Network Benchmark&#xff0c;简称 LDBC SNB&#xff0c;是一种针对社交网络场景的评估图数据库性能的基准测试。 LDBC 简介 除了 Social Network Benchmark&#xff0c;LDBC 旗下目前还有其他几种基准测试…

批量将.doc文件转换为.docx文件的Python脚本优化

在本篇博客中&#xff0c;我将分享如何使用Python编写一个脚本&#xff0c;可以批量将一个文件夹中的所有.doc文件转换为.docx文件。这个脚本利用了Python的win32com库来操作Word应用程序进行文件格式转换&#xff0c;并通过tkinter库中的filedialog模块实现文件夹选择对话框&a…

iTOP-3588开发板快速启动手册Windows安装串口终端软件创建串口会话

双击上图中红框的应用程序后&#xff0c;软件会启动&#xff0c;界面启动后如下图所示&#xff1a; 下面来创建第一个SSH 会话。点击菜单栏 「会话」 --> 「新建会话」&#xff0c;即可弹出 「会话设置」 对话框&#xff0c;如下图所示&#xff1a; 在会话设置框里面选择串口…

springboot3--数据访问

1.整合SSM场景 SpringBoot整合Spring、SpringMVC、MyBatis 进行数据访问场景开发 1.0 创建数据相关的MYSQL create table ssm(id int(20) not null auto_increment comment 编号,login_name varchar(200) null default null comment 用户名称 collate utf8_bin,nick_name va…

西门子Mendix低代码资深技术顾问张戟,将出席“ISIG-低代码/零代码技术与应用发展峰会”

3月16日&#xff0c;第四届「ISIG中国产业智能大会」将在上海中庚聚龙酒店拉开序幕。本届大会由苏州市金融科技协会指导&#xff0c;企智未来科技&#xff08;LowCode低码时代、RPA中国、AIGC开放社区&#xff09;主办。大会旨在聚合每一位产业成员的力量&#xff0c;深入探索低…

Java应用Memory Mapped Files机制

Java中利用Memory Mapped Files&#xff08;内存映射文件&#xff09;机制进行顺序写操作是一种高效的文件处理方式&#xff0c;特别是在处理大文件时。这种技术允许我们将文件的一部分或全部映射到内存中&#xff0c;从而可以直接通过内存地址来访问文件内容&#xff0c;而不是…

生物分子体系结构预测开源模型RoseTTAFold All-Atom的conda环境部署及使用

欢迎浏览我的CSND博客&#xff01; Blockbuater_drug …点击进入 文章目录 前言一、RoseTTAFold All-Atom(RFAA)是什么&#xff1f;二、安装步骤1. 安装mamba&#xff08;非必须的&#xff0c;conda也可以&#xff09;2. 下载RoseTTAFold-All-Atom3. 创建conda环境并安装4. 安装…

协议-http协议-基础概念04-长短连接-重定向-cookie-缓存-代理

参考来源&#xff1a; 极客时间-透视HTTP协议(作者&#xff1a;罗剑锋)&#xff1b; 01-长短连接 HTTP 协议最初&#xff08;0.9/1.0&#xff09;是个非常简单的协议&#xff0c;通信过程也采用了简单的“请求 - 应答”方式。 它底层的数据传输基于 TCP/IP&#xff0c;每次发…

程序人生 - 爬虫者,教育也!

作为一个站长&#xff0c;你是不是对爬虫不胜其烦&#xff1f;爬虫天天来爬&#xff0c;速度又快&#xff0c;频率又高&#xff0c;服务器的大量资源被白白浪费。 看这篇文章的你有福了&#xff0c;我们今天一起来报复一下爬虫&#xff0c;直接把爬虫的服务器给干死机。 本文有…

ubuntu安装开源汇编调试器NASM

安装 安装很简单&#xff0c;直接在终端输入以下命令即可 sudo apt-get install nasm 安装完成后&#xff0c;如果可以查看到nasm的版本号即可视为安装成功 nasm -version 测试 创建汇编文件 创建一个asm文件 vim hello.asm 文件内容如下 section .datahello: db …

如何高效进行 API 性能测试:详细教程

在构建和维护 API 时&#xff0c;性能和稳定性是至关重要的考量因素&#xff0c;API 的性能直接影响着用户体验和系统的可用性&#xff0c;因此对其进行全面的性能测试是不可或缺的一环。 针对 API 的性能测试&#xff0c;一般通过模拟实际用户行为、压力测试和负载测试等方式…

记一次无vmcore内存死机问题分析过程

问题现象 客户发现在物理机上跑读写业务时&#xff0c;出现了一次死机现象&#xff0c;kdump服务未抓到vmcore文件。/var/log/messages里没有发现内核panic报错信息&#xff0c;只有call trace的警告信息。抓取到的call trace信息总共有三种类型&#xff1a;内存分配失败、rmm…

Keil C51 汉字显示 BUG 解决方案

Keil C51在编译的时候会将0xFD的字符&#xff08;有些汉字含有该字符的内码&#xff09;过滤&#xff0c;而导致编码与实际不符&#xff0c;如“三”实际编码&#xff1a;0XC8FD&#xff0c;而Keil C51则输出为0xC800。 keil官方 由于涉及该BUG的汉字并不是很多&#xff0c;所…

7.无重复字符的最长字串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串 的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为…