企业官网建设流程全解析

上周参加一次后台产品的设计评审，讨论到空状态页面。产品经理打开新版空状态设计稿，问会议室里的人：“这里要不要再加一张插画？再加一句引导文案？或者直接给一个创建第一个项目的大按钮？”大家觉得可以加一点，氛围很热烈。我当时说了一句可能有点扫兴的话：“黑洞的设计语言已经很完美了，不需要再改。”

这句话不是玩笑。后来我把它当成一条设计原则来用。黑洞的设计语言，不是指某个官方设计规范，也不是指暗黑模式，而是那种“把多余信息吸入边界之内，只留下清晰边界和必要反馈”的界面设计方式。它看起来很安静，却能让用户在最少的干扰里，知道下一步可以做什么。这篇文章想把这个观点展开：为什么我认为它已经足够完整，它背后的机制是什么，以及怎么把这种设计语言落到真实产品和页面里。

1. 为什么我会说“黑洞的设计语言已经很完美了”

先说清楚一个边界：这里聊的不是天体物理，也不是某种最新发布的设计系统，而是从黑洞这个自然现象中提炼出的交互设计隐喻。黑洞的视觉效果极其简单，但它的物理机制极其复杂。这个反差本身就说明，一个优秀的设计语言，不一定需要很多视觉元素堆叠。

设计评审时，我们面对任何问题，第一反应往往是“加东西”。空状态不够吸引人，加插画；用户不知道怎么操作，加引导气泡；页面不够有品牌感，加渐变色。但加到最后，页面变得很热闹，用户反而不知道真正重要的东西在哪里。而黑洞给你一个相反的思路：它几乎不释放任何可见信息，但它的边界和引力，足以让所有靠近它的东西都被明确地引导。

1.1 黑洞并不是没有设计，而是把设计藏在了边界上

黑洞本身是黑的，在纯黑背景下几乎不可见。但我们能知道它的存在，是因为它有事件视界、吸积盘和引力透镜效应。这些都属于“边界”和“反馈”的设计。

对应到界面里，黑洞设计语言不会设计一个花哨的标题，不会给每个图标都加动效。它更关注的是：

• 哪里是用户可以投入内容的区域。
• 哪里不可点击、需要明确置灰或隐藏。
• 用户操作成功后，系统用多强烈的反馈来确认。
• 用户进入空状态时，第一条信息应该是什么。

这些设计其实都在“边界”上完成。当一件事情发生时，设计语言只告诉你三件事：发生了什么、这意味着什么、你能做什么。不多不少。

1.2 从事件视界看交互边界：用户只需要知道哪里不能进去，哪里可以点击

事件视界是黑洞的边界。一旦跨过，任何信息都无法返回。这个边界的物理意义很极端，但放到交互设计里，可以理解为“用户操作的边界感”。

很多产品的问题不是没有功能，而是边界模糊。一个按钮看起来可以点击，点下去没有反应；一个页面看起来可以滑动，实际上所有内容都在首屏；一个弹窗没有明确的关闭方式，用户只能用 Esc 去试。这都属于事件视界不清晰。

黑洞设计语言的做法是：把可交互的范围画清楚。不能点的地方，样式上就不要像按钮；重点操作，视觉权重就要足够大；次要操作，就让它安静地待在角落里。用户不需要理解你的组件库，只需要一眼知道哪里能碰、哪里不能碰。

1.3 完美不是“不加东西”，而是“加无可加却不觉得缺失”

“已经很完美”这句话，很容易被理解成“不要改动了”。但我的意思是，设计方案达到某种自我一致性之后，你再去加任何元素，都会破坏原有的平衡。

就像一个黑洞，你让它多一条装饰性的光环，它就不是黑洞了，而是一张插画。界面里也一样，当空状态已经有了“说明 + 一个主行动按钮”，其实用户需要的已经闭环。此时再加一个“分享给同事”的按钮、一段产品介绍、一张背景图，反而会让用户犹豫：我是先创建，还是先分享？这里还有几步操作？

加无可加，但不觉得缺失，才是设计语言成熟的标志。它不需要额外讨好用户，因为它对用户需求的回应已经足够完整。

2. 从黑洞的四个特征，提炼出一套可持续使用的设计原则

如果你认同黑洞设计语言的方向，下一步就是把它变成可执行的设计原则。我把黑洞的主要物理特征映射到界面设计上，整理成一张表：

这四个特征不是独立存在的，它们是一套完整循环。吸收负责让注意力收敛，边界负责让操作范围清晰，引力负责把用户推向最有价值的行为，辐射负责在所有行为发生时给出恰当反馈。

2.1 吸收：去除视觉噪音的优先级规则

吸收的第一层，是决定“不展示什么”。

做设计的时候，我经常问团队一个问题：如果一个元素删掉，用户会不会产生误解？如果不会，就删。如果一个颜色去掉，会不会影响信息层级？如果不会，就去掉。如果一条文案省略，用户还能不能理解当前状态？如果能，就省略。

这套规则听起来很简单，实际做的时候会遇到阻力。业务方会告诉你这里要体现品牌感，那里要增加转化入口。这时候需要明确：吸收不是把所有东西都丢掉，而是保留那些真正承担信息传递和行动引导的要素，把“我们觉得会有用”的要素全部拿掉。

在一个真实案例里，我们把新旧用户首次登录后的引导页从三步改成了两步，去掉了一段动画和一个运营弹窗。结果是完成下一步操作的比例反而提升了。用户不是不喜欢内容，而是不喜欢在作出选择之前被太多内容包围。

2.2 边界：事件视界与可点击区域

在代码层面，边界感可以落成这四类规则：

• 按钮样式只在真实可点击的组件上使用。
• 可点击区域的最小尺寸要符合常见的触控标准，不能为了视觉把按钮缩到一个小图标。
• 置灰状态必须说明“为什么不可用”和“什么时候可用”，否则它就成了一个可见但无法穿透的事件视界。
• 非重点操作要用更低的视觉权重去呈现，比如文字链接代替次级按钮。

边界还有一个容易忽略的点：边界不仅是“能点到什么”，还包括“不能点到什么”。比如在弹窗外部点击时是否需要关闭？在输入框旁点击空白区域是否会误触？这些交互习惯也需要被明确规范，否则用户会在试错中积累困惑。

2.3 引力：信息的层级与注意力焦点

黑洞的引力足够强时，光也无法逃逸。界面中的“引力”就是你的核心行动按钮，或者最能体现页面价值的动作。

在大多数页面里，用户最多面临三件事：

1. 理解当前状态。
2. 决定下一个动作。
3. 知道这个动作会带来什么结果。

黑洞设计语言会给这三个阶段分配明确焦点。空状态页面，焦点是创建入口；列表页面，焦点是筛选和新建；详情页面，焦点是主要操作，比如“确认支付”比“查看订单详情”更重。

引力设计的反面，是所有操作都做成等权重的按钮。试想一个黑洞，周围有几百颗小行星都在跳舞，引力一定是混乱的。界面里如果每个元素都在争夺注意力，用户最终会随便选一个，或者干脆不做任何选择。

2.4 辐射：克制的反馈与可感知的状态

霍金辐射是黑洞理论中的一个概念，它表示黑洞在极长时间尺度内会缓慢蒸发，释放出微弱的能量。这个特性放在设计里，对应的就是“反馈”。

设计界面的用户反馈时，一个常见问题是反馈强度不稳定。用户点击按钮后，有时候出现加载动画，有时候直接跳转，有时候没有任何反应，只会在控制台里报错。这种不一致会造成“用户不知道自己是否操作成功”的焦虑感。

黑洞设计语言倡导的反馈有三个特征：

• 简单：操作成功后，一秒钟内让用户看到结果。
• 连贯：同一类操作，反馈形式保持一致。
• 可预期：重要的操作在发生前，就给用户足够的提示。

比如一个普通按钮，点击后变成 loading 状态，loading 结束变成对勾。这个过程可以很安静，但一定不能缺失。状态反馈是设计语言的一部分，不是留给开发临时发挥的技术实现。

3. 落地实操：把黑洞设计语言放进你的页面、组件和状态流程

有了原则，还需要一套可运行的最小流程。我会用几个最常见的页面状态来举例，这些例子不是完整代码，但能作为落到业务里的起点。

3.1 空状态：不是一块黑屏，而是一个安静但有方向的黑洞

空状态是最适合用黑洞设计语言的场景。很多产品团队会在这里放插画、文案、引导箭头和一堆运营入口。但黑洞设计语言的空状态应该长这样：

• 一个简单的图标，表示这里目前什么都没有。
• 一句说明，告诉用户为什么是空的，通常不超过十个字。
• 一个主操作按钮，引导用户开始第一步。

下面是一段结构代码，示意组件的最小写法：

<div class="empty-state"> <svg class="empty-state__icon" width="48" height="48" aria-hidden="true"> <!-- 你项目的空状态图标 --> </svg> <p class="empty-state__desc">还没有项目，创建第一个吧</p> <button class="empty-state__action" type="button">创建项目</button> </div>

对应样式上，不要给这个区域加过多背景装饰。图标、文案、按钮之间保持清晰的间距，让眼睛能快速从上到下扫过去。这样用户在做决定之前，不需要过滤任何额外信息。

3.2 加载状态：用吸积盘式反馈替代无意义转圈

加载状态的核心不是“动画多好看”，而是“需要让用户知道系统正在响应”。黑洞吸积盘是一个非常合适的视觉隐喻：外圈物质逐渐向内螺旋，边缘有缓慢的加速感。但这种视觉要求容易过度，实际开发时可以用极简的环形进度条或一个简单的渐变圆环。

实现一个简单的吸积盘式加载，本质上是一个带渐变和旋转的圆环。你不需要引入重型图表库，用 CSS 动画就可以模拟：

.loading-ring { width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(from 0deg, #000 0%, #888 60%, #ccc 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #fff calc(100% - 3px)); animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

这段代码只负责视觉反馈，不包含任何业务逻辑。如果你所在的项目已经有组件库，尽量使用库里的 loading 组件并统一参数，而不是每次重新写一套动画。

3.3 404 与错误页：让错误也有“事件视界”

404 页面设计得非常克制，能让用户快速明白“到这里就没有路了”，然后给出一条明确的返回路径。黑洞设计语言的处理方式是：

• 用一句话描述问题，而不是写段长篇说明。
• 告诉用户这不是他们的错，或者告诉他们可以做什么。
• 只提供一个主行动，例如返回首页或重新加载。

错误信息也一样。如果接口失败，页面上能给出的信息有限，但至少要让用户知道“发生了什么、影响什么、可以重试吗”。这个状态可以放在页面顶部或弹层里，但不要和正常功能混在一起。

3.4 按钮与表单：用引力来引导下一步

在表单页面，引力设计表现为：

• 主要提交按钮永远在用户完成当前输入后能看到的位置。
• 次要操作（保存草稿、取消、返回）在视觉重量上明显低于主提交按钮。
• 如果有多个步骤，只显示当前步骤的核心行动，不提前展示下一步的所有选项。

代码层面，可以按权重定义按钮层级：

- 主按钮：默认填充色，对比度高 - 次按钮：描边或浅色背景 - 文字按钮：只有文字，用于低权重操作

不过要注意，组件库里的按钮层级不能只靠颜色区分，还要通过文案、位置和间距让用户自然感受出优先级。

4. 为什么看起来简单，团队落地时却容易翻车

黑洞设计语言听起来很简单，甚至会被认为“不就是极简风吗”。但团队真正落地时，通常会在几个地方出问题。

4.1 黑不等于高级，暗黑模式不等于黑洞设计

一提到黑洞，很容易想到“暗黑模式”。但黑洞设计语言和暗黑模式是两件事。暗黑模式是一种颜色方案，它是系统层面的明暗切换；黑洞设计语言是一种交互策略，它关心的是信息取舍、边界和反馈，在浅色页面里同样可以用。

如果团队只是把背景改成黑色，按钮改成灰色，阴影去掉，这顶多算“黑化”，不一定是设计语言。真正的黑洞式设计，在浅色场景下也能成立。你可以用大量留白代替黑色背景，用细线代替厚重阴影，用克制的动效代替跳动的弹窗。核心永远是“减少侵入感”。

4.2 当“极简”变成“缺少信息”，后果不是高级，是迷失

极简和缺失信息之间有一条细线。黑洞设计语言要求减少的是“不承担关键功能的元素”，不是把所有的文案和帮助都砍掉。如果一个页面只有一句文案，但不告诉用户为什么要这么做、点击之后会去哪里，那用户依然会困惑。

我见过一个落地失败的项目：空状态只剩一个图标和一个按钮，连描述文字都没有。结果用户看到按钮，犹豫了很久不敢点，因为他不知道“创建”是什么概念。后来加了一句说明，点击率才恢复正常。这提醒我们：每个被删除的元素，都要明确它是否承担不可替代的信息。

一个经验性的检查方法：

• 删掉插画：如果用户不会误读页面，可以删。
• 删掉副标题：如果用户仍然明白当前状态，可以删。
• 删掉辅助按钮：如果核心行动仍然清晰，可以删。
• 但删掉主行动按钮：绝对不行，这是事件视界上的出口。

4.3 需要先跑通最小规则，再考虑动效和个性化

落地时不要一上来就设计整套动效规范。更实际的做法是，先跑通一个最小闭环：

1. 选择一个高频页面，比如列表空状态或错误态。
2. 用静态样式实现“边界 + 文案 + 按钮”。
3. 让用户走一遍流程，确认不困惑。
4. 再考虑加 loading、异常重试、文案微调等。

动效是最后一步。黑洞本身是安静的，如果给它加太多粒子特效，反而会破坏“吸收”的质感。先让信息和操作路径稳定，再让视觉反馈跟上。

4.4 排查链路：从“设计很酷”到“用户会用”的四层检查

如果设计稿或者已经上线的页面出问题，可以按这个顺序排查：

1. 先看目标：用户来到这个页面，最应该完成的一个动作是什么？有没有被其他元素覆盖？
2. 再看信息层级：能否在两秒内看懂“这是什么、为什么在这里、下一步去哪里”？如果有歧义，优先补齐文案或图标。
3. 再看交互边界：所有可点击元素是否可感知？不可点击元素是否不会造成误触？弹窗、浮层等是否有关闭路径？
4. 最后看状态反馈：点击后有没有 loading 或结果反馈？错误时有没有告知原因和处理方式？

这个顺序可以快速定位大多数问题。不能一开始就调颜色和字体，那是最后一步，不是第一步。

5. 任何设计语言都有边界，黑洞也不例外

虽然我觉得黑洞设计语言已经足够成熟，但它并不是所有场景的万能答案。设计语言的存在是为了解决一类问题，边界一定要写清楚。

5.1 适合黑洞式设计的场景

这些场景特别适合用“边界 + 引力 + 克制反馈”的思路：

• 数据密集的后台：用户需要快速找到核心操作，画面冲突越少越好。
• 内容创建工具：让用户把注意力放在创作内容本身，而不是界面装饰。
• 空状态、错误页、加载状态：这些状态不需要用户做复杂决策，只需要给出一条清晰路径。
• 移动端小屏：信息空间有限，每一项展示都应该经过深思熟虑。

在这些场景里，黑洞设计语言能显著降低用户的理解成本。尤其当产品本身功能复杂时，调用“吸收”原则能避免把后台做得像信息海洋。

5.2 不适合或者需要大量调整的场景

黑洞设计语言不适合的场景同样明显：

• 新手引导场景：新用户没有足够上下文，需要更多一步、说明和鼓励。此时一味“简洁”，可能让用户找不到路。
• 品牌和营销页面：需要表达品牌情绪、季节活动或促销刺激，适当多一点的视觉元素是必要的。
• 复杂的配置流程：如果用户必须理解多个参数才能继续，空状态式的极简就掩盖了必要的信息。

在这些场景里，不应该机械套用黑洞设计语言，而是可以参考它的“信息优先级”原则，但适度放宽对装饰和信息量的限制。

5.3 成熟设计语言的真正标志：可以不需要再改

一个设计语言是否成熟，不在于视觉上有多惊艳，也不在于包含多少组件，而在于当团队面对新需求时，能否基于现有规则做出决策，不需要每次都从头讨论。

黑洞设计语言给团队带来的最大价值，不是一套黑色主题的组件库，而是三个判断标准：

• 这个元素承担什么信息？如果不承担，就移除。
• 这个动作是不是当前页面的核心引力？如果不是，就降低权重。
• 这个反馈用户能否明确感知？如果不能，就补上明确状态。

当这三个标准变成团队共识时，你不需要再为一个按钮画几版对比，不需要为一个空状态反复开会。设计语言里的“完美”，不是说它无法被挑战，而是说它在特定约束下已经自洽，加一个元素会引起连锁调整，删一个元素也会引起连锁调整。

就像黑洞本身，它不需要更多装饰来证明自己是黑洞。它的存在，已经改变了周围一切事物的运动方式。好的设计语言也是这样：它不需要讨好所有人，却能让使用它的人，在每一个需要做选择的时刻，都清楚地知道下一步在哪里。这也正是我认为“黑洞的设计语言已经很完美了，不需要再改”的底层原因。