百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Material Design 基础 - Applying density

cac55 2024-10-26 08:11 18 浏览 0 评论

前言

Material设计为提高密度改善用户体验的用例提供高密度间距指导。

用法

这些指南描述了如何以及何时应用密度。

原则

可扫描

密集的UI提高了查看和浏览大量内容的便利性。

优先考虑

密集的UI通过减少操作之间的空间来帮助用户集中精力。

可见的

增加密度可以在单个屏幕上容纳更多内容和动作。

组件密度指南

怎样使用组件密度

Material密度指南是了解何时以及为什么应用密度可以改善用户体验的资源。在代码的支持下,Material组件密度可以在刻度上进行一致调整。
组件密度中解释了使用密度标度的指导,平台支持可在组件密度实施指南中找到。

何时使用组件密度

用户与组件的交互方式应决定是否增加UI中的密度。当用户查看和交互大量信息时,高密度组件可以改善体验。
通过在屏幕上提供更多内容,增加列表、表格和长表单的密度,使信息更易于扫描、查看和比较。

何时不应该使用组件密度

任务和基于警报的组件不应增加密度。

重点任务

不要增加涉及重点任务的组件的密度,例如与下拉菜单或选择器交互。增加日期选择器等组件的密度会限制可点击空间,从而降低可用性。

警报和消息

不要增加Alert或消息组件的密度,例如snackbar或对话框。增加警报的密度会降低它们吸引用户注意力的效率。在对话框的例子中,当密度增加时,消息的可读性和突出性会受到影响。

布局

网格和组件密度

保持组件密度和网格布局之间的平衡。
要创建可扫描的内容组,请结合使用密度较低的网格布局和高密度组件。组件的密度越大,边距和边沟宽度就应该越大。将密集的布局网格与密集的组件相结合,可以让用户更难区分内容组。

将密度应用于组件

不应单独调整组件密度。相反,要始终如一地应用密度,以创建一个内聚组件集。当你调整一个组件的密度时,考虑一下这一变化将如何影响应用程序中的其他组件。
下面的工具演示了材质组件随三种密度设置(默认、舒适和紧凑)的变化。

密度标尺

密度比例允许您在需要时控制单个组件的密度。
“密度比例”已编号,从组件的默认密度0开始。随着空间的减少,比例会移到负数(-1,-2,-3),从而产生更高的密度。每个增量表示组件高度减少4dps。

不要从“密度比例”中选择破坏组件的数字。

间距法

当组件的密度增加时,填充和对齐保持一致,但尺寸会发生变化。增加时不要更改组件的填充.

  • padding
    增加密度时,不要改变组件的填充。组件填充会影响高度,减少填充会对用户交互产生负面影响。
  • Dimensions
    增加零部件密度时更改尺寸。构件尺寸会影响构件或图元的长度和高度。
  • Alignment

使用中心规格来对齐零部件容器中的图元。中心对齐元件允许在不需要额外对齐元件的情况下调整元件高度

分隔多个元素

当多个元素在一个组件内垂直堆叠时,使用4dp增量将它们分开。将已分组的元素置于组件容器的中心。

可达性

触摸目标适用于接收触摸和非触摸输入的任何设备。为了平衡信息密度和可用性,默认密度组件的触摸目标应至少为48 x 48 dp,每个目标之间至少有8 dp的空间。注意:在iOS上,44 x 44 dp是建议的触摸目标。

排版

线条高度

行高是文本行之间的间距。线条高度可以作为在排版布局中创建密度的一种方式。

Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客空间-Material Design

相关推荐

二年级下册语文课后三张表:词语表、生字表、识字,带注音

完整版电子资料,请关注后看我主页置顶贴获取为方便领取资料,请截图本页内容高清图片,可保存原图打印...

怎样把照片识别成文字?免费图片转Word的方法

有时我们去参加一些培训或活动,现场笔记来不及做都是先用手机拍照,后续再整理的时候重新打肯定特别耗时间,是否能直接将照片识别成文字呢?答案当然是肯定的,除了一些比较常用的聊天工具的截图文字识别外,更好用...

25春 | 二年级语文下册《写字表+识字表》,给孩子的预习带来帮助

25春|二年级语文下册《写字表+识字表》,给孩子的预习带来帮助完整版电子资料,请关注后看我主页置顶贴获取为方便领取资料,请截图本页内容高清图片,可保存原图打印...

二年级上册第五单元练字帖截图可打印,暑假练字必备打印版

部编版小学语文教材更加注重基础的掌握与积累,尤其在小学生认字和写字、阅读、古诗词等方面,提出了更高与更细致的要求。练字帖是以部编版小学语文教材的写字表做了汇总并以教材为范本制作写字表字帖字体、写字格规...

四年级上册第一单元练字帖截图可打印,暑假练字必备打印版

这练字帖是由部编版四年级上册教材整理而来的,字体、写字格规格、字号等与教材完全一致,部编版小学语文教材更加注重基础的掌握与积累。大家都知道家长朋友除了关心孩子的成绩之外,另外一个最关心的问题就是孩子...

部编版小学一年级下册语文第一单元识字第1课课件:春夏秋冬

亲爱的读者,今天为您带来的是部编版小学一年级下册语文第一单元识字第1课课件,本套课件是老师辛苦制作的呢。请大家看一下课件截图吧。大家都知道,现在的学校电教化水平很高了,可是,老师们自己制作一份课件非常...

老师的助手:部编版小学一年级下册语文第一单元识字第1课课件

亲爱的读者,今天为您带来的是部编版小学一年级下册语文第一单元识字第1课课件,本套课件是老师辛苦制作的呢。请大家看一下课件截图吧。大家都知道,现在的学校电教化水平很高了,可是,老师们自己制作一份课件非常...

四年级下册字帖语文识字表二类(电子版可打印)

亲爱的同学们好,这里是小学课堂秘籍今天为大家分享:四(下)语文识字表二类字贴23页。小学四年级是语文学习的重要阶段,识字是这个阶段语文学习的基础任务之一。2025新四下语文识字表二类字帖,是依据...

PDF解锁神器:用PyMuPDF与pdfplumber告别手动提取

前言大家好,今天咱们来聊聊如何用Python中的PyMuPDF和pdfplumber库,轻松提取PDF文件里的文本和元数据。你是否曾经在处理一个复杂的PDF文件时,感到信息难以触及,提取过程让人抓狂?...

四年级上册第3单元看拼音写汉字截图打印,暑假预习必备打印版

部编版小学语文教材更加注重基础的掌握与积累,尤其在小学生认字和写字、阅读、古诗词等方面,提出了更高与更细致的要求。练字帖是以部编版小学语文教材的写字表做了汇总并以教材为范本制作写字表字帖字体、写字格规...

二级上册第3一4单元看拼音写汉字截图可打印,暑假预习打印版

部编版小学语文教材更加注重基础的掌握与积累,尤其在小学生认字和写字、阅读、古诗词等方面,提出了更高与更细致的要求。练字帖是以部编版小学语文教材的写字表做了汇总并以教材为范本制作写字表字帖字体、写字格规...

五年级下册语文睡前默写每日一练小纸条(识字.写字.词语)电子版

亲爱的同学们好,这里是小学课堂秘籍今天为大家分享:五(下)语文睡前默写每日一练小纸条(识字.写字.词语),每天的练习围绕一篇或几篇课文展开,题型丰富。看拼音写词语和根据语境写词语,有助于学生巩固生字词...

微信图片识别文字怎么弄?分享两个小妙招

微信是目前全球使用最广泛的即时通讯软件之一,其提供的图像识别功能使得我们能够轻松地通过拍照或者截图来获取图像中的文字信息。本文将介绍微信图片识别文字的方法以及相关技巧。微信图片识别文字的方法微信图片识...

四年级上册第1一2单元看拼音写汉字截图可打印,暑假预习打印版

部编版小学语文教材更加注重基础的掌握与积累,尤其在小学生认字和写字、阅读、古诗词等方面,提出了更高与更细致的要求。练字帖是以部编版小学语文教材的写字表做了汇总并以教材为范本制作写字表字帖字体、写字格规...

25年新版三年级上册语文暑假练习识字表字帖

完整版电子资料,请关注后看我主页置顶贴获取为方便领取资料,请截图本页内容高清图片,可保存原图打印...

取消回复欢迎 发表评论: