审美的逻辑 · ISSUE 021 · 2026-06-23

分隔线:为什么线越多,页面反而越乱

分隔线看起来是很小的东西。可很多页面、菜单和价签之所以显得累,不是内容太多,而是每一条线都在抢着证明自己有用。

日常设计版式5 分钟

线很多

手冲咖啡浅烘 / 花香 / 柑橘42 冷萃咖啡低酸 / 顺滑 / 玻璃瓶38 燕麦拿铁热 / 冰 / 可少糖36

每一行都被线压住,信息之间像被切开。读者看见的不是秩序,而是一连串硬边。

线更少

手冲咖啡浅烘、花香、柑橘。42 冷萃咖啡低酸、顺滑,适合慢慢喝。38 燕麦拿铁奶感更轻,可做冰饮。36

线退到辅助位置,组距和对齐开始工作。页面安静了,比较反而更容易。

01 · Start here

分隔线最容易被误用,因为它给人一种“我把信息整理好了”的错觉。

你打开一个手机设置页、外卖菜单、收银小票、后台表格,常常会看到很多细线。横线、竖线、边框、浅灰底、卡片边缘,像一群很勤奋的标点。它们的本意是帮你看清楚,但数量一多,反而让页面变紧、变硬、变碎。

问题不在于线不能用。线当然有用。它能切开两组信息,能强调边界,能让比较变得稳定。问题是:很多线只是因为设计者不放心,才被加上去。好像没有线,信息就会散;没有框,内容就不够正式。

真正舒服的页面,通常不是没有分隔,而是分隔方式有轻重。能用距离解决的,不急着用线;能用对齐解决的,不急着用框;只有关系真的需要被切开时,线才出来说一句话。

分隔线强弱与信息分组图解 展示线、间距、对齐、底色和空白在信息分隔中的不同强度。 DIVIDERS ARE VOLUME CONTROLS 分隔线不是默认装饰,而是信息关系的音量控制。 线太重:所有边界同时出现 名称价格 名称价格 名称价格 名称价格 名称价格 线变轻:先用距离,再用边界 咖啡 42 浅烘,酸度明亮 冷萃 38 低酸,适合慢喝 燕麦拿铁 36 奶感更轻,可做冰饮 判断顺序:先看信息是否已经靠距离、对齐和字重形成分组。还不够清楚时,再加线。
图解:同样是三条信息,硬线越多,眼睛越忙。分隔线最好像小声提醒,而不是把每一项都用力切开。
02 · Volume

线其实有音量

一条黑色粗线的音量很大。它会告诉你:这里是强分界,前后不是一组。浅灰细线的音量小一些,它只是在提醒你:这里有一个轻微停顿。没有线,只靠距离,也是一种分隔,只是更安静。

很多页面的问题,是把所有边界都调到同一个音量。标题下面一条线,段落外面一个框,卡片里又有横线,列表项之间再来几条线。最后页面确实被分开了,但人的注意力也被切碎了。

线一旦太多,读者会先看见结构的痕迹,再看见内容。就像一张桌子上摆了很多标签、夹子和胶带,你知道它被整理过,但不一定更想靠近。

线不是秩序本身。线只是秩序不够清楚时的最后一层提示。
03 · Distance

能用距离解决的,先别急着画线

最自然的分隔,往往是距离。两个信息靠得近,我们会觉得它们相关;离得远,我们会觉得它们进入了下一组。这比线更接近日常观看经验。

比如一张价目表,菜名和描述之间可以靠小间距形成从属关系;两道菜之间可以靠稍大的组距区分;不同分类之间再留出更大的空白。这样读者会顺着空间关系理解内容,而不是被一条条线拦住。

线当然可以保留。但它最好只出现在组与组之间,或者需要稳定比较的位置。列表中每一项都画满线,常常不是清楚,而是缺少信任。

04 · Rules

五个立刻能用的分隔线判断

下次看到一个页面显得乱,不妨先别怪颜色和字体。把线当成声音,听一听它们是不是都在抢话。

01 先删一半线

如果删掉后信息仍然分得清,说明原来的线只是紧张感,不是必要结构。

02 分组靠距离

同组内容近一点,不同组内容远一点。空间关系比硬边更柔和,也更耐看。

03 线要有轻重

大组之间可以重,小项之间要轻。所有线一样重,页面就没有呼吸。

04 别让框套框

外面已有边界,里面就少用边界。多层框会让内容像被困住。

05 颜色别太脏

浅灰线如果太多,会把页面染成一层灰。宁可少用,也不要让背景变浑。

05 · Scenes

三个今天就能观察的场景

手机设置页

好的设置页会让线很轻,更多靠组距和标题提示关系。线太重时,页面会像表格,不像工具。

咖啡店价目表

价格需要可比,但不必每一行都被框住。统一对齐加少量细线,通常比满版格子更舒服。

超市价签

价签本身已经有边界,内部再加很多分割线会显得廉价。数字、单位和说明的层级更重要。

06 · Mistakes

分隔线常见的三个误会

以为线越细越高级

细线如果太多,仍然会让页面变灰。高级感不是把所有线调细,而是知道哪些线可以消失。

以为卡片一定要有边框

卡片可以靠背景、留白、阴影、标题位置或内容密度成立。边框只是其中一种办法,不是身份证。

以为没有线就会乱

没有线时,真正的问题会暴露出来:间距是否合理,对齐是否稳定,标题和正文有没有层级。线有时只是把这些问题盖住。

07 · Practice

今天的观察练习

找一个你今天会反复看的页面:手机设置、外卖菜单、收银小票、会议表格都可以。只观察里面的线。

01

先数一数:这个页面里有多少种线?横线、竖线、边框、底色边界都算。

02

挑三条线问自己:如果删掉它,信息还分得清吗?如果可以,它可能只是多余的紧张感。

03

找一个真正有用的分隔:它通常会出现在大组之间,或者帮助你比较同一类信息。

一条好线,不是为了证明页面被整理过,而是让读者少停顿一次。