Flipboard是一款將社交媒體上的內(nèi)容整合起來以雜志的形式呈現(xiàn)給用戶閱讀的工具，致力于做出世界上最好的個性化雜志，一本專為你而定制的雜志。在Flipboard團隊的一篇博文中，我們可以更好地了解Flipboard是如何生成精美的閱讀頁面的。
雜志布局設(shè)計在呈現(xiàn)文章時起著關(guān)鍵的作用。好的布局能夠塑造一個故事，并影響你對于文章的看法。例如，在《體育畫報》（Sports Illustrated，時代華納旗下體育周刊），編輯們在付印之前會把本期雜志的每一頁都貼在走廊里，讓大家評判并修改。
在你閱讀 Flipboard 的時候，文章和圖片分成了幾頁，你可以隨意翻閱，就像是印出來的雜志一樣。每一頁都像是手工設(shè)計的，非常漂亮，就好像編輯專門為你創(chuàng)作的一樣。
我們?nèi)绾巫屨麄€頁面布局自動化的呢？秘訣就是把內(nèi)容放進專門設(shè)計好的頁面模板中，就好像是拼圖一樣。我們首先由設(shè)計師設(shè)計出一系列的布局方式，然后，系統(tǒng)會依據(jù)文字的緊湊度，協(xié)調(diào)性，節(jié)奏，圖片的裁剪和拉伸等算出你的內(nèi)容最適合什么模板。
這些就是 Flipboard 頁面布局的關(guān)鍵所在，其背后是真正的設(shè)計師的作品。
開端
在 2010 年，我們開發(fā)了 Flipboard Pages，這是一個頁面布局引擎，能夠?qū)⒕W(wǎng)頁上的文章轉(zhuǎn)換成適合 iPad 閱讀的雜志頁面。
Pages 為包括Vanity Fair和National Geographic等一些頂級雜志的內(nèi)容加上了頁碼。
Pages 系統(tǒng)可以生成漂亮的頁面，復制出每種雜志的品牌特征和它們典型的印刷樣式。Pages 使用 CSS3，SVG 和 vanilla JavaScript 技術(shù)使得在轉(zhuǎn)換的頁面在移動設(shè)備上（例如運行 iOS3.2 的第一代 iPad）能夠盡可能保持原貌，并且良好地運行。下載時頁面布局所占的空間平均為 90K，包括布局，樣式，字體和圖片名稱。這些加起來比一個同樣內(nèi)容的網(wǎng)頁或者是文章中的一張圖片還要小。
設(shè)計師首先會設(shè)計出一套大約 20 種布局方式，并區(qū)分出用于人像的（768×1004）和風景的（1024×748）版本。從這一套模板里，Pages 選擇出最適合文本的，把內(nèi)容插入其中，生成最終頁面。通過這種方式創(chuàng)建模板，我們需要設(shè)計師把頁面設(shè)計得簡潔，獨特、好看。
雖然 Pages 能夠創(chuàng)造出很棒的布局，但是他們只能生成特定大小的頁面。
Web 和 Windows 8 提出了新的挑戰(zhàn)，用戶可以隨時把瀏覽窗口調(diào)成任意大小，為了解決這個問題，我們還需要進一步努力。
引入Duplo
Duplo 是一個新的頁面布局引擎，它的思路來源于 Pages 系統(tǒng)，但是通過模塊化和網(wǎng)格系統(tǒng)快速把內(nèi)容放入各種尺寸的幾千種頁面中。
你來試試看，打開這個頁面，翻到新一頁，然后隨機調(diào)整瀏覽器窗口大小。Flipboard 的頁面布局能夠始終隨著窗口大小而改變，這就是 Duplo 的功勞。
Duplo 與 Pages 類似，設(shè)計師首先要設(shè)計一系列布局方式，從這套模板中，再選擇最適合模板放入將要閱讀的內(nèi)容。
但是，Pages 只有 20 個模板，Duplo 卻有 2000 到 6000 個模板，可以從中挑選出最合適的放入內(nèi)容。
圖：三欄內(nèi)容的一些模板
如何實現(xiàn)
和 Pages 一樣，Duplo 基于 JavaScript。JavaScript 開發(fā)很快，很輕便，功能超一流。CSS3 則為排版和布局提供了堅實的基礎(chǔ)。使用 Duplo 能夠保持布局設(shè)計輕量化，并且在配備 Retina 屏的設(shè)備上呈現(xiàn)效果很好。
Duplo 運行主要有四個步驟：創(chuàng)建頁面，選擇頁面，優(yōu)化頁面，呈現(xiàn)頁面。
創(chuàng)建頁面
短時間內(nèi)通過手工設(shè)計超過 2000 種布局是不現(xiàn)實的，所以，Duplo 的頁面生成器在遵循一定的設(shè)計原則的基礎(chǔ)上將小部件拼接出一個完整的頁面。
設(shè)計師在頁面的平衡與和諧方面的設(shè)計標準是有細微差異的，所以我們簡單地把這些設(shè)計原則生成布局模板，通過樹狀圖展現(xiàn)了所有組合的可能性。
在選擇最佳布局時，Duplo 也會使用設(shè)計師親手設(shè)計的完整頁面布局。
選擇頁面，填入內(nèi)容
Duplo 生成了一套布局組合之后，它就需要算出 2000 多套模板中哪個是最適合現(xiàn)有內(nèi)容的。
首先，Duplo 比較文章結(jié)構(gòu)和模板的空白處，看看它們的匹配程度。然后，通過優(yōu)化一個建立在多個獨立加權(quán)的探試程序（heuristics）上的適應(yīng)度函數(shù)，算出內(nèi)容和模板的最佳組合，其中一些探試程序包括：
頁面流（page flow）
我們運用 Perlin 噪聲來感知頁面上文字和數(shù)字的有機變化。這個噪聲函數(shù)趨近于編輯在進行雜志頁面布局時所采用的方法。
填滿現(xiàn)有框架所需文字數(shù)量（Amount of text to fill the given frame）
我們估計出框架內(nèi)內(nèi)容包含文字的百分比，給那些百分比達到 80% 或以上的內(nèi)容更高的權(quán)重。
隨著窗口尺寸改變內(nèi)容的一致性（Content coherence across window resizes）
在雜志上排版時會將相關(guān)的內(nèi)容安排在一起，在移動設(shè)備上，我們也采用這樣的方法。
圖片特性的監(jiān)測，畫面寬高比，拉伸，裁剪等（Image feature detection, aspect ratio, scale, crop）
我們計算出適應(yīng)模板所需要的拉伸和裁剪的大小。給那些裁剪最小的以及拉伸幅度不超過 120% 的模板更高權(quán)重。我們也使用OpenCV在服務(wù)器端監(jiān)測圖片的一些特征，例如面部和突出的物品。
遍歷所有的備選模板是非常慢的。Duplo 通過分枝限定法（branch and bound algorithm）去除不合適的，縮小搜索范圍。
所有的這些方法都是為了接近設(shè)計師或是雜志編輯，呈現(xiàn)出最好的效果。
優(yōu)化頁面
一旦一個合適的布局被選中，Duplo 還會進一步優(yōu)化?？蚣芤凑栈鶞示€的網(wǎng)格對齊。圖片框架要調(diào)整到最適合目標圖片，頁面邊緣不合適的也會進行調(diào)整。
圖：調(diào)整前，標題和正文沒有按照基準線網(wǎng)格呈現(xiàn)
圖：調(diào)整后，標題和正文按照基準線網(wǎng)格呈現(xiàn)，圖片進行了一定的裁剪
呈現(xiàn)頁面
當 Duplo 完整調(diào)整后，拼圖的大部分已經(jīng)完成了。我們現(xiàn)在有一個精致的、考慮周全的頁面。頁面像 HTML DOM 一樣被簡單地調(diào)整了。經(jīng)過拉伸和裁剪的圖片加載上，動態(tài)數(shù)據(jù)被獲取到，文章被精確地放在頁面框架中，正文的首字母被放大，標題被改變了大小。Duplo 根據(jù)設(shè)計師的特點將改變標題大小，原字體較大的變小點，原字體小的時候加粗或增大，這都是由設(shè)計師來決定的。
圖：寬高比不斷提高，字變小后，對齊進行了加粗處理。Duplo 會一直調(diào)整標題，直到調(diào)整到邊界內(nèi)部。
總結(jié)
從很多方面來說，F(xiàn)lipboard 的故事是現(xiàn)代的一種象征：最好的結(jié)果通常來自人類與科技的良好協(xié)作。這個時代的主要特點就是軟硬件的聯(lián)網(wǎng)，是人被電腦和機器人取代。但是，一再地，當我們看到策展、推薦、個人化方面的最佳結(jié)果都是人和軟件合作帶來的。
圖：同一篇文章在不同尺寸下的呈現(xiàn)效果
我們用 Pages 和 Duplo 所做的就是將雜志的設(shè)計元素融入電子閱讀，這種強大的工具能夠很好地呈現(xiàn)故事，影響讀者，它們創(chuàng)造了一種方法來使這個過程自動化，同時也抓住了人類設(shè)計師作品的精髓。
我們會繼續(xù)這段旅途，設(shè)想人類和計算機如何更加親密的合作是一件十分令人興奮的事情，我們也會一起繼續(xù)在藝術(shù)和科學領(lǐng)域開拓出新的邊界。
[本文編譯自：engineering.flipboard.com]
