欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

看谷歌设计师如何使用Material

发布时间:2017:12:13 19:00:46 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1490个文字,预计阅读时间4分钟
导语
Material Design提供了设计APP时所需的整套工具和指南,帮助你在用户体验设计过程中遇到困难时做出明智的决策。但当你的app不那么符合特定的使用案例该怎么办?在谷歌,当设计师要做

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

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

  Inbox:探索印刷网格

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

推荐阅读:如何进行 APP 设计改版 – 日常练习篇

  密集的UI设计

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

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

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

看谷歌设计师如何使用Material

 

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

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

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

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

  

看谷歌设计师如何使用Material

 

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

  为网页设计标题栏

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

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

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

  Keep:改变导航模式

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

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

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

  

看谷歌设计师如何使用Material

 

  KEEP利用空状态来鼓励用户创建新的笔记。

  “动效方面我们耗费了诸多努力,从笔记流动展示的动态,到你打开和关闭它们的方式。”

  ——谷歌KEEP软件工程师GENEVIEVE CUEVAS

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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:以物业公告为例,谈谈功能设计的一些事

下一篇:2018年用户体验设计趋势

  • 18893 文章总数
  • 2301277访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信