详情页图文排版设计：如何让文字清晰又高级

设计达人严选好文，好素材，学设计，少走弯路

深度剖析：如何做好详情页文字排版？

谈及文字排版，众人想必都并不陌生，对于设计师而言，这向来都是反复提及的话题了，我也曾多次撰写涉及文本排版的文章。

对商业设计来讲，文字是设计作品里最直观的信息载体，它对整个设计环节相当重要，因而文字排版工作既是设计工作的基础，还是核心。

面临行业内卷这般严峻的状况，不少设计师都在追逐技法，却对文字编排的重要意义予以忽视，最终将会致使作品的商业价值下降。

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

一款称得上优秀的商品详情页，除去画面所运用的设计技法以外，其文字排版同样具备相当的重要性，而这恰恰就是商业设计皆是以图文结合这种形式来进行展陈的缘故所在。

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

整理信息以助用户，提升阅读效率为排版目的，故而文字分组，层级关系划分，此为我们所需做的。

可读性是文字最为重要的属性，无论排版形式怎样，首个要点是要让用户看得清，进而看得懂 ，随后才能够谈及相关排形式、美观层面、所具备协调感以及设计感等内容。

当下的电商详情页，用户运用场景差不多统统源自手机端，文字要是小了就会看不清楚，文字要是大了又会显得太过粗放、欠缺精致感，那么主副标题文字的尺寸应当处于何种范围，才能够兼顾可读性以及设计美感呢？

就以有着6.5英寸屏幕的P50 pro手机为例来说，历经了好多回对比实验后得出了一个能够拿来参考的字号范畴是，主标题为：50去到80px ，副标题是：26去到36px。

一旦文字大小被调控于上述范畴内，便会更有益于详情页之上的文字信息展现出来，当然啦，这一组数据并非是绝对的，而是存在着一定的局限性，所以仅仅是供大家用以参考而已。

与此同时，出于追求严谨的考量，我再度将诸多案例予以组合并展开验证，最终得出的结论基本上全都展现出符合的态势。

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

详情页之中的文字排版结构，相对而言并非是很复杂的，常见的对齐式样存在三种，它们分别是，处于中间位置进行对齐，朝着左边方向进行对齐，向着右边方向进行对齐。

这属于最基础的文字对齐方式，然而在实际工作当中，我们通常还会运用线条、英文、图案等装饰元素，去对整体排版予以丰富美化，使其平衡，增添其节奏感以及设计感。

比如像下面这样：

你会发觉，无论怎样去美化、丰富，它的基础排版结构，以及对齐方式，依旧是没有发生变化的。所以，我们能够在这三种基础的排版结构之上，变幻出许多种不一样的视觉呈现形式。

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

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

居中对齐排版

恰似前面所讲那般，处于中间位置对齐的那种排版，其重心会更加稳定，自然而然地也就更适宜运用在相对来说较为平稳的构图情形之中，举例而言：

上面的图示呈现出来，无论产品怎样去进行摆放，只不过保证画面的重心一直维持相对平稳的状态，那么居中对齐这种排版方式就会显示出很好用，也就是最不容易出现错误的状况，来查看几组相关事例：

进行一个案例的呈现，下面的这张图，其本身的构图，相对而言是稳定的，并且不存在其他的元素，对文字排版形成干扰。

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

讲完了居中对齐那种排版方式之后，接下来再讲讲左右对齐的排版方式，居左对齐跟居右对齐在本质层面上并没有太大的差异，只不过呢，就是我们所习惯的阅读方向是从左边指向右边，基于用户习惯这样的一个原则，左对齐相对来说被使用到的次数会多那么一些。

居左、居右对齐排版

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

照上面图片显示的那样，在画面的重心朝着一侧偏移的时候，依据实际情形来挑选居左或者居右的对齐排版，就会显得自然而然，就像下面的这几个案例：

于设计这项工作里头，仅通过依据重心来进行排版，这般做法虽格外常用且好用，然而要是全都依照重心原则去排版，那么在形式上必然会过于单一，并且还存在着些许局限性。

比如，你同样能够见到某些案例，就算在文字排版之前的画面重心相对处于稳定状态时，也并未依照上述所讲的重心原则，非得采用居中排版的形式。

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

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

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

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

处于详情页文字排版的进程里，画面重心并非是对排版结构产生影响的仅有因素，还会遭受画面结构、每一屏的尺寸、文字具备的可阅读性、整体布局等诸多方面的作用。

像下面这样的一张图来说，此图当中，有两个产品，这两个产品的长度并不相同，然而，这两个产品所占据的，那种凭直觉感受到的比重，是大致相近的，所以，整个图像体所呈现出来的视觉重心，是相对处于平稳状态的。

可要是把这张场景图用作详情页首图，就算重心相对平稳，文案也不适宜再用居中排版的方式做，因为受图片自身结构的影响。

下面我简单的排了一下：

最终是这样的：

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

用英文、线条、图标、数字等同装饰元素或者必要排版元素，去平衡画面，营造视觉上相对平稳的效果，理解起来是比较简单的。

就原则而言，相对平稳这一原则适用于绝大多数的详情页，详情页涉及文字排版工作。

这便能够阐释为何重心明明极为平稳，众多详情页案例里的文案，即便不采用居中对齐的方式，也能够达成极为出色的效果的缘由，那便是：“他们达成了视觉层面上的相对平稳。”。

如下图所示：

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

当然，你也能够看见某些竖向的排版，或者并非规则形状的排版，然而其核心主旨是普遍共通的，就是在视觉方面呈现相对平稳的状态。

设计所拥有的魅力存在于不确定性之中，不存在始终固定不变的解决方案，详情页的排版也是这样，不管是按照重心原则去做排版，还是依据相对平稳原则来做排版，都仅仅是给大家提供设计方面的理论依据而已。

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

最初的详情页海报构图已然呈现，不少人的首要直观感受便是居中进行排版，缘由在于如此构图整体的重心是稳固的，就如同如下这般：

现已有了一个简单的海报雏形，或许你会觉得它略显太平，且还有些空荡，如此一来我们能够增添些光影元素以使画面更丰富，再略微调整下整体的颜色，情况如下所示：

这个海报确实蛮简约，然而感觉还算挺好，要是依照相对平稳准则，变换一种排版样式是否也行得通：

人的感受因排版结构之相异呈现区别，此两者对错皆无，至于你会挑选运用哪一种样式，却要遵循你对全景编排还有自我主观看法来达成，此系决定根本所在。

固然设计理论是重要的，然而设计师的主观感受同样是重要的，所以我们在除了要学好理论知识以外，还需要提升自身的审美。

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

好了，就写这么多吧，下次再见！

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