UI/UX Pro Max风格图鉴
Landing Page已弃用

极简直给Minimal & Direct

单列 680px 内容宽度、18px 正文、几乎无装饰,只保留一个 CTA。阅读体验最好,适合一句话就能说清的产品。

典型场景单页产品 · 个人作品(已弃用)

编号23 年代2020s Modern 复杂度Medium 默认模式自动

效果示例

preview / minimal-and-direct
Nova 产品方案定价 开始使用

Design System

同一套组件
不同的性格

色彩、字体、圆角与材质,决定了界面的气质。

主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50

同一副骨架,演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。

风格描述

单列 680px 内容宽度、18px 正文、几乎无装饰,只保留一个 CTA。阅读体验最好,适合一句话就能说清的产品。

关键词

Minimal textwhite space heavysingle column layoutdirect messagingclean typographyvisual-centricfast-loading

效果与动效

Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll

设计系统变量

--content-max-width680px
--spacing-large4rem
--font-size-body18px
--line-height1.6
--color-text#1a1a1a
--color-bg#ffffff

配色方案

色值取自风格数据,不足时补充主题令牌

主色 / Primary

Monochromatic primary, white background, single accent color for CTA, black/dark grey text

辅色 / Secondary

Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements

强调色在页面底色上的对比度约 17.4:1,可用于正文与图标。

适用场景

适合 / Best For

  • Simple service landing pages
  • indie products
  • consulting services
  • micro SaaS
  • freelancer portfolios

避开 / Do Not Use For

  • Feature-heavy products
  • complex explanations
  • multi-product showcases

框架兼容

tailwindbootstrap

能力矩阵

浅色模式支持
深色模式支持
移动适配原生适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion

实现要点

落地清单

  • Single column centered,
  • White space generous,
  • One primary CTA only,
  • No decorative images,
  • Page weight < 500KB,
  • Load time < 2s

CSS / 技术关键词

max-width: 680px, margin: 0 auto, padding: 4rem 2rem, font-size: 18-20px, line-height: 1.6, minimal animations, no box-shadow, clean borders only

该条目在上游数据中标记为已弃用,插件检索默认排除;查询中包含 legacy 或 deprecated 时才会召回。

AI 提示词

Design a minimal direct landing page. Use: single column layout, maximum white space, essential content only, one CTA, clean typography, no decorative elements, fast loading, direct messaging.