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

　　语雀是阿里巴巴人手必备的办公软件，阿里同学日常的周报日报、产品文档、开发文档等等都依赖语雀完成。

　　随着正式发布对外后，用户规模逐渐壮大，我们在讨论区(语雀一对一与大家沟通需求的用户反馈专区)陆续收到很多对宽屏适配的需求：

　　都9012年了，大屏适配该动起来了 #7219 @楽楽

　　页面太窄了，可不可以改成自适应的?#4285 @张晓航

　　现在都是宽屏来看网页，语雀上面基本都是1/3屏幕宽度，浪费很多空间，尤其是在加入表格的时候，根本看不到宽的表格，每次都很麻烦

　　编辑页面有效区域太窄了 #3578 @chaos

　　为什么页面可编辑区域这么窄，两边有很多空白为什么不用

　　作为一款知识沉淀型产品，大家打开语雀后都会进入长时间的编写或阅读。如果显示器适配不佳，就会大大降低用户体验。

　　本文将和大家分享语雀此次大屏适配设计改版背后的一些思考。

　　关于适配：

　　关于适配这个知识点，这篇文章帮你彻底掌握它!

　　橙子的橙子：记得刚做 UI 那会，根本不知道做完界面还需要适配，就以为把设计图做好就行了，其他的事情跟自己没有半点关系。慢慢的踩了坑之后，才知道还有适配这一说。所以说有些事情...阅读文章 >>当前体验问题

1. 大屏适配不佳

　　改版前，语雀以对常规笔记本显示屏(1440×900)适配为主，而在另一种常见的屏幕尺寸(1920×1080)下，以两侧留白的方式适配，导致屏幕空间未能有效被利用。

　　所以，我们需要设计一个方案能够同时满足这两种常见屏幕下的阅读编辑体验。

　　△ 知识库 2.0 之前的阅读页

2. 超宽卡片读写不便

　　语雀文档给用户提供了丰富的卡片插入能力，包括：表格、代码块、思维导图、流程图、本地文件等等。

　　在工作场景下，大家常常用表格记录项目进度，用思维导图拆解运营策略，用流程图表达产品逻辑……所以，文档中插入的这些卡片的横向宽度可能很大。

　　而此时由于语雀的文档区域宽度固定，用户读写时常常需要横向滚动，非常不便。

　　那有没有办法能让超宽卡片更好地展开呢?

　　带着这两个问题，我们开始了在「知识库 2.0」项目中关于大屏适配的设计思考。

前期调研

　　我们研究了市面上常见的几家文档工具对于大屏幕的适配方式，大致可以分为以下几种解决方案：

1. 全文适配

　　有些产品能够对整篇文档的显示宽度设置，提供「标准」「超宽」等模式。

　　在「标准」模式下，文字等主体内容宽度固定(部分产品允许表格单独超出文字宽度);在「超宽」模式下，所有元素宽度跟随浏览器宽度进行自适应。

　　这种方案的优点是设置简单，缺点可能就是因为一刀切控制而造成超宽模式下文字排版过宽，用户逐句阅读时比较累。