响应式徽标

作者:丁晓峰  发布时间:2020-07-08 19:59:05

  自适应徽标,第1部分:适应小屏幕徽标的提示

  从我所看到的情况来看,在响应式网页设计实践中,徽标通常只占一小部分。查看响应式徽标,您会发现,在大多数示例中,徽标只是缩小以适合可用空间。

  对于具有简单和最少细节的矩形徽标,此方法可以很好地工作。但是,如果徽标的组成或比例是其他任何内容,则仅减小其在小屏幕上的显示尺寸可能会使小细节无法识别,并且使小字体无法读取。幸运的是,不必是这种方式。

  风格指南和品牌指南

  设计良好的标识通常具有不同的徽标变体。水平与垂直,短与高,堆叠,有无标记等。无论如何,通常在样式指南或品牌指南文件中提出并概述替代徽标的变化。有关如何在特定尺寸限制内最佳呈现徽标的规则,请参见这些准则。

  最近与宾夕法尼亚大学合作时就是这种情况。他们的徽标样式指南专门提供了大学徽标的替代格式,可以在较小的区域中使用。

响应式徽标

  徽标的小版本只是删除了徽标,并扩大了标记以匹配屏蔽的高度。通过查看这些选项在一个320px宽的小屏幕上的压缩标题中的显示方式,可以清楚地看到较小的格式(底部)更清晰易读,而且混乱程度更低。

响应式徽标2

  没有徽标样式指南?请谨慎操作。

  并非所有身份都有随附的准则来概述替代徽标格式和用例。在这些情况下,您可能需要专门针对小屏幕的约束提出调整建议。请注意,身份通常具有敏感性,主要与身份的神圣观点及其表现形式的刚性有关。在提出建议时,必须考虑这些因素。如果由于物理限制而进行少量和较小的调整,则品牌识别和标识很可能不会丢失。灵活性实际上可以支持和增强整体身份。

  这里有一些提示,可以帮助您入门:

  细节减少

  带有复杂细节的徽标和标记很少见,但是在这种情况下,减少细节级别可以大大提高小尺寸的可读性。可以使详细的形状变得平滑,可以使较细的笔触变粗,可以将轮廓元素反转并填充。Argento徽标和相应的样式指南就是一个很好的例子。

响应式徽标3

  对于徽标版本的每个减小的尺寸,详细程度也逐渐降低,这大大增强了小尺寸商标的可读性。

  堆叠和水平

  迄今为止,这是使徽标适应各种尺寸限制的最简单,最常见的技术,其中,将标记从徽标上方移到侧面。Case-Mate徽标完美地说明了这一点。

响应式徽标4

  增量减法

  对于具有小字体特征的徽标,小字体的阶梯式去除对于较小的字体非常有用。国家海洋和大气管理局(NOAA)的标志就是一个很好的例子。主要图形标志周围有很多文字,如果尺寸很小,它将难以辨认。假设,此徽标的较小格式可能会删除外部文本,而较小的格式可能会删除徽标本身中的文本。

响应式徽标5

  在这些变体中的每一个中,仍保持品牌知名度。

  鉴于当今的屏幕狭小,实施更清晰易辨的徽标变体的机会不胜枚举。在Viget,我们正在设计过程中考虑并采用这种想法。我希望我们将在不久的将来开始在网络上更频繁地实施灵活的徽标解决方案。

  在第2部分中,我将在前端实现这些示例,以展示如何以负责任和有效的方式实现响应式徽标。

  响应式徽标,第2部分:使用内联SVG真正响应徽标

  在“响应式徽标-第1部分”中,我提出了将响应式设计思想应用于徽标并允许微妙的灵活性实际上可以支持和增强品牌形象的案例。然后提出了一些技巧,说明如何使徽标更适合于小屏幕约束。

  这篇文章使用第1部分中的示例展示了如何在前端高效地实现响应式徽标。

  CSS精灵和图片交换

  用于在不同断点显示不同图像的最常见技术是CSS Sprite。它运作良好,但是需要创建带有徽标每个变体的Sprite图像,并可能针对目标像素密度创建其他图像。另一种选择是使用一种新的响应式图像技术,但是,它们尚未得到很好的支持,它们需要为徽标的每个变体创建单独的图像文件。这些选项都不是超级有效的。

  内联SVG适应

  幸运的是,有一种更好的方法,它使我们具有分辨率独立性和真正的单个文件实现。内联SVG改编使用单个SVG文件作为徽标,使用CSS媒体查询进行调整,并在必要时仅使用JavaScript。它是这样的:

  徽标在页面上显示为嵌入式SVG。

  使用CSS中的媒体查询来调整每种状态的徽标大小。

  使用CSS中的媒体查询,为每种状态调整单个徽标元素的位置,大小,颜色,可见性等。

  如果徽标的比例有任何变化,请使用JS调整每种格式的SVG viewBox属性。

  SVG注入

  对于更简化的方法,可以实现SVG注入。这实质上是使用标准img标签引用外部SVG文件,并使用JavaScript加载和注入适当的SVG标记。这样可以在徽标标记和页面标记之间更大程度地分离关注点。为此,我强烈建议使用Iconic的轻量级SVGInjector库。

  SVG非常适合与分辨率无关的徽标。结合CSS媒体查询,一点点JavaScript和SVG注入,您将拥有一个强大的解决方案来实现响应徽标!



转载请注明来自:http://www.dingxiaofeng.com/design/217.html

上一篇:徽标现代主义

下一篇:没有了

相关文章阅读

徽标:经典符号和字母组合

理想的设计工作流程

建立多元化的设计社区

设计研究室(DRU)

Cruz Novillo:徽标

Top