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

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

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

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

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

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

開(kāi)端

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

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

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

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

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


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

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

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

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

引入Duplo

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

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

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

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

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


圖：三欄內容的一些模板

如何實(shí)現

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

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

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

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

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


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

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


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

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

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

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

頁(yè)面流（page flow）

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

 

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

 

填滿(mǎn)現有框架所需文字數量（Amount of text to fill the given frame）

我們估計出框架內內容包含文字的百分比，給那些百分比達到 80% 或以上的內容更高的權重。


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

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


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

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

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

 

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

所有的這些方法都是為了接近設計師或是雜志編輯，呈現出最好的效果。


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

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

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

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

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

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


呈現頁(yè)面

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

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

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

 

總結


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

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

圖：同一篇文章在不同尺寸下的呈現效果

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