车辆图像用于移动应用,屏幕大小合适,网络占用小,每张卡片上都一致。

应用团队将车辆图像作为有效载荷问题和一致性问题继承下来。通过一次查找解决两者:通过 VIN 或规格提供精确车辆,作为来自 CDN 的大小 WebP 交付,您的列表视图不会感到。

迷你库珀前左侧,在移动应用中
Mazda 3前右,在移动应用中
迷你库珀前左侧,在移动应用中

列表的生死取决于图像的重量

发送全分辨率照片的车辆列表是一个滚动性能错误,伪装成设计决策。请求卡片渲染的宽度,以 WebP 格式,同一个列表在不重新设计的情况下变得快速。

  • 宽度、格式和质量作为请求参数
  • 带有透明度的WebP用于主题背景
  • 一致的纵横比,确保单元格不会跳动

集成,应用团队版本

服务器端解析,客户端渲染,到处缓存。这种模式故意平淡无奇。

01
在后端解析

VIN 或规格解析在您的数据所在的地方,API 密钥保留在设备外

02
向客户端发送URL

卡片以纯文本形式接收图像 URL,并从宽度参数中获取 srcset 风格的变体。

03
像应用程序一样缓存

CDN 头部进行网络缓存,图像管道进行设备层处理,列表离线滚动。

04
处理边缘

加载时的固定比例占位符,缺失时的品牌回退,响应告诉您何时使用了回退车型年份。

卡片按构造对齐

每辆车都有相同的构图,这才让列表看起来设计精良。

迷你库珀,列表卡片
迷你库珀,列表卡片
Mazda 3,相同的框架
Mazda 3,相同的框架
本田思域,同比例
本田思域,同比例
Seat Leon,同一款式
Seat Leon,同一款式
手机应用中的本田思域左后视图

离线和低带宽是正常情况,而不是边缘情况

汽车应用在展厅、停车库和火车上使用。可缓存的URL和稳定的ID意味着您现有的离线策略也覆盖了车辆图像,浏览的列表在死区中依然可浏览。

  • 稳定的ID使缓存键变得简单
  • 尺寸变体保持离线商店小巧
  • 在目录更新时刷新,而不是每次启动
Seat Leon IV 后右视图,在移动应用中

透明剪切遵循应用程序主题

暗色模式、品牌背景和季节主题都需要车辆而不需要背景。透明的WebP放在您的表面颜色上,意味着一个资产可以服务于每个主题,设计系统保持控制权。

  • 每个请求的透明或阴影变体
  • 同一剪切图在明亮和暗黑模式下都能使用
  • 没有内置背景与您的调色板对抗

我们通过仅请求渲染的宽度,大幅减少了列表视图的负载,黑暗模式在我们切换到透明裁剪的那天就不再是特殊情况了。

Lukas Brandt 移动领先,车辆市场应用

应用团队问什么

原生、React Native 还是 Flutter?

所有这些,因为交付的内容是图像 URL。任何从 URL 渲染图像的内容都能完全集成,解析步骤在您的后端中,与客户端堆栈无关。

我们如何处理不同的屏幕密度?

通过 width 参数请求宽度变体,并按设备选择,就像网页上的 srcset 一样。三种尺寸在实践中覆盖了手机到平板。

我们可以将图像捆绑在应用中以实现离线优先吗?

通过您的正常管道缓存它们,稳定 ID 作为键。对于固定车队,构建时的捆绑也适用,许可证涵盖了存储的副本

查询在滚动过程中失败时会发生什么?

一次性设计:加载时的固定比例占位符,缺失时的品牌回退,并记录标识符。响应还标记了回退,如替换的车型年份,因此您决定显示什么。

这会增加对你的运行时依赖吗?

如果你缓存的话,就不是。在目录更新时解析,从你自己的存储或CDN提供服务,这样应用就不会在关键路径上等待我们的源。

有SDK吗?

有一个用于 JavaScript 栈的 npm 包,REST API 够小,原生团队通常在一个下午内将其包装起来。文档包括完整的参数参考。

车辆图像用于移动应用,实践中

车辆图像以其他人的决定形式到达应用团队:列表已存在,照片就是那样,应用必须在停车库里的三年前的手机上让它们平滑滚动。大部分的工程努力都用于弥补那些从未为应用制作的图像。

载荷是产品决策

最大的收获令人尴尬地简单:请求卡片渲染的大小。将1200像素的图像发送到300像素的单元格中的列表视图,是在浪费用户的电池和耐心去处理没有人看到的像素。通过将宽度和格式作为请求参数,正确的尺寸变成了配置,性能预算不再与设计对抗。

保持依赖关系简单

在目录更新时服务器端解析,缓存到您自己的存储中,将我们的 CDN 作为补充而不是主要来源。应用的关键路径仅依赖于您控制的基础设施,这就是外部图像目录的感觉:无处不在,却又无处可见。

一致性让列表看起来更原生

每辆车都有相同的构图,存在时不易察觉,缺失时却显而易见。固定的宽高比防止单元格跳动,均匀的照明保持暗色模式一致,透明的剪切图让设计系统拥有每一个背景。列表不再看起来像聚合内容,而是像应用程序。

  • 每个屏幕的尺寸 WebP,三个变体覆盖范围
  • 稳定的ID作为离线层的缓存键
  • 遵循主题的透明剪切
  • 故意加载和回退状态

让列表视图更轻盈

告诉我们您的技术栈,当天即可看到您自己的车辆以调整大小、主题的卡片形式展示。

通常在同一工作日

在测试构建中试用

从您的数据中发送一些VIN或规格,并告诉我们您渲染的卡片大小。您将获得可以直接放入构建中的URL。

  • 为您的精确卡片准备的尺寸 WebP 变体
  • 用于主题的透明剪切
  • 试用版涵盖了真实的测试构建
谢谢。我们收到您的消息,稍后会回复您构建的调整大小的图像 URL。
出了点问题。请重试,或写信到 info@vehicleimagery.com。