从主观上来说,您可以说当今许多网站都是同一事物的变体。这是为什么?这是好事还是坏事?让我们来看看它。

借助易于访问的平台(37%的网站使用WordPress)和大量的免费模板和图片,这不足为奇。任何人都可以创建一个看起来不错的网站,只要他们有足够的耐心和时间。而且,由于这些模板相同,这些网站可以提供相对良好的用户体验。他们使用完善的导航系统,配色方案和布局,而且完全可以满足Web访问者的需求。自然地,企业和设计师都了解有效的方法,并创建遵循人们认识和喜爱的共同趋势的网站。

因此,在相当长的一段时间内,设计师一直注意到网站看起来越来越相似。当您查看足够的设计时,似乎有些东西。

化妆品公司主页,含产品图片和查看产品CTA
Slaviana的化妆品品牌首页示例
化妆品公司主页,含产品图片和查看产品CTA
亚历山大·卡佩兰(Alex Capellan)化妆品品牌首页示例

但是,在最长的时间里,关于该主题的实证研究很少。

这种情况在2020年5月发生了变化,当时《对话》发表了一篇题为《 是的,网站真的开始看起来越来越相似,由博士撰写。学生Sam Goree。通过研究10,000多个网站,Goree的团队得出结论,实际上,网站已经开始具有相似性。

他们通过严格定义相似性并确定可以比较所有网页的三个点来支持自己的主张。这些包括配色方案,布局和AI生成的属性。他们在论文中指出,自2010年以来,Web设计功能变得越来越统一,即使其背后的代码变得越来越多样化。

具有列和项目符号点的SaaS定价计划
定价计划示例 缓冲
具有列和项目符号点的SaaS定价计划
定价计划示例 HootSuite

但这对设计师和企业主意味着什么?他们应该努力脱颖而出吗?还是装修有好处?

问题是,对于这些问题,可能没有确定的,科学的答案,而且肯定不是一个对每个人都有用的答案。

因此,组织不应盲目地遵循任何网站设计建议,而应致力于检查其网站如何服务于企业的各个方面。

最终,问题不在于您是否应该使用特定的字体,布局或调色板。相反,这些元素是如何促进转化和用户体验的,它们如何代表您的品牌,以及如何使您与竞争相关。

归根结底,您需要在不牺牲可用性的情况下脱颖而出,这是一种微妙的平衡行为,需要花费一些时间才能完美。

所有网站doppelgangers是什么?

网站相似度的增加可能归因于在所有形式的创意表达中发现的整体审美趋势。

在过去的25年中,随着互联网的广泛使用,大多数开发人员都遵循着几种设计趋势。实际上,基于视觉外观,专家们能够清楚地定义四个突出的全球设计时期。这些被称为基本,混乱,形成和凝聚。 Web 1.0是基本阶段的一个示例,它具有明显的文本密集外观。以类似的方式,当今的网站也遵循特定的审美趋势。

从下面的示例中可以看到,在2000年,两家受欢迎的媒体CNN和《纽约时报》都遵循了相似的设计选择。这是合乎逻辑的,特别是如果我们考虑两个主要因素。首先,在此期间,关于可以在Internet上执行的操作仍然存在严格的技术限制。另一方面,这两种资源的重点相同:它们旨在为网络访问者提供一种在线阅读新闻报道的方式。

CNN网站的外观在2000年
Web 1.0示例 网络档案
《纽约时报》网站2000年的报道
Web 1.0示例 网络档案

但是,尽管我们可能期望技术的进步会为更多的创意所取代,但现代的屏幕截图却恰恰相反。尽管这两家公司已进行了大量更新以遵循当代标准,但除了颜色和版式使用方面的一些变化外,这两家公司如今仍在其网站上使用相对相似的布局。

纽约时报网站看2020
图片通过 纽约时报

这些相似性背后的原因可能只是隐藏在艺术家遵循该时期某些规则的倾向中。但是,在讨论统一性和独创性时,仅确定网页设计的美学(或技术)时期是不够的。为了深入了解它们的产生方式和发展方式,我们需要确定可以轻松比较的确切功能。在这方面,Goree的团队发现有三个 网页设计的关键标志

  • 导航菜单
  • 视觉风味
  • 媒体构成

随着时间的流逝,根据当前的技术和美学趋势,这些外观将发生变化。我们可以争辩说,随着我们采用新技术或形成有关使用网络的新习惯,它们将继续发生变化。

导致我们在网站中看到相似之处的另一个因素是,网页设计指南和课程的建议日益增多(通常是统一的,非原创的)与可用性有关。最终,这些最佳实践指南的结果是,人们越来越倾向于选择相似的视觉和功能元素,这些元素正在缓慢但必定使网络成为一个奇怪的同质场所。

即使是拥有大量设计预算的大公司,也倾向于选择几乎相同的美学选择。它有效并且看起来不错,那么为什么要冒险改变事物呢?请看下面的示例,一个是AirBnb的示例,另一个是onefinestay的示例。除了导航菜单外,这两家公司的首页看起来非常相似。

onefinestay主页,具有搜索界面,大胆的视觉效果和任务消息
图片通过 onefinestay
AirBnb主页具有搜索界面,醒目的视觉效果和任务消息
图片通过 爱彼迎

为什么遵循设计规则是一件好事

当然,遵循趋势不一定是一件坏事。

通过遵循广泛的技巧,设计师可以创建用户已经熟悉的在线空间。从理论上讲,这减少了适应性,因为用户不必浪费时间来习惯网站的功能。

例如,电子商务网站的标准做法是将购物车图标放在右上角。当用户想要结帐并付款时,他们将自动转到页面的该部分。

产品页面在右上角显示购物车图标“ width =” 1350“ height =” 872
NetDesigner的电子商务商店设计

网站首页在右上角显示购物车图标“ width =” 1186“ height =” 701
Artyom Ost的电子商务商店设计

此外,导致网站设计相似的不仅是用户习惯。心理学研究表明,UI熟悉度在喜欢网站/产品的用户中扮演着更为重要的角色。

根据 单纯的曝光效果,喜欢我们最常接触的事物是人类的天性,而这与我们所拍摄的图像最有效。因此,从生物学上讲,人类确实确实偏爱网页设计,这在某些方面就不足为奇了,为我们所知。

再说一次,网页设计统一的好处不仅仅是心理上的。从技术角度来看,利用相似元素的趋势不断增长,导致视障用户可以更轻松地访问网络。工具和准则,例如 WCAG 允许开发人员创建更舒适使用的网站。这不仅适用于视力问题的人,还适用于老年人。

均匀性何时会成为不利条件?

Web设计均匀性有很多优点,但也有缺点。

当所有网站看起来彼此相似时,第一件事就是互联网的活力下降。根据 2018年互联网健康报告,互联网缺乏的主要领域之一是多样性。用户不仅主要是白人和男性,而设计和开发页面的人也是如此。这种相同的结果意味着,经常忽视边缘化群体的要求和观点。

此外,同一份报告还提请注意这样一个事实,即像Google这样的大公司可以强加全球标准,小型参与者可能会或可能无法访问。结果,那些相同的大公司获得了审查信息或将互联网用于自己的议程的权力。

Google建议的网页设计指南“ width =” 1600“ height =” 787
大公司喜欢 谷歌 正在提出全球设计标准

但是,即使我们忽略了统一性可能导致边缘化和安全性问题这一事实,考虑品牌问题仍然很重要。

对于任何试图在当今商业世界中取得成功的公司来说,品牌在吸引和吸引目标受众方面都起着至关重要的作用。尽管品牌并不仅仅依赖于设计,但要记住 第一印象主要建立在视觉数据上。打造强大而独特的视觉形象和品牌个性至关重要。这意味着公司首页上的每个元素都需要在定义公司的价值,使命和产品中发挥作用。现在,如果所有网站看起来都相似,那么就很难在竞争中脱颖而出。

为什么创意很重要?

好吧,很简单。强烈的视觉识别感并非只是随机的设计选择。这是品牌的电话卡。通过独特的外观,任何品牌都可以:

  • 变得容易识别(以麦当劳的金色拱门为例)
  • 吸引目标受众的情感回应(例如,可口可乐的圣诞节广告)
  • 在所有在线和离线业务中都具有统一的形象(特许经营在这方面做得特别好,全球各地都提供几乎相同的体验)
  • 传达价值观和使命(例如,从“有机谷”的网站上可以清楚看到它们的全部内容)
可口可乐首页屏幕截图“ width =” 1600“ height =” 476
可口可乐 品牌很大程度上依赖视觉效果
有机谷主页屏幕截图“ width =” 1600“ height =” 749
有机谷徽标是良好品牌形象的一个例子

因此,很明显,遵循某些设计规则可以为品牌提供用户体验方面的优势。但是,如果在在线和离线状态下都没有开发出足够的独特元素,则几乎不可能实现强大的品牌效应。

常见的网页设计最佳做法

在开始思考脱颖而出的方法之前,务必要了解最常见的网页设计功能。您需要先了解规则,然后才能打破规则。以下十点代表设计专家和在线资源推荐的Web设计最佳实践。

在大多数网站上实施这些功能的原因各不相同。一方面,一些方法已成为标准的做法,可以作为查看页面时常见用户行为的答案。通过热图或分裂测试找到支持这些的数据。

另一方面,随着Web设计师开始着眼于研究消费者行为线索的心理学研究,其他实践也变得司空见惯。如果某种类型的语言被证明具有更强的说服力(例如CTA中使用的词语),则它更有可能被实施到Web设计中。

最后,一些建议依赖于审美直觉以及可访问性的简单事实。毕竟,不需要有人进行实证研究就可以知道红色背景上的绿色文字难以阅读。

对于良好的,面向用户的网页设计,您不一定必须遵循这些规则中的每一个。但是,了解它们为何如此重要可能会为您提供所需的洞察力,以便根据您的品牌需求做出正确的选择。

1.徽标放置

绝大多数网站 在左上角放置一个可点击的徽标。即使是世界上访问量最大的网站也遵守该标准。原因比较简单。在说印欧语的西方世界,人们从左到右阅读。这也转化为他们的在线行为。通常,它们趋向于偏向页面的左上角。通过将徽标放置在该区域中,图形设计师可以依靠网络访问者的习惯,并使用它们来展示他们认为最重要的信息。

具有左上角徽标位置的登录页面“ width =” 736“ height =” 558
Adam Muflihun放置左上角徽标的示例

2.导航

当涉及到用户可以轻松浏览网站内容时,精心制作的导航菜单起着至关重要的作用。大多数专家都认为,最佳实践是使用用户已经熟悉的既定样式,这意味着它们的学习曲线较短(或不存在)。

这些解决方案中最简单的是水平方向的导航栏 88%的网站。当然,还有一些其他流行的选项,最常见的是粘性菜单,侧边栏导航,汉堡菜单和下拉菜单。

带有经典导航栏的首页“ width =” 1400“ height =” 824
DSKY使用经典导航菜单的首页示例

带有下拉导航栏的主页“ width =” 1403“ height =” 620
使用KR Designs下拉菜单的首页示例

3.英雄区视觉效果

默认情况下,网站的最突出部分保留用于品牌宣传目的。这就是说,英雄部分通常被引人注目。现在,具有这些视觉效果的是,它们不一定必须代表品牌的产品或服务。遵循建议以吸引人们关注的部分,设计师可以选择与产品无关的图像,或者选择图库。对于许多人来说,这种方法行之有效,但是也冒着看起来与其他网站非常相似的风险。

带有英雄区域中的股票图像的主页“ width =” 1452“ height =” 805
Mithium视觉英雄部分的示例

4.版式

共识是,任何网站上使用的字体都必须清晰易读,这就是为什么使用大而粗的字体来充分衬托背景是标准做法。网站上使用的最佳字体是网络安全字体。

5. CTA按钮

号召性用语是网站转换的主要贡献者之一,吸引了开发人员和设计师的广泛关注。通常,建议是,CTA必须高度可见,使用短文字和指示性动词,产生紧迫感,并以第一人称或第二人称代词来称呼网络访问者。

具有多个位置的CTA按钮的网站的屏幕截图“ width =“ 1259” height =“ 604
魔方 主页在整个页面中多次使用同一个CTA按钮

此外,由于其重要性,许多设计师选择 在整个网页上重复他们的CTA,如CubeFunder主页上所示。在这里,该按钮显示在英雄部分,右上角以及每个 好处 部分,旨在使用户尽可能轻松地进行转化。

6.布局

根据热图数据,大多数用户以三种方式之一浏览网站,其中F模式是最常见的。产品页面通常遵循这种做法,图像位于左上角,图像右侧则是文本,分为多个项目符号。也许最好的例子来自亚马逊,假设所有访客都将首先查看图片,然后继续阅读(或更可能是略读)文本,所有页面都遵循这种类型的布局。

亚马逊产品页面屏幕截图“ width =” 1600“ height =” 772
亚马孙 产品页面遵循流行的F阅读模式

7.空格

大多数资源建议在网页设计中使用负空间。从设计的角度来看,这使广告素材可以在背景,视觉元素和CTA按钮之间获得所需的对比度。极简主义的网页设计使这些原则更加完善。它旨在消除所有干扰,而专注于提供简化的用户体验。

8.配色方案

虽然很少有证据可以证明心理学可以预测用户对颜色的反应,但许多消息来源建议根据人们的喜好使用某些色调(例如蓝色,绿色,红色或橙色)。看到使用绿色或橙色CTA的设计并不少见,如下面的Mithium示例所示。

具有橙色CTA的网站“ width =” 1449“ height =” 815
Mithium的此设计使用橙色的CTA按钮

9.页面加载速度

“与Google一起思考” 报告说,当页面加载速度超过3秒时,跳出率将大大提高。由于设计人员和开发人员希望不惜一切代价避免跳动,他们将更有可能为了实现更快的加载速度而牺牲页面元素。因此,大多数页面将倾向于具有相似数量的元素。

10.移动优化

2019年超过50%的所有互联网流量 来自移动设备。这清楚地表明Web设计需要在较小的屏幕上进行开发。诸如Bootstrap之类的工具使此操作更容易实现。但是,不幸的是,移动优先可能会限制设计师,主要是因为必须坚持使用网格来使网站具有响应能力。

在不同屏幕尺寸上显示的相同网页设计“ width =” 1542“ height =” 594
屏幕大小如何影响MVB布局的示例

什么时候以及如何在人群中脱颖而出

当然,设计师可以牺牲艺术自由来兑现承诺更高转换率的准则和实践。但是最后,这种类型的统一只会导致无聊。试想一下,如果一项测试显示每个人都将其CTA按钮更改为红色,则该颜色 效果提高21% 比绿色。

无论您是企业家还是设计师,请确保您提出正确的问题。深入了解可提高结果的Web设计实践是一个好的开始。跟随他们甚至更好。但是,在此过程中牺牲唯一性最终是一个自我破坏的决定。

如果您要使自己的网站独一无二,可以通过以下几种方法来添加自己的个性。

1.做你自己

最重要的是,您的网站需要展示您的品牌形象。它应该集成到网站的各个方面,从页眉到页脚。选择代表您的视觉效果,即使它们与您行业中其他所有人的行为有所不同,也请花一些时间向访问者介绍自己。

原始软件开发设计“ width =” 1600“ height =” 836
迈克·巴恩斯(Mike Barnes)优先考虑品牌标识的设计

新增中 关于我们认识团队 像上面的例子中的麦克·巴恩斯(Mike Barnes)这样的部分,为您提供了一个绝佳的机会来陈述自己是谁,代表什么。这样一来,您将有更多机会吸引合适的客户,而不必处理糟糕的期望管理带来的后果。

2.向观众展示

如果您的研究做得不错,您将对目标受众有很好的了解。脱颖而出的方法之一是使该受众群体成为您品牌的一部分。

不要害怕使用社交证明。评论效果很好,但内容效果更好。就像将用户生成的内容添加到首页一样简单,例如 佐马,可以使您的品牌在竞争中占优势。尤其是因为您将不会使用其他所有人都在网络上使用的相同普通照片。

原始软件开发设计“ width =” 1270“ height =” 610
用户生成的内容 佐马

3.尝试媒体

您希望受众与您网站上的内容互动,因此请查看是否可以使用促进互动的元素。使用视频和动画,不仅 增加收入 但也将获得一次独特的机会来展示您的产品。您还可以选择跳过照片和视频,并选择具有创意的网站插图,以将信息传达给您。

网站使用英雄部分中的插图“ width =” 1502“ height =” 752
Studio Ubique的摄影创意替代品

4.展现你的本色

尽管色彩心理学可以洞悉人们对某些色调的反应,但不必因为您身处特定行业或利基市场而觉得您必须坚持配色方案。取而代之的是,旨在使用能够提升品牌形象的品牌色彩来创建和谐的网页设计,同时帮助您在竞争中脱颖而出。考虑一下百事可乐和可口可乐如何使用非常不同的配色方案,即使它们的产品相对相似。

5.提供见解

使用网页设计从竞争中脱颖而出的最好方法之一就是提供一些额外的东西。像下面这样的资源部分 光环 帮助客户增加价值。这是吸引他们注意力的一种可靠方法,也是使您的网站本身成为无法替代的工具。

Aura网站的博客部分“ width =” 874“ height =” 884
光环 使用博客部分将其网站变成工具

6.复制

除了提供信息之外,您网站上的副本还需要与您的视觉标识配合使用。确保它与您的品牌相符。如果您选择了有趣,丰富多彩的视觉效果,请不要使用正式的,固定的语言。保持原创,远离陈词滥调,并始终寻找可以提供更多收益的方法。

7.用户体验

最后但并非最不重要的一点是,出色的Web设计将支持转换并具有较短的学习曲线。但是,这并不意味着它将限制创新。在竞争中脱颖而出的绝对最佳方法之一就是为您的用户提供出色的用户体验,即使这意味着要做到前所未有的事情。

采取 Festicket, 例如。最初是从购买节日门票的网站开始的,后来变成了所有与节日相关的服务(包括住宿和交通)的单一资源。

节日预订网站,提供高级UX功能“ width =” 1600“ height =” 723
Festicket 用户可以预订单个服务或整个套餐

独特的网页设计:您应该遵守规则还是做自己的事?

如果我们一直有正确的答案,生活将会变得更加轻松。原始网页设计也是如此。您没有适用于您网站的通用建议。最后,任何人向您提出确定您应该采用标准还是原始的确定公式-当然,除了您值得信赖的设计师团队之外,您肯定会受到损害。

这样想:您不会因为C-Major流行而要求音乐家停止使用它,是吗?仅仅因为一个元素被普遍使用并不一定意味着它不能对原始艺术品做出贡献。莫扎特喜欢使用主键。这会使他的作品变得乏味,无创造力或糟糕吗?绝对不。再说一次,盲目跟随趋势也不是答案。

那么你怎么知道该怎么办呢?最后,您的任务是寻求平衡。制作任何艺术品时(一个很棒的网站肯定可以),您需要首先学习基础知识。您需要确切地知道如何实施技术细节以及如何使标准实践对您有利。一旦掌握了这些标准,就可以找到在不牺牲用户体验的情况下偏离这些标准的方法。当然,您希望做出能够支持您公司品牌,传达其使命和价值观并吸引目标受众的设计选择。

如果您只是跟随其他人的所作所为,就有可能成为另一个难忘的品牌。但是,如果您设法找到一种创新的方法,即使它只是一个有趣的调色板,并且仍然保持较高的网站可用性,那么在这种情况下,您的做法就正确了。