设计心理学:塑造您的在线形象

已发表: 2023-02-15

在我们的设计心理学系列的前两期中,我们详细介绍了颜色的重要性。 然而,颜色选择只是与不良设计作斗争的一部分。

无论您是在为新网页设计创建背景图案,还是在构思新产品的包装,最终您都将不得不用铅笔在纸上画草图。 无论您开始形成什么样的形状,它都会对您的观众产生强大的影响。

继续阅读以了解更多关于您的客户将在您选择的形状和他们对您的整体品牌的评价之间建立的常见关联。 另外,查看一些真实示例,了解这些形状如何用于各种设计!

  • 线条
  • 圆形和椭圆形
  • 三角形
  • 四边形
  • 多边形
  • 抽象形状

直线和曲线

当谈到线条工作时,你真的不得不在棱角分明和曲线美之间划清界线。 线条可能是产生所有艺术品的基本形状,但严重依赖线条的徽标和网页设计绝非简单。

通常,人类更喜欢曲线而不是直线。 这可以归因于视觉系统的神经生理学。 即使是眼睛未完全形成的婴儿,也会将注意力更长时间地集中在弯曲的形状上,而不是尖锐的、有棱角的线条上。

来自 Affinity 网站的屏幕截图,其中包含他们的圆形三角形徽标
Affinity 徽标的圆角边缘柔化了它对用户的整体效果

但是,曲线不一定会增加用户将注意力集中在您的设计上的时间。 事实上,锐角更有可能引起用户的快速注意。 曲线意味着柔和和复杂,而锐利的线条和角度则意味着严肃和简单。

研究表明,有棱角的物体会引发威胁感。 形状的清晰度已被证明可以增加杏仁核的活动,杏仁核是处理恐惧的大脑区域。 出于这个原因,锐角通常需要观众的注意力,并且比弯曲的对应物更快地吸引眼球。

您可以使用这些自然的人类反应模式来创建让您的观众有所感受的设计。 对于有趣、轻松的品牌,曲线可以帮助您分解网站上的文本块并营造奇思妙想的感觉。 但是,对于更严肃的品牌角色,锐角和直线将有助于营造一种引人入胜的感觉。

来自 The Inlay 网站的屏幕截图,具有白色背景和三条垂直线
创意工作室 The Inlay 使用细直线来打破他们的极简主义网站,让你的眼睛移动

创意工作室 The Inlay 使用直线和极简主义设计在您滚动页面时吸引您的眼球,但避免过度使用可能引发负面反应的锐角。

然而,技术咨询公司 Affinity 在其整个网站上使用了大量以关系为导向的语言。 他们的圆形箭头标志和整个设计中的弯曲形状比技术空间中使用的传统、僵硬的图像更容易接近。

圆形和椭圆形

如果你称某人为方块,你可能是在暗示他们很无聊。 相反,则意味着圆圈意味着乐趣、青春和无忧无虑的心态。 这是有道理的,因为婴儿的注意力已被证明对曲线保持更长时间,他们也倾向于更喜欢圆形玩具。

当您的观众看着一个圆圈时,会想到开放和团结。 圆形也可以表示社区或保护的感觉——比如在你自己的泡泡里安全,甚至是一个很好的拥抱。 圈子的其他特征可以包括友谊、温暖、女性气质和重生(想想:生活的圈子)。

Ring 网站的屏幕截图展示了他们的四种门铃产品
产品本身的环形按钮灯是给 Ring 用户的另一个视觉提示

从命名的角度来看,Ring doorbell 已经触动了用户的感官。 在听觉上,你可以想象门铃“响”,而在视觉上,想象中的“响”与他们的标志和物理硬件的设计方式有关。

Netflix 节目 The Circle 主菜单页面的屏幕截图。两个女性人物的背影看着参赛者的屏幕
圆圈出现在个人资料图片、按钮形状,甚至参赛者居住的建筑物的建筑设计中

Netflix 真人秀节目 The Circle 是循环品牌最有意义的另一个地方。 前提是一群人可能会或可能不会说出他们的身份真相,他们试图仅通过名为 The Circle 的社交媒体平台在同龄人中获得人气。 目标? 待在社区内——待在 The Circle 中。

三角形

加速度、运动和平衡,三角形很容易说明活动。 它们是充满活力、强大的形状,可以唤起从兴奋到谨慎的一系列情绪。

三角形具有影响力,它们的指向方式至关重要,因为方向会改变它们在消费者心目中的含义。 例如,一个朝上的三角形可以显示出力量,但是当稍微倾斜时,它们就可以显示出不稳定。 但是各个不同方向的多个三角形可以表现出乐趣或兴奋——就像五彩纸屑一样!

Rick Astley 的红极一时的“Never Gonna Give You Up”预览图像的屏幕截图,中间有一个三角形播放图标
这张 YouTube 视频的预览图片使用了一个三角形的“播放”图标

您最喜欢的视频或音乐流媒体服务上的播放按钮很可能只是一个指向右侧的三角形。 它类似于表示向前运动的箭头,而不是表示暂停的两条直线(两条直线之间的字面“中断”)。

带有徽标的 HGTV 主页屏幕截图
“Home & Garden Television”通过徽标顶部的简单三角形展示房屋

HGTV 也巧妙地使用了三角形设计。 等腰三角形横跨其文字商标的顶部,这是一种清晰而简单的方式来说明房屋的屋顶。 徽标另一端的“V”指向下方,形成了很好的平衡。

四边形

四边形包括任何四边形。 正方形和长方形是最常见的示例,但此处也包括梯形、菱形等。 正方形和长方形通常是稳定、稳定、顺从或直率的象征。 它们的直角在视觉上暗示了理性、秩序和结构。

正方形和长方形经常被想要给人以脚踏实地或务实印象的品牌所使用。 从国家地理到 LinkedIn 再到多米诺骨牌,正方形和长方形在各行各业都很常见,尤其是徽标。

其他类型的四边形也将传达这些规则感,但具有更前卫、现代的视觉扭曲。 钻石可以用来传达奢侈品或高端产品,因为我们会无意识地将形状和宝石联系起来。 像风筝和菱形这样的四边形非常适合在不诉诸过度使用的模式的情况下暗示一定程度的稳定性。

Mokthar Saghafi 设计网站上的平行四边形图案截图
Mokthar Saghafi 设计网站截图

澳大利亚网页设计师 Mokthar Saghafi 使用平行四边形作为他网站的几何图案。 四边形的图形整齐地堆叠在一起,暗示着四边形通常所蕴含的稳定性。 不过,将它们设置为略微不规则的菱形而不是真正的矩形会增加另一层视觉趣味。

印有乐高标志的块状街道标志
照片由 Faiz Zaki 拍摄

虽然乐高可能看起来不接地气或不合规,但它们肯定很稳定——否则你会用它们来建造什么呢? 他们的方形标志也是对其产品的视觉呼应。 它看起来非常类似于带有四个螺柱的方形乐高积木。

五边形、六边形和八边形

在数学和设计中,这种形状的集合被称为“多边形”。 多边形是一个总括性术语,用于描述任何二维几何形状,但它通常用于具有 5 个或更多边的形状。

在自然界中,这些形状随处可见,从蜂窝到贝壳图案再到晶体和岩层。 然而,在网页设计中,它们的使用频率较低。 这对您的客户来说可能是一件好事,因为它将帮助您从更常见的设计趋势中脱颖而出!

复杂且充满未来感的多边形通常用于营造结构良好的现代气息。 然而,某些多边形通常用于利基行业。 例如,汽车和机械制造和维修公司经常在设计中采用六边形和八边形,因为它们类似于螺栓头。

Built By Buffalo 主页的屏幕截图,其中他们的特色项目以蜂窝状显示
使用这种模式来展示他们的作品,Built By Buffalo 可以在非常小的网络空间中展示大量项目

英国网页设计机构 Built By Buffalo 使用的六边形布局是一种很好的方式,可以在不压倒主页的情况下预先展示他们的大量工作示例。 然后在整个网站上使用它来展示团队头像、炫耀有趣的办公室照片以及调​​出重要信息。

五角大楼旅游网站“关于”页面的屏幕截图。三个对角线作为图形元素穿过旅游照片
Pentagon Tours 标志的粗线条是通过对网站上的图像进行图形处理来模仿的

五角大楼是世界上最知名的建筑之一,因其五边形结构而得名。 使用多边形进行建筑设计的一个典型例子,建筑本身传达了坚忍和稳定

抽象形状

还有一些其他几何和抽象形状通常用于网页和产品设计、促销和品牌推广工作。 让我们快速浏览一下其中一些流行的形状及其含义。

斑点

斑点通常是具有有趣或愚蠢特征的形状。 著名的“bouba/kiki 效应”已经证明,跨文化和书写系统的个人会将无意义的单词“bouba”归因于斑点形状,而“kiki”则与尖尖的抽象形状相关联。  

当您选择使用带有尖锐边缘的尖锐抽象形状时,您会迅速吸引观众的注意力。 然而,使用更圆的形状,您会让它们感觉更舒适和有趣。

Buzzworthy 的导航菜单的屏幕截图,球根形状的照片旁边有“工作。工作室。团队。联系方式。游乐场。”
当您打开 Buzzworthy 导航菜单 u 时,会出现动画“bouba”形状

位于布鲁克林的自定义 WordPress 设计工作室 Buzzworthy 使用大量的斑点形状和球状过渡动画来展示他们有趣、时髦的风格。

十字架

通常用于展示灵性和治疗、联系或平衡,十字架一直出现在网页设计中。 这是在视觉上暗示两件事之间的会面或联系的最常见方式。 叉号在设计中的另一个常见用途是作为“加号”符号,表示您可以将商品添加到购物车或展开以获取更多信息。

在标志中,十字架通常是为宗教组织保留的,因为它们有着强烈的宗教联系,但其他更不可知论的形状使用也取得了成功。

美国红十字会网站的屏幕截图,上面有他们标志性的“红十字”标志
美国红十字会网站截图

美国红十字会是使用交叉图像的最著名组织之一。 他们的工作位于需要帮助的个人和可以在灾难期间或之后提供帮助的个人的交汇处。 红十字会的标志将它们置于这两者的交汇处,同时也在视觉上暗指治愈和健康。

螺旋线

螺旋意味着运动和进步。 圆形的螺旋和环圈通常说明完美、美丽和进化。 如果您的螺旋形更尖锐,如之字形运动,则更有可能传达产品、公司或服务正在采用的支点、变化或新方向。

螺旋的方向也将与它的感知方式有很大关系 - 特别是如果您计划对其进行动画处理。 你最不想做的就是试图传达发展、成长或创造力,并最终让你的用户陷入螺旋式下降。 与大多数事情一样,尽可能让你的螺旋向上和向右移动来传达积极的运动。

Rally 主页的屏幕截图,白色背景上有一个黄色螺旋
当您滚动时,螺旋会移动得更快并改变颜色。 如果你停下来阅读,螺旋会慢慢向上移动

Rally 是一家位于犹他州盐湖城的数字产品工作室,他们在整个网站上使用白色背景上的简单螺旋。 不断变化的颜色和螺旋的动态运动让观众在视觉上保持兴趣,并创造一种有凝聚力的用户体验。

有机形状

有机形状包括树叶、树枝、根、波浪、星星、云等等。 在可以一起使用几何形状来创建图像的地方(例如:顶部有三角形的正方形变成一个简单的房子),有机形状通常作为图像独立存在。

这些形状通常是不规则或不对称的(但并非总是如此),并且它们会以某种方式与自然世界相关联。 “云”的概念是对有机意象的完美运用。

SoundCloud 主页的屏幕截图。他们在左下角的标志是云形的,它的左半部分由几条垂直的细线组成,就像你在音频文件中看到的那样
SoundCloud 的徽标使用自然图像使技术在视觉上更有趣和平易近人

“云”存储的想法将一些非常令人兴奋和技术性的东西联系在一起——一个保存信息的无形“位置”——并将其与自然世界联系起来,使它更容易为技术新手所接受。 例如,SoundCloud 是一个音乐共享网站,用户可以在该网站上上传音频文件,并与全球不断壮大的音乐爱好者社区分享。

设计背后的思想

与往常一样,这些并不是硬性规定。 在您的设计中使用多种形状、线宽和对齐方式来创造视觉趣味。 将多个元素结合使用将使您能够讲述一个读者可以用眼睛看到并在直觉中感受到的故事。

WP Engine 资源中心是您获取所有设计信息的来源,我们的设计心理学系列都是关于使用设计的基本元素通过精心策划的品牌吸引客户。

阅读第一部分和第二部分,深入了解颜色的含义以及如何在视觉叙事中使用它们。 然后,请注意第四部分,该部分将探讨您的字体、内容布局和单词选择的重要性。

第1部分
第2部分