移动端UI设计基础

概念

• UI 界面设计：静态用户界面设计，注重规范和美感
• UE 交互设计：用户交互设计，注重人机交互、用户操作

尺寸单位概念

• 像素：构成图像的最小单位，相同规格的界面，像素越多图片越清晰
• ppi(屏幕像素密度)：像素数/图像英寸，即每英寸图像拥有的像素数，像素密度越高，显示越清晰
• dpi(平面设计/印刷艺术单位)：每英寸所能印刷的网点数，值越大，精度越高,ppi=dpi

Android分辨率与单位转换

• Android程序开发统一使用虚拟尺寸单位：dp/dip,sp
• dp/dip:用于Android元素尺寸，如按钮、导航尺寸。
• sp：用于Android字体大小尺寸。
• UI设计像素PX=转换率*dp,
• 超高dpi屏幕的逻辑分辨率都统一为360*640分辨率，也就是说，如果组件也使用dpi，那么在相同的逻辑分辨率下，样式是一致的，即使分辨率不一样。

Iphone分辨率与单位转换

• 单位:pt
• 为了开发方便，可以模拟1242x2208 @3x分辨率套入1080x1920屏

Android和Iphone适配

• 推荐适配 750*1334

Android基准布局

• 建议：
• 组件最小间隔:8dp或10dp。
• 排版/文字:4dp
• 尺寸能被4整除为偶数（单数容易出现锯齿）。
• 状态栏:24dp
• 操作栏:44/48dp
• 侧边导航:286/304dp
• 悬浮操作按钮:56dp
• 操作栏加TAB:36+33dp/44+40dp
• 底栏:44/48dp
• 48触摸定律：触摸式UI组件以48dp为基准单位。48dp转换为物理尺寸大约9mm左右。这是一个用户手指能够准确舒服触摸的最小尺寸
• 水平外边距 6/8/12/16dp
• 文本排版
  • 逗号不排在最左侧
  • 左对齐优先右对齐 正文行宽不超过320dp
  • 标题越重要、级别越大颜色越深、越突出
  • 字体设计有层次，有主次
  • 大标题（操作栏）18sp #515151
  • 主标题（内容区 正文1）16sp #515151
  • 辅标题（浏览数/点赞数 正文2）14sp #5E5E5E

相关链接

• 个人博客原文首发