手机看文章字太小？移动端排版字号行高调整指南

同一篇的文章在电脑上面阅读着是正常的情形, 可是等到了手机上面以后, 却发现字号变得太小, 而且行距离很长, 还有表格从屏幕外面溢了出来。移动端与内容排版之间存在的差别地方主要不是在于内容的本身部分, 而是要去考虑到读者拿来使用手机的姿势, 以及屏幕的宽度还有注意力的状况这些方面。应当先把可读性给做好, 接着再去谈论排版的风格是什么样子。

移动端、内容排版，先控字号和行长

正文字号的大小, 是不能小于 16 个像素的, 行与行之间的高度比值, 需要控制在 1.6 到 1.8 这个范围里面, 要尽量让每一行里面包含的文字数量, 不要搞得太多的。

在移动端的内容排版工作当中, 存在一个十分普遍的问题, 也就是设计人员经常不加改变地把电脑端里使用的字号直接挪到手机端上去用, 这样的做法会导致用户在进行阅读的时候, 非得靠两根手指头去执行放大的动作才行, 目的只是为了能把文字看清, 然而与此同时, 一旦手机屏幕上显示的字体被拉大了, 用户就再也看不到一整句话的全部面貌了。

段落的篇幅一定要控制在两到四行这个范围。如果碰到比较长的一段内容, 就要把它拆开来, 分别进行看待和处理。对于那些比较关键的结论, 最好是能够单独成为一段内容。在移动端以及内容的排版逻辑方面, 并不是单纯地依靠缩小程序文字的字号这种硬塞的方法来实现的。这样做真正的意图是让用户在阅读的时候完全不需要费力去调整或者适应。最终要让用户的视线能够非常顺畅地随着文字一行一行向下延伸。

在移动端做内容排版的时候, 还得考虑到大家习惯单手操作这个现实情况。具体的做法就是把重要的按钮放在屏幕下面的那部分区域。另外就是让正文内容别贴着屏幕的边缘去放, 而是左右两边都得留下至少16像素的边距。这是为什么, 因为当用户在通勤路上正在用一只手划屏幕的时候, 如果边缘留的空儿太窄, 就很容易不小心点到别的什么地方, 这就导致阅读过程会被打断。而一旦被打断以后, 用户很可能就很难再回到原来的那个页面去接着看信息了。所以, 必须把这些涉及细节方面的固定内容做成某种模板的模样。就像这样子, 等到后来再进行发文工作的时候, 就不用再去每次单独地执行调整和调优的操作了。

标题层级和留白要清楚

H2 这个层级和 H3 这个层级的关系必须保持稳定的状态, 在同一篇文章当中不要出现一会儿是大标题、一会儿是小标题这种混乱的情况。在 H2 的前面一定要留下明显的空白, 各个段落之间绝不能紧密地挨在一起, 只有做到这样, 用户在快速阅读扫描的时候才能找准整体的结构脉络。

针对移动端的页面以及内容的排版来说, 所谓的留白, 它本身就是一种属于阅读的那种节奏和步骤, 并且, 小标题、列表还有引用块, 它们这些元素都是能够帮助用户形成停顿感的, 但是呢, 千万不要去给每一个段落都加上粗体这样的强调形式, 因为如果把重点强调得太多太多的话, 那么最终的后果就是等于根本就没有任何重点可言。

图片、表格和代码块最容易溢出

图片的样式应当把最大宽度设置成百分之百, 千万不能够去使用一些固定的像素值来做限制。在面对那些屏幕比较窄的环境时, 对于表格的处理方式, 要么是需要支持横向滚动操作, 要么就是必须把它更改成两列排列的卡片外观模式来进行展示。这主要是考虑到, 如果只是单纯地把表格的宽度和高度进行压缩处理的话, 就会导致内部的所有文字内容都被强行挤压到一个极其狭小和拥挤的位置里面去。

在移动设备的这个场景之内, 还有涉及到内容排版这么一个事情的时分, 表格这一块区域, 以及代码块这一部分, 通通都是那种非常容易就出现溢出这种情况的高发地带。

在代码块这个区域, 应该让它具备可以横向滚动的能力, 但是千万不要强制执行换行操作, 否则就会把代码给破坏掉；如果链接太长了该怎么办, 要么就去截断那一头, 要么就直接让它换一个行。这是在移动设备上面, 也是内容排版所必须具备的最基本要求，所谓的底线在哪里? 其底线就是任何一块被显示出来的内容, 都绝对不可以把整个页面给撑破, 而且更加不能够造成用户只能看到其中的一半, 而剩下的一半却完全看不见的情况出现。

上线前按真实宽度检查

至少用 375、390 和 414 三种宽度检查首屏、正文、表格和按钮。移动端、内容排版还要看点击区域和返回顶部按钮，长文读完后用户能不能顺利继续操作。站内的移动页面、速度、体验和移动端 SEO 的检查清单可以一起对照。

在发布完成之后, 我们要去看一看停留时间、滚动深度还有跳出率这些指标, 如果在移动端上存在内容排版的问题, 这些问题是可能会直接在数据表现上面反应出来的, 所以得先把字号大小、每一行的长度以及内容有溢出的情况给改动好, 然后再来考虑去做什么装饰性的排版，千万别把这个顺序给搞反了。

常见问题

移动端正文用多大字号合适？

关于正文字号的一个建议是, 起步的时候应该设置为16像素。要是站点里的老年用户数量不少的话, 把字号调整到17像素到18像素之间是可以的。对于手机端使用场景以及需要排版的场合来说, 字体大小要配合行高以及屏幕宽度一起做调节, 这可不是简单的字号越大就越好。

表格太多，移动端怎么排？

最好是将表格的形式更改为卡片形式, 或者是列表形式。如果必须保留表格的话, 就应当允许启用横向滚动功能, 同时还要给出明确的提示信息。在移动端的特定环境下, 或者是涉及到内容的排版工作的时候, 不能让表格被压缩到人们根本无法看清楚文字所表达意思的严重程度, 另外, 也绝对不能够导致整个页面出现一些不必要的、多余的横向滚动条。

排版改完后怎么验证效果？

为了弄清楚首屏到底呈现出来是什么样子, 需要使用真实的移动设备进行查看, 同时也需要审视表格以及按钮这些元素的表现情况。紧接着, 要去关注用户在这个页面停留的时间长度具体是多少, 还要看看页面的滚动深度数据怎样。针对移动端场景, 还涉及到了内容版式的改动事项, 因此必须依据页面的不同种类来分别展开验证工作, 绝对不可以仅仅盯着首页这一个地方看而忽略其他部分。