29

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

 5 years ago
source link: https://www.uisdc.com/material-design-all-white?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

FjyiQnJ.jpg!web

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

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

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

2uuQr2F.png!web

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

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

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

一、字体排版

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

rIbeiyq.png!web

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

qqmiq2A.png!web

二、配色

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

ba263mZ.png!web

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

6ZZrmmY.png!web

三、图标

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

IJ3maqr.png!web

uyEbUbu.png!web

四、UI设计

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

Bn67FzV.png!web

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

6RbQV3E.png!web

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

R3ueUnE.png!web

aQj2Azr.png!web

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

amUrIbN.png!web

jeAF3ab.png!web

五、APP设计

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

EJV3iau.png!web

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

QruuAvf.png!web

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

BV3Ibir.png!web

结语

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

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

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

eUrmyaF.jpg!web

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

mInuiy2.jpg!web

6Z3EVbb.jpg!web


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK