網(wǎng)站建設(shè)Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的發(fā)布者：本站     時(shí)間：2022-03-27 10:03:07

媒體上的內(nèi)容整合起來(lái)以雜志的形式呈現(xiàn)給用戶(hù)閱讀的工具，致力于做出世界上最好的個(gè)性化雜志，一本專(zhuān)為你而定制的雜志。在Flipboard團(tuán)隊(duì)的一篇博文中，我們可以更好地了解Flipboard是如何生成精美的閱讀頁(yè)面的。

雜志布局設(shè)計(jì)在呈現(xiàn)文章時(shí)起著關(guān)鍵的作用。好的布局能夠塑造一個(gè)故事，并影響你對(duì)于文章的看法。例如，在《體育畫(huà)報(bào)》（Sports Illustrated，時(shí)代華納旗下體育周刊），編輯們?cè)诟队≈皶?huì)把本期雜志的每一頁(yè)都貼在走廊里，讓大家評(píng)判并修改。

在你閱讀 Flipboard 的時(shí)候，文章和圖片分成了幾頁(yè)，你可以隨意翻閱，就像是印出來(lái)的雜志一樣。每一頁(yè)都像是手工設(shè)計(jì)的，非常漂亮，就好像編輯專(zhuān)門(mén)為你創(chuàng)作的一樣。

我們?nèi)绾巫屨麄€(gè)頁(yè)面布局自動(dòng)化的呢？秘訣就是把內(nèi)容放進(jìn)專(zhuān)門(mén)設(shè)計(jì)好的頁(yè)面模板中，就好像是拼圖一樣。我們首先由設(shè)計(jì)師設(shè)計(jì)出一系列的布局方式，然后，系統(tǒng)會(huì)依據(jù)文字的緊湊度，協(xié)調(diào)性，節(jié)奏，圖片的裁剪和拉伸等算出你的內(nèi)容最適合什么模板。

這些就是 Flipboard 頁(yè)面布局的關(guān)鍵所在，其背后是真正的設(shè)計(jì)師的作品。

開(kāi)端

在 2010 年，我們開(kāi)發(fā)了 Flipboard Pages，這是一個(gè)頁(yè)面布局引擎，能夠?qū)⒕W(wǎng)頁(yè)上的文章轉(zhuǎn)換成適合 iPad 閱讀的雜志頁(yè)面。

Pages 為包括Vanity Fair和National Geographic等一些頂級(jí)雜志的內(nèi)容加上了頁(yè)碼。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的


Pages 系統(tǒng)可以生成漂亮的頁(yè)面，復(fù)制出每種雜志的品牌特征和它們典型的印刷樣式。Pages 使用 CSS3，SVG 和 vanilla JavaScript 技術(shù)使得在轉(zhuǎn)換的頁(yè)面在移動(dòng)設(shè)備上（例如運(yùn)行 iOS3.2 的第一代 iPad）能夠盡可能保持原貌，并且良好地運(yùn)行。下載時(shí)頁(yè)面布局所占的空間平均為 90K，包括布局，樣式，字體和圖片名稱(chēng)。這些加起來(lái)比一個(gè)同樣內(nèi)容的網(wǎng)頁(yè)或者是文章中的一張圖片還要小。

設(shè)計(jì)師首先會(huì)設(shè)計(jì)出一套大約 20 種布局方式，并區(qū)分出用于人像的（768x1004）和風(fēng)景的（1024x748）版本。從這一套模板里，Pages 選擇出最適合文本的，把內(nèi)容插入其中，生成最終頁(yè)面。通過(guò)這種方式創(chuàng)建模板，我們需要設(shè)計(jì)師把頁(yè)面設(shè)計(jì)得簡(jiǎn)潔，獨(dú)特、好看。

雖然 Pages 能夠創(chuàng)造出很棒的布局，但是他們只能生成特定大小的頁(yè)面。

Web 和 Windows 8 提出了新的挑戰(zhàn)，用戶(hù)可以隨時(shí)把瀏覽窗口調(diào)成任意大小，為了解決這個(gè)問(wèn)題，我們還需要進(jìn)一步努力。

引入Duplo

Duplo 是一個(gè)新的頁(yè)面布局引擎，它的思路來(lái)源于 Pages 系統(tǒng)，但是通過(guò)模塊化和網(wǎng)格系統(tǒng)快速把內(nèi)容放入各種尺寸的幾千種頁(yè)面中。

你來(lái)試試看，打開(kāi)這個(gè)頁(yè)面，翻到新一頁(yè)，然后隨機(jī)調(diào)整瀏覽器窗口大小。Flipboard 的頁(yè)面布局能夠始終隨著窗口大小而改變，這就是 Duplo 的功勞。

Duplo 與 Pages 類(lèi)似，設(shè)計(jì)師首先要設(shè)計(jì)一系列布局方式，從這套模板中，再選擇最適合模板放入將要閱讀的內(nèi)容。

但是，Pages 只有 20 個(gè)模板，Duplo 卻有 2000 到 6000 個(gè)模板，可以從中挑選出最合適的放入內(nèi)容。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的


圖：三欄內(nèi)容的一些模板

如何實(shí)現(xiàn)

和 Pages 一樣，Duplo 基于 JavaScript。JavaScript 開(kāi)發(fā)很快，很輕便，功能超一流。CSS3 則為排版和布局提供了堅(jiān)實(shí)的基礎(chǔ)。使用 Duplo 能夠保持布局設(shè)計(jì)輕量化，并且在配備 Retina 屏的設(shè)備上呈現(xiàn)效果很好。

Duplo 運(yùn)行主要有四個(gè)步驟：創(chuàng)建頁(yè)面，選擇頁(yè)面，優(yōu)化頁(yè)面，呈現(xiàn)頁(yè)面。

創(chuàng)建頁(yè)面

短時(shí)間內(nèi)通過(guò)手工設(shè)計(jì)超過(guò) 2000 種布局是不現(xiàn)實(shí)的，所以，Duplo 的頁(yè)面生成器在遵循一定的設(shè)計(jì)原則的基礎(chǔ)上將小部件拼接出一個(gè)完整的頁(yè)面。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的


設(shè)計(jì)師在頁(yè)面的平衡與和諧方面的設(shè)計(jì)標(biāo)準(zhǔn)是有細(xì)微差異的，所以我們簡(jiǎn)單地把這些設(shè)計(jì)原則生成布局模板，通過(guò)樹(shù)狀圖展現(xiàn)了所有組合的可能性。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的


在選擇最佳布局時(shí)，Duplo 也會(huì)使用設(shè)計(jì)師親手設(shè)計(jì)的完整頁(yè)面布局。

選擇頁(yè)面，填入內(nèi)容

Duplo 生成了一套布局組合之后，它就需要算出 2000 多套模板中哪個(gè)是最適合現(xiàn)有內(nèi)容的。

首先，Duplo 比較文章結(jié)構(gòu)和模板的空白處，看看它們的匹配程度。然后，通過(guò)優(yōu)化一個(gè)建立在多個(gè)獨(dú)立加權(quán)的探試程序（heuristics）上的適應(yīng)度函數(shù)，算出內(nèi)容和模板的最佳組合，其中一些探試程序包括：

頁(yè)面流（page flow）

我們運(yùn)用 Perlin 噪聲來(lái)感知頁(yè)面上文字和數(shù)字的有機(jī)變化。這個(gè)噪聲函數(shù)趨近于編輯在進(jìn)行雜志頁(yè)面布局時(shí)所采用的方法。

 

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

 

填滿現(xiàn)有框架所需文字?jǐn)?shù)量（Amount of text to fill the given frame）

我們估計(jì)出框架內(nèi)內(nèi)容包含文字的百分比，給那些百分比達(dá)到 80% 或以上的內(nèi)容更高的權(quán)重。


隨著窗口尺寸改變內(nèi)容的一致性（Content coherence across window resizes）

在雜志上排版時(shí)會(huì)將相關(guān)的內(nèi)容安排在一起，在移動(dòng)設(shè)備上，我們也采用這樣的方法。


圖片特性的監(jiān)測(cè)，畫(huà)面寬高比，拉伸，裁剪等（Image feature detection, aspect ratio, scale, crop）

我們計(jì)算出適應(yīng)模板所需要的拉伸和裁剪的大小。給那些裁剪最小的以及拉伸幅度不超過(guò) 120% 的模板更高權(quán)重。我們也使用OpenCV在服務(wù)器端監(jiān)測(cè)圖片的一些特征，例如面部和突出的物品。
 

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

 

遍歷所有的備選模板是非常慢的。Duplo 通過(guò)分枝限定法（branch and bound algorithm）去除不合適的，縮小搜索范圍。

所有的這些方法都是為了接近設(shè)計(jì)師或是雜志編輯，呈現(xiàn)出最好的效果。


優(yōu)化頁(yè)面

一旦一個(gè)合適的布局被選中，Duplo 還會(huì)進(jìn)一步優(yōu)化?？蚣芤凑栈鶞?zhǔn)線的網(wǎng)格對(duì)齊。圖片框架要調(diào)整到最適合目標(biāo)圖片，頁(yè)面邊緣不合適的也會(huì)進(jìn)行調(diào)整。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

圖：調(diào)整前，標(biāo)題和正文沒(méi)有按照基準(zhǔn)線網(wǎng)格呈現(xiàn)

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

圖：調(diào)整后，標(biāo)題和正文按照基準(zhǔn)線網(wǎng)格呈現(xiàn)，圖片進(jìn)行了一定的裁剪


呈現(xiàn)頁(yè)面

當(dāng) Duplo 完整調(diào)整后，拼圖的大部分已經(jīng)完成了。我們現(xiàn)在有一個(gè)精致的、考慮周全的頁(yè)面。頁(yè)面像 HTML DOM 一樣被簡(jiǎn)單地調(diào)整了。經(jīng)過(guò)拉伸和裁剪的圖片加載上，動(dòng)態(tài)數(shù)據(jù)被獲取到，文章被精確地放在頁(yè)面框架中，正文的首字母被放大，標(biāo)題被改變了大小。Duplo 根據(jù)設(shè)計(jì)師的特點(diǎn)將改變標(biāo)題大小，原字體較大的變小點(diǎn)，原字體小的時(shí)候加粗或增大，這都是由設(shè)計(jì)師來(lái)決定的。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

圖：寬高比不斷提高，字變小后，對(duì)齊進(jìn)行了加粗處理。Duplo 會(huì)一直調(diào)整標(biāo)題，直到調(diào)整到邊界內(nèi)部。

 

總結(jié)


從很多方面來(lái)說(shuō)，F(xiàn)lipboard 的故事是現(xiàn)代的一種象征：最好的結(jié)果通常來(lái)自人類(lèi)與科技的良好協(xié)作。這個(gè)時(shí)代的主要特點(diǎn)就是軟硬件的聯(lián)網(wǎng)，是人被電腦和機(jī)器人取代。但是，一再地，當(dāng)我們看到策展、推薦、個(gè)人化方面的最佳結(jié)果都是人和軟件合作帶來(lái)的。

Flipboard精美的閱讀頁(yè)面是這樣一步一步做出來(lái)的

圖：同一篇文章在不同尺寸下的呈現(xiàn)效果

我們用 Pages 和 Duplo 所做的就是將雜志的設(shè)計(jì)元素融入電子閱讀，這種強(qiáng)大的工具能夠很好地呈現(xiàn)故事，影響讀者，它們創(chuàng)造了一種方法來(lái)使這個(gè)過(guò)程自動(dòng)化，同時(shí)也抓住了人類(lèi)設(shè)計(jì)師作品的精髓。