Material Design 在移动设计中较好的尺寸设置方式

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

Material Design 是 Google 设计语言,旨在提高移动应用程序和 Web 应用程序的视觉和交互体验。在 Material Design 中,尺寸设置是一个重要的设计元素,借助于统一的尺寸应用程序,能够提高应用程序视觉上的一致性。本文将会介绍 Material Design 中在移动设计中较好的尺寸设置方式,并提供示例代码进行演示。

Pixels vs Dips

在移动应用程序设计中,我们通常使用一个称为 dp 或 dip 的度量单位,这代表了设备独立像素。与像素不同,这个单位在不同设备上的大小是一致的,并且能够自适应不同的屏幕密度。所以,我们应该在设计中使用 dp 单位,而非固定像素大小。例如,在 Android 平台上,我们可以使用 Android 设计规范 中提供的尺寸来设置 dp 单位。

基础尺寸

在 Material Design 中,最基础的尺寸是 8dp,它被称为基础的密度无关单位。8dp 尺寸用于图标的大小、内边距和间距。使用这个单位可以使应用程序间距和尺寸具有一致性。例如,一个应用程序中的所有内边距都应该是 8dp。

大小材料

在 Material Design 中,大小材料是定义的标准尺寸集合。它们需要适用于所有不同屏幕密度的设备,并且应该相对布局所支持。这意味着 UI 元素应该基于这些标准尺寸进行定位和布局。Material Design 尺寸定义的大小材料及其含义如下:

  • 小型(12dp): 这是一种适合在屏幕上进行小规模操作的元素,例如按钮、输入框和文本标签。

  • 中型(16dp): 这个大小适用于包含文本和图像的元素,例如卡片和平铺。

  • 大型(24dp): 这个大小适用于更复杂的 UI 元素,例如对话框和活动汇总。

  • 非常大(32dp): 这是针对具有重要突出显示的 UI 元素,例如弹出菜单、图标和主应用程序标志。

Margin 和 padding

Material Design 中的 margin 和 padding 是定位元素的两种方式。Margin 是指 UI 元素之间的空间,而 padding 是指 UI 元素内部的空间。我们应该使用相同的 margin 和 padding 值,以保持设计的一致性。

例如,在一个文本输入框中,我们可以使用以下的 margin 和 padding 值:

---------
    -----------------------------------
    ------------------------------------
    ------------------- ---- -----
    ----------------------
    ------------------------------
    ---------------------------------
    --------------------------------
    --------------------------------- --

结论

Material Design 中的尺寸设置是一个重要的设计元素,它可以提高应用程序在视觉上的一致性。设计人员应该使用 dp 或 dip 非固定像素大小。基本尺寸应该使用 8dp,而标准尺寸集合可以使用 Material Design 中定义的大小材料。Margin 和 padding 值应该统一,以保持设计的一致性。

本文转载自 Material Design Margin and Padding Sizes Explained.

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671798f0ad1e889fe2228e65


猜你喜欢

  • Koa 框架中文件上传的实现方法解析

    文件上传是 Web 开发中必不可少的功能之一,而在 Koa 框架中实现文件上传也是非常方便的。本文将介绍 Koa 框架中文件上传的实现方法以及一些需要注意的细节。 1. 前置条件 在开始之前,你需要已...

    19 天前
  • 使用 Webpack 打包 Vue 项目遇到文件大小超出限制怎么办?

    1. 背景 随着 Vue.js 的流行,越来越多的前端项目都是基于 Vue.js 来构建的。而在项目的打包过程中,使用 Webpack 是非常常见的。然而,有时候在打包 Vue 项目的过程中,可能会遇...

    19 天前
  • Material Design 如何提高用户转化率

    引言 Material Design 是一种由 Google 开发的视觉设计语言,致力于提供一致的用户体验和视觉效果。它的设计原则旨在简化和统一用户界面,并为用户提供更加直观和自然的操作体验。

    19 天前
  • 解决在环境中运行 ECMAScript 2017 (ES8) 代码时可能会遇到的问题

    随着 JavaScript 的发展,ES8 已经成为了前端开发的主流标准之一。然而,在环境中运行 ES8 代码时,可能会遇到一些问题。本文将介绍一些常见的问题并提供解决方案。

    19 天前
  • Node.js中的命令行参数解析技术

    在Node.js应用程序中,命令行参数解析是非常常见的。当我们需要传递一些参数给Node.js程序时,命令行参数解析可以帮助我们轻松地获取这些参数并进行相关的操作。

    19 天前
  • chai.js 的测试速度优化技巧

    在前端开发中,测试是非常重要的一环。而在测试中,断言库是不可避免的。chai.js 作为一个流行的断言库,不仅提供了简单易用的 API,还支持多种测试方式,如 TDD 和 BDD,以及多种断言风格。

    19 天前
  • Go 性能优化:提升应用程序性能的几种方法

    在编写应用程序时,性能永远是一个关键因素。Go 作为一种快速、高效的编程语言,帮助开发者构建高性能应用程序的能力非常强大。然而,在实际开发中,对于应用程序的性能优化仍需要专业性的指导与方法。

    19 天前
  • 使用 ES10 中的 Array.prototype.sort() 方法按属性对对象数组进行排序

    在开发前端应用程序时,JavaScript 中的数组常常用来存储和处理大量的数据,解决了数据的组织和存储的问题。当然,在开发过程中,我们要了解如何对数组中的数据进行排序,避免不必要的错误和混乱。

    19 天前
  • enzyme 如何测试在 React 组件中的基于元素的动画

    随着 React 技术的日益成熟,动画在前端领域的应用越来越广泛。但是,在编写动画时,如何确保其正确性、流畅性和可维护性,以及如何进行自动化测试,则是一个挑战。在测试 React 组件的动画效果时,e...

    19 天前
  • 在 React 中实现自定义组件

    React 是一种流行的 JavaScript 库,用于构建动态用户界面。它提供了一个可复用的组件系统,使开发人员可以在应用程序中创建自定义组件。在本文中,我们将介绍如何在 React 中实现自定义组...

    19 天前
  • Cypress 报错解决:refused to connect to [::1]:9222

    Cypress 是一个快速、易用且可靠的前端端到端测试工具。但是,在使用 Cypress 进行测试的过程中,可能会遇到一些报错。其中比较常见的一个报错就是 "refused to connect to...

    19 天前
  • Koa 异步 I/O 的性能瓶颈与解决方案

    Koa 是一个基于 Node.js 平台开发的下一代 web 框架,具有轻量、简洁、可扩展等优点,同时支持异步 I/O 和 async/await 等语法,让编写异步代码更加简单和优雅。

    19 天前
  • 用 CSS3 实现响应式 SVG 背景图的调整效果

    引言 在现代的网页设计中,响应式设计已经成为必不可少的一部分。响应式设计要求网页页面能够适应不同的设备屏幕大小,从而更好地适配不同的设备。在这种情况下,SVG(Scalable Vector Grap...

    19 天前
  • Sass 函数库的开发和优化方法

    作为一名前端工程师,我们经常需要编写一些重复的 CSS 代码,从而造成了代码的臃肿和难以维护。Sass 函数库可以帮助我们编写可重用、易维护的代码,提高开发效率。本文将介绍 Sass 函数库的开发方法...

    19 天前
  • 踩坑记录:Webpack 导致无法引入依赖包

    在前端项目中,我们通常会使用 Webpack 来进行代码的打包。然而,在使用 Webpack 的过程中,有时会遇到一些琐碎的问题。本篇文章将讨论一种常见的问题:Webpack 导致无法引入依赖包。

    19 天前
  • Material Design 与响应式设计的结合实践

    简介 Material Design 是由 Google 推广的一种设计风格,它具有直观、自然和有层次感的特点,使得网站和应用看起来更美观和易用。响应式设计是指一个网站能够根据不同设备的屏幕大小和分辨...

    19 天前
  • 解析 ECMAScript 2017 (ES8) 中的 Shared Memory 和 Atomics

    前言 Shared Memory 和 Atomics 是 ECMAScript 2017 (ES8) 中新增的特性,这些特性主要为 Web Worker 和 JavaScript 线程之间的通信提供...

    19 天前
  • 如何使用 Node.js 管理和部署 Web 应用程序

    Node.js 已经成为了前端开发的重要工具之一,它可以帮助我们创建和管理各种 Web 应用程序。本文将介绍如何使用 Node.js 来管理和部署 Web 应用程序,包括如何搭建环境、如何使用 npm...

    19 天前
  • 在 Web Components 中使用 React 的技巧

    简介 Web Components 是一种用于开发 Web 应用程序的新技术。它通过将组件化的概念引入 Web 开发中,使得 Web 开发者可以创建可重用的自定义元素,并通过 JavaScript 组...

    19 天前
  • 如何在 Jest 中使用 Babel 转换 ES6

    随着 JavaScript 语言的不断发展,ECMAScript 新版本的发布,前端项目中使用 ES6 已经成为了一种趋势和标配。然而,不同的浏览器可能不支持 ES6 中的一些新特性,这就需要通过 B...

    19 天前

相关推荐

    暂无文章