• UI & UX

网页设计中的帕累托原则--用80/20法则设计一个更有效的网站

  • Lene Wandrey
  • 9 min read
网页设计中的帕累托原则--用80/20法则设计一个更有效的网站

成为网页设计中的完美主义者的问题

完美主义可能是许多图形和网页设计师的挑战。追求卓越是令人钦佩的,但它可能会导致一些挫折感,即无休止的改变和调整,直到网站的每一个元素都是完美的。对许多设计师来说,在选择字体、调色板和酝酿数百个像素完美的设计决定时,很容易被卷入设计过程而失去时间。当然,提供优秀的作品是很重要的,但作为一个设计师,很容易失去重点,这意味着什么?一个网站不应该是关于设计师的目标,它应该是关于满足客户的预期结果,同时平衡时间、资源和精力的限制。如果没有任何限制,一个网站很容易就会出现工程量过大,速度过慢,元素和功能过多,使用户感到困惑。也很难在有限的时间内装下所有的功能,所以设计师可能根本就没有时间了,如果不能在截止日期前交付一个好的网站,对参与的每个人来说都是非常有压力的。

什么是帕累托原则?

80/20法则",有时也被称为帕累托原则,指出80%的效果来自20%的原因。帕累托原则是由一位名叫维尔弗雷多-帕累托的意大利经济学家于1895年首次提出的,当时他观察到意大利80%的财富仅由20%的人口拥有。他还注意到,在他的花园里,20%的豌豆荚生产了80%的豌豆!这就是帕累托原则。帕累托原则表明,少数关键因素负责产生大部分的特定结果。从那时起,它已被应用于许多其他领域,包括商业、经济、心理学,甚至可以在日常生活中实用。

这也可以转化为小规模的例子;你有没有注意到,你的大部分收入来自少数相同的稳定客户?或者你似乎总是穿同样的衣服,而你的衣柜里的大部分衣服都没有被使用?虽然这个比例并不总是完全的80/20,而且总是有例外,但它是一个很好的工具,可以帮助人们确定哪些行动对他们的成功影响最大,并相应地确定这些行动的优先次序。

网页设计和数字营销中的帕累托原则

帕累托原则适用于网页设计,假定大多数结果将来自少数关键功能。在市场营销中,有些活动会比其他活动做得更好。为了达到最好的结果,首先关注这些少数的关键功能是有意义的,并确保它们得到最多关注,而不太重要的部分则可以更快完成。使用帕累托原则的一种方式是关注用户体验和可用性--通过关注用户如何与你的在线内容互动,并确保他们能够找到他们需要的东西,你有可能比仅仅关注美学的时候收获更大。它告诉我们,完美并不总是必要的,通过优化20%的重要功能,有可能实现一个更加有效的网站。

作为一个例子,我们刚刚查看了一家销售手工制品的小型电子商务商店的流量数据,并注意到几个帕累托趋势。例如,他们的访问者几乎都是通过手机访问网站的。大多数产品的销售来自少数类别。Facebook是他们最大的社交媒体流量来源。当检查产品页面的热图时,一些区域得到更多的参与。可以在一定程度上观察到典型的F模式,在页面的顶行和左侧下方有互动的集群。

Devices popularity

Dashboard with website analytics data

如何利用这些信息来提高该客户的销售?

在这个例子中,最快的胜利是改善这个网站的移动体验,这个网站最初是为桌面而建的。所有页面的热图可以被检查,以了解更多关于用户的偏好。例如,常见问题中点击率最高的问题可以被移到主页上,而不是隐藏起来。高利润的产品可以被放在点击率最高的页面区域。

总是从 "为什么 "开始

Always start with the Why (图片来源:Envato Elements)

根据我在这个行业的经验,我注意到许多设计师很乐意接受简报并开始设计工作,即使他们缺少与项目目的有关的关键信息。也许编制简报的人认为这些信息是隐含的,或者客户没有简明扼要地说出这些信息。在你开始工作之前,花点时间退一步。如果不清楚你为什么要做你要做的事情,你的网页设计就会缺乏方向。你的网站对你甚至对客户来说可能看起来很好,但尽管你花了很多时间,如果没有达到客户的预期效果,其结果将是令人失望的。

遇见Ranktracker

有效SEO的一体化平台

每个成功的企业背后都有一个强大的SEO活动。但是,有无数的优化工具和技术可供选择,很难知道从哪里开始。好了,不要再害怕了,因为我已经得到了可以帮助的东西。介绍一下Ranktracker有效的SEO一体化平台

我们终于开放了Ranktracker的注册,完全免费!

创建一个免费账户

或使用您的证书登录

问问你自己。这个网站为什么会存在?谁将是网站的终端用户,他们将如何在网站上互动?该网站将如何为客户创造价值和成功?客户将如何衡量这种成功?网站将如何吸引访客和捕获线索?当你能够回答这些问题,并且理解了 "为什么",你就会更容易确定设计元素中 "什么 "和 "如何 "的优先次序。 当你能想象出期望的结果时,它将帮助你把精力集中在实现这一目标的最重要的方面。

拥抱网页设计中的最小可行产品方法

在设计一个网站的时候,有这么多的决定要做,可能很难知道从哪里开始。最小可行产品(MVP)的方法包括立即只建立一个网站的核心元素,然后随着时间的推移,通过客户的反馈不断完善它们。这样做通常是为了节省成本和时间,或者当一个商业想法是基于许多假设的时候。开发人员可以根据客户需求确定功能的优先次序,并尽快创建原型,而不是一次尝试所有的东西。即使你没有时间或预算压力,把网站作为MVP来拥抱也是应用帕累托原则和打击完美主义倾向的绝佳方式。从心理上讲,知道你可以在以后添加更多的功能,但你现在应该专注于最重要的元素。

移动优先的设计可以帮助你简化你的网站

在设计网站时,你希望给用户一个有效和直观的体验。实现这一目标的最佳方式是采用 "移动优先 "的设计方法。这个概念涉及创建首先为移动设备优化的网站,而不是为移动设备调整的桌面网站。为什么有这个必要?根据techjury.net的数据,在2022年,手机会产生60.66%的网站流量,而台式机和平板电脑加起来则占39.34%。这可能在不同的行业和不同的网站上有所不同,但这个趋势是值得注意的。通过将你的设计集中在移动版本的网站上,你可以将成功的几率堆积到对你有利。

一旦你开始为移动设备设计,你会很快注意到,用于措辞和杂乱的空间更少了。如果你已经为台式机设计了很长时间,这是很难适应的。但是这种方法很符合帕累托原则,因为它可以帮助你选择具有最大影响力的内容。这样做有两个好处:你的网站将针对用户喜欢的移动平台进行优化,而当你把它调整为桌面版时,它在视觉上会显得现代而简洁。你仍然需要在以后将你的网站调整为桌面版,但当从移动优先的方法开始工作时,这将变得更加容易,因为你已经有了一个简化的设计。

做研究并分析竞争对手的网站

谈到网页设计,我们通常认为研究就是看其他有灵感的网站或有漂亮设计元素的模板。但是网页设计的研究不仅仅是欣赏其他网站的美感。有必要了解人们如何使用网络,用户如何与不同的设计互动,以及如何组织内容以创建一个有效的网站。通过询问客户可以提供的任何分析数据,或者使用像Ranktracker这样的监测工具,我们可以更好地确定有机会改进的领域,以建立一个性能更好的网站。

研究应包括通过竞争对手的分析来研究现有的行业标准、目标受众和用户的偏好。你可以通过询问客户来找到竞争对手,或者通过自己的搜索,看看哪些网站排名靠前。一旦你确定了一些竞争对手,你需要一个可靠的数据来源来了解他们的情况。Ranktracker我最喜欢的一个功能是可以添加你自己确定的竞争对手,它将在你自己的域名结果旁边的一栏中显示竞争对手的表现。如果一个竞争对手在你自己的关键词上排名超过你,那么分析他们的网站以向他们学习是值得的。要添加一个竞争对手,你只需粘贴他们的URL。

Add competitors in Rank Tracker

Rank Tracker board

点击查看一篇关于如何进行竞争分析的精彩深度文章。

遇见Ranktracker

有效SEO的一体化平台

每个成功的企业背后都有一个强大的SEO活动。但是,有无数的优化工具和技术可供选择,很难知道从哪里开始。好了,不要再害怕了,因为我已经得到了可以帮助的东西。介绍一下Ranktracker有效的SEO一体化平台

我们终于开放了Ranktracker的注册,完全免费!

创建一个免费账户

或使用您的证书登录

当你做所有的研究时,把你可能包括的所有功能和元素列一个 "梦想清单"(不要担心,你会缩小这些范围,但把所有的想法放在一起是有帮助的)。

规划。确定关键设计特征

Planning: Identifying Key Design Features (图片来源:Envato Elements)

一个网站的设计应该基于它的预期目的。看看你的梦想清单中的所有元素/功能,选择你认为能帮助客户实现目标的元素/功能。拿出一些白纸,开始为你的网站画一些粗略的线框图。在你的线框图上,将你计划包含的每个元素与一个结果联系起来:如果你不能为它找到一个明确的目的,就废掉这一部分。 不要考虑设计美学,专注于什么是对用户体验和可用性最好的。

与流行的看法相反,你的第一个线框图不需要用华丽的设计软件来设计。用铅笔和纸的模拟方法就可以了,有时甚至更好,因为你不会因为软件本身而分心。纸张的宽容度更高,而且不那么永久;使用起来更快,这在创作过程中可能会有帮助。如果你需要向你的客户展示线框图,一旦你通过粗略的绘图工作,这可以更专业地完成。

先做一个模拟图,不要在网络平台上设计,以节省时间。

有句老话说,你不能在建造飞机的时候开飞机。对于网页设计来说也是如此:当你还在琢磨关于内容、功能和设计的决定时,就试图建立一个网站,这是一个令人沮丧的秘诀。为了保持效率,你需要一个计划。在这里,为每一个页面创建一个模拟图似乎很耗时,而且有违直觉,但它有很多作用,从长远来看,会节省时间。模拟图使你的客户在网站开发开始前就能看到网站的形象。他们可以体验到不同的颜色和字体选项,并很容易预测到需要修改的地方。讨论一个模拟图创造了很多讨论和提问的机会。它增加了你的客户在第一次看到真实网站时感到高兴的机会。最重要的是,一旦进入开发阶段,由于几乎所有的创意决定都已经做出,使用模拟模型工作可以让你更快地建立网站。

用能在搜索引擎上获得良好排名的内容开展工作

有时候,客户会坚持让你从 "占位符文本 "开始设计,因为他们认为你的作用只是设计美学元素。如果可能的话,避免用一般的占位符文本做任何设计工作。虽然你的设计可能看起来很美,但如果你忽略了一个关键的因素,如写得好的内容,你的网站就会缺乏目的性。

遇见Ranktracker

有效SEO的一体化平台

每个成功的企业背后都有一个强大的SEO活动。但是,有无数的优化工具和技术可供选择,很难知道从哪里开始。好了,不要再害怕了,因为我已经得到了可以帮助的东西。介绍一下Ranktracker有效的SEO一体化平台

我们终于开放了Ranktracker的注册,完全免费!

创建一个免费账户

或使用您的证书登录

一个网站只有在获得访问者时才有价值,而搜索引擎优化(SEO)是搜索引擎如何有机地找到你的网站。在一个页面上使用的措辞选择对搜索引擎优化至关重要,而设计元素应该支持这些措辞。如果你预先知道关键词是什么,你就会有额外的洞察力。如果你与文案人员合作编写内容,确保他们熟悉SEO。即使你不是SEO专家,也要熟悉这个话题,这样你就可以在网页设计过程中更加注意这个问题。

有些关键词搜索工具很复杂(特别是如果你是SEO新手),但Ranktracker关键词搜索工具非常简单直观:你只需将关键词添加到一个列表中,它就会按照关键词难度以彩色编码显示结果。为了做好SEO,你要选择竞争度低但搜索量足够大的关键词,所以搜索量就显示在那里,非常有帮助。

Keyword Finder

因此,在你开始之前,尽量至少得到一份措辞的草稿。如果你是一个独立的设计师,你很可能还需要帮助客户找出网站上最适合的措辞。设计过程中的一个现实是,这种措辞可能会改变几次,但有一些东西可以开始,总比什么都没有要好得多。

简化对字体、颜色、层次和视觉元素的选择

如果你是一个经验不足的设计师,或者只是想节省一些时间,使用模板并把它们作为基础是有帮助的。对于像WordPress这样的内容管理系统,有数以千计的优秀模板,而且价格合理。这些模板已经有了字体、颜色、层次和视觉元素的设计,并具有统一的风格。如果你担心原创性,请放心,你的结果看起来会与模板不同,因为你是在根据你的线框进行调整。有了一些设计资产和大致的风格开始,可以真正帮助你找到方向,减少决策的疲劳感。不要包含太多的颜色:你可以安全地将你的网站颜色限制在2种或最多3种颜色

结论。最大限度地发挥影响

知道哪里是重点,可以帮助设计师管理他们的完美主义倾向,同时仍然获得成功。帕累托原则是网页设计中的一条经验法则,它指出80%的用户体验可以通过20%的努力来实现。这意味着网页设计师需要将他们的努力集中在优化内容、页面设计元素、可用性和其他因素上,以创建一个有效的网站,并在搜索引擎上获得良好的排名。

Lene Wandrey

Lene Wandrey

Founder, hot-designs.com

Lene Wandrey is a tech-loving artist, graphic designer and entrepreneur living in South Africa. She's the founder of hot-designs.com. She is passionate about design and productivity.

Link: hot-designs.com

开始使用Ranktracker...免费的!

找出阻碍你的网站排名的原因。

创建一个免费账户

或使用您的证书登录

Different views of Ranktracker app