注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

邓征宇的BLOG

一个硬币总有不同的两面。

 
 
 

日志

 
 

扁平化设计、沉浸式状态栏、谷歌Material Design UI  

2016-07-18 11:36:58|  分类: 人文和历史 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
百度百科
扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。
例如:WindowsMac OSiOSAndroid等操作系统的设计已经往“扁平化设计”发展。其设计语言主要有Material Design、Modern UI等。
扁平化的设计,尤其是手机的系统直接体现在:更少的按钮和选项,这样使得UI界面变得更加干净整齐,使用起来格外简洁,从而带给用户更加良好的操作体验。因为可以更加简单直接地将信息和事物的工作方式展示出来,所以可以有效减少认知障碍的产生。
扁平化的设计,在移动系统上不仅界面美观、简洁,而且还能达到降低功耗、延长待机时间和提高运算速度的效果。例如,Android 5.0就采用了扁平化的效果,因此被称为“最绚丽的安卓系统”。
“Flat Design”为“扁平化设计”的英文名,这个概念在2008年由Google提出。但围绕“Flat Design”这个名字则存在着诸多争议,现在你所看到的这个名称“Flat Design”也并未被大家所完全认可。
不同的公司团体都尝试用过其他名称,例如Minimal Design, Honest Design,而微软公司甚至称它作 “Athentically Digital”。
扁平化设计五大原则
http://www.csdn.net/article/2013-05-29/2815475-flat-design-principles
Cousins表示他虽然对扁平化设计的感觉非常强烈,但并没有特别热爱或者特别讨厌扁平化设计。他认为好的设计不应当局限于某种设计风格,而需要更注重可用性、有用性。如果因为时尚的缘故,那就顺其自然吧。但该趋势并不适合一切项目,所以不能强求所有应用都遵从这一风格。
简单说,可以打开速度更快,节省流量。
拒绝特效
仅使用简单的元素
注重排版
关注色彩
极简主义
扁平化2.0时代!今年六个全新的扁平化设计风格
http://art.china.cn/products/2016-04/11/content_8696146.htm

对于扁平化的定义,依然没有一个固定范式,但概括起来有下面四个特征:

1)没有多余的效果,例如投影、凹凸或渐变等

2)使用简洁风格的元素和图标

3)大胆丰富且明亮的配色风格

4)尽量减少装饰的极简设计

扁平化2.0的全新细节

为了避免纯粹的扁平化设计,一些细微的效果逐渐被运用其中。

一、微阴影

二、“幽灵”按钮

三、低调渐变

四、圆形

五、双色搭配

早期的扁平化配色是非常鲜艳大胆的,它可以在高饱和度中挑选六到七种颜色进行搭配。如今,扁平化设计的配色选择虽然仍然朝明亮大胆的方向走,但只局限于有限的颜色选择,双色调配色是目前逐渐流行起来的另一种配色方向。

六、动态要素

**********************
在Android 4.4上,开始引出“沉浸式状态栏”这个概念。MIUI 6也支持这个新特性,也许还有许多小伙伴对这个概念并不了解,下面小编就带大家去了解一下什么是“沉浸式状态栏”。
Google 在 Android 4.4 的 API 描述页面里提到了“Translucent system UI styling”,即半透明化的系统UI风格。这个“半透明化”包括了状态栏和通知栏,当开发者让应用支持这个新特性的时候,状态栏和导航栏可以单独/同时变为渐变的半透明样式。
在支持“沉浸式状态栏”的产品中,通知栏并不像是独立存在,仿佛只是在全屏模式加了几个图标,打开软件第一眼看到的不再是黑乎乎的通知栏,更能将注意力集中到产品内容本身。
http://www.gfan.com/news/2014111660892_2.html
设计师必看系列:从无到有!谷歌的设计美学
谷歌的美学目标很明确:简约到不能再简约。谷歌认为最好的用户体验是”隐形的”。
Material Design 设计风格
http://36kr.com/p/5035281.html
近日 Google 发布了前端开发语言框架 Material Design Lite (MDL),包含一些符合其设计风格的按钮、复选框、输入区、排版样式、以及对应的网格系统和自适应排版系统。与 Twitter 推出的 Bootstrap 类似,MDL 是为了帮其他开发者快速实现统一的网站风格。
Material Design:Google 拿出了能够比拟苹果的好设计
陈一斌 社区负责人
http://www.ifanr.com/429876
Material Design 不能简单地归纳为平面化设计(Flat Design)。实际上,Android 4.0 的设计风格,也不是纯粹的平面化设计,在经过仔细观察之下,我们可以看到 Android 4.0 在细节上并没有反对高光、阴影、纹理,换言之它并不反对立体感。不过,它也不能归类为拟物化设计,毕竟它所是用的图案、形状并非是对现实实体的模拟,而是按照自己对数字世界的理解,以色彩、图案、形状进行视觉信息上的划分。
**********************
Material Design突破了谷歌以往的所有设计,包括栅格、风格、布局等,谷歌将其特点概括为拟物和扁平的结合。和苹果以前的拟物设计并不尽相同,Material Design更关心系统反应的质感、层次、深度,和其他物体的叠放逻辑,比如打开页面时,新页面不是像以往那样直接跳转,而是从一个中心点扩展开来,并且利用原页面在底
部的投影营造出立体空间感,告诉用户,页面从哪里来、到哪里去,形成一种操作逻辑。从某种程度上来说,Material Design更像是把交互界面变成了一张张有逻辑顺序的卡片纸。
Material诞生之初首先搭载的设备分别是Nexus 6智能手机和Nexus 9平板电脑,但后来延伸至其他所有设备,取得这样的效果都是因为它植根于几个原则:
1、原质化的视觉提示:设计结合实体物理属性,参照了纸质和墨水材料的元素。
2、图像式的、深思熟虑的:技术推动了视觉效果的变革,空间、尺度、色彩、图像、排版等元素组成层次结构明显的设计,一切都经过了慎密的考虑。
3、移动效果产生的意义:和物理世界接近的触感可以让用户更为自然、快速地理解和认知。
认识“原质化外观”:
如前文所提到的,其实这个新型的设计我们可以将其理解为“数字纸”,然后组成这个这个框架的元素就是一层层“卡纸”,系统运行时就像翻开一张张由一定逻辑组合的卡纸。而与真正卡纸不同的是,Material可以改变它们的形状和形式,比如拉伸和弯曲。
就如Mobile Design Trends 2015 & 2016
所解释的那样,设计本身相当于一个内容和信息的装载体。这个载体采用的是扁平化设计,但利用阴影展现出其层级形式就成为了与其他设计的区别特征,其他设计或者是采用渐变、纹理等形式来区别层次。例如以下这个APP的界面,用户进行最新的操作的菜单显示于顶层,历史操作路径则变成灰色外观处于底层。
在设计中建立起目录的功能和与内容的联系,不仅使得操作更接近物理真实,而且建立起一种深度,多种要素叠加起来就像是创造了一个三维的世界。
Material为响应式设计而生
分层式的设计根本上说是迎合了响应式设计的趋势——每考虑一个层级的设计,就要考虑所有元素之间应该如何自动关联。所以说,谷歌的扁平化并不只是把立体的设计效果压扁,事实上,Material的扁平化设计更是功能上的简化与重组。
值得一提的是,Material Design利用的是12栅格系统来约束网页的内容区。网页栅格系统是从平面栅格系统中发展而来。栅格系统的使用,不仅可以让页面的信息呈现更加美观,而且更具可用性,页面响应也更加的灵活与规范。
谷歌当初推崇这套标准是因为,灵活的栅格设计能够保证布局的一致性、以及由临界点(breakpoint)逐步放大到面的打开方式能够完整描述出APP的打开过程。
而所谓临界点,是指响应式页面发生布局变化的关键点,例如“当屏幕宽度小于480px时加载一种样式,而当宽度在480px至600px之间时加载
另一种样式”。理论上说,响应式页面有无数种尺寸,但开发者不可能也没有必要为每个尺寸都去做设计,而是只需要选定几个临界点做设计,在两个临界点之间是延续上一个临界点的布局。
临界点确认总体目的就是为了保证页面在智能手机(小屏幕)、平板(中屏幕)、台式电脑(大屏幕)上加载相应的样式,然而经验较少的设计师往往会苦恼
一个问题,那就是高像素的手机屏幕和低像素的平板屏幕应如何处理。例如设计师会担心1080p的手机加载大屏幕页面,或者720p的平板加载小屏幕页面。
所以为了适应各种设备的屏幕和分辨率,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和其他设计模式最大的区别还在于,其配色方案已经最大限度地接近于扁平化设计美学。因为在扁平化设计中,配色是最重要的一环,它通
常采用比其他风格更明亮更炫丽的颜色,而且还意味着更多的色调。其他设计最多只包含两三种主要颜色,但是扁平化设计中会平均使用六到八种颜色。谷歌的
Material正是如此,对于不同的选项会配有不一样的颜色——明亮、绚丽、完全饱和的色调。
比如下图这个APP界面,所有元素组合起来(图片、标记、简要文字、层叠)就简单利落地展示了该应用要传达的信心。这就体现了Material Design并不是为了营造视觉冲击而堆叠这些图片、阴影效果,而是它本身是功能的一部分,能够辅助核心信息的突出。
当下的设备中,你似乎已经很难找到哪个界面不是由点到面,进而全屏显示的,这就是一个不可逆转额UI设计趋势。
如今,不管是苹果的设计语言,还是谷歌的设计语言,甚至于Windows的Modern UI 和Facebook的Paper设计语言,大方向都是朝着扁平化设计发展,而在细节上却分道扬镳。外媒表示,Material Design或许才更符合乔布斯的设想。而随着谷歌对Material Design的逐步开源,业内的设备或者APP产品设计都可以更容易地向Android式靠拢,所以未来或者会见到更多“Android apps”。
  评论这张
 
阅读(49)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017