解释了4个最重要的网页设计原则

有许多因素促成了一个优秀的网站。在这篇文章中,我挑选了四个最重要的网页设计原则,这些原则对创建一个漂亮而成功的网站有很大的帮助。对于每个原则,我将详细介绍它们的含义,并提供一些不同的示例来帮助理解它们。

我认为这些原则中没有一条比另一条更重要。当遵循这四个原则时,它们确实被证明对网页设计是有用和成功的。

原则1 -有用性

每个网站都应该对它的用户和访客有用。例如,每个人都不喜欢点击诱饵,因为它没用。当一个网站被证明是有用的,它也被证明是有价值的。一个设计良好的网站将满足用户的需求,并有一个坚实的目的,而不仅仅是好看。此外,一个有用的网站将为用户提供相关信息。您可以通过提供相关信息来满足用户或访问者的需求。这就是生命的大循环。

例#1 -不孕不育

Infermedica主页

让我们来看看不孕不育的网站。你在他们的主页上看到的第一件事就是一个大标题“医疗公司的人工智能”。“这是一个有点模糊,但谢天谢地,但产品是解释了更详细的页面进一步。

网站的主要焦点有两个。首先,分享不孕不育对医疗行业的影响。其次,它的目的是让人们安排一个演示。整个网站借助Infermedica的人工智能产品,解释了医疗工作流程的简化和改进。

此外,调度调用的call-to-action相当重复。这是伟大的,因为在这个网站上没有任何矛盾的号召行动,如敦促访问者注册一个时事通讯或免费试用。不孕不育网站的目的非常明确。

作为相关信息的一部分,Infermedica提供了对其产品工作原理和特定用例的解释。

例#2 - 2016多重利兹

另一个有用网站的例子是2016年多重领导的登陆页面。这是一个登陆页为一个晚上的活动举行的冲压箔公司称为Foilco。该活动的目标是利兹的平面艺术家。登录页面中充满了有用的信息,比如事件发生的地点和时间。

他们详细介绍了三位不同的演讲者,以及他们被选中的原因。此外,该网页也解释了一点关于主机以及为什么他们认为重要的是主办的活动放在首位。至此,页面已经结束。然而,在此之前,你也可以预订机票。

虽然这个网站上的文字不是很多,但是有大量的信息。这份文件非常简明扼要。这使得了解潜在的激动人心的事件变得容易,但也很有用。这些信息似乎都没有不恰当或不相关的地方。

原则2 -沟通

网站上的一切都是交流。从按钮的副本到用户与签出流交互的方式。对于一个网站来说,清楚地说明如何填写表单,并在出现问题或需要用户关注时向用户提供反馈是非常重要的。

当你只是想买一本书的时候,解释为什么一个表单会要求一些奇怪的东西,比如你的娘家姓,这有助于改善网站和用户之间的沟通。清晰的语言是关键。此外,等级制度也起着很大的作用。当层次结构是奇怪的,令人困惑的,或者仅仅是糟糕的,用户就会感到困惑。这是糟糕的沟通。

例#1 -图标框架

标志性的框架

为了了解良好的层次结构对于交流的作用,我将浏览图标框架的主页。从上到下,信息越来越详细。

它以一个清晰简短的产品描述开始——它是一个用于构建移动应用程序的开源框架。如果你觉得有趣,你会开始滚动。比如说,一个访问者不停地滚动页面。下一节将更详细地讨论产品下一节将更详细地讨论产品下一节将更详细地讨论产品。

所有这些东西,所有这些信息都能让访问者判断这个产品对他们是否有用。只有在尝试以最好的方式销售产品之后,web页面才会详细介绍一些次要的事情,比如集成。

跨平台功能等核心功能并不像应用程序构建功能那样重要。此外,社会证明也不那么重要。它只会帮助说服那些对产品更感兴趣的用户,而那些用户会一直向下滚动屏幕。这是在相关时间传达信息的一种方式。

例子#2 -板凳

板凳上

如果我们想判断有效沟通的另一个例子是网站内的互动。这一次,我想向你展示一个专为小型企业设计的金融应用程序——Bench。这个过程有四个步骤。第一个是向你介绍Lars和brittany,他们现在是你团队的一员。

在欢迎信息中有漂亮的照片和一些关于他们的信息,甚至还有他们独特的签名。通信的护理。事实上,它传达的信息是,在这个应用程序的背后有人类。当你在登机过程中前进时,Lars会在某种程度上帮助你——一个很好的接触。

设计中的小尾巴也大有帮助。例如,在填写信用卡信息时,会弹出一个信用卡图像,并像您在卡上看到的那样填写信息。在填写安全代码时,它甚至会翻转到背面,就像你在实际的卡上做的那样。

当您输入信息时,表单会告诉您如何格式化信息。但是,如果你做错了什么,它会提供关于如何改正的清晰信息。Bench显然非常关注每一个细节,以确保它们不会让用户感到困惑,而是在整个登录过程中提供清晰的沟通。

原则3 -简单

当事情变得简单时,就意味着所有不必要的术语、内容和信息都被清除了。这对于任何网站来说都是一件很棒的事情。当一个设计被简化时,这意味着它只保留了必要的和相关的内容。

这也意味着这个网站也是有用的。如果你还没有注意到,这四个网页设计原则是不同的,但在一起工作。取得一个成就有助于取得另一个成就。简单的设计使用空白使不同的页面元素可读、易读、易理解。但是,简单的设计也不会造成混乱。此外,简单的设计只需要必要的交互和用户的努力。所有这些都使设计更加不言自明。

示例#1 - Surge应用程序

增加应用程序

一个设计简单的网站的完美例子就是Surge应用。看看上面的截图。在主页下面一点的地方。它几乎没什么用,但仍然很有用。它有一张华丽的同性恋夫妇的照片;这是你看到的主要东西。

然后,你会看到一个简短的标题和副标题,非常迅速地解释说,这是一个为男同性恋者设计的约会应用程序。可怕的是,那里没有别的东西。本节是一个美丽的网页设计的例子。

关于这部分我们还能说些什么呢?如果你想了解更多的应用程序,你必须点击链接。该部分不包含任何需要单击的内容。然而,它确实允许访问者获得必要的信息,如果他们想要的话。

你也注意到导航了吗?是左手边的汉堡菜单图标。再说一遍,导航不会妨碍你。没有无数的链接试图让你去其他地方。

每个部分都有一个目的,没有什么可以分散你的注意力,作为一个访问者。仅这个例子就涵盖了简单设计的所有基础:空白的使用、无杂乱、不证自明、仅包含必要的信息。反过来,设计是有用的和有目的的尽可能多。

原则4 -一致性

我所说的一致性指的是两种不同的东西。首先,网页的一致性和整体的在线状态。相同的网站、web应用程序或产品在不同的平台或设备上应该具有相同的视觉风格。

我们都有过这样的经历:我们在电子商务网站购物,决定购买产品,然后到达与其他地方完全不同的结账页面。这让人困惑,坦率地说,令人不快。如果我们知道自己在正确的地方,在做正确的事情,那就一点也不能让人安心。

第二种一致性是关于遵循一些惯例,比如让logo可以点击,把登录和注册链接放在顶部导航栏的右侧,或者把社交媒体链接放在页脚。

例#1 - Vero

维罗

我将使用Vero作为一个一致的视觉风格的很好的例子。当你浏览不同的页面时,整个网站的外观和感觉都是一致的。从主页到功能、定价或招聘页面,视觉风格都是一样的。

这让访客的整体体验更好,也让公司看起来更专业。我已经检查出来,他们的注册和登录页面也遵循相同的风格。这看起来有点傻,但就像我说的,我们都见过这样的网站,他们的视觉风格无处不在。

此外,Vero确实遵循典型的web设计惯例。例如,页眉和页脚的徽标会将您带到主页。登录和注册按钮位于导航栏的右下角。页脚是通向各种附加信息的入口,这些附加信息可能与初次用户无关。当您在输入字段中输入信息时,占位符将转换为标签。等等。

示例#2 - MailChimp

MailChimp的

MailChimp是跨多个通道的一致视觉风格的另一个极好的例子。他们一丝不苟地保持他们的设计细节。从主页到注册页面和网络应用程序,所有的东西看起来都很有凝聚力,因为它们遵循相同的风格。

他们的支持页面和额外资源也非常棒。该公司还遵循典型的网络惯例,帮助他们的网站和产品的高可用性。

设计社区非常赞赏MailChimp,因为他们努力关心公司设计的质量,他们的设计在每个细节上都闪闪发光。这就是为什么那么多人喜欢使用他们的产品,喜欢与公司联系在一起。

结论

有许多不同的东西有助于一个成功的网站。这四个网页设计原则是最重要的。就像我在文章中提到的,他们互相帮助。当你有一个简单的设计,它更可能只提供最相关的信息,这反过来使网站可用,等等。

2020-01-17 17:28
相关热门