简单是关键–探索最小的Web设计 _Web

本文概述

最少的网页设计, 少即是多
利用负空间
通过摄影, 版式和对比度创建戏剧
保持导航简单
极简调色板
总结

极简主义的网页设计并不仅仅是一组特定的设计美学, 而是一系列设计原则或准则。在实践中, 遵循这些原则将导致一个简单的网站设计, 该网站仅使用最基本的元素来实现访问者所需的结果。
除了普遍存在的” 少即是多” 的概念外, 这些原理还包括使用有限的调色板和负空间等技术。
最少的网页设计, 少即是多无论是谈论网页设计还是任何其他形式的极简主义, “ 少即是多” 可能是最常听到的极简主义座右铭之一。但是, 在简约的Web设计中它真正意味着什么？
有时, 首先查看不简约的设计会更容易找出最简约的设计。这是一个极端的例子：

文章图片
尽管Ling’ s Cars网站显然取得了令人难以置信的成功, 但它会定期列出现有设计最糟糕的网站。发生了很多事情。任何人都可以查看它, 立即知道它不是极简主义。
尽管如此, 仍有许多设计良好的站点也不是极简主义的。以这个为例：

文章图片
这个网站的设计精美, 但是在动画, 带纹理的背景, 拼贴元素和版式之间, 绝对不是极简主义。不一定有任何一个单独的元素会使其不符合简约的Web设计定义, 而是所有这些元素的结合。
极简主义设计着眼于创造引人入胜的设计, 减少了工作量。实现这一目标的一个关键是不断删除元素, 直到设计中断。在这种情况下, “ 中断” 应解释为不再满足用户的需求。
最小的Web设计使内容脱颖而出
支持极简主义网站设计的最引人注目的论点之一是, 它可以使内容真正脱颖而出。这就是为什么简单的网站设计是众多艺术家, 摄影师甚至某些作家的首选。他们希望自己的创意内容成为关注的焦点, 而不是别人创造的设计元素。

文章图片
以Ian Jones的网站为例。他从事图形和数字设计以及摄影。他的网站将重点直接放在内容上, 同时还结合了一些有趣的设计元素(例如网格背景)和微妙的动画。最终结果是一个极简的UI设计, 使他的作品脱颖而出。

文章图片
编剧兼电影导演Artemy Ortus的网站是极简主义设计的另一个令人震惊的例子, 它专注于他的作品。 slideshow元素会产生大量的视觉趣味, 而不会造成任何设计混乱。

文章图片
库珀·珀金斯(Cooper Perkins)的网站是极简主义设计的另一个美丽示例, 该极简主义设计使用动画来创造趣味而又不会造成混乱。
每个UI和UX决策都必须是有意的
从表面上看, 极简主义设计似乎比看起来更复杂的设计风格更容易掌握。实际上, 通常相反。
极简设计将每个设计元素放在首位和居中。网页设计师做出的每个选择都将显示给每个访问者。外观复杂的设计可能会犯一些小错误或失误, 实际上是看不见的(这对许多初学者而言是可喜的收益), 而简单的网站设计却无法提供相同的覆盖范围。

文章图片
讲述人WordPress主题是该网站的一个很好的例子, 该网站在将所有内容联系在一起的小元素中投入了大量思想。在不增加视觉混乱的情况下, 线条, 箭头符号和用于不同元素的简单灰色背景为该站点提供了抛光, 而有时这是简约设计所缺乏的。

文章图片
乍看之下, Inlay的网站看起来极简。滚动显示动画和更复杂的屏幕, 但是整体上始终保持极简主义氛围。

文章图片
应用程序还可以从简约设计中受益。这款Word Counter应用程序的简单设计使其可以轻松查看其提供的所有功能, 而无需进行正式的入门培训。可以很容易地说, 每个设计决策都是有意为之, 重点是可用性。
利用负空间良好的简约网页设计最重要的元素之一是负空间的使用。极简设计既要解决问题, 又要解决问题。
负空间, 也称为” 空白” , 是设计和/或内容元素周围的空白或开放空间, 可为其定义。当然, 有时此空间并不总是真正空的, 可能充满了背景纹理, 图案或颜色。但是, 仍然存在与网站其他元素相同的” 使用” 空间。

文章图片
Platoon Branding Studio在标题中的版式周围使用了足够的负空间, 使其脱颖而出并立即引起人们的注意。

文章图片
Nohau的标头与此类似, 其类型周围留有大量空白。
负空间还可以用于在设计中创建可能不是立即显而易见的有趣形状或图像。

文章图片
取自布朗克斯动物园(Bronx Zoo)的徽标, 以及长颈鹿腿之间的空间如何构成摩天大楼的轮廓。
通过摄影, 版式和对比度创建戏剧仅仅因为设计简单或极简主义并不意味着它也就不会具有戏剧性。在极简设计中创建戏剧的一些最常见方法包括使用摄影, 版式和对比度(无论是在颜色方面还是在设计元素之间)。
【简单是关键–探索最小的Web设计】大型照片, 包括照片背景, 是增加设计视觉视觉效果的好方法, 如果处理正确, 绝对可以满足极简设计的审美要求。为了产生最大的影响, 最好避免照片很忙。极简设计的照片本身至少应具有极简主义(包括简单的调色板和负片空间的使用)。

文章图片
Wildsmith Skin网站在其着陆屏幕上使用了一张大型照片, 以及其他醒目的字体。它立即引起了人们的注意, 而分割后的照片是不那么常见的选择。

文章图片
Iglucraft是一个使用大型照片的网站的另一个很好的例子, 不仅在主登陆屏幕上, 而且在整个网站上都使用大照片。考虑过渡动画, 并增加了整体用户体验。
除了大型摄影作品外, 大型插图和视频还可用于极简主义的网页设计中。

文章图片
In Focus网站在其背景中使用动画, 插图和视频。虽然该网站不是立即直观的, 但它的探索和使用非常有趣。
印刷术是极简主义设计师在做一些非常酷的事情的另一个领域。

文章图片
以艺术和文化非营利组织KANEKO的主要字体为例。标题中类型上的图案和颜色叠加效果与许多照片或插图在视觉上一样, 但是完全不同。

文章图片
制作葡萄牙在大型视频背景上混合使用实线和线条版式, 同时使用两种技术增加了戏剧性。

文章图片
Kobu的网站不仅在每个屏幕上使用的颜色之间具有良好的对比度, 而且在整个屏幕上使用的各个屏幕之间也具有良好的对比度。它将每个项目分开作为自己独特的功能。
印刷层次结构
由于每个决定都必须以简约的网页设计为准, 因此花时间创建清晰的印刷层次感很重要。当类型必须区分不同类型的内容而没有其他设计元素的太多帮助时, 印刷层次结构尤为重要。
例如, 当一个人访问一个极简主义的网站时, 他们应该能够一眼便能辨别出标题, 标题, 正文和导航, 而不必阅读内容。实现这些目标的最佳方法是在这些元素之间形成鲜明的对比。

文章图片
InVision的内部设计博客使用清晰的印刷层次结构来区分标题, 标题和正文。
虽然布局和技术(例如为不同的印刷元素使用不同的颜色)在实现该目标方面还有很长的路要走, 但通过大小, 重量和样式来描绘各种元素至少同样重要。

文章图片
Stills WordPress主题使用清晰的印刷层次结构来区分标题和正文。
即使是最小的设计, 通常也应至少包括三个印刷层次结构级别：标题(也可以用于标题), 副标题以及正文或文本副本。通常, 子标题级别有多个, 但这并不是必需的。有些网站放弃使用两个级别(有些甚至选择不使用一个级别, 尽管在大多数情况下不建议使用)。
保持导航简单许多极简主义网站崩溃的一个方面是创建用户友好的导航。这在页面很多的更复杂的站点上尤其常见。
顶部导航栏仍然是简约设计的支柱。简单的文本链接(有时带有子菜单)是最常见的。字体, 颜色, 形状和其他设计元素可以进行调整, 以适应网站的整体外观。但是还有其他选择。
极简网页设计中发现的其他两种非常常见的导航设计模式是汉堡包和烤肉串菜单。汉堡菜单由三或四条水平线组成(变化有时使用垂直线, 但思路是相同的), 而烤肉菜单由三点组成。
尽管饱受可用性问题困扰, 但臭名昭著的汉堡包菜单(已成为隐藏导航的通用快捷方式)仍然存在, 因为它可以减少视觉混乱。

文章图片
Nilton Clothing使用三条偏置线创建其汉堡菜单, 这一选择已成为三条匹配线的流行替代方法。

文章图片
在RFTB的汉堡包菜单后面放置彩色背景, 使其脱颖而出。
最常见的是, 汉堡菜单将用于主导航, 而烤肉串菜单可能被用于设置菜单或其他子菜单类型。尽管两者都已成为越来越普遍的导航元素, 但一些设计师仍在添加文本以指示汉堡包是菜单。如果网站不面向精通技术的用户, 则此功能特别有用。
极简调色板关于什么使极简主义的调色板有很多想法。很多极简主义网站仅使用两种颜色。其他人则使用三个, 四个或更多。仅靠调色板不会构成或破坏简约的网页设计。

文章图片
Pittori di Cinema网站的主页使用三色调色板(光标为红色, 而背景为黄色和黑色)。

文章图片
宙斯·琼斯(Zeus Jones)的网站包含多种颜色, 每个部分使用不同的补色。色块清楚地勾勒出各个部分, 同时保持简约。

文章图片
龙肺的网站使用了充满活力的紫色, 红色和白色调色板。它营造出一种活力和现代感, 同时保持极简的整体配色方案。

文章图片
Fllow的网站使用两种颜色的调色板, 但是背景颜色不断变化。这是极简风格的独特选择。
有很多可能的方法可以为简单的网站设计创建调色板。但是, 就像极简设计的所有元素一样, 每个选择都必须是有意的, 并要改善整体用户体验。
总结极简设计带来的最大挑战是设计师没有什么可躲藏的东西。设计的每个要素必须证明其价值。必须精心选择每个元素, 并完美实现它们, 以使设计本身脱颖而出。
极简设计比其他设计风格更容易实现的Web设计人员通常会惊讶于创建一种可以在保持用户真正行为和体验的同时保持真正极简主义美感的产品所需的工作量, 时间和技巧。
? ? ?
在srcmini设计博客上进一步阅读：