Minimalism 极简主义
Minimalism governs what is ON the screen, not how it's drawn: strip the interface to the fewest elements that still do the job, then let generous negative space and one or two dramatic typographic moments carry the composition. NN/g's study of 112 minimalist sites found the recurring traits — flat-ish surfaces, limited or monochrome palettes, restricted element counts, negative space, and large type as the hero.
极简主义管的是屏幕上「有什么」,而不是「怎么画」:把界面削到仍能完成任务的最少元素,然后让慷慨的留白和一两处戏剧性的排版时刻撑起整个构图。NN/g 研究了 112 个极简网站,归纳出反复出现的特征——偏扁平的表面、有限或单色的配色、受控的元素数量、留白,以及作为主角的大字号。
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 可以扁平但拥挤,也可以在保留深度和阴影的同时是极简的。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
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.
空旷是刻意且慷慨的——内容浮在空气里,正是一个东西周围的空间让它显得重要。
-
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.
屏幕上的东西很少,而且每个都凭本事留下:一个导航、一条信息、一个操作——装饰是被删掉的,不是被重新设计的。
-
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.
最多一两个色相,常常只有黑白灰加一个强调色——颜色上的克制本身就是克制的一部分。
-
Dramatic typography戏剧性的排版 typography defining定义特征
With imagery and ornament gone, type goes big: an oversized headline is usually the loudest element on the page.
图像和装饰都没了,字体就往大了做:一个超大的标题通常是页面上最响的元素。
-
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.
大多数极简网站渲染得扁平,但阴影和深度是允许的——极简约束的是「展示什么」,不是「怎么打光」。
-
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最容易混淆:扁平设计
Minimalism极简主义
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 年。