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/729441.shtml

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

相关文章

(二十二)从零开始搭建k8s集群——高可用kubernates集群搭建上篇

前言 本节内容分为上、中、下三篇,上篇主要是关于搭建k8s的基础环境,包括服务器基本环境的配置(网络、端口、主机名、防火墙、交换分区、文件句柄数等)、docker环境部署安装配置、镜像源配置等。中篇会介绍k8s的核心组件安装、k8…

xss.pwnfunction.com靶机 Warmups

通关要求弹出警告框alert(1337) 没有用户交互 不能使用外链接 在chrome中测试 Ma Spaghet! 通过分析代码我们可以看到它直接用innerHTML将接收的内容赋值 但是我们不能使用<script>标签因为&#xff1a;HTML 5 中指定不执行由 innerHTML 插入的 <script> 标签。 所…

网络原理初识

一、IP地址 概念 IP 地址主要用于标识网络主机、其他网络设备&#xff08;如路由器&#xff09;的网络地址。简单说&#xff0c; IP 地址用于定位主机 的网络地址 。 就像我们发送快递一样&#xff0c;需要知道对方的收货地址&#xff0c;快递员才能将包裹送到目的地。 二、…

YOLOv8原创改进:原创自研head创新 | 空间上下文感知模块(SCAM)结合超轻量高效动态上采样DySample | 小目标涨点系列

💡💡💡本文独家改进:YOLOV8 head创新,1)一种超轻量高效动态上采样DySample, 具有更少的参数、FLOPs,效果秒杀CAFFE和YOLOv8网络中的nn.Upsample;2)加入空间上下文感知模块(SCAM)进一步提升检测精度; 改进结构图如下: 💡💡💡在多个数据集下验证能够涨点…

Java中SpringBoot四大核心组件是什么

一、Spring Boot Starter 1.1 Starter的应用示例 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency><groupId>org.mybatis.sprin…

Android屏幕共享-硬编码硬解码

Android屏幕共享-硬编码硬解码 说起Android之间的屏幕共享&#xff0c;第一次接触会比较陌生&#xff0c;不过大家多少有了解过ffmpeg&#xff0c;看上去是不是很熟悉&#xff1f;ffmpeg是一套处理音视频的开源程序&#xff0c;但对于C了解较少的同学&#xff0c;编译起来很复杂…

二维码门楼牌管理系统应用场景:社会服务与福利的智能化革新

文章目录 前言一、二维码门楼牌管理系统的基本功能二、在社会服务领域的应用三、在福利保障领域的应用四、结论 前言 在数字化浪潮的推动下&#xff0c;二维码门楼牌管理系统以其便捷、高效的特点&#xff0c;正逐渐渗透到社会服务和福利的各个领域。这一系统不仅为市民提供了…

Claude3 目前最强大模型

过内试用连接 ChatAI (whjin.cn)http://chatyy.whjin.cn/?userid51913030&typebaidu&keywordid0&bd_vid12153741466503666331 Claude 3: A new generation of AI The Claude 3 family of models represents the cutting edge of AI technology, offering unpara…

RN开发搬砖经验之-如何处理FlashList组件加载后调用scrollToIndex没有滚动指定位置

前言 如题&#xff0c;这里只能说是处理&#xff0c;起正向作用的临时方案&#xff0c;因为我也着实没搞懂这个BUG的具体原因&#xff0c;看github上有提相关的issuesFor long lists with different item types scrollToIndex does not work reliable&#xff0c;但看官方没有…

Extended Feature Pyramid Network for SmallObject Detection

摘要 各种尺度的特征耦合会削弱小对象的性能&#xff0c;本文中&#xff0c;我们提出了具有超高分辨率金字塔的扩展特征金字塔网络&#xff08;EFPN &#xff09;&#xff0c;专门用于小目标检测。具体来说&#xff0c;我们设计了一个新模块&#xff0c;称为特征纹理转移&#…

【MySQL 系列】MySQL 起步篇

MySQL 是一个开放源代码的、免费的关系型数据库管理系统。在 Web 开发领域&#xff0c;MySQL 是最流行、使用最广泛的关系数据库。MySql 分为社区版和商业版&#xff0c;社区版完全免费&#xff0c;并且几乎能满足全部的使用场景。由于 MySQL 是开源的&#xff0c;我们还可以根…

统信os平台普通用户无法调用clockdiff的问题解决方法

问题描述 部署OceanBase 时遇到clockdiff: socket: operation not permitted 问题&#xff0c;从官网了解到可以通过setcap cap_net_rawep "$(which clockdiff)"解决 在centos平台&#xff0c;这个可以解决问题&#xff0c;但是在统信os平台失败了。。 参考: Ocea…

怎么把一个视频分割成几个?技巧在这里

在视频编辑的过程中&#xff0c;有时我们需要将一个较长的视频细分成多个部分&#xff0c;以便更灵活地进行处理、调整或分享。这个过程可以帮助我们有效管理视频内容&#xff0c;提取关键片段&#xff0c;并且适应不同的发布需求。在本文中&#xff0c;我们将深入探讨怎么把一…

JavaScript改变this指向的三种方法

在JavaScript中&#xff0c;可以使用call()、apply()或bind()来改变函数的this指向。 1.call(): 通过调用函数并传入新的上下文对象作为参数&#xff0c;将函数内部的this关键字指向该对象。示例代码如下所示 function greet(name) {console.log("Hello " name); …

机器学习笔记 DeepFakes和换脸技术简述

一、简述 人脸检测一直是 2000 年代初的主要研究课题。差不多二十年后,这个问题基本上得到了解决,并且人脸检测在大多数编程语言中都可以作为库使用。甚至换脸技术也不是什么新鲜事,并且已经存在了好些年了。 早在2016年左右就有基于OpenCV进行面部交换的方式了,主要是基于…

第107讲:Mycat实践指南:取模分片下的水平分表详解

文章目录 1.使用取模分片水平分表2.水平分表取模分片案例2.1.准备测试的表结构2.2.配置Mycat实现范围分片的水平分表2.2.1.配置Schema配置文件2.2.2.配置Rule分片规则配置文件2.2.3.配置Server配置文件2.2.4.重启Mycat 2.3.写入数据观察水平分表效果 1.使用取模分片水平分表 平…

SVG 渐变边框在 CSS 中的应用

SVG 渐变边框在 CSS 中的应用 <template><div class"home"><div class"one"><svg width"100%" height"100%"><rect x"2" y"2" width"100%" height"100%" fill&q…

【扩散模型系列1】扩散模型背景|DDPMs|LDM

目录 概述DPMDDPM前向加噪反向去噪UNet 训练阶段推理阶段 IDDPMClassifier GuidanceGLIDELDM模型结构VAE扩散模型U-Net 训练阶段推理阶段 参考资料 概述 扩散模型&#xff1a;和其他生成模型一样&#xff0c;实现从噪声&#xff08;采样自简单的分布&#xff09;生成目标数据样…

鸿蒙开发(七)添加常用控件(上)

相信大家已经对鸿蒙开发的布局有了基本的了解。之前我们提到过&#xff0c;一个好的UI&#xff0c;离不开选择合理的布局。当然&#xff0c;也离不开适当的控件。本篇文章&#xff0c;带着大家一起学习下如何在页面里面添加常用的控件。由于控件较多&#xff0c;我会分为两篇文…

Windows®、Linux® 和 UNIX® 系统都适用的远程桌面工具 OpenText ETX

Windows、Linux 和 UNIX 系统都适用的远程桌面工具 OpenText ETX 为 Windows、Linux 和 UNIX 实施精益、经济高效的虚拟化&#xff1b;提供完整的远程 Windows 可用性&#xff1b;以类似本地的性能远程工作&#xff1b;安全地保护系统和知识产权&#xff08;IP&#xff09;&am…