Material Design（二）–动效和样式


Material Design动效

  • 动效是什么
    • 动效用于描述空间关系以及提供优雅流畅的交互效果。
  • 为什么动效很重要?
    • 引导用户在视图中的视觉焦点
    • 提示用户完成手势操作后会发生什么
    • 使应用更有个性、更优雅、更令人愉悦
  • 材料如何移动?
    • 运动中的材料有以下特性：
      • 反映敏捷
      • 自然的
      • 有意识的
      • 有意图的

Material Design色彩

Material Design 的配色灵感来源于现代主义设计和路标等标识，所以它的色彩选择都非常鲜亮，颜色在明度和纯度上都较为适中，在我们设计 APP 时这些颜色能够突出信息并且使人愉悦。在配色的时候注意三个原则：

  • 分级：我们可以使用不同的颜色来告诉用户哪些是可交互的，哪些是装饰。
  • 清晰：文本和背景一定要有色彩反差，也就是常说的「黑纸白字」和「白纸黑字」。
  • 品牌：一个产品的品牌与调性体现在移动端应用程序上就是主色调了，比如网易系的红色、QQ音乐的绿色等，能让人时刻都明白自己在什么产品上。
  1. 色表参考、
  • Material Design 提供给我们一大堆建议的色值可供参考，如果配色时您有选择恐惧症，可以尝试使用官方提供的配色色表作为参考。

  1. 界面中的色彩
  • 在界面中我们需要考虑顶部导航栏、底部应用栏和 FAB 在色彩上的关系。状态栏和顶部导航栏一般采用邻近色设计，类似 iOS导航栏和状态栏的一体化设计。底部应用栏和 FAB 在颜色上一般使用对比色，用以强调 FAB 的重要性。
  • 顶部的状态栏使用了深紫色，然后导航栏使用了稍浅一点的紫色，保持顶部色彩统一令用户感知这部分同属一个逻辑关系。

  • 底部应用栏
    • 这个案例中底部栏使用了辅助色藏蓝，而 FAB 使用了很明显的橙色。这样可以强调 FAB功能的重要性，并且底部应用栏藏蓝向后退让出用户关注焦点

  • 界面整体配色
    • 这个应用程序的主色调是粉红色（100）。因为粉色与黑色搭配会显得脏，所以深色使用了黑色的变体（粉红色900）

Material Design --排版

  1. 响应式布局
  • Material Design 也意识到了安卓屏幕分辨率太多的这种情况，它的解决思路是使用如网页中响应式布局的做法，根据屏幕进行等比例的缩小或放大。为了保证缩放的显示效果，Material Design 要求我们在设计之初就使用栅格系统（Grid Design），这样可以更有效地进行响应式布局。

  • `△ 栅格系统三要素：
    • ①列（Columns）
    • ②水槽（Gutters）
    • ③边距（Margins）`
  • 列
    • 列建立的时候要考虑整体的宽度，然后进行整除。我们做界面的时候可以和列对齐，就达到了所有宽度都是倍数或有联系的效果了。

  • △ 在360dp宽度的手机设备中，使用4个列

  • △ 而在600dp宽度的平板电脑中，通过响应式使用8个列
  • 水槽
    • 水槽是用来区别内容的，被作为列之间的留白使用的。在响应式布局中，列的宽度是不变的，然而水槽的宽度是可变的。

  • △ 在宽度为360dp的手机界面中使用16dp的水槽

  • △ 而在600dp宽度的平板设备中使用26dp的水槽
  • 边距
    • 边距是栅格和屏幕之间的距离，在不同的屏幕上我们可以根据手指点击方便程度给予不同的边距当做安全距离，同时也可以解决列和水槽无法被整除的一些情况

  • △ 在360dp的手机设备上使用了16dp的边距

  • △ 在600dp的平板电脑设备上使用了24dp的边距
  1. 可自定义栅格系统
  • 我们设计的界面由于内在的逻辑关系需要，不能直接套用很多固定的栅格系统版式。那么可以根据需求进行自定义栅格系统。比如信息间的水槽就要考虑信息之间的逻辑关系。所以不要死板地使用栅格系统，根据自己的需要去自定义才是好的设计。

  • △ 为了让用户感知图像是紧密相关的，这个案例中网格使用了8dp水槽

  • △ 为了让用户认为专辑是各个独立的，这里使用了较大的32dp水槽来创建列之间的分隔

  • △ 错误案例：这里使用了太大的水槽，使界面显得分裂


今天的分享就结束啦，谢谢！