使用泛型和描述符在iOS上标准化图标,图像和占位符

创建良好的用户体验时,一致性是关键。 在显示图标,产品照片,占位符或加载微调框时,只需一个位置来定义它们的外观以及应如何在屏幕上显示这些内容,就可以使我们保持一致。

在iOS的世界中,我们使用UIImageView ,它允许我们显示图像并配置诸如contentModetintColorbackgroundColor类的东西,让我们不要忘记那些非常重要的UI测试的accessibilityIdentifier

我们正在努力做到两件事:

  1. 一个可以定义我们如何在应用程序中显示标准图标和图像的地方,包括应应用于每个图标和图像的图像视图设置。
  2. 一个干净的呼叫站点,可以应用这些图像,而不必担心如何以及何时加载和显示这些图像。

以下是一些我们要标准化的常见图像类型的示例:

  • 加载微调器 :本地图像,无缩放比例的集中化图像,浅灰色背景,“ loadingImage”可访问性标识符。
  • 下载的产品图片 :从URL下载,缩放以填充“ productImage”可访问性标识符。
  • 占位符图像 :本地图像,没有缩放比例的集中化图像,灰色色调,浅灰色背景,“ placeholderImage”可访问性标识符。
  • 下载失败图标 :本地图像,没有缩放比例的集中化图像,红色色调,浅红色背景,“ failureImage”可访问性标识符。
  • 功能图标 :本地图像,无缩放比例集中显示,深灰色色调,浅灰色背景,“ featureX”可访问性标识符。

一些图像/网络库允许您在加载远程图像时提供占位符,但是我们需要比通常提供的更多控制权,以允许我们准确指定它们的显示方式。

当显示特定屏幕的图像时,我们不想担心图像的下载方式和时间。 我们只想对图像视图说:“显示此图标”,或“使用我们的标准占位符加载此图像”。 我们希望我们的呼叫站点尽可能简单。