这个超好看文字排版方法小白能学会！电商详情页排版成热门？
这个好看的文字排版方法，小白也能学会！
7 月 22, 2022 发表于: 视觉设计.
Sponsor
谈及版式设计，多数人都很熟悉，设计师们对此早已习以为常，我亦撰写过诸多相关篇章。商业设计领域，文字是作品中最直接的信息媒介，对整体设计流程具有决定性作用，因此版式设计既是设计工作的根基，也是关键所在。
行业竞争异常激烈，众多设计师过分关注技能提升，却忽视了版式设计的必要性，这样下去会削弱作品的商业吸引力。
谈到网络零售的视觉规划，特别是近些年，商品展示界面受到众多店铺的高度关注，因此促使“怎样打造出色的网络零售展示界面？”成为业内热议的议题。
一个出色的产品介绍页面，不仅在于视觉呈现的技巧，版式布局的文字同样关键，这也是商业展示通常采用图与文字相辅相成模式的原因。
那么如何做好详情页文字排版呢？
整理信息是为了提高阅读速度，排版需要为此提供帮助，因此要对文字进行归类，并明确各个部分之间的从属关系。
文字首要特点是易于理解，不论呈现方式怎样，必须先确保读者能够看清楚、看明白，然后才能考虑版式布局、视觉吸引力、整体和谐以及艺术构思等要素。
当前网络购物平台的商品介绍页面，顾客浏览时几乎都借助移动设备进行，文字过小时难以辨识，文字过大则显得生硬，缺乏雅致，因此主要和次要的标题文字尺寸究竟设定在哪个区间，才能平衡阅读便利性与视觉艺术性呢？
以采用6.5英寸显示屏的P50 pro手机为参照，通过反复测试比较，可以总结出一个可供参考的字体大小区间：主要标题的尺寸建议在50至80像素之间，次要标题的尺寸则推荐设置在26到36像素之内。
文字尺寸若能维持在先前所述的限度之内，则详情页面的信息传递将更为顺畅，不过这些数据并非毫无例外，存在一定的约束条件，因此只能作为参考依据。
此外为了精确，我参考了大量事例加以核实，得出的结果大体一致。
字号规范之后，接下来再来说说排版结构。
页面上的文字布局方式比较简单，通常采用的对齐格式只有三种，就是居中排列、从左开始排列、从右开始排列。
这是最简单的文本排列方法，然而在具体操作中，我们常常会借助线条、外文、图形等辅助成分，来提升整体版面的美观度，调整、增强其韵律感和艺术性。
比如像下面这样：
你将发现，无论怎样修饰充实，它的根本布局形态、排列对齐模式都不会改变。因此，我们能够在这三种基本的布局形态上，衍生出多种多样的视觉表现样式。
那么接下来具体说说如何做好排版。
每一个设计构成都有其视觉上的重要性，因此，在文字布局时，我们可以依据画面核心来决定排印方式，这亦是工作实践中普遍采用的文字排印方法。
居中对齐排版
如同前文所述，采用居中排列的格式，其布局更为均衡，因此它天然地适配于较为平和的视觉设计，诸如：
如图所见，不论物品怎样陈列，只要视觉核心保持稳定，居中的布局就十分适宜，也是最不容易出错的，请参看几组示例。
这个实例显示，图像的布局比较均衡，并且周围没有其他物件影响文字的排列方式
那么只需要加上文案，做好对齐，一张详情页海报就做好了。
先谈谈文本居中显示的格式，然后谈谈文本向左或向右排列的格式，居左和居右的排版方式其实差异不大，主要还是因为人们通常都是按照从左到右的顺序来阅读内容，遵循大家普遍的阅读习惯，所以左对齐的用法会相对常见一些。
居左、居右对齐排版
通常情况下，如果构图主旨显得不够均衡，就需要借助版式设计、点缀物等手段加以调整，这时就会选择左对齐或右对齐的布局方式。
如图所见，若画面主体偏向某个方向，那么依据具体情况决定采用左侧还是右侧对齐布局就显得自然而然，例如以下几组示范。
设计领域里，常采用重心对齐方式，这种做法确实普遍且便捷，然而若完全遵循此法，布局风格容易趋同，同时也会显现出一些不足之处。
例如也存在一些事例，当文字布局前的画面核心位置比较固定的情况下，并不遵循前面提到的中心定位要求，必须采用居中排列的方式。
那么我们还可以依据什么来做好详情页的文字排版呢？
由于网络购物页面通常在移动设备上查看，并且模块划分以手机单屏大小为基准，因此图像与文字的组合多数时候呈现自上而下的布局方式。
因此，由于构造特点的作用，详情页的布局相对来说比较简单，不同于首页、海报、平面类设计那样，需要许多版式设计，所以很少会特意造成画面中心不均衡，以此来达到强调突出的目的。
这也是我在翻阅大量优秀的详情页案例中验证后得到的结论。
排版设计时，视觉焦点并非决定布局形态的唯一条件，同时画面构造、每屏容量、信息辨识度、整体规划方式等众多方面也会产生作用。
比如看这张图片，虽然图中两个物品的长度不一样，但它们在视觉上所占的比例是大致相等的，因此整体的视觉平衡感是比较稳定的。
倘若这张场景图用作详情页的主图，虽然其视觉重心比较均衡，但文字信息不适宜采用居中对齐的布局方式，这是由于图片固有构造所决定的。
下面我简单的排了一下：
最终是这样的：
所以就出现了相对平稳原则。
明白起来并不复杂，就是借助文字、线条、符号、数据等装饰性或必需的布局成分，使画面显得协调，产生视觉上的整体感即可。
一般来说，常规布局方法适合绝大多数详情页面的文字布局安排。
这就说明重心看似稳定，许多详情页案例中的文字之所以不采用居中排版却依然效果显著，关键在于“它们实现了视觉上的平衡感”。
如下图所示：
画面中的均衡感可以不必完全精确，不像镜像式布局那样需要严格一致，创作带有强烈个人色彩，不同于几何学般精确，只要观感相似即可接受。
当然，你也能发现一些垂直排列的样式，或者形态各异的布局，但根本理念是一致的，就是视觉上的平衡感。
构思的吸引力体现在变数之中，不存在永远固定的处置方法，页面展示的布局安排也符合这个道理，无论是按照核心部位准则还是均衡状态准则来实施设计，都不过是给设计工作提供参考方向。
比如下面这个案例：如下图将产品简单的摆放好。
初稿的详情页海报布局已经完成，多数人的本能反应是采用居中设计，毕竟这种布局整体平衡感很强，例如呈现出的效果如下：
一张基础的海报草稿已经形成，或许你会觉得它略显平淡、尚显空洞，因此我们可以增添一些光暗效果来增强视觉层次，同时略微调整整体色调，参照下图所示。
这个海报虽然看起来朴素，不过给人的印象还算可以，假如依照比较中庸的思路，调整一下布局方式，会不会效果更佳：
各种布局方式带来的体验不尽相同，没有绝对的好坏之分，究竟挑选哪一种，主要看你对整体布局的考量以及个人偏好的影响。
设计理念确有价值，但设计者的个人体验同样关键，因此我们不仅需要掌握专业学问，更应培养个人品味。
补充：本文以详情页首图排版为切入点，详情页中其他模块同理。
好了，就写这么多吧，下次再见！
请小编喝杯咖啡吧！