椿茂网络是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:400 8822 558(免费SEO检测 保证收录 保证排名)
椿茂网络微信号
椿茂网络
网站设计News
公司网站建设

看谷歌设计师如何使用Material

关键词:佛山优化公司 作者:智唯建站 | VISITORS: | 来源:
07Aug
2017
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的设计问题。

  密集的UI设计

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

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

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

01

 

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

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

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

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

  

QQ截图20171213101847

 

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

  为网页设计标题栏

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

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

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

  Keep:改变导航模式

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

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

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

  

QQ截图20171213101914

 

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

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

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

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

我要咨询做网站
网站建设定制案例
网站设计 相关的文章
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • +86 0757 81089123
    400 028 3820
品牌网站定制
营销型网站定制
公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

椿茂建站 感恩回馈

咨询送礼现在提交,将获得椿茂网络策划专家免费为您制作
价值6888元《全网营销方案+优化视频教程》一份!
下单送礼感恩十周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线400-8822-558
合作意向表
您需要的服务
您最关注的地方
预算

直接咨询