跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

极简主义

Minimalism

别名:极简风简约风格性冷淡风大量留白那种设计性冷淡设计MinimalMinimalist DesignLess is more

这是什么

以"少即是多"为准则的视觉语言:用大量留白、克制的黑白灰配色与有限字体层级 来凸显内容本身,删除一切装饰性元素,层级完全依靠空间、字重与疏密建立。 安静、克制、内容至上是它的气质。

开发规格

字体

衬线大标题 + 无衬线灰阶正文

色彩

米白 #FAFAF8 × 近黑 #161513,单一强调色

边框

无边框,或 1px #EDEDE9 细分隔线

阴影

几乎无阴影,层次靠灰度

间距

极大留白,宽松的 8pt 网格

动效

150ms 内只做颜色与透明度过渡,无位移

状态反馈

hover 只变颜色;focus 用黑色发丝可见外框;active 轻微加深;disabled 降到 40% 不透明;error 用单一红

风格演示

同一张页面,直接操作

立即体验进入专注设备系列,立即购买查看设备规格和款式;切换三条生活灵感,选择设备并查看本地购物结果,不创建订单。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 LUMO 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02完成上述 LUMO 操作后修改输入或撤销,检查结果与状态同步。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 内容为王的产品——阅读、写作、摄影、作品集
  • 想传达专业、克制、高端的品牌气质
  • 元素少而结构清晰的页面(官网首屏、详情页)

✕ 不适用场景

  • 信息密度高的后台与数据界面,过度留白牺牲效率
  • 需要情绪浓度与热闹感的营销、娱乐、节庆场景
  • 可用元素很少时容易显得"空而廉价",需极强排版功底兜底

常见形式

黑白极简

Monochrome Minimal

纯黑 白 灰三色,最锋利的版本

扁平极简

Flat Minimal

无阴影无渐变,靠留白与字重分层

暖调极简

Warm Minimal

米白与暖灰底色,日式 北欧的生活感

实现要点

whitespacefont-weightletter-spacingborder: 1px solidgrid

核心是排版与留白:建立 3 档以内的字号层级与克制的行高;配色收敛到黑 白 灰 外加至多一个强调色;边框只用 1px 发丝线或干脆用留白分隔;按钮以实心黑或 描边两种形态为主,禁用投影与渐变。先删到不能再删,再谈精致。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 LUMO 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。preview.brand 与共享 REFERENCE_BRANDS 保持一致;首屏结构、实际导航与素材以 ReferenceStyleScene 为准。

按 ReferenceStyleScene 与 reference-scenes.css 延续 LUMO:#fdfdfc 页底,主视觉保留白到浅灰的横向渐变、白色设备/石材照片及其桌面遮罩裁切。Georgia 衬线主标题使用现有 6.45cqw / .94 行高与紧字距,正文为灰阶无衬线;黑色胶囊 CTA 保留细微内高光。窄屏将照片改为文案下方的正常内容流,不删照片、不把所有区域强改为无渐变直角卡片。

完整页面操作:
立即体验进入专注设备系列,立即购买查看设备规格和款式;切换三条生活灵感,选择设备并查看本地购物结果,不创建订单。

静态封面、详情演示与 /style-scenes/minimalism/(英文 /en/style-scenes/minimalism/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

扁平化设计Flat Design

拒绝一切拟真修饰的视觉语言:纯色块、几何形状、无渐变无投影无纹理,靠颜色、 形状与排版建立层级。它是拟物化的反面——界面不再模仿实物,而是承认自己 是一块发光的平面,用清晰与直接换取效率与一致性。

风格相似概念
瑞士风格Swiss Style

以客观网格与排版传达信息的视觉语言:严密的数学网格、无衬线字体、左对齐、 黑白加一个强调色(经典为红),用留白与字号对比建立秩序。装饰被视为噪音, 设计的目标是让信息以最短的路径被读懂。

风格相似概念
杂志编辑风Editorial

把页面当作杂志版面经营的视觉语言:衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线,图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配, 用版式语言讲故事,而非用装饰堆砌氛围。

风格相似概念
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件影响组件
卡片Card

用圆角边框或底色围出一块自包含内容的矩形容器,一块卡片聚合一组相关信息: 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON