实例解析3种文档大屏适配方法

3. 按内容单独适配

　　而另一些产品的设置思路是，可以对文档中的部分元素各自设置宽度。

　　比如文字部分始终固定宽度，表格、图片可以单独「超宽」。

　　值得关注的是，「超宽」的表格有两种处理方式：

Plan A：表格总宽度固定

　　「标准」模式下，表格宽度始终和文档一样宽;「超宽」模式下，表格宽度始终等于页面宽度。

　　这种方案的优点是可以比较精准地控制每一个元素的宽度。而缺点就是由于表格总宽度固定，新增列时会影响已有列宽，可能会导致用户反复调整。

Plan B：表格总宽度随新增列数而变化

　　每增加一列，已有列宽不变，表格总宽度增加。当因列数逐渐增加而超过文档宽度时，无需特意设置即可突破文档区域的限制。

　　不过这种方式需要注意的就是，表格超出标准宽度后，与文档大纲相遇时需要怎么处理。

　　下图就是一种不错的处理方式：当两者没有相交时，并不会干扰，当两者相交时，大纲默认折叠，如果鼠标悬停到折叠的大纲上可以临时展开大纲。

　　4. 折叠目录和大纲

　　不少文档在显示时两侧可能自带目录或者大纲。所以在屏幕本身不够大时，还可以通过折叠目录和大纲为文档区域提供更大空间。

　　设计方案

　　综合前期调研，结合语雀的现状，我们开始尝试语雀上的设计方案，有些特殊的因素会影响设计方案的选择。

　　1. 适配方案选型

　　每个产品都有自己的「历史包袱」，在已经被用户熟悉的产品上「动刀子」不是一件易事。

　　首先，语雀文档的编辑页采用了模拟纸张的设计形式，所以如果想要对各个内容宽度单独进行适配，而不动文字宽度，有两种可能的方案：

Plan A：让「纸张」变宽

　　就像下图所示，由于右侧大纲等内容的存在，为了视觉对称，纸张左侧需要白白留出一些空间，看上去不太舒服。

Plan B：去掉「纸张」

　　去掉「纸张」后，编辑区变成一整片白色，大纲则紧贴最右侧显示。

　　这种设计在市面上也挺常见，不过，实际上在几年前我们有一个版本是去掉了纸张设计，后来实在禁不起老用户们请求回滚的呼声(骂声)，又重新上线了纸张风格的编辑器。所以本次改版也不打算对这个大家十分喜爱的设计「动刀子」。

　　总结来看，上述单独设置各个内容宽度的方案并不太适合语雀。

　　那么，再来考虑全文适配，也就是给用户提供「标准」和「超宽」两种可选项。

　　这个方案有需要解决一下 3 个问题：

文档的大屏适配在编辑页只能由作者设置，还是在阅读页由读者为自己设置？

　　团队讨论时，有人期望有读者选择使用哪种模式，万一有篇文档明明需要「超宽」，但是作者没有设置成「超宽」，岂不是很难受?但是考虑一个文档到底适合怎么显示其实是由内容决定的(比如原始需求基本都是因为插入超宽表格而引起)，且作者也是读者，作者为了自己能够更好地编辑一般都会设置成合适的模式，把设置交给作者会更简单。假如交给读者的话，那么除了页宽，还有正文字号、间距这些排版设置是不是也要开放给读者呢?

在「标准」模式下，表格是否可以比文字宽？

　　这个问题也要同时考虑阅读和编辑页面，我期望是表格可以超出，这样模式使用起来更加灵活，但是编辑页有个「纸张」形式的限制，阅读页倒是可以放开限制，但是和大纲重叠的处理方案会增加技术成本和工期。所以最后设计评审时没有讨价还价成功，这个需求砍掉了。

　　△ 飞机稿：表格突破文字宽度

　　△ 飞机稿：表格与大纲相遇时，大纲自动折叠