移动端、内容排版
同一篇文章在电脑上读着是正常的, 到了手机上却字号太小、行太长、表格溢出屏幕。移动端、内容排版的差别不在于内容本身, 而在于读者拿手机的姿势、屏幕宽度和注意力。先把可读性做好, 再谈排版风格。
移动端、内容排版，先控字号和行长
正文字号的大小不得小于 16 个像素, 行与行之间的高度比值需要控制在 1.6 到 1.8 这个范围内, 尽量让每一行包含的文字数量不要太多。
在移动端的内容排版环节里, 有一个非常常见的问提, 那就是设计人员往往直接把电脑端所用的字号照搬到手机端去使用, 这就导致用户在阅读的过程中, 必须使用双指进行放大操作才能够看清楚内容, 可是当屏幕上的字体被放大之后, 用户就无法再次看到一整句完整的句子了。
段落篇幅得控制在两到四行。遇到长篇内容时, 要把它拆开来看。关键结论最好单独成一段。移动端和内容的排版逻辑, 并不是单纯靠缩小程序字的大小来硬塞进屏幕。真正的用意是让用户在阅读时不必费力。要让视线能够顺畅地随着文字向下延伸。
在移动端的内容排版方面, 还必须兼顾单手操作的实际情况, 具体做法是把那些重要的按钮安排在屏幕下半部分的位置, 同时让正文内容不要紧靠着屏幕的边缘去放置, 而是要在左右两侧都留出至少16px的边距距离, 这是因为当用户处于通勤路上并且正用单手滑动屏幕的时候, 如果边缘留出的空间过于狭窄, 就会经常发生误触的事情导致阅读过程被打断, 而阅读一旦被打断之后, 用户就很可能很难再回到原来的页面继续观看信息了, 所以必须把这些细节方面固定的内容变成某种模板的样子, 这样子等到后续再进行发文工作的时候, 就不用再去每次单独进行调整和调优的操作了。
标题层级和留白要清楚
H2 这个层级和 H3 这个层级的关系必须保持一个稳定的状态, 在一篇同一个文章里面不要一会儿出现大标题又一会儿出现小标题这样的情况。在 H2 前面一定要留出明显的空白位置。各个段落之间一定不要挤在一起紧密地挨着, 只有这样做的话用户在快速阅读扫描的时候才能找得到整体的结构脉络。
针对移动端的页面以及内容的排版来说, 所谓的留白, 它本身就是一种属于阅读的那种节奏和步骤, 并且, 小标题、列表还有引用块, 它们这些元素都是能够帮助用户形成停顿感的, 但是呢, 千万不要去给每一个段落都加上粗体这样的强调形式, 因为如果把重点强调得太多太多的话, 那么最终的后果就是等于根本就没有任何重点可言。
图片、表格和代码块最容易溢出
图片需要设置最大宽度为百分之百, 而不能去使用固定的像素来进行约束。在屏幕比较窄的条件下, 表格要么是需要允许进行横向的滚动, 要么是必须将其修改为两列的卡片样式, 因为如果仅仅是直接将表格进行压缩, 就会让所有的文字都被挤压到一个非常拥挤的区域中。
在移动设备的场景里面, 以及涉及内容排版的时候, 表格这一块区域以及代码块这一部分, 都是容易发生溢出现象的高发区域。
代码块这个地方, 允许它横向去滚动, 但是呢, 千万不要强制换行, 把代码搞坏了；链接太长了怎么办, 要能截断掉那一头, 或者干脆让它换个行。这是移动端, 还有内容排版的最低限度, 底线是什么? 就是任何一块内容显示出来, 都不能把页面给撑破了, 而且更不能搞得用户只能看到一半, 剩下的一半没了。
上线前按真实宽度检查
至少用 375、390 和 414 三种宽度检查首屏、正文、表格和按钮。移动端、内容排版还要看点击区域和返回顶部按钮，长文读完后用户能不能顺利继续操作。站内的移动页面、速度、体验和移动端 SEO 的检查清单可以一起对照。
发布之后, 我们要去看停留时间、滚动深度还有跳出率这些指标。如果在移动端上存在内容排版的问题, 这些问题是可能会直接在数据表现上面反应出来的。所以得先把字号大小、每一行的长度以及内容有溢出的情况给改动好, 然后再来考虑去做什么装饰性的排版, 千万别把这个顺序给搞反了。
常见问题
移动端正文用多大字号合适？
关于正文字号的建议是, 起步设置应该是 16 像素。如果站点里面的老年用户比较多, 那么字号可以调到 17 像素到 18 像素之间。针对移动端以及需要进行内容排版的场景来说, 字体的大小应该要结合行高以及屏幕的宽度一起来进行调节操作, 并不是说字号越大就是越好的情况。
表格太多，移动端怎么排？
最好把表格换成卡片形式或者列表形式。如果一定要保留表格的话, 就需要允许横向滚动功能, 同时给出明确的提示信息。在移动端环境或者涉及内容排版的时候, 不能让表格被压缩到人们都没法阅读清楚文字的程度, 另外, 也绝对不能导致整个页面出现不必要的横向滚动条。
排版改完后怎么验证效果？
要拿真实手机去看首屏是什么样貌, 还要看表格和按钮的表现情况, 接着再看用户的停留时长以及滚动深度具体是多少。针对移动端, 还有内容版的改动, 需要按照页面的不同类型分别进行验证工作, 千万别只盯着首页看。