Google 设计师谈论 Material Design

简介:

image

扁平化设计是一个过度滥用的词汇,但是,它的风行反映了设计界的一种趋势,人们正在快速抛弃拟物化设计。有种观点是,在触控界面发展初期的时候,人 们需要熟悉感,而模仿现实的界面能够做到这一点。当人们已经习惯了触控界面之后,就不需要现实世界的隐喻了。因此,在软件设计上,我们应该追求更加电子化 的界面,不再被物理世界的规则所限制。

在这种情况下,Google 的 Material Design 似乎是逆势而行。它以现实世界的纸墨为隐喻,强调了阴影和层次,用动画效果代表现实的力反馈,试图把物理世界的规则带回电子界面。Material Design 的想法从何而来,意义是什么?针对这些问题,The Verge 网站采访了 Google 的几位设计师。

Material Design 的灵感来自一次设计探索。Google 搜索主设计师 Jon Wiley 与同事 Nicholas Jitkoff 看着 Google 产品中无所不在的卡片时,想到了这样一个问题:如果你把一张卡片划走,下面是什么东西?从这个想法出发,设计团队思考了软件的组成要素。他们开始把卡片和 背景看做是真实存在的、可以接触的物品。

如果这些卡片是真实的物品,那么,应该有一些规则,用来限制它们在屏幕上的表现。于是,团队创造了一种隐喻式的材料,类似于魔法纸张。它是扁平的,浮动在背景上面,并且是有阴影的。当你移动它们的时候,它们会被划走而不是凭空消失。它们不会自己移动。

image

除此之外,他们还决定使用大胆、明亮的颜色和大字体。这就是 Material Design 的起源。不过,Wiley 和 Jitoff 说,这种新美感也是 Google 设计理念的进化。在此之前,Google 已经有过在公司统一设计的“肯尼迪项目”,Material Design 是进一步的发展。“整体来说,平台给人一种多彩的感觉,”Jitoff 说,“它是多彩的,正如 logo 是多彩的,它是简单的,正如主页是简单的。”

在公司设计副总裁 Matias Duarte 看来,Material Design 使公司的想法统一了起来,但同时,它也是一种限制。限制使得设计决策更容易,更一致。例如,在 Material Design 的规定下,卡片是不能翻过来的。这就好像说,软件是真正的物品,而手机中没有翻转卡片的空间。“设计就是在限制内找到方案,”Duarte 说,“如果没有限制,那不是设计——是艺术。”

Google 的设计师们拒绝给这种虚拟材料命名。它虽然遵循一些物理规则,但是并非完全模仿现实纸张。它能够展示动画效果,帮助用户理解自己在应用中的位置。“许多软件给人的感觉是电影或电视中的跳跃剪辑,” Wiley 说。这会使人们失去时间和空间感。

在应用上,你需要一种接近于舞台剧的东西。他说,“这是场景转变,舞台上发生的事情是经过编排的,有过渡的,而且是有意义的。”

Material Design 的野心,不仅仅是统一 Google 的产品,或者给 Android 一个新面貌。从深层次来说,它是对人机交互方式的一种思考。Xerox Parc 给了我们一个模型,让我们理解计算机是如何工作的,苹果把我们从键鼠时代带到触控时代。Google 相信,它的软件设计模型能够让我们再次前进。通过 Material Design,我们能够形成一种认知模型,快速适应日益增多的新设备。

相关文章
|
6月前
|
UED
什么是设计领域的 4 eyes design
什么是设计领域的 4 eyes design
23 0
|
11月前
|
数据可视化 前端开发 UED
Ant Design、AntV 上榜了!
Ant Design、AntV 上榜了!
156 0
|
存储 数据可视化 定位技术
Google Earth 背后的故事
Google Earth 背后的故事
154 0
Google Earth 背后的故事
JM
|
前端开发 图形学 C++
一个 web 开发者眼中的技术美术(TA—Technical Artist)
Techical Artist 的中文翻译是技术美术,相比于直译为技术艺术家,技术美术这个称谓让我感觉更加亲切,当然艺术家这个称谓也很好,很高级 :p ;在游戏行业里我们常常能听到美术这个职位,而技术美术,从字面意思我们就能够大概了解这是一个既需要懂技术又需要懂美术的职业。那么技术美术具体工作是什么呢?我去搜索了一番,发现没有非常权威的定义,不过可以找到比较普遍的说法是:给美术团队提供技术支持,从
JM
577 0
一个 web 开发者眼中的技术美术(TA—Technical Artist)
|
Android开发 开发者 Kotlin
安卓UI设计开发——Material Design(BottomSheetDialogFragment篇)
随着工作的不断深入,作者最近接触到了给APP换UI的需求,看着花里胡哨的新UI,想起了我之前无意在某设计网站上碰到的新词——高级设计感,紧接着,作者又在开发中发现了Google提出的Material Design
434 0
|
Web App开发 开发者
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
372 0
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
|
设计模式 存储 传感器
Google Glass界面设计指南
Google Glass的主要用户界面是由分辨率为640x360px的卡片组成的时间轴。它提供了诸多功能,如呈现动态和静态卡片的标准模式,系统级语音指令以及Glass应用的通用启动方式。 用户通过滚动时间轴切换不同区域显示历史、当前和未来的卡片。新近产生的卡片会在最接近主页卡片的地方出现,而主页卡片是用户唤醒Glass时默认展现的第一界面。
153 0
Google Glass界面设计指南
|
C#
开发Google Material Design风格的WPF程序
原文:开发Google Material Design风格的WPF程序 今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit。
2007 0