一张图如何系统适配不同格式
在我们的电商的页面中,每天都展示着大量各种各样的内容和视觉效果,且频繁的更新着。
电商平台如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,背景图片,集合预告片,目录预告片等。这些只是在众多应用中的一小部分示例。
决定某些尺寸的特定格式,取决于你通过视觉和使用场景想要达到的目标:目标是为了启发?通知?简化导航?提供概览?增加内容的可见度?样式也将发挥重要作用——你是否会像本研究那样关注移动设备的样式因素?
回答完这些问题后,请考虑你的平台如何使用类似的方法,来使平台的内容格式系统规范化。一定要问下自己,你的平台是否甚至在遇到相似的挑战时,都处于挣扎状态,将其系统化是否有实际意义。如果是,就去创造吧!尽情的使用这些方块,尝试创建适用于你的内容使用场景的组合和交互。希望这能够阐明你的视觉目标。祝好运!
