组件与经常使用模式

前面已经比較全面的介绍了Material Design相关的设计哲学、设计原理和方法论。

这一章開始,我们将看看这些原理是怎样在安卓系统其中得到实践的。

一个应用并非全然从什么都没有来组建的。至少会有一匹一匹的砖嘛。而在界面设计其中,这些能够拿过来就使用的砖块就是控件。

比如,button 滑动条 列表等等,都是能够直接拿过来用的砖块。

Material Design最基础的体现,就是看看这些砖长成什么样。以及怎样用Material Design的理念将这些砖组合起来,构建成应用的界面。

这种砖块非常多。Google在Material Design规范中给出了详细的定义。

因此我不会一一列举。仅仅是拿出其中一两个最为常见的、最为典型的砖块和大家讨论,看看规范该怎样解读和使用。知道了这些典型砖块的实践方式以后。大家就能自己依据设计规范来查看资料了。

我这里选取了button 列表 应用栏 系统栏来详细的讨论。

button

Material Design中有3类button:

  • Floating actionbutton:前面已经大致介绍过,它是一个圆形的button,悬浮在界面之上6dp的位置,当点击的时候,button会向上浮动(显示出更大的阴影)。是界面中吸引用户的界面元素之中的一个;

  • Raisedbutton:拥有背景颜色(Accent color)的button。点击时它在z轴的位置会向上变化。

  • Flatbutton:button文字有颜色(Accent color)的button,点击时它在z轴的位置不会变化;

Flatbutton

Flatbutton经常常使用在toolbar对话框以及须要与非常多文字配合的地方。

通经常使用来告诉用户“我能提供一些轻量级的功能,这些功能并非我的特色。你知道我有即可”。

它的设计规范例如以下,

项目 数值
最小宽度 88dp
高度 36dp
边角弧度半径 2dp
左右margin 8dp
左右padding 8dp
字体大小 15sp

当使用亮色主题并按下button的时候,button的背景颜色是#999999。透明度为40%;

当使用暗色主题并按下button的时候,button的背景颜色是#CCCCCC,透明度为25%;

当点击button的时候,会出现水波纹一样的动画。

Raisedbutton

Raisedbutton比Flatbutton能更加吸引用户的注意力。通经常使用来告诉用户“点击我以后,会启动我一个非常重要的功能,你要特别注意”。

它的设计规范例如以下,

项目 数值
最小宽度 88dp
高度 36dp
默认z轴位置 2dp
按下时z轴位置 8dp
边角弧度半径 2dp
左右margin 0dp
左右padding 16dp
字体大小 15sp

当使用暗色主题时,背景的颜色例如以下,

button状态 数值
正常 调色板500类型的颜色
按下 调色板700类型的颜色

当点击button的时候。会出现水波纹一样的动画,之后button在Z轴的位置也会提升,

FloatingActionbutton

FloatActionbutton是界面其中最引人瞩目的button。它代表了这个界面能提供的最重要、最核心的功能。默认情况下它的尺寸是56dp,放在上方会小一点。是40dp。

依照中心位置会内嵌一个系统图标,系统图标的大小我们在图标的章节讲过,是24dp。

须要注意的是:并非全部的界面一定要有个FloatActionbutton。它的存在全然是由应用的逻辑决定的。

之所以我们看到那么多界面都有FloatActionbutton,是由于这是Material Design的典型特征,所以选择的非常多样例都有它。假设某个界面确实须要FloatActionbutton。那么一个界面上也仅仅能有一个,表明仅仅有一个功能是最为重要的。

FloatActionbutton另一些经常使用的使用模式:

  • 当拥有FloatActionbutton的界面退出的时候,button要用动画的形式消失。

    当拥有FloatActionbutton的界面显示的时候。button要用动画的形式出现。

    当拥有FloatActionbutton的界面在内部进行切换的时候。button要有动态变化的效果;

  • button点击后能够,展示出很多其它菜单;

    • button变化成一个新的纸片,纸片上展现很多其它的内容。

它的设计规范例如以下,

项目 数值
标准尺寸 56dp
最小尺寸 40dp
内嵌图标尺寸 24dp
默认z轴位置 6dp
按下时z轴位置 12dp
背景颜色 Accent Color

列表

接下来,我们看看另外一个会经经常使用到的组件列表。

列表用来显示展示类型相同的数据,比方都有头像、名字、职务等信息。不同的仅仅是这些信息的详细内容。

列表项是列表的一个显示单元,列表项的布局不要超过三行。假设确实要超过三行。那么就不应该使用列表来展示内容了。

列表项的内容依据位置的不同,体现出的重要性也不同:

  1. 靠左边的内容是最重要的。右边的次之;
  2. 靠上边的内容是最重要的。下边的次之;

常见的列表布局有下面三种,

  1. 单行:有一行文字的显示

  2. 双行:有两行文字的显示

  3. 三行:有三行文字的显示

这些布局中各个元素的位置。都在规范中有明白的规定。经过button那一小节的讲述。我想大家一定具备看懂规范的能力,能够从中找到设置位置的关键点。

在查看上面的演示样例时。大家应该注意到了列表项的切割线。

这些切割线将列表区域依照逻辑区分开来,都是1dp的宽度。

  • 有的切割线贯穿了整个屏幕。

  • 有的仅仅是将文字的部分分开;

  • 有的没有分隔。

to

关于切割线,在Material Design的规范其中,也有专门的章节仔细的讲述。

应用栏与工具栏

工具栏的作用是把非常多操作button集中起来,一起展现给用户。它能够放在应用界面的上部分、中间、底部,

在安卓的设计其中,有个ActionBar的概念,它的作用就是展示一个应用的图标、名字,以及菜单、导航栏等内容,从安卓3.0開始它就被提出,并推广了起来。

只是从安卓5.0開始。在ActionBar的基础上提出了AppBarAppBar除了担当ActionBar的功能外,还添加了一些新的特性。比如滑动效果。新引入的详细的控件ToolBar接替了ActionBar的详细功能,成为AppBar最为核心的组件。

为了便于理解。我举一个样例。

Google在2015年进行拆分。成立了多家公司,并将它们规整到Alphabet公司旗下。而曾经的Google仅仅保留搜索业务。成为了一个比較单纯的公司。

ActionBar就相当于曾经的Google公司。AppBar相当于Alphabet;ToolBar就是Alphabet成立后的Google。AppBar除了ToolBar以外。还可能包括很多其它组件在其中。

应用栏的高度依据屏幕横竖状态的不同而不同,

屏幕状态 高度
竖屏 56dp
横屏 48dp

应用栏能够依据开发人员的要求。变成透明的、半透明的、甚至不显示。

AppBar除了显示标题、菜单等功能外,还有令人炫目的滑动效果,这也是安卓系统使用Material Design的重要特色。

AppBar除了Toolbar以外,能够包括分页标签Tabs 图片等等内容。图片占用的空间叫做可变空间-Flexible space,不一定就是放图片,也能够放其它的元素,仅仅只是就界面设计来讲,显示图片的效果要非常多。

  • AppBar仅仅有Toolbar:内容滚动的过程中,Toolbar能够被顶到消失。也可通过下拉再次出现。

  • AppBarToolbarTab

    1. 内容滚动的过程中,Toolbar能够被顶到消失,仅仅留下Tab。也可通过下拉再次出现。

    2. 内容滚动的过程中,ToolbarTab都被顶到消失;也可通过下拉再次出现。

  • AppBarToolbar和可变区域:

    1. 内容滚动的过程中,可变区域能够被顶到消失,仅仅留下Toolbar;也可通过下拉再次出现。

    2. 内容滚动的过程中,Toolbar和可变区域都被顶到消失。也可通过下拉再次出现。

状态栏与导航栏

用过智能手机的同学对状态栏和导航栏一定不会陌生。

状态栏贯穿了整个屏幕的宽度,高度是24dp。

导航栏相同贯穿了整个屏幕的宽度。高度是48dp。

只是在非常多国内定制的系统其中,由于手机已经有了实体按键。就取消了导航栏。

状态栏和导航栏的背景颜色是能够各自改变的。透明、半透明、不透明。

为了配合不同应用的使用场景,状态栏和导航栏的显示也有不同的表现,

  • 沙发模式(Lean back):就像在瘫坐在沙发上看电影时一样,屏幕尽可能的呈现视频内容,把状态栏和导航栏都藏起来。

    这个过程中你差点儿不会去接触到屏幕,当你碰触屏幕的时候,状态栏和导航栏才会出现。

  • 沉浸模式(Immersive):比方当你在使用阅读软件看书的时候,屏幕仅仅显示书本的内容,把状态栏和导航栏隐藏起来,让你沉浸在阅读的快乐其中。但每次翻页的时候,你还是须要接触屏幕的。尽管翻页的过程中接触了屏幕,状态栏和导航栏也不会出现,除非你在屏幕的边缘做了一个滑动的动作。才干将它们再次唤出。

  • 关灯模式(Light out):当你不碰触屏幕超过一定的时间。状态栏会自己主动的隐退;导航栏尽管还在那里。可是那三个操作的button却变成了三个小点。这个过程就好像是关闭了照亮屏幕的灯。状态栏和导航栏似乎还在那里,仅仅是没有了灯光。已经看的不真切了。


本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈,对本文有不论什么的意见和建议请留言,我都会尽量一一回复。

假设您认为本文对你有帮助。请推荐给很多其它的朋友;或者添加我们的QQ群348702074和很多其它的小伙伴一起讨论。也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。

除了CSDN公布的文章,本系列最新的文章将会首先公布到我的专属博客book.anddle.com

大家能够去那里先睹为快。

android应用开发-从设计到实现 2-8 组件与经常使用模式的更多相关文章

  1. Android应用开发以及设计思想深度剖析

    Android应用开发以及设计思想深度剖析(1) 21cnbao.blog.51cto.com/109393/956049

  2. android应用开发-从设计到实现 3-3 Sketch静态原型设计

    Sketch静态原型设计 对于静态原型的设计,我们使用Sketch. 启动Sketch后,我们将看到相似例如以下的界面, 工具栏 它的顶部是工具栏, 能够通过菜单条View -> Customi ...

  3. android应用开发-从设计到实现 3-4 静态原型的状态栏

    静态原型的状态栏 状态栏Symbol 状态栏似乎非常复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你能够直接拿过来就用了.当然.你也能够自己一个一个去画,只是 ...

  4. android应用开发-从设计到实现 3-9 Origami动态原型设计

    动态原型设计 动态的可交互原型产品,是产品经理和界面设计师向开发人员阐释自己设计的最高效工具. 开发人员不须要推測设计师要什么样的效果,照着原型产品做就好了. 非常多创业团队也发现了产品人的这个刚需, ...

  5. 20155219实验四 Android开发基础设计实验报告

    20155219实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello World!+学号的小程序 实验步 ...

  6. 20155227 《Java程序设计》实验四 Android开发基础设计实验报告

    20155227 <Java程序设计>实验四 Android开发基础设计实验报告 任务一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二 ...

  7. 20145219 《Java程序设计》实验四 Android开发基础设计实验报告

    20145219 <Java程序设计>实验四 Android开发基础设计实验报告 实验内容 安装Andriod Studio并配置软件 使用Andriod Studio软件实现Hello ...

  8. 【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现

    写完博客的总结 : 以前没有弄清楚的概念清晰化 父容器与本容器属性 : android_layout...属性是本容器的属性, 定义在这个布局管理器的LayoutParams内部类中, 每个布局管理器 ...

  9. 【转】Android 底层开发的几点

    我干了3年Android sdk开发,觉得到了瓶劲没法更进一步,于是花了一年多点时间,大概摸到点门径.根据前辈的经验,Android底层完全入门需要两年. 先说下我的入门过程:第零步,下载源码,我下的 ...

随机推荐

  1. LeetCode 3 :Min Stack

    今天做了一道MinStack的题,深深的感到自己C++还完全没有学好!!! #include <iostream> #include <stack> using std::st ...

  2. HDU1217 (Floyd简单变形)

    Arbitrage Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  3. 一步步打造自己的linux命令行计算器

    相信很多人,在工作中会需要使用到计算器.一般的做法是,打开并使用系统自带的计算器. 这种做法可能对我来说,有如下几个问题. 太慢.每次需要打开计算器,然后改成编程模式,手工选择进制,再使用输入表达式进 ...

  4. 转载:超级强大的vim配置(vimplus)--续集

    超级强大的vim配置(vimplus)--续集 原文地址:https://www.cnblogs.com/highway-9/p/5984285.html An automatic configura ...

  5. Ubuntu10.04中利用V4L2读取摄像头数据并保存成文件【转】

    转自:http://blog.chinaunix.net/uid-29339876-id-4042245.html 利用V4L2读取UVC摄像头数据并保存成视频文件,主要参考http://linuxt ...

  6. mysql分页查询语法

    一.limit语法 SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset LIMIT 子句可以被用于强制 SELECT 语句返回指 ...

  7. go语言中的json

    结构体类型转化为json格式 package main import ( "encoding/json" "fmt" ) //如果要转化成json格式,那么成员 ...

  8. centos6.5 挂载远程目录

    查看nfs程序是否安装: [root@crawler_mv02 ~]# rpm -qa |grep rpcbindrpcbind-0.2.0-13.el6_9.1.x86_64[root@crawle ...

  9. DELPHI 参数前缀的使用

    传值参数传值参数可在过程内部修改,但过程返回时该修改不会反映出来.不加任何前缀,就表示该参数为传值参数.Procedure Foo( I : Integer );I 的值被传递到Foo 过程.当Foo ...

  10. CentOS6.x 安装升级Python2.7.x Python3.4.x

    CentOS6.x 安装升级Python2.7.x Python3.4.x 2015-06-07• CentOS.Linux • 评论关闭 CentOS release 6.6 (Final) 安装升 ...