Flipboard精美的阅读页面是这样一步一步做出来的

Flipboard是一款将社交媒体上的内容整合起来以杂志的形式呈现给用户阅读的工具，致力于做出世界上最好的个性化杂志，一本专为你而定制的杂志。在Flipboard团队的一篇博文中，我们可以更好地了解Flipboard是如何生成精美的阅读页面的。

杂志布局设计在呈现文章时起着关键的作用。好的布局能够塑造一个故事，并影响你对于文章的看法。例如，在《体育画报》（Sports Illustrated，时代华纳旗下体育周刊），编辑们在付印之前会把本期杂志的每一页都贴在走廊里，让大家评判并修改。

在你阅读 Flipboard 的时候，文章和图片分成了几页，你可以随意翻阅，就像是印出来的杂志一样。每一页都像是手工设计的，非常漂亮，就好像编辑专门为你创作的一样。

我们如何让整个页面布局自动化的呢？秘诀就是把内容放进专门设计好的页面模板中，就好像是拼图一样。我们首先由设计师设计出一系列的布局方式，然后，系统会依据文字的紧凑度，协调性，节奏，图片的裁剪和拉伸等算出你的内容最适合什么模板。

这些就是 Flipboard 页面布局的关键所在，其背后是真正的设计师的作品。

开端

在 2010 年，我们开发了 Flipboard Pages，这是一个页面布局引擎，能够将网页上的文章转换成适合 iPad 阅读的杂志页面。

Pages 为包括Vanity Fair和National Geographic等一些顶级杂志的内容加上了页码。

Pages 系统可以生成漂亮的页面，复制出每种杂志的品牌特征和它们典型的印刷样式。Pages 使用 CSS3，SVG 和 vanilla JavaScript 技术使得在转换的页面在移动设备上（例如运行 iOS3.2 的第一代 iPad）能够尽可能保持原貌，并且良好地运行。下载时页面布局所占的空间平均为 90K，包括布局，样式，字体和图片名称。这些加起来比一个同样内容的网页或者是文章中的一张图片还要小。

设计师首先会设计出一套大约 20 种布局方式，并区分出用于人像的（768x1004）和风景的（1024x748）版本。从这一套模板里，Pages 选择出最适合文本的，把内容插入其中，生成最终页面。通过这种方式创建模板，我们需要设计师把页面设计得简洁，独特、好看。

虽然 Pages 能够创造出很棒的布局，但是他们只能生成特定大小的页面。

Web 和 Windows 8 提出了新的挑战，用户可以随时把浏览窗口调成任意大小，为了解决这个问题，我们还需要进一步努力。

引入Duplo

Duplo 是一个新的页面布局引擎，它的思路来源于 Pages 系统，但是通过模块化和网格系统快速把内容放入各种尺寸的几千种页面中。

你来试试看，打开这个页面，翻到新一页，然后随机调整浏览器窗口大小。Flipboard 的页面布局能够始终随着窗口大小而改变，这就是 Duplo 的功劳。

Duplo 与 Pages 类似，设计师首先要设计一系列布局方式，从这套模板中，再选择最适合模板放入将要阅读的内容。

但是，Pages 只有 20 个模板，Duplo 却有 2000 到 6000 个模板，可以从中挑选出最合适的放入内容。

图：三栏内容的一些模板