
上QQ阅读APP看书,第一时间看更新
2.2.3 Android基本布局
在iOS的设计规范中,我们已经剖析了网格系统及其组成元素,因此在Android布局中不再赘述,直接讲解Android中网格的布局。
单元格:Android的最小点击区域是48dp,如图2-28所示,因此能被整除的偶数4和8作为Android最小单元格比较合适。

图2-28 单元格
所有组件都与移动设备的8dp网格对齐,如图2-29所示。

图2-29 移动设备的8dp网格
图标、文字和组件中的某些元素可以与4dp网格对齐,如图2-30所示。

图2-30 与4dp网格对齐
列:列的数量在手机设备上推荐4列,在平板电脑上推荐8列,如图2-31所示。

图2-31 手机设备(左)与平板电脑(右)界面列的数量
水槽:水槽和边距的宽度在手机设备上推荐16dp,在平板电脑上推荐24dp,如图2-32所示。

图2-32 手机设备、平板电脑水槽和边距的宽度
边距:边距的宽度可以和水槽统一,也可以根据产品的设计要求与水槽不同,如图2-33所示。当Android中边距的宽度与水槽不同时,其宽度的设置具体可以参考iOS布局中边距的宽度。

图2-33 边距的宽度(❶边距❷水槽)