布局

TODO 待完善

为控制视觉平衡,要求设计布局单位的一致性。设计网格采用8dp网格,页面内小元素采用4dp网格对齐(图标、文字)。

设备像素比相同都是@1x时, 1pt(iOS)=1sp(android text)=1dp(android)=1px

layout-unitsmeasurements

为什么使用4dp和8dp网格?

目前已知原因有2:

  1. 根据最初栅格系统应用于网页设计的布局计算,4/8可以被更多的数字整除(常用分辨率)。
  2. 移动设备适配缩放不产生次像素,还原度高设计质量可控。

那么首先是网页布局的整除问题,如下表:

15grid-system-design

然后是移动设备缩放问题。匹配常用的ios和android设备倍率:

  • 4倍:1pt=1dp=4px(xxxhdpi)
  • 3倍:1pt=1dp=3px(xxhdpi、iPhone 6 plus)
  • 2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
  • 1.5倍:1pt=1dp=1.5px(hdpi)
  • 1倍:1pt=1dp=1px(mdpi、iPhone 3gs)

为什么没有ldpi? 因为这类设备基本绝迹。

在以上各种设备上可以灵活缩放,适应各种尺寸,前提是设计图不产生次像素影响设计质量的话,需要可以灵活的缩放。那么,我们对10以内的布局网格做了计算:

设备 设备倍率 缩放系数 网格单位
3 4 5 6 7 8 9 10
4倍:1pt=1dp=4px(xxxhdpi) 4 1 3 4 5 6 7 8 9 10
3倍:1pt=1dp=3px(xxhdpi、iPhone 6 plus 3 0.75 2.25 3 3.75 4.5 5.25 6 6.75 7.5
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6) 2 0.5 1.5 2 2.5 3 3.5 4 4.5 5
1.5倍:1pt=1dp=1.5px(hdpi) 1.5 0.375 1.125 1.5 1.875 2.25 2.625 3 3.375 3.75
1倍:1pt=1dp=1px(mdpi、iPhone 3gs) 1 0.25 0.75 1 1.25 1.5 1.75 2 2.25 2.5

那么,具体由此确定,移动端网格设计遵循如下原则:

  1. 全矢量设计图:移动端UI设计最小度量单位为2dp/pt 。
  2. 含位图设计,保证图片质量前提下,请使用@4px(xxxhdpi)设计尺寸,缩小输出其他倍率设计图。
  3. 不能避免的使用其他倍率设计UI时,最小度量(栅格)单位请遵从8单位网格所在倍率的缩放值(红字部分)。

栅格化布局

栅格化布局包含三种元素:

responsive-columns-margins-gutters

  • 间距
  • 补白

网页、app的内容应该放置在列的区域内(包含间距),不应超出列(放置到补白范围内)。 列宽度通常使用百分比定义,而不是使用固定的数值。以适应内容和屏幕尺寸的灵活响应。不同设备屏幕包含的列数通过breakpoint来设置。

layout-responsive-columns-360 360dp手机屏幕使用4列布局。

layout-responsive-columns-600 600dp的pad屏幕使用8列布局。

间距

间距主要用来辅助分割内容、协助布局页面元素。

间距通常使用固定值,根据屏幕的大小分成几种不同大小的固定尺寸。

layout-responsive-gutters-360 360dp手机屏幕使用16dp间距。

layout-responsive-gutters-600 360dp的pad屏幕使用24dp间距。

补白

边距是设置屏幕左右边缘的空白空间。

通常根据breakpoint使用固定值,根据屏幕大小改变补白的宽度,跟间距一样,补白通常也是根据breakpoint,屏幕越大宽度越宽。

layout-responsive-margins-360 360dp手机屏幕使用16dp补白。

layout-responsive-margins-600 600dp的pad使用24dp间距。

栅格系统可以根据自身需求和设计风格灵活制定,但需遵守基本的设计审美。 在新的交互、设计规范推出之前,请严格遵守标准的breakpoint标准和栅格布局尺寸。

Material design breakpoint 规则

breakpoint range(dp) 竖屏 横屏 屏幕尺寸 间距/补白*
0-359 小屏幕手机 XSMALL 4 16
360-399 中屏幕手机 XSMALL 4 16
400-479 大屏幕手机 XSMALL 4 16
480-599 大屏幕手机 小屏幕手机 XSMALL 4 16
600-719 小屏幕平板电脑 中屏幕手机 small 8 16
720-839 大屏幕平板电脑 大屏幕手机 small 8 24
840-959 大屏幕平板电脑 大屏幕手机 small 12 24
960-1023 小平屏幕板电脑 small 12 24
1024-1279 大平屏幕板电脑 medium 12 24
1280-1439 大平屏幕板电脑 medium 12 24
1440-1599 large 12 24
1600-1919 large 12 24
1920+ xlarge 12 24

iOS breakpoint

keyline

TODO

容器

容器主要用来容纳一些特定的UI元素,比如:图标、图片,和material design的 Material/surface。

layout-unitsmeasurements-dev-containers

  1. 图像容器
  2. 图标容器
  3. 表面容器

宽高比

为保持布局的一致性,请在图标和不居中尽量使用一致的宽高比。 建议使用: 16:93:24:31:13:42:3

layout-unitsmeasurements-dev-aspectratio