使用极简主义设计雕刻Web界面的3种方法

发布时间:2019-08-30 11:06:25 阅读:48

设计不只是关于你投入的内容 - 它也与你遗漏的内容有关。

白色空间(或“负空间”或“空白空间”)对于将视觉层次定义为涉及的实际元素同样重要。

在本文中,我们将讨论使用缺席加强实体的三种技术:使用分组进行理解,结合空白和对比度,以及改变导航菜单的空白区域。

1.使用分组进行理解

Lever的页脚设计是使用空白区域创建内容组的完美示例。所有页脚链接都分成垂直列并排排列。

image00

资料来源:杠杆(https://lever.co/)

让我们看看每个列。请注意,页脚中每个链接之间的垂直间距(如导航和功能)是相同的。然而,与白色文本的对比迫使我们在仔细阅读任何链接之前首先查看标题。

这里最有趣的一点是垂直和水平都可以找到白色空间。水平空间远大于链路之间的垂直空间。

结合对比度的间距将我们的注意力吸引到白色链接,同时保持我们对所有链接相关的理解。不需要“页脚”标签或任何其他效果,使我们能够保持简约的设计。

image02

资料来源:杠杆(https://www.lever.co/)

正如统一连通性原则所指出的那样,更紧密的元素看起来是相关的。

Lever是一个响应式网站,当您调整布局大小时,这些页脚列全部垂直下降。在查看较小的响应式布局时,设计通过在页脚列之间创建更多垂直空间来进行调整。结果,用户仍然可以看到一个列表结束而另一个列表开始的位置。

2.结合白色空间和对比度

Geckoboard网站的页脚区域可以看到另一个类似的效果它使用3个链接列,但不是为标题提供更多对比,而只是重要的链接(如产品,优惠和定价)在清晰的白色文本中脱颖而出。

image03

资料来源:Geckoboard(https://www.geckoboard.com/)

页脚中的负空间既是成分也是文本。页脚本身非常大,但链接文本水平和垂直间隔。因此,宽敞的空间使每个链接几乎感觉像一个单独的文本块。

链接文本样式也使用全部大写字母,通过CSS添加一些字母间距。列,链接和单个字母之间的所有这些额外空间营造出宽敞的感觉。对比度定义了更高级别的文本,额外的空间传达了链接组之间的关系。

请记住,白色空间是普遍的,页脚不是唯一可以受益的区域。标题,侧边栏甚至页内内容都可以使用空格和高/低对比度来构建上下文关系。

要了解有关留下强烈视觉印象的更多信息,请查看人眼的免费指南Web UI设计的第一卷   。

3.导航菜单中的白色空间变化

几乎所有网站都需要某种形式的主要和辅助导航,除非它们只是单页设计。事实上,正如您在这个优秀的画廊中所看到的,许多单页面布局仍然使用某种形式的精简导航 - 无论是简单的顶级水平菜单还是汉堡菜单。

如“ 2016年网页设计趋势”电子书中所述,导航中的空白区域可能会有很大差异。这一切都基于内容密度以及单个导航中必须包含的链接数量。前面显示的许多示例都只是带有一些链接的简单着陆页。登录页面上的内容越少,您可以在导航布局中进行更有创意的控制 - 例如,将导航链接设计为大型排版块或将其塞入角落。

但是,在构建更复杂的Web UI时,您需要更严格的攻击计划。微软的主页为例,该主页支持所有产品的链接。众所周知,微软网站的设计必须考虑到其广泛的产品范围,从平板电脑到Xbox游戏机和游戏。这是一个非常微妙的平衡行为。

image01

资料来源:微软(https://www.microsoft.com/en-us/)

他们的导航菜单包含一系列带下拉菜单的链接。每个下拉列表都使用带有第三产品链接的弹出式二级菜单。毋庸置疑,微软的网站有很多内容。

关于他们导航的重要部分是白色空间的精致使用。它们下拉列表中的所有链接都表现得像块级元素,并且有大量填充。访问者可以悬停在链接区域的任何位置,它将变为可点击。通过遵循Fitts定律创建导航链接的大型目标,该设计使得网站的导航变得流畅和轻松。

在文本之间添加更多空间时,可读性往往会增加,因此当您在同一菜单中放置数十个链接时,在额外空间方面会更加错误。在这种情况下,慷慨的白色空间有助于抵消Hick定律所描述的太多界面物体的决策瘫痪效应

更有趣的是,微软在页面下方还包含了一些其他较小的菜单。只需几个链接和相关图标,这些更简单,但它们仍然是让访问者深入挖掘网站的一种方式。

image04

资料来源:微软(https://www.microsoft.com/)

image05

资料来源:微软(https://www.microsoft.com/)

在设计导航菜单时,请始终考虑内容密度这部分网站需要提供多少内容?答案将让您了解一些导航设计选项,以及必须提供多少空白区域。

以下是样式导航菜单的一些提示:

  • 根据链接数量调整字体大小和空间。
  • 较小的链接仍然可以通过对比或滚动导航栏引起注意。
  • 额外的空间为更多的链接提供了更多的空间。垂直和水平考虑空间以创建“链接块”。
  • 不同的页面部分需要不同的空白值。网站的顶部导航可能与页脚导航完全不同。

如果您有兴趣了解有关导航最佳实践的更多信息,我们强烈推荐这个由5部分组成的关于Smashing Magazine的系列


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"使用极简主义设计雕刻Web界面的3种方法",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560