海報在iOS系統(tǒng)中的應(yīng)用探究分析

海報在iOS系統(tǒng)中的應(yīng)用探究分析

張  建  黨  韜  周秦瑤

(四川封面?zhèn)髅接邢挢?zé)任公司)

【摘  要】海報作為一種新型新聞內(nèi)容傳播形態(tài)，其通過將事實報道與UI設(shè)計相結(jié)合，具有直觀可見，社交屬性強以及在快節(jié)奏生活下能快速抓住受眾眼球等特征，大大提升了新聞傳播力。本文以封面新聞客戶端為例，從傳播應(yīng)用以及海報生成原理做下分析探討

【關(guān)健詞】海報  傳播形態(tài)  原理  傳播力

隨著互聯(lián)網(wǎng)科技的不變創(chuàng)新變革，媒體傳播形式已經(jīng)發(fā)生了巨大變化。已由早期單一的文本傳播變成了如今的圖片、視頻、圖文混合等多形態(tài)并存的新形態(tài)。自新冠疫情發(fā)生以來，主流媒體均充分利用自身資源和優(yōu)勢，借助海報簡單明了，信息直達的特征策劃了不少戰(zhàn)“疫”主題海報。海報這種相較于視頻更輕量化的內(nèi)容傳播形態(tài)已成為全媒體時代新聞媒體的一種新型宣傳報道形式。

1  新聞海報特征

新聞海報繼承了傳統(tǒng)海報媒介屬性，同時其借助直觀簡潔的文字符號、圖片樣式設(shè)計以及相關(guān)信息二維碼嵌入，向廣大用戶提供新聞報道事實，借助掃碼跳轉(zhuǎn)等創(chuàng)新行為進行交互，具備主題創(chuàng)意凝練、沉浸式互動體驗以及直觀視覺沖擊特征

1.1  主題創(chuàng)意凝練

新聞海報主題一般比較鮮明，直擊要義。能快速抓住受眾注意力，同時也能快速讓受眾通過簡單的幾行文字或者圖文了解到事實真相。其可以充分利用新媒傳播碎片化、及時以及不限篇幅等特點共同闡明表述一個主題，比如此次因疫情而產(chǎn)生的戰(zhàn)“疫”主題。

1.2沉浸式互動體驗

新聞海報數(shù)據(jù)化、動效化、掃碼鏈接等多種方式可以給用戶沉浸式體驗，很容易形成強有力的代入感。再加上其易于傳播，用戶可便捷通過微信、微博等社交媒體賬號進行二次轉(zhuǎn)發(fā)，參與到情境共建中，達到凝聚共識。

1.3  直觀視覺沖擊

海報的呈現(xiàn)形式遠遠比文本來得直接有效，再加上對于海報樣式，風(fēng)格的不同搭配，可以使其變得極具視覺沖擊，這樣更容易喚起受眾對該新聞報道的求知興趣。同時也能大大提升二次傳播力。

2  技術(shù)實現(xiàn)

從海報的以上幾個特征，咱們可以看出其在當今全媒時代背景下新媒體傳播中的強大優(yōu)勢。那么海報在客戶端中又是如何生成的呢?下面以封面新聞客戶端中海報生成為例，詳情介紹下海報生成中遇到的問題以及處理辦法。

在了解具體實現(xiàn)之前，先了解下iOS系統(tǒng)中圖像繪制的部分知識。下面是圖形架構(gòu)總覽圖：

iOS提供了兩套繪圖框架，分別是UIBezierPath和Core Graphics。 UIBezierPath屬于UIKit。UIBezierPath是對Core Graphics框架的進一步封裝。OpenGL和Core Graphies都是繪圖專用的API類族，調(diào)用圖形處理器(GPU)進行圖形的繪制和渲染。在架構(gòu)上是平級的，相比UIkit更接近底層。

2.1 iOS圖像繪制基礎(chǔ)概念

2.1.1 CoreGraphies和Quartz 2D

quartz是一個通用的術(shù)語，主要用于描述在iOS系統(tǒng)和  MAC OSX中整個媒體層用到的多種技術(shù)，包含圖形、畫、音頻、視頻。Quart2D是一組二位繪圖渲染API,CoreGraphie便是使用該API進行圖像繪制。

2.1.2點和像素

iOS系統(tǒng)有自己的坐標系，根據(jù)屏幕不同，其坐標系中每個點所擁有的像素是不同的，比如手機屏幕分辨率是640x960,但是咱們實際在繪制時畫布尺寸是320x480。相當于坐標系上每個點對應(yīng)兩個像素。

2.1.3  圖形上下文

CoewGraphics使用圖形上下文進行繪制任務(wù)，其作用可以理解成畫布。在圖形上下文之外是無法進行有效繪制的。

2.2海報生成

海報生成在客戶端中由于其應(yīng)用場景較多，不同場景下海報樣式也不同，所以在具體生成方式選擇上需進行多方綜合考慮。

2.2.1繪圖方式選擇

iOS系統(tǒng)對于文本繪制或者是圖片繪制其實都提供單獨一套api,但是比較繁瑣，需要提前確定好文本、圖片繪制區(qū)域范圍，這里如果采用手動計算在海報元素比較單一時還行，但是當海報中包含元素較多且海報內(nèi)容是可變時則不再適用。以封面新聞中海報應(yīng)用場景為例，大致分為以下幾種樣式：

以上幾張圖均來自封面新聞客戶端，其中圖1是排行榜類海報，圖2為新聞類海報，圖3為其他海報。

考慮到多場景，多樣式。文本繪制的drawAtPoint或者drawInRect并不適用，因為其位置坐標計算會隨著海報元素的增加變得無比復(fù)雜。最后采用的方法是所有繪制依舊采用交由系統(tǒng)去處理，我們不直接計算元素坐標位置而是直接借助自動布局去擺放元素，具體計算也一并交由系統(tǒng)處理。但是該方法得以實現(xiàn)的前提是需要借助系統(tǒng)提供的截屏功能，并且需要先根據(jù)海報元素內(nèi)容生成一個臨時的UI界面，該界面布局方式完全采用自動布局。將其臨時添加至window層，拿到截圖后再移除。這個截圖也就是最后需要的海報圖像。

2.2.2布局

在布局這塊封面海報經(jīng)歷了兩個階段，由于一開始海報需求比較單一，元素簡單。所以采用的是里面元素布局交由自動布局，但是具體海報圖片高度以及寬度是人工計算控制的。但是隨著后面版本不斷更新迭代，海報展示呈多樣化發(fā)展，海報總體高度人工計算成本越來越高。

這也有來到了第二個階段，摒棄了第一種方式，我們采用了對海報替身UI截屏的方式。該方式要求我們在對整個海報元素做搭建時必須完整支持高寬自適應(yīng)。這樣海報才能自己根據(jù)內(nèi)容變化動態(tài)調(diào)整自身高度，也避去了第一種方式中人工計算高度的繁瑣。

2.2.3高清二維碼生成

上面三張封面新聞客戶端海報示例中二維碼是根據(jù)文章鏈接生成。二維碼生成并不復(fù)雜，借助CIFilter再結(jié)合上面CoreGraphics即可完成，其中有一點需特別注意，二維碼生成時需將其容錯率調(diào)整至高級別，否則很容易出現(xiàn)所生成二維碼無法識別的情況。此外如果二維碼中心需嵌入圖標，該圖標尺寸不能過大，否則依舊無法識別。

3  應(yīng)用成果

該海報生成技術(shù)已成熟落地，完成了對公司旗下20多個項目海報分享支持，大大提升了新聞傳播力度。給廣大用戶提供了優(yōu)質(zhì)的海報分享服務(wù)。

4  總結(jié)與展望

本文針對海報生成提出了一種便捷高效的排版方式，實現(xiàn)了將復(fù)雜的人工計算轉(zhuǎn)化為系統(tǒng)自動處理。為海報在客戶端中的多形態(tài)使用提供了基礎(chǔ)。讓開發(fā)者只需要專注于海報內(nèi)容以及樣式調(diào)整上。

未來我們將繼續(xù)針對圖像生成做進一步的探索研究，嘗試尋找更高效便捷的海報生成方式。

參考文獻：

[1]黃曉輝.新聞海報在新聞報道中的運用.媒體實戰(zhàn)，2022.2;上卷

[2]于洋，夏佳志，鄭科，陳為，彭群生，基于視頻序列的平面海報生成方法，計算機輔助設(shè)計與圖形學(xué)學(xué)

報，2009.5;5期：21卷