看谷歌设计师如何使用Material

Material Design提供了设计APP时所需的整套工具和指南,帮助你在用户体验设计过程中遇到困难时做出明智的决策。但当你的app不那么符合特定的使用案例该怎么办?在谷歌,当设计师要做的产品不那么适合这份指南的时候会如何?

Material Design指南应当因事制宜。透过此文,我们将细看Keep和Inbox这两个谷歌app,来理解它们设计过程中是如何改变一些规则,领会Material Design指南的整体精神后进行实际应用。

Inbox探索印刷网格

在谷歌设计一款全新的电子邮件Web应用可谓一个相当有野心的任务,尤其是在Gmail已经存在的情况下。借助新的Materail Design规则,Inbox团队企图创建更密集的UI、更特别的用户体验和品牌标识。就在Inbox设计团队在整合最初的设计时,Material Design尚仍在开发中。这提供了他们一个绝佳的机会:建立Material Design网页标准,以解决密集UI的设计问题。

密集的UI设计

Inbox最初的设计不够灵活,因为在13英寸屏幕上只有7封邮件的空间。这相比较于Gmail能展示16-20封邮件而言实在太少。Inbox的视觉设计首席Tim Smith解释道:

“如果你分别打开Gmail和Inbox,在视觉密度上有很大区别。在内容和留白之间找到理想的平衡就成了我们最大的挑战之一。”

通过调整网格、行高、文字表达,Inbox成功建立了密集型网页UI的设计标准,做到能展示12-17封邮件,每个邮件存在于一张Material Design卡片中。字体大小和外观也被设计成因个人设备不同而有所调整改变。例如,电子邮件的主题行会根据屏幕尺寸的增长而变化字体尺寸。

INBOX为了在小尺寸屏幕上适应尽可能多的信息而设计,设定了密集网页外观的MATERIAL DESIGN标准。

利用颜色、图像和Icon承前启后

与Gmail比较,Inbox的视觉差异体现于头图的使用,头图会与捆绑的邮件内容相关。如果一个人使用Inbox来计划去纽约的一次旅行,举个例子,他们将会看到曼哈顿天际线的图片。Inbox还在左侧导航栏中使用了大量的icon,这些icon会根据它们在app中的功能被赋予不同的色彩。例如,当用户点击或轻触绿色的“完成”按钮,标题栏的背景色也会变成绿色,让用户持续的知晓变化和前后联系。

这种承前启后的图像使用也是Inbox不同的品牌体验的另一个鲜明特征。

INBOX会给绑定的邮件增加图像从而赋予它们意义。例如,去纽约旅行的飞机票和酒店预订邮件会配上城市的天际线照片。

为网页设计标题栏

对Inbox团队的另一个挑战是app标题栏的设计。最初的提议是设计成一个可调的标题栏,不会拉伸填满整个浏览器窗口,但取而代之的是会匹配内容的宽度。

“我们研究了这个方案的十几个变体,知道最终确定为你今天看到的全宽度标题栏。我们还通过几个原型的探索来决定最佳的搜索区域样式。”——视觉设计首席Tim Smith

既然Inbox的卡片能够缩放,这意味着每一次用户和邮件交互的时候都必须进行头部的调整。App的标题栏还包括了搜索区域和展示其他谷歌应用的菜单。这一处理方式让Inbox无需复杂化它的外观就能保持良好的响应。

Keep改变导航模式

Keep是一款跨平台的笔记应用,扩展折叠屏幕上的Material卡片让用户在添加笔记时集中注意力。改进过的底部导航栏也让人们能够通过一个轻触快速地新建笔记。

通过空状态和动效来鼓励用户行为

空状态主要出现在没有任何内容展示给用户的时候。Keep通过这种设计模式给用户一个空画布来起草他们的想法。贫乏的UI鼓励用户更多去探索app的搜索栏元素,扩展到显示图标筛选器;分类菜单让用户在列表显示和网格显示之间切换;左侧导航抽屉用于调整app的主要设置。卡片通过放大和缩小来提示用户其前后关系。

KEEP利用空状态来鼓励用户创建新的笔记。 “动效方面我们耗费了诸多努力,从笔记流动展示的动态,到你打开和关闭它们的方式。” ——谷歌KEEP软件工程师GENEVIEVE CUEVAS

为你的app使用正确的Material模式:底部导航栏VS.悬浮按钮(Floating Action Button)

当你重新设计一款app时,Keep团队的设计师和研发人员仔细研究了Material Design模式,并且最终应用了一些组件,比如让笔记与笔记区分开的卡片、让app设置更容易操作的左侧抽屉式导航和根据笔记内容不同而变化的菜单,比如在列表内容上加上勾选框以便于检查每条内容。总而言之,这些不同的设计模式最终创造了一个全新的功能体验,它建立在用户的使用场景和需求之上,是Keep这个应用的简单易用的关键。

再设计的过程中,Keep团队对Material核心导航做了一些实验,测试让一个可扩展的悬浮按钮替代现有的底部导航栏。需要指出的是,底部导航提供了简单的一键式动作来创建新的笔记。新型悬浮按钮则需求两步操作,第一步扩展选项,第二步才创建笔记。

“当我们发布了悬浮按钮后,一些用户抱怨没有了能够一键创建笔记的功能。” ——谷歌KEEP软件工程师GENEVIEVE CUEVAS

这个改变看似对app的老用户和已经习惯了单触式导航的用户而言是个退步。Keep在测试后最终放弃了诸如悬浮按钮这样的核心Material组件,这是一个很好的例子来告诉人们,在使用Material指南时应该坚决拒绝强行套用不适合产品的指南的行为。

指南不是法则

Inbox和Keep团队都利用了Material Design指南来帮助设计和开发应用。但当他们遇到一个对产品无用的案例时,他们会相应地调整设计。Material Design给了非常多的指引,这是建立于谷歌多年的UX之上的,但它不可能包罗万象。希望以上这些例子能告诉你,在符合其整体精神的基础上,设计时要按照实际需求来改变你的运用方式。

medium

译文地址:DDC

(0)

相关推荐

  • 看APP设计师如何思考?(二)

    小编:大家看过<看APP设计师如何思考?(一)>是否有收获?让我们继续来看看APP设计师如何思考下半部分吧 用各种各样的操作系统 当你设计移动应用的时候不能只参考自己的手机.如果你的目标是 ...

  • 五分钟了解谷歌全栈设计师打造的 Sketch 插件:Sketch Material

    前言 Sketch Material 是一个由谷歌全栈设计师 Siddhartha 设计开发的 Sketch 插件,能够生成复杂的 Material Design 风格的交互控件,比如按钮.表单.表格 ...

  • 谷歌动效设计师经验,做好动效设计并不难

    今天这篇文章,讲的又是大家感兴趣的动效知识.现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相关的资料,跟大家一起,紧跟趋势,把这块的能力掌握好! 之前有篇比较类似的文章,< ...

  • UI设计师人手一份(PHONE 6和APPLE WATCH原型下载)

    自iPhone 6 和Apple Watch那场的发布会后,很多UI设计师开始创作相关的原型素材,值得感谢的是,这些作品有好多都无私分享到了网上,不仅可个人使用,也可商用.今天我们收集了从这组免费的素 ...

  • 让概念设计来证明谷歌日历可以多强大!

    编者按:这篇文章是前谷歌设计师 Brian Nelson ,目前这位毕业于斯坦福的设计高手正在卡耐基隆梅大学继续研读人机交互.作为以为熟知Google的设计方向的设计师,对于Google Now.Go ...

  • 从小白到资深UI/UX设计师的7个步骤

    成为资深UI/UX设计师你需要看看这篇文章,一个国际设计会议分享大神的之谈,结尾有惊喜~ 最近,我收到了很多人的类似问题: 我怎样才能更好地了解UI/UX相关知识? 我是一个程序员/市场经理/社会媒体 ...

  • Material Design的7个重大更新

    本文总结了随着Google I/O的启动,Material Design迎来的7个重大更新 2018年5月9日凌晨1点,谷歌I/O开发者大会如期在美国加州山景城的海滨露天剧场拉开帷幕,谷歌不仅对AI技 ...

  • 一场成功的谷歌面试该如何应对?

    如果有机会的话,能在谷歌工作,多半会让很多人期待吧.那这座世界级大厂,又是如何面试设计师的呢?带着好奇心,我找到了这篇文章.原文作者目前已经成功入职谷歌,文章详细的介绍了她面试谷歌的经历,让我们跟随作 ...

  • Firefox打不开谷歌怎么办?

    素以“不作恶”自称的谷歌最近又被人抓到把柄了,因为Play Store居然不让Android版的Firefox浏览器访问。 近日有用户反映,当其试图使用Android版的Firefox浏览器访问Pla ...