Material Design(一)

Material Design——初识

introduction

中文名	材料设计语言
外文名	Material Design
创立者	Google
目的	为不同平台设计一致广泛的感觉

what do?

作为谷歌的官方设计语言，包含了系统界面风格、交互、UI等,不仅能用于安卓设备的 UI 设计上、网页设计，甚至电脑客户端的 UI 都能运用上 Material Design。除了谷歌自家大量使用了 Material Design, 国外的很多公司也广泛运用 Meterial Design。

Font

字体是字母的集合。虽然每个字母都是唯一的，但是字母之间共享某些形状，字体表示字母集合中的共享模式。

• 字母部分的名称
  • 孔径
  • 上升
  • 基线
  • 帽高
  • 下降
  • 前导
  • 字母间距
  • 无衬线
  • 衬线
  • 杆
  • 行程
  • x高度
• 详解（部分）

  • 基线

    该基线是无形的线在其中的文本行休息。在材料设计中，基线是测量文本和元素之间垂直距离的重要规范。

    • 指定UI元素与基线的距离
      • 垂直对齐的参考基线，而不是边界框。这样可以在设计软件和平台上实现更准确的实施。
        
      • 测量与其他组件相关的文本
        

  • 帽高

    帽高是指从基线测量的字体扁平大写字母（如M或I）的高度。圆形和尖头大写字母，例如S和A，通过在帽高度上方略微过冲而被光学调整，以实现相同尺寸的效果。每种字体都有独特的帽高。

  • X-高度

    X高度是指字体的小写x的高度，它表示字体中每个字形的高度或短度。具有高x高度的字体在小字体大小时具有更好的易读性，因为每个字母内的空白区域更清晰。

  • 上升和下降

    Ascenders是一个向上的垂直笔划，在某些小写字母中发现，超出了帽子高度或基线。下降是这些字母中的向下垂直笔划。在某些情况下，当线高（基线之间的垂直距离）太紧时，可能会发生这些笔划之间的碰撞。

设计案例及资源网站

• RumChata : http://www.rumchata.com/age-gate
  

  这个网站结合了MD设计的物理美学风格，通过创建与现实事物中相似的外观及功能，给用户提供了一种简约色彩缤纷、但看起来简单直观的体验。

• Waaark.com : https://waaark.com/
  

  MD重视动画效果，它反复强调一点：动画不只是装饰，它有含义，且能表达元素、界面之间的关系，同时具备功能上的作用。下面这个网站的首页动画，可以随鼠标的移动进行智能切换，像屏幕上流动的波浪，但运动和变化都是由加速及减速过程，也是遵循了现实世界中的运动规律。