android开发不可不知的UI知识

Posted 2020-07-08 Loften_93663469

前言

对ios和android使用同一套ios的交互设计这种做法不置可否，毕竟很多人都这么干，对此我们在开发中就要能够换算出适合分辨率的尺寸大小，我们可直接对比双方的分辨率来直接换算，例如：ios:(640*1136px) X 75% = ios:(480*852px) ≈ android(wvga hdpi):(480*800px)，知道这个后就可以根据相应的比例进行换算

屏幕基础知识

iPhone界面尺寸：

设备	分辨率	PPI	状态栏高度	导航栏高度	标签栏高度
iPhone6 plus	1080x1920px	401PPI	54px	132px	146px
iPhone6	750x1334px	326PPI	40px	88px	98px
iPhone5 - 5c - 5s	640x1136px	326PPI	40px	88px	98px
iPhone4 - 4s	640x960px	326PPI	40px	88px	98px
iPhone&iPod Touch第一、二、三代	320x480px	163PPI	20px	44px	49px

android系统密度：

密度	密度值	分辨率	比例	dp与px
ldpi	120	240x320	3	1dp = 0.75px
mdpi	160	320x480	4	1dp ＝ 1px
hdpi	240	480x800	6	1dp = 1.5px
xhdpi	320	720x1280	8	1dp = 2px
xxhdpi	480	1080x1920	12	1dp = 3px
xxxhdpi	640	3840x2160	16	1dp = 4px

概念：

1. 分辨率。分辨率就是手机屏幕的像素点数，一般描述成屏幕的“宽x高“，例如720x1280表示此屏幕在宽度方向有720个像素，在高度方向有1280个像素。Android比iPhone的尺寸多了很多套，建议取用 720x1280 这个尺寸，这个尺寸在720x1280中显示完美，在1080x1920中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。计算又简单，就是 1dp＝2px 啊

   为什么要选择720＊1280来作为设计稿，而且分辨率设置为72
   因为320dpi屏幕的分辨率最常见的是720x1280，以这个尺寸作为画布尺寸，是最带感的，这样的设计稿就和应用在最多数的320dpi的机器上运行起来的样子一样。
   而且挑密度最大的，因为图片缩小比放大好，放大会失真，选320dpi作为目标屏幕，为其他屏幕提供图片时，只需要缩小。
   72 dpi是Photoshop的默认设置，不用改就好，这个数字和后面的换算有关系。

2. 屏幕大小。屏幕大小是手机对角线的物理尺寸，以英寸（inch）为单位。比如某某手机为“5寸大屏手机“，就是指对角线的尺寸，5寸x2.54厘米／寸 ＝ 12.7厘米。

3. 密度（DPI,dots per inch;或PPI,pixels per inch）。从英文名可知，就是没英寸的像素点数，数值越高当然显示越细腻。假如我们知道一部手机的分辨率是1080x1920，屏幕大小是5英寸，那我们应该如何计算出屏幕的密度呢？很简单，我们可通过宽1080和高1920，根据勾股定律，可计算出对角线的像素数大约是2203，再用2203除以5就是此屏幕的密度了，计算结果是440。440dpi的屏幕已经相当的细腻了 。

4. 一个重要的单位dp
   dp也可写为dip，即density-independent pixel。你可以想象dp更类似一个物理尺寸，比如一张宽和高均为100dp的图片在320x480和480x800的手机上“看起来“一样大。而实际上，他们的像素值并不一样。dp正是这样一个尺寸，不管这个屏幕的密度是多少，屏幕上相同dp大小的元素始终看起来差不多大。这也就是我们开发为啥要用dp的原因了。
   另外，文字尺寸使用sp，即scale-independentpixel的缩写，这样，当你在系统设置里调节字号大小时，应用中的文字也会随之变大变小。

5. dp与px的转换
   在android中，系统密度为160dpi的中密度手机屏幕为基准屏幕，即320x480的手机屏幕。在这个屏幕中，1dp＝1px。
   100dp在320x480（mdpi，160dpi）中是100px。那么100dp在480x800（hdpi，240dpi）的手机上是多少px呢？我们知道100dp在两个手机上看起来差不多大，根据160与240的比例关系，我们可以知道，在480x800中，100dp实际上覆盖了150px。因此，如果你为mdpi手机提供了一张100px的图片，这张图片在hdpi手机上就会拉伸至150px，但是他们都是100dp。
   中密度和高密度的缩放比例似乎可以不通过160dpi和240dpi计算，而通过320px和480px也可以算出。但是按照宽度计算缩放比例不适 用于超高密度xhdpi和超超高密度xxhdpi了。即720x1280中1dp是多少px呢？如果用720／320，你就会得出1dp=2.25px，实际这样算出来是不对的。dp与px的换算要以系统密度为准，720x1280的系统密度为320，320x480的系统密度为160，320／160＝2；那么在720x1280中，1dp＝2px。同理，在1080x1920中1dp＝3px。
   当android系统字号设为“普通“时，sp与px的尺寸换算和dp与px是一样的。比如某个文字大小在720x1280的PS画布中是24px，那么告诉工程师，这个文字大小是12sp。

这里附上 Android界面设计视觉规范 及 App尺寸大全

Material design设计规范

这里主要提供android端的界面组件间距、尺寸等，更详细内容可到 中文文档 或 官方英文 查看更多内容，以下内容图片来自这里

边框与间距

该屏幕演示图标、头像和一个2行文本的列表如何左对齐，以及一个56dp的浮动动作按钮和文本如何右对齐。

左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。
垂直边距：
1. 24dp
2. 56dp
3. 48dp
4. 72dp

该屏幕演示图标、头像、2行文本列表、子标题和40dp的浮动动作按钮如何左对齐。小图标右对齐。
图标（大小图标）有16dp的左右垂直边框。带有图标或者头像的内容有72dp的左边距。
垂直边距
1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp

该屏幕演示图标如何左对齐，以及图标和一个56dp的浮动动作按钮如何右对齐。
图标有16dp的左垂直边框。带有图标或头像的内容有72dp的左边距，32dp的右边距（考虑到56dp的圆形浮动动作按钮）。这样圆形浮动动作按钮下的图标也对其了。
垂直边距
1. 24dp
2. 56dp
3. 8dp
4. 72dp

该屏幕演示图标、头像和文本如何左对齐，浮动动作按钮、图标或文本如何右对齐。
图标有16dp的左右垂直边框。带有图标或头像的内容区域左对齐，距左边界72dp。
垂直边距
1. 24dp
2. 56dp
3. 48dp
4. 8dp

该屏幕演示了侧边导航菜单的宽度，以及图标、头像和文本如何左对齐，小图标如何右对齐。
图标距侧边导航菜单的左右边界分别有16dp的垂直边框。带有图标或者头像的内容距侧边导航菜单的左边界72dp。侧边导航菜单的宽度等于屏幕的宽度减去动作条的高度，即在本例中距屏幕右侧56dp的宽。
垂直边距
1. 48dp
2. 8dp
3. 56dp

触摸目标尺寸

最小的触摸目标尺寸是48dp。在布局中，当为图标（24dp）或者头像（40dp）设置边距时，要时刻记得。触摸目标不能重叠。

应用栏

前身为android的操作栏，用于品牌推广，导航，搜索和操作。

默认高度：
手机横屏（Landscape）:48dp
手机竖屏（Portrait）:56dp
平板电脑／电脑桌面（Tablet/Desktop）:64dp
对于拉高了的选单，它的高度等于默认高度加上内容高度。

侧边导航栏（side nav）

若侧栏出现，左右边的导航抽屉（nav drawer）可以被固定一直显示或者浮动显示临时覆盖上去。左边的导航栏的内容应该是主要是导航或者识别类型的。而右边导航栏的内容应该主要是更深层次的信息，该页主要内容的初级信息。

临时的导航抽屉可以覆盖内容画布。而固定的导航抽屉应该放置在内容画布的侧边或者下方。

尺寸：
手机：侧边导航栏宽度 ＝ 屏幕宽度 － 应用栏高度
例子：Nexus 4: 304dp
Nexus 5: 288dp
iPhone: 264dp
浮动的最大宽度： 304dp

底部动作条（Bottom Sheets）

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

列表样式的底部动作条：

带头部的列表样式的底部动作条：

包含跳转到其他程序入口的标准宫格样式的底部动作条：

按钮

底部固定按钮：

悬浮响应按钮：默认尺寸和迷你尺寸。迷你尺寸仅仅用于配合屏幕上的其他元素制造视觉上的连续性。

扁平和浮动按钮的状态：

1. Flat Light/Light color
   最小宽度：88dp，高度：36dp
   覆盖状态：20％ ＃999，点击状态：40％ ＃999，不可用状态：10％ ＃999

2. Flat Dark/Dark color
   最小宽度：88dp，高度：36dp
   覆盖状态：15％ ＃ccc，点击状态：25％ ＃ccc，不可用状态：10％ ＃ccc

3. Raised Light/Light color
   最小宽度：88dp，高度：36dp

4. Flat Light/Light color
   最小宽度：88dp，高度：36dp
   正常状态：Color 500 ,覆盖状态：Color 600，点击状态：Color 700，不可用状态：10％ ＃ccc

卡片

包含一组特定数据集的纸片，数据集含有各种相关信息，例如，关于单一主题的照片，文本和链接。

卡片带圆角，带多种操作，可忽略和重排

布局准则：
字体设计：
正文：14sp 或 16sp
标题：24sp或更大
扁平按钮： Roboto Medium，14sp，10sp 字间距
移动设备上的卡片间距：
屏幕边界与卡片留白：8dp
卡片间留白：8dp
内容留白：16dp

纸片

Chips 是一种小块的用来呈现复杂实体的块，比如说日历的事件或联系人。

关闭状态的联系人纸片视图：
联系人名字使用的字体：Roboto，常规，14sp
当点击关闭状态下的联系人纸片视图，它就会展开并且显示出联系人的地址

打开状态的联系人纸片视图：
默认状态下，最顶的联系方式被激活并选中
联系人名字的字体为：Roboto，常规，16sp
地址文本的字体为：Roboto，常规，14sp
当用户选择后，纸片视图被关闭

提示框（Dialogs）

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

网格

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

网格列表表头/表尾（header/footers）：
单行表头/表尾：
高： 48dp
文本内边距： 16dp
默认字体大小： 16sp
次要动作与尾右对齐

两行表头/表尾：
高： 68dp
文本内边距： 16dp
每行的默认字体大小： 16sp/12sp或者14sp/14sp

仅有图片的网格列表：
网格内边距： 4dp
网格列表中的瓦片可以跨多列。
仔细考虑网格列表中的次要文本是否需要使用多列瓦片，因为大的瓦片可能会造成很大的空间浪费。

单行网格列表：
仅有文本
高: 48dp
文本内边距： 16dp
默认字体大小： 16sp
网格内边距： 4dp

带图标的文本：
高： 48dp
文本内边距： 16dp
默认字体大小： 16sp
网格内边距： 4dp
网格列表表尾或者表头的中的次要文本可以右对齐或左对齐。

两行网格列表：
仅有文本
高： 68dp
文本内边距： 16dp
每行的默认字体大小： 16sp/12sp或14sp/14sp
网格内边距： 4dp

带有图标的文本：
高： 68dp
文本内边距： 16dp
每行的默认字体大小： 16sp/12sp 或 14sp/14sp
网格列表表尾或者表头中的次要文本可以右对齐或左对齐。
网格内边距是4dp

列表

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

单行列表：
仅有文本：
字体： Roboto Regular 16sp
瓦片高： 48dp
文本内边距： 16dp
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

带有文本的图标：
字体： Roboto Regular 16sp
瓦片高： 48dp
左边图标内边距： 16dp
文本左内边距： 72dp
文本上部和下部内边距： 16dp
在列表的上部和下部添加 8dp 的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

带有文本的头像：
字体： Roboto Regular 16sp
瓦片高： 56dp
左边头像内边距： 16dp
文本左内边距： 72dp
文本上部和下部内边距： 20dp
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

两行列表：
仅有文本：
主要文本的字体： Roboto Regular 16sp
次要文本的字体： Roboto Regular 14sp
瓦片高： 72dp
文本内边距： 16dp
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

带有文本的头像：
主要文本的字体： Roboto Regular 16sp
次要文本的字体： Roboto Regular 14sp
瓦片高： 72dp
左边头像内边距： 16dp
文本左内边距： 72dp
文本上部和下部内边距： 16dp
图标和文本区域中心对齐。
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

带有文本和图标的头像：
主要文本的字体： Roboto Regular 16sp
次要文本的字体： Roboto Regular 14sp
瓦片高： 72dp
左边头像内边距： 16dp
文本左内边距： 72dp
文本上部和下部内边距： 16dp
右边图标内边距： 16dp
在列表的上部和下部添加 8dp 的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

三行列表：

仅有文本：
主要文本的字体： Roboto Regular 16sp
次要文本的字体： Roboto Regular 14sp
瓦片高： 88dp
文本内边距： 16dp
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

带有文本的头像：
主要文本的字体： Roboto Regular 16sp
次要文本的字体： Roboto Regular 14sp
瓦片高： 88dp
左边头像内边距： 16dp
文本左内边距： 72dp
文本上部和下部内边距： 16dp
头像和主要文本上部对齐。
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

带有文本和图标的头像：
主要文本的字体： Roboto Regular 16sp
次要文本的字体： Roboto Regular 14sp
瓦片高： 88dp
左边头像内边距： 16dp
文本左内边距： 72dp
文本上部和下部内边距： 16dp
右边图标内边距： 16dp
头像和图标与主要文本上部对齐。
在列表的上部和下部添加8dp的内边距。一个特例是在带有表头条目（subheader）的列表上部，因为表头条目包含了它们自己的内边距。

菜单

菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。
每一个菜单项是一个离散的选项或者动作，并且能够影响到应用、视图或者视图中选中的按钮。
菜单不应该用作应用中主要的导航方法。

Snackbars 与 Toasts

Snackbar 是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能从屏幕上滑动关闭。

手机端 Snackbar：

单行 Snackbar 高度：48 dp
多行 Snackbar 高度：80 dp
文本：Roboto Regular 14 sp
操作按钮：Roboto Medium 14 sp, 大写文本
默认背景填充色：#323232 100%

Android toast：

开发者可以自定义的 Toast 和它在屏幕上的位置。如果你打算自定义 Toast 的话，强烈建议按照上述 Snackbar 的样式来设计。

副标题

副标题是特殊的列表区块，它描绘出一个列表或是网格的不同部分，通常与当前的筛选条件或排序条件相关。

副标题可以内联展示在区块里，也可以关联到内容里，例如，关联在相邻的分组列表里。

在滚动的过程中，副标题一直固定在屏幕的顶部，除非屏幕切换或被其他副标题替换。

为了提高分组内容的视觉效果，可以用系统颜色来显示副标题。

列表副标题
区块高度是 48dp。

副标题字体为 Roboto Medium 14sp。

副标题应该跟列表中头像或是图标左对齐，除非那个地方有进阶操作（promoted action）。

网格副标题
区块高度是 48dp。

副标题字体为 Roboto Medium 14sp。

副标题跟左边缘距离为 16dp。

Tabs

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

用法
tab 用来显示有关联的分组内容。tab标签用来简要的描述内容。

规格：
固定并且全屏宽度
Tab 宽度：屏幕的 1/3
激活的Tab的指示器高度：2 dp
文本：14 sp Roboto Medium
文本在 tab 中居中
激活的文字颜色：#fff 或颜色选择中的次要颜色（详情可见Color）
不可用的文字颜色：#fff 60%

可滚动的：
Tab 宽度：12 dp + 文本宽度 + 12 dp
激活的Tab的指示器高度：2 dp
文本：14 sp Roboto Medium
激活的文字颜色：#fff 或颜色选择中的次要颜色
不可用的文字颜色：#fff 60%

文本框

文本框可以让用户输入文本。它们可以是单行的，带或不带滚动条，也可以是多行的，并且带有一个图标。点击文本框后显示光标，并自动显示键盘。除了输入，文本框可以进行其他任务操作，如文本选择（剪切，复制，粘贴）以及数据的自动查找功能。
文本框可以有不同的输入类型。输入类型决定文本框内允许输入什么样的字符，有的可能会提示虚拟键盘并调整其布局来显示最常用的字符。常见的类型包括数字，文本，电子邮件地址，电话号码，个人姓名，用户名，URL，街道地址，信用卡号码，PIN 码，以及搜索查询。

浅色主题：

提示和输入字体：Roboto Regular 16 sp
输入框高度：48 dp
文本顶部和底部填充：16 dp
文本字段分隔填充：8 dp

带有图标的浅色主题：

提示和输入字体：Roboto Regular 16 sp
输入框高度：48 dp
文本顶部和底部填充：16 dp
文本字段分隔填充：8 dp

终于看完了，我们开发自己应用时，可参考以上规范，实际开发肯定是按着产品经理说了算，这里也不吐槽了，下班走人。。