排版的目的是帮助用户整理信息，提升阅读效率，所以我们需要给文字分组、划分层级关系。
文字最重要的属性是可读性，且不管排版形式如何，首先要让用户看清、看懂，然后才要谈排版形式、美观、协调、设计感等等。
现在的电商详情页，用户使用场景几乎都来自于手机端，文字小了会看不清，文字大了又会过于粗暴、缺少精致感，所以主副标题文字的大小应该在什么范围，才能兼顾可读性和设计美感呢？
我以6.5英寸屏幕的P50 pro手机为例，经过多次对比实验得出一个可以参考的字号范围：主标题：50-80px、副标题：26-36px。
当文字大小控制在上述范围内，更利于详情页的文字信息表达，当然这组数据并非绝对，有一定的局限性，所以仅供大家参考。
同时为了严谨，我又结合众多案例进行验证，得出的结论也是基本都符合。
字号规范之后，接下来再来说说排版结构。
详情页的文字排版结构相对来说并不复杂，常见的对齐方式就三种，即居中对齐、左对齐、右对齐。
这也是最基础的文字对齐方式，但在实际工作中，我们一般还会用到线条、英文、图案等装饰元素，对整体排版丰富美化，平衡、增加其节奏感和设计感。
比如像下面这样：
你会发现不管怎么美化丰富，其基础排版结构、对齐方式还是没有变化。所以我们能在这三种基础的排版结构上，变化出很多种不同的视觉呈现形式。
那么接下来具体说说如何做好排版。
设计中的每个元素在视觉上都具有一定的“分量感”，所以当需要文字排版时，我们可以根据画面重心来选择排版形式，这也是工作中很常用的文字排版思路。
1、居中对齐排版
正如上面所说的那样，居中对齐的排版重心更稳，自然也更适合用在相对平稳的构图，比如：
如上图所示，不管产品如何摆放，只要画面重心始终相对平稳，居中对齐的排版就很好用，也是最不容易犯错的，看几组案例：
做个案例，下面这张图本身构图就相对稳定，又没有其他元素干扰文字排版。
那么只需要加上文案，做好对齐，一张详情页海报就做好了。
说完居中对齐排版，再来说说左右对齐排版，居左和居右本质上没太大区别，无非就是我们习惯的阅读方式是从左往右，出于用户习惯的原则，左对齐相对而言用到的会多一些。
2、居左、居右对齐排版
一般情况下，当画面重心不平稳时，我们会考虑通过文字排版、装饰元素等来平衡，所以这时候就会用到居左、居右对齐排版。
如上图所示，当画面重心偏向一侧时，根据情况选择居左或居右对齐排版就变得顺理成章，比如下面几个案例：
在设计工作中，仅依据重心排版虽然很常用也好用，但如果都按照重心原则排版，那么形式上难免过于单一，而且也有些许局限性。
比如你也能看到一些案例，即便文字排版前的画面重心相对稳定时，并没有按照上述所说的重心原则，一定要用居中排版的形式。
那么我们还可以依据什么来做好详情页的文字排版呢？
因为电商详情页的使用场景更偏向手机端，而且现在都是按照手机一屏的尺寸为单位划分模块，所以图文的形式大多数情况下都是上下结构。
因此受其结构的特质影响，详情页排版相对而言并不复杂，不像首页、海报、平面类设计那样，需要太多的板式结构，所以很少会出现故意营造画面重心不稳，用作突出强调的。
这也是我在翻阅大量优秀的详情页案例中验证后得到的结论。
在详情页文字排版的过程中，画面重心并不是影响排版结构的唯一因素，还会受画面结构、每一屏尺寸、文字可阅读性、整体布局等等的影响。
比如用下面这张图，虽然图中两个产品的长短不同，但两个产品所占的直觉比重是差不多的，所以整体的视觉重心是相对平稳的。
可如果将这张场景图做详情页首图，即便是重心相对平稳，文案也不再合适用居中排版的形式做，因为受到了图片本身结构的影响。
下面我简单的排了一下：
最终是这样的：
所以就出现了相对平稳原则。
理解起来很简单，就是利用英文、线条、图标、数字等装饰元素或必要排版元素平衡画面，营造视觉上的相对平稳即可。
原则上来说，相对平稳原则适用于绝大部分详情页的文字排版工作。
这就能解释为什么重心明明很平稳，有很多详情页案例中的文案不用居中对齐也能做的很出彩的原因：“他们做到了视觉上的相对平稳。”
如下图所示：
视觉相对平稳是允许存在偏差的，并不是像对称式构图那样要求那么绝对，设计有很强的主观性，也不像数学那么严谨，看起来差不多就行。
当然，你也能看到一些竖向排版，或不规则的排版，但核心思想是共通的，就是视觉上的相对平稳。
设计的魅力在于不确定性，没有一成不变的解决方案，详情页排版同样如此，不管是依据重心原则还是相对平稳原则做排版，都只是为大家提供设计理论依据。
比如下面这个案例：如下图将产品简单的摆放好。
初步的详情页海报构图就出来了，很多人的第一直觉就是居中排版，因为毕竟这么构图整体重心是稳的，比如像下面这样：
一个简单的海报雏形就有了，可能你会感觉有点太平了、还有点空，那么我们可以加点光影元素丰富一下画面，再稍微调下整体的颜色，如下图：
这个海报的确很简单，但感觉还不错，如果按照相对平稳原则，换个排版形式是不是也可以：
不同的排版结构给人的感受也不一样，两者没有对错，至于你会选择用哪一种，这就取决于你对整体规划和自己的主观感受了。
设计理论固然重要，但设计师的主观感受也很重要，所以我们除了要学好理论知识外，还要提升自己的审美。
补充：本文以详情页首图排版为切入点，详情页中其他模块同理。
好了，就写这么多吧，下次再见！
作者：老张
转载请注明：学UI网》深度剖析：如何做好详情页文字排版？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
