设计标准尺寸

  • 以iPhone6 （750×1334px）作为视觉稿的标准

    UI组件库

  • 以前端开发人员常用UI组件库为基础，对样式进行重新设计，但不能改变其布局结构

UI设计规范 - 图1
UI设计规范 - 图2

前端还原设计稿

为了1:1还原设计稿，我们需要先了解逻辑像素和物理像素的含义。

逻辑像素与物理像素

不同的手机型号屏幕像素（物理像素）多半是不同的，1px的线条在高分辨率的手机屏幕上要显示得比低分辨率小，因为相同大小的屏幕，塞了更多的像素，因此1px要显得更小。
为了实现视觉的统一感，让不同分辨率的上的物体看起来是一样的，就通过逻辑像素来实现。

逻辑像素是pt，普通像素是px。1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。开发项目中，一倍图机型上是100px乘100px，在iPhone 6s 中显示出来的是200px乘200px，在 iPhone 8 plus 中显示出来的是 300px乘300px 。在视觉上，这三个尺寸看起来是一样的。 UI设计规范 - 图3

  • iOS：代码中的 1 px 所代表的实际像素数会根据不同设备动态调整，开发者不需要进行二次换算。根据设计稿
  • Android：dp = px * (目标设备 dpi 分辨率 / 160)
  • 微信小程序：rpx = px * (目标设备宽 px 值 / 750)

    设备独立像素和设备像素比

    设备独立像素(也叫密度无关像素DIP)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
    设备像素比(简称DPR)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到： DPR=Physical Pixel/DIP。

在Chrome DevTools的「切换设备仿真」界面中显示的像素就是设备独立像素。

图片

图片像素是固定的，无法随分辨率自动拉伸，因此就需要针对不同的屏幕，选择不同的图片，也就常说的1倍图、2倍图和3倍图，与设备DPR相对应。

逻辑分辨率是系统设定的，用物理分辨率/逻辑分辨率得到倍率的转换值（DPR），从而得到缩放因子，再根据缩放因子决定该设备使用的切图。 UI设计规范 - 图4 在高分辨率的设备上使用@1x切图，看到切图明显有锯齿感，严重了会影响切图形状的识别。 在低分辨率的设备上使用@3x切图，调整切图的尺寸后视觉上与原本切图效果基本一致。 因此会有比较偷懒的做法是直接使用@3x切图，在代码中设置切图的大小，对于低分辨率由于downsampling，会失去了一些锐利度(或是色差)，但基本能接受。但是这涉及到图片资源的加载和换算，对页面的加载速率有所影响，所以实际开发中还是应该提供不同倍率的切图，根据设备进行适配。

根据https://uiiiuiii.com/screen/显示，现在手机设备DPR一般为3，因此默认可以选择3倍图，然后根据DPR选择不同倍率的切图。

自适应

不同设备对应不同的HTML，局部自适应。
优点是：针对特定设备优化，能减少资源请求，提高不同设备的用户体验。缺点是：需要单独准备多套不同尺寸的网页。

响应式

根据设备尺寸自动响应变化，维护一套代码。

参考