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,一经查实,立即删除!

相关文章

【猫头虎科技解码】探秘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 << " &…

在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 旗下目前还有其他几种基准测试…

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

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

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

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

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

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

Unity性能优化篇(十一) 动画优化

1.恰当地设置Animator组件的Culling Mode。Always Animate表示如果该动画不可见&#xff0c;也会播放它。Cull Update Transformations表示如果该动画不可见&#xff0c;则不会渲染该动画&#xff0c;但是依然会根据该动画的播放来改变游戏对象的位置、旋转、缩放&#xff0c;这…

2024计算机软考基本介绍、考试时间、考试科目等2024年软考新变化政策 证书的作用

专栏系列文章推荐&#xff1a; 2024高级系统架构设计师备考资料&#xff08;高频考点&真题&经验&#xff09;https://blog.csdn.net/seeker1994/category_12593400.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】&#xff08;2024年软考高级…

【考研数学】张宇学习包

张宇的授课侧重于启发学生的综合思维能力。对于基础较好的学生而言&#xff0c;在听完他的课后&#xff0c;解题通常不会构成太大问题&#xff0c;而且可以学到许多解题技巧&#xff0c;其中包括张宇老师创造的易记的“点火公式”。 然而&#xff0c;对于基础较薄弱的学生来说…

无人机手持地面站软件功能详解,无人机手持地面站软件开发人员组成及成本分析

无人机手持地面站软件是专为无人机操控和任务管理设计的移动应用&#xff0c;它通常集成在智能手机、平板电脑或其他便携式设备上&#xff0c;使得用户可以在远离无人机的地方对飞行器进行实时监控与远程控制。 主要功能详解&#xff1a; 1. 飞行控制与姿态显示&#xff1a; …

基于springboot+vue实现乌鲁木齐南山冰雪旅游服务网管理系统项目【项目源码+论文说明】计算机毕业设计

基于springbootvue实现南山冰雪旅游服务网演示 摘要 随着2022年北京冬奥会的成功举办&#xff0c;在冬天进行冰雪运动已经逐渐流行起来&#xff0c;人们慢慢享受到了冰雪活动给大家带来的欢乐&#xff0c;除此之外人们的身体素质也可以得到提升。虽然已经有一部分人可以接受并…

关于yolov8文档的记录,补充一些整理的知识点

2023年由Ultralytics 提供了YOLOv8开源项目。YOLOv8 支持全方位的视觉 AI 任务&#xff0c;包括检测、分割、姿态估计、跟踪和分类。这种多功能性使用户能够在各种应用和领域中利用YOLOv8 的功能。安装yolov8开源项目 pip install githttps://github.com/ultralytics/ultralyti…