×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 重新关注设计,Google以Material Design打造文艺范儿

重新关注设计,Google以Material Design打造文艺范儿

2014-08-181022分享

Google在大众印象中,一向与 “设计”这个带有非理性以及更多靠直觉又有点文艺味道的词相去甚远。当这次Duarte宣布Material Design将作为Google Design的风格,并贯彻到所有Google产品设备中时,这意味着人们印象中Google的形象将要有所变化了。

今年的Google I/O大会开始之前,网上就放出了许多小道消息谣传这次Google将推出一套全新的设计语言来统一所有的设备。Android原有的开源设计风格在如今的那些第三方商家手里已经支离破碎,丝毫看不出这套设计规则能让人肃然起敬。这就给今年Google I/O 积攒的神秘披上了许多令人期待的面纱。

带着好奇心,我头一次完整地看完了长达两个半小时的Keynote。网上大家一直猜测Google会如何命名这个即将在未来统一所有软硬件设计风格的产品,就像Apple如何发挥 iOS 7的Flat Design一样。

以前Android给我的印象是:界面的icon不严谨甚至有些松散,交互界面之间杂乱无章,不像iOS那么有秩序,机器与人的互动之间有着一些难以融合的隔膜 ……当负责Android用户体验设计的大主管Matias Duarte站在旧金山莫斯康展览中心大讲台,放出Google新一代设计语言—Material Design演示视频时,之前Android带给我所有负面设计的印象让我一下抛到脑后。Material 的中文直译过来就是 “材料 ”,官方给出的解释是取自现实生活中的“纸墨”也就是看得见摸得着的实体。

Google在大众印象中,一向以高度发达的人工智能和接受数以万计的庞大数据能力著称,而在 “设计”这个带有非理性以及更多靠直觉又有点文艺的味道上,显然和Google的理性工程思维的关系相去甚远。当这次Duarte宣布Material Design将作为Google Design的风格,并贯彻到所有Google产品设备中时,这意味着Google在人们的印象中,不仅仅再只是一家工程的数据型的公司。

向纸墨学习什么

在Material Design Guidelines里,官方给出的如何体现纸墨的含义,是从物理空间的动效来阐释,如:界面的视觉光效、空间的表面质感和交互的动画运动感等三个规律来表现。在交互界面上要围绕这三点的原则来设计一套新语言,这就必须重新思考整个底层架构,而Google借鉴了传统的平面印刷设计。

提到“平面”众所周知,这个词已经存在了上百年历史,它的实用性生活中随处可见,如:路边的公交牌、机场大厅的指引路标、品牌的包装盒……它的作用与辨识度在日常中不言而喻,正是出于这种普遍性,如今各大商家都开始从这里面寻求差异化的设计突破,如:Windows Modern和接近这套理念的iOS 7 。

回顾过去这三大阵营的设计理念,各个风格迥异:Holo永远会在原有的icon上叠加几何图形的立体视效、Modern彻底引入平面识别系统将屏幕的每处像素都贡献给内容、iOS 7之前则以Skeuomorphism模仿真实的事物实现人机界面交互的简易性。当传统平面的概念没被微软先入为主足够引起行业震动、App Store的概念刚出来时,“用户体验”在2009年那段时间还是一个很新鲜的词,产品的文化与感情表达还不像今天这么泛滥。这就会带来一个疑问:从什么时候起大家开始关注设计、开始用技术之外的“感情”因素来做产品?

2007年iPhone的发布之后诞生出App Store的概念,手机也可以像PC一样使用。这促使第三方开发者可以不用再受限于Windows和渠道运营商,直接将写好的软件放在App Store这样类似的移动平台里自由交易,当软件的数量倍增使用的人尝到甜头,平台的力量随着用户与开发者的利益相互满足,其影响力也随之越强,优秀的软件并随即而生,这就形成三者共赢。

截止到今年Apple付给开发者的支票达百亿以上的规模,这就引来许多开发者愿意在移动平台里花精力去设计一款优秀软件,然后专门给这些呈规模效应的平台设计App并可养活一个事业,而作为产品的另一个不可或缺的重要角色—设计师,并可以得到发挥。当所有这些平台、用户、开发者形成一个良性循环发展时,大家的精力可以聚焦在产品上,而打造产品除了用工程的逻辑思维编写出每个功能步骤外,产品的美观、文化、可操作性就需要用优秀的设计体验来完成。

当Apple掌控软硬件取得空前的成功后,设计不只是再表现于皮肤表面之外,而应在里面融入通常大家所熟知的:文学、历史、音乐和艺术等等人文的主观性感受,这些非理性的感情因素,致使大家开始关注产品的人文精神。

迫于竞争的压力,这就是为什么微软在2010年将Windows Phone从瑞士平面里获取设计Modern的灵感引用到Windows 8的原因之一,后来Apple也将自己一手培养起来的Skeuomorphism由Jony Ive领导改头换面,以至于今天Google也要开始从传统的纸墨文化概念里面寻找出路。

Google是如何将传统“纸墨”的定义和产品联系在一起?从Material Design Guidelines里面可以看到,下拉菜单和主界面的组成通常是一张张排列整齐的卡片来衔接,卡片承载的信息量贯穿始终。卡片式的设计由来已久,在Web、移动客户端我们随处可以看到它的身影,而唯独Google由这种风格贯穿彻底,因为卡片不像网页没有边缘界线可以无限延伸,它的特征跟我们用到的便条、普通纸张一样有实际的边界数量,像纸一样可以折叠、收放自如。

卡片、纸,这两者相同的特征可以将它们联系起来,它们的简洁、易用性不容置疑。所以,卡片与纸的联系可以看作Google从传统纸墨里学习材质的典型。

平面、卡片、抽象

平面——在人的潜意识中就是将所有看到的立体的三维影像转换成一个面,这个面里没有它受外界反射出来的强光和阴影,一切受自然规律所带来的透视将不复存在。在这样一个由四个基点所组成的空间里,人眼所观察到的永远只有一个角度,而在这个空间里的所有物体也只有一个面,所以当我们在这个空间里面做任何判断时,你所反应的图形就必须最能代表它本身的特征。

Google通过平面识别系统里的点、线、面三者间的联系来塑造Material Design,它跟Windows Modern不同的是, Google终始保持界面的交互流程秩序,左右有规则的对齐留白、上下的比例对称以及用悬浮在界面分割上下左右关系的圆形操作按钮。Google的这套用“线” 区分界面区域、用“点”控制功能的流程、用“面”滑动界面的切换等有序的设计来显现Material。当这种整齐的排版让人一目了然时,并形成了Google自有的风格——卡片。

卡片的形成对于Material Design的重要性显而易见,更可以说是这套风格的逐渐成形才有了Google对统一设计的野心,这就不免让人联想到去年Google Maps的改版,原先左侧的状态栏连同页眉的搜索栏一同被重新设计在一个搜索框里,并将它的位置放置在页面左上角,所有的地图功能信息都隐藏在这个搜索栏里,然后以卡片的交互方式呈现所有的信息。Google Maps的这次改版可以看出Google早已为这套新语言 Material Design铺路。

如果用卡片来代表Google Design,那么平面和抽象分别对应微软的Modern和 Apple的iOS,Google的卡片既不像微软将所有带边框的分界线从屏幕里彻底拿掉,把每一寸像素腾给内容,也不像Apple在拿掉纹理和光影的基础上添加时尚动感的渐变和抽象符号,Google更想用亲和力的卡片式风格树立Material Design的统一跨平台之路。

 


本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:https://www.mcykj.com/show-19-92-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

婆婆子官方网站正式上线
某某某主要是经营多个全世界的音乐器屏的大背景去展示行业的艺术美。展……
关于华采元创运营面试
搜索
做一个直播app需要多少钱?
视频APP开发是现在最热门的移动应用,那么最值得关注的问题是,开发一……
移动开发 请人开发app大概得多少钱?
app开发的费用主要就是人力成本,而决定人力成本的因素包括
开发一个app开发步骤
一、开发一个app多少钱?个人亲身经历分享: 开发一个app多少钱?几百……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.
京ICP备13003869号-1