在网络上效果最好的3种图像

作者: Louise Ward
创建日期: 10 二月 2021
更新日期: 18 可能 2024
Anonim
从“卷积”、到“图像卷积操作”、再到“卷积神经网络”,“卷积”意义的3次改变
视频: 从“卷积”、到“图像卷积操作”、再到“卷积神经网络”,“卷积”意义的3次改变

内容

在视觉叙事中,通常会应用三种不同类型的图像:标志性图像,符号性图像和索引性图像。没有最适合网页设计的一种图像,可以在同一项目上同时使用每种图像,以达到理想的效果。

让我们看一下每种图像的特征,然后研究最佳使用场景。

01.标志性图像

如《 Visual Storyteller网页设计指南》中所述,图标图像可以立即被识别,并与已定义的概念紧密相关。它们通常也是非常文字的图像,因此即使是不熟悉它们的人也可以推断出一般含义。他们看起来像他们的意思。

想想男女洗手间的符号。无论您是否看过这些图像,或者是否曾经向您解释过它们的含义,无论是穿着裤子还是裙子的人形都很容易解释。


箭头,轮椅和图标之类的事物是简化的物理形式,通常也属于标志性图像。图标集(例如UXPin的免费图标包)通常是图标图像的绝佳来源,因为它们需要明显且易于理解(带有或不带有文本标签)。

图表,图表和科学插图都是标志性图像的示例。它们实际上以难以理解的方式表示信息(这是标志性图像的基石)。

考虑一下您在网络或应用程序中可能会遇到的图标:

  • 表示电子邮件的信封
  • 垃圾桶可以指示删除某物
  • 表示首页的房子
  • 表示要保存某物的磁盘
  • 复选标记表示任务已完成

不管先前对特定设置中的这些图标是否熟悉,大多数用户都将能够对单击这些图标会触发什么进行有根据的猜测。


虽然某些图标图像可能已经开始具有象征意义(在下一节中将更多地介绍符号图像),但许多图标图像如今已广为人知,以至于已成为图标图像。

从原型应用程序UXPin的一些图标中可以看到,文件夹图标在很大程度上被公认为打开文件的符号,但是如果没有长期的文化联系,文件夹本身并不能表示这一点。

常见的用于访问设置的“齿轮”图标,以及用于上载(通常包括向上的箭头)和下载(包括向下的箭头)的图标以及许多其他图标也是如此。

这是图像成为主流文化的一部分的普遍结果:图像的含义变得如此固定,以至于它被普遍认可,即使最初必须学习这种含义。如《 Web UI设计最佳实践》中所述,您不必总是打破新的创意基础:使用广泛接受的图标来创建基本的理解,然后根据需要添加创意。


要记住的一件事:并非所有图标都是标志性的。在正确解释某些内容之前,仍需要对其进行解释(称为显式指示符。

设计师有时会选择使用根据自己网站的设计或主题定制的图标,但是出于清晰的目的,这些图标可能需要加上标签,因为它们只是象征性的。至少,当鼠标悬停在它们上面时,应该会显示一个标签。如果希望用户立即识别图标的含义,请坚持使用实际具有标志性的图像。

02.符号图像

象征性图像比象征性图像更抽象,并且通常比特定的具体对象做更多的事情来传达一种感觉或笼统的想法。标志图像经​​常出现在徽标中,因为它们可以增强品牌想要传达的感觉。

例如,Microsoft Windows徽标是窗口的抽象表示,但不是直接的解释。有人可以将其解释为代表其他内容,尤其是当它们来自于一种不同的窗口样式更为普遍的文化时。

符号图像通常需要学习其含义。它们不是立即可用的,因此无法立即识别。在了解其含义之前,它们可以广泛地接受解释。

相反,符号图像比符号图像使用符号学(视觉语法)传达含义。符号图像是视觉隐喻,通常必须学习这些隐喻才能正确解释。

当然,由于它们与特定事物或观念相关联的通用用法,因此在文化水平上也认可许多符号。

一个例子就是交通标志,例如停车标志(在大多数国家/地区中,交通标志为八边形,但在日本,交通标志仅为三边形,更类似于美国的“屈服”标志,而在许多其他国家/地区,该标志是带有圆圈的圆圈)里面有一个三角形)。而且,如果您问一个国家的某人另一个国家的交通标志是什么意思,那么他们很可能会得到很大比例的错误提示。

这是因为这些图像是象征性的,而不是标志性的。它们的含义需要被教导,并且通常基于文化联想而不是普遍的理解。

网页设计世界中的一个示例是汉堡菜单图标。尽管它确实有点像菜单,但图像太抽象了,无法准确地称为标志性图像。结果,一项研究实际上发现其解释对年龄敏感。实际上,80%的18-44岁用户了解其含义,而只有52%的老年用户了解。

03.索引图像

索引图像将图像的外观及其表示形式之间的含义链接在一起。例如,温度计显示温度低于零,则表示有些东西很冷。

索引图像是广告和设计中最常见的图像。我们倾向于避开从字面上表示事物的习惯,通常是因为我们更喜欢唤起一种情感,而不是将字面信息推到用户的喉咙上。

考虑以下两个示例:

  • 难过的是,您会使用一个人哭泣的图片(字面意思),还是在阴暗的多云的天气里倾盆大雨,一个孩子的自行车未使用并浸在前院里(情感)?

  • 为了唤起幸福,您会使用微笑的人的形象(字面意思)还是在沙滩上玩耍的可爱小狗(情感的面貌)的形象?

两种类型的图像都表示一种情感,但是每种图像中的后一个示例都更有可能使用户感觉到某种东西,而不仅仅是想到表达情感的单词。

假设您想让人们在访问您的网站时怀旧。有很多方法可以做到这一点,但是从唤起这种感觉的图像开始而不用尖叫“ NOSTALGIA”是一个不错的起点。如果您的目标受众年龄可能在30岁左右,则可以使用让人联想起1980年代的图像,因为那是您的受众成长的时刻。

您可以使用更抽象的视觉元素(例如调色板)来实现相同的效果。使用让人联想起80年代末和90年代初的霓虹灯调色板,将立即产生与1950年代更常见的玫瑰色粉红色和哑光浅绿色调色板不同的印象。

哪个效果最好?

所有这三个图像在良好设计中都有自己的位置。与所有设计技术一样,这完全取决于项目的参数。但这并不意味着没有良好的基本规则。

在创建网站的基本导航结构时,您可能会希望坚持使用具有标志性或在标志性和符号性之间划界的图像。您不希望访客查看特定的图像并想知道如果他们单击该图像将会发生什么。

因此,用于导航的图标之类的图形必须是可普遍识别的,并且应尽可能接近图标。无论您是要设计自己的图标还是使用预制的图标集,都有大量的图标选项。只要确保找到一个易于为您的访问者解读的集合,并且即使不清楚,也不要害怕为其打上标签。

在很大程度上,找到您要在网站上使用的标志性图像很容易。从字面上代表您想要传达的内容的东西太多了。最难的部分是找到适合您整体设计的正确样式的图像。

但是,对于网站的其他视觉元素,尤其是与内容相关的视觉元素,您可以行使更多的创作自由。您可以使用更多的抽象图像,这些图像通过站点上其他图像和其他类型的内容创建的上下文可以清楚地看到。

您决定使用更具象征意义的图像还是更抽象的索引图像,取决于网站的整体风格和内容以及目标受众。

在不确定确切传达想法的方式时,查找索引图像的一种方法是在Flickr之类的照片共享网站或股票照片网站上使用关键字搜索(如果您实际使用图片,请确保使用具有适当许可的图片)在您的设计中,而不仅仅是使用搜索作为灵感)。

例如,如果您在Flickr上搜索“爱”,则会得到一系列可以代表爱的图像:心,花朵(尤其是玫瑰),艾菲尔铁塔,幸福的夫妻,令人不安的臭虫交配图像,以及一些直接在各种媒体上描述“爱”一词的人。这为查找或创建您可能想在我的设计中使用的精确图像提供了一个很好的起点。

另一个示例是搜索“恐惧”之类的东西。您将获得恐怖电影中的恶棍,身高,暴力,看似恐惧的人,各种动物以及类似图像的图像。可以清楚地看到哪些类型的图像可能会在访问者的脑海中引起恐惧。

这种类型的研究对于确定在视觉叙事中应避免使用的图像类型非常重要。您可能没有将特定的图像与特定的想法相关联,但是一些研究可能会发现很大一部分人口确实具有相关性。

制定游戏计划

与这些概念和您可能使用的图像类型进行一些免费的关联。同样,也基于这些概念关键字搜索图像,并开始集思广益,探讨可能最有效地协同工作的地方以及您肯定要忽略的事项。

如果您想要更多的视觉设计技术,请查阅免费的电子书《 Visual Storyteller的Web UI设计指南》。通过分析来自特斯拉,Fitbit,微软,Squarespace,Foursquare等公司的29个示例,提供了许多技巧。

:曹杰

曹Ca(Jerry Cao)是UXPin(线框图和原型制作应用程序)的内容策略师,他在其中为线框图和原型制作平台开发应用程序内和在线内容。

新员额
使用brain.js构建神经网络

使用brain.js构建神经网络

Brain.j 是构建神经网络的绝佳方法。简而言之,神经网络是一种机器学习的方法,其工作方式与人脑相似。给定问题的正确答案(例如“该用户将选择哪个选项?”),它会慢慢学习输入和答案之间的模式和关系。神经网络的一个例子是Facebook的面部识别系统DeepFace。但是由于神经网络的复杂领域语言和看似陡峭的学习曲线,可能很难上手。在本教程中,我们将把理论分解为需要知道的知识,并且重要的是,要牢牢扎...
陀螺:艺术与工程相遇的地方

陀螺:艺术与工程相遇的地方

自2010年影片上映以来,莱昂纳多·迪卡普里奥(Leonardo DiCaprio)的角色Cobb使用电影Inception拍摄的陀螺已成为电影艺术作品的标志性作品。在这部科幻惊悚片中,陀螺被用作图腾。 ,这是一种有助于确定Cobb是在他自己的现实中还是另一种现实的设备(如果它继续不可能旋转,则Cobb知道是后者)。当电影达到其戏剧性的高潮时,正是这种不起眼的旋转顶部提供了电影院最伟大的...
Serif的新矢量编辑工具

Serif的新矢量编辑工具

erif的矢量编辑工具DrawPlu 并不是真正针对专业设计师的;它的自然受众主要是在设计爱好者和业余爱好者中发现的。然而,这种PC工具具有超乎寻常的功能,绝对值得一看。对于资金短缺的设计师而言,免费版本显然是一个制胜法宝,而全价工具仍然仅是Adobe Illu trator成本的一小部分。DrawPlu 设计为直观易用,它具有广泛的工具,它们可以以Illu trator的方式镜像Illu tr...