欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

Android设计风向标Material design语言,androidmaterial,阅读本篇文章可以得到你想

来源: 开发者 投稿于  被查看 40215 次 评论:280

Android设计风向标Material design语言,androidmaterial,阅读本篇文章可以得到你想


网上关于material design的文章多而乱,在此希望作出一个统筹。阅读本篇文章可以得到你想知道的答案



简介:


谷歌推出全新的设计语言Material Design。谷歌表示,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。


Material Design语言的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于2014Google I/O大会隆重发布 。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的GmailCalendar。大家可能还会记得,最近曾看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

191046r34k3nne3apaaax9.jpg



目标

谷歌希冀创造一种新的视觉设计语言,能够遵循优秀设计的经典定则,同时还伴有创新理念和新的科技。

191048wrg8rqnzwryr0kre.jpg



谷歌希望创造一种独一无二的底层系统,在这个系统的基础之上,构建跨平台和超越设备尺寸的统一体验。遵循基本的移动设计定则,同时支持触摸、语音、鼠标、键盘等输入方式。

191050yn6rs2xfdwqjfx6a.jpg




使用
规范的目的

个人认为各种平台(iOS、Android、WP……),以及各类基于Android深度定制的ROM(miui、flyme、ColorOS……)都制定规范的目的莫不有三:


1. 统一约束第三方应用的设计与交互体验感受,降低用户学习使用成本;

2. 统一跨平台的使用体验,降低用户跨平台学习使用成本;

3. 提供规范统一的接口,降低开发者的设计成本。


当下国产机很少有使用原生系统的机器,基本都会刷基于Android系统二次开发的厂商定制ROM,比如miui、flyme、ColorOS、Funtouch OS……这些ROM都对Android原生系统进行了深入的定制,其中部分ROM更是私自替换了原生系统中的控件,这也就造成了完全按照设计规范设计的应用在这些被替换了控件的ROM中安装后,反而不伦不类。


Android手机与苹果手机相比型号众多,机器性能层次不齐,这也就造成了无法提供统一的交互体验。可能看似优雅的交互动画,可能在低端机器上呈现的效果一塌糊涂。本来像水一样流畅的tab页间的滑动操作,在低端机器上体验感觉像泥石流一样。


另外个人认为,系统ROM、系统商店、应用APP之间还存在一种生态。以魅族的flyme系统、魅族应用商店、适配sb栏的应用为例:flyme系统中含有比较特殊的smart bar的设计,如果应用不单独适配,在flyme系统中使用很难保证统一的体验。如果某应用单独适配了smart bar版本,作为利益的交换,魅族应用商店会给予一定的广告位推介。这个生态很明显会促进一种规范的推进。尤其在像苹果iOS这种封闭的系统中,如果不越狱APP Store是唯一的更新途径,获得苹果应用商店的青睐,符合iOS的设计规范显得尤为重要。而谷歌商店在国内基本被阉割,加上各类手机助手的乱入,这种生态完全是不存在的。这也造成Android规范推广的困难。

既然是规范,也就是意味着这是指导建议,没有强制性的举措让开发者去遵守。加上Android系统的开放性,完全按照规范去设计的应用可谓寥寥无几。而且就算开发者主观想遵守设计规范,就Android当下的乱象,也不是很好的解决方案。同时每个应用都有自身需要实现的价值,在规范与自身需求实现的平衡上,这也是很重要的。


比如说此次微信5.4的更新,又返回到了底部Tab栏的iOS风格,尽管底部的Tab栏也支持滑动,很明显地可以看出微信的团队在这个设计上做了妥协。微信团队肯定认定自身业务数据的重要性远比遵守所谓的规范要重要的多得多。


所以个人认为所谓的设计规范,只是一本“考试大纲”,而不是“考试答案”。


完全按照规范,可以做到80-89分优良设计,却很难在符合自身应用的情况下做到令人惊艳的90分以上的设计,当然依照规范也很难设计出不及格的作品。


回到自身产品,作为一个大众化的工具型产品,直观与易用性是最重要的。如果设计规范中的某种设计适用到产品某项功能中非常合拍,那是非常好的选择。如果某种符合业务需求的简单设计不符合设计规范,但这种规范不影响用户理解使用,不遵循规范也未尝不可。为了降低用户的学习使用成本,让所有应用遵循设计规范显然是不现实的,但是我们的设计完全可以去借鉴当下使用广泛的应用,比如腾讯系、阿里系、360系的产品,他们广阔装机量培养的用户使用习惯是根深蒂固,很难被替代的。借鉴他们的某些操作最简单的达到我们的目的,不失为一种方式。


所有的设计都是为了辅助产品需求的实现,同时保证用户的优良体验。如果设计仅是为了符合规范,这也就失去设计本质的意义。



设计原则: 

1、材料是个隐喻

材料隐喻是合理空间和动作系统的统一理论。谷歌所谓的“材料”是基于触觉现实,灵感来自于对于纸张和墨水的研究,也加入了想象和魔法的因素。



2、表面是直观和自然的

表面和边缘为现实经验提供了视觉线索。使用熟悉的触觉属性,可以直观地感受到使用情景。



3、维度提供交互

光、表面和运动是展现交换的关键因素。逼真的光影效果显出了各部分分离,划分了空间,指示了哪些部分可以进行操作。



4、适应性设计

底层设计系统包括了交互和空间两部分。每一个设备都能反映出同一底层系统的不同侧面。每一设备的界面都会按照大小和交互进行调整。只有颜色,图标,层次结构和空间关系保持不变。



5、目录用黑体和图形设计,并带有意图

黑体能突出层次、意义,显现焦点。深思熟虑的色彩选择,层次分明的图像,大范围的铺陈和有意的留白可以创造出浸入感和也能让表达更清晰。



6、颜色、表面和图标都强调动作效果

用户行为就是体验设计的本质。基本动作效果是转折点,他们可以改变整个设计,可以让核心功能变得更加明显,更为用户指明了“路标”。



7、  用户发起变化

操作界面中的变化来自于用户行为。用户触摸操作产生的效果要反应和强化用户的作用。



8、  动画效果要统一

所有动画效果都在统一的环境下显示。即使发生了变形或是重组,对对象的呈现也不能破坏用户体验的连续性。



9、动作提供了意义

动作是有意义的,而且是恰当的,动作有助于集中注意力和保持连续性。反馈是非常微妙和清晰的,而转换不仅要有效率,也要保持一致性。



M
aterial design大概长什么样:

这样的


191052cks49957ha7755mf.jpg


这样的

191052dzg6eiaep3ehpz3i.jpg

输入框是这样的

191053oslilvy4schmx3zj.jpg

191053ndccib9f9f175y9j.jpg

看完了一些官方的效果是不是感觉动画流畅而符合逻辑,整个APP的体验一下上去了有木有。

当今安卓应用设计杂乱无章,初学者难免走弯路,现在有一个标准可以让你快速的设计出美观,体验好的APP。对于广大开发者来说Material design意义重大,必须知道。


相关实例代码的下载:
687474703a2f2f7777772e737464726f69642e636f6d2f696d672f6f75747075745f3555546a43762e676966.gif
一个展示material design效果的整体例子的应用
地址:http://www.apkbus.com/forum.php?mod=viewthread&tid=240191


material_edittext.png

material design风格的输入框
地址:http://www.apkbus.com/forum.php?mod=viewthread&tid=240122


color_selector.png

material design 效果的代码库
地址:http://www.apkbus.com/forum.php?mod=viewthread&tid=239770


又一个展示material design效果的整体例子的应用
地址:http://www.apkbus.com/forum.php?mod=viewthread&tid=240125

687474703a2f2f692e696d6775722e636f6d2f3767676346517a6c2e706e67.jpg

MaterialDesign设计的录音程序
地址:http://www.apkbus.com/forum.php?mod=viewthread&tid=240248



官方文档(需要翻墙):

http://www.google.com/design/spec/material-design/introduction.html


用户评论