• 设计师可以用 iPhone6 （750×1334px）作为视觉稿的标准，开发者转换设计稿公式：750 * 元素在设计稿中的宽度 / 设计稿基准宽度。如果设计稿按照750宽度设计，那么app开发中的css样式也可以设置为同样大小，单位为 rpx 。如：设计稿是三个250px的图片，刚好填充当前宽度，则app开发中的css样式设置为250rpx。

  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径

    组件库

  • UI组件库以uView为主，uni-ui为辅

  • 图表库ucharts、F2

    骨架屏用途

  • 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用

  • 作为首屏渲染的优化.

图片

https://next.startdt.com/spec

常见的图片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根据图片格式的特性和场景需要选取适合的图片格式。

图片格式

GIF

GIF 图象是基于颜色列表的（存储的数据是该点的颜色对应于颜色列表的索引值），最多只支持 8 位（256 色）。GIF 文件内部分成许多存储块，用来存储多幅图象或者是决定图象表现行为的控制块，用以实现动画和交互式应用。GIF 文件还通过 LZW 压缩算法压缩图象数据来减少图象尺寸。
图像特性

  • 可插入多帧，从而实现动画效果
  • 可设置透明色以产生对象浮现于背景之上的效果
  • 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小

  • 由于采用了 8 位压缩，最多只能处理 256 种颜色，故不宜应用于真彩色图片

    PNG

    PNG 是 20 世纪 90 年代中期开始开发的图像文件存储格式，其目的是企图替代 GIF 和 TIFF 文件格式，同时增加一些 GIF 文件格式所不具备的特性。流式网络图形格式（Portable Network Graphic Format，PNG）名称来源于非官方的 “PNG’s Not GIF”，是一种位图文件（Bitmap File）存储格式。PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位；存储彩色图像时，彩色图像的深度可多到 48 位，并且还可存储多到 16 位的 α 通道数据。PNG 使用从 LZ77 派生的无损数据压缩算法。
    图像特性

  • 无损压缩

  • 支持 256 色调色板技术，文件体积小
  • 支持 Alpha 通道的透明/半透明特性
  • 最高支持 48 位真彩色图像以及 16 位灰度图像
  • 支持图像亮度的 Gamma 校准信息
  • 支持存储附加文本信息，以保留图像名称、作者、版权、创作时间、注释等信息
  • 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌
  • 使用 CRC 防止文件出错

  • 最新的 PNG 标准允许在一个文件内存储多幅图像

    JPGE

    JPEG 是一种针对照片视频而广泛使用的一种有损压缩标准方法。这个名称代表 Joint Photographic Experts Group（联合图像专家小组）。此团队创立于公元 1986 年，于 1992 年发布了 JPEG 的标准，并在 1994 年获得了 ISO 10918-1 的认定。
    图像特性

  • 适用于储存 24 位元全采影像

  • 采取的压缩方式通常为有损压缩
  • 不支持透明或动画
  • 压缩比越高影像耗损越大，失真越严重

  • 压缩比在 10 左右肉眼无法辨出压缩图与原图的差别

    WEBP

    WebP 是一种同时提供了有损压缩与无损压缩的图片文件格式，派生自视频编码格式 VP8，是由Google在购买On2 Technologies后发展出来。WebP最初在2010年发布，2011年11月8日，Google开始让WebP支持无损压缩和透明色的功能，而在2012年8月16日的参考实做libwebp 0.2.0中正式支持
    图像特性

  • 同时提供有损压缩和无损压缩两种图片文件格式

  • 文件体积小，无损压缩后，比 PNG 文件少了 45％ 的文件大小；有损压缩后，比 JPEG 文件少了 25% - 34% 文件大小

  • 浏览器兼容差，目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器（Andriod 4.0+）

    使用建议

    内容图

    内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大。

  • 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式

  • 尽量不使用 PNG 格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

    背景图

    背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片。

  • PNG 与 GIF 格式，优先考虑使用 PNG 格式，PNG 格式允许更多的颜色并提供更好的压缩率

  • 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免使用 JPEG 格式
  • 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式
  • 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式

  • 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

    图片大小

    在保证视觉效果的情况下，应该选择最小的图片格式与图片质量, 以减少加载时间。同时应该少用图片元素，尽量用 CSS 代替，例如：圆角、提示框、不会二次渲染的元素的阴影等。

  • PC 端单张的图片的大小不应大于 200KB

  • 移动端单张的图片的大小不应大于 100KB

    注意：图片的大小约定标准随全国网速的改变而改变

图片质量

  • 上线的图片都应该经过压缩处理，压缩后的图片不应该出现肉眼可感知的失真区域

  • 60 质量的 JPEG 格式图片与质量大于 60 的相比，肉眼已看不出明显的区别，因此保存 JPEG 图的时候，质量一般控制在 60，若保真度要求高的图片可适量提高到 80，图片大小控制在 200KB 以内

    图片引入

    占位图

    在开发阶段，通常需要填充一些图片来预览页面效果，可以使用线上占位图生成服务。

    1. https://picsum.photos/900/320

    uni-app移动端开发规范 - 图1
    使用占位图生成服务时应该指定占位图尺寸，使开发页面更接近实际效果。

    雪碧图

    雪碧图（CSS Sprites）是一种网页图片应用处理方式。其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的background-image、background-repeat 和 background-position 属性组合，以精确的定位出背景图片的位置。
    特点

  • 减少请求数

  • 加速图片的显示
  • 维护更新成本大
  • 更多的内存消耗，特别是大体积或有过多空白的 Sprites 图
  • 图片渗漏，相邻的不需展示的图片有可能出现在展示元素中，特别是在高清设备移动设备上

使用建议

  • 适合使用频率高更新频率低的小图标
  • 尽量不留太多的空白
  • 体积较大的图片不合并

  • 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

    内联图

    内联图像（Inline Image）通过 Data URLs 协议在文档中嵌入图像。
    Data URLs 由四个部分组成：前缀(data:)、数据类型、如果非文本则为可选的 base64 标记、数据本身：

    data:[<mediatype>][;base64],<data>

    mediatype 是个 MIME 类型的字符串，例如 “image/jpeg” 表示 JPEG 图像文件。如果被省略，则默认值为 text/plain;charset=US-ASCII。
    如果数据是文本类型，你可以直接将文本嵌入 (根据文档类型，使用合适的实体字符或转义字符)。如果是二进制数据，你可以将数据进行Base64 编码之后再进行嵌入。
    特点

  • 减少请求数

  • 转换文件体积大，大约比原始的二进制大 33%
  • IE6 / IE7 不支持
  • 图片显示相对较慢，需要更多的 CPU 消耗

使用建议

  • 适合更新频率高的小图片，如某些具备自定义功能的标题 icon 等
  • 转换成 Base64 编码的图片应小于 2KB
  • 移动端不使用 Base64 编码
  • 要兼容 IE6/IE7 的不使用