支持支付宝、微信、对公转账等多种支付方式
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)
看了这篇文章的人还看了

- 全部评论(0)
下一篇:2018年用户体验设计趋势
- 3277140个美食主题网页设计欣赏
- 26632网站活动Banner如何设计,才能吸引用户眼球?
- 23273优秀的海报作品设计分析总结
- 1709420个中国风网站设计欣赏
- 17005微信编辑器哪个强 秀米vs135测评
- 1673626款个人网站设计作品欣赏
- 1640720个漂亮的政府网站设计欣赏
- 1574815个高端网站设计欣赏
- 13299企业网站制作中一般常见的栏目有哪些?
- 13241025个国外科技网站设计欣赏