• ** 底部动作条（Bottom Sheets） **

底部动作条是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。

通常以列表形式出现，支持上下滚动。

也可以是网格式的。

  • ** 按钮（Buttons） **

按钮由文字和/或图标组成，文字及图标必须能让人轻易地和点击后展示的内容联系起来。

主要的按钮有三种:

  • 悬浮响应按钮（Floating action button）， 点击后会产生墨水扩散效果的圆形按钮。

  • 浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。

  • 扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。

悬浮响应按钮

浮动按钮

扁平按钮

最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。扁平按钮适合用在简单的界面，例如对话框中。

使用悬浮按钮要遵循以下规则：

  • 建议只用一个悬浮按钮

  • 悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘

  • 悬浮按钮不能被其他元素盖住，也不能挡住其他按钮

  • 列表滚动至底部时，悬浮按钮应该隐藏，防止它挡住列表项

  • 悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线

悬浮按钮有两种尺寸：56x56dp/40x40dp

  • ** 卡片（Cards） **

卡片是包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。

**卡片集**是**卡片**的一个平面布局

即使在同一个列表中，卡片的内容和布局方式也可以不一样。

卡片统一带有2dp的圆角。

在以下情况考虑使用卡片：

  • 同时展现多种不同内容

  • 卡片内容之间不需要进行比较

  • 包含了长度不确定的内容，比如评论

  • 包含丰富的内容与操作项，比如赞、滚动条、评论

  • 本该是列表，但文字超过3行

  • 本该是网格，但需要展现更多文字

卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。

** 卡片布局准则 **

字体设计

正文：14 sp 或 16 sp

标题：24 sp 或更大

扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距

移动设备上的卡片间距

屏幕边界与卡片间留白：8 dp

卡片间留白：8 dp

内容留白

16 dp

  • ** 纸片（Chips ） **

纸片是一种小块的用来呈现复杂实体的块，比如说日历的事件或联系人。它可以包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图，或者是弹出与 Chip 实体相关的操作菜单。

狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器。

  • ** 提示框（Dialogs） **

Dialogs 用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。 Dialog 可以是用一种 取消/确定 的简单应答模式，也可以是自定义布局的复杂模式，比如说一些文本设置或者是文本输入 。

一些复杂的操作，尤其是每个决策都需要相关解释说明的情况下是不适合使用 Dialog 形式的。

Dialog 包含了一个标题(可选)，内容 ，事件。

标题：主要是用于简单描述下选择类型。它是可选的，要需要的时候赋值即可。

内容：主要是描述要作出一个什么样的决定 。

事件：主要是允许用户通过确认一个具体操作来继续下一步活动。

  • ** 分隔线（Dividers） **

Dividers 主要用于管理和分隔列表和页面布局内的内容，以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则，弱到不会去打扰到用户对内容的关注。

列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。

没有头像、图标等元素时，需要用通栏分隔线

图片本身就起到划定区域的作用，相册列表不需要分隔线

谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。

通栏分隔线的层级高于内嵌分隔线

  • ** 网格（Grids） **

网格列表是一种标准列表视图的可选组件。网格列表与应用于布局和其他可视视图中的网格有着明显的区别。

网格由单元格构成，单元格中的瓦片用来承载内容

瓦片可以横跨多个单元格

瓦片内容包括主要内容（primary content）和次要内容(secondary content)。主要内容是有着重要区别的内容，典型的如图片。次要内容可以是一个动作按钮或者文本。

为瓦片内容提供一个默认图片。

网格只能垂直滚动。单个瓦片不支持滑动手势，也不鼓励使用拖放操作。

网格中的单元格间距是2dp或8dp。

  • 列表（Lists）

列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。

列表由单一连续的列构成，该列又等分成相同宽度称为行（rows）的子部分。行是瓦片（tiles）的容器。瓦片中存放内容，并且在列表中可以改变高度。

如果列表项内容文字超过3行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。

列表包含主操作区与副操作区。副操作区位于列表右侧，其余都是主操作区。在同一个列表中，主、副操作区的内容与位置要保持一致。

在同一个列表中，滑动手势操作保持一致。

主操作区与副操作区的图标或图形元素是列表控制项，列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作，也可以包含快捷键提示、二级菜单等提示信息。

  • 菜单（Menus）

顺序固定的菜单，操作频繁的选项放在上面。

顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。

菜单尽量不要超过2级。

当前不可用的选项要显示出来，让用户知道在特定条件可以触发这些操作。

菜单原地展开，盖住当前选项，当前选项应该成为菜单的第一项。

菜单的当前选项，始终与当前选项水平对齐。

靠近屏幕边缘时，位置可适当错开。

菜单过长时，需要显示滚动条。

菜单从当前选项固定位置展开，不要跟随点击位置改变。

菜单到上下留出8dp距离。

  • 选择器（Pickers）

选择器提供了一个简单的方法来从一个预定义集合中选取单个值。

日期选择器

时间选择器

  • 进度和动态（Progress & activity）

线形进度条只出现在纸片的边缘

环形进度条也分时间已知和时间未知两种

环形进度条可以用在悬浮按钮上

加载详细信息时，也可以使用进度条

下拉刷新的动画比较特殊，列表不动，出现一张带有环形进度条的纸片。

  • 滑块控件（Sliders）

滑块左右两边可以放置图标

或是可编辑文本框

非连续的滑块，需要标出具体数值

  • Snackbars & toasts

Snackbars至多包含一个操作项，不能包含图标。不能出现一个以上的Snackbars。

Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。

不一定要用户响应的提示，可以使用Snackbars。非常重要的提示，必须用户来决定的，应该用对话框。

Snackbars不能遮挡住悬浮按钮，悬浮按钮要上移让出位置。

Snackbars的留白比较大，24dp。

toasts和Snackbars类似，样式和位置可以自定义，建议遵循Snackbars的规则设计。

  • 副标题（Subheaders）

小标题是列表或网格中的特殊瓦片，描述列表内容的分类、排序等信息。

滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。

存在浮动按钮时，小标题要让出位置，与文字对齐。

  • 选择控制（Selection controls）

开关允许用户选择选择项。一共有三种类型的开关：复选框、单选按钮和 on/off 开关。

单选按钮（Radio button）

复选框（Checkbox）

开关（Switch）

  • Tabs

在一个 app 中，tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。

扩展的 app bar + tab bar

![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xOTk3MzIwLTZiMmE2N2Y3Zjk2MGI4ZTcucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbn
Qvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8zNjAvZm9ybWF0L3dlYnA?x-oss-process=image/format,png)

加入检索 + app bar + tab bar

默认的 app bar + tab bar

默认的 app bar + 可滚动的 tab bar

和 tab 指示器一样的字体颜色

被锁定滚动的 tab bar

tab只用来展现不同类型的内容，不能当导航菜单使用。tab至少2项，至多6项。

tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。

  • 文本字段（Text fields）

文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。

简单一根横线就能代表输入框，可以带图标

激活状态和错误状态，横线的宽度变为2dp，颜色改变

输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。

输入框提示文字，可以在输入内容后，缩小停留在输入框左上角

整个点击区域增高，提示文字也是点击区域的一部分

通栏输入框是没有横线的，这种情况下通常有分隔线将输入框隔开

右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。

通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧

错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。

字数限制与错误提示都会使点击区域增高。

同时有多个输入框错误时，顶部要有一个全局的错误提示

输入框尽量带有自动补全功能。

  • 工具提示（Tooltips）

提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。

触摸提示（左）和鼠标提示（右）的尺寸是不同的，背景都带有90%的透明度。

  • Steppers

  • Toolbars

2.10 模式（patterns）

  • 空状态（Empty states）

  • 错误（Errors）

  • 导航（Navigation）

Tabs

Bottom navigation bar 1

Bottom navigation bar 2

Navigation drawer

  • 导航抽屉（Navigation drawer）

侧边抽屉从左侧滑出，占据整个屏幕高度，遵循普通列表的布局规则。手机端的侧边抽屉距离屏幕右侧56dp。

侧边抽屉支持滚动。如果内容过长，设置和帮助反馈可以固定在底部。抽屉收起时，会保留之前的滚动位置。

列表较短不需要滚动时，设置和帮助反馈跟随在列表后面。

  • 通知（Notifications）

  • 权限（Permissions）

  • 搜索（Search）

  • 设置界面（Settings）

设置和帮助反馈通常放在侧边抽屉中。如果没有侧边抽屉，则放在Appbar的下拉菜单底部。

设置界面只能包含设置项，诸如关于、反馈之类的界面，入口应该放在其他地方。

设置项使用通栏分隔线来分组。7项以下不必分组。如果某项独立一组，考虑把它放在顶部（重要）或放在底部的“其他”一栏中（不重要）。设置项较多时尝试合并，比如把两个相关的勾选项合并成一个多选项。设置项非常多时，使用子界面。

  • 点击刷新（Swipe to refresh）

2.11 资源

Android UI 设计规范，挥泪整理面经相关推荐

  1. Android UI设计规范

    Android UI设计规范 ----------------------------------------------------------------- 常见分辨率 手机:800*480( 8 ...

  2. UI ： 2022年iOS/Android UI设计规范（1）

    1.设计与切图 设计 PhotoShop Sketch / XD 设计稿 750×1624 px 375×812 pt iPhone切图稿 1284x2778 px 428x926 pt Androi ...

  3. Android UI 设计规范，Android高分面试指南

    | 45% | 73 | | 40% | 66 | | 35% | 59 | | 30% | 4D | | 25% | 40 | | 20% | 33 | | 15% | 26 | | 10% | 1 ...

  4. Android UI 设计规范 ~Material Design

    Material Design是一个给视觉.动态或是跨平台互动的全面性指南,Android现在都有支援app的Material Design 安卓上严格遵循着栅格化系统,和平面设计一样.一切都是遵循8 ...

  5. Android UI 设计规范

    1. 基础常识 1.1 主流屏幕尺寸 标识 屏幕尺寸 hdpi 480 * 800 xhdpi 720 * 1280 xxhdpi 1080 * 1920 1.2 图标尺寸 标识 启动图标尺寸 菜单图 ...

  6. Android UI 设计规范，androidsdk开发文档

    底部动作条是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能.底部动作条呈现了简单.清晰.无需额外解释的一组操作. 通常以列表形式出现,支持上下滚动.

  7. Android UI 设计规范，数据结构与算法面试题

    ** 底部动作条(Bottom Sheets) ** 底部动作条是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能.底部动作条呈现了简单.清晰.无需额外解释的一组操作. 通常以列表

  8. android界面图标大全,Android UI设计常识和Android UI界面欣赏酷站推荐

    这几天都是iphone6的信息.25学堂根据群里网友的一些建议.今天把android设计的一些基本规范和设计尺寸常识再来罗列一下. 之前25学堂认真整理的关于android ui设计规范的知识点如下: ...

  9. ui设计移动端字体适配_超全面的移动端UI 设计规范整理汇总

    很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ...

最新文章

  1. 小型职工工作量c语言,计算机c语言职工工作量统计系统（20页）-原创力文档
  2. Android WebView 和 javaScript的互相调用(二)
  3. 不用现有方法，把string转换成int型[C#]
  4. T-SQL :SQL Server 定义数据完整性 5大约束
  5. javasrcipt的作用域和闭包（二）续篇之：函数内部提升机制与Variable Object
  6. 2018.12.11——全局变量与局部变量
  7. 网页一键生成app软件_施工方案不会写？4个工程人必备的自动生成软件，一键生成超便利！...
  8. Ubuntu 对比度调节
  9. HTML5-Video（视屏播放）
  10. PMP 考点 第十一章 项目风险管理
  11. 看了这个才发现jQuery源代码不是那么晦涩
  12. 商品订单管理系统（参考答案）
  13. 租房中介系统源码，房屋租赁管理系统源码
  14. ANSYS有限元仿真分析：边界非线性 （接触Contact）
  15. springboot整合ldap
  16. 数字化时代，全方位解读商业智能BI
  17. linux怎么生成sct文件,sct文件扩展名，sct文件怎么打开？
  18. Linux下ISCSI共享存储服务
  19. 项目中用SpringBoot集成Tio
  20. NLP学习笔记 02 句法和文法

热门文章

  1. 到曾经去过的地方，向经典致敬!
  2. Android插件化的探索
  3. 如何使用matlab进行模 数转换,如何使用matlab中的ident工具箱进行系统辨识数学模型...
  4. 农民工的下一个出路在哪里？
  5. 01-STM32+Air724UG远程升级篇OTA(自建物联网平台)-STM32如何实现的升级程序
  6. 计算机二级要学的函数有哪些,计算机二级常用函数，你了解多少？
  7. python 面向对象二
  8. @Transient----------------springMVC
  9. 大数据技术之数据存储
  10. 如何将外部字体引入微信小程序？