范干玉　黃晶石

摘要：通過(guò)對(duì)新媒體時(shí)代四種新聞?lì)怉PP的比對(duì)分析，總結(jié)歸納了高速互聯(lián)網(wǎng)時(shí)代的新聞?lì)怉PP界面設(shè)計(jì)語(yǔ)言特點(diǎn)和高效的視覺(jué)信息表現(xiàn)方式。文章將《人民日?qǐng)?bào)》《新京報(bào)》《THE SUN》《WSJ》四種新聞?lì)怉PP作為研究對(duì)象，總體上將視覺(jué)界面劃分為四個(gè)功能版塊，并以導(dǎo)航區(qū)域與內(nèi)容展示區(qū)域作為文章的研究重點(diǎn)。通過(guò)研究比對(duì)概括了新聞?lì)怉PP在導(dǎo)航和內(nèi)容展示兩個(gè)重點(diǎn)部分較為通用，且科學(xué)合理的界面視覺(jué)表現(xiàn)語(yǔ)言特征和表現(xiàn)方式。該結(jié)果可為今后移動(dòng)端新聞?lì)怉PP的界面設(shè)計(jì)提供較好的設(shè)計(jì)思維參考和可行性技術(shù)解決方案。

關(guān)鍵詞：新媒體 新聞?lì)怉PP界面 視覺(jué)表現(xiàn)特點(diǎn) 界面結(jié)構(gòu) 內(nèi)容版塊

中圖分類號(hào)：J0-03

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069 （2019） 06-0034-03

引言

隨著時(shí)代的變遷，人們獲取新聞的方式已經(jīng)從-杯茶、一張報(bào)紙、幾小時(shí)的慢節(jié)奏閱讀，逐漸轉(zhuǎn)變?yōu)橐槐Х?、一臺(tái)手機(jī)、幾分鐘的快餐式瀏覽。在“看圖說(shuō)話”的快節(jié)奏閱讀時(shí)代，新聞如果沒(méi)有簡(jiǎn)潔、高效的信息提示方式，再豐富的內(nèi)容也無(wú)法吸引大眾的閱讀興趣。所以在新媒體用戶爆炸式增長(zhǎng)的時(shí)代，明確用戶需求，進(jìn)行有針對(duì)性的設(shè)計(jì)就成為新聞?lì)怉PP設(shè)計(jì)的主導(dǎo)思想。有重點(diǎn)性的痛點(diǎn)解決方案及可重復(fù)性的數(shù)據(jù)驗(yàn)證，還存在很多空白。如何通過(guò)優(yōu)化媒體終端的界面設(shè)計(jì)提高界面的可閱讀性，增加單位面積的信息量，實(shí)現(xiàn)在有限界面中的信息快速、準(zhǔn)確、高效地傳播是互聯(lián)網(wǎng)時(shí)代急需解決的重要課題。文章通過(guò)對(duì)《人民日?qǐng)?bào)>《新京報(bào)》《THE SUN》《WsJ》四種新聞?lì)怉PP的分析比較，以此探究新聞?lì)怉PP界面視覺(jué)表現(xiàn)特點(diǎn)，為新聞?lì)怉PP的界面設(shè)計(jì)提供可行性參考。

一、傳統(tǒng)紙媒的演變

邸報(bào)是我國(guó)最早的報(bào)紙，“邸”是西漢時(shí)期官員在京的住所，后作為駐京辦事機(jī)構(gòu)，逐漸成為地方和中央的信息互動(dòng)的聯(lián)絡(luò)機(jī)構(gòu)[1]。據(jù)文字記載，我國(guó)歷史上最早發(fā)行的報(bào)紙是唐代開元年間的《開元雜報(bào)>，該報(bào)發(fā)行量極小，僅在官員，皇室之間流通，庶民百姓難得一見(jiàn)，整體處于邸報(bào)的初期階段。到了宋代，邸報(bào)的發(fā)行進(jìn)入全盛時(shí)期，發(fā)行量也有了長(zhǎng)足的進(jìn)步，基本可以覆蓋到整個(gè)社會(huì)的各個(gè)階層，成為了一種大眾刊物。新中國(guó)成立以后，陸續(xù)創(chuàng)刊了《人民日?qǐng)?bào)>《羊城晚報(bào)》等宣傳面廣_、發(fā)行量大的報(bào)紙。紙媒開始作為新聞傳播的主要媒介之一，蓬勃發(fā)展[2]。然而，從2013年起，中國(guó)的紙媒進(jìn)入低谷期，并開始出現(xiàn)了負(fù)增長(zhǎng)。究其原因，主要是受以移動(dòng)終端為載體的新媒體新聞傳播形式的大量出現(xiàn)，造成的市場(chǎng)份額被壓縮[3]。2014年初，《新聞晚報(bào)>關(guān)閉，這階段被“媒體札記”稱作“紙媒的黃昏”時(shí)期。報(bào)紙雜志的?？苍谥袊?guó)新聞界數(shù)見(jiàn)不鮮，從2014年開始，眾多傳統(tǒng)紙媒在強(qiáng)大的市場(chǎng)壓力下開始被動(dòng)進(jìn)行數(shù)字化轉(zhuǎn)型，期間有些紙媒及時(shí)更新理念，快速適應(yīng)了現(xiàn)代社會(huì)的信息傳遞方式，形成了具有突出特點(diǎn)的新聞?lì)怉PP范式，并憑借成功的運(yùn)營(yíng)經(jīng)驗(yàn)以及逐漸成熟的盈利模式在市場(chǎng)上站穩(wěn)腳跟。

二、新媒體新聞?lì)怉PP界面的表現(xiàn)特點(diǎn)分析

優(yōu)化移動(dòng)終端的界面設(shè)計(jì)以期提高界面的可閱讀性是新聞?lì)怉PP界面設(shè)計(jì)的主要任務(wù)。圖1是新聞?lì)怉PP主要界面的基本架構(gòu)。綜合《人民日?qǐng)?bào)>《新京報(bào)》《THE SUN》《WsJ》四種新聞APP的界面特點(diǎn)，將APP界面分解為A、B、C、D四個(gè)版塊。A版塊主要用于展示報(bào)紙logo及一些搜索附加選項(xiàng)，因?yàn)榕c主要功能無(wú)關(guān)，文章不進(jìn)行深入討論;B版塊主要用于報(bào)紙的菜單導(dǎo)航區(qū)域;C版塊主要用于內(nèi)容展示區(qū)域;D版塊主要用于分類導(dǎo)航區(qū)域。

（一）導(dǎo)航區(qū)域特點(diǎn)分析

APP導(dǎo)航是引導(dǎo)用戶訪問(wèn)APP的欄目、菜單、分類等布局結(jié)構(gòu)形式的總稱。它的分類形式可以概括為：標(biāo)簽導(dǎo)航、舵式導(dǎo)航、宮格導(dǎo)航、列表導(dǎo)航、輪播導(dǎo)航、抽屜導(dǎo)航、卡片導(dǎo)航、懸浮ICON導(dǎo)航、平鋪式導(dǎo)航等[4]。導(dǎo)航區(qū)域主要用于輔助用戶閱讀，所以在有限的空間下需要以如何優(yōu)化閱讀，提高信息傳遞效率為指導(dǎo)思想進(jìn)行設(shè)計(jì)。在界面設(shè)計(jì)上，簡(jiǎn)單的導(dǎo)航設(shè)計(jì)可以引導(dǎo)用戶更快地搜索到感興趣的信息內(nèi)容，提高用戶的閱讀效率;而復(fù)雜的導(dǎo)航設(shè)計(jì)會(huì)人為地增加界面復(fù)雜度，增加用戶搜索時(shí)間，造成用戶檢索成本的增加，降低用戶的閱讀效率。Giles Colborne在書中就提及“要?jiǎng)h掉不必要的說(shuō)明，這一類內(nèi)容是多余文字的‘主力軍，通?？梢浴撞涣簟盵5]。

新聞?lì)怉PP的主界面主要分為B版塊菜單導(dǎo)航區(qū)域和D版塊分類導(dǎo)航區(qū)域兩大部分。

首先以《人民日?qǐng)?bào)>等四種不同紙媒的新聞?lì)怉PP的B版塊菜單導(dǎo)航區(qū)域?yàn)槔?，從整體形式設(shè)計(jì)、字體選擇、配色、交互手法四個(gè)方面進(jìn)行分析與比較。

1.形式設(shè)計(jì)?！度嗣袢?qǐng)?bào)> APP采用的表現(xiàn)形式為“文字與文字”，即左側(cè)為大字，概括表述菜單區(qū)域特征，右側(cè)豎版小字作補(bǔ)充說(shuō)明，中間以豎線分隔，整體形成一個(gè)菜單選項(xiàng)。圖2是APP中“圖”的菜單選項(xiàng)，左側(cè)為“圖”字，右側(cè)為“鏡頭”兩字，用戶點(diǎn)擊后可以進(jìn)入圖片專題頁(yè)面。這種導(dǎo)航方式雖然明確傳遞了信息，但是不符合導(dǎo)航設(shè)計(jì)中常規(guī)的以圖傳意，以字解意的ICON（類象符號(hào)）與文字結(jié)合的設(shè)計(jì)方法。因此，會(huì)造成信息的重復(fù)提示，降低檢索效率。《THE SUN》 APP中則以純文字作導(dǎo)航，文字為正常黑體，不加修飾，形式簡(jiǎn)單明了，傳達(dá)信息方式比較直接，便于用戶快速瀏覽，提高閱讀效率?！缎戮﹫?bào)>APP的導(dǎo)航也運(yùn)用純文字的形式，但多數(shù)由兩個(gè)字或者四個(gè)字組成，相對(duì)于《THE SUN》 APP的菜單導(dǎo)航增加了矩形邊框，其作用主要是對(duì)內(nèi)容的強(qiáng)調(diào)和區(qū)分。然而在菜單導(dǎo)航區(qū)域使用矩形邊框修飾，占用整個(gè)界面有限空間過(guò)大，尤其是四個(gè)字的菜單導(dǎo)航，排版成一行，導(dǎo)致字體在矩形邊框里上下留白與左右留白十分不協(xié)調(diào)。借用設(shè)計(jì)師愛(ài)德華.塔夫特的一句話，“墨水（像素）不應(yīng)該浪費(fèi)在那些不是內(nèi)容或者重復(fù)的內(nèi)容上”[5]，在APP導(dǎo)航設(shè)計(jì)的過(guò)程中也應(yīng)該減少非內(nèi)容類的裝飾，提高空間利用率。

2.字體設(shè)計(jì)。字體設(shè)計(jì)包括字體類型、字體大小、字體樣式。而字體類型包括黑體、微軟雅黑等，相同界面的字體類型應(yīng)當(dāng)保持一致，以免產(chǎn)生信息格式的不協(xié)調(diào)性問(wèn)題，導(dǎo)致用戶閱讀效率的降低。在字體大小方面，點(diǎn)擊菜單導(dǎo)航，字體增大，利用字體所占空間的增加，反饋用戶。在字體樣式方面，字體加粗是比較簡(jiǎn)潔的一種改變形式，與增加字體大小相似都是增加空間占比，提供反饋。表1《THE SUN》 APP菜單導(dǎo)航字體加粗但大小保持不變。

3.配色。配色包括字體配色與圖形配色。字體配色與字體類型關(guān)系密切，根據(jù)《多媒體上有色漢字字體的可讀性研究>顯示，不同字體對(duì)色彩的敏感度不同，每種字體都有其最“親和”的顏色，該種顏色字體組合的可讀性最好[6]。這也就表明如果一部分字體顏色改變后，既不影響閱讀，又能在視覺(jué)上很“敏感”，就適合用顏色的改變反饋信息;反之，如果有些字體顏色改變后，雖然能在視覺(jué)上很“敏感”，但影響字體的可讀性，則不適合用顏色的改變反饋信息。有研究證明，微軟雅黑、冬青黑體與黑體在各種顏色下要較其他字體識(shí)別更快速[6]。表1《新京報(bào)> APP中的菜單導(dǎo)航區(qū)域使用的是黑體字體，在閱讀操作時(shí)，通過(guò)顏色的變化在字體很小的情況下閱讀提示依舊明顯。圖形配色會(huì)與字體配色保持一致，避免給界面造成視覺(jué)混亂。

4.交互方式。設(shè)計(jì)師要合理設(shè)計(jì)交互方式，在追求形式的同時(shí)，實(shí)現(xiàn)同樣的結(jié)果，操作步驟越少越能提高用戶體驗(yàn)，切勿為了追求界面簡(jiǎn)潔而增加用戶的操作次數(shù)，降低用戶的閱讀效率。例如《新京報(bào)>APP界面中的菜單導(dǎo)航，隱藏于右上角，雖然相對(duì)于其他界面而言較為簡(jiǎn)潔，但用戶在切換頻道時(shí)點(diǎn)擊手機(jī)屏幕的次數(shù)是其他APP的兩倍左右。界面設(shè)計(jì)的一個(gè)宗旨是簡(jiǎn)化操作流程，切記將設(shè)計(jì)凌駕于使用之上，造成設(shè)計(jì)與需求的脫節(jié)。

其次，D版塊作為分類導(dǎo)航區(qū)域，主要位于整個(gè)APP界面的底部，用圖形與文字結(jié)合的形式實(shí)現(xiàn)功能區(qū)的分類。未選中的圖形為未填充的描線圖形，選中后對(duì)圖形進(jìn)行了填充，突出已選中功能區(qū)，便于識(shí)別。為保持統(tǒng)一性，圖形的顏色與字體顏色保持一致，且圖形的顏色隨字體顏色的變化而變化。

（二）內(nèi)容展示特點(diǎn)分析

新聞的內(nèi)容是新聞?lì)怉PP的核心，其傳播效果與表現(xiàn)形式有著密切的聯(lián)系。合理的表現(xiàn)形式能夠引起用戶的閱讀興趣，方便用戶閱讀。然而，如何在新聞?lì)怉PP的界面中既做到界面空間的充分使用，又不會(huì)因?yàn)閮?nèi)容過(guò)于繁瑣而影響用戶閱讀。

文章根據(jù)四家紙媒的APP的C版塊設(shè)計(jì)特點(diǎn)，將其分為四種主要排版方式（如圖1）示：C1輪播模塊、C2左右結(jié)構(gòu)排版、C3上下結(jié)構(gòu)排版和C4平鋪模塊。

1.輪播模塊。以《人民日?qǐng)?bào)》 APP為例，《人民日?qǐng)?bào)》 APP的輪播模塊位于C版塊頂部，其圖片數(shù)量為四到五張。輪播圖是指網(wǎng)頁(yè)中一些滾動(dòng)效果的圖片，充分利用該一網(wǎng)頁(yè)效果，能夠凸顯網(wǎng)站的影響力，達(dá)到事半功倍的效果[7]?！度嗣袢?qǐng)?bào)》 APP的輪播模塊，每次展示一張圖或者由多張圖片拼貼成的一張圖，新聞標(biāo)題寫在圖片左下角，且底部有半透明底紋，以此避免圖片的色彩對(duì)閱讀文字標(biāo)題造成影響。這樣的表現(xiàn)形式有兩方面的優(yōu)點(diǎn)，一是輪播圖片在界面中尺寸較大，能更快吸引用戶注意力，也能讓用戶得到更多新聞信息;另一方面用戶只需要左右翻動(dòng)圖片，就能在同一模塊，閱讀不同主題的新聞，增大了空間利用率。不足之處為是《人民日?qǐng)?bào)》 APP的輪播圖片只能通過(guò)手動(dòng)進(jìn)行左右翻頁(yè)，而沒(méi)有設(shè)計(jì)自動(dòng)翻頁(yè)。

2.左右結(jié)構(gòu)排版。左右結(jié)構(gòu)排版主要是指左邊為圖像模塊，包含圖片或者視頻，右邊為文字模塊，包含標(biāo)題與介紹性文字，或者相反。專題新聞常采用左右結(jié)構(gòu)的表現(xiàn)形式。這種表現(xiàn)形式的特點(diǎn)相對(duì)于輪播模塊來(lái)說(shuō)，能同時(shí)看到多個(gè)新聞事件，快速瀏覽找到自己感興趣的內(nèi)容。雖然相同空間內(nèi)，輪播圖片的空間利用率更高，但同一時(shí)間用戶會(huì)更快速找到自己想看的新聞主題。關(guān)于圖片的展示形式，《人民日?qǐng)?bào)》 APP左右結(jié)構(gòu)排版上圖片模塊上會(huì)有一張圖的展示，然而《THESUN》《WSJ》為兩張圖片排列或者大圖里鑲嵌小圖的形式，豐富圖片信息。尤其當(dāng)兩張圖片中小圖是大圖的局部?jī)?nèi)容放大時(shí)，能夠突出圖片重點(diǎn)。文字模塊，《THE SUN》APP用彩色加粗字表明新聞標(biāo)題，用黑色未加粗字作新聞簡(jiǎn)介。與《人民日?qǐng)?bào)》 APP文字模塊相比，《THESUN》APP中文字模板多加的新聞簡(jiǎn)介部分，不僅沒(méi)有造成界面的混亂，還能簡(jiǎn)單交代新聞的內(nèi)容。新聞簡(jiǎn)介能夠讓用戶了解新聞具體內(nèi)容，避免因標(biāo)題過(guò)于簡(jiǎn)單而曲解標(biāo)題含義造成新聞內(nèi)容的非意愿選擇，浪費(fèi)閱讀時(shí)間。

3.上下結(jié)構(gòu)排版。上下圖片排版，主要是指上面為圖像模塊，包含圖片或者視頻，下面為文字模塊，包含標(biāo)題與介紹性文字，或者相反。圖片模塊不僅可以放一張圖片，也可以多張圖拼貼，又或者做成動(dòng)態(tài)圖形。動(dòng)態(tài)圖形是平面設(shè)計(jì)的延伸，可憑借新媒體平臺(tái)展示，具備傳達(dá)表意的特點(diǎn)[8]。圖3《THE SUN》 APP中，圖片模塊以動(dòng)態(tài)圖形的形式展現(xiàn)，點(diǎn)擊鏈接后可拓展為內(nèi)容更加豐富的動(dòng)態(tài)圖形，再次確認(rèn)后即跳轉(zhuǎn)到詳細(xì)介紹頁(yè)面。這種形式豐富了APP與用戶之間的交互方式，且形式新穎有趣，增加了用戶閱讀的娛樂(lè)性和趣味性。

4.平鋪模塊。平鋪圖片主要應(yīng)用于廣告圖片的展示，平鋪的結(jié)構(gòu)嚴(yán)謹(jǐn)，形式整齊，因此也盡可能減少了APP界面的復(fù)雜度，避免影響用戶的閱讀。

結(jié)論

綜上所述，在綜合比對(duì)了《人民日?qǐng)?bào)》等四種不同新聞?lì)怉PP的界面設(shè)計(jì)后，針對(duì)界面B、C、D版塊的設(shè)計(jì)特點(diǎn)及不足之處將新聞?lì)怉PP的設(shè)計(jì)要素歸納為以下三個(gè)方面：

1.形成圖片占主導(dǎo)地位、以視圖為中心的設(shè)計(jì)新特點(diǎn)。在快速閱讀時(shí)代，用戶花費(fèi)在閱讀上的時(shí)間越來(lái)越少，對(duì)信息展現(xiàn)的形式要求越來(lái)越高。在移動(dòng)端的有限界面內(nèi)，以圖片為主導(dǎo)的視圖設(shè)計(jì)有效地實(shí)現(xiàn)了信息的快速捕捉與快速傳遞，逐漸被大眾廣為接受。圖片的展現(xiàn)形式也從靜態(tài)圖片漸漸拓展為動(dòng)態(tài)圖片。動(dòng)態(tài)圖片的出現(xiàn)使得有限的界面空間得到了拓展，并提高了閱讀的趣味性和信息篩選的高效性?！皥D”已經(jīng)成為整個(gè)界面中不可或缺的重要組成部分。有關(guān)聯(lián)性、指向性的“圖”的表現(xiàn)形式將成為今后新聞?lì)怉PP界面設(shè)計(jì)中的主角。

2.導(dǎo)航區(qū)域宜簡(jiǎn)不宜繁。導(dǎo)航區(qū)域主要用于輔助用戶閱讀，所以在導(dǎo)航界面設(shè)計(jì)與交互方式上宜簡(jiǎn)單不宜繁雜。在界面設(shè)計(jì)上，可采取純文字或文字與ICON結(jié)合的形式表現(xiàn)，ICON的設(shè)計(jì)也要充分反映導(dǎo)航內(nèi)容的特點(diǎn)，應(yīng)當(dāng)盡量避免與內(nèi)容無(wú)關(guān)的裝飾類ICON設(shè)計(jì)。導(dǎo)航交互方式應(yīng)當(dāng)充分考慮用戶的閱讀體驗(yàn)，遵循新聞閱讀頁(yè)面切換最少原則，結(jié)合實(shí)際案例，以三步之內(nèi)可到達(dá)目標(biāo)新聞的頁(yè)面導(dǎo)航設(shè)計(jì)為宜。

3.有限版面內(nèi)的信息內(nèi)容提示最大化。在內(nèi)容提示方面，要平衡好新聞內(nèi)容表現(xiàn)形式的多樣性與新聞閱讀高效性之間的關(guān)系，既要以多樣的排版方式呈現(xiàn)盡可能豐富的內(nèi)容，又要壓縮圖文內(nèi)容大小，提高界面空間的利用率。文章中的APP大多通過(guò)輪播模塊等多樣化的排版方式的組合來(lái)滿足有限界面信息最大化的問(wèn)題。多張圖片的橫向滾動(dòng)提示配合圖文結(jié)合的縱向滾動(dòng)提示將成為今后新聞?lì)怉PP最為常用的表現(xiàn)方法。

在信息閱讀效率至上的新媒體大時(shí)代背景下，圖文類APP將成為信息傳播的主流渠道。快速的閱讀方式，合理的信息疏導(dǎo)界面將成為今后APP設(shè)計(jì)的重點(diǎn)。如何精準(zhǔn)定位用戶的閱讀喜好，快速對(duì)應(yīng)用戶的信息閱讀需求將是評(píng)價(jià)一個(gè)APP好壞的重要標(biāo)準(zhǔn)。

參考文獻(xiàn)

[1]江紅中國(guó)古代官報(bào)——邸報(bào)[J]出版史料，2005 （3）：124-125

[2]王連科我國(guó)報(bào)紙的產(chǎn)生與發(fā)展[J]黑龍江造紙，2010，38 （1）：6565

[3]張立2014-2015中國(guó)數(shù)字出版產(chǎn)業(yè)年度報(bào)告[M]北京：中國(guó)書籍出版社，2015： 60

[4]廖冬莉在視覺(jué)傳播基礎(chǔ)上的App界面導(dǎo)航設(shè)計(jì)研究分析[J]數(shù)碼世界，2017 （11）：344-344

[5] GilesColborne筒約至上：交互式設(shè)計(jì)四策略[M]北京：人民郵電出版社，2011： 98

[6]李向全，王軍峰，王文軍多媒體上有色漢字字體的可讀性研究[J]工業(yè)設(shè)計(jì)研究，2016 （00）：48-54

[7][龔麗網(wǎng)頁(yè)中輪播圖的實(shí)現(xiàn)方法探討[J]電腦知識(shí)與技術(shù)，2017，13 （31）：273274

[8]陳楊動(dòng)態(tài)圖形的定義，應(yīng)用與設(shè)計(jì)方法[J]設(shè)計(jì)2018，（13）：150-151

[9]楊飛飛新媒體藝術(shù)對(duì)數(shù)字生態(tài)城市理念的傳播[J]設(shè)計(jì)' 2016，29 （15）：80_81

[1O]孫穎，李禹臻，朱琳HTML5的創(chuàng)新應(yīng)用——以新媒體平臺(tái)的視覺(jué)設(shè)計(jì)為例[J]設(shè)計(jì)'2017，30 （5）：30_31