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的更多相关文章

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

    来自:http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 介于拟物和扁平之间的Material Design自面 ...

  2. 十大Material Design开源项目

    介于拟物和扁平之间的Material Design自面世以来,便引起了很多人的关注与思考,就此产生的讨论也不绝于耳.本文详细介绍了在Android开发者圈子里颇受青睐的十个Material Desig ...

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

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...

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

    Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验 第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...

  5. ANDROID L——Material Design具体解释(动画篇)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

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

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

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

    Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Andr ...

  8. ANDROID L——Material Design详细解释(UI控制)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lolli ...

  9. iOS之微博UI实例--拟物化设计(成功了90%)

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

随机推荐

  1. C#删除程序自身【总结】

    偶然看到一个可以自删除的程序,于是了解下如何实现.然后整理如下: 思路: 在.NET程序中,因为运行中的程序是受系统保护的,不能自己删除自身的,所以自删除的思路:  在关闭本程序之前启动新的进程打开另 ...

  2. 【Java每日一题】20161109

    package Nov2016; import java.lang.reflect.Method; public class Ques1109 { public static void main(St ...

  3. ListView 使用 LiveBindings 显示超过 200 条记录

    ListView 使用 LiveBindings 预设加载 200 条记录,这也许是速度的考量,但当需要全部加载的的情况时,该如何做呢?只需加入下面二行代码即可: FDQuery1.OptionsIn ...

  4. EL表达式错误attribute items does not accept any expressions

    解决方法是将 <%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%> 改成 <% ...

  5. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

  6. Python Sqlite3以字典形式返回查询结果

    sqlite3本身并没有像pymysql一样原生提供字典形式的游标. cursor = conn.cursor(pymysql.cursors.DictCursor) 但官方文档里已经有预留了相应的实 ...

  7. Aurelia – 模块化,简单,可测试的 JS 框架

    Aurelia 是下一代 JavaScript 客户端框架,利用简单的约定来激发你的创造力.凭借其强大的专注于开发经验, Aurelia 可以使您不仅创造惊人的应用程序,同时也享受这个过程.它经过精心 ...

  8. 编写jquery常用插件的基本格式

    写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...

  9. 27款后台管理页面设计 DIV+CSS+JS

    -----------. 演示: http://www.websjy.com/club/websj ... _61040268/index.htm http://www.websjy.com/club ...

  10. putty保持不掉线

    putty连接linux,一会就掉线了,然后再重新输入,比较麻烦. 参考http://www.putty.ws/putty-lianjie这篇文章解决. 如图,30表示每隔30秒putty会发一个空的 ...