CCF-GAIR 2020
您正在使用IE低版浏览器,为了您的雷锋网账号安全和更好的产品体验,强烈建议使用更快更安全的浏览器
此为临时链接,仅用于文章预览,将在时失效
特写 正文
发私信给温晓桦
发送

7

谷歌Material Design UI 真正美在哪里?设计即功能

本文作者:温晓桦 2015-11-12 15:36
导语:Material的成功就在于将被淘汰的设计技巧用于提高系统的实用性,而非装饰性。“事实上,Material的扁平化设计更是功能上的简化与重组。”

谷歌Material Design UI 真正美在哪里?设计即功能

Google I/O 2014发布了全新的设计语言Material Design(卡片式材料设计),它是迄今为止最受欢迎的视觉设计语言之一,利用了分层的卡片式设计、使用更多的空白和层次排版结构,经历了几年的迭代和提炼,来为手机、平板电脑、台式机和“其他平台”提供更一致、兼具外观和功能的“外观和感觉”。而且,不止于谷歌和安卓app。

事实上,多重层叠的概念并非谷歌首创,不过,谷歌对其进行了更深一层的开发——在触觉体验中渗入大胆活力的审美效果(本质设计)。那么,其实,Material Design真正的优势在哪呢?

首先,我们来具体了解一下Material Design:

谷歌Material Design UI 真正美在哪里?设计即功能

Material Design突破了谷歌以往的所有设计,包括栅格、风格、布局等,谷歌将其特点概括为拟物和扁平的结合。和苹果以前的拟物设计并不尽相同,Material Design更关心系统反应的质感、层次、深度,和其他物体的叠放逻辑,比如打开页面时,新页面不是像以往那样直接跳转,而是从一个中心点扩展开来,并且利用原页面在底部的投影营造出立体空间感,告诉用户,页面从哪里来、到哪里去,形成一种操作逻辑。从某种程度上来说,Material Design更像是把交互界面变成了一张张有逻辑顺序的卡片纸。

Material诞生之初首先搭载的设备分别是Nexus 6智能手机和Nexus 9平板电脑,但后来延伸至其他所有设备,取得这样的效果都是因为它植根于几个原则:

1、原质化的视觉提示:设计结合实体物理属性,参照了纸质和墨水材料的元素。

2、图像式的、深思熟虑的:技术推动了视觉效果的变革,空间、尺度、色彩、图像、排版等元素组成层次结构明显的设计,一切都经过了慎密的考虑。

3、移动效果产生的意义:和物理世界接近的触感可以让用户更为自然、快速地理解和认知。

认识“原质化外观”:

如前文所提到的,其实这个新型的设计我们可以将其理解为“数字纸”,然后组成这个这个框架的元素就是一层层“卡纸”,系统运行时就像翻开一张张由一定逻辑组合的卡纸。而与真正卡纸不同的是,Material可以改变它们的形状和形式,比如拉伸和弯曲。

谷歌Material Design UI 真正美在哪里?设计即功能

就如Mobile Design Trends 2015 & 2016所解释的那样,设计本身相当于一个内容和信息的装载体。这个载体采用的是扁平化设计,但利用阴影展现出其层级形式就成为了与其他设计的区别特征,其他设计或者是采用渐变、纹理等形式来区别层次。例如以下这个APP的界面,用户进行最新的操作的菜单显示于顶层,历史操作路径则变成灰色外观处于底层。

谷歌Material Design UI 真正美在哪里?设计即功能

在设计中建立起目录的功能和与内容的联系,不仅使得操作更接近物理真实,而且建立起一种深度,多种要素叠加起来就像是创造了一个三维的世界。

Material为响应式设计而生

分层式的设计根本上说是迎合了响应式设计的趋势——每考虑一个层级的设计,就要考虑所有元素之间应该如何自动关联。所以说,谷歌的扁平化并不只是把立体的设计效果压扁,事实上,Material的扁平化设计更是功能上的简化与重组。

谷歌Material Design UI 真正美在哪里?设计即功能

值得一提的是,Material Design利用的是12栅格系统来约束网页的内容区。谷歌当初推崇这套标准是因为,灵活的栅格设计能够保证布局的一致性、以及由临界点(breakpoint)逐步放大到面的打开方式能够完整描述出APP的打开过程。

网页栅格系统是从平面栅格系统中发展而来。栅格系统的使用,不仅可以让页面的信息呈现更加美观,而且更具可用性,页面响应也更加的灵活与规范。因为由于屏幕的限制,卡片式设计营造的空间感不一定能够恰到好处地充满整个屏幕,影响美观,所以需要有一个东西来对之进行约束,这就是Material Design采用的12栅格系统。12栅格宽度对应屏幕的比值,即:12栅格宽度X占比=屏幕宽(临界点)。

而所谓临界点,是指响应式页面发生布局变化的关键点,例如“当屏幕宽度小于480px时加载一种样式,而当宽度在480px至600px之间时加载另一种样式”。理论上说,响应式页面有无数种尺寸,但开发者不可能也没有必要为每个尺寸都去做设计,而是只需要选定几个临界点做设计,在两个临界点之间是延续上一个临界点的布局。

临界点确认总体目的就是为了保证页面在智能手机(小屏幕)、平板(中屏幕)、台式电脑(大屏幕)上加载相应的样式,然而经验较少的设计师往往会苦恼一个问题,那就是高像素的手机屏幕和低像素的平板屏幕应如何处理。例如设计师会担心1080p的手机加载大屏幕页面,或者720p的平板加载小屏幕页面。

谷歌Material Design UI 真正美在哪里?设计即功能

所以为了适应各种设备的屏幕和分辨率,Material Design设定的临界点像素包括了480、600、840、960、1280、1440和1600的像素梯度。这些参数给设计者在调整台式电脑、平板电脑和智能手机的界面时提供了一个尺寸的基准。

Material和其他移动界面设计趋势

越来越多的网站设计已在UI上走扁平式设计的路线,当谷歌创造了分层式界面连接时,其他系统也会加入到这场UI美学的变革当中。而Material Design为什么能够鹤立鸡群呢?

其实,Material Design也是借鉴了其他扁平化设计的概念以及新潮的技术,甚至有些人会职责谷歌的Material Design与扁平化设计模式Flat Design 2.0太过雷同。

在Material的扁平化设计中,它仍旧使用了分层元素来营造三维空间,而且实质上是设计师将以往被淘汰的设计技巧重新拿了回来。因为本质上来说,扁平化的概念最核心的地方就是:去掉冗余的装饰效果,即去掉多余的透视、纹理、渐变等等能做出3D效果的元素,让“信息”本身重新作为核心被凸显出来,并且在设计元素上强调抽象、极简、符号化。但Material的成功就在于化腐朽为神奇,它重拾这些技巧最大的不同是,将其用于提高系统的实用性,而非装饰性。

谷歌Material Design UI 真正美在哪里?设计即功能

Material和其他设计模式最大的区别还在于,其配色方案已经最大限度地接近于扁平化设计美学。因为在扁平化设计中,配色是最重要的一环,它通常采用比其他风格更明亮更炫丽的颜色,而且还意味着更多的色调。其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到八种颜色。谷歌的Material正是如此,对于不同的选项会配有不一样的颜色——明亮、绚丽、完全饱和的色调。

比如下图这个APP界面,所有元素组合起来(图片、标记、简要文字、层叠)就简单利落地展示了该应用要传达的信心。这就体现了Material Design并不是为了营造视觉冲击而堆叠这些图片、阴影效果,而是它本身是功能的一部分,能够辅助核心信息的突出。

谷歌Material Design UI 真正美在哪里?设计即功能

当下的设备中,你似乎已经很难找到哪个界面不是由点到面,进而全屏显示的,这就是一个不可逆转额UI设计趋势。

如今,不管是苹果的设计语言,还是谷歌的设计语言,甚至于Windows的Modern UI 和Facebook的Paper设计语言,大方向都是朝着扁平化设计发展,而在细节上却分道扬镳。外媒表示,Material Design或许才更符合乔布斯的设想。而随着谷歌对Material Design的逐步开源,业内的设备或者APP产品设计都可以更容易地向Android式靠拢,所以未来或者会见到更多“Android apps”。

via TNW

雷锋网原创文章,未经授权禁止转载。详情见转载须知

分享:
相关文章

文章点评:

表情
最新文章
请填写申请人资料
姓名
电话
邮箱
微信号
作品链接
个人简介
为了您的账户安全,请验证邮箱
您的邮箱还未验证,完成可获20积分哟!
请验证您的邮箱
立即验证
完善账号信息
您的账号已经绑定,现在您可以设置密码以方便用邮箱登录
立即设置 以后再说