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天前
|
开发框架 前端开发 开发者
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
【4月更文挑战第30天】Flutter框架支持Material Design和Cupertino Design两种设计风格,助力开发者创建吸引人的移动应用。Material Design基于现实世界物理规律,提供`Scaffold`、`Card`等组件,实现纸片效果和直观体验。Cupertino Design注重简洁图标和流畅动画,借助`CupertinoTabScaffold`、`CupertinoActivityIndicator`等组件呈现苹果风格界面。Flutter的`Theme`类允许统一管理应用样式,开发者可根据需求混搭两种风格,实现跨平台的优质用户体验。
【Flutter前端技术开发专栏】Flutter的Material Design与Cupertino Design风格
|
7月前
|
UED
什么是设计领域的 4 eyes design
什么是设计领域的 4 eyes design
24 0
JM
|
前端开发 图形学 C++
一个 web 开发者眼中的技术美术(TA—Technical Artist)
Techical Artist 的中文翻译是技术美术,相比于直译为技术艺术家,技术美术这个称谓让我感觉更加亲切,当然艺术家这个称谓也很好,很高级 :p ;在游戏行业里我们常常能听到美术这个职位,而技术美术,从字面意思我们就能够大概了解这是一个既需要懂技术又需要懂美术的职业。那么技术美术具体工作是什么呢?我去搜索了一番,发现没有非常权威的定义,不过可以找到比较普遍的说法是:给美术团队提供技术支持,从
JM
609 0
一个 web 开发者眼中的技术美术(TA—Technical Artist)
|
Android开发 开发者 Kotlin
安卓UI设计开发——Material Design(BottomSheetDialogFragment篇)
随着工作的不断深入,作者最近接触到了给APP换UI的需求,看着花里胡哨的新UI,想起了我之前无意在某设计网站上碰到的新词——高级设计感,紧接着,作者又在开发中发现了Google提出的Material Design
452 0
|
Web App开发 开发者
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
377 0
如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
|
设计模式 存储 传感器
Google Glass界面设计指南
Google Glass的主要用户界面是由分辨率为640x360px的卡片组成的时间轴。它提供了诸多功能,如呈现动态和静态卡片的标准模式,系统级语音指令以及Glass应用的通用启动方式。 用户通过滚动时间轴切换不同区域显示历史、当前和未来的卡片。新近产生的卡片会在最接近主页卡片的地方出现,而主页卡片是用户唤醒Glass时默认展现的第一界面。
157 0
Google Glass界面设计指南
|
机器学习/深度学习 安全 程序员
产品设计不是命题作文:Design Hackathon 方法介绍
在产品的定义阶段,产品发展形态的可能性是最多的。对于当前国内绝大多数移动互联网创业公司来说,在产品定义初期,往往都是由个别产品负责人或者创始人「决定」产品方向的。这种「命题式」的传统方法,会导致产品的大部分可能性被早早扼杀,很容易让产品设计陷入程式化的思维或是已有的产品模式。在这种方式下,不能说诞生不了好的产品,但突破和创新的难度将会大大提高。传统的「头脑风暴」,在发散思维时往往失于天马行空,忽略了落地的可行性。
275 0
产品设计不是命题作文:Design Hackathon 方法介绍
|
C#
开发Google Material Design风格的WPF程序
原文:开发Google Material Design风格的WPF程序 今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit。
2020 0