• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > Google I/O即将到来,对于Material Design 2.0我做了这些预测

Google I/O即将到来,对于Material Design 2.0我做了这些预测

作者:Raveesh Bhalla 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含Google,Material Design,经验分享,设计指南,设计规范等相关知识,Raveesh Bhalla希望在学习及工作中可以帮助到您

Raveesh Bhalla:也许再等上几周,在 Google I/O 之后再来聊 Material Design 2.0 会是一件更好的事情。但是在发布之前预测一下,压个题,似乎也是一件很好玩的事情,不是吗?

作为一个正在设计 Android 应用的开发者,自打有 Material Design 2.0 发布的传言流出以来,我就一直在关注 Google 旗下的各大应用和网站,试图从中找到一些端倪。

下面是 Google 在过去半年间发布或者改进过的部分产品列表:

  • Google Play Games
  • Google Pay
  • Gmail
  • Google Tasks?mobile apps
  • Google I/O Schedule
  • Bulletin(早期预览版)
  • Android P(开发者预览版)

这份清单能够帮你更好地理解文章的后续部分。而更重要的地方在于,你得明白 Google 设计团队的组织结构,在此必须澄清一个常见的误解:Material Design 团队并不负责 Google 所有的设计。

相反,Material Design 团队的工作重心其实是完善出可以不断发展的设计准则,或者说指导方针。说是指导方针,是因为 Material Design 团队提供的是设计方向,具体到产品和项目上,具体执行的团队并不需要完全遵循设计规范中的细节,确保他们拥有自己的特征和风格。

接下来,是我对于 Material Design 2.0 的预测。我将我的观察和分析按照不同的主题进行了基本的划分,确保可以更容易被理解。

Material Design 是方向指南而非设计铁则

在过去几年当中,设计界对于 Material Design 的最常见的批评恰恰是它的「规范性」。太多的 Material Design 风格的应用长的一个样,许多品牌都失去了他们自己表达个性的方式。

在最近一段时间以来,Material Design 和 Google 的设计团队一直在试图解决这个问题,消除这样的影响,而我也在去年的 Chicago Roboto 的活动上提到过这个问题。产品设计是需要通过差异来凸显各自的独特性的。

Google 的这些应用都在一定程度上保持了整个品牌的一致性(比如字体),但是每个应用在视觉和细节上又有各自的特点,确保和其他的应用不同。这就是为什么说 Material Design 是方向指南而非设计铁则了,这在 Material Design 1.x 中是非常重要的组成部分,而在 Material Design 2.0 中将会被反复强调。

关键导航和主要交互下移到屏幕底部

随着 Material Design 官方设计规范中开始突出底部导航设计的时候,社区当中有不少人吐槽说 Material Design 这么下去就越来越像 iOS了。其实这个事情背后的缘由很简单,随着移动端设备越来越大,导航元素必须得向下移动,确保更方便单手操作。

不过这样一来,因为手机的边框变得越来越窄,屏幕越来越长,问题也变得更加复杂。许多手机的屏幕长宽比都要超过 2:1了,所以,在即将到来的 Material Design 2.0 当中,导航下移将会是更为明显的趋势。

Google Tasks 和 I/O Schedule 两个应用当中,这种趋势表现得非常明显。此外,在新的 Material 组件库当中还有一个名为 ButtomAppBar 的组件,你可以在 Joe Birch 的文章当中看到,他们花费了许多时间来创建模式,通过这些模式,动作项目和悬浮动作按钮可以共存。

许多不同形式的悬浮按钮

圆形的悬浮按钮已经成为了 Material Design 的专属元素了。不过也正是因此,它也经常被滥用。这种状况主要因为缺乏理解:许多应用当中,并不是真的需要去添加这样一个按钮。

如果 APP 中需要基于上下文环境,需要引导用户执行某个操作(比如添加新任务、过滤、收藏、播放、编辑等),设计师的目标是创建一个特定的按钮,有的时候他们就会使用这个圆形按钮,实际上,这个按钮的造型并不一定非得如此。

可以看到,在每一屏当中,不同的交互、操作的可见度是取决于它们的重要性的。添加新任务这一操作对于待办事项类应用无疑是非常重要的,那么它在屏幕上应该是最突出的,而 Google Play 的应用中无疑是不需要这么一个按钮的,自然就不存在。在 Google I/O 应用中有个过滤器图标,它也是优先级较高的操作。对于游戏,开始游戏的按钮自然是最重要的。

大胆和图形化的设计元素

最后我想强调的,其实是留白这个事情。「大胆、图形化和有意识的设计」是 Material Design 最关键的元素之一。

虽然鲜艳的色彩和出彩的动效效果很不错,但是现在设计领域更强调高融入度的设计,这一趋势被命名为「Complexion Reduction」,这样设计的目的是确保设计元素和内容、交互保持协调,而不会让人有疏离感。

Material Design 2.0 当中应该会强化有意识的大胆、图形化的设计元素。

我列举出了 Google I/O 应用中的三个界面,分别是主屏幕,使用了过滤器的主屏幕,以及详情页。

在没有过滤器的情况下,信息是过载的,经过过滤之后,信息经过了筛选,底部导航也显得更加精炼了。经过过滤之后,用户将会更加专注列表会话本身,从而不再需要复杂的底部导航。

至于详情页,用户可以分享也可以收藏,但是用户最关注的始终是信息本身,这就是为什么页面中有大量的留白,就像 Medium 这些阅读应用。分享和收藏按钮对于用户而言是很容易触及的,不过设计上也有着较高的融入度。

总而言之,Material Design 2.0 会延续1.0时代的许多基本的原则,但是会基于新的需求,加入许多更加符合这个时代的规则,并且作为一个重要的设计指引而存在。

「2018年设计趋势,一个都不要错过」

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 我们能从Google的全新UI中学到的知识(图文)
  • 在谷歌当了半年设计师,我学到这些经验
  • 谷歌所说的“整体网页设计”到底是什么概念?
  • 如何将品牌与UI完美结合?Google新规范告诉你答案
  • 新版抢先看!Material Design 的7个重大更新
  • Google I/O 大会之后,Material Design 发生了这些变化
  • 2018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力
  • Google I/O即将到来,对于Material Design 2.0我做了这些预测
  • 实战教程来咯!超实用的VR界面设计实践指南

相关文章

  • 2018-08-23高手的平面课堂!版式设计里的轮廓化技法
  • 2018-08-23动效在UI设计中有哪三个关键用途
  • 2018-08-23用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!
  • 2018-08-23提前做好这四件事,帮你快速通过设计评审
  • 2018-08-23用户研究如何入门? 来看爱彼迎用研的回答!
  • 2018-08-23刚刚免费的Adobe XD 是Photoshop 杀手无疑了
  • 2017-08-06网页设计中对于图片格式与设计关系的详解
  • 2018-08-23上亿人使用的起点读书APP,背后的改版设计实录!
  • 2018-08-23实用总结!「返回」功能应该怎么设计?
  • 2018-08-23单手操作不方便?来看这两个新颖的交互方式是怎么做的!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 需求分析:我走过最长的路,就是需求的套路
    • 从微信「朋友圈三天可见」,分析背后隐含的设计原因
    • 竞品分析很重要,但很多人的方法不正确
    • 像鲶鱼一样的活着!成为设计师10年后的经验心得
    • 设计师必须要掌握的版式基础大全
    • 用一张交互设计画布,让你快速掌握交互设计基础(附PDF下载)
    • 如何将品牌与UI完美结合?Google新规范告诉你答案
    • css前端知识点总结(必看篇)
    • 还只知道“A/B测试”?是时候了解一下“多变量测试”了
    • 关于a href传参的中文乱码问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有