手机详情页如何卖爆货？先掌握经典的版式四原则！

至于移动终端的详细设计，布局可以说是设计师必须掌握的核心能力，因为详细页面是关于产品的详细内容，只有合理的图形排版才能让用户更好地阅读内容。说到布局，我们必须首先提到它 4 基本原则，这些原则一直是布局教程的必要知识点，有大量的文章和书籍详细介绍，但根据不同的设计类型，这里我将结合手机浏览体验，谈谈 4 应用原则、布局设计 4 条原则分别是：对齐、亲密、对比和重复。

这是由美国设计师设计的 Robin Wulliams(罗宾·威廉姆斯)在《给大家看的设计书》中首次提出，准确地说 4 条原则更注重排版设计。可以说，这一原则几乎应用于所有的排版。它不仅是排版的“心法”，也是需要遵循的基本标准 4 条原则不是孤立存在的，通常是结合使用的，很少有作品只使用一个原则。

对齐

对齐很容易理解，就是用一定的对齐规则来安排内容，让它们产生视觉联系，让画面看起来整洁严谨。如图所示，虽然只是简单的文字对齐，但画面有明显的区别:不对齐的左图文字非常混乱不舒服；对齐的右图文字井然有序，易于阅读。

根据不同的对齐规则，常见的对齐方法如下 5 种。

1. 左对齐

左对齐是基于左线的对齐，这是最常用的对齐方法。当我们浏览水平排版信息时，左对齐更符合从左到右的阅读习惯，因此广泛应用于标题和文本的排版。

2. 居中对齐

中间对齐是基于中间线的对齐，也是一种对称平衡的布局，对于手机，常用于标题排版，当然，一些文本偶尔会使用，因为手机布局宽度窄，当标题对齐时，既不影响阅读，也能使视觉平衡、舒适。

3. 左右对齐

左右对齐是在左右线的基础上同时对齐两端。这种对齐是最整洁的，通常用于更多文本的内部排版。如下图所示，左右对齐可以将大段文本变成方形，整洁有序，有利于阅读。此外，如果内部文本配备了图片，最好与文本的两端对齐。

对于内文的左右对齐，也要注意“避开头尾”。避开头尾意味着文本中的标点符号尽量不出现在行头或行尾，因为标点符号的头尾会使文本空缺，影响整洁度。

事实上，标题有时可以左右对齐，通过对齐可以增强图片的形式感，如下图所示。

4. 右对齐

右对齐是基于右线的对齐。这种对齐与我们视线的移动路径正好相反，使得阅读不那么方便。因此，无论是标题还是内文，使用都相对较少。如下图所示，右对齐只能在图片空白右侧或有特殊布局要求时使用。

5. 顶对齐

顶部对齐是基于顶部的对齐，这是垂直排版的对齐，垂直排版通常用于中国风格，虽然阅读不方便，但可以反映古典和文学艺术，可以说顶部对齐是国家风格排版的独家对齐。

综上所述，对于手机端，标题通常是左对齐或中对齐；如果文本较少，则左对齐和左对齐；垂直排版优先考虑顶对齐。但这是一般情况，实际上需要根据布局进行灵活的调整。

最后，我们提到了“绝对对齐”和“视觉对齐”。一般来说，我们使用软件对齐工具进行对齐，软件的测量方法是基于元素边界，这是“绝对对齐”。例如，以下文本使用软件工具的“绝对对齐”。

从物理的角度来看，以上三行文本已经完全对齐，但从视觉的角度来看，我们会觉得第二行文本“新鲜水果”有点右，这是因为字体大小，字体结构让我们产生“视觉错觉”，此时从人眼感知，适当修改文本，“新鲜水果”向左，所以看起来对齐，如下图所示，这是“视觉对齐”。

显然，设计讲的是“视觉对齐”，无论是文字还是文字图形，当使用软件工具进行“绝对齐”时，如果视觉不均匀，则必须调整到“视觉对齐”。当然，具体的偏差并没有固定的值，我们需要练习更多，提高设计感，把眼睛练习成最好的测量工具。

亲密性

亲密是指文本之间的相关性。简单地说，内容间距越小，关系越近；间距越大，关系就越疏远，这与“格式塔原理”中的“接近”相一致。一般来说，我们将相互接近的内容作为一个组合，并将相互远离的内容作为一个独立的模块。如下图所示，左图中的行间距相同，信息没有层次，非常冗长，无法快速识别相关性，不易阅读；右图通过调整行间距，将信息分为标题、内文和模块，一目了然。

可以看出，亲密关系要求我们通过调整间距来对内容进行分类和分组，使信息层次分明，逻辑清晰，因此亲密关系也被称为“分组”。在实际应用中，常见的间距是 4 从小到大，字间距、行间距、段间距、模块间距都会越来越大，从文字到模块的相关性也会越来越弱，如下图所示。

1. 字间距

字间距是指字与字之间的距离。在内容排版中，字与字之间的相关性最强，间距最小。然而，随着字体的减少，字距需要逐渐增加，即字距应根据字体的大小及时微调，而不仅仅是默认的 0。

一般来说，标题字体更大，间距更紧凑，但为了避免过度压缩和影响阅读，传统字距为-50— -20；内部字体较小，间距应适当宽松，但内容的连贯性不应过于宽松。传统值为20-50，但值仅供参考。不要坚持下去。核心是确保视觉和谐。

但是有时为了增强版面的形式感，还会刻意增加字距，使其非常宽松，此时更多的是考虑视觉美而不是易读性。

2. 行间距

行间距是指从一行文字底部到下行文字底部的距离，但为了便于调整，通常只需观察行间的空白高度（以下简称“行间空白”）。

在相关性方面，行仅次于单词。在实际排版中，行间空白应大于单词间距，以确保内容的可读性，否则阅读顺序将混淆，如下图所示。

和字距一样，行间空白也需要随着字体的减少而增加。一般来说，标题的行间空白最好小于半个字高；建议内文的行间空白为半个字高 1 单词高，这种密度看起来舒适透气，阅读流畅。

3. 段间距

段距是指段落与段落之间的距离。当内文需要分段时，应注意调整段距。一般来说，段距应该远远大于段落的行间空白。同样，如果字体减小，段距应该更大。传统是 2 到 3 单词高，如下图所示，内容层次容易区分，排版更透气。

然而，由于手机的布局有限，用户扫描信息，所以细节页面的文本不会太多，所以整体间距使用较少。

4. 模块间距

模块间距是指不同模块之间的距离，其中模块一般是指布局中任何相对独立的组合都是一个模块。这里的组合可以小也可以大，需要根据实际布局灵活划分。但是大组合和小组合都比较独立，所以模块的相关性最弱，间距最大。

如下图所示，在日常排版中，常见的模块间距包括主标题和副标题之间的间距、标题和文本之间的间距、文本和图片之间的间距等。没有关于间距值的具体建议，因为随着布局的变化，差异往往很大。最好根据需要和感觉灵活确定，但一般来说，间距应大于字距、行距和段距；此外，随着布局的缩小，应适当增加模块间距。

简而言之，在移动终端的排版设计中，使用亲密度是对内容进行梳理和分层，实现视觉逻辑，调整单词/行/段/模块间距是核心手段。请注意这一点 4 种间距的另一个共同特点是，随着字体的减小，间距需要逐渐增加，因为字体越小，就越拥挤。此时，通过增加间距，可以增加透气性。

对比

关于对比，本书多次提到，从元素对比、色彩对比到明暗对比等，可以看出设计中的对比无处不在，本节是“布局对比”，其本质是区分内容，形成视觉对比。如果“亲密”是为了使信息的水平更清晰，那么“对比”是为了使信息的主次更清晰。例如，在下图中，文本已经左对齐，层次（亲密）也通过间距划分，但整体逻辑仍然不清楚，没有焦点。

当我们通过调整字体大小和厚度来划分主标题、副标题和内部文本时，文本立即有主次，视觉变化和影响更大，一个小的变化就有这样的效果，这表明了比较原则的重要性。

此外，在日常使用中，比较程度应尽可能强烈，使差异化尽可能明显，突出内容重点，有效传递关键信息，使布局更加变化，不枯燥。布局比较的方法是什么？事实上，有很多。可以说，只要你能改变它们，你就可以比较它们。这里有一些常见的东西 4 种类：尺寸对比、厚度对比、字体对比和颜色对比，这些对比主要集中在文本排版上。接下来，我将逐步调整一段文本，让你理解 4 对比的使用，我们先来看看还没有调整的布局示意图。目前图中的文字只是居中对齐，简单分为 2 组，可以看到信息没有重点，画面不协调。

1. 大小对比

通过改变字体大小形成差异化，请注意上述“使差异尽可能明显”。现在，就字体大小而言，它是“大字应该更大，小字应该更小”，因为对比度太小会使主次模棱两可。但在手机上，如果图片宽度是 750px(手机端的常规宽度)，最小字体尽量不小于 20pt，否则很难识别，违反易读性。现在让我们调整案例的文本大小。如下图所示，字体最大的是主标题，其次是副标题，最后是内文小字。我们应该确保主标题和内文之间存在几倍的差距，以便主要和次要标题是清晰的。

2. 粗细对比

厚度意味着字体的笔画厚度，即字重。有些字体会有多种字重，只是为了方便我们根据不同的内容选择合适的字重。一般标题比较粗，内文比较细，但不是绝对的，只是常规用法，说明字体的大小和粗细经常同时使用。如下图所示，当文本粗细发生变化时，信息水平会进一步加强，视觉会更加均衡。

3. 字体对比

就是用 2 以上字体形成形状对比，是形状对比的一种。不同字体的穿插可以丰富画面层次，增强设计感，但核心应该能够根据风格和安排选择类型和气质相匹配的字体。还要注意字体数量最好不要超过详细信息页面 3 种类，如果种类太多，页面会太花哨，但会影响美感和阅读。回到之前的案例，因为画面反映了科技感和运动风格，所以主标题被改为“黑体+动态”的“酷高端黑”，使主标题更加突出和有影响力。

4. 色彩对比

色彩对比最直观，也容易产生效果，但前提是要选择合适的配色方案。简而言之，颜色分为无色和彩色 2 主要类别，无色（黑色、白色、灰色）在文本排版中很常见，因为无色无用，可以使信息清新清晰，所以本文大部分文本主要是无色；当然，彩色在排版中也是必不可少的，但大多数时候不应该使用太多，主要作为装饰和无色搭配。在下面的情况下，由于背景是深色的，标题是高纯度的天蓝色，这将呼应主视觉，而内部文本是浅灰色的，内容清晰，但不抓住标题。

总而言之，上面的文字是用来的 4 对比之后，布局更加平衡，信息更加层次分明，主次分明。此外， 4 种对比很少单独存在，都是组合使用。如下图所示，各种对比使文本更具表现力，但不要过度使用，需要根据要求进行适当的组合。

尺寸对比+厚度对比+字体对比+颜色对比。 尺寸对比+厚度对比+颜色对比。 大小对比+厚度对比

截取第一卫天猫旗舰店手机壳详情页面   截截至第一卫天猫旗舰店充电线详细信息页面

截至美国生活电器天猫旗舰店电压锅详情页面

重复

重复是在排版过程中重复使用一些规则或元素，其核心是使布局更加统一、整体和有序。例如，在下图中，有两个部分。单看任何一个，文本排版都没有大问题，但当两个连接在一起时，你会发现标题和内部文本的大小不一致，有两种对齐方法，使排版不统一，缺乏完整性和必要的相关性。

当我们简单地调整“重复”：统一上下部分的文本大小和对齐时，我们立即协调了很多，图形排版也有规则可循，整体整洁有序。

可以看出，对于详细信息页面的长图片，因为它是由多个部分组成的，所以“重复原则”尤为重要：提前设置排版规则，如内容对齐、间距密度、字体选择、尺寸、颜色搭配等，然后让每个部分在这个大规则下，以避免混乱，使布局有序。

当然，“排版重复”有时用于每个部分，如常见的形状重复，如下图所示，如果计划使用圆角矩形（左图），所有形状最好统一为圆角，包括标题中的色块图；如果是直角矩形（右图），则统一为直角。这样，布局就会更加整体和协调。

事实上，“重复”和“对比”只是设计的 2 对立面：“重复”追求统一，“比较”追求变化，看似矛盾，实际上相辅相成。可以说，布局设计是一个将统一与变化相结合的过程。详细信息页面也是如此。使用“重复”使布局整洁有序，然后使用“比较”打破过度重复产生的单调感，适当制造差异化。

例如，在下面的情况下，虽然重复统一安排，但也使用比较产生微妙的变化，如左一、左二图形位置的变化，左三对齐模式的变化是使重复排版不那么单调。

截至百雀羚天猫旗舰店护肤套详细信息页面 截获花西子天猫旗舰店蜜粉详细信息页面 截截至第一卫天猫旗舰店充电线详细信息页面

总结

至此布局设计 4 原则（对齐、亲密、对比、重复）已经完成，正是这些原则使布局清晰、视觉平衡，易于阅读。如果你回顾每个原则中显示的案例，你会发现所有的案例实际上都是几个原则的综合使用，它们不能独立存在。在排版过程中，应同时考虑和综合使用。简而言之，忽略任何原则都可能导致布局出现明显的问题。

本文摘自《移动终端销售商品设计：适合手机屏幕的电子商务设计规则与实际应用（上下册）》。这本书是作者12年经验的沉淀。656页干货内容与22小时案例讲解视频相匹配，只教您有效设计移动终端可以销售商品