jaqi.page

Appearance

13.7 UI设计与还原规范 ​

基本概念 ​

物理像素、逻辑像素、倍率： ​

物理像素(Physical Pixel)：

实际控制发光的最小单位，屏幕都是由许多像素点组成，构成我们看到的画面。像我们的熟悉iphone6 屏幕就是由750行、1334列像素点组成的矩阵图。简而言之，物理像素=分辨率，单位 px

逻辑像素(Logical Pixel, 又叫逻辑点，也称为设备独立像素 DIP 或 CSS 像素)：

是控制屏幕内容显示多寡的一个单位，单位 pt，程序员在开发环节必须将设计师提供的物理像素转换成逻辑像素，并通过逻辑像素来控制页面显示哪些内容。不同设备逻辑像素与物理像素的比例是不同的。每个设备物理像素固定不变，我们调节显示器的分变率其实调节的是逻辑像素。

倍率(Device Pixel Ratio)：

物理像素在硬件层面构成了液晶屏幕，逻辑像素在软件层面构成了画面图像倍率，1个逻辑像素对应1个物理像素，1pt=1px，倍率1x，1个逻辑像素对应2个物理像素，1pt=2px，倍率2x，1个逻辑像素对应3个物理像素，1pt=3px，倍率3x，倍率=物理像素/逻辑像素。单位 dpr

图片

TIP

  • rpx： 微信小程序的响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
  • ppi：像素密度，表示每英寸的像素数，ppi = √(水平像素^2+数值像素^2)/屏幕对角线长度
  • pt与dp：ios 是 pt，android 是 dp

倍率的选择 ​

推荐使用 2x 倍率：

换算、设计、效果，综合比较分析，只有 2x 倍率设计图方便向上向下适配转换。

设计图 ​

基准型号：iPhone6
物理像素尺寸：375px
标注尺寸：二倍图（750rpx）

图片 ​

  1. 图片不能有内边距
  2. 不要有圆角
  3. 不要外阴影
  4. 图片至少是二倍图

  • 全宽图片 ​

全宽图片

全宽：不需要标注宽度，100%屏幕宽度

高度标注固定，则需要备注裁剪和伸缩逻辑 不标注高度，高度随上传图片比例缩放

全宽+外边距：（例如 banner）不需要标注宽度，100%屏幕宽度 - 2*外边边距

高度标注固定，则需要备注裁剪和伸缩逻辑 不标注高度，随图片比例缩放（非滚动 banner）

  • 满屏图片： ​

宽度为，100%屏幕宽度。高度默认随图片比例缩放，应标注超过屏幕高度后的规则（滚动、裁剪、缩放） 满屏

  1. 导出都图片应该是 png 格式的透明图标
  2. 图片不能有外边距，如下 图标

排版 ​

  • 图文混排： ​

图片固定尺寸，文字应标注超宽显示规则是滚动省略还是换行，换行后与图片的垂直对齐规则

  • 水平居中： ​

margin auto 、 flex 布局、grid 布局、calc 计算，不能通过固定内外边距实现

  • 垂直居中： ​

flex 布局、grid 布局，

带边框或背景的文字：应使用内边距和字号撑开，或者屏幕百分比计算，不固定宽高

颜色 ​

  1. 使用十六进制写法，有透明度需求使用 rgba
  2. 基础色，使用 css 变量定义
css
:root {
  --main-bg-color: red;
}

:root {
  --main-text-color: blue;
}
 
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}

文字 ​

  1. 所有的字号设置都必须为偶数
  2. 一般在20rpx-36rpx之间
  3. 基础字号，使用字号类定义
  4. 单行文字使用内外边距替代行高属性

定义字号类

.h1：字号、颜色、内边距（行高）、字体粗细
.h2：字号、颜色、内边距（行高）、字体粗细
.h3：字号、颜色、内边距（行高）、字体粗细
.h4：字号、颜色、内边距（行高）、字体粗细

css
.h1{
  font-size: 36rpx;
  font-weight: bold;
  color: var(--main-text-color);
}
.h2{
  font-size: 32rpx;
   color: var(--basic-text-color);
}
.h3{
  font-size: 28rpx;
  font-weight: bold;
   color: var(--main-text-color);
}
.h3{
  font-size: 28rpx;
   color: var(--basic-text-color);
}
.h4{
  font-size: 24rpx;
   color: var(--main-text-color);
}
.h5{
  font-size: 20rpx;
  font-weight: bold;
   color: var(--basic-text-color);
}

其它 ​

gif 图太大：复杂运动拆分运动和静止图片，简单运动拆分结构使用 css 动画实现

标注 ​

  1. 所有撑满横屏的模块，不需要标注宽度，只需要标注高度
  2. 非撑满横屏的模块，不需要标注宽度，只需要外边距和高度，宽度自适应（100% - 2*外边距）

参考: ​

移动端UI设计规范
微信小程序设计指南

jaqi.note © jaqi.l @25.10.17.1 V3