最近自己写了一些 xml 布局,自我感觉不错,但细看之下却显得不那么美观。参考了一些线上的 App,发现它们的排版让人感觉很美观。UI 是一个产品极其重要的一个点,计算代码写的再牛逼,UI 不行会损失一大堆用户。于是我在网上找了一些关于 UI 排版的基本原则,整理了一下。特别感谢他们的无私分享。
常用尺寸
一般把48dp作为可触摸 UI 元件的标准, 48dp = 72px = 9mm,这是一个用户手指能够准确舒适触摸的最小尺寸。
Android界面
最小的可点击区域尺寸是 48dp = 72px = 18spAndroid界面默认 list 的高度是 48dp = 72px
Android界面默认每个元素之间最小间隔是 8dp = 12px
Android界面默认 btn 的高度是 40dp = 60px
规范的图像资源尺寸为 16dp、24dp、32dp、48dp的序列,均可以被8整除。
- 顶部状态栏高度:24dp
- Appbar最小高度:56dp
- 底部导航栏高度:48dp
- 悬浮按钮尺寸:56*56/40*40 dp
- 用户头像尺寸:64*64/40*40 dp
- 小图标点击区域:48*48dp
- 侧边抽屉到屏幕右边的距离:56dp
- 卡片间距:8dp
- 卡片的圆角:2dp
- 屏幕边界与卡片间留白:8 dp
- 卡片间留白:8 dp
- 分割线上下留白:8dp
- 大多元素的留白距离:16dp
- 屏幕左右对齐基线:16dp
- 文字左侧对齐基线:72dp
- 对话框屏幕边界:24dp
- 对话框按钮栏(LinearLayout)的高度:36dp
- 对话框按钮栏距离底部高度:16dp
切图命名规则:
- 导航栏:nav
- 标签:tab
- 背景:bg
- 按钮:btn
- 按钮常态:nor
- 按钮选中:sel
- 按钮按下:down
- 图标:icon
- 搜索:search
- 个人资料:profile
- 用户:user
- 弹出:pop
- 返回:back
- 刷新:refresh
- 删除:delete
- 编辑:edit
文字排版
- 12sp 小字提示
- 14sp 文字/按钮文字
- 16sp 小标题
- 20sp Appbar文字
- 24sp 大标题
- 34sp/45sp/56sp/112sp 超大号字体