Materia Design原则回顾
1. “原质化”
2. 隐喻
3. 鲜明、形象、深思熟虑
4. 有意义的动画效果
Material Design风格网站赏析
1> RumChata电商品牌网站
△结合了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
- 作为界面变形的枢纽,触发扩展新的界面
- 表层、元素、径向响应都包含——水波按钮