登录页电脑端怎么设计才不空：5 种布局方案与可粘贴 AI 提示词

核心结论 ：登录页看着空，不是字段太少，而是整屏只有一层焦点 。AI 默认给的是 340px 表单漂在 1440px 白底上，只占 5.8% 的像素，背后零层级。解法不是把表单填满，而是补第二层------品牌区、氛围光或版式锚点。本文给 5 种可直接抄的布局，实测内容占屏比 5.8% → 24.8%，并附一条能直接粘进 AI 的硬约束提示词。

📦 配套资源：5 种登录页布局可运行对照页（V0--V5 一键切换）

目录

• 1. 一句话结论
• 2. 登录页为什么会空
• 3. 先量一遍：空的三个可测指标
• 4. 五种布局方案（含适用场景与取舍）
• 5. 实测对照：六张截图与一组数字
• 6. 一条可直接粘贴的 AI 提示词
• 7. 完整可运行代码（左右分栏版）
• 8. 对照表：症状 → 原因 → 解法
• 9. 怎么选：一张决策表
• 10. 三个常见踩坑

1. 一句话结论（Conclusion）

先看一个画面 🛋️：一间 60 平米的客厅，你把沙发、茶几、电视全搬走了，只在正中央放了一把椅子。你不是「简约」，你是没布置。任何人走进去，第一反应都是「这房子是不是还没弄好」。

AI 生成的登录页就是这个客厅。它把 1440px 宽的屏幕当成一张白纸，只往正中间放了一个 340px 的表单框，剩下 76% 的横向空间全是死的。你觉得空，不是因为它留白多------留白本身没问题，是因为留白背后什么都没有。

所以真正该记住的是这一句：

空 = 一层焦点 + 零层背景。 补内容的正确做法是加层级，不是加字段。

本文会在第 5 节用 5 组实测数字证明这个判断，其中有一组特别反直觉：某个方案的空白占比高达 91.9%，比「最空」的默认版只低 2.3 个百分点，但看起来完全不空------因为它背后有一层光。

2. 登录页为什么会空（Root Cause）

四个原因叠在一起，缺一不可：

① 桌面端被当成拉宽的移动端。 AI 的登录页模板几乎全是从 375px 手机稿来的：一列、居中、纵向堆叠。这套东西在手机上是对的，因为手机屏幕窄，单列就是全宽。搬到 1440px 上，一列只占 24% 宽度，其余全是空隙。

② 表单本身的信息量撑不住首屏。 一个标准登录框只有 2 个字段、1 个按钮、1 行「忘记密码」，加起来 286px 高。而首屏有 900px------剩下的 614px 必须由别的东西填，AI 的默认答案是「不填」。

③ 表单是纵向单深度结构。 纵向结构在窄屏里天然成立，在宽屏里就暴露问题：视线从上往下走完只要 1 秒，之后眼睛没地方去，只能感受到「空」。

④ AI 没有品牌资产可用时，只会留白。 你让它做一个登录页，它不知道该放什么口号、什么客户 logo、什么产品截图，于是全部省略。它不是懒，是你没给它第二层的素材。

这四条指向同一个结论：登录页的尺寸问题，本质是结构问题。

3. 先量一遍：空的三个可测指标（Metrics）

「空」听起来主观，其实可以量。本文用三个指标，都能在一张截图上算出来：

• 内容块数（Block Count）：首屏里可独立识别的信息块数量（标题、段落、输入组、按钮、logo 墙都算一块）。低于 8 块基本会显得单薄。
• 内容占屏比（Coverage） ：所有内容块包围盒的并集面积 ÷ 视口面积。注意是并集，重叠区域只算一次。
• 内容包围盒（Content Box）：所有内容块的最小外接矩形。它决定「视觉重心」落在哪，也决定横向空间有没有被用起来。

测量方法说清楚，你才能复算：视口 1440×900 ，用 6px 网格对全屏采样（共 240×150 = 36000 个采样点），逐点判断是否落在任一内容块的包围盒内，命中数 ÷ 总数即得占屏比。这套算法写在配套 demo 的 measure() 函数里，打开页面点一下控制台就能自己跑。

4. 五种布局方案（Five Layouts）

下面五种方案全部用纯 CSS 实现，没有一张图片，你可以直接拿去改文案。判断标准是同一套：它靠什么补上第二层。

4.1 方案一：左右分栏 + 品牌叙事区（Split Brand）

左侧 54% 是品牌区：深紫渐变打底、网格线做质感、一句 40px 的主张、三条带数据支撑的价值点、底部一排客户 logo。右侧 46% 是白底表单，380px 宽，含社交登录与注册入口。

它靠什么不空：把横向那 76% 的死区改成叙事区。左右两栏一深一浅，眼睛有明确的两个落点，纵向单深度的问题被彻底解掉。

实测：内容块 16 个，占屏比 19.6%，内容包围盒 1235×788------横向几乎铺满。

适用：已有品牌色和一句能站住的主张的 B 端产品，表单字段不超过 4 个。

取舍：左栏文案是真实的品牌资产，写虚了会变成营销海报；移动端必须塌成单列，否则左侧文案会压掉表单。

4.2 方案二：居中卡片 + 氛围渐变（Ambient Card）

全屏深色底 #070a14，两处径向光（左上紫、右下青），叠一层 64px 网格再套径向遮罩，中央放一张 420px 的玻璃卡片（backdrop-filter: blur(18px) + 半透明白边）。

它靠什么不空 ：背景自己就是第二层。卡片只有一层，但它浮在一层有方向、有明暗的光场里，视觉上不再是无边空白。

实测 ：内容块 8 个，占屏比只有 8.1%------比默认版高 2.3 个百分点，空白占比 91.9%。数字几乎没变，观感完全不同。

适用：工具型、开发者向产品；完全没有品牌视觉素材时，这是成本最低的方案，纯 CSS 就能出图。

取舍 ：深色底上的表单对比度要重新算，直接用浅色主题的 #e5e7eb 边框会糊；低端设备上大面积 blur 会掉帧。

4.3 方案三：极简单栏 + 大留白（Typographic Minimal）

背景是极浅的暖白 #fafaf9，内容左对齐，宽度只有 420px。主标题放大到 46px 并压缩字距，品牌名用 7px 字间距的小字做顶部锚点，输入框去掉边框只留一条底线，左侧再放一条竖向的 SIGN IN --- 01 做结构线。

它靠什么不空 ：不是填内容，而是把字本身变成图形。46px 的标题块在视觉重量上顶得上一张插画，竖排标签又给屏幕补了一条纵向轴线。

实测：内容块 8 个，占屏比 11.1%，但内容包围盒被拉到 874×493，重心横向偏移 −227px------视觉重量明确落在左半边，形成构图。

适用：消费级工具、设计感优先的产品；也适合做「品牌调性」而不是「功能说明」的场景。

取舍：这个方案完全吃文案和字体质量，标题写虚了就是真的空；也不适合字段多的表单。

4.4 方案四：满屏产品视觉 + 玻璃卡片（Product Stage）

左侧 60% 直接用 CSS 伪造一块产品界面：侧边导航条、三个 KPI 卡片、八根渐变柱状图。右侧 440px 玻璃卡片承载登录。背景是三层渐变叠加的深色场。

它靠什么不空 ：让用户在登录之前就看见产品长什么样。这不是装饰，是转化------他登录前已经知道进来会看到什么。

实测：内容块 10 个，占屏比 24.8%，是五组里最高的；内容包围盒 1249×474，横向铺满、纵向集中在中间带。

适用：SaaS 控制台、数据类、监控类产品。

取舍：伪界面必须跟真实产品长得像，否则登录后落差直接把信任打掉；另外它是五组里视觉重量最大的，做得再满一点就会抢掉表单的注意力。

4.5 方案五：品牌叙事分屏 + 分步表单（Narrative Steps）

左侧 44% 深色叙事区：STEP 1 OF 3 标签、一句主张、一段说明、一条客户证言（带头像与身份）、底部三段式进度条。右侧 56% 是三步流程条（账号 → 验证 → 完成）加表单。

它靠什么不空：左侧负责回答「我为什么要注册」，右侧负责「怎么注册」。信息密度最高的同时，注意力分工也最清楚。

实测：内容块 12 个，占屏比 17.5%，内容包围盒 1181×796------纵向几乎铺满。

适用：注册是转化关键环节的产品，比如 B 端试用申请、需要解释价值的产品。

取舍：每多一步就多一层流失，只有字段超过 5 个时才值得拆步骤；拆错了就是把一次登录变成一次填表。

5. 实测对照：六张截图与一组数字（Benchmark）

同一份代码、同一个视口、同一套 CSS 变量，只切换布局方案。V0 是 AI 默认产出，作为对照组。

六组实测数据（1440×900，6px 网格采样）：

方案	内容块数	内容占屏比	空白占比	内容包围盒	重心横向偏移
V0 AI 默认	4	5.8%	94.2%	340×286	0 px
V1 左右分栏	16	19.6%	80.4%	1235×788	−39 px
V2 居中卡片	8	8.1%	91.9%	346×433	0 px
V3 极简单栏	8	11.1%	88.9%	874×493	−227 px
V4 满屏视觉	10	24.8%	75.2%	1249×474	−23 px
V5 叙事分步	12	17.5%	82.5%	1181×796	−74 px

这张表最该看的是 V2 那行：空白占比 91.9%，只比默认版低 2.3 个百分点，占屏比只从 5.8% 涨到 8.1%，但它看起来完全不空。 原因不在像素，在层级------默认版的白是「没东西」，V2 的深色是「有光」。两者在统计上几乎一样空，在感知上是两回事。

同样反直觉的是 V3：占屏比 11.1%，空白 88.9%，包围盒却被拉到 874×493、重心偏移 −227px。它没有多放任何内容块，只是把一个标题放大到 46px------字号本身就是面积。

反过来，V1 和 V5 的数字（19.6% / 17.5%）说明另一件事：真正把空间用起来的方案，内容块数都不低于 12 个。块数比面积更能预测「空不空」：V0 只有 4 块，V2 有 8 块，V1 有 16 块。

6. 一条可直接粘贴的 AI 提示词（Prompt）

把下面这段原样粘进 AGENTS.md、.cursor/rules/ui.mdc 或对话开头。它跟泛泛的「做得美观大气」的区别只有一个：每一条都能被数出来。

## 登录页桌面端布局规则（视口 1440×900）

1. 首屏必须有两层：一层表单，一层非表单。
   两者面积比不低于 1 : 3（表单 ≤ 25%）。
2. 表单列宽固定 360--420px，禁止超过 420px；剩余横向空间
   必须被第二层占据，禁止留大片纯白或纯色平面。
3. 第二层必须是「可读信息」或「产品视觉」，至少含 3 个信息块
   （主张句 / 带数字的价值点 / 客户 logo 墙 / 产品界面 / 客户证言），
   不允许只放装饰性渐变或光斑。
4. 首屏内容块数 ≥ 8。交付前自己数一遍，不够就补第二层，不许改字号凑数。
5. 以下三条满足任意一条即视为通过第二层检查：
   a. 存在覆盖 ≥ 25% 视口的背景视觉层（渐变场 / 插画 / 产品图）；
   b. 存在 ≥ 30% 视口的非表单信息区（分栏品牌区 / 叙事区）；
   c. 主标题字号 ≥ 36px 且内容包围盒宽度 ≥ 视口 55%。
6. 视口 < 900px 时塌成单列，第二层缩为顶部 220px 品牌条，
   表单宽度改为 100%（最大 420px）。
7. 禁止为下列元素写解释文字：按钮、输入框、复选框。

第 4 条和第 5 条是关键。能被数出来的规则，AI 才真的执行 ；写「保持大气」「注意留白」这类形容词，等于没写------这一点在前序的 12 种高级 UI 交互效果及对应 AI 提示词 里已经验证过一次：说「加个动效」它给最普通的 scale(0.98)，说「松手先弹到 1.05 再落回 1.0」它才照做。

7. 完整可运行代码（Runnable Demo）

下面这段存成 .html 双击就能跑，就是方案一的完整实现：左品牌区 + 右表单，纯 CSS 无图片，所有颜色收在 :root 变量里。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录页 · 左右分栏</title>
<style>
  /* 设计变量：换肤只改这一段 */
  :root {
    --brand: #4f46e5;      /* 品牌主色 */
    --ink: #0f1115;        /* 主文字 */
    --sub: #6b7280;        /* 次级文字 */
    --line: #e6e7eb;       /* 描边 */
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }              /* 宽度含 padding，两栏不串位 */
  body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); }

  /* 两栏骨架：左 54% 品牌，右 46% 表单，撑满一屏 */
  .login { display: grid; grid-template-columns: 54% 46%; min-height: 100vh; }

  /* 品牌区：渐变 + 网格 + 光斑，三层叠加造纵深 */
  .brand {
    position: relative; overflow: hidden; padding: 56px 64px;
    color: #fff; display: flex; flex-direction: column;
    background: radial-gradient(120% 90% at 85% 15%, #4c1d95 0%, #241b5e 45%, #0b1026 100%);
  }
  .brand::before {                                                   /* 光斑：给深色背景一个光源 */
    content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -120px;
    border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.55), transparent 65%);
  }
  .brand::after {                                                    /* 网格 + 渐隐遮罩：制造质感 */
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(160deg, #000 30%, transparent 78%);
  }
  .brand > * { position: relative; }                                 /* 内容压在装饰层之上 */
  .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; }
  .logo i { width: 30px; height: 30px; border-radius: 9px;
            background: linear-gradient(135deg, #a78bfa, #6366f1); }
  .brand h1 { margin: auto 0; font-size: 40px; line-height: 1.22; letter-spacing: -1px; max-width: 460px; }
  .brand p { margin-top: 18px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.68); max-width: 440px; }
  .points { display: grid; gap: 14px; margin-top: 30px; }            /* 三条价值点：撑起纵向密度 */
  .points span { display: flex; gap: 12px; font-size: 14px; color: rgba(255,255,255,.82); }
  .points span::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 6px;
                         background: rgba(255,255,255,.14); }

  /* 表单区：白底 + 380px 固定列宽，垂直居中 */
  .form-wrap { display: flex; align-items: center; justify-content: center; background: #fff; }
  form { width: 380px; }
  h2 { font-size: 26px; letter-spacing: -.4px; }
  .lead { margin-top: 8px; font-size: 14px; color: var(--sub); }
  .field { margin-top: 18px; }
  label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 7px; }
  input { width: 100%; height: 46px; padding: 0 14px; font-size: 14px; border: 1px solid var(--line);
          border-radius: 10px; outline: none; }
  input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
  .row { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; color: var(--sub); }
  .row a { color: var(--brand); text-decoration: none; }
  button { width: 100%; height: 46px; margin-top: 24px; border: 0; border-radius: 10px;
           background: var(--brand); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
  .foot { margin-top: 26px; text-align: center; font-size: 13px; color: var(--sub); }
  .foot a { color: var(--brand); text-decoration: none; }

  /* 窄屏塌成单列：品牌区缩成顶部品牌条 */
  @media (max-width: 900px) {
    .login { grid-template-columns: 1fr; }
    .brand { padding: 28px 24px; min-height: 220px; }
    .brand h1 { font-size: 26px; margin: 24px 0 0; }
    .brand p, .points { display: none; }
    .form-wrap { padding: 36px 24px; }
    form { width: 100%; max-width: 420px; }
  }
</style>
</head>
<body>
<div class="login">
  <!-- 第一层：品牌叙事区，负责吃掉横向空区 -->
  <aside class="brand">
    <div class="logo"><i></i> Aurora</div>
    <h1>把团队的每一次<br>决策都留在同一页</h1>
    <p>项目、文档与讨论聚合在一个工作区，新成员第一天就能看到全部上下文。</p>
    <div class="points">
      <span>300 人团队实测，周会时长缩短 40%</span>
      <span>权限精细到单个文档，外部协作可控</span>
      <span>全量操作留痕，审计一键导出</span>
    </div>
  </aside>
  <!-- 第二层：表单，宽度锁死在 380px -->
  <main class="form-wrap">
    <form>
      <h2>登录 Aurora</h2>
      <p class="lead">继续使用你的工作邮箱</p>
      <div class="field"><label>工作邮箱</label><input placeholder="name@company.com"></div>
      <div class="field"><label>密码</label><input type="password" placeholder="••••••••"></div>
      <div class="row"><span>记住我 7 天</span><a href="#">忘记密码</a></div>
      <button>登录</button>
      <p class="foot">还没有账号？<a href="#">申请试用</a></p>
    </form>
  </main>
</div>
</body>
</html>

跑起来后在浏览器里把窗口从 1440px 拖到 800px，你会看到品牌区先塌成 220px 品牌条、表单再转成全宽------这是方案一必须做的一步，不做的话手机上一进页面就只能看到半句口号。

8. 对照表：症状 → 原因 → 解法（Symptom → Cause → Fix）

症状	原因	解法
表单孤零零漂在中间，左右大片白	整屏只有一层纵深，1440px 只用了中间 340px	上方案一，让品牌区吃掉那 76% 的横向空区
加了渐变背景，还是觉得空	背景只有颜色，没有信息	背景里补 3 个可读信息块：主张句、带数字的价值点、客户 logo 墙
卡片做大显笨，做小显空	在调结果而不是调结构	表单列宽锁 360--420px，省下的空间全部给第二层
深色背景一上就显廉价	只有底色，没有光源	径向光 + 网格遮罩 + 玻璃层三件套，缺一层就变纯色板
手机上好看，电脑上就空	把 375px 单列稿直接拉宽到 1440px	桌面单独设计横向结构，窄屏再塌回单列
AI 每次生成的登录页都一个样	提示词里没有可判定规格	用第 6 节的 7 条硬约束，每条都能数出来

9. 怎么选：一张决策表（Decision）

你的情况	推荐	理由
有品牌色、有一句站得住的主张	方案一 左右分栏	空间利用率最高，叙事和表单分工最清楚
没有任何视觉素材，今天就要上线	方案二 氛围卡片	纯 CSS 出图，占屏比只涨 2.3 个百分点就够不空
主打设计感、消费级工具	方案三 极简单栏	靠字号和字距造锚点，不需要额外内容
产品本身是卖点（控制台、数据看板）	方案四 满屏视觉	登录前先让用户看见产品，直接服务转化
注册字段超过 5 个、需要解释价值	方案五 叙事分步	左侧讲为什么，右侧拆步骤，降低单页认知负荷

选的时候只问一句：我手上有没有第二层素材？ 有品牌文案就走一、五，有产品界面就走四，什么都没有就走二、三------最不该做的是继续往表单里加字段。

10. 三个常见踩坑（Pitfalls）

① 把「填满」当成「不空」。 五组数据里最满的是 V4（24.8%），但它也是最容易做砸的一组：伪界面和真实产品差异一大，用户的期待就落空。不空的本质是层级清楚，不是像素多。

② 左右分栏左边只放插画不放字。 纯插画在 1440px 下依然是一块「没有信息的色块」，用户扫过去不会留住任何东西。至少要有一句主张 + 三条带数字的价值点。

③ 忘了窄屏塌陷。 方案一、五在移动端不塌成单列，就会出现「左半边全是口号、表单被挤到屏幕外」的经典事故。塌陷断点定在 900px，品牌区压到 220px。

如果你的产品连文案都还没定，问题就不在布局层------先回头把第 6 节第 3 条那三个信息块（主张句、价值点、证言）写出来，再谈配色。

有品牌文案就走分栏，有产品界面就走满屏视觉；两样都没有，就用纯 CSS 氛围光补齐第二层，别往表单里加字段。会显空的从来不是留白，是留白背后空无一物。

本专栏《全栈开发》覆盖前端工程化、UI 设计与 AI 辅助开发三条线，每篇都配一个可直接运行的 Demo 和一份能粘进项目的规则文件，每周更新一篇。想按顺序读完，可以在专栏页订阅。