15个用户界面设计模式,网页设计师应该保持得心应手

用户界面设计模式帮助在整个web中创建一致性,并为寻找最佳测试、最可用和最有效的布局的web设计人员提供大量资源。生活中的许多事情都在一个模式中,这包括设计和开发中的应用程序。虽然在设计中必须要有创造性和跳出框框的思维,但在很多时候,一致性也是必须的。在网页设计中,用户界面模式作为一种重要的资源正在获得认可,围绕它进行设计可以帮助任何网站变得更加用户友好。

15个用户界面设计模式,网页设计师应该保持得心应手

在这篇文章中,我们将回顾15个最实用的UI设计模式,这是网页设计师应该注意的。通过使用这些模式,或者至少采用他们理论的一些部分,可以更快地创建设计并获得最佳的结果。

1. 页面网格

网络设计中经常使用网格来组织图像和内容,创建对齐,并应用神圣的比例或其他基本设计原则。然而,作为接口模式的网格也有助于创建明确的主要和次要的兴趣点。

网格

网站需要在主要领域保持一致性,如广告、品牌、导航和一般内容。即使是非常规的布局设计,一般区域仍然适用于易于使用和一致性。虽然这种设计模式有一些变化,但通常适用于以下情况:

  • 商标(标志、标语等)在左上角
  • 导航是指向顶部的,最好是尽可能向左
  • 内容位于页面的中间
  • 广告在右边,在次要的位置
  • 页脚内容包含了一些不必要的东西,但仍然应该是有用的和有趣的,因为这是给读者留下的最后印象

进一步的资源

2. 垂直导航栏

当我们趋向于更简单的网站和水平导航栏时,左边或右边的导航栏已经变得越来越少了。然而,虽然垂直导航栏的外观似乎已经过时了,但它的用途常常会超过水平导航栏的用途。

左导航

左导航

水平导航对于一些链接和相对简单的树结构非常有用。然而,垂直侧边栏导航对于更复杂的导航来说是完美的。以亚马逊网站为例:这个网站上的所有类别的菜单都是水平的,但在垂直导航中,它看起来紧凑而合适。此外,本例中的子菜单不会干扰下面的其他内容。

即使是小网站,垂直导航也有它的好处。放置在一个标志或其他主要位置的正下方,它可以像水平导航一样有效,并且通常在给定布局的可用空间方面是有益的。只要有足够的宽度可供内容的其余部分,垂直导航可以更加明显和用户友好。

进一步的资源

3.横向导航栏

与上面的情况相反,页面顶部的水平导航在其他情况下是最好的。这种接口模式的流行是有原因的。事实上,它几乎总是跨越整个页面,并接近顶部,使它成为一个次要的兴趣点后,一个标志,往往是我们作为设计师想从用户界面设计。然而,除了它的显著性之外,它还有一些其他的关键好处。

横向导航

横向导航

对于更简单的导航形式(少于10个类别),这个界面可以节省大量空间。垂直导航的空间包括最长链接的宽度,以及根据项目数量而变化的高度。然而,水平导航只随宽度变化,而这个宽度通常保留给导航来填充。高度是静态的——字体的高度加上任何其他的填充、边距和边框。

水平导航最适合那些不容易改变的链接。例如,动态绘制的导航项或将发生巨大变化的导航项可能会突破宽度限制,从而破坏布局。然而,在许多情况下,导航是不变的,在整个网站的生命周期中几乎没有变化。

进一步的资源

4. 模块化的标签

随着博客和其他内容丰富的网站的出现,模块化标签变得越来越流行。从设计的角度来看,有很多不同的方法来完成外观,下面是一个非常独特的方法作为例子。虽然许多只是以标签的形式,就像上面的水平导航一样。

模块化的标签

模块化的标签

模块化标签可以以一种干净和有组织的方式压缩额外的内容,并隐藏它,直到用户需要它。通过这种方式,可以将更多的内容加载到一个页面中,而不需要牺牲设计或过多的层次结构。这些额外的内容一旦被浏览,可以帮助用户更好地浏览整个网站的有趣链接或导语。

进一步的资源

5. 面包屑

面包屑是导航层次结构的可视化表示。当页面和类别被嵌套时,为了帮助用户找到通过这些级别的方法,面包屑可以派上用场。为了便于阅读,面包屑通常位于相对内容的上方,并且位于从左到右的单行中。

面包屑

从用户界面的角度来看,使用breadcrumb并不比使用Patternry更好:

位置面包屑:用户需要能够向上导航(指向根页面),并了解他所在的位置与站点的其他部分的关系。

属性面包屑:当缩小搜索范围时,用户需要查看他所做的选择。

认识到面包屑的最佳实践,如哪些网站上使用它们,什么类型的页面和使用它们的层次结构,以及如何显示它们是一个急需的技能对于任何网页设计师,因为他们越来越需要web内容很多生长在和复杂的网站。

进一步的资源

6. 文章列表

随着博客的流行,文章列表的设计界面也变得越来越流行。无论是一系列的博客文章、新闻标题,还是其他,知道如何有效地列出最佳用户参与的文章是一个基本的设计师技能。

文章列表

文章列表

今天的大多数文章列表将包括这些内容项:标题/标题、内容简介、评论(如果是博客文章)、日期和任何其他重要的元数据。标题应该是主要的兴趣点,而内容应该是其次。这种设计模式的其他特点包括独立的柱子之间有足够的间距,以及垂直列表的完全一致性。

下面这个设计接口模式时显示文章列表是一个伟大的方式抓住读者的注意力,因为它允许最重要的特征(内容)占据了大部分的页面,方便让读者一切他们需要成为网站立即感兴趣和深入挖掘。

进一步的资源

7. 档案

存档为用户提供了一种简单的方式,让他们在阅读内容时能够回到过去,而且希望是以一种有组织的、分类良好的方式。不幸的是,有许多博客和其他时间敏感的网站不使用档案页面,或者即使他们使用,这是一个非常简单和无组织的页面。一个好的档案设计模式首先是按日期显示,最好也是按类别显示。

档案

对于按时间顺序排列的内容,用户只能通过多次点击“以前的文章”链接来慢慢找到他们要找的内容,这是不现实的。此外,如果他们不寻找任何特定的东西,这将是一个乏味和不必要的任务,许多用户不愿意这样做。

然而,一个智能的归档设计模式可以在一个页面上显示所有内容,包括标题、日期和可能的类别。这将使读者能够快速、轻松地找到他们要找的东西,或者他们可能感兴趣的东西。

进一步的资源

8. 内容页脚

有时内容对网站来说是必要的或有用的,但不一定是主要的或甚至是次要的导航。像这样的导航或内容在页面底部很有用,在一个叫做“胖页脚”的界面设计模式中。

页脚内容

页脚内容

胖页脚内容最适合引导用户在页面的末尾看到新内容,因此应该是易于扫描的,格式也很吸引人。许多设计师选择三栏,标题和/或导语的链接来填充空间。因为这是页面的最后一个可视部分,所以必须添加与网站目标同步的内容:RSS提要、联系人表单、更多内容标题等等。

进一步的资源

9. 分页

当网站上有大量数据时,不管是博客文章、图片还是其他类型的文件,分页是一种界面解决方案,它允许用户快速滚动内容。通过将数据分隔成页面,可以显示一个序列来表示它,允许用户跳到最后一个、第一个或中间的一些内容。

分页

UI模式从设计解决方案的角度描述了分页的使用:

首先,分页将大型数据集分割成更小的数据块,以便用户阅读和处理。其次,分页控件向用户传递关于数据集有多大、还有多少需要读取或签出以及他们已经签出了多少的信息。

进一步的资源

10. 懒惰的登记

注册或注册表单是许多网站的一部分,也是设计师必须经常遇到的问题。我们都听说过让用户注册某些东西的困难——从营销到拥有足够有趣的应用程序或网络来注册。然而,很多时候的问题是注册对用户来说太困难了。

简单的注册

简单的注册

界面设计就是不让用户思考,一个惰性注册页面可以帮助做到这一点。一个简单的、惰性的注册将只允许几行输入,并且可以动态地处理其余的内容。例如,一个网站可能现在只想要一个电子邮件地址和想要的密码,然后用户可以在以后输入他们的其他帐户信息。不管怎样,该网站仍然有一个新的注册用户和一个电子邮件地址。

进一步的资源

11. 投票推广

进入web 3.0的世界,我们看到越来越多的用户驱动网站。其中一种类型的网站包括内容投票网站。Digg和DesignBump只是其中的一对。用户通常输入内容,然后对其进行评级,并给出相应的排名。

投票

使用这种设计模式和网站方法是让最受欢迎的内容首先被注意到的极好方法。通过首先显示最受欢迎的内容,网站可以获得更多的用户参与。从设计的角度来看,这个模式有三个特性:它所描述的内容、投票的数量,以及供用户投票的向上/向下排序按钮。

进一步的资源

12. 信息指示板

在现代,在线应用程序就是一切,随着我们整个世界的联网,它们正变得越来越重要。从银行和预算到组织和调度的一切都是在网上完成的,而且是以用户自定义的方式完成的。当用户与这些应用程序交互时,对任何更改、通知或重要信息更改进行更新是很重要的。

指示板

应用程序指示板是一种界面设计模式,它应该被研究,并被设计者很好地研究。这一趋势将会发展,对于设计师来说,开始应用程序设计是非常重要的。这种设计模式应该以一种有组织的、有效的方式突出所有基本内容。

进一步的资源

13. 表单向导

表单向导,无论是在多个页面还是单个页面上,都可以将较长的表单流程分解为可识别和可管理的部分。上面用惰性注册设计模式指出了一点:用户不喜欢思考或工作,所以要让他们容易一些;让他们变得懒惰。对于某些形式,这显然是不可能的。货币交易、订购流程,有时甚至是更复杂的注册都需要大量的信息。作为设计师,我们需要找出最好的方法来让它变得简单,并为用户提供免费的思考。

向导

向导分解并标记步骤,以便用户可以确定它们在流程中的位置以及需要多少工作。它还将表单组织成相关类别(一般联系信息、账单地址和信息、支付处理),以实现快速和无缝的流程。

进一步的资源

  • jWizard插件(用于在web应用程序中轻松创建向导)

14. 层次的行为

确定网页设计的层次结构,然后实施它是必要的,以帮助用户体验和突出重要的内容最有效。很容易确定哪些内容应该首先引起兴趣,哪些内容应该其次引起兴趣,但是实际上创建一个按这种顺序提供注意力的界面是比较困难的。

初级中学

初级中学

但是,通过遵循主操作和次操作的接口模式,可以简化这一过程。一些简单的事情,比如围绕主操作的形状和辅助操作的纯文本,颜色的变化,或者其他,都是在两个项目之间创建层次顺序的好方法。

进一步的资源

15. 显示集合

我们可能都对自己的作品集最为熟悉,并且都尝试过用不同的方式来展示我们的作品集,以一种一致且有效的方式让潜在客户浏览。我们中的许多人使用类似网格的表单,可能每个块只显示一些详细信息,只在单击时显示完整的信息。不过,这种模式不仅适用于我们的投资组合;所有类型的收藏都可以在网上找到。

集合

数据集合,无论是图像、资源、文档,还是其他任何可以以类似模式组织的数据集合。这种设计模式最适合任何一组东西,这些东西可以很容易地用缩略图表示,但是每一件东西包含的信息要多得多,因此不可能在一个页面上显示每一件东西的所有信息。该模式压缩了大量内容并将其组织成网格。

进一步的资源

  • 雅虎:显示集合

结论

今天,许多常见的接口模式看起来几乎是显而易见的,但是仍然值得考虑它们的重要性。这15种现代界面设计模式都经过了测试和尝试,如果使用得当,可以创建功能强大、易于浏览的网站。

在提供整个web的一致性的同时,我们仍然在模仿这些结构的一般思想,这可能会使一些设计者感到沮丧。然而,当我们使用这些模式中的任何一种时,我们仍然可以帮助保持一致性并成为有创造力的人。只要看看这些模式中所有可用的优秀范例,就会发现一个模式在创造性和有趣的解决方案方面是多么的多样化。你最喜欢的界面设计模式是什么?你最好的实践例子是什么?

2020-04-06 17:35
相关热门