深圳网页设计:4最重要的网页设计原则解释

2019.08.09 mf_web

68

有很多因素有助于创建一个精彩的网站。在本文中,我选择了四个最重要的网页设计原则,这些原则极大地有助于创建一个美丽而成功的网站。对于每个原则,我将详细介绍它们的含义,并提供一些不同的例子来帮助理解每个原理。

深圳网页设计我认为任何原则都不比另一原则重要。当遵循它们中的所有四个时,它们确实证明对于网页设计是有用的和成功的。

原则#1 - 实用性

每个网站都应该对其用户和访问者有用。例如,每个人都不喜欢clickbait,因为它没用。当一个网站被证明是有用的时,它也证明是有价值的。精心设计的网站将满足用户的需求,并且具有不仅仅看起来不错的坚实目的。另外,有用的网站将向用户提供相关信息。您可以通过提供相关信息来满足用户或访客的需求。那是生活的大圈子。

例#1 - Infermedica

Infermedica主页

我们来看看Infermedica的网站。你在他们的主页上看到的第一件事是一个很大的标题,上面写着“医疗保健公司的人工智能”。这有点模糊,但幸运的是,该产品在页面下方有更详细的解释。

该网站的主要焦点是双重的。首先,分享Infermedica可以为医疗行业做些什么。其次,它旨在让人们安排演示。整个网站在Infermedica的人工智能产品的帮助下解释了医疗工作流程的简易性和改进。

此外,安排呼叫的号召性用语非常重复。这很棒,因为本网站上没有任何相互矛盾的号召性用语,例如敦促访客注册简报或免费试用。Infermedica网站的目的很明显。

Infermedica解释了他们的产品如何运作以及特定用例作为其相关信息的一部分。

示例#2 - 多重利益2016

另一个有用网站的例子是Multiplicity Leads 2016的登陆页面。这是一家名为Foilco的冲压薄膜公司举办的单一夜晚活动的登陆页面。该活动针对利兹的图形艺术家。着陆页充满了有用的信息,例如事件发生的地点和时间。

他们详细介绍了参加活动的三位不同发言人以及他们被选中的原因。此外,该网页还介绍了一些关于主机的内容,以及为什么他们认为首先举办活动非常重要。此时,页面结束了。但是,在此之前,您还可以预订门票。

虽然这个网站上没有很多文字,但是有大量的信息。副本非常简洁,非常简洁。这使得学习这个活动成为一个令人兴奋的简单但也很有用的东西。没有任何信息似乎不合适或无关紧要。

原则#2 - 沟通

网站上的一切都是沟通。从按钮的副本到用户与结帐流程交互的方式。对于网站来说,如果填写表格并在出现问题或需要他们注意时向用户提供反馈,这一点非常重要。

在您尝试购买图书时,为什么表单要求一些奇怪的东西(如您的婚前姓名)有助于改善网站与用户之间的沟通。清晰的语言是关键。此外,层次结构起着重要作用。当层次结构奇怪,令人困惑或只是坏时,用户将会感到困惑。这是糟糕的沟通。

示例#1 - 标志性框架

标志性框架

为了了解良好的层次结构可以为通信做些什么,我将浏览Iconic Framework的主页。从上到下,信息越来越详细。

它首先对产品进行了简洁明了的描述 - 它是一个用于构建移动应用程序的开源框架。如果你觉得有趣,你会开始滚动。比如,访问者继续滚动。下一节将详细讨论该产品,下一节将详细介绍更多细节,下一节将详细介绍。

所有这些事情,所有信息都将允许访问者判断该产品是否对他们有用。只有在尝试以最好的足迹推销产品之后,网页才会详细介绍集成等细微内容。

跨平台功能等核心功能与应用程序构建功能无关。此外,社会证明也不重要。它只能说服那些对产品更感兴趣的用户,并且会成为一直困扰着滚动的用户。这是在相关时间传递信息的一种方式。

示例#2 - 替补席

长凳

如果我们想要判断有效沟通,我们需要考虑的另一个例子是网站内的互动。这一次,我想向您展示Bench,一个面向小型企业的金融应用程序的入职。该过程包括四个步骤。第一部分介绍Lars和Brittany-他们现在是你团队的一部分。

有许多漂亮的照片和一些有关它们的信息,甚至是欢迎信息中的独特签名。这传达了护理。它传达的是,事实上,应用程序背后有人类。当您继续进行入职流程时,Lars可以为您提供一些帮助。

设计中的小尾巴也有很长的路要走。例如,在填写信用卡信息时,会弹出信用卡图像并填写您在卡上看到的信息。在填写安全代码时,它甚至会翻转到背面,就像使用实际卡一样。

输入信息时,表单会告诉您如何格式化信息。但是,如果您做错了什么,它会提供有关如何纠正错误的明确信息。Bench显然关注每一个细节,以确保他们不会混淆用户,但在整个入职流程中提供清晰的沟通。

原则#3 - 简单

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

这再次意味着该网站也很有用。如果您还没有注意到,四个网页设计原则中的所有原则都不同,但可以协同工作。实现一个有助于实现另一个。简单的设计使用空格来使不同的页面元素可读,易读和易于理解。但是,简单的设计也没有杂乱。而且,简单的设计只需要用户的必要互动和努力。所有这一切使设计更加不言而喻。

示例#1 - Surge App

浪涌应用

简单设计的网站的完美示例必须是Surge App。看一下上面的截图。这是从主页稍微向下的部分。它几乎没有发生,但它仍然有用。它有一张同性恋伴侣的华丽照片; 这是你看到的主要内容。

然后,你会看到一个简短的标题和副标题,非常迅速地解释这是一个男同性恋的约会应用程序。令人敬畏的是,那里没有别的东西。本节是漂亮网页设计的一个例子。

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

您是否也注意到导航?它是左侧的汉堡菜单图标。同样,导航不会妨碍。没有无数的链接试图让你去其他地方。

每个部分都有一个目的,作为一个访问者,很少有人分散你的注意力。仅此示例涵盖了简单设计的所有基础知识:使用空白,无杂乱,不言自明,仅包含必要信息。反过来,设计尽可能有用且有目的性。

原则#4 - 一致性

当我谈到一致性时,我指的是两个不同的东西。首先,网页和整体在线状态存在一致性。相同的网站,Web应用程序或产品应在每个页面上以及各种平台或设备上具有相同的视觉样式。

我们一直在那里,我们在电子商务网站购物,决定购买产品,并进入看起来与其余部分完全不同的结帐页面。令人困惑和坦率地说,令人不快。如果我们知道自己处在正确的位置,做正确的事情,那就更让人放心了。

第二种类型的一致性是关于以下约定,例如可以点击徽标,将登录和注册链接放在顶部导航的右侧,或者将社交媒体链接放入页脚。

示例#1 - Vero

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

这使得整个体验对访问者来说更好,这也使公司看起来更专业。我已经检查过了,他们的注册和登录页面也遵循相同的风格。这看起来有点傻,但就像我说的那样,我们都看到了一个网站,他们的视觉风格到处都是。

此外,Vero确实遵循典型的Web设计约定。例如,页眉和页脚中的徽标确实会带您进入主页。登录和注册按钮位于其导航的右上角。页脚是通向各种其他信息的门户,这些信息可能与首次使用者无关。在输入字段中输入信息时,占位符将变为标签。等等。

示例#2 - MailChimp

MailChimp

MailChimp是许多渠道中一致视觉风格的另一个令人敬畏的例子。他们一丝不苟地保持他们的设计细节。从主页到他们的注册页面和Web应用程序,整个事情看起来很有凝聚力,因为它遵循相同的风格。

他们的支持页面和其他资源也很棒。该公司还遵循典型的网络惯例,有助于使他们的网站和产品高度可用。

设计界非常庆祝MailChimp在关注公司设计质量方面的努力,这些设计充满了每一个细节。这就是为什么这么多人喜欢使用他们的产品并喜欢与公司联系的原因。

结论

有许多不同的东西有助于建立一个成功的网站。这四个网页设计原则是最重要的原则。就像我在帖子中提到的那样,它们有助于相互促进。当您使用简单的设计时,它更有可能只提供最相关的信息,从而使网站可用,等等。

深圳网页设计

最新案例

联系电话 400-6065-301

留言