网页设计中的图标

时间：2023-10-04 22:18:01 | 来源：网站运营

时间：2023-10-04 22:18:01 来源：网站运营

网页设计中的图标：· · ·





有一些用户不喜欢的图标。他们说图标不清楚，难看或根本无法解释他们不喜欢的东西。原因很简单-在此类图标中，违反了其构造的一项或多项基本原则。本文中的信息可以帮助你避免错误并创建用户肯定喜欢的图标。这些原则与网站和应用程序图标都相关，并且可以应用于所有类型的图标。




让我们从一些基础知识开始。网页设计中的图标只是很小的元素，而不是重要性或意义。需要它们来指示信息。这些是视觉锚点，有助于吸引用户的注意力并指导他们执行目标明确的动作。




图标有助于：

• 吸引眼球;
• 了解含义；
• 浏览界面；
• 节省视觉空间；
• 与用户建立联系。

图标的使用并不像乍看起来那样容易，它需要设计能力和周到的方法。（最好由单独的专家来处理图标。）




一些设计师最大的担心是他们的图标看起来是否整洁，是否居中正确以及像素是否完美匹配。他们根据公式对齐元素，但忘记了最重要的事情。




创建每个人都喜欢的图标的最重要的原则是什么？

01 简单性

用户不喜欢复杂的东西。

一个好的图标应该简单易读。它不需要文字说明。你可以通过向远离设计的人展示图标来测试该图标。如果他们没有猜到它的大致含义，则此图标可能有问题。





简单性的主要敌人：

• 多余的元素
• 不必要的细节

它们阻碍感知，分散用户注意力并使其迷惑。通常，图标包含的元素越少越好。具有3种或更多种颜色的图标不再是象形文字，而是插图。




元素和颜色强调的堆积使图标在视觉上没有区别和模糊：




过多的细节并不能使图标更清晰，但是相反，它使您难以感知：







许多强调和小的元素也引出了简单性：







考虑细节

图标的细节应该合理。

不要以为细节是一种邪恶，而“设计中的魔鬼”是Web设计师发明的。是的，任何细节都会使图标变得复杂。但是，如果它符合设计概念并且是专业制造的，则是合理的。





例如，你的目标是使用户狭窄地查看图标，以便他们在页面上停留一段时间。那么细节就说得通了。在大多数情况下，用户不会倾向于睁大眼睛，也无法即时“阅读”复杂的图标。




页面上应该没有很多详细的图标。不要将它们彼此靠近。它们的背景必须是唯一的颜色，并且调色板要有限。




对于初学者，我们不建议从详细的图标开始。他们的创作需要扎实的经验，艺术品味和精通能力。

02 表达简明和信息量

用户不喜欢他们不了解的事物。

不清楚的图标需要“解密”，用户不喜欢它。如果没有任何意义，这也是一个很大的缺点。图标的主要目的是即时传达信息。因此，我们的任务是删除所有阻止其执行此操作的不必要的事情。














简化的好与坏


用户不喜欢界面元素，甚至不屑一顾。因此，图标必须易于“阅读”，这一点非常重要。图标的识别取决于其简单性，可理解性和隐喻性。但是，有不同类型的简单性。简单不能保证清晰。你可以简化图标以至于无法识别。













过度的简化，或者相反，表单的复杂性会使图标对用户来说不清晰。

不要把“立体图标更容易阅读”的建议当真。任何精心设计的图标都易于阅读。




尺寸

元素的大小也会影响图标的识别。图标中的小元素越多，就越难理解它所代表的含义。




制作不佳的图标的示例：







第一个图标的形状没有引起必要的关联，并且小的元素妨碍了其识别。这些元素的大小与其他两个图标的大小不对应，线宽和颜色也不同。这违反了风格上的统一，缺少适当的隐喻，过多的小元素。所有这些都是图标“难以辨认”的原因。




清晰的隐喻

好的图标对于不同文化，年龄和背景的人来说都是普遍的。但是，你应该研究目标受众，并选择最适合该人群并可以理解的颜色和隐喻。




适当的隐喻可确保图标清晰且内容丰富。




这些隐喻甚至对于孩子来说也很清楚：







这是一个令人困惑的图标示例：

用户不喜欢毫无意义的事情。

在富有创意的爆发中，设计师喜欢创造美丽却毫无意义的元素。这种方法剥夺了图标的主要功能：即刻传达信息。




但是，有时图标必须形象化一个复杂或抽象的概念，很难找到一个隐喻。在这种情况下，允许使图标抽象并使用文本传达含义。我们的案例中的一个例子：







在这种情况下，图标是引人注目的锚点，而必要的信息则通过大字体的文本传达。







如果仅需要将图标用作平衡设计的视觉重点，并且文本提供了信息性，则可以使用不包含隐喻的图标。但是，即使在这种情况下，也希望找到合适的视觉关联。

03 风格统一

用户不喜欢不和谐的事物。

当人们无法解释他们对图标不满意的情况时，就是这种情况。我们都在直觉上感到不和谐。和谐之路在于风格的统一。




风格的统一表明图标设计与品牌风格和设计理念相匹配。







品牌要求

图标应该反映出品牌的本质和价值，不仅是视觉上的，而且是心理上的，都是其有机的组成部分。可以将品牌的风格视为强硬或柔和，豪华或经济，正式或私密，精英或民主等。图标设计必须首先满足品牌指示的要求。




设计要求

样式的统一假设一组图标的通用参数，例如：

• 一致的调色板；
• 图形和典型的统一性（栅格或矢量，2D或3D，实体或轮廓）；
• 大小相等；
• 线宽相等；
• 相等的视觉重量；
• 元素的均等平衡；
• 相同级别的细节；
• 强调统一原则；
• 匀速的节奏，静态或动态特征；
• 相同的阴影（如果有）；
• 符合徽标风格和整体设计理念；
• 字体的视觉对应。

设计师通常必须使用Web上现成的收藏夹中的图标或将其作为基础。但是，该集合可能没有必要的图标，因此有必要自己创建它们。一个常见的错误是你的“自己的”图标与集合略有不同。原因是违反了上述一个或多个统一性参数。




以相同样式制作的图标：







风格的统一不仅是对品牌风格的美学和支持的致敬。样式的一致性使图标的感知更加容易，简化了导航，并为用户带来了良好的体验。

04 独特性

有两种类型的唯一性-图标集的唯一性和每个单独图标的唯一性。







集合的唯一性

第一类唯一性几乎不需要任何解释。这种设计允许将一组图标与许多相似的图标区分开，以使其特别，有趣且令人难忘。图标的独特性有助于品牌的独特性。




唯一性并不意味着你需要创造世人还没见过的图标。没有比这更好的方法来吓跑人们了。互联网用户习惯了某些标准和刻板印象，打破它们不是一个好主意。这些刻板印象限制了创造性，但却使UI元素具有可预测性和可理解性。人们不应该试图去理解他们所看到的，而浪费时间去解决问题。

使用每个人都熟悉的隐喻，但使它们的视觉实现独特。用户不想破译谜语。

具有独特实现的简单图标（贴纸）：







图标的唯一性

图标的唯一性应理解为与集合中的图标不同。为了追求统一，设计师有时会牺牲最重要的东西-图标的含义。不应忘记统一和单调远非同一回事。每个图标都有其自己的用途。（现代图标设计师的口号是EIM-每个图标都很重要。）




用户无法欣赏或理解带有视觉上无法区分的图像的精美套装。人们感到尴尬，无法将一个图标与另一个图标区分开。

“统一”并不意味着“相同”！

具有视觉上相同的元素的设计示例（保持样式的统一）：

05 视觉平衡

这一点是第3点“风格的统一”的特例，但值得特别提及。




视觉上不平衡的图标是用户乍一看不喜欢的图标。人们几乎不看图像就能直观，立即感觉到不平衡。元素对齐中的错误也指平衡干扰。但是，尽管元素对齐的重要性非常重要，但对齐的微小不规则并不是图标在视觉上令人不快的主要原因。在许多情况下，对准和对中误差不是造成不平衡的原因。




由于形状和颜色强调的不一致性，破坏了平衡。




这是吸引用户眼球的第一件事，而不是一个或两个像素移动一个元素。













总结

设计师非常了解图标有多少要求。因此，他们准备无休止地改进它们，抛光每个细节并计算每个像素。我们绝不呼吁不要做所有这一切。我们只想说，如果违反了创建图标的基本原则，那么这些努力将毫无意义。即以下内容：

• 简洁明了；
• 隐喻性（以及信息性）；
• 风格的统一（因此视觉和谐）；
• 设计的独特性和每个图标的个性；
• 视觉平衡。

遵循这些原则可以确保你的图标清晰，美观和实用。这意味着每个人都一定会喜欢他们！







· · ·







原文链接：

https://medium.com/outcrowd/icons-in-web-design-824f57cb2db0




作者：Erik Messaki