这篇文章是关于网页设计中极简主义理解的系列文章的第二篇。如果你对这个运动的起源感兴趣,请阅读网页设计中极简主义的根源

极简主义网页设计策略是通过删除不支持用户任务的不必要元素或内容来简化界面

为了将网站缩减到只保留最必要的元素,设计师必须接受影响用户界面(UI)和网站内容的一系列后果。许多通常与极简主义相关的视觉设计特征都是服务于极简主义核心策略的选择,因此在大多数情况下与极简主义一起被采用。

网页设计和语言一样,是由人们使用它的方式来定义的。“极简主义”这个词到处都是,但很难准确地指出极简主义网页设计的特征是什么。为了在实践中更清楚地定义什么构成了极简设计,我们分析了一个样品的设计特征112年极简主义的网站.如果这些网站被外部网页设计专家认定为极简主义网站,或者被包含在一个在线的极简主义网站图库中,这些网站就会被选为研究对象。

请记住,仅仅因为一种设计技术流行,并不一定意味着它总是支持用户需求,优化盈利能力或其他业务目标。在这项研究中,我们分析了已知的采用极简主义设计的网站,而不是已知的高盈利的网站。正如下面将进一步讨论的,我们的其他研究表明,虽然一些在这些设计理念中,有一些可以支持商业目标,其他的则可能会损害你的盈利能力。

定义极简主义的特征

那么这些设计都有哪些特点呢?我们在定义极简主义的特征如果在我们分析的网站中,至少有四分之三(75%)的网站存在这种情况。

平面图案和纹理

在96%的取样接口中使用(但通常无效)

在过去的几年里,设计界发生了巨大的转变,从拟物化转向了没有物理隐喻的事物的纯数字表征。界面没有使用任何明显的高光、阴影、渐变或其他纹理,使UI元素看起来有光泽或三维。

一些设计师认为,平面设计的趋势源于极简主义UI设计的流行(Müller, 2014)。这两种趋势是非常兼容的;去除不必要的阴影、渐变和纹理符合极简主义消除不必要的主要目标。在我们的示例中,96%的极简主义网站是平面的

这两者往往是如此频繁地同时出现,以至于“平面设计”(flat design)常常(具有误导性)与“极简设计”(minimal design)互换使用。这些趋势是相似的,但并不相同。平面设计通常是指界面中的纹理、图标或图形。极简设计适用于更大的内容、功能和布局策略。没有极简主义的界面也可以是平面的。

Jeet.gs
开始页面截。gs网格系统API提供了一个完全扁平的界面,包括用于复制代码片段的“幽灵按钮”。(幽灵按钮是带有细矩形边框和文本的空按钮。)扁平的幽灵按钮可能存在易读性问题,它们打破了可点击按钮的既定惯例。(但是在这种情况下,当鼠标经过按钮时,按钮会高亮显示,提供了一个可点击性的动态符号。此外,按钮显示一个微小的3D效果,当点击增加了一个小的物理感。因此,交互用户体验增加了平面界面元素的深度。)

正如我们在其他文章中讨论的,平面设计往往无法与用户沟通哪些元素是可选择的或可单击的。我们相信一个更好的方法是在平面和拟态之间的折衷——一种基本平面的设计,但与用户可以轻松识别的可点击元素

考虑到平面设计是最有可能被错误使用并降低用户体验的设计理念,不幸的是,它是极简主义网页设计最普遍的主要特征。

有限或单色调色板

在95%的取样接口中使用

在大多数极简界面中,在不添加任何额外的设计元素或实际图形的情况下,策略性地使用颜色来创造视觉兴趣或直接关注.随着吸引用户注意力的视觉信息的减少,调色板将更加引人注目,并将在网站的影响力中发挥更大的作用。

极简主义色彩调色板是一种远离冲突的运动,在21世纪流行的网页设计颜色。柔和的配色方案是为了避免使内容显得过于突出——对于图像来说,仍然可以使用明亮的色彩。

许多极简主义设计要么是单色的,要么只用一种醒目的颜色来突出网站最重要的元素。这些重音元素通常是可点击的。

在评估样例网站的颜色使用时,我们查看了背景颜色、徽标、导航元素、图标和排版,但没有考虑内容图像(如照片)作为调色板的一部分。

几乎半数的抽样网站(49%,55个网站)使用的是单色调色板.几乎同样多的网站使用在其他单色调色板中有一两个重点颜色(46%,52个网站).在这55个单色位点中,有51个位点是灰度级的——他们只使用白色、黑色和灰色阴影。

继d 'Encre
法国纹身工作室Frêres d’encre的单色主页创造了戏剧性的美学。
独奏
独奏,使用单色而非灰度调色板。
Kayak
旅游元搜索引擎Kayak用橙色来突出它的logo和搜索按钮。

这个特性的流行在某种意义上是一种进步,它使界面远离了过去主导网络的喧闹、冲突的配色方案。然而,有当应用有限的调色板时,需要记住一些注意事项

  • 确保你的配色方案使用足够的对比以清晰可辨给视力有限或色盲的人。
  • 有意且一致地使用强调色来突出非常重要的信息或主要动作。

限制特征和要素

用于87%的取样界面

采用极简设计策略的设计师必须考虑到界面中的每个元素消除任何不需要支持核心功能或消息的内容的网站。这里的“元素”可以是接口的任何单个单元:包括但不限于:

  • 菜单项
  • 链接
  • 图片
  • 图形
  • 标题
  • 材质(如梯度)
  • 颜色
  • 字体
  • 图标

如果不直接询问网站设计师遗漏了什么,不了解目标用户和任务,就很难评估一个界面是否包含了“不必要的”元素。为了使这个特性可测量,我们关注于评估界面是否包含没有任何明显目的的图形元素。在我们的示例中,87%的极简主义网站避免了不必要的图形元素

艾伦Trotter的投资组合
小说作家艾伦·特罗特(Alan Trotter)的作品集非常简约。默认情况下,该网站甚至不会透露他的全名:访客必须点击下划线文本才能获得更多细节。这一策略可能会获得“前卫”的美学效果,但隐藏最重要的内容是一场豪赌。

用户界面里的东西越多用户需要处理更多内容.极简主义设计师最喜欢的口头禅是,“减去它直到它崩溃”,这实际上意味着,“除非缺少一个元素会是严重的问题,否则就除掉它。”

这就是设计师可能会被追求干净、现代、极简的界面分心的地方,并最终删除有用的内容。坚持严格的实用主义方法可以通过消除分散注意力的功能和内容来产生流线型的设计。只是确保你不会因为删除或隐藏用户需要的内容而让用户的主要任务变得更加困难

很难理解一个杂乱的设计或一个充斥着无关特性的系统。但如果一个设计没有提供足够的框架来解释它的特征或结构,那就更难理解了。

最大化负空间

在84%的采样接口中使用

从网页中删除或排除元素必然会留下空白。负空间(也称为空白)是对接口空白区域的名称。

我们称之为负空间“实际上”的同义词“的支柱”极简主义的接口。许多极简主义设计师把它作为一种工具,试图引导用户的注意力,让他们更容易地消化内容。

考虑到这些关于负空间的有力论断极简主义的典型特征,令人惊讶的是只有84%的样本站点使用了大量的负空间在他们的设计。

托马斯·巴菲特的投资组合
上面的截图显示了法国设计师Thomas Buffet的主页,全屏显示在15英寸的MacBook Pro上。在折叠的上方,页面几乎完全是负空间。在这种情况下,该网站仍然能够回答两个主要的问题,人们来到这个页面会问:“你是谁”和“你是做什么的”。但这种方法并不适用于所有情况。

适当使用负空间有助于将人们的注意力吸引到重要内容上。当决定如何在你的设计中布局消极空间时,一定要考虑以下问题。

  • 添加或删除负面空间将如何影响页面的沟通层次?
  • 负面空间将如何影响页面顶部显示的内容?折页仍然很重要:如果有理由,用户会滚动,但他们更关注页面顶部的内容。
  • 负面的空间影响会如何成本的交互:用户是否需要更加努力地工作来获得他们需要的信息?
  • 在不同的分辨率下,负空间需要如何改变?

活版印刷的戏剧性使用

在75%的取样接口中使用

喜欢的颜色,当页面上的元素很少时,粗体或大字体成为另一种传达意义的工具.有效地利用有趣的排版可以弥补缺少照片和图形等元素的不足,并使极简设计在视觉上更吸引人。字体大小、权重和样式的变化对于帮助用户理解文本的层次结构和相对重要性至关重要。在112个取样的极简主义地点中,75%的人使用排版来传达意义或创造视觉趣味

亚历山大Engzell的投资组合
艺术总监Alexander Engzell的作品集在他的标语上使用了粗体排版来创造视觉趣味,而不添加额外的图形元素到页面上。然而,文本是一个图像文件,这增加了页面加载时间。另外,与巴菲特的投资组合不同,这一页并没有直接解释这是谁的投资组合,或者这个人做什么。用户必须点击右上角的INFO链接才能访问该信息。

将图像用于文本可能允许您使用自定义字体,但它将增加页面加载时间,需要额外考虑在不同分辨率缩放,并可能导致易访问性问题。使用网络字体是一个更好的解决方案,但请记住,网页字体也会有不利的性能影响。记住,只有当文字传达了有意义的信息时,粗体字体才有用

小心花哨的字体:用户可以忽略格式化过的文本如果看起来太像广告的话。在有意义的粗体和分散注意力的排版之间有一个微妙的平衡。一个伟大的设计师会在这种平衡的右边走下来,但如果你的设计师不太擅长使用高级排版,那么宁可谨慎行事。

相关的趋势

一些设计师还包括以下特点作为极简主义者。然而,根据我们的研究,这些似乎是与极简主义共存的设计趋势,但实际上并不是定义特征——它们出现在我们分析的网站中不到75%。

大背景图像或视频

57%的取样接口使用

大背景图片或背景视频(HTML5支持)是极简主义网页设计最具争议的特征之一。

从理论的角度来看,一个大的背景图像显然与减少非关键元素的核心极简主义精神相矛盾。尽管如此,大背景图片和视频在极简主义设计中很流行——我们发现57%的样本包含了它们

蒙特再保险
意大利水果生产商Monte Ré的主页使用了一个全宽背景图像旋转盘,网站设计为纯白色,还包括鬼按钮。虽然从技术上讲,文本与背景图像是可以区分的,但当彩色图像在文本后面循环时,试图阅读和理解文本是不愉快的。

这取决于环境和设计师的优先级,可以论证大背景图片/视频能够影响用户对品牌的认知。当一个背景图片是出于一个经过仔细考虑的战略性原因而使用时,坚持简约设计策略可以帮助抑制其他页面元素与背景的竞争或冲突。此外,一些设计师可能希望吵闹的背景图片可以避免极简主义设计过于无聊或刻板。

如果你选择使用极简主义设计的背景照片或视频,请记住以下几点:

  • 确保你选择的图像或视频有实际目的或者帮助人们理解网站——否则他们只会分散用户对实际内容的注意力。
  • 确保文本既易读又易读如果你想让人们理解的话。记住,易读性是用户能够区分单个字母的程度。可读性是指他们处理单词、短语和扫描文本的能力。如果你在使用旋转木马或视频,你需要测试每一个可能的背景——视频的每一个图像或帧,以及各种屏幕分辨率。
  • 注意大图像和视频对性能的影响。确保你采用了一种自适应的方法,这样你的手机用户就不会等待桌面大小的视网膜照片通过网络数据连接加载。
  • 不播放视频。许多用户对未经他们同意就自动播放的视频感到沮丧,尤其是那些带有音频的视频。
  • 避免制作哈利波特绘画风格的视频,让人们在背景中慢慢移动。你不想分散用户的注意力蠕变。

网格布局

在43%的取样接口中使用

在我们的样本中,我们发现43%的界面使用网格布局来组织内容.虽然这个百分比表明它是极简主义设计师中流行的设计模式,但似乎网格布局在他们的设计中并不普遍。

当在极简主义UI设计中使用网格布局时,通常有两个原因:

  1. 网格是一种不添加任何视觉元素而线性组织页面上同质内容的有效方法;和
  2. 网格在设计时特别有用响应性网站-另一个独立于极简主义但经常与极简主义共存的趋势。
红辣椒
平面设计机构Paprika将其项目组织在一个网格中,但没有响应。
海唱组合
Sea Chant摄影工作室的极简主义作品集在桌面屏幕宽度的网格中组织照片。
海唱组合
在400px宽,海吟组合减少到一个单一的列的内容,并删除所有的悬停效果。

圆形图形元素

16%的取样接口使用

一些设计专家建议圆形和圆形的图形元素可以是极简主义的一个组成部分,但我们只发现16%我们的样品使用它们。它们似乎更像是一种时尚。

手势理论
Gesture Theory的主页在其极简主义设计中使用了多个圆形元素。

隐藏的全球导航

13%的取样接口使用

目前许多网站在桌面演示中使用了严重减少的全局导航元素,比如现在臭名昭著的汉堡包菜单。这有时是不完整的移动优先设计策略的结果,没有考虑到需求和额外的东西桌面用户可用的屏幕空间,但它也可能来自于过分热心的极简主义。隐藏不常访问的项目可能对你的目标有意义,但是确保您没有隐藏对您希望用户执行的任务至关重要的工具或链接.如果你的网站有,要特别小心大量的内容或类别

视觉士兵组合
设计机构Visual Soliders的桌面组合网站在汉堡包菜单下使用了一个隐藏的全局导航。
视觉士兵组合
这些隐藏在覆盖层中的菜单项本可以让全局可见,但可能是隐藏的,以实现这种超极简主义的效果。

极简接口的常见特征

我们对112个网站的分析显示如下定义特征对于一个极简主义网站:

  • 扁平的而不是拟形的图案和纹理
  • 使用有限的单色调色板
  • 严格限制特征和图形元素
  • 最大化负空间
  • 戏剧性地使用排版来传达层次或创造视觉趣味

其中一些特征在极简主义中几乎无处不在,而有些特征在极简主义界面中出现的频率略低;然而,在我们所分析的最低限度的网站中,至少有75%的网站具有所有的定义特征。

在我们的研究中,我们也确定了几个相关的这些趋势出现在不到75%的抽样地点。

  • 大背景图像或视频
  • 网格布局
  • 圆形图形元素
  • 隐藏的全球导航

结论

2000年的界面设计主要是混乱和压倒性的。多年来,我们一直反对这种“最大化主义”。功能膨胀和免费内容总是对用户不利

从理论上讲,极简主义应该让我们远离极大化,并产生流线型的内容和更高效的用户任务流程。然而,在实践中,我们已经看到极简主义转变为一种表面的视觉趋势,因为设计师复制流行的极简主义特征,而没有认真考虑他们是否支持自己的网站目标。

正如平面设计是对拟态主义的一种反应,极简主义也是对极简主义的一种反应。在这两种情况下,我们强烈建议采取平衡的方法.一个极简设计策略可以是一个强大的工具,但只有当它的框架是由您的用户的需求-为极简主义而极简主义本身并不能帮助用户。