改善UI设计的15个图形元素

如果您是初学 UX/UI 或网页设计师,您仍然需要学习和接触许多研究领域,如心理学、社会学、营销,尤其是平面设计。说到平面设计,有很多不同的设计类型,比如标志、书籍、插图、海报等等;我们不能所有都学习,所以我们必须专攻一点。

现在,我想与您分享 15 个常见的当代图形元素列表,您可以使用它们来改进一个漂亮的网站设计,同时,着眼于现在和过去。

半页

很常见,也很简单,常用于登陆页面。它允许您创建对比并使用图层,从而产生深度错觉。

如下:

框架视口

这种技术通常用于以奇特的方式呈现重要的 CTA,通常是具有技术或技术背景的正式网站。

您基本上可以在完整视口的框架中限制滚动区域,同时保持在顶部和左侧/右侧空间。

水平滚动

可能非常有趣但也令人生畏,如果做得不好,它会完全破坏整个体验。

只有当你真的确定你要做什么......并且你有优秀的开发人员时才选择这个。

切勿在移动设备上使用它。

倾斜布局

这可能比常规网站更难开发,但如果您处理运动、速度、力量等概念,以及处理运动和能量的一般品牌,就会产生奇迹。

动态 3D 对象

这种布局通常用于能量饮料和类似产品,其中预渲染的视频或 3D 场景用作背景,滚动内容与其同步。

非常强大,但需要一些认真的编码。

线

正如在框架布局中所见,您可以使用线条为您的设计提供坚实的基础。我很确定您的网络草图经常会感觉……无组织或过于“飘浮”。

如今,使用线条非常普遍,野蛮主义再次找到了它的位置,给人一种编辑和有组织的外观。

箭头链接

在去年,使用箭头作为链接非常流行。与线条类似,它是一种常用于正式、有组织和极简设计的图形元素。

你可以看到它之前的图像。

天棚

这个特殊元素在过去的网页设计中被“禁止”,因为许多人觉得它很烦人且难以阅读。在过去的两年里,字幕作为动态滚动网站的装饰元素再次找到了他们的荣耀。

您可以使用它们来显示关键字,但没有有意义的内容。

以混乱为中心

我在 2021 年开始看到这种趋势:它由一个水平居中的元素组成,其中使用了不同的字体字体和未对齐的图像。

这是一个很难设计的概念,因为违反设计指南可能会导致草率的结果。

墓碑图像

再次,一个相当新的图形元素。它包含一个图像,顶部边界半径经过编辑,使整个构图看起来像一块墓碑。

错位卡

我最喜欢的图形元素之一是未对齐的卡片。在非正式和优雅的风格中使用,这些卡片的文字部分漂浮在背景之外,创造了很好的深度效果。

 

汉堡菜单

这是一个有争议的元素。因为如果它存在,你不能立即看到菜单,如果你需要快速的用户交互,你不应该使用它。相反,如果您确定这是一个不错的选择,请尝试一下。

传统的汉堡包菜单由 3 条相等的线组成,但您可以尝试数十种不同的汉堡包。

包豪斯形状

如果你看过包豪斯的旧海报,你可能见过色彩鲜艳的不同形状方案。

这些形状通常由在特定顶点上具有最大化边界半径的矩形制成,现在在网页设计中很常见。让我们看一些例子。

旋转文本

在平面设计海报中很常见,旋转文本非常美观,可以为您的网站带来编辑外观。当心:像字幕一样,此文字不可用,因此仅用于装饰。

动画光标

感谢 Javascript,您可以使用鼠标位置为对象设置动画。这是添加自定义光标的好方法,例如圆形或更复杂的图形。

这种光标还可以包含悬停时出现的文本。

结论

在这里,您有一个在当代网页设计中非常常见的元素列表,您可以使用这些元素,但更重要的是将它们结合到您的草图和概念中。

显然,并非所有这些都适用于各种风格和信息,因此您必须仔细了解是否需要使用它们。

原作者:Lorenzo Doremi

本页面最后更新于 2022年04月13日 17:36