作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
卡梅伦·查普曼的头像

卡梅伦查普曼

卡梅隆有设计背景,是两本网页设计书籍的作者:《欧博体育app下载》和《欧博体育app下载》.

分享

极简主义 网页设计 与其说是一种特定的设计美学,不如说是一套设计原则或指导方针. 在实践中, 遵循这些原则的结果是一个简单的网站设计,只使用最基本的元素来达到访问者的期望结果.

伴随着无处不在的“少即是多”的概念,这些原则包括使用有限的调色板和负空间等技术.

少即是多与最小的网页设计

“少即是多”可能是最常听到的极简主义格言之一, 无论是谈论网页设计还是其他形式的极简主义. 但在极简主义网页设计的背景下,这到底意味着什么呢? 简单的设计如何在网站上表现出来?

有时候,通过首先看看什么是极简主义UI设计,更容易弄清楚什么是极简主义UI设计 极简主义. 这里有一个极端的例子:

与简单的网站设计相反.

而凌氏汽车的网站显然非常成功, 它定期列出现存设计最差的网站. 只有 这么多 发生了. 任何人看到它都能立刻知道它是 极简主义.

然而,有很多精心设计的网站也不是极简主义的. 以这个为例:

拼贴风格和纹理背景是流行的网页设计趋势.

这个网站设计得很漂亮, 但是在动画之间, 纹理背景, 拼贴元素, 和排版, 这绝对不是极简主义. 这并不一定是任何特定的元素单独使它不符合极简主义网页设计的定义-它更多的是所有这些元素的组合.

极简设计 专注于用更少的东西创造引人注目的设计. 实现这一点的一个关键是不断删除元素,直到设计崩溃. 在这种情况下,“中断”应该被解释为不再满足用户的需求和愿望.

最小的网页设计让内容脱颖而出

支持极简主义网页设计的最令人信服的论点之一是,它让内容真正脱颖而出. 这就是为什么一个简单的网站设计是许多艺术家的首选, 摄影师, 甚至有些作家. 他们希望自己的创意内容成为关注的焦点, 而不是别人创造的设计元素.

最小的网页设计仍然可以在视觉上吸引人.

以伊恩·琼斯的网站为例. 他从事平面和数字设计,以及摄影. 他的网站把重点放在了内容上, 同时还结合了一些有趣的设计元素(如网格背景)和微妙的动画. 最终的结果是一个极简主义的UI设计,使他的工作发光.

简单的网站设计例子.

编剧兼电影导演阿特米·奥尔图斯的网站是另一个极简主义设计的惊人例子,他把重点放在了自己的工作上. slideshow元素创造了大量的视觉趣味,而不会造成任何设计混乱.

UI和UX设计的极简例子.

Cooper Perkins的网站是另一个极简主义UI设计的漂亮例子,它使用动画来创造兴趣而不混乱.

每个UI和UX决策都必须是有意的

极简设计, 在它的表面, 看起来它可能比看起来更复杂的设计风格更容易掌握. 事实上,通常情况正好相反.

极简主义设计把每一个设计元素都放在前面和中心. 每个选择 网页设计师 make是为每一个参观者展出的. 虽然视觉上更复杂的设计可能会让小错误或失误几乎看不见(这对许多初级设计师来说是一个受欢迎的好处)。, 简单的网站设计不能提供相同的覆盖率.

小细节是极简UI设计的重要组成部分.

叙述者WordPress主题是一个很好的例子,一个网站把很多想法放在小元素上,把所有的东西联系在一起. 不添加视觉上的杂乱,线条, 箭头符号, 不同元素的简单灰色背景给网站带来了极简主义设计中有时缺乏的润色.

一个超级极简网页用户体验设计的例子.

Inlay的网站乍一看似乎极简主义. 滚动显示动画和更复杂的屏幕, 但整体上极简主义的氛围贯穿始终.

极简UI设计可以扩展到web应用程序.

应用程序也可以从中受益 极简设计. 这款文字计数器应用程序的简单设计使得它很容易看到它提供的所有功能,而不需要更正式的登录. 很容易看出,每个设计决策都是有意为之,强调可用性.

利用负空间

也许一个好的极简主义网页设计最重要的元素之一就是使用负空间. 极简主义设计就是关于什么的 不是 这就是事实.

负空间, 也被称为“留白”,是设计和/或内容元素周围的空白或开放空间,赋予它们定义. 授予, 有时候这个空间并不总是空的, 并且可以填充背景纹理, 模式, 或颜色. 但它仍然是一个空间,没有像网站的其他元素一样被“使用”.

负空间是极简主义设计的重要组成部分.

排品牌工作室在标题字体周围使用了充足的负空间, 使它脱颖而出,立即吸引眼球.

极简主义网站界面设计.

Nohau的标题也是类似的,在字体周围有大量的空白.

负空间还可以用于在设计中创建有趣的形状或图像,这些形状或图像可能不会立即显而易见.

极简设计充分利用了负空间.

这个标志来自布朗克斯动物园,用长颈鹿腿之间的空间来玩耍. 它们是摩天大楼的剪影.

用摄影、排版和对比创造戏剧

仅仅因为设计简单或极简主义并不意味着它也不能引人注目. 在极简主义设计中创造戏剧的一些最常见的方法包括使用摄影, 排版, 对比(在颜色和设计元素之间).

大的照片, 包括照片背景, 在设计中添加大量视觉趣味的好方法是什么, 如果做得好,绝对可以符合极简主义的设计美学. 为了达到最大的效果,最好避免拍摄非常繁忙的照片. 极简主义设计的照片本身至少应该是极简主义的(包括简单的调色板和使用负空间)。.

大图片为简单的网页设计增添了戏剧性.

Wildsmith Skin网站在登陆屏幕上使用了一张大照片, 还有其他引人注目的排版. 它立即吸引眼球,而拆分照片是一种不太常见的选择.

拆分照片和混合衬线字体和无衬线字体是重要的UI趋势.

Iglucraft是另一个使用大照片的网站, 不仅仅是在主着陆屏幕上, 但是在整个网站上. 过渡动画被考虑并添加到整体用户体验中.

除了大型摄影,大型插图和视频也可以用在极简主义 网页设计.

动画和插图为简单的网站设计增添了趣味.

In Focus网站使用动画、插图和视频作为背景. 虽然这个网站不是很直观,但探索和使用起来很有趣.

排版是另一个极简主义设计师正在做一些非常酷的事情的领域.

大字体设置了极简主义的UI设计.

以艺术和文化非营利组织KANEKO的主要字体为例. 图案和颜色叠加在标题上,就像许多照片或插图一样,在视觉上刺激,但方式完全不同.

网站设计趋势:视频背景.

生产葡萄牙在大型视频背景上使用固体和线条排版的混合, 使用两种技巧可以增加很多戏剧性.

好的网站用户体验:一个箭头提示如何使用网站.

Kobu的网站不仅在每个屏幕上使用的颜色之间有很好的对比, 而且在各种屏幕之间使用贯穿始终. 它将每个项目划分为自己独特的特征.

排版的层次结构

因为每一个决定都必须经过极简主义者的深思熟虑 网页设计所以,花时间创造一个清晰的感觉是很重要的 排版的层次结构. 当字体必须在没有其他设计元素的情况下区分不同类型的内容时,排版层次结构尤为重要.

例如, 当一个人访问一个极简主义的网站, 他们应该能够辨别标题, 标题, body, 马上进行导航, 一目了然, 不需要阅读内容. 实现这一点的最佳方法是通过这些元素之间的明显对比.

排版层次在最小网页设计中很重要.

InVision的内部设计博客使用清晰的排版层次结构来区分标题, 标题, 和主体复制.

而布局和技术,如为不同的排版元素使用不同的颜色,要实现这一目标还有很长的路要走, 通过大小来描绘不同的元素, 重量, 风格至少同样重要.

极简网页设计:排版

Stills WordPress主题使用清晰的排版层次结构来区分标题和正文.

即使是最小的设计通常也应该包括至少 三个层次 排版层次结构:标题(也可用作标题), 副标题, 以及正文或文本副本. 通常情况下,有多个副标题级别,但这绝不是必需的. 有些网站可以使用两个级别(有些甚至选择只使用一个级别), 尽管在大多数情况下不建议这么做).

保持导航简单

许多极简主义网站失败的一个方面是创建用户友好的导航. 这在拥有大量页面的复杂网站上尤其常见.

顶部导航栏仍然是极简主义UI设计的支柱. 简单的文本链接,有时带有子菜单,是最常见的. 排版、颜色、形状等 设计元素 能适应网站的整体外观和感觉吗. 但还有其他选择.

在极简主义网页设计中发现的另外两个非常常见的导航设计模式是汉堡包和烤肉串菜单. 汉堡包菜单由三到四条水平线组成(有时使用竖线), 但想法是一样的), 而烤肉串菜单上只有三个点.

尽管我已经 充满可用性问题, 臭名昭著的汉堡菜单——它已经成为隐藏导航的通用快捷方式——因为它减少了视觉上的混乱而被保留下来.

UI趋势:汉堡包菜单

Nilton服装使用三条偏移线来创建他们的汉堡包菜单, 这一选择已经成为三种匹配线的流行选择.

网页设计趋势:汉堡包菜单

在RFTB的汉堡菜单后面放置彩色背景使其脱颖而出.

最常见的, 汉堡菜单将用于主导航, 而烤肉串菜单可能用于 设置 菜单或其他子菜单类型. 虽然两者都成为更常见的导航元素, 一些设计师仍然会添加文字来表明汉堡是一个菜单. 如果网站的目标用户不是精通技术的用户,这一点尤其有用.

极简主义调色板

有很多流派的思想,什么是一个 极简调色板. 许多极简主义网站只使用两种颜色. 其他人使用 三个,四个,或更多. 一个调色板本身不会成就或破坏一个极简主义的网页设计.

极简主义网页设计调色板.

Pittori di Cinema网站的主页使用三色调色板(光标是红色的), 背景为黄色,字体为黑色).

简单的网站设计调色板.

宙斯琼斯的网站包括多种颜色, 每个部分使用不同的互补色. 色块清晰地描绘了各个部分,同时保持了网站设计的极简主义.

极简的UI设计调色板.

Dot Lung的网站使用了充满活力的紫色、红色和白色调色板. 它创造了一种活力和现代感,同时保持了极简主义的整体配色方案.

双色调色板在极简网页设计中很常见.

Fllow的网站使用两种颜色的调色板,但背景颜色在不断变化. 这是一个独特的极简主义调色板.

有很多可能的方法来创建一个简单的网站设计的调色板. 但像所有元素的极简主义网页设计, 每个选择都必须是有意的, 并改善整体用户体验.

结论

极简主义设计的最大挑战是设计师没有什么可隐藏的. 设计的每个元素都必须证明其价值. 每个元素都必须慎重选择, 并完美地执行,以使设计本身脱颖而出.

网页设计师 那些认为极简主义设计比其他设计风格更容易的人,经常会对付出的努力感到惊讶, time, 和技能需要创建一个最小的设计网站,可以实现其目标方面 用户行为 和体验,同时保持真正的极简主义美学.

了解基本知识

  • 负空间是什么意思?

    负空间, 也被称为留白, 设计和/或内容元素周围的空白或开放空间是否赋予它们定义. 授予, 这个空间可以用背景图案或颜色填充, 但它仍然是空间,没有像网站的其他元素一样被使用.

  • 成为一名网页设计师意味着什么?

    网页设计师创建UI和UX设计. 网页设计师既有创造性又有技术倾向,他们使用这两种技能来设计或重新设计网站. 它结合了页面布局、图形设计,有时还包括内容制作技巧.

  • 你需要什么技能才能成为一名网页设计师?

    网页设计师需要各种创意和技术技能来创建UI和UX设计. 这些技能包括用户研究, 确定技术和用户需求, 创建网页布局, 编码, 以及平面设计.

聘请Toptal这方面的专家.
现在雇佣

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.