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

关于手机真个详情设计，版式可以说是设计师必须要节制的核心能力，由于详情页是讲产品的详细内容，只有合理的图文排版才能让用户更好的读内容。

而说到版式，就必须先提 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 原则（对齐、亲密性、比拟、重复）就全部讲完了，正是这些原则让版式变的条理清晰、视觉均衡、便于阅读。
若再回看每条原则所展示的案例，会创造所有案例实在都是几条原则的综合利用，它们无法独立存在，排版时要同时考虑、综合利用，总之忽略任何一条原则都可能让版式涌现明显问题。

本文节选自作者书本《移动端卖货式设计：适配手机屏的电商设计法则与实战运用（高下册）》

作者：卢维贤

来源：https://www.uisdc.com/phone-detail-page-layout-principle

本文由@卢维贤 授权发布于大家都是产品经理，未经容许，禁止转载。

题图来自Unsplash，基于CC0协议