极简作品集
设计极简作品集网站。使用居中的单列布局,max-width 为 680px。标题采用系统 serif,正文采用系统 sans-serif,line-height 为 1.8。色彩仅使用白色背景、黑色文字和一种链接强调色。header 只放 3-4 个文字导航链接;项目区每项包含图片、标题和一行说明;footer 只显示姓名与邮箱。不使用边框、阴影或图标,让留白和排版承担全部层级。极简设计去除装饰性元素,让内容自己说话。它依靠排版、留白和微妙的对比度,而非沉重的图形或复杂的布局。挑战在于用更少的元素达到视觉趣味。每一个设计决策都必须有意图:每一像素的间距、每一个字重选择、每一次色彩使用都应服务于明确的目的。
设计极简作品集网站。使用居中的单列布局,max-width 为 680px。标题采用系统 serif,正文采用系统 sans-serif,line-height 为 1.8。色彩仅使用白色背景、黑色文字和一种链接强调色。header 只放 3-4 个文字导航链接;项目区每项包含图片、标题和一行说明;footer 只显示姓名与邮箱。不使用边框、阴影或图标,让留白和排版承担全部层级。使用 shadcn/ui 创建极简博客布局。内容区为居中的单列 max-w-2xl。header 显示纯文字站名和 3 个导航链接,不使用 logo。文章列表展示标题、日期和两行摘要;文章页使用大号 serif 标题、元数据行,以及由 Tailwind Typography plugin 排版的 prose 内容。footer 只保留版权文字。全站色板为 zinc-950 文字、zinc-50 背景和 zinc-400 muted 文字,不使用卡片、阴影或装饰元素。在 Next.js 中构建极简笔记应用。只使用 Inter 一套 sans-serif、4px 基础网格,以及黑、白和一种 muted gray 三种颜色。不使用 box-shadow,border-radius 不超过 4px,只在必要位置使用 1px 边框。布局包含 200px 窄侧边栏和纯文字导航,主编辑区 padding 为 48px。transition 仅改变 opacity 和 transform,duration 为 200ms。每个元素都应有明确用途,整体保持安静克制。按照严格的极简原则生成 React 组件库,包含 Page、Section、Heading、Text、Link、List、Image 和 Divider。每个组件最多使用两种字号;禁止 box-shadow 和 gradient,border-radius 最大 4px,色板仅包含黑、白、灰。Section 间距统一使用 16、32、48、64、96px 比例。提供针对长文阅读优化的 prose/article layout,正文每行控制在 60-75 个字符。为单一硬件产品设计极简落地页。header 只使用文字,左侧放产品名,右侧放一个 Buy 链接。hero 在 #fafafa 背景上展示产品照片,垂直 padding 为 120px;标题使用 40px medium 的 Suisse-style grotesque,Inter 也可,说明文字使用 18px #525252,并限制为每行最多 55 个字符。下方规格表使用双列 definition table,各行以 1px #e5e5e5 完整分隔并设置 20px padding;随后放置一个居中的黑色 CTA,背景 #111111、文字白色、无 radius。不使用图标、卡片或渐变。完整色板仅为 #fafafa、#111111、#525252、#e5e5e5。使用 shadcn/ui 创建极简定价页,只提供两个 plan。两个 plan 并排呈现,中间使用一条 1px zinc-200 垂直分隔线,不使用卡片,也不为 plan 添加外框。plan 名称使用 14px uppercase tracking-widest zinc-500;价格使用 56px light zinc-950,并带 16px /month 后缀;功能项使用普通列表、12px gap 和 en dash,不使用 check 图标。每个 plan 提供一个黑色按钮,免费 plan 使用 outline button。页面使用居中的 max-w-3xl、96px 顶部 padding 和白色背景;底部放一行 zinc-500 下划线 FAQ 链接。focus 状态使用清晰的 2px zinc-950 outline。在 Next.js 中构建极简文档站。左侧边栏宽 220px,使用 14px 纯文字链接;当前页面仅通过 font-weight 600 和 #111111 区别于普通项 #737373,不使用背景 pill。内容区为 max-w-2xl,正文使用 17px/1.75 humanist sans,标题只设 28px 和 20px 两档。代码块使用 14px JetBrains Mono、#f5f5f5 背景、无边框和 4px radius。链接带下划线,text-underline-offset 为 3px,唯一强调色 #2563eb 只用于链接。间距严格使用 8/16/24/40/64px。加入键盘可访问的 skip-to-content link,以及只有 1px 下划线的 search input。生成极简移动端习惯追踪 React 组件。背景使用 #ffffff,唯一强调色 #16a34a 只用于完成状态。header 中,日期使用 15px #737373,问候语使用 32px medium。习惯列表由高 64px 的全宽行组成,行间使用 1px #f0f0f0 细分隔;每行显示 17px #111111 习惯名称,以及 28px 可点击完成圆圈。完成后圆圈填入强调色并显示 check,动画为 150ms ease-out scale。禁止卡片和阴影;底部 3 个 tab icon 下必须保留 11px label,不能移除文字标签。所有触摸目标至少 44px;完成状态同时添加删除线,不能只用颜色表示。极简网页设计将 UI 精简到核心元素:清晰的排版、充足的留白、有限的色板(通常 2-3 种颜色)、不使用无功能性的装饰元素。它遵循「少即是多」的原则,每个元素都必须证明自己在页面上的存在价值。
将排版作为装饰:变化字重、字号和样式以创造视觉趣味。运用有意图的留白(不仅是空白空间)。添加微妙的 hover 微交互。谨慎使用高质量的图片或插图。关键在于让每个元素都有意义,而不是增加更多元素。
系统字体(Inter、SF Pro、Segoe UI)因其干净的几何形状而理想。标题可考虑干净的衬线字体(Playfair Display、Cormorant)以形成对比。等宽字体(JetBrains Mono、Fira Code)适合代码中心或技术类极简设计。最多限制 1-2 个字体家族。
留白应锚定在一套间距体系和字号上,而不是凭感觉。一套可行的系统:桌面端区块上下内边距 96-128px(移动端 64px),无关块之间 40-64px,相关条目之间 16-24px,组件内部 8px。行高承担微观留白:正文 1.6-1.8,大标题 1.1-1.2。核心规则是亲密性——组内间距必须明显小于组间间距,至少 2:1 的比例,否则布局会显得涣散而不是宁静。当页面感觉空洞时,先收紧组内间距,而不是添加元素。
可以——极简限制的是颜色的数量,不是颜色本身。可靠的公式:一对主中性色(如 #fafafa 背景配 #171717 文字),一个次要文字灰(#737373),以及恰好一个强调色,且只承担一种职责:链接、主按钮或完成状态——绝不同时承担三种。#2563eb 或 #dc2626 这样的饱和强调色,正因为出现得少才有力量;如果每个区块都有强调色,它就不再是强调色了。大胆的单色背景(整屏 #1d4ed8 Hero 配白字)同样是正统的极简,只要构图保持克制。