手机端的详情页设计成功与否，直接作用于了商品的成交量。本文从对齐、亲密性、对比和重复四大版面设计的原则切入，细致入微地分析了不同情况下如何将版面设计的四大原则运用于手机端的详情页。推荐感兴趣的童鞋们阅读学习～
关于手机端的详情设计，版式可以说是设计师必须要掌握的核心能力，因为详情页是讲产品的详细内容，只有合理的图文排版才能让用户更好的读内容。而说到版式，就必须先提 4 条基本原则，这些原则一直都是版式教程的必讲知识点，有大量文章和书籍都做过详细介绍，不过根据设计类型的不同会有出入，这里我就结合手机端的浏览体验，来讲讲 4 原则的运用，版式设计的 4 条原则分别是：对齐、亲密性、对比和重复。
这是由美国设计师 Robin Wulliams（罗宾·威廉姆斯）在《写给大家看的设计书》中首次提出，准确讲这 4 条原则更侧重排版设计，可以说几乎所有排版中，都要用到该原则，它是排版“心法”，更是需要遵循的基础准则，并且 4 条原则都不是孤立存在，通常会结合使用，很少有作品只用其中某条原则。
对齐很好理解，就是将内容用某种对齐规则进行排列，使它们产生视觉联系，这样画面会显得规整和严谨。如图所示，尽管只是简单的文字对齐，但画面却有明显差异：没对齐的左图文字非常混乱，让人不适；而对齐的右图文字井然有序，便于阅读。
根据对齐规则不同，常见对齐方式有以下 5 种。
左对齐是以左线为基准的对齐，这是最常用的对齐方式，当我们浏览横向排版的信息时，左对齐更符合视线从左往右的阅读习惯，因此广泛用于标题和内文的排版当中。
居中对齐是以中线为基准的对齐，也是一种对称均衡的布局方式，对于手机端，常用于标题排版，当然有些文字不多的内文偶尔也会用到，因为手机版面的宽度偏窄，当标题居中对齐后，既不影响阅读，也能让视觉平衡、舒适。
左右对齐是让两端以左右线为基准同时对齐，这种对齐最为工整，常用于文字较多的内文排版，如下图，左右对齐能将大段文字变成方形，整齐有序，利于阅读。另外如果内文配有图片，最好也和文字两端对齐。
对于内文的左右对齐，还需注意“避头尾”，避头尾是说文中的标点符号尽量不出现在行首或行尾，因为首尾的标点会让文字出现空缺，影响整齐程度。
其实标题有时也能左右对齐，通过对齐将文字图形化、块面化，这样能增强画面的形式感，如下图所示。
右对齐是以右线为基准的对齐，这种对齐和我们视线的移动路径刚好相反，使得阅读没那么方便，因此不管标题还是内文，用的都相对较少。如下图，当画面的留白靠右或有特殊的版式需求时，才会用到右对齐。
顶对齐是以顶端为基准的对齐，这是竖向排版才有的对齐方式，而竖向排版常用于中国风中，虽然阅读不便，但能体现古典和文艺，可以说顶对齐是国风排版的专属对齐。
总结一下，对于手机端，标题常用左对齐或居中对齐；而内文若文字偏少用左对齐、偏多则用左右对齐；竖向排版优先顶对齐。但这是一般情况，实际还需根据版面做灵活调整。
最后提下“绝对对齐”和“视觉对齐”，一般我们都用软件的对齐工具进行对齐，而软件的衡量方式是以元素边界为基准，这是“绝对对齐”，例如下面这段文字用的就是软件工具的“绝对对齐”。
从物理角度看，上面三行文字已完全对齐，但从视觉角度看却没有，我们会觉得第二行文字“原产地鲜果”偏右了一点点，这是因为字体大小、字形结构的差异让我们产生“视错觉”，此时要从人眼感知出发，对文字进行适当修正，把“原产地鲜果”往左偏移一点，这样看起来才是对齐的，如下图所示，这就是“视觉对齐”。
显而易见，设计讲的都是“视觉对齐”，不管文字还是图形，当用软件工具进行“绝对对齐”后，若视觉不齐，那一定要调整至“视觉对齐”。当然具体偏移多少并无固定数值，需要大家多多练习，提升设计感，将眼睛练成最好的测量工具。
亲密性是指文字间的关联性，简单说，就是内容的间距越小则关系越近；而间距越大则关系越疏，这和“格式塔原理”中的“接近性”相一致，一般我们会将相互靠近的内容当成一个组合，而把彼此远离的内容当成独立模块。如下图所示，左图内容的行间距一致，信息没层级，显得非常冗长，无法快速辨别关联性，不便于阅读；而右图则通过调整行间距，对信息进行层级的划分，分出了标题、内文和模块，这样读起来一目了然。
可见亲密性是要我们通过调整间距来对内容进行归类分组，这样信息才会层级分明、逻辑清晰，因此亲密性又叫“分组”。在实际运用中，常用间距有 4 种，从小到大依次是：字间距、行间距、段间距和模块间距，从文字到模块，它们的间距会越来越大，关联性也越来越弱，如下图所示。
字间距是指字与字间的距离，在内容排版中，字与字的关联性最强，间距也最小，不过随着字体减小，字距需逐步增大，即是说字距要根据字体大小及时做出微调，不要只用默认的 0。
一般来说，标题字体较大，间距要更紧凑，但要避免压缩过多而影响阅读，常规字距在-50— -20；而内文字体较小，间距则要适当宽松，但也不要过于宽松而影响内容的连贯性，常规数值在20—50，但数值只是参考，不要硬套，核心保证视觉和谐。
行间距是指一行文字的最底部到下行文字最底部的距离，但为了方便调整，平时只需观察行与行间的空白高度即可（以下简称“行间空白”）。
在关联性上，行仅次于字，实际排版时，行间空白需大于字间距才能保证内容的易读性，否则会让阅读顺序产生混乱，如下图所示。
和字距一样，行间空白也需随着字体减小而增大，常规来说，标题的行间空白最好小于半个字高；而内文的行间空白建议为半个字高到 1 个字高，这样的疏密程度看着舒适透气、阅读流畅。
3. 段间距
段间距即指段落与段落之间的距离，当内文需要分段时，就要注意调节段距，一般段距需远大于段落的行间空白才行。同样若字体减小，段距还要更大，常规是 2 到 3 个字高，如下图所示，这样内容层次才易区分，排版也更透气。
不过手机端由于版面受限，用户又是扫读信息，因此详情页的文字都不会太多，所以段间距总体使用较少。
模块间距是指不同模块间的距离，其中模块是泛指，在版面中任何一个相对独立的组合都算一个模块，这里组合可小可大，具体需按实际排布做灵活划分。但不管大组合还是小组合，都相对独立，所以模块的关联性最弱，间距最大。
如下图，在日常排版中，常见模块间距有主标题和副标题的间距、标题和内文的间距、文字和图片的间距等等，其中间距数值并无具体建议，因为随着版式变化，差异往往较大，最好根据需求和感受灵活而定，但总体来说，间距要大于字距、行距和段距；另外随着版面缩小，模块间距还要适当增大。
总之在手机端的排版设计中，运用亲密性就是对内容进行梳理和分层，实现视觉逻辑化，而调节字/行/段/模块间距则是核心手段。注意这 4 种间距还有一个共同特性，就是随字体减小，间距需逐渐增大，这是因为字体越小越显拥挤，这时通过加大间距可增加透气性。
关于对比，本书已多次提到，从元素对比、色彩对比再到明暗对比等等，可见设计中对比是无处不在，而本小节说的则是“版式对比”，其本质是让内容之间差异化，形成视觉反差。如果说“亲密性”是让信息的层次更清晰，那“对比”就是让信息的主次更分明，例如下图中，文字都已左对齐，也通过间距划分了层次（亲密性），但整体依然逻辑不清、没有重点。
当我们通过调整字体大小和粗细分出主标题、副标题和内文后，这时文字马上有了主次，视觉也更具变化和冲击，一个小小改动就有如此效果，可见对比原则的重要性。
另外日常运用时，对比程度最好强烈些，尽可能让差异化明显，这样才能突出内容重点，有效传递关键信息，也让版式更有变化，不至于平淡乏味。那版式对比的方式有哪些？其实很多，可以说只要能改变的地方就能对比，这里就提常见的 4 种：大小对比、粗细对比、字体对比和色彩对比，这些对比主要侧重文字排版。接下来我会通过一段文字的逐步调整，让大家了解 4 种对比的使用，下面先看看还未调整的版面示意，图中文字目前只是居中对齐并简单分成了 2 组，能看到信息没有重点，画面也不协调。
通过改变字体大小形成差异化，注意前面提到“让差异尽量明显”，现在用字体大小来说，就是“大字要更大，小字要更小”，因为反差太小的对比会让主次模棱两可。但在手机端，若画面宽度是 750px（手机端的常规宽度），那最小字体也尽量不小于 20pt，不然会识别困难，违背易读性。现在我们来调整案例的文字大小，如下图，字体最大的是主标题，其次是副标题，最后才是内文小字，要保证主标和内文的大小有着数倍差距，这样主次才清晰。
粗细是说字体的笔画粗细，即字重。有些字体会有多种字重，就是为了方便我们根据不同内容选择合适字重。一般标题要粗，而内文要细，但不绝对，只是一个常规用法，可见字体大小和粗细常常会同时使用。如下图，当文字有了粗细变化后，信息层级会进一步加强，视觉也更均衡。
就是用 2 种以上的字体来形成字形反差，这是形状对比的一种，不同字体的穿插能丰富画面层次、提升设计感，但核心要能根据风格及编排选择类型和气质都匹配的字体。还要注意详情页中，字体数量最好不超过 3 种，若种类太多会让页面过于花哨，反而影响美感和阅读。再回到之前案例，由于画面体现的是科技感和运动风，因此将主标题改为“黑体+动感”的“站酷高端黑”，这样主标题更突出、也更有冲击力。
色彩对比最直观，也易出效果，但前提是要选择合适的配色方案。简单说色彩分无彩色和有彩色 2 大类，其中无彩色（黑色、白色、灰色）在文字的排版中非常常见，因为无彩色白搭，能让信息呈现清爽明了，因此本文的大部分文字都以无彩色为主；当然有彩色在排版中也必不可少，但很多时候不宜使用过多，主要作为点缀和无彩色进行搭配。下方案例中，由于背景是深色，所以标题采用高纯度的天蓝色，这样会和主视觉形成呼应，而内文则用浅灰色，内容清晰但不抢标题。
总之文字用了以上 4 种对比后，版面更加均衡，信息更有层次，主次也更分明。另外 4 种对比很少单独存在，都是组合使用，如下图，多种对比让文字更有表现力，但切忌使用过度，需根据要求做出适当组合。
大小对比+粗细对比+字体对比+色彩对比 大小对比+粗细对比+色彩对比 大小对比+粗细对比
截自第一卫天猫旗舰店详情页
截自美的生活电器天猫旗舰店电压力锅详情页
重复是让某些规则或元素在排版时反复使用，核心为了版式更加统一、整体、有序。例如下图中，共有两个版块，单看任何一个，文字排版都无太大问题，但两个衔接一起时，就会发现标题、内文的大小并不一致，对齐方式也有两种，这样排版就不统一，缺少整体性和必要关联性。
当我们用“重复”作简单调整：统一上下版块的文字大小和对齐方式后，马上就协调很多，图文排版也有章可循，整体工整、有条理。
可见对详情页这种长图而言，由于是多版块组合而成，因此“重复原则”就显得尤为重要：事先设定一个排版规则，比如内容的对齐方式、间距疏密、字体选择、大小粗细、色彩搭配等等，然后让每个版块都在这个大规则下进行编排，这样就能避免杂乱无章，使版面井然有序。
当然“排版重复”除了用于版块间，有时也用在每个版块中，比如常见的形状重复，如下图所示，若打算用圆角矩形（左图），那所有形状最好都统一成圆角，包括标题中的色块图形；若是直角矩形（右图），那就统一成直角。这样版面才更整体，也更协调。
其实“重复”和“对比”刚好是设计的 2 个对立面：“重复”追求统一，而“对比”则追求变化，看似矛盾，实则相辅相成。可以说版式设计就是一个将统一与变化相互结合的过程。详情页也一样，用“重复”让版式变的规整有序，再用“对比”来打破过多重复产生的单调感，适当制造差异化。
例如下方案例，虽然都用重复进行了统一编排，但也用对比使其产生了微妙变化，像左一、左二中图文位置的变化，左三中对齐方式的变化都是为了让重复排版没那么单调乏味。
截自百雀羚天猫旗舰店护肤套装详情页｜花西子天猫旗舰店蜜粉详情页｜第一卫天猫旗舰店充电线详情页
至此版式设计 4 原则（对齐、亲密性、对比、重复）就全部讲完了，正是这些原则让版式变的条理清晰、视觉均衡、便于阅读。若再回看每条原则所展示的案例，会发现所有案例其实都是几条原则的综合使用，它们无法独立存在，排版时要同时考虑、综合使用，总之忽视任何一条原则都可能让版式出现明显问题。
本文节选自作者书籍《移动端卖货式设计：适配手机屏的电商设计法则与实战应用（上下册）》
作者：卢维贤
来源：https://www.uisdc.com/phone-detail-page-layout-principle
本文由@卢维贤 授权发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。