UI学习 一

news2024/11/15 15:44:22

教程: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.coloradmin.cn/o/1509008.html

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

相关文章

Unity项目开发必备技能——字体替换工具的使用(上)

在平常我们做unity项目的时候,工具类的使用对于我们来说是必不可少的组成部分,因为工具类可以解决实际问题或者是优化我们已经实现的功能。 当你在做项目的时,我们搭建完场景后,当前场景中你所创建的UI组件中的Text的字体&#xf…

springboot+vue3+nuxt3+ts+minio开发的dsblog3.0前后端分离博客

springbootvue3nuxt3tsminio开发的dsblog3.0前后端博客 一、技术栈 本博客系统采用了先进且成熟的技术栈,包括Spring Boot 3、Spring Security、Vue 3、Nuxt 3、TypeScript、Vite、MinIO、Redis、Element Plus和Markdown等。这些技术共同协作,确保了博…

float32 float16 bfloat16 推理训练GPU速度和内存调研

概念: 参考:Accelerating Large Language Models with Mixed-Precision Techniques - Lightning AI 3种数量类型表示的数据范围不一样,以float32为例其中有1个符号位,8位表示指数,23位表示尾数 标准训练推理是用的fl…

力扣大厂热门面试算法题 15-17

15. 三数之和,16. 最接近的三数之和,17. 电话号码的字母组合,每题做详细思路梳理,配套Python&Java双语代码, 2024.03.11 可通过leetcode所有测试用例。 目录 15. 三数之和 解题思路 完整代码 Java Python ​…

解锁App推广新姿势:Xinstall专属二维码,让推广更高效!

在移动互联网时代,App推广的重要性不言而喻。然而,推广的过程中往往伴随着各种痛点,如何准确追踪用户来源、如何提高安装转化率等,一直是广告主和开发者们关注的焦点。今天,我们要为大家介绍一款专业的App全渠道统计服…

Java基于SpringBoot+Vue的人事管理系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

Linux——文件缓冲区与模拟实现stdio.h

前言 我们学习了系统层面上的文件操作,也明白了重定向的基本原理,在重定向中,我们使用fflush(stdout)刷新了缓冲区,当时我们仅仅知道重定向需要刷新缓冲区,但是不知道其所以然,今天我们来见识一下。 一、…

vue自定义主题皮肤方案

方案一:CSS变量换肤(推荐) 利用css定义变量的方法,用var在全局定义颜色变量(需将变量提升到全局即伪类选择器 :root)然后利用js操作css变量,document.getElementsByTagName(‘body’)[0].style…

nodejs版本过高导致vue-cli项目无法正常运行解决方案

95% emitting CompressionPlugin ERROR Error: error:0308010C:digital envelope routines::unsupported 方法一:在使用 npm run dev之前使用 set NODE_OPTIONS--openssl-legacy-provider Error: error:0308010C:digital envelope routines::unsupported 解决方法…

UI自动化、性能、API测试一体平台:RunnerGo

UI自动化测试已经成为现代软件开发过程中不可或缺的一部分。它能够提供诸多优势,包括提高测试效率、减少人力成本、提升软件质量等。同时,可视化工具为UI自动化测试带来了更多便利和灵活性。RunnerGo近期上线脚本录制器,根据你的测试操作直接…

【基础计算机网络2】物理层——通信基础

【前言回顾】 【考纲内容】 一、物理层的基本概念 1.1 物理层的主要任务 物理层解决如何在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒介。物理层的主要任务:确定与传输媒体接口有关的一些特性。 1.2 物理层的一些特性 机械特性…

前端报错404,nginx正常、gateway没有转发请求

问题描述:前端报错 404 Not Found 原因:nacos中对应服务没有上线,下线后,可以启动本地服务,然后在测试上调试代码。!! 记住重启对应服务,也不会自动上线。

STM32CubeMX 配置 STM32F103 工程:通过DAC输出正弦波

说明:STM32CubeMX 配置 STM32F103 工程,通过DAC输出正弦波,参考代码可自动计算频率,自动计算正弦数据。 先参考这篇文章配置时钟、工程输出的设置: STM32CubeMX 配置 STM32F103 工程:通过DAC生成三角波、…

基于PLC的城市智能交通灯三路口控制系统设计26.06

摘要 可编程控制器(Programmable Logic Controller)简称PLC。是一种综合了通讯、自动控制和计算机技术发展而来的主要用于工业生产的自动控制系统。PLC运用数字运算操作系统,采用可编程序存储器,来于储存内部程序。执行逻辑运算、定时控制、顺序控制、计…

Elastic Stack--08--SpringData框架

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 SpringData[官网: https://spring.io/projects/spring-data](https://spring.io/projects/spring-data) Spring Data Elasticsearch 介绍 1.SpringData-…

Python速度大比拼:与主流编程语言的速度对决

在评估用于具体业务的编程语言时,经常考虑的一个关键指标之一是执行速度。Python以其简单性和可读性而闻名,但有时却因其性能而受到质疑。在这个领域,我们需要深入比较分析Python在执行速度方面与其他流行的编程语言相比的情况。 程语言执行速…

lucky-canvas实现老虎机、九宫格和大转盘抽奖

lucky-canvas是一款开源免费的基于 jscanvas 的前端插件,UI精美,功能强大,使用起来比较方便。 lucky-canvas官网https://100px.net/ 一、使用 注意:下例是vue中的应用,具体还有js和uniapp中的应用,详细查…

pandas plot函数:数据可视化的快捷通道

一般来说,我们先用pandas分析数据,然后用matplotlib之类的可视化库来显示分析结果。而pandas库中有一个强大的工具--plot函数,可以使数据可视化变得简单而高效。 1. plot 函数简介 plot函数是pandas中用于数据可视化的一个重要工具&#xff0…

2.ElasticSearch 高级查询语法Query DSL实战

1. ES高级查询Query DSL ES中提供了一种强大的检索数据方式,这种检索方式称之为Query DSL(Domain Specified Language 领域专用语言) , Query DSL是利用Rest API传递JSON格式的请求体(RequestBody)数据与ES进行交互,这种方式的丰富查询语法让…

药业“钉”上云端:与钉钉共舞数字化新时代

在信息化、智能化的时代背景下,药业行业的经营管理面临着巨大的机遇与挑战。一家药业公司经营范围广泛,拥有各种传统药物配方,同时现代化的新物流线和ERP系统支持公司能够更好的运营。该药业公司与无雀科技商谈后,决定与钉钉平台合…