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

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

張  建  黨  韜  周秦瑤

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

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

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

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

1  新聞海報(bào)特征

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

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

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

1.2沉浸式互動(dòng)體驗(yàn)

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

1.3  直觀視覺沖擊

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

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

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

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

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

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

2.1.1 CoreGraphies和Quartz 2D

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

2.1.2點(diǎn)和像素

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

2.1.3  圖形上下文

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

2.2海報(bào)生成

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

2.2.1繪圖方式選擇

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

以上幾張圖均來自封面新聞客戶端，其中圖1是排行榜類海報(bào)，圖2為新聞?lì)惡?bào)，圖3為其他海報(bào)。

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

2.2.2布局

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

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

2.2.3高清二維碼生成

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

3  應(yīng)用成果

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

4  總結(jié)與展望

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

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

參考文獻(xiàn)：

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

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

報(bào)，2009.5;5期：21卷