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

2023/08/02-16:12 來(lái)源:

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

張  建  黨  韜  周秦瑤

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

【摘  要】海報(bào)作為一種新型新聞內(nèi)容傳播形態(tài),其通過(guò)將事實(shí)報(bào)道與UI設(shè)計(jì)相結(jié)合,具有直觀可見(jiàn),社交屬性強(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ā)生以來(lái),主流媒體均充分利用自身資源和優(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)以及直觀視覺(jué)沖擊特征

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

新聞海報(bào)主題一般比較鮮明,直擊要義。能快速抓住受眾注意力,同時(shí)也能快速讓受眾通過(guò)簡(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)有力的代入感。再加上其易于傳播,用戶可便捷通過(guò)微信、微博等社交媒體賬號(hào)進(jìn)行二次轉(zhuǎn)發(fā),參與到情境共建中,達(dá)到凝聚共識(shí)。

1.3  直觀視覺(jué)沖擊

海報(bào)的呈現(xiàn)形式遠(yuǎn)遠(yuǎn)比文本來(lái)得直接有效,再加上對(duì)于海報(bào)樣式,風(fēng)格的不同搭配,可以使其變得極具視覺(jué)沖擊,這樣更容易喚起受眾對(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)生成中遇到的問(wèn)題以及處理辦法。

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

image.png

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

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

2.1.1 CoreGraphies和Quartz 2D

quartz是一個(gè)通用的術(shù)語(yǔ),主要用于描述在iOS系統(tǒng)和  MAC OSX中整個(gè)媒體層用到的多種技術(shù),包含圖形、畫(huà)、音頻、視頻。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í)畫(huà)布尺寸是320x480。相當(dāng)于坐標(biāo)系上每個(gè)點(diǎn)對(duì)應(yīng)兩個(gè)像素。

2.1.3  圖形上下文

CoewGraphics使用圖形上下文進(jìn)行繪制任務(wù),其作用可以理解成畫(huà)布。在圖形上下文之外是無(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)景為例,大致分為以下幾種樣式:

image.png

image.pngimage.png

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

考慮到多場(chǎng)景,多樣式。文本繪制的drawAtPoint或者drawInRect并不適用,因?yàn)槠湮恢米鴺?biāo)計(jì)算會(huì)隨著海報(bào)元素的增加變得無(wú)比復(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è)階段,由于一開(kāi)始海報(bào)需求比較單一,元素簡(jiǎn)單。所以采用的是里面元素布局交由自動(dòng)布局,但是具體海報(bào)圖片高度以及寬度是人工計(jì)算控制的。但是隨著后面版本不斷更新迭代,海報(bào)展示呈多樣化發(fā)展,海報(bào)總體高度人工計(jì)算成本越來(lái)越高。

這也有來(lái)到了第二個(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)所生成二維碼無(wú)法識(shí)別的情況。此外如果二維碼中心需嵌入圖標(biāo),該圖標(biāo)尺寸不能過(guò)大,否則依舊無(wú)法識(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ǔ)。讓開(kāi)發(fā)者只需要專(zhuān)注于海報(bào)內(nèi)容以及樣式調(diào)整上。

未來(lái)我們將繼續(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卷