电商详情页排版设计，主副标题字号范围及文字排版结构全解析
编排的意图在于去协助使用者梳理资讯，使得阅读功效得以提高，因而我们要将文字予以分组，对层级关系作出划分。
文字最为关键的属性是具备可读性，无论排版形式呈现出怎样的状况，首要做到的是让用户可以看清，进而能够看懂，之后才可以去谈论排版形式，去谈论美观、协调以及设计感等方面 。
现今的电商详情页，用户运用场景差不多全都源自手机端，若文字小了便会看不清楚，要是文字大了又会太过粗放、欠缺精致感，那么主副标题文字的大小应当处于何种范围，才能够兼顾可读性与设计美感呢？
以有着6.5英寸屏幕的P50 pro手机作为例子，在历经了许多次的对比实验之后，得出了一个能够用来参考的字号范围，其中主标题是50到80px，副标题是26到36px 。
当文字大小被控制于上述范畴之内，会更加有利于详情页的文字信息去进行表达，当然啦，这组数据并非是绝对的，是存在一定的局限性的，所以仅仅是供大家来进行参考标点符号。
与此同时，出于严谨考量，我还结合了大量案例予以验证，所得到的结论基本上也都是相符的。
字号规范之后，接下来再来说说排版结构。
二、
详情页之中的文字排版结构，相对而言并不是很复杂，常见的对齐方式存在三种，分别是居中对齐，左对齐，右对齐。
这同样是最为基础的文字对齐方式，然而在实际开展工作期间，我们通常还会运用到线条类装饰元素，以及英文类装饰元素，还有图案类装饰元素，以此对整体排版予以丰富并进行美化操作，进而使其达到平衡状态，既增加其节奏感却又增添其设计感。
比如像下面这样：
无论怎样进行美化以及丰富，你都会发觉，其基础排版结构，还有对齐方式，依旧未曾改变，所以，在这三种基础的排版结构之上，我们能够变化出诸多不同的视觉呈现形式句号。
那么接下来具体说说如何做好排版。
三、
设计内里当中的每一个元素，于视觉层面之上都具备着一定的“分量感”，因而当面临需要进行文字排版的情况之时，我们能够依据画面重心加以选择排版形式，这同样是工作期间颇为常用的文字排版思路。
1、居中对齐排版
如同上面所讲那般，处于中央对齐状态的排版，其重心会更加稳定，自然而然地也就更适宜运用在相对较为平稳的构图之中，举例来说：
上面的图这样显示着，无论产品怎样去摆放，只要画面的重心一直相对保持平稳，将其进行居中对齐的那种排版就会很好用，并且还是最不容易出现错误的，来看几组案例：
搞一个案例，下面的这张图，其本身构图相对说来是稳定的，并且不存在其他元素对文字排版造成干扰 。
那么只需要加上文案，做好对齐，一张详情页海报就做好了。
讲完了居中对齐排版之后，再来谈谈左右对齐排版，居左和居右从本质上来说并没有太大的差异，只是我们所习惯的阅读方式乃是从左往右，基于用户习惯的这一原则，左对齐相对来讲被运用到的情况会多一些。
2、居左、居右对齐排版
正常地看，在那当画面里的重心呈现出不稳定状态之际，我们往往会思索借助文字排版以及装饰元素等方式去达成平衡，于是在这个时候就会运用到居左对齐排版，还有居右对齐排版。
如图示上方，当画面的重心朝着一侧偏向过去时侯，依据情形状况状况来选择居左或者居右进行对齐排版，这样就变得自然而然顺顺当当了，就像下面的几个案例那样：
在设计工作里头，仅仅依据重心来进行排版，这虽说相当常用并且好用，然而要是全都依照重心原则去排版，那就会在形式方面不可避免地太过单一，并且还存在着些许局限性。
比如说，你同样能够瞅见一些案例，纵使文字排版之前的画面重心相对处在稳定状态时，并未依照前面所讲的重心原则，必定得采用居中排版的形式 。
那么我们还可以依据什么来做好详情页的文字排版呢？
四、
电商详情页的使用场景，更朝着手机端的倾向发展，现今也都以手机一屏的尺寸作为单位来划分模块，如此一来啦，图文的形式在大多数情形下呈现的是上下结构 。
所以，因为受到其结构特质的影响，详情页排版相对来说并不复杂，不像首页、海报以及平面类设计那般，需要大量的板式结构，故而很少会出现那种故意营造画面重心不稳，以此用作突出强调的情况。
这也是我在翻阅大量优秀的详情页案例中验证后得到的结论。
处于详情页文字排版进程里，画面重心并非是左右排版结构的仅有因素，还会被画面结构所牵涉，会被每一屏尺寸所关联，会被文字可阅读性所牵扯，会被整体布局等所涉及。
就好比运用下面这张图而言，虽说图里两个拥有显著长短差异的产品，然而这两个产品所占据的、给人直观感受的比重是大致相同的，因而整体的视觉方面的重心是相对处于平稳状态的。
要是把这张场景图用作详情页首图，即便重心相对平稳，文案也不适宜再用居中排版的形式来做，这是由于受到了图片自身结构予以的影响。
下面我简单的排了一下：
最终是这样的：
所以就出现了相对平稳原则。
看起来容易明白，就是借助英文、线条、图标、数字这些装饰元素或者必要排版元素来平衡画面，从而营造出视觉方面的相对平稳就行。
就原则而言，相对平稳的那个原则，适用于绝大多数的详情页，适用于详情页的文字排版工作。
这便能够解释，为何明明重心极为平稳，在诸多详情页案例里的文案，即便不采用居中对齐的方式，也能够做得相当出彩的缘由，那便是：“他们达成了视觉方面的相对平稳。”。
如下图所示：
视觉处于相对平稳状态，是允许有着偏差存在的，并非像对称式构图那般有着绝对要求，设计具备很强的主观性，也不像数学那样严谨，只要看起来差不多就可以了。
当然咯，你也是能够看见一些呈现竖向排列方式的排版，或者是那种并非规则样式的排版，然而其核心所蕴含的思想却是具有共通性的，那便是在视觉层面能够达成相对而言的平稳状态，.
五、
设计的魅力所在是不确定性，不存在固定不变的解决方案，详情页排版也是这样，无论循着重心原则去做排版，还是依照相对平稳原则来做排版，都仅仅是为大家给出设计理论依据。
比如下面这个案例：如下图将产品简单的摆放好。
初步的详情页海报构图已经呈现出来了，不少人的第一反应便是采用居中排版，主要是由于这样构图整体的重心是稳定的，就如同下面所展示的这般：
出现了一个简单的海报雏形，或许你会感觉它有点过于平淡，并且还有点空荡，如此一来我们能够添加一些光影元素使画面变得丰富，接着再略微调整一下整体的颜色，情况如下所示：
这个海报确实蛮简单的，不过感觉还算可以，要是依照相对平稳的原则，换另外一种排版样式行不行呢：
不一样的感受会因不同的排版结构而产生， 两者不存在对错之分， 至于你会选用哪一种， 这要看你对整体规划以及自身主观感受的情况了。
虽说设计理论有着重要性啦，然而呢设计师的主观感受同样是重要的哟，是以呀我们不但要把理论知识学好，而且还得提升自身的审美呐。
补充：本文以详情页首图排版为切入点，详情页中其他模块同理。
好了，就写这么多吧，下次再见！
请小编喝杯咖啡吧！