文章转载禁止用于商业用途，且不能带有虚拟货币、积分、注册等附加条件。转载须注明出处莫高雷草原以及作者@JiongBull。
布局规范
单位
1. 尺寸
除了在代码中会使用到像素单位的尺寸外，在布局文件中必须使用dp单位的尺寸。由于部分机型用户可以调整手机字体大小，为了避免字体大小的调整影响到布局结构，字号的单位也要求使用dp单位的尺寸。
我们适配三种像素密度的屏幕（hdpi、xhdpi、xxhdpi），他们的比例系数也是为1.5 : 2 : 3，也就是3 : 4 : 6，对于设计师来说，大致可以理解为在1080P屏幕上10dp表示30px，在720P屏幕上10dp表示20px，在480P屏幕上表示15px。
2. 色彩
色彩使用ARGB模式，用32位表示，例如#AABBCCDD，其中AA表示透明度，BB表示红色，CC表示绿色，DD表示蓝色。
注意：遵从设计规范，色值需要全部为大写。
图片
1. 分辨率
需要三种规格尺寸的图片，比例系数为1.5 : 2 : 3，也就是3 : 4 : 6。
例如logo的图片：
| 像素密度 | 比例系数 | logo分辨率 |
|---|---|---|
| hdpi | 1.5 | 72 * 72 |
| xhdpi | 2.0 | 96 * 96 |
| xxhdpi | 3.0 | 144 * 144 |
注意：对于9-patch，也需要三种规格尺寸。
2. 状态
有些图片是有状态的，例如按钮、单选框、复选框等，我们对有状态的图片进行命名时会在图片名称后面后缀对应的状态字符串。
| 状态 | 后缀 |
|---|---|
| 默认 | |
| 按下 | _p |
| 选中 | _c |
| 不可用 | _d |
3. 大小
预定义色值
应用中出现的色值不应过多，这样应用才会显得简洁干净，风格统一。
下面的表格列举了应用中使用的预定义色值、名称和描述：
| 名称 | 色值 | 描述 |
|---|---|---|
| blue_1 | #0099FF | 藍色 |
| blue_2 | #3366FF | 藍色 |
| gray_1 | #F4F4F4 | 灰色 |
| gray_2 | #E6E6E6 | 灰色 |
| gray_3 | #E0E0E0 | 灰色 |
| gray_4 | #C7C7CC | 灰色 |
| gray_5 | #666666 | 灰色 |
| gray_6 | #333333 | 灰色 |
| white | #FFFFFF | 白色 |
| black | #000000 | 黑色 |
预定义字号
统一的字号标准可以使应用风格更加统一，在不同的设备上做到一致的用户体验。
下面的表格列举了应用中使用的预定义字号、名称和描述：
| 名称 | w320dp大小 | w360dp大小 |
|---|---|---|
| text_size_1 | 11.8dp | 13.3dp |
| text_size_2 | 14.2dp | 16dp |
| text_size_3 | 17.2dp | 19.3dp |
| text_size_4 | 24dp | 27dp |
| text_size_5 | 48.9dp | 56dp |
预定义尺寸
预定义的尺寸对开发过程来说是非常方便的，可以节省很多在命名和计算过程上消耗的时间。
下面的表格列举了应用中使用的预定义尺寸、名称和描述：
| 名称 | w320dp大小 | w360dp大小 |
|---|---|---|
| dimen_1 | 0.9dp | 1dp |
| dimen_2 | 1.8dp | 2dp |
| dimen_4 | 3.6dp | 4dp |
| dimen_6 | 5.3dp | 6dp |
| dimen_8 | 7.1dp | 8dp |
| dimen_10 | 8.9dp | 10dp |
| dimen_12 | 10.7dp | 12dp |
| dimen_16 | 14.2dp | 16dp |
| dimen_24 | 21.3dp | 24dp |
| dimen_32 | 28.4dp | 32dp |
| dimen_48 | 42.7dp | 48dp |
| dimen_64 | 56.9dp | 64dp |
| dimen_96 | 85.3dp | 96dp |
| dimen_128 | 113.4dp | 128dp |
其他常用尺寸
| 名称 | w320dp大小 | w360dp大小 | 描述 |
|---|---|---|---|
| actionbar_height | 44.4dp | 50dp | 操作栏高度 |
| actionbar_icon_width | 44.4dp | 50dp | 操作栏图标宽度 |
| actionbar_icon_height | 44.4dp | 50dp | 操作栏图标高度 |
| tab_host_height | 49.2dp | 55.3dp | 选项栏高度 |
| btn_width_1 | 100dp | 112.5dp | 小按钮宽度 |
| btn_width_2 | 249.9dp | 281.1dp | 大按钮宽度 |
| btn_height | 249.9dp | 36dp | 大按钮宽度 |
| item_height_1 | 43.8dp | 49.3dp | 项目高度 |
| item_height_2 | 64dp | 72dp | 项目高度 |
| item_height_3 | 73.3dp | 81.3dp | 项目高度 |
| item_icon_width | 35.6dp | 40dp | 项目图标宽度 |
| item_icon_height | 35.6dp | 40dp | 项目图标高度 |
| corner_1 | 2.9dp | 3.3dp | 圆角弧度 |
| corner_2 | 10dp | 11.3dp | 圆角弧度 |
| divider_height | 0.6dp | 0.7dp | 分割线高度 |
时间： 2024-10-07 20:28:55