您的位置：首页

【Material Design视觉设计语言】应用布局设计

2018-04-08 08:48 357 查看

【Material Design视觉设计语言】章节列表

Material Design的布局设计旨在通过过使用同样的视觉元素，结构网格，和通用的行距规则，让应用不同平台与屏幕尺寸上拥有一致的外观和感觉。提供高度的熟悉感和舒适性的用户体验。

一应用布局单位

1.1 像素密度

像素密度（即dpi）指的是每英寸的像素点数。

像素密度的计算公式例如以下所看到的：

dpi = 屏幕宽度（或高度）像素 / 屏幕宽度（或高度）英寸

高密度的屏幕比低密度的屏幕更像素更高。

因此用户界面元素（如button）在低密度屏幕上显示较大而在高密度屏幕上显示较小。

高密度屏幕

低密度屏幕

1.2 密度独立像素

密度独立像素（即dp）是一种基于屏幕密度的抽象单位。

密度独立像素能够在屏幕上用不同的密度来显示统一的元素。

在每英寸160像素点的显示器上：1 dp = 1 px，dp的计算公式例如以下所看到的：

dp = (宽度像素160)/ dpi

密度独立像素常常能够用来处理图像的缩放，通过这=合适的比例。图像能够缩放到不同的屏幕分辨率的屏幕上而且看起来效果都一样。相关比比例如以下所看到的：

举例

在320 dpi的分辨率一个200×200像素的图标为100 x 100dp

1.3 可扩展像素

可扩展像素（即sp）主要用来处理字体大小，能够依据用户字体大小首选项进行缩放。

讲完了布局中常见的尺寸单位。我们来看几个常见的组件尺寸。

最小的触摸目标尺寸是 48dp

在布局中，当为图标（24dp）或者头像（40dp）设置边距时。触摸目标不能重叠。

二应用布局边距

关于边框与间距这一块。Google官方给出了手机、平台和电视等各大平台的布局模板，这些模板具体地描写叙述了边框与间距怎样应用于屏幕边界和元素。

Android手机设备布局模板

Android平板设备布局模板

Android桌面应用布局模板

手机作为最常常使用的移动设备。我们先来看几个关于手机布局边框与间距的处理的样例。很多其它内容能够參见上方列举的几个模板文件。

举例1

该布局演示图标、头像和一个 2 行文本的列表怎样左对齐，以及一个 56dp 的浮动动作button和文本怎样右对齐。

水平边距例如以下所看到的：

左右各有 16dp 的垂直边框。

带有图标或者头像的内容有72dp的左边距。

垂直边距例如以下所看到的：

① 24dp

② 56dp

③ 48dp

④ 72dp

举例2

该布局演示图标、头像、2 行文本列表、子标题和40dp的浮动动作button怎样左对齐。小图标右对齐。

水平边距例如以下所看到的：

图标（大小图标）有16dp的左右垂直边框。

带有图标或者头像的内容有 72dp 的左边距。

垂直边距例如以下所看到的：

① 24dp

② 56dp

③ 72dp

④ 48dp

⑤ 8dp

举例3

该布局演示图标怎样左对齐。以及图标和一个56dp的浮动动作button怎样右对齐。

水平边距例如以下所看到的：

图标有16dp的左垂直边框。

带有图标或头像的内容有72dp的左边距。32dp 的右边距（考虑到 56dp 的圆形浮动动作button）。这样圆形浮动动作button下的图标也对齐了。

垂直边距例如以下所看到的：

① 24dp

② 56dp

③ 8dp

④ 72dp

举例3

该布局演示图标、头像和文本怎样左对齐。浮动动作button、图标和文本怎样右对齐。

水平边距例如以下所看到的：

图标有16dp的左右垂直边框。带有图标或头像的内容区域左对齐，距左边界72dp。

垂直边距例如以下所看到的：

① 24dp

② 56dp

③ 48dp

④ 8dp

举例4

该布局演示了側边导航菜单的宽度，以及图标、头像和文本怎样左对齐，小图标怎样右对齐。

水平间距例如以下所看到的：

图标距側边导航菜单的左右边界分别有 16dp 的垂直边框。

带有图标或者头像的内容距側边导航菜单的左边界 72dp。側边导航菜单的宽度等于屏幕的宽度减去动作条的高度。即在本例中距屏幕右側 56dp 的宽。