• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计

疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计

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

本文主要包含Material Design,redesign,极简主义,经验分享,设计标准,重设计等相关知识,希望在学习及工作中可以帮助到您

和往年一样,今年 Google 依旧在 Material Design 上投注了不小的心力,来推动整个设计语言渗透到整个 Google 的产品体系当中。目前,Material Design 整个设计风格由 Google 内的独立部门来负责运作,并不依托于特定产品,并且和外部设计师有诸多合作。Material Design 已经不再是单纯意义上的一种设计语言或者美学规范,它拥有的维度很多,甚至延伸到了设计流程,并且拥有诸多独立的设计工具来协助设计师,帮助大家更好地完成设计。

不过最近,有一个全新的关于 Material Design 的视频在 Youtube 上疯传,视频中 Material Design 的风格得到了进一步的进化和重新的设计,非常有趣。而更有意思的地方在于,视频在不久之后又被下架了,令人琢磨不透又无比的好奇。

仔细了解了之后发现,该视频源自于设计师 Adam Grabowski 和 Nicolo Bianchino,这两位设计师虽然并非 Google 内部的人士,却是以往 Material Design 部门的外部合作设计师,他们曾经参与过相关的设计,并且协同制作过视频内容。

视频在社交媒体上被广泛的传播,并且在 Twitter 上许多 Google 的内部员工也参与了视频转发,就这一点来看,可见视频本身并非偷跑的内容,但是也非官方的发布,真的要界定的话,应该算是资深硬核 Material Design 风格爱好者在自己理解基础上的二次创作。

在视频的结尾,设计师并没有采用 Material Design 的字样,而是使用了 Google Material ,一方面应该是为了区别于当前的 Material Design 的设计风格,另一方面应该也是为了规避相应的版权和法律的问题。

加上留出的其他的界面设计的细节,视频中所呈现出来的设计风格明显延续了当前 Material Design 设计的主要精神,包括「纸」的隐喻,不过主要体现在元素阴影中,卡片元素和大色块的使用比例明显降低了,借助留白和排版技巧,搭配更加清爽的白色背景和线性图标,创造出更加现代、简约的 UI设计。

一、字体排版

字体的整体设计延续了之前现代而富有几何轮廓的特征,但是字体笔画宽度被适当地调细了,整体的视觉体验显得更加摩登。

在排版布局上,通过不同尺寸粗细的强烈对比,来构建整体的层次感。

二、配色

目前在演示配色的时候,采用的是 Google 品牌的四种经典色彩,这一点和 Material Design 中所采用的扁平化配色是一致的。

不过在演示过程中,也并非所有的背景演示都采用的是之前所说的白色。

三、图标

由于这套重设计在调性上,更加简约、更加现代,所以在图标等元素的使用上,大多使用的单色的线性图标,这一点在 UI界面中也有所体现。

四、UI设计

先看看之前的 Material Design 的设计风格吧,典型的卡片式设计,大色块和带有非常显著的阴影。在整个布局当中,带有色彩的 UI 控件是非常典型的 CTA 元素,在层级上也是最为靠前的。

相比之下,在这个重设计方案中,阴影虽然得到保留,但是总体上适当地淡化了,显得更加微妙,而抓人眼球的圆形按钮也更多地被白色的按钮+彩色图标的方案所替代。

另一方面,被选中的条目也采用了非常浅的色彩来进行标识,这也将这一版「微妙」的色彩使用体现得淋漓尽致。

UI 布局的层次感不再使用色块和卡片来进行显著的区分,而是更多借助留白和远近距离控制,来赋予整个 UI 以层次感。诸如被选中的元素,也叠加上了和当前界面配色一致的浅色,这种设计让整个 UI设计更加具备一致性和统一性。这些设计手法通常会认为更加「现代」,也更加符合极简主义的精神,也更加贴合目前的设计趋势。

五、APP设计

下面是 Google 旗下 APP 当前的 UI设计,可以说是非常标准的 Material Design 了。

相比之下,重新设计的 APP 的 UI界面非常符合大家所描述的「All-White」的特征,大面积的色块都已经被移除,大面积的白色背景营造出足够现代简约的感觉。为了贯彻这种体验,彩色的图标也大都被带有阴影的白色按钮和彩色的线性图标所替代。

随着 UI 控件在优先级上的淡化和降低,文本、图片这样的内容在整个布局中,信息层级得到了提升,用户会更容易注意到文本和图片内容。

结语

虽然这套重设计不是出自 Google 官方之手,但是也和 Google 的 Material Design 团队有着一定的联系。既然可以放出来分享,自然也不是战略性的重要设计素材。但是这套设计非常符合时下的设计趋势,在设计思想上,和 Google 的设计思想有着相契合的地方,不然也不会得到如此之多的 Google 内部员工的认可。

也许在未来的 Material Design 当中,我们能够看到和这套设计共通的地方。谁知道呢。

关于极简主义设计,你可以拿这篇文章帮你印证一下:

今年 Google I/O大会之后,目前 Material Design 的状况:

优设大课堂

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

  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 经验总结!Material Design和iOS 产品设计的差异化思考
  • 新版抢先看!Material Design 的7个重大更新
  • Google I/O 大会之后,Material Design 发生了这些变化
  • Google I/O即将到来,对于Material Design 2.0我做了这些预测
  • 超实用!如何制作统一可复用iOS/Material Design元件库?(附源文件)
  • 从设计指南说起,详解Material Design体系组件
  • 想做用户引导?看谷歌Material Design 的官方教程是怎么做的!
  • 想提高可用性?看谷歌Material Design 的官方教程是怎么做的!
  • 一直进化的扁平化设计,在2017年这么玩儿

相关文章

  • 2017-08-06css如何实现数字分页效果代码及步骤
  • 2018-08-23首席设计师从 10000 个UI界面中所学到的10件事
  • 2018-08-23科普手册!值得新手收藏阅读的界面设计原则
  • 2018-08-23网易资深高手:交互设计师必备的9种能力
  • 2018-08-23在看了10000条标题后,我们总结了写文案的4大技巧
  • 2018-08-23「这个控件叫什么」系列之加载占位图+页面指示器
  • 2017-08-0610个优秀的 Web UI库/框架
  • 2018-08-23聊聊市面上的「真伪」设计系统
  • 2018-08-23趋势抢先知!2017年设计师都在讨论的服务设计到底是什么?
  • 2018-08-23方正设计师:UI界面中的字体应用

文章分类

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

最近更新的内容

    • 列表和网格,哪个更适合你的APP设计?
    • 用户体验的76个体验点小结
    • 描边风设计中,最容易犯的8种问题分析
    • 高手的平面课堂!网格系统的入门基础知识+案例演示
    • 这3个高级设计师才会的能力,人工智能取代不了
    • 超实用!Apple 官方的图层命名方法之控制器篇
    • 那些很熟悉但又叫不出名字的设计法则:倒金字塔法则
    • 历时7天,168小时,超过100页的「复仇者联盟」PPT 免费下载!
    • 高性能网站优化指南
    • VR、AR 的一百种可能性,专访Google Daydream用研负责人张晶华

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

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