极简主义网站:你需要知道的一切

极简主义网站可以帮助用户更快地思考。

在用户变得越来越不耐烦且技术普遍变变得越来越倦怠的时代,冷静和清晰的设计对于任何互联网时代业务的成功都至关重要。

本文主要从以下几个方面来定义极简主义网站设计并向你和你的用户解释其优势所在:

  • 极简主义设计的美学标志
  • 极简主义的UI优势
  • 极简主义设计如何防止开发技术倦怠,以及为什么这对你的成功至关重要

视觉美学

当我们想到极简主义时,我们自然而然地会联想到与之互动的极简主义的各个方面。

例如,苹果美学无需近观就可以很容易地辨认出来,它是科技界的主要潮流引领者。尽管它们的设计相对简单,但看上去总是非常美观。

究其原因所在,是因为它们所崇尚的视觉风格是极简抽象艺术化的。

苹果的极简主义视觉美感

下面让我们探究一下它的真正含义,促成极简抽象视觉美感的各种因素,以及为什么这些因素能够如此有效。

白色还是黑色

白色的中性特征不仅容易入眼,而且也很容易记住。因为白色没有任何代表意义,所以用户不会因为它而分散注意力或是被迫思考该颜色具体要表达的意思。

白色背景可以突出显示一些重要的元素,比如号召性语句或者有意义的文本,同时确保它们之间的最佳色彩对比。它的亮度与对比色相匹配,是实现可访问性的绝佳工具。

Slack的白色背景使文字和按钮更加生动

黑色是比白色更“严肃”的替代选择。它仍然传达了一种极简主义,以内容为中心的用户界面,同时还传达了一种更“合适”的感觉。

黑色是全新的白色吗?

无衬线字体排版

无衬线(Sans-serif)字体看起来比衬线(serif)字体更清晰,这就是为什么它们经常被更大企业“委以重任”。结合无衬线字体排版,大字体和/或粗体字体,将产生最大的影响和情感共鸣。如果我们同时还能明智地使用词语,它们可能成为网站最迷人的地方。这就是一个“少即是多(less is more)”的最佳案例。

微软采取“少即是多”的方法来实现效果最大化

大胆的颜色

虽然当用作背景色本身时,大胆的色彩看起来几乎与白色或黑色的效果一样微小,但它们会与白色和黑色背景形成鲜明对比,同时还传达了更多的情感和意义。

决定创业可能是一个情绪化的决定。Shopify网站通过使用出色的图像和美丽大胆的色彩强化了这一事实。

渐变是使用大胆色彩而不会使用户不堪重负的绝佳解决方案,尤其是在与无衬线字体配对的时候。下图是一个来自 Dribbble 的示例,向我们展示了极简主义如何不同程度地存在,以及极简主义网站如何有多种不同的形状和大小。

情绪化,但简单。

[图片上传失败...(image-1ffa0f-1564026803466)]

扁平化设计

扁平化设计是2012年左右出现的一种网页设计趋势。尽管在NNGroup的文章「突出严重的可用性问题」中指出,由于扁平化设计将极简主义概念应用于比如按钮这样的交互式元素上,使它们看起来好像根本不具备交互性。但无可否认,扁平化设计仍然是视觉上非常吸引人的极简主义设计。

当然,这也引发了“扁平化 2.0”的出现,使用圆角和阴影为这些交互元素添加更多深度,而不会使UI变得混乱。

圆角是有效的,因为它们类似于现实生活中的真实按钮。阴影更具有相关性,因为它们为按钮提供了3D元素,将它们与设计分离,并更容易联想到真实的元素。

Buffer网站,简单且扁平化,但是又不为过

如果我们无法明确表达交互式点击目标是具备交互性的,那么我们的设计就变得不可用,因为用户需要自己判断哪些内容可点击以及哪些内容不可点击。这种复杂的思维与极简主义应该实现的一切相悖。

正如史蒂夫·克鲁克(Steve Krug)那本著名的设计和可用性书籍的名称一样,永远都要“别让我思考(Don’t make me think)”。

极简主义的视觉美学肯定会使我们的设计更清晰,但在设计UI时我们不应该做过分的处理。

首先关注清晰度及可点击性,其次再关注视觉吸引力。

设计极简化UI和内容

为极简主义网站设计UI和内容需要关注以下四点:

  • 清晰度。信息有多清楚?
  • 可查找性。用户如何轻松地找到东西吗?
  • 可选择性。用户可以轻松地做出决策吗?
  • 可扫描性。用户可以轻松地扫描文档吗?
InVision Studio主页清晰整洁,但如果需要,还可提供其他信息。

避免视觉混乱

经验法则:如果某些内容有用,但不是对大多数用户或用户当前上下文环境内有用,请隐藏它。

隐藏某些东西以减少认知负荷的一个例子是,将一个不太重要的导航项目移动到画布外的菜单中,仅在实际请求时显示。

这背后的想法是:为什么强迫用户在他们可能甚至不需要看到或使用它的时候要去考虑它的含义?

我们还需要考虑这样一个事实:如果信息太多,用户将无法在关键时刻回忆起重要信息。

「认知负荷会影响我们的记忆」一文中指出,当被太多物体或选择所淹没时,我们会瘫痪,不知道去哪里。

使用视觉层次来减少认知负荷

视觉层次结构应指示每个元素的重要性并影响其查看顺序。这意味着我们需要在视觉上确定某些元素的优先级,以帮助用户准确理解正在发生的事情。例如,想象一个产品,使用大于产品标题的字体大小来显示价格,用户可能会知道该产品需要花费10美元,但要混淆几秒钟,因为他们还不知道产品是什么。当事实证明他们甚至根本不关心该产品时,情况就更糟了,因为他们现在处理的信息对他们来说毫无用处。

这听起来像一个小小的警告,但每个微小设计缺陷的认知负荷全都加起来,就可能导致用户分心了。

为更加简化的体验提供更少的选择

正如希克斯定律(Hicks’ law)所述,选项越多,响应时间越慢。当选项太多时,用户可能会遇到决策瘫痪(decision paralysis),也就是说由于认知超负荷无法进行选择。

例如,耐克的网站旨在一次只向您展示部分产品。

[图片上传失败...(image-df161a-1564026803466)]

Atoms网站是一个减少选项数量极好的例子。主导航只包含四个导航项,不太重要的导航项移入了网站页脚。 一旦用户选择“Find Your Fit”选项,用户就会看到一个会话,一次只需要做一个决定,就可以选择正确的产品。

减少选项数量,使决策更容易做出

设计功能混乱

与视觉混乱非常相似,功能混乱也会增加用户的认知负荷,并且也是导致转换的显着减少的因素所在。

电子商务就是一个很好的例子,34%的废弃结帐是由于用户需要被迫创建一个帐户,从而导致巨大的经济损失。

[图片上传失败...(image-fcc771-1564026803466)]

假设,这并不意味着我们需要在这种情况下强制访客结账,但我们可以将创建帐户作为一个可选功能。如果我们真的想最大限度地减少用户的认知负荷,我们可以要求用户在结账后创建一个帐户,以便用户不会因为创建帐户而分心!

减少摩擦,实现更多转换

创建用户流程图是在进入原型设计之前减少网站摩擦的绝佳方法。

这样,如果由于功能混乱而存在任何摩擦时刻,我们就可以重新考虑用户的旅程,转而设计更流畅的体验。

防止用户的技术倦怠

我们始终生活在感性的世界里。包含它们的应用程序和网站以及各种设备无处不在。新技术的加速发展意味着我们的日常所需 —— 手表、厨具、背包等 —— 正在以数字方式注入新技术和新功能,并让我们的生活更美好。

但事实是,从长远来看,只有少数人真正做到了。

技术越多,问题越多。

人无完人,我们只能处理一定量的认知负荷,但几乎我们积累的所有东西都会导致这种负担。这不仅来源于我们拥有的产品,还来源于它们所需的设置和维护,以及操作它们所需的知识和信息。

假设我们确实在使用某款产品,但由于缺乏时间或动力,你是否曾在几个月内停止了该产品的年度订阅?

社交媒体有点不同。许多用户沉迷于此,许多人每天至少花两小时专注于社交媒体。

虽然我们会说一天中没有足够的时间来使用,阅读,观察或以其他方式来消费我们想要的所有东西,但真正的困境是这对我们的心理健康会产生长期影响。

它让我们感到负担沉重。

负担是压力和义务的混合。压力,因为我们不允许让自己永远放松,用某种形式的技术来填补每一个醒着的时刻。义务,因为许多产品不道德地通过游戏化和锁定合同来留住用户。然后还有就是我们爱讨价还价以及对下一个最好的东西产生热爱。

对技术过量的诱惑无处不在。

负担对网站用户的影响

当用户感到负担时,他们可能会感受到两件事:

  • 不耐烦。他们只愿意投入少量的时间和精力与网站互动,如果他们遇到一个很小的障碍,他们可能会放弃它。
  • 沮丧。如果用户对各种选项感到不知所措,他们将不太可能转换,甚至更有可能尝试竞争对手的网站或是完全放弃他们的信息搜索。

简而言之,当用户访问某个网站时,他们的不耐烦和注意力的减少很可能导致他们过早退出。遗憾的是,对于今天的大多数用户来说,这种行为再正常不过了。

极简主义设计如何帮助用户?

作为数字化设计师,我们能够减少产品的认知负荷,减少用户的压力,焦虑和挫败感。

想让我们的网站可以在数字世界中成为一股清流,不断引起注意,诀窍就是设计极简主义网站。这些网站对用户已经沉重的认知负荷是一种释放。

极简主义网站不仅仅是视觉美学。极简主义设计也是一个过程,需要尽可能清晰,极可能简化。

(编译完)


英文原文:地址
原文作者:Daniel Schwarz
编译作者:Linkedin / 微博

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。

image
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容