Android L设计规范

 

谷歌公司2014年10月16日推出的Android 5.0系统, Lollipop(棒棒糖)为其代号, 所以Android 5.0版本又俗称Android L版本。以下是看视频教程后整理出的Android L的设计规范。...



谷歌公司于2014年10月16日推出Android 5.0系统, Lollipop(棒棒糖)为其代号, 所以Android 5.0版本又俗称Android L版本。以下是看视频教程后整理出的Android L的设计规范。



Material Design(质感设计)Android L 带来了全新的“Material Design”设计语言,看上去极具个性。Material Design主打干净排版和简单布局的设计风格,同时融入了丰富的色彩,具有更强的指向性。另外,它还支持多种设备,如手机、平板、电脑、电视等等,几乎涵盖了整个Android产品线,具有高度统一性。

理念:(1)全新的视觉语言 :在科学与技术的革新基础上遵循优秀设计的经典原则 。(2)多端统一的用户体验:在不同平台、不同尺寸设备中营造统一的用户体验。

核心原则:(1)模拟真实的质感来传递隐喻:  将虚拟的物体赋予真实世界中的质感,可使用户快速领会虚拟物件的操作方式 。(2)元素对比,图形呈现,深思熟虑:借鉴成熟的印刷排版经验,创建美观并阅读愉快的用户界面。

有意义的动效设计:  让操作流程中的一切变化以连续、平滑的方式过渡,使用户自然地理解所发生的变化

Animation (动效)与ios8的动效设计规范一致

在扁平化时代,当不能过多借助写实的高光、投影、纹理时,如何赋予物体真实的质感 :(1)赋予物体真实的运动方式——优雅缓入缓出。(2)赋予物体真实的触感——点触反馈 :安卓L的点触反馈模仿的是笔尖轻触纸面然后墨迹随意晕开的效果,官方称之为触碰涟漪 。

在界面层级多变时,如何向用户解释界面的变化 :(1) 视觉连贯性: 适当强调的进场元素,温和隐去的退场元素,考究处理的共享元素。 (2)错落有致 。(3)编排一致 。(4)细节取悦 。

Layout(图层)

一个图层可能仅仅是一个按钮,也可能是一整张界面 。

单个视图中的图层关系 : 通过分隔方式处理单个视图中的图层关系,帮助用户预期图层间的运动方式:(1)同步移动——接缝分隔。(2)相互覆盖——投影分隔(以不同深度的投影分隔)
同步移动
相互覆盖


应用内的图层关系:

(1)通过Z轴处理所有视图中的图层关系: a:帮助用户专注最重要的操作(人们往往认为,最表层的东西,就是最重要的东西)。b:帮助设计师判断更合理的图层的运动方式(同一个Z轴的图层间相互影响,不同Z轴的图层相互覆盖) 。
Z轴
(2)通过Z轴处理所有视图中的图层关系。



同一Z轴的投影关系
Z轴的图层关系
Component(控件)Bottom Menu(底部菜单)

什么时候用?

(1)需呈现3个或3个以上操作

(2)操作简明易懂

(3)列表形式or宫格形式

布局有什么讲究?

(1)一行描述配一行图标

(2)支持分割线分组

(3)支持标题辅助描述

有什么习性?

(1)蒙层,自下而上

(2)点击蒙层消失

(3)选项多,支持上下滚动(不建议选项超过半屏,滚动操作影响操作体验)

Button


浮动按钮

什么时候用?

代表一个页面上最重要的操作

布局有什么讲究?

(1)单个页面中只可存在一个浮动按钮

(2)禁止使用在对话框中

(3)禁止使用在侧边导航中

(4)禁止被其他控件覆盖

有什么习性?

(1)可触发工具栏

(2)可触发一组按钮

(3)可触发联系人列表

(4)所触发的操作或所触发容器内放置的操作都必须是相互关联的

边框按钮or无边框按钮

什么时候用?

页面上的辅助操作

布局有什么讲究?

(1)不增加层级负担

(2)不与行文混淆

Lists、Grids、Cards



宫格列表与卡片列表单一元素的区别

(1)宫格列表每个模块的边缘是扁平化的没有投影和任何圆角

(2)所有安卓L系统的卡片模块是有圆角和投影的



Lists(列表)

什么时候用?

(1)承载图、文,操作混排

(2)图片无需特殊强调,文本3行以内,操作2个以内

布局有什么讲究?

(1)单行纯文本Tiles
(2)单行图文带操作Tiles



(3)双行纯文本Tiles



(4)双行图文Tiles



(5)三行纯文本Tiles



(6)三行图文带操作Tiles



有什么习性?

(1)支持垂直滑动

(2)每个Tiles支持左滑/右滑呼出操作,支持被拖动到同页面的某个目标区域,支持点击上下排序

(3)必须按照相应规则排序

Grids(宫格列表)

 什么时候用?

(1)承载图、文,操作混排

(2)图片需特殊强调,文本2行以内,操作2个以内

布局有什么讲究?

(1)Grids里装的也是Tiles

(2)大图Tiles



(3)单行图文Tiles



(4)单行图文带操作Tiles



(5)双行图文Tiles



有什么习性?

(1)支持垂直滑动

(2)请用部分截断来表明宫格列表是可向下滑动查看更多的

Cards(卡片)

什么时候用?

(1)承载图、文、链接、操作、多媒体等三种以上相关数据库类型混排

(2)图片不限尺寸,支持3行以上的文本,支持高度灵活可变的文本,支持2个以上的操作

(3)不支持card翻转呈现更多,当需封装的数据类型过多,可拆分为多个card,组合使用

布局有什么讲究?

(1)图标式辅助操作,文本式辅助操作,控件式辅助操作

(2)辅助操作统一放置在Card下方

(3)常规图文Card



(4)常规图文Card+标题区域+多个类型辅助操作



(5)常规图文Card+标题区域+2个辅助按钮操作



(6)常规图文Card+多个类型辅助操作



有什么习性?

(1)支持左滑/右滑

(2)支持拖放

(3)支持重新排序

(4)支持Card内扩展截断的更多内容

Progress and Activity(活动指示器)





直线型进度条,活动指示器

什么时候用?

内置视频,内置浏览器的加载

布局有什么讲究?

出没于导航,或列表的边缘

环形活动指示器

什么时候用?

(1)空页面加载

(2)上拉抓取新数据,下滑加载旧数据

布局有什么讲究?

出没于空页面,缓存页面

附身于按钮的活动指示器

什么时候用?

快捷的数据传输,不依赖手势的全局刷新

Textfield(文本标签)

什么时候用?

当空白不足以区分内容时

布局有什么讲究?

(1)通栏

(2)半通栏

(3)带标题的通栏与半通栏

总结:这次谷歌推出的Android L对比ios8来说,其细节上更加考究,而且从列表上的设计规范上不难看出谷歌对于排版的要求非常细致以及精致。非常值得敬佩的一点是官方的设计规范还公布了Android L界面的设计原理,在设计文档的样式(style)一章中有详细阐述,非常值得视觉设计师去考究,本篇推文并没有样式的笔记,需到其他网站去浏览。另外,Android L在谷歌推出的GoogleNexus5以及GoogleNexus7两款手机上可以有比较好的呈现,其他手机运行的Android L开发包可能不是官方认可的开发包,运行起来可能会不太稳定,bug比较多。原因就是安卓系统是开源的,市面上有很多公司基于原生的安卓系统做了定制。


    关注 我的UI周记


微信扫一扫关注公众号

0 个评论

要回复文章请先登录注册