详情页好看的排版设计，文字大小这样调

提到文字排版，想必大家都并非陌生，对于设计师而言，这向来都是反复提及的话题，我也多次撰写过有关文字排版的文章。对于商业设计来讲，文字是设计作品里最为直观的信息载体，对于整个设计环节有着至关重要的意义，所以文字排版工作既是设计工作的基础，又是其核心哦。

这样一种场景之下，即行业内卷严重至这般程度，众多设计师都在做着这样的事，那便是追求技法，却忽略了文字编排具有的重要性，而如此一来，最终会致使作品的商业价值被降低。

讲讲电商设计工作，特别是最近几年，各大店铺都很看重产品详情页，这也使得“怎样做好电商详情页？”成了行业里的热门话题。

一款称得上优秀的商品详情页，除去占据重要位置的整体画面的设计技法，文字排版同样占据关键地位，而这正是商业设计均借助图文结合这种形式予以展示的根源缘由所在。

那么如何做好详情页文字排版呢？

帮助用户整理信息以及帮助提升阅读效率，这是排版的目的，所以我们要给文字分组，并且要划分层级关系。

文字最为关键的属性是具备可读性，无论排版形式呈现出怎样的状况，首要的是得让用户能够清晰地看见，并且明白其中所表达的意思，之后才能够去谈论排版形式、美观程度、协调与否以及设计感等诸多方面。

于当下的电商详情页而言，用户所具备的使用场景差不多全部源自手机端，当文字变小以后人会看不见读不清，倘若文字变得很大了，又会显得过于粗放，并且还缺失独特的精致感，那么主副标题文字究竟在怎样的一个范围之内，方可在兼顾可读性的同时又能拥有设计美感呢？

以有着6.5英寸屏幕的P50 pro手机作为例子，历经好多回对比实验，得出了一个能够供人参考的字号范围，主标题是50到80px，副标题是26到36px。

处在上述限定的文字大小范围之内时，会更有利于详情页当中文字信息的表达，当然啦，这组所得出的数据并非是能全然确定的，是存在一定的局限性的，所以仅仅是供大家去进行参考的。

于此同时，为了达到严谨的程度，经我结合数量众多的案例而予以的验证之后，所得到的结论基本上全都呈现出符合的状态。

字号规范之后，接下来再来说说排版结构。

商品详情页面的文字摆放结构，相对而言，并非特别繁杂，平常所见到的排列方式，总共就有三种，具体来说：包括居中间对齐，朝着左边对齐，以及向着右边对齐这三种形式。

这同样是极基础的文字对齐形式，然而于实际工作期间，我们通常还会运用线条、英文、图案等装饰性元素，去对整体排版做丰富与美化处理，使其平衡，增添其节奏感以及设计感。

比如像下面这样：

不管费多大劲去美化丰富它，你依然会晓得，其基础排版结构以及对齐方式，压根就没发生什么变化。所以呢，我们能够基于这三种基础的排版结果，经由一些做法变出诸多不一样模样的视觉呈现形式来。

那么接下来具体说说如何做好排版。

设计里头的每个元素，于视觉方面都有着一定的“分量感”，因而当存在文字排版需求时，我们能够依据画面重心去挑选排版形式，这同样是工作当中颇为常用的文字排版思路。

居中对齐排版

就如同上面所阐述的那般，位居中心进行对齐的那种排版，其重心会更加稳定，自然而然地更加适宜应用于相对处于平稳状态的构图当中，举例来说：

就如同上面所呈现的图示那样，无论产品是怎样进行摆放的，只要画面的重心始终相对来说处于平稳的状态，那么居中对齐这种方式所构成的排版就会十分好用，并且还是最不容易产生错误的，来查看几组相关案例：

搞一个案例，下面的这张图，其本身的构图，相较而言是稳定的情况，并且不存在其他别的元素，对文字排版造成干扰。

那么只需要加上文案，做好对齐，一张详情页海报就做好了。

在讲完了居中对齐排版之后，接着来说说左右对齐排版，居左排版与居右排版从本质上来说并没有太大的差异，只不过我们所习惯的阅读方式乃是从左往右，基于用户习惯的这样一个原则，左对齐相对而言被运用到的情况会更多一些。

居左、居右对齐排版

一般情形下，要是画面重心处于不稳定的状态，那种状况下，我们会思索借助文字排版以及装饰元素等方式来达成平衡，于是在这个时候，就会运用到居左对齐排版以及居右对齐排版。

恰如上面所呈现的图示那样，当画面的重心向着一侧有所倾斜的时候，依据具体情形来挑选居左或者居右进行对齐排版，如此一来便显得合乎情理，就像下面的几个案例这般：

于设计工作里，仅凭借重心来进行排版，这般做法虽说十分常用并亦好用，然而要是全都依据重心之原则去排版，如此一来，在形式方面必然会太过单一，并且还存在着些许的局限性。

比如说，你同样能够瞅见某些案例，就算在文字排版之前、画面重心相对处于稳定状态的时候，可并没有依照刚才所说的重心原则，非要采用居中排版的那种方式。

那么我们还可以依据什么来做好详情页的文字排版呢？

由于电商详情页的运用场景更为倾向于手机端，并且当下皆是依照手机一屏的尺寸作为单位来划分模块，故而图文的形式在大多数情形下都是上下结构。

因此，因其结构的特质产生影响，详情页排版相对来讲并非很复杂，不像首页、海报以及平面类设计那般，需要诸多的板式结构，所以极少会出现有意营造画面重心不稳，以此用作突出强调的情况。

这也是我在翻阅大量优秀的详情页案例中验证后得到的结论。

设于详情页文字排版的进程当中，画面重心并非是左右排版结构的仅有要素了，还会遭受画面结构，每一屏大小尺寸，文字具备的可阅读性，以及整体布局种种方面的作用。

举例来讲，运用下面这张图，尽管图里两个产品的长短存有差异，然而两个产品所占的那种直觉比重处在大致相同的状况，因而整体的视觉重心呈现出相对平稳的态势。

但要是把这张场景图当作详情页首图，即便重心相对处于平稳状态，文案也不适宜再采用居中排版的形式来做了。因为受到了图片自身结构的影响，这种影响导致了上述情况的发生。

最终是这样的：

所以就出现了相对平稳原则。

理解起来并不困难，就是运用英文，以及线条，还有图标跟数字等这些装饰元素，亦或是必要的排版元素去平衡画面，进而营造出视觉领域里的相对平稳状态就可以了。

按理说，相对而言的平稳准则，适用于多数详情页当中的文字排版事宜，是这样的情况。

这便能够解释那般情形的缘由所在，即为何重心分明是极为平稳的，在诸多详情页案例里，那些文案纵使不采用居中对齐的方式，却依旧能够达成相当出彩的效果，原因是：“他们达成了视觉层面上的相对平稳状态。”。

如下图所示：

视觉处于相对平稳状态，是被允许存在偏差的，并非如同对称式构图那般有着格外绝对的要求，设计具备很强的主观性，也不像数学那样严谨，只要看起来大致相同就可以了。

当然，你也能够看见某些竖向的排版。有的版面或许呈现出不规则的样式。然而，其核心的思想是具备共通性的。那便是在视觉方面达成相对性的平稳状态。

魅力存在于经由设计所带出的不确定性之中，并不存在那种始终保持不变的解决方案，详情页排版的情况也是这样的，无论依据重心原则来进行排版，亦或是按照相对平稳原则来做出排版，都仅仅是为大家去提供设计理论方面的依据而已。

比如下面这个案例：如下图将产品简单的摆放好。

当前，初步的详情页海报构图已然呈现，众多人的首要直观感受便是采用居中排版方式，毕竟如此构图模式下，整体重心处于稳定状态，举例而言，如以下这种样式：

那样一个简单的海报初步样子就已然存在了，或许兴许你会觉得好像有那么一点儿过于平淡了，并且还略微有那么一点空荡，既然如此那么这时候我们能够添加一点儿有关光影的元素去让画面更为丰富起来，之后再稍微调整一下整个的颜色，情况就如同下面所显示的图片这样。

这个海报确实蛮简单的，不过感觉还算挺好的，要是依照相对平稳之原则的话，去换一种排版形式可不可以呢：

各种各样的排版结构，给予人的感受，各不相同，这两者不存在对与错，至于你会选取运用哪一种，这完全取决于你对于整体规划以及自身主观感受了。

尽管设计理论有着不可忽视的重要性，然而设计师自身具体的主观感受同样具备相当的重要意义，因此对于我们而言，除了需要踏实学好理论知识外面，更要去提升自身的审美水平。

补充：本文以详情页首图排版为切入点，详情页中其他模块同理。

继续浏览有关 电商设计文字排版 的文章