电商平台如Zalando必须为他们销售的产品、他们创造的服饰、产品类别、产品促销和营销活动的启动，制作大量的视觉内容。在我们的电商的页面中，每天都展示着大量各种各样的内容和视觉效果，且频繁的更新着。以下是一些展示内容页面的不同尺寸样式：

这种视觉多样性对产品设计师带来了一些挑战，而设计师们的职责是创建一致的界面设计解决方案。 每个内容都必须看起来具有吸引力，同时又得保持它原有的用途。

以下是我们观察到的一些设计挑战：

• 不同格式：视觉内容包含图片和视频，它们以4:3，16:9，1:1...等各种不同的比例出现。

• 不同的使用场景：例如，黑色星期五促销图片的目的是在网站上推广活动，而产品图片（比如一双运动鞋—）的目的是从不同角度展示商品的细节。

• 可扩展性：所有内容展示在我们的商店的点击区域，从主页、目录页、产品详情页，一直到电子邮件通讯等等。

• 一致性和吸引力：图片不仅要看起来好看，而且在跨平台（iOS, Android等）的移动设备屏幕上，必须看起来是一致的。

• 对效率需求：内容管理员和创造者经常要求产品设计师提供多种设计解决方案。

考虑到这些挑战，我们应该为哪些视觉内容选择哪些格式呢？它们在屏幕上应该多大？它们应该是大的？小的？长方形？正方形？能否为所有不同目的的内容只采用一种格式，或者不止一种？这些决定背后的原理是什么？我们怎样保证我们选择的设计解决方案是一致和在全网都可适配？

为了回答这些问题，我们寻求系统化的视觉内容展示方式的方法，主要是在移动设备上，因为现在很多信息都是在手机上看到的。以下是我们采取的一些步骤。

从基本的宽高比构建一套可扩展的系统

图片的宽高比是指其宽和高的比例关系。在Zalando，我们为我们的产品图片定义了宽高比。我们以一个普通的移动屏幕为起点来定义这种格式，并在此基础上构建了一个可扩展的系统。

这是我们最安全的宽高比，一种我们知道不会变的格式。如果我们选择全屏，这就是它的样子（如你所见，它具有纵向或者竖屏格式）。

在此基础上，我们用该基础比例来开发一个使用数学方法的系统。我们把它分割成如下这样的块。

因此，我们建立了新格式：竖屏的三分之二，竖屏的二分之一，竖屏的三分之一等等。那么，我们怎么运用它们呢？

2. 理解每种格式在移动屏幕上创建的视觉效果

让我们将这张图片应用到不同的格式中。

视觉效果1

如下图所见，在全屏模式下，如果是竖屏格式，图像会更具冲击力。之所以具有“冲击力”是因为它是全屏展示，覆盖了整个屏幕，使你沉浸其中并吸引你的注意力。而另一种极端，在屏幕中容纳整个横屏格式会减弱视觉效果，图像在屏幕上失去了其强大的外观，被缩小为更谨慎和更实用的东西。

视觉效果2

如果采用竖屏格式，并将其分割为更小的块，就如下图所示。

当屏幕充斥着许多小图像，它呈现的是拥挤感和视觉上会变得“更吵闹”。但不管怎样，它的好处是可以让你在一屏中看到更多的图片。

综上所述，我们提出以下的轴图，根据视觉效果：视觉响度（横坐标）和视觉冲击力（纵坐标），对所有不同大小的格式进行分类排序。

A部分中的块由于屏幕覆盖范围而有很高的视觉效果。在B部分中，当块采用横屏格式，视觉效果则被减弱了。

C部分中的块，创建了一个视觉上更响的屏幕。框架中显示了许多视觉效果。但是，随着D部分中的块变得越小，其响度也会降低。

让我们来看一些案例，以更好地理解将这些效果当应用于具体的视觉内容案例的含义。

3. 使格式与内容目标相匹配

• 示例1. 对于需要启发性和沉浸式体验的任何视觉内容，可采用全屏竖屏格式。在这个示例中，精美的广告系列活动图片占满了整个屏幕，邀请观看者一次一次滑动浏览这些图片，而不会产生任何其他基于内容的干扰。

  
  

• 示例2. 几乎是所有正方形（或者1:1）格式，让你可以突出显示视觉内容，而不会像示例1一样填满整个窗口使观者不知所措。

  
  

• 示例3. 对于不太喜欢的内容，请选择横屏格式。在这种销售banner示例中，视觉的目的不是为了创造一种令人惊叹的体验，只是为了展示信息。

  
  

• 示例4. 如果你想要在一屏展示大量的视觉内容，如一个产品目录，小尺寸的图片是最好的选择。这也是提供不同类别导航的最好方式。

• 示例5. 分割成多列的超小方块，适用于展示视觉缩略图。例如，这些缩略图一幕了然地从不同角度展示了产品。

  
  

• 示例6. 分割横版的超小方块，非常适合用于有导航目的的视觉内容，因为其视觉效果是为了强调功能而非时尚

你可以从以上看到，一张图片如何以系统化方式适应不同的格式，以满足不同的使用场景：banner，背景图片，集合预告片，目录预告片等。这些只是在众多应用中的一小部分示例。

决定某些尺寸的特定格式，取决于你通过视觉和使用场景想要达到的目标：目标是为了启发？通知？简化导航？提供概览？增加内容的可见度？样式也将发挥重要作用——你是否会像本研究那样关注移动设备的样式因素？

回答完这些问题后，请考虑你的平台如何使用类似的方法，来使平台的内容格式系统规范化。一定要问下自己，你的平台是否甚至在遇到相似的挑战时，都处于挣扎状态，将其系统化是否有实际意义。如果是，就去创造吧!尽情的使用这些方块，尝试创建适用于你的内容使用场景的组合和交互。希望这能够阐明你的视觉目标。祝好运！