Material Design 基础 - Applying density
cac55 2024-10-26 08:11 23 浏览 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
相关推荐
- Linux :远程访问的 16 个最佳工具(一)
-
通过远程桌面协议(RDP)可以访问远程Linux桌面计算机，这是Microsoft开发的专有协议。它为用户提供了一个图形界面，可以通过网络连接连接到另一台/远程计算机。FreeRDP是...
- Guacamole安装部署_guacamole简单搭建
-
Guacamole安装部署Guacamole简介Guacamole是提供连接远程桌面的解决方案的开源项目（也可以说是一个远程桌面网关），通过浏览器就能远程操作服务器，适用于Chrome、Firefox...
- 1-FreeRTOS入门指南_freertos+lwip
-
本专栏是根据官方提供的文档进行FreeRTOS的各个功能函数的说明，以及函数的使用本专栏不涉及动手操作，只是对原理进行说明，FreeRTOS基础知识篇更新完成会对如何在开发板上进行上手实战操作。这里不...
- Windows暂停远程桌面，这些工具可替代
-
Windows暂停远程桌面，这些工具可替代近日，Windows官方宣布将于2025年5月27日起，在Windows10和Windows11应用商店中下架“Microsoft远程桌面”应用。这一消...
- 现在做 Web 全景合适吗?_前端全景
-
作者：前端藏经阁转发链接：https://www.yuque.com/xwifrr/uxqg5v/cgclx0前言Web全景在以前带宽有限的条件下常常用来作为街景和360°全景图片可查看。它可以...
- 网页直连，MSTSC远程控制Windows新姿势!
-
不用安装软件，打开浏览器就能远程办公？今天要聊的是一种颠覆传统的远程控制玩法，直接用网页连接Windows电脑，无需下载客户端，手机、平板、Mac甚至Linux都能轻松操作。这可不是吹牛，结合MSTS...
- QQ出现大面积盗号，原因已查明，请抓紧改密码
-
你没有看错，QQ又上了微博热搜，这次比较严重了，QQ出现大面积盗号，多个QQ群出现yellow信息，其次导致多位成员被踢出，并且还被封号处理，到底怎么回事？请继续往下看。在6月26日晚上10点左...
- 我在淘宝花10块钱，买到了能玩“宝可梦”的Q群机器人
-
十一月雨|文我是个没事喜欢逛淘宝的人，虽然是个不怎么好的习惯，但总是能够发现一些奇奇怪怪的东西，这次我发现的是一种Q群机器人。Q群机器人，大多是基于腾讯SmartQQ协议实现的一种能自动回复、自定...
- Metasploit最实用的攻击模块"Meterpreter"
-
Meterpreter命令详解Meterpreter是Metasploit渗透测试平台框架中功能最强大的攻击载荷模块，在最新的Metasploitv4.5.0版本中，攻击载荷模块已经达到了25...
- 手机QQ再更新，上线了一个想让人“无法回避”的新功能
-
近日，手机QQ更新了V8.2.6.700版本，苹果iOS版和安卓版手机QQ上线了一个新功能：可以实时显示对方的手机电量以及充电状态。开通电量显示也很简单，长按主页左上方的头像，在在线状态中选择我的电量...
- 「网络安全」常见攻击篇(20)——点击劫持
-
什么是点击劫持？点击劫持(Clickjacking)技术又称为界面伪装攻击(UIredressattack)，是一种视觉上的欺骗手段。通常有两种方式：攻击者使用一个透明的iframe，覆盖...
- 曾利用驱动人生升级通道传播的木马下载器攻击方法再次升级
-
一、概述御见威胁情报中心1月25日再次监测到曾利用驱动人生升级通道传播的木马下载器攻击方法再升级。本次升级主要变化在于攻击模块，木马在之前的版本上，新增计划任务“DnsScan”，在其中将永恒之蓝攻击...
- QQ飞车手游:点券首个功能性宠物上架，实战稳定触发还不快入手?
-
随着版本的逐渐更新，点券宠物在道具模式发挥逐渐越来越小，曾经探讨点券宠物在道具是不是真的没有用？直到出现了波斯猫改变了，我对点券宠物在道具模式的看法，如今又一个强势点券宠物来袭，而且特性触发简单，还是...
- 工单系统设计实战(上):核心配置与效能提升
-
流程的标准化并非终点，而是研发效能持续革命的基石。当工单系统真正成为研发团队的“神经中枢”，每一次需求的精准流转、每一行代码的受控提交、每一次版本的可靠发布，都将汇聚成驱动产品持续进化的强大动力...
- 6个编辑PDF文档内容的工具(软件+网站)
-
在日常办公、学习和生活中，PDF文件因其格式稳定、跨平台兼容性强等特点，被广泛应用。但有时我们拿到PDF文件后，却发现需要修改其中的内容，总感觉有点难搞。其实PDF文档编辑修改也很简单，这里分享6个软...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)