手淘详情页如何设计布局可卖爆?把握版式设计四项基本原则视觉提高50%

手淘无线端详情页如何设计布局可卖爆?把握版式设计四项基本原则视觉提高50%，淘宝手机端详情页设计有技巧，一篇非常齐全的详情页设计知识快来学习，关于手机端的详情设计，版式可以说是设计师必须要掌握的核心能力，因为详情页是讲产品的详细内容，只有合理的图文排版才能让用户更好的读内容。而说到版式，就必须先提 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 原则（对齐、亲密性、对比、重复）就全部讲完了，正是这些原则让版式变的条理清晰、视觉均衡、便于阅读。若再回看每条原则所展示的案例，会发现所有案例其实都是几条原则的综合使用，它们无法独立存在，排版时要同时考虑、综合使用，总之忽视任何一条原则都可能让版式出现明显问题。

以上就是今天分享的所有内容了，关注疯狂的美工官网，网站上每天分享不同设计干货内容哟。