商品详情页(拼多多详情页怎么制作)

手机详情页的设计成功与否，直接影响到商品的成交量。从对齐、亲密、对比、重复这四个布局原则出发，详细分析了在不同情况下，如何将这四个布局原则运用到手机详情页中。推荐感兴趣的童鞋阅读学习~

关于手机的细节设计，布局可以说是设计师必须掌握的核心能力，因为细节页面讲的是产品的详细内容，只有合理的图文布局才能让用户更好的阅读内容。说到格式，首先要提到四个基本原则。这些原理一直是格式教程中的必修知识点，大量文章和书籍都有详细介绍。但是根据不同的设计类型会有差异。这里我就根据手机的浏览体验来谈谈四大原则的应用。版式设计的四个原则是:对齐、亲密、对比和重复。

这是美国设计师罗宾·伍廉姆斯(robin williams)在《为每个人设计书》中首次提出的。准确的说，这四个原则更侧重于排版设计。可以说几乎所有的排版都在用这个原理。是排版的“心法”，也是要遵循的基本原则。而且四个原则并不是孤立的，通常是结合使用的。很少有作品只用其中一种。

一、对齐

对齐很好理解，就是把内容按照一定的对齐规则进行排列，让它们有视觉上的联系，这样画面才会显得规整严谨。如图，虽然文字简单对齐，但图中有明显的区别:左边没有对齐的文字很混乱，很不舒服；右边对齐的文本是有序的，易于阅读。

根据对齐规则的不同，常见的对齐方式有以下五种。

1.左对齐左对齐是基于左线的对齐，是最常用的对齐方式。当我们浏览横向排版信息时，左对齐更符合视线从左向右的阅读习惯，因此在标题和故事的排版中被广泛使用。

2.居中对齐居中对齐是基于中心线的对齐，也是一种对称平衡的布局。对于手机来说，常用于标题排版。当然偶尔会用一些字数不多的文字，因为手机版面宽度较窄。当标题居中时，既不会影响阅读，又能使视觉平衡和舒适。

3.左右对齐左右对齐是以左右线为基准同时对齐两端。这种对齐方式最工整，常用于文字较多的文章排版。如下图，左右对齐可以把大段文字变成方块，整齐有序，便于阅读。另外，如果文字配有图片，最好是文字两端对齐。

对于文字的左右对齐，也要注意“避免头尾”。避免头尾是指文本中的标点符号尽量不要出现在行首或行尾，因为首尾的标点符号会使文本显得空缺失，影响整洁。

其实标题有时候是可以左右对齐的。通过对齐，文字可以图形化、块状化，可以增强画面的形式感，如下图所示。

4.右对齐右对齐是基于右线的对齐。这种排列正好与我们视线的移动路径相反，使得阅读不太方便。所以不管是标题还是正文，用的都比较少。如下图，只有当图片的空白处在右边或者有特殊布局要求时，才会使用右对齐。

5.顶部对齐顶部对齐是以顶部为基准的对齐，是竖排唯一的对齐方式，而竖排常用于中文风格。虽然不方便阅读，但能体现古典文艺，可以说顶对齐是民族风格排版的专属对齐。

总结一下，对于手机来说，标题通常是左对齐或者居中；但是，内部文若字符左对齐的较少，左对齐的较多；垂直排版优先于顶部对齐。但这是一般情况，需要根据布局灵活调整。

最后提到“绝对对准”和“视觉对准”这两个词。一般我们使用软件对准工具进行对准，软件的测量方法是基于元素边界的，也就是“绝对对准”。例如，下面的段落使用了软件工具的“绝对对齐”。

从物理上看，上面三行字是完全对齐的，但从视觉上看，却不是。我们会觉得第二行“原产地鲜果”几个字稍微偏右。这是因为字体大小和字体结构的差异让我们产生了“视错觉”。这时候要从人眼的角度对文字进行适当的修正，将“原产地鲜果”左移，使其看起来对齐，如下图所示。

很明显，设计就是“视觉对齐”，不管是文字还是图形。用软件工具“绝对对齐”后，如果视觉不均匀，必须调整为“视觉对齐”。当然，具体的偏移量没有固定的数值，需要我们多多练习，提高设计感，让眼睛成为最好的测量工具。

二、亲密性

亲密度是指词语之间的关联性。简单来说，内容之间的距离越小，关系越密切。距离越大，关系越小，这与格式塔原则中的“接近”是一致的。一般我们会把距离较近的内容看成一个组合，而距离较远的内容看成一个独立的模块。如下图，左图内容行距一致，信息没有层次，显得非常冗长，无法快速识别关联性，阅读不便；右边通过调整行距，将信息分层，分标题、正文、模块，一目了然。

可视性要求我们通过调整间距来对内容进行分类分组，这样信息就会有层次，逻辑清晰，所以亲密度也叫“分组”。在实际操作中，常用的间距有四种，从小到大依次为:字间距、行间距、段间距、模块间距。从单词到模块，它们的间距会越来越大，关联性会越来越弱，如下图所示。

1.单词间距单词间距是指单词之间的距离。在内容排版中，字与字的相关性最强，间距最小。但随着字号的减小，字距需要逐渐增大，也就是说要根据字号及时微调字距。不要只使用默认的0。

一般来说，标题字体更大，间距更紧凑，但为避免过度压缩，影响阅读，常规字间距为-50-20；而内文较小，间距要适当宽松，但也不能太宽松，影响内容的一致性。常规值为20-50，但数值仅供参考，不要硬性设定，核心保证视觉和谐。

2. 行间距

行间距是指一行文字的最底部到下行文字最底部的距离，但为了方便调整，平时只需观察行与行间的空白高度即可（以下简称“行间空白”）。行距是指一行文字的底部到下一行文字底部的距离，但为了便于调整，只需要观察空的行间白高(以下简称“行间白空”)。

在关联性上，行仅次于词。在实际排版中，行距空应大于字距，以保证内容的易读性，否则阅读顺序会混乱，如下图所示。

就像字距调整一样，行距空也应该随着字体的减小而增加。一般来说，标题的行间留白空要小于半个字高；但正文行间的空留白建议半个字高到一个字高，读起来舒服、透气、流畅。

3.线段间距

段落间距是指段落之间的距离。当文本需要分段时，需要调整段落间距。一般来说，段落间距应该远大于段落行间的空空白。如果字号也缩小，间距会更大，一般2到3个字高，如下图所示，这样内容层次容易区分，排版也会更透气。

但由于手机版面有限，用户扫描信息，所以详情页的字数不会太多，所以段间距一般用的比较少。

4. 模块间距

模块间距是指不同模块之间的距离，其中模块是一个统称。布局中任何相对独立的组合都被认为是一个模块。这里的组合可大可小，需要根据实际安排灵活划分。而大小组合都是相对独立的，所以模块之间的相关性最弱，间距最大。

如下图，日常排版中，常见的模块间距有主标题与副标题间距、标题与正文间距、正文与图片间距等。其中对于间距值没有具体的建议，因为随着版面的变化，差别往往较大，最好能根据需要和感受灵活处理，但一般来说间距大于字距、行距和段落间距；另外，随着版图缩小，模块间距也要适当加大。

简而言之，在手机排版设计中，亲切感的运用就是对内容进行梳理和分层，以达到视觉逻辑，而调整字/行/段/模块之间的间距就是核心手段。注意，这四种间距有一个共同的特点，就是间距需要随着字体的减小而逐渐增大。这是因为字体越小越拥挤。此时可以通过加大间距来增加透气性。

三、对比

关于对比，这本书多次提到，从元素对比、色彩对比到明暗对比等等。，可见对比在设计中无处不在，而这一节讲的是“格式对比”，其实质是将内容进行区分，形成视觉对比。如果说“亲密”是让信息的层次更清晰，那么“对比”就是让主次信息更清晰。比如下图，所有的字都已经左对齐了，层次(亲密度)也用间距划分了，但整体还是没有逻辑，没有重点。

当我们通过调整字体大小和粗细来分离主标题、副标题和文字时，文字立刻变成主次，视觉变得更加多变和有冲击力。一个小小的改变就有这样的效果，可见对比原则的重要性。

此外，在日常使用中，最好有强烈的对比程度，使区别尽可能明显，从而突出内容的重点，有效传达关键信息，使版面更富变化而不沉闷。格式对比的方式有哪些？其实很多东西只要能改变，都是可以比较的。下面是常见的四种:大小对比、粗细对比、字体对比、颜色对比。这些对比主要集中在文字排版上。接下来，我将通过一段文字的逐步调整，让你了解四种对比的用法。再来看看还没调整的版面。目前图片中的文字只是居中，简单分为两组。可见信息不聚焦，画面不协调。

1.大小对比通过改变字体大小来形成差异化。请注意前面提到的“使差异尽可能明显”。现在用字体大小来说，就是“大字要大一点，小字要小一点”，因为对比度太小的对比会让主次模糊不清。但在手机上，如果屏幕宽度为750px(手机常规宽度)，最小字体不小于20pt，否则难以识别，违背易读性。现在，让我们调整案例的文本大小，如下图所示。最大的字体是主标题，其次是副标题，最后是正文的小字。要保证主标题和正文大小相差数倍，做到主次分明。

2.粗细对比粗细是指字体的笔画粗细，也就是字的粗细。有些字体有多个字重，只是为了方便我们根据不同的内容选择合适的字重。一般标题要厚，文字要薄，但也不绝对。这只是一种常规用法。可见字体大小和粗细往往是同时使用的。如下图所示，当文字粗细发生变化时，信息层次会进一步加强，视觉会更加平衡。

3.字体对比是用两种以上的字体形成字体对比，是形状对比的一种。不同字体的穿插可以丰富画面层次，增强设计感，但核心要能根据风格和版面选择类型和气质相匹配的字体。另外注意详情页，字体数量不要超过3种。如果种类太多，页面会太花哨，影响美感和阅读。回到之前的案例，因为画面体现了科技感和运动风格，所以主标题改为“大胆+动感”和“站酷高端黑”，让主标题更加突出，更有冲击力。

4.色彩对比色彩对比是最直观有效的，但前提是选择合适的配色。据说简单的颜色可以分为非彩色和彩色两类，其中非彩色(黑、白、灰)在文字的排版中非常常见。因为非彩色是白搭，可以让信息显得清新明朗，所以本文大部分文字都是以非彩色为主。当然，色彩在排版中也是必不可少的，但在很多情况下，也不宜过多使用，主要作为点缀来搭配无彩色。下面这个案例，因为背景是深色的，所以标题用了高纯度的天蓝色，会和主体视觉相呼应，而文字用了浅灰色，清晰但不抢标题。

简而言之，使用以上四种对比后，版面更均衡，信息更有层次，主次更分明。其他四种对比很少单独存在，都是组合使用。如下图所示，多种对比让文字更有表现力。但应避免过量使用，根据需要适当组合。

大小对比+粗细对比+字体对比+颜色对比大小对比+粗细对比+颜色对比大小对比+粗细对比

来自第一卫士天猫旗舰店详情页

梅捷家电天猫旗舰店电压力锅详情页

四、重复

重复是使排版中的某些规则或元素重复使用，核心是使版面更加统一、整体、有序。例如，在下图中，有两个部分。如果只是看任何一个，文字排版都没有大问题。但是当两个板块连在一起的时候，你会发现标题和正文的大小不一样，有两种对齐方式，以至于版面不统一，缺乏整体性和必要的关联性。

当我们用“重复”做一个简单的调整:统一了上下节的文字大小和对齐方式后，马上就会有很多协调，图文排版也有章可循，整体整齐有序。

可见，对于详情页这样的长图，“重复原则”尤为重要，因为它是多个版块的组合:事先设定一个排版规则，比如内容的对齐、间距、字体选择、大小、粗细、配色等。，然后让每一节都在这个大规则下排列，避免无序，让布局有序。

当然，“排版重复”不仅仅是用在版块之间，有时候也会用在每个版块中，比如常见的形状重复，如下图所示。如果打算用圆角矩形(左图)，最好把所有形状统一成圆角，包括题目中的色块图形；如果是直角矩形(右图)，统一成直角。只有这样，布局才能更加整体协调。

其实“重复”和“对比”只是设计的两个对立面:“重复”追求统一，“对比”追求变化，看似矛盾，实则相辅相成。可以说，版式设计是一个统一与变化相结合的过程。详情页也是如此。用“重复”让版面有规律有秩序，再用“对比”打破过度重复带来的单调，进行适当的区分。

比如下面的案例，虽然统一布局使用了重复，但是通过对比也做了微妙的变化，比如第一左和第二左的图形位置的变化，第三左的对齐方式的变化，都是为了让重复布局不那么枯燥。

百雀羚天猫旗舰店护肤套装详情页|花溪子天猫旗舰店蜜粉详情页| 1号薇天猫旗舰店充电线详情页

五、总结

至此，版面设计的四大原则(对齐、亲密、对比、重复)全部完成。正是这些原则使得布局清晰，视觉平衡，易于阅读。如果我们回头看每一个原理所展示的案例，就会发现所有的案例其实都是几个原理的综合运用，它们不可能独立存在。在排版时，要同时综合考虑和运用。简而言之，忽略任何一个原则，都有可能造成布局上的明显问题。

本文摘自作者的著作《手机销售设计:手机屏幕的电子商务设计法则及实际应用(上、下)》

作者:卢伟贤

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

本文由@卢伟贤授权发布。每个人都是产品经理。未经许可，禁止复制。

来自Unsplash的图像，基于CC0协议。