从拟物化到扁平,再到Material Design

Google I/O 2014提出Material Design,这段时间听到不少关于Material Design的解读,至此Google已经定位了自己的设计语言,我个人看来就是Android和iOS设计语言更加接近了。

说到Material Design,首先要说的是乔布斯倡导的拟物化设计(Skeuomorph),在智能手机初期,明确讲是触摸屏智能手机的初期,想让人们去接受和理解一个新的材质(电子触摸屏),最好的方式或许就是类比,这也是人类接触新生事物时最本能的想法,即这东西跟我们看到的过的什么类似?这这个时间拟物化能更好地给用户提示,这是相机,这是笔记本,这是图片。在早期的iPhone上你可以明显感觉到这一点。

然而拟物化也有他的缺点,对于设计师和用户来说,最大的缺点是:不统一。这是设计中的大忌,这会带来两个结果:

  • 同一套设计,对不同的人理解存在偏差。你可以参考iPhone中的游戏图标。
  • 设计师的水平对设计结果影响很大。你可以参考Apple自家的图标和一些第三方的图标。

 

苹果的乔纳森.艾维(Jonathan Ive)想解决的是第一个问题,即随着应用的大规模增加,各式各样的界面层出不穷,怎么样才能让iOS统一化这种用户体验,让设计师和用户可以很快的设计,理解并接受一个新的应用。其次乔纳森.艾维自己也说过,现在的触摸屏已经是一个“斯通见惯”物件了。最早的拟物化给用户提示的优点正在逐渐减小,而拟物化设计不统一这个特性带来的缺点却在逐渐放大。乔.艾维在iOS 7和即将发布的iOS 8中给出了自己的解。我想说的这不是推翻乔布斯的设计,我个人更觉得是乔布斯设计的一种进化,拟物化遇到了新的问题,乔纳森.艾维想办法解决,就是这样。

相反Google试图解决的是第二个问题,设计师的水平对结果影响很大,从丑陋的Android应用图标可见一斑。所以在会有小米和锤子的从绘图标运动。Google为此提出了Material Design。Material Design更像是WP扁平化的一个升级。但所带来的意义远超过扁平化,WP的扁平化唯一的优点就是来自Metro——辨识度很高,很容易做老人机。但是失去了美感,更重要的是被拍平了之后物件失去了质感,失去了物件的物理特性。Material Design将跑偏的Flat Design带回来了。用统一的,物理的,抽象的去作为自己的设计语言。

Material Design强调了:

  • 空间关系
  • 运动
  • 运动带来的空间关系的变化

Material Design中的阴影,是为了体现这种空间关键的手段,也是这样Floating Action Button才出现了。卡片式的堆叠才变的生动和合适起来。

然而物件不都是静止的,我们的交互(触摸)其实都是一种运动,运动带来了物件的变化。当我们按下了Button,阴影变小了,这反应了受我们按下的作用力两层之间的间隔缩小了。我们从排序列表是,当我们点击一行不动,这行变大了,我们知道它浮动起来了,我们可以在行间之间自由移动了。

我们以一个小示例结尾:

 

Reference:

http://en.wikipedia.org/wiki/Skeuomorph

www.google.com/design/spec/material-design/introduction.html

http://zhuanlan.zhihu.com/bigertech/19787211

从拟物化到扁平,再到Material Design,布布扣,bubuko.com

时间: 2024-08-08 06:16:07

从拟物化到扁平,再到Material Design的相关文章

直接拿来用!十大Material Design开源项目

介于拟物和扁平之间的Material Design自面世以来,便引起了很多人的关注与思考,就此产生的讨论也不绝于耳.本文详细介绍了在Android开发者圈子里颇受青睐的十个 Material Design开源项目,从示例.FAB.菜单.动画.Ripple到Dialog,看被称为“Google第一次在设计语言和规范上超越了Apple”的 Material Design是如何逐渐成为App的一种全新设计标准. 1. MaterialDesignLibrary 在众多新晋库中,MaterialDesi

十大Material Design开源项目

FYI: http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html http://www.csdn.net/article/2014-11-21/2822753-material-design-libs 摘要:本文详细介绍了十个Material Design开源项目,从示例.FAB.菜单.动画.Ripple到Dialog,看被誉为"Google第一次在设计语言和规范上超越

浅谈拟物化的巅峰与扁平化的崛起

众所周知,苹果在iOS7以及OS10.10之后变成了扁平化的设计,或Windows Metro.Android5.0开始,UI的设计风格好像大变了样,从一个个真实的图标变成了更加"抽象"的东西,并且从各厂商的logo也能间接的看出风格的变化 (QQ的图标变化,图片来自网络) (Google的logo变化,图片来自网络) 就列举这两个在国内外比较有名的logo. 如果我们和艺术的演化,我们能发现莫名的巧合,都是先模仿现实到极致,最后再用简单的东西来替代它,或者说由拟真变成了抽象,我觉得用

Android群英传笔记——第十二章:Android5.X 新特性详解,Material Design UI的新体验

Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高效率编码-第三方SDK详解系列(二)--Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能 这一章很多,但是很有趣,也是这书的最后一章知识点了,我现在还在考虑要不要写这个拼图和2048的案例,在此之前,我们先来玩玩Android5.X的新特性吧!

ANDROID L——Material Design详解(动画篇)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

[转]ANDROID L——Material Design详解(动画篇)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/details/40187203 Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习

ANDROID L——Material Design详解(UI控件)

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

[转]Android 5.0——Material Design详解(动画篇)

Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Android L中新增了如下几种动画: * middot;Touch feedback(触摸反馈) * middot;Reveal effect(揭露效果) * middot;Activity transitions(Activity转换效果) * middot;Curved motion(曲线运动) *

Material Design(一)--概述

Material Design是Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,我大致把它分为四部分: 主题和布局——ANDROID L——Material Design详解(主题和布局) 视图和阴影——ANDROID L——Material Design详解(视图和阴影) UI控件——ANDROID L——Material Design详解(UI控件) 动画——ANDROID L——Material Design详解(动画篇)