我们会发现,网页上充斥着各种涂鸦状的效果。粗线条等效果。
最近发现京东的设计师也开始尝试这样的风格。看下方的专题:
这就是我们今天想讲的风格,但是首先,我们要先回顾一下,什么是粗野主义?
粗野主义是 1950 年代的建筑趋势,它放弃了所有的装饰,并创造了由混凝土制成的简单粗暴的建筑。建筑师们表明他们对现状感到厌烦并尝试不同的东西。这感觉与当前对 UI 趋势接管设计非常相似。
那在网络上如何呈现呢?
以前在图形设计中存在过某些形式的粗野主义,但它们往往打破了大多数典型的布局规则,巨大的文本块经常会出现在视野之外。它在海报设计/图形设计中最流行,但早在 90 年代后期就存在一些在网络上使用它的尝试。
新野蛮主义摒弃了大部分上面的内容,将传统布局概念与超高对比度、纯色、经常故意冲突的颜色和更简单但古怪的排版相结合。
那么,如何设计“新粗野主义”风格呢?
001.对比
让我们从超高对比度开始。新野蛮主义不怕将纯黑色 (#000000) 与其他颜色融合在一起。这是大多数其他设计风格都试图避免的做法,因为在保持可访问的对比度的同时,我们不想给用户造成眼睛疲劳。
在大多数当前的 UI 样式中,很流行将黑色“注入”一点强调色——就像上面示例中的一点点红色一样。它有助于颜色更好地与其他色调联系起来,同时避免过高的对比度和眼睛疲劳。
002.阴影
代替柔和的阴影,它适用于卡片下方的硬黑色矩形。它不是典型的几乎看不见的边界,而是厚、暗和明确的轮廓。
虽然这对于可访问性来说非常好,但它也为我们的大脑添加了更多要处理的对象。虽然还没有在一些用户身上进行测试,但相信这些设计让我们的大脑更加紧张。
大多数阴影或假 3d 对象使用等距视图。它实际上总是某种形式的 45° 角。
现代极简主义与新野蛮主义卡片——典型的阴影
003.颜色
颜色正朝着大多数其他风格会认为丑陋或冲突的方向发展,例如将红色与蓝色或绿色混合在一起。然而,主要区别在于,现在这些颜色也被去饱和了。但是,它们同样对比鲜明。
颜色很少超过 80% 的饱和度
每种情况下都有一种原色——作为品牌颜色,通常有几十种次要颜色或强调色。它们通常伴随网站或应用程序的特定部分——如颜色编码类别。
004. 故意做的丑陋
新粗野主义经常使用以默认演示软件方式设置样式的形状——就像你在这个 Figma 示例中看到的那样。
此屏幕上可见三张卡片,它们故意不一致。更引人注目的是,最典型的外观卡片的按钮也略微错位。Post 按钮中的文本离左边太远了,而且按钮本身也被放置在与右边不同的距离,而不是与顶部的距离。
这种造型方式使丑陋的东西正常化,让初学者更容易认知——他们会想“我可以自己做!” 我相信这就是一些品牌采用这种风格的原因。它没有威胁性,任何人都可以做到。
005.排版
排版在这种风格中起着非常重要的作用,但它的表现方式要保守得多。虽然我们两个示例中的字体都有点古怪或时髦,而且不像现代简约中典型的“酷”字体那样简约,但它们的呈现方式是为了最大限度地提高可读性。
006.插图
插图风格通常是带有描边的,背景被抠出来的人物。加上鲜艳的颜色,具有高对比度和清晰的边缘。线条则有粗有细。
把握好上面这些点,我们也可以做出这种风格啦。不过这种风格还是有点冒险的,并不是所有的场合都适用。
接下来咱们放出来一些新粗野主义的设计,一同感受和欣赏。