本文详细介绍了AndroidL的设计规范，涉及颜色提取、图片加载优化、字体选择、文字排版、布局组件（如底部导航、卡片、按钮等）、交互元素尺寸与间距、以及各种UI组件的最佳实践。此外，还提到了面试高频问题，强调了系统学习的重要性。
- ** 提取颜色 **
Android L可以从图片中提取主色，运用在其他UI元素上。
- ** 图片加载过程 **
图片的加载过程非常讲究，透明度、曝光度、饱和度3个指标依次变化，效果相当细腻。
2.7 文字
- 字体
–
英文字体使用Roboto，中文字体使用Noto。
Roboto有6种字重：Thin, Light, Regular, Medium, Bold 和 Black。
Noto有7种字重：Thin, Light, DemiLight, Regular, Medium, Bold 和 Black。
- 文字排版
常用字号：
-
12sp 小字提示
-
14sp（桌面端13sp） 正文/按钮文字
-
16sp（桌面端15sp） 小标题
-
20sp Appbar文字
-
24sp 大标题
-
34sp/45sp/56sp/112sp 超大号文字
长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。
2.8 布局
所有可操作元素最小点击区域尺寸：48dp X 48dp。
栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
-
顶部状态栏高度：24dp
-
Appbar最小高度：56dp
-
底部导航栏高度：48dp
-
悬浮按钮尺寸：56x56dp/40x40dp
-
用户头像尺寸：64x64dp/40x40dp
-
小图标点击区域：48x48dp
-
侧边抽屉到屏幕右边的距离：56dp
-
卡片间距：8dp
-
分隔线上下留白：8dp
-
大多元素的留白距离：16dp
-
屏幕左右对齐基线：16dp
-
文字左侧对齐基线：72dp
另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。
还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。
2.9 组件（Components）
显示效果
标准示例
底部动作条是一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条呈现了简单、清晰、无需额外解释的一组操作。
通常以列表形式出现，支持上下滚动。
也可以是网格式的。
按钮由文字和/或图标组成，文字及图标必须能让人轻易地和点击后展示的内容联系起来。
主要的按钮有三种:
-
悬浮响应按钮（Floating action button）， 点击后会产生墨水扩散效果的圆形按钮。
-
浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。
-
扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。
悬浮响应按钮
浮动按钮
扁平按钮
最重要且随处用到的操作，建议使用悬浮按钮。信息较多时，选用凸起按钮可以有效突出重要操作，但注意纸片不要叠太多层。扁平按钮适合用在简单的界面，例如对话框中。
使用悬浮按钮要遵循以下规则：
-
建议只用一个悬浮按钮
-
悬浮按钮可以贴在纸片边缘或者接缝处，但不要贴在对话框、侧边抽屉和菜单的边缘
-
悬浮按钮不能被其他元素盖住，也不能挡住其他按钮
-
列表滚动至底部时，悬浮按钮应该隐藏，防止它挡住列表项
-
悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线
悬浮按钮有两种尺寸：56x56dp/40x40dp
卡片是包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本，和链接。卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容，但如果需要它可以临时扩展（例如，显示评论栏）。卡片不会翻转以展示其背后的信息。
**卡片集**是**卡片**的一个平面布局
即使在同一个列表中，卡片的内容和布局方式也可以不一样。
卡片统一带有2dp的圆角。
在以下情况考虑使用卡片：
-
同时展现多种不同内容
-
卡片内容之间不需要进行比较
-
包含了长度不确定的内容，比如评论
-
包含丰富的内容与操作项，比如赞、滚动条、评论
-
本该是列表，但文字超过3行
-
本该是网格，但需要展现更多文字
卡片最多有两块操作区域。辅助操作区至多包含两个操作项，更多操作需要使用下拉菜单。其余部分都是主操作区。
** 卡片布局准则 **
字体设计
正文：14 sp 或 16 sp
标题：24 sp 或更大
扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距
移动设备上的卡片间距
屏幕边界与卡片间留白：8 dp
卡片间留白：8 dp
内容留白
16 dp
纸片是一种小块的用来呈现复杂实体的块，比如说日历的事件或联系人。它可以包含一张图片，一个短字符串(必要时可能被截取的字符串)，或者是其它的一些与实体对象有关的简洁的信息。Chips 可以非常方便的通过托拽来操作。通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图，或者是弹出与 Chip 实体相关的操作菜单。
狭小空间内表现复杂信息的一个组件，比如日期、联系人选择器。
Dialogs 用于提示用户作一些决定，或者是完成某个任务时需要的一些其它额外的信息。 Dialog 可以是用一种 取消/确定 的简单应答模式，也可以是自定义布局的复杂模式，比如说一些文本设置或者是文本输入 。
一些复杂的操作，尤其是每个决策都需要相关解释说明的情况下是不适合使用 Dialog 形式的。
Dialog 包含了一个标题(可选)，内容 ，事件。
标题：主要是用于简单描述下选择类型。它是可选的，要需要的时候赋值即可。
内容：主要是描述要作出一个什么样的决定 。
事件：主要是允许用户通过确认一个具体操作来继续下一步活动。
Dividers 主要用于管理和分隔列表和页面布局内的内容，以便让内容生成更好的视觉效果及空间感。示例中呈现的分隔线是一种弱规则，弱到不会去打扰到用户对内容的关注。
列表中有头像、图片等元素时，使用内嵌分隔线，左端与文字对齐。
没有头像、图标等元素时，需要用通栏分隔线
图片本身就起到划定区域的作用，相册列表不需要分隔线
谨慎使用分隔线，留白和小标题也能起到分隔作用。能用留白的地方，优先使用留白。分隔线的层级高于留白。
通栏分隔线的层级高于内嵌分隔线
网格列表是一种标准列表视图的可选组件。网格列表与应用于布局和其他可视视图中的网格有着明显的区别。
网格由单元格构成，单元格中的瓦片用来承载内容
瓦片可以横跨多个单元格
瓦片内容包括主要内容（primary content）和次要内容(secondary content)。主要内容是有着重要区别的内容，典型的如图片。次要内容可以是一个动作按钮或者文本。
为瓦片内容提供一个默认图片。
网格只能垂直滚动。单个瓦片不支持滑动手势，也不鼓励使用拖放操作。
网格中的单元格间距是2dp或8dp。
列表作为一个单一的连续元素来以垂直排列的方式显示多行条目。
列表由单一连续的列构成，该列又等分成相同宽度称为行（rows）的子部分。行是瓦片（tiles）的容器。瓦片中存放内容，并且在列表中可以改变高度。
如果列表项内容文字超过3行，请改用卡片。如果列表项的主要区别在于图片，请改用网格。
列表包含主操作区与副操作区。副操作区位于列表右侧，其余都是主操作区。在同一个列表中，主、副操作区的内容与位置要保持一致。
在同一个列表中，滑动手势操作保持一致。
主操作区与副操作区的图标或图形元素是列表控制项，列表的控制项可以是勾选框、开关、拖动排序、展开/收起等操作，也可以包含快捷键提示、二级菜单等提示信息。
顺序固定的菜单，操作频繁的选项放在上面。
顺序可变的菜单，可以把之前用过的选项排在前面，动态排序。
菜单尽量不要超过2级。
当前不可用的选项要显示出来，让用户知道在特定条件可以触发这些操作。
菜单原地展开，盖住当前选项，当前选项应该成为菜单的第一项。
菜单的当前选项，始终与当前选项水平对齐。
靠近屏幕边缘时，位置可适当错开。
菜单过长时，需要显示滚动条。
菜单从当前选项固定位置展开，不要跟随点击位置改变。
菜单到上下留出8dp距离。
选择器提供了一个简单的方法来从一个预定义集合中选取单个值。
日期选择器
时间选择器
线形进度条只出现在纸片的边缘
环形进度条也分时间已知和时间未知两种
环形进度条可以用在悬浮按钮上
加载详细信息时，也可以使用进度条
下拉刷新的动画比较特殊，列表不动，出现一张带有环形进度条的纸片。
滑块左右两边可以放置图标
或是可编辑文本框
非连续的滑块，需要标出具体数值
Snackbars至多包含一个操作项，不能包含图标。不能出现一个以上的Snackbars。
Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。
不一定要用户响应的提示，可以使用Snackbars。非常重要的提示，必须用户来决定的，应该用对话框。
Snackbars不能遮挡住悬浮按钮，悬浮按钮要上移让出位置。
Snackbars的留白比较大，24dp。
toasts和Snackbars类似，样式和位置可以自定义，建议遵循Snackbars的规则设计。
小标题是列表或网格中的特殊瓦片，描述列表内容的分类、排序等信息。
滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。
存在浮动按钮时，小标题要让出位置，与文字对齐。
开关允许用户选择选择项。一共有三种类型的开关：复选框、单选按钮和 on/off 开关。
单选按钮（Radio button）
复选框（Checkbox）
开关（Switch）
在一个 app 中，tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单。
扩展的 app bar + tab bar
加入检索 + app bar + tab bar
默认的 app bar + tab bar
默认的 app bar + 可滚动的 tab bar
和 tab 指示器一样的字体颜色
被锁定滚动的 tab bar
tab只用来展现不同类型的内容，不能当导航菜单使用。tab至少2项，至多6项。
tab文字要显示完整，字号保持一致，不能折行，文字与图标不能混用。
文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。
简单一根横线就能代表输入框，可以带图标
激活状态和错误状态，横线的宽度变为2dp，颜色改变
输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。
输入框提示文字，可以在输入内容后，缩小停留在输入框左上角
整个点击区域增高，提示文字也是点击区域的一部分
通栏输入框是没有横线的，这种情况下通常有分隔线将输入框隔开
右下角可以加入字数统计。字数统计不要默认显示，字数接近上限时再显示出来。
通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧
错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。
字数限制与错误提示都会使点击区域增高。
同时有多个输入框错误时，顶部要有一个全局的错误提示
输入框尽量带有自动补全功能。
提示只用在小图标上，文字不需要提示。鼠标悬停、获得焦点、手指长按都可以触发提示。
触摸提示（左）和鼠标提示（右）的尺寸是不同的，背景都带有90%的透明度。
2.10 模式（patterns）
尾声
在我的博客上很多朋友都在给我留言，需要一些系统的面试高频题目。之前说过我的复习范围无非是个人技术博客还有整理的笔记，考虑到笔记是手写版不利于保存，所以打算重新整理并放到网上，时间原因这里先列出面试问题，题解详见：
展示学习笔记
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
yNzJiNmFjOGNkODEucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXAlN0NpbWFnZVZpZXcyLzIvdy8zNTUvZm9ybWF0L3dlYnA?x-oss-process=image/format,png)
尾声
在我的博客上很多朋友都在给我留言，需要一些系统的面试高频题目。之前说过我的复习范围无非是个人技术博客还有整理的笔记，考虑到笔记是手写版不利于保存，所以打算重新整理并放到网上，时间原因这里先列出面试问题，题解详见：
[外链图片转存中…(img-sHm2CRae-1714296731168)]
展示学习笔记
[外链图片转存中…(img-z8dCj348-1714296731168)]
[外链图片转存中…(img-M11iAAKh-1714296731168)]
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
8943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
