原生android ui设计,在拟物和扁平之间寻找平衡 原生安卓UI设计进化史

本文回顾了安卓系统从1.0到9.0的UI设计变化,从早期的3D拟物化到扁平化,再到MaterialDesign的立体扁平感,展现了科技界UI风格的发展。MaterialDesign2在安卓9.0中引入了更多圆润线条和多彩元素,与硬件产品的设计趋势相呼应。
摘要由CSDN通过智能技术生成

在拟物和扁平之间寻找平衡 原生安卓UI设计进化史

2018年03月16日 09:15作者:张哲编辑:张哲文章出处:泡泡网原创

分享

安卓P的第一个开发者预览版终于放出了。除了各种新功能,最引人注目的就属新UI设计了。目前关于安卓P的争议也基本集中在UI风格上。那么安卓的UI设计是如何一步步发展到现在的?本文会带大家回顾安卓从1.0到9.0(P)的UI设计变化,了解现代智能手机UI的发展轨迹

5e09846aeaa0d539723635f0e13bc5dd.png

第一阶段:安卓1.0到1.6

从2008年9月23日到2009年9月15日这一年内,安卓经历了四个大版本,分别是1.0、1.1、1.5纸杯蛋糕和1.6甜甜圈。它们的UI风格几乎一模一样。

640cf3265344d29449b7109d4f51be35.png

安卓1.0(图片源于Malavida)

d6c4008eaa013a8e9bde15de0f511f8f.png

安卓1.1(图片源于the1960POST)

9d299c0d1498e09cdffde36bbb5d545f.png

安卓1.5(图片源于the1960POST)

4cf79311ca41f7f3adbea4f5398b6989.png

安卓1.6(图片源于GIZMODO)

这段时间正好处于键盘机的末期,此时安卓的系统界面和图标造型等设计还没有完全摆脱诺基亚塞班和微软Windows Mobile的影响。充满了各种3D拟物化图标和界面元素。值得注意的是从1.0开始,安卓就有了主屏谷歌搜索栏。

第二阶段:安卓2.0 到2.2

安卓2.0/2.1松饼和2.2冻酸奶发布于2009年10月26日到2010年5月20日之间。这段时期是安卓发展的第一个高峰。诸如HTC Hero、HTC Legend、HTC Desire和索尼爱立信Xperia X10等经典机型就诞生于这段时间。

a087144d3a08d350ac9a5ace4191f86e.png

安卓2.0(图片源于Malavida)

84a57a80426ab235ecb5eb19bda6297e.png

安卓2.1(图片源于Wikipedia)

相比于第一阶段,第二阶段最大的UI设计改变就是削弱“拟物风格”,使视觉元素的“纵深”更浅。比如通知栏图标和字体都少了第一阶段那种“圆鼓鼓”的感觉,整体线条更锋利。应用图标就更明显了。

ee5cd23757a6c99dabf4b0591b422234.png

安卓2.2(图片源于Wikipedia,GIZMODO)

举个例子,第一阶段安卓的“谷歌市场”图标是一个立方体购物袋,有着明显的影子。而第二阶段的“谷歌市场”图标的3D拟物化风格就被大大削弱了。

第三阶段:安卓2.3

安卓2.3姜饼发布于2010年12月6日。2.3在保留第二阶段设计风格的基础上改变了某些界面元素,其中最明显的就是通知栏。

d5932ddc703470e8446bbe45698f30a5.png

安卓2.3(图片源于GIZMODO)

从1.0到2.2,安卓顶部通知栏一直是中间突起的3D白色长条。到了安卓2.3,通知栏变成了黑色,削弱了凸起幅度。另外一个明显的改变是主屏下方“二级菜单”按钮的部位降低了透明度,削弱了凸起幅度。

第四阶段:安卓3.0到4.4

安卓3.0蜂巢、4.0冰激凌三明治、4.1果冻豆和4.4奇巧巧克力发布于2011年2月22日到2013年10月31日之间。虽然3.0是平板专属系统,没被手机使用过,但它还是和4.x共享了同样的设计风格。

d2a8d77dda9d7c945c968074ff12e0b9.png

安卓3.0(图片源于Wikipedia)

cb7e85429e1f6360b6497a4976175b74.png

安卓4.0(图片源于cubet)

362b3dafe3694b7bec1ad86519ef1611.png

安卓4.1(图片源于Wkikpedia)

c53419561376926c265cb7cb9a6ef03b.png

安卓4.1(图片源于COMPUTERWORLD)

9c3754986204bf0f5efda65d4fa4f981.png

安卓4.1(图片源于GIZMODO)

91d0dc2465d5b7924c9db29c9b0bdf79.png

安卓4.4(图片源于greenbot)

8a1886ffc4122be08a332184e72e377c.png

安卓4.4(图片源于greenbot)

5c44590b8c7431aaa5fe7620540bbd25.png

安卓4.4(图片源于greenbot)

第四阶段的主题是进一步加强“扁平化,大范围使用简洁、锋利的白色线条。最明显的例子就是主屏“二级菜单按钮”附近、虚拟时钟和虚拟按键(4.0开始才有)的线条。第四阶段基本完全实现了UI的扁平化。

第五阶段:安卓5.0到8.1

在2014年6月25日举办的谷歌I/O大会上,谷歌发布了新的设计语言“Material Design”。Material Design随即被应用到了同年11月发布的安卓5.0棒棒糖上。之后的6.0棉花糖、7.0牛轧糖和8.0/8.1奥利奥虽对UI都有小范围修剪,但它们都是标准的Material Design。

ba269021dfeb9c88c1f27ca8255b8657.png

安卓5.0(图片源于tech.blorge)

93f67a7be594e718b83f19d2507fd576.png

安卓5.0(图片源于UPDATO)

和一味追求“扁平化”的微软Metro Design不同,谷歌Material Design把扁平色块和有立体感的光线/阴影结合到了一起,形成了一种“立体的扁平感”。灵感来源于纸张和墨水。

060ad1132031fd618c00e9dc00f38ad8.png

安卓6.0.1

0506440d07a4c92908caa7d6ef071960.png

安卓6.0.1

8578bd9921ab2ad53ccd5c838ce72460.png

Nexus上的安卓7.1

d40af35feef3f0dbd28ea39acd1af1aa.png

Nexus上的安卓7.1

Material Design的另一个重点是有着轻快、互动感强但不花哨的操作动画。

6a201bf5bfcda09cbac034979cfc5cf3.png

Nexus,左:安卓8.1,右:安卓8.0

be0b4e1fc4317d40b4005ea862ca02a7.png

Nexus上的安卓8.1

a35e0c32ef7d7f85cc190678fa844613.png

Nexus上的安卓8.1,下拉通知栏和8.0颜色不一样

Material Design设计师Matías Duarte说:“和真实纸张不一样,我们的虚拟材料(Materia)能够“聪明地”展开或变形。材料有实体的表面和边缘。接缝和阴影能让你知道应该按哪里。”

第六阶段:安卓9.0

一周前,安卓终于放出了9.0的第一个开发者预览版。9.0最大的变化就UI设计,它使用了新设计语言“Material Design 2”。

79d2e7793dd98705a6cc0484fe78f091.png

安卓9.0 DP1(图片源于droid-life,CNET)

相比于第一代Material Design,Material Design 2的主要变化体现在圆润线条增多和色彩更加缤纷上。其实在安卓7.0时,“圆润化”就已经开始,尤其是在Pixel系列手机上。这一改变明显是为了迎合Pixel系列手机及其它谷歌硬件产品“圆润化”的机身造型。

f31c78a0b6eeaadb5aaa8216b6f7ca65.png

左:Nexus的安卓7.1,右:Pixel的安卓7.1

42e5dd784989dfbbeb2f4aeee9b3fa27.png

左:Nexus的安卓8.1,右:Pixel的安卓8.1

另外,安卓9.0也沿用了安卓8.0开始的大量白色背景,包括通知栏和设计界面。

结语

从2008年到2018年,从安卓1.0到安卓9.0,安卓系统UI风格的转变呈现了一个从3D拟物化到简洁扁平化再到拟物扁平化的路线。作为市场份额最大的手机操作系统,安卓的设计转变也是科技界UI风格发展的缩影。给众多第三方厂商的定制UI和第三方APP界面产生了深远的影响。

本文编辑:张哲

关注泡泡网,畅享科技生活。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值