Material Design(四)——赏析

Materia Design原则回顾

1. “原质化”

2. 隐喻

3. 鲜明、形象、深思熟虑

4. 有意义的动画效果

Material Design风格网站赏析

1> RumChata电商品牌网站

• 网址：http://www.rumchata.com/age-gate

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

1. 切换语言面板

• 高度(dp)最高，位于最上层
• 动画平滑轻快、平滑，渐入淡出

2. 主页图片

• 图像组建而成，让人意想不到、关注环境背景且包含隐喻

3. 轮播图

• 转场动画包含三元素：新入元素、淡出元素、通用元素，有视觉连贯性，细节（小图标）处理完美

4. 底部卡片

• 响应式交互中的元素响应，提升高度，增加阴影面积

5. 侧边按钮

• 转场动画和谐连贯，并夹杂有意思的细节处理，使人眼前一亮

2> Waaark.com设计网站

• 网址：https://waaark.com/
  
  △重视动画效果，反复强调——动画不只是装饰，它有含义，且能表达元素、界面之间的关系，同时具备功能上的作用

1. 按钮组件

• 高度最大，处于最上层，阴影处理
• 点击后的细节动画处理，体现出服务间的无缝切换

2. 随处可见的动画

• 给动画赋予意义，随鼠标移动智能切换效果，像屏幕上流动的波浪。但是，运动和变化都有加速和减速的过程，遵循物理世界的规律。

3> Serioverify.com企业官网

• 网址：https://serioverify.com/
  △无敌连贯优秀的动画

4> Codepen前端开发者的游乐场

• 网址：https://codepen.io/
  
  △不仅能挖掘到很多非常酷的Material Design设计案例，还能得到其用于构建设计或动画底层的HTML、CSS和JavaScript

1. 悬浮按钮设计

• 作为界面变形的枢纽，触发扩展新的界面

2. 响应式交互设计

• 表层、元素、径向响应都包含——水波按钮