您的位置: 首页  >  文章  >  Material Design(四)

Material Design(四)

分类: 文章 • 2023-10-13 13:10:11

Material Design知识回顾

目录
  • Animation
  • Style
  • Layout
  • Components
补充
单位
  • DP单位

    Dp 是独立密度像素的简称（Density-independent pixels）,是安卓设备上的基本单位。

  • SP单位

    SP 是独立缩放像素的简称（Scale-independent Pixel）。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是正常状态时，1sp=1dp=0.00625英寸，而当文字尺寸是大或超大时，1sp就大于1dp。就好比我们在电脑中调整桌面字体后，只有字体大小发生改变，而窗口和图标不会改变一样。默认情况下1SP=1DP。所以我们在设计安卓界面时，标记字体的单位选用SP单位。

dp和sp都是安卓开发单位，dp是长度单位，sp是文字单位。1dp=1sp。
Material Design(四)

  • dp和px之间的关系
    1dp是屏幕密度为160dpi时的1px，也就是说在密度值为160dpi的情况下，1dp=1px。

    上图中，以mdpi（160dpi）为基准，和其他密度的比例关系是：

    3/4 : 1 : 1.5 ：2 : 3

    dpi ：mdpi ：hdpi：xhdpi : xxhdpi

    以1920*1080（我认为是当前主流分辨率）为例：
    在1920里，1dp=3px，上述规范中，状态栏高度是24dp，所以在设计稿中状态栏的高度就是72px。其他的以此类推。

  • dpi就是一英寸显示多少像素点，也就是dpi=像素/英寸（对角线长度）

    以19201080，5.0英寸的屏幕为例：
    先利用勾股定理（A的平方=B的平方+C的平方），我们可以算出来对角线的像素是2203px，然后除以5等于440，所以，分辨率在1920    1080，5.0英寸下的dpi是440dpi。

设计理念

Material Design 的设计中有很多设计理念是需要我们深度学习的，我们要学习这套理论的思维模式。

  • Z轴的概念

    什么是三维 ? 三维就是X轴（左右）、Y轴（上下）、Z轴（前后）组成的立体世界，而二维就是只有X和Y轴的平面世界。我们知道手机界面是一个平面二维的空间，而 Material Design 通过二维的一些表达手段，比如投影、动效等构建出了Z轴（前后）的概念。

    Material Design(四)

  • Z轴的投影

    不同投影暗示了不同元素的高度，我们可以理解为如同我们桌子上的几张纸层叠在一起，那么我们认为重要的纸在其他纸张之前，它的投影是最高的。所以在 Material Design 中投影最高的代表Z轴最高值，也是最重要的内容。

    Material Design(四)
组件

组件是 Material Design 区别于 iOS 等其他设计的重要标识，当我们看到 FAB 时我们就知道这是 Material Design；当我们看到底部栏的独特设计时我们也能知道这是 Material Design。

  • 悬浮球 FAB（Buttons: floating action button）

    • 悬浮球可能是 Material Design 中最明显的标志了。

      一个圆圆的小球固定在屏幕的某个位置，它特别显眼，让你无法忽视它。同时它也是当前页面最重要的主线操作，比如在邮箱的页面中，FAB 很可能是发邮件的按钮。并且一个页面中只有一个 FAB，这让这个小球更加显眼了。

      Material Design(四)

    • FAB是一个页面中最显眼的设计，但并不是每个页面都需要FAB
      Material Design(四)

    • FAB的尺寸

      FAB 默认尺寸 (56 x 56dp) 和 Mini尺寸 (40 x 40dp)都可以选择，在不同的页面和不同的情况下我们可以使用不同大小的FAB。

      Material Design(四)

    • 可交互的FAB

      FAB 可以是一个跳转的功能，也可以是一个展开子菜单。这个有趣的交互是从Path应用中学到的：点击前是某个图标的样式，点击后 FAB本身变成了关闭按钮，而且会弹出2个以上的子菜单图标矩阵。

      Material Design(四)

  • 底部应用栏（App bars: bottom）
    底部应用栏用于显示屏幕底部的导航和按键操作。底部应用栏比较类似 iOS设计中的 Tab栏，但是不同于Tab栏的是底部应用栏通常不会等分为几份，而是放置一些 FAB、导航等的功能性图标，并且讲究排版的节奏感。
    Material Design(四)

    • 应用

      底部应用栏上的图标必须为2个以上（不算FAB）

      Material Design(四)

    • 组成
      ①容器
      ②导航抽屉控制
      ③浮动操作按钮（FAB）
      ④动作图标
      ⑤更多菜单控件
      Material Design(四)

  • 顶部应用栏（App bars: top）
    顶部应用栏和我们 iOS 中所使用的导航栏很类似，但不完全一样。顶部应用栏中标题并非居中而是像报纸一样左对齐的，这是因为 Material Design 认为阅读应该如在报纸上一样按照从左到右的顺序排列。并且图标左侧最多可放置一个系统图标，右侧可放置多个系统图标。
    Material Design(四)

    • 组成
      ①顶部栏容器
      ②抽屉式导航图标（可选）
      ③ 标题（可选）
      ④系统图标（可选）
      ⑤更多按钮（可选）
      Material Design(四)

    • 突出标题

      顶部应用栏可改变高度以凸显标题（类似苹果的大标题设计）。同时这么做也可以让标题容纳更多的文字，比如新闻APP 就需要这个特性。

      Material Design(四)

  • 卡片式设计（Cards）
    卡片式设计同样是 Material Design 的显著标志。其实卡片式设计我们可以理解为一个小的单元，在这个单元里的信息逻辑关系更加紧密。如果一个单元的信息过多很容易让用户在阅读时发生串行现象，卡片式设计就能有效地规避这个问题。

    • 组成
      ①容器卡容器。它容纳所有卡元素，容器的尺寸由元素占据的空间决定。
      ②缩略图（可选）。缩略图可以放置头像、图标和logo。
      ③标题文字（可选）。标题文字通常是卡片中最重要的标题，一般文字较大。
      ④小标题（可选）。小标题可以放置文章署名或标记位置等信息。
      ⑤多媒体（可选）。卡片可以包括各种媒体，包括照片和视频等。
      ⑥辅助文字（可选）。通常是对于多媒体的描述信息。
      ⑦按钮（可选）。
      8.图标（可选）。
      Material Design(四)

    • 卡片设计的分割线

      如果卡片中的内容元素不属于一个逻辑，那么可以使用一条分割线来分隔成两个区域。但是注意，分割线需要使用非常轻的颜色，并且左右不要通过去，以保证卡片的完整性。

      Material Design(四)

    更多参考

相关推荐