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

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 个模板，可以从中 挑选出最合适的放入内容。 图：三栏内容的一些模板 1 123 / 3 页下一页 文章来源于：/article-7399-1.html