Minimalism 极简主义

Scope: Minimalism and Flat Design are different axes: flat governs rendering, minimalism governs content, features, and layout. A UI can be flat but crowded, or minimalist while still using depth and shadow.

范围:极简主义和扁平设计是两个不同的轴:扁平管渲染,极简管内容、功能和布局。一个 UI 可以扁平但拥挤,也可以在保留深度和阴影的同时是极简的。

Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“the page with almost nothing on it”「页面上几乎啥都没有」“huge empty space and one button”「一大片空白,就放一个按钮」“giant headline and tons of white space”「超大标题配一大堆留白」“the apple style page with one product and nothing else”「苹果那种页面,一个产品之外什么都没有」“a website that is basically just text and air”「一个基本上只有文字和空气的网站」“everything unnecessary removed until only the message is left”「没用的全删掉,删到只剩想传达的那句话」

Full style DNA完整风格 DNA

  1. Negative space as material留白即材料 layout defining定义特征

    Emptiness is deliberate and generous — content floats in air, and the space around a thing is what makes it matter.

    空旷是刻意且慷慨的——内容浮在空气里,正是一个东西周围的空间让它显得重要。

  2. Restricted element count受控的元素数量 layout defining定义特征

    Few things on screen, and every one earns its place: one nav, one message, one action — decoration is deleted, not restyled.

    屏幕上的东西很少,而且每个都凭本事留下:一个导航、一条信息、一个操作——装饰是被删掉的,不是被重新设计的。

  3. Limited or monochrome palette有限或单色的配色 color defining定义特征

    One or two hues at most, often just black/white/grey with a single accent — color restraint is part of the restraint.

    最多一两个色相,常常只有黑白灰加一个强调色——颜色上的克制本身就是克制的一部分。

  4. Dramatic typography戏剧性的排版 typography defining定义特征

    With imagery and ornament gone, type goes big: an oversized headline is usually the loudest element on the page.

    图像和装饰都没了,字体就往大了做:一个超大的标题通常是页面上最响的元素。

  5. Rendering is free渲染方式随意 depth variable可变特征

    Most minimalist sites render flat, but shadow and depth are allowed — minimalism constrains WHAT is shown, not HOW it's lit.

    大多数极简网站渲染得扁平,但阴影和深度是允许的——极简约束的是「展示什么」,不是「怎么打光」。

  6. Crowding and ornament拥挤与装饰 layout avoid避免

    A second competing message, decorative flourishes, or a dense widget wall breaks the style regardless of how flat it looks.

    再塞一条抢戏的信息、加装饰性的花哨元素或砌一堵密集的组件墙,无论看起来多扁平都会破坏这种风格。

Often confused with: Flat Design最容易混淆:扁平设计

Midnight Drive
Neon Coast
1:123:48

Minimalism极简主义

Midnight Drive
Neon Coast
1:123:48

Flat Design扁平设计

This is minimalism because the content itself is reduced — few elements, vast negative space, one dramatic headline — whatever the rendering.

这是极简主义,因为内容本身被削减了——元素很少、留白巨大、一个戏剧性的标题——无论渲染方式如何。

It would be merely Flat Design if the screen filled up with content again and only the unshaded 2D rendering remained.

如果屏幕又被内容填满,只剩下没有明暗的 2D 渲染,那就只是扁平设计了。

In code — optional starting points代码写法 —— 可选起点

A narrow measure floating in deliberate emptiness

max-width: 34rem; margin-inline: auto; padding-block: clamp(4rem, 18vh, 10rem);

The dramatic headline as the composition's hero

font-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: -0.03em; line-height: 1.05;

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Create the surface using minimalism. Defining signals: the fewest elements that still do the job — one navigation, one message, one primary action, decoration deleted; generous negative space around everything (think 40 to 60 percent of the viewport empty); a limited palette — near-monochrome with at most one accent color; one dramatic typographic moment, an oversized headline that is the loudest thing on screen. Rendering is flexible — flat fills or subtle shadows both fit. Do not confuse this with flat design: minimalism constrains content and layout, not rendering — if you add content back until the page is busy, it stops being minimalist no matter how flat it is. Preserve discoverability: core actions must stay visible, never hidden behind mystery-meat icons to keep the page empty, and text keeps 4.5:1 contrast even in grey-on-white palettes.

用极简主义创建这个界面。决定性特征:仍能完成任务的最少元素——一个导航、一条信息、一个主操作,装饰全部删掉;万物周围都有慷慨的留白(视口要有 40% 到 60% 是空的);配色有限——接近单色,最多一个强调色;一处戏剧性的排版时刻,一个超大标题是屏幕上最响的东西。渲染方式灵活——扁平填充或微妙的阴影都可以。不要和扁平设计搞混:极简约束的是内容和布局,不是渲染——如果你把内容加回去加到页面变忙,那不管多扁平都不是极简了。保住可发现性:核心操作必须保持可见,绝不能为了让页面空而把它们藏在看不懂的「神秘肉」图标后面;即使是灰配白的配色,文本也要保持 4.5:1 对比度。

Accessibility & misuse可访问性与误用

Light-grey-on-white is the classic minimalist contrast failure — measure text at 4.5:1, muted palettes included.

浅灰配白是极简主义最经典的对比度翻车——文本一律按 4.5:1 量,低饱和配色也不例外。

Don't purge affordances along with the decoration: hiding navigation or labels to preserve emptiness trades clutter for mystery.

删装饰时别把可供性也一起删了:为了保住空旷而藏起导航或标签,是用「看不懂」换「不杂乱」。

Huge display type needs responsive clamping — a 96px headline that fits a desktop can wrap into an unreadable wall on a phone.

巨大的展示字号需要响应式钳制——在桌面端正好的 96px 标题,到手机上可能折行成一堵没法读的墙。

Origin起源

The reduction ethos of mid-century movements (Bauhaus, Swiss typography, 'less is more') applied to interfaces; on the web it became the dominant 'serious brand' register through the 2010s, with Apple's product pages as the most-copied specimen. NN/g's definitional study is from 2015.

把世纪中叶各流派的削减精神(包豪斯、瑞士排版、「少即是多」)应用到界面上;在 Web 上,它在整个 2010 年代成为「正经品牌」的主流腔调,苹果的产品页是被抄得最多的样本。NN/g 的定义性研究出自 2015 年。

See also相关词条