針對移動端新聞類APP有限界面的視覺表現特點研究

范干玉　黃晶石

摘要：通過對新媒體時代四種新聞類APP的比對分析，總結歸納了高速互聯網時代的新聞類APP界面設計語言特點和高效的視覺信息表現方式。文章將《人民日報》《新京報》《THE SUN》《WSJ》四種新聞類APP作為研究對象，總體上將視覺界面劃分為四個功能版塊，并以導航區域與內容展示區域作為文章的研究重點。通過研究比對概括了新聞類APP在導航和內容展示兩個重點部分較為通用，且科學合理的界面視覺表現語言特征和表現方式。該結果可為今后移動端新聞類APP的界面設計提供較好的設計思維參考和可行性技術解決方案。

關鍵詞：新媒體 新聞類APP界面 視覺表現特點 界面結構 內容版塊

中圖分類號：J0-03

文獻標識碼：A

文章編號：1003-0069 （2019） 06-0034-03

引言

隨著時代的變遷，人們獲取新聞的方式已經從-杯茶、一張報紙、幾小時的慢節奏閱讀，逐漸轉變為一杯咖啡、一臺手機、幾分鐘的快餐式瀏覽。在“看圖說話”的快節奏閱讀時代，新聞如果沒有簡潔、高效的信息提示方式，再豐富的內容也無法吸引大眾的閱讀興趣。所以在新媒體用戶爆炸式增長的時代，明確用戶需求，進行有針對性的設計就成為新聞類APP設計的主導思想。有重點性的痛點解決方案及可重復性的數據驗證，還存在很多空白。如何通過優化媒體終端的界面設計提高界面的可閱讀性，增加單位面積的信息量，實現在有限界面中的信息快速、準確、高效地傳播是互聯網時代急需解決的重要課題。文章通過對《人民日報>《新京報》《THE SUN》《WsJ》四種新聞類APP的分析比較，以此探究新聞類APP界面視覺表現特點，為新聞類APP的界面設計提供可行性參考。

一、傳統紙媒的演變

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

二、新媒體新聞類APP界面的表現特點分析

優化移動終端的界面設計以期提高界面的可閱讀性是新聞類APP界面設計的主要任務。圖1是新聞類APP主要界面的基本架構。綜合《人民日報>《新京報》《THE SUN》《WsJ》四種新聞APP的界面特點，將APP界面分解為A、B、C、D四個版塊。A版塊主要用于展示報紙logo及一些搜索附加選項，因為與主要功能無關，文章不進行深入討論;B版塊主要用于報紙的菜單導航區域;C版塊主要用于內容展示區域;D版塊主要用于分類導航區域。

（一）導航區域特點分析

APP導航是引導用戶訪問APP的欄目、菜單、分類等布局結構形式的總稱。它的分類形式可以概括為：標簽導航、舵式導航、宮格導航、列表導航、輪播導航、抽屜導航、卡片導航、懸浮ICON導航、平鋪式導航等[4]。導航區域主要用于輔助用戶閱讀，所以在有限的空間下需要以如何優化閱讀，提高信息傳遞效率為指導思想進行設計。在界面設計上，簡單的導航設計可以引導用戶更快地搜索到感興趣的信息內容，提高用戶的閱讀效率;而復雜的導航設計會人為地增加界面復雜度，增加用戶搜索時間，造成用戶檢索成本的增加，降低用戶的閱讀效率。Giles Colborne在書中就提及“要刪掉不必要的說明，這一類內容是多余文字的‘主力軍，通常可以‘片甲不留”[5]。

新聞類APP的主界面主要分為B版塊菜單導航區域和D版塊分類導航區域兩大部分。

首先以《人民日報>等四種不同紙媒的新聞類APP的B版塊菜單導航區域為例，從整體形式設計、字體選擇、配色、交互手法四個方面進行分析與比較。

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

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

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

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

其次，D版塊作為分類導航區域，主要位于整個APP界面的底部，用圖形與文字結合的形式實現功能區的分類。未選中的圖形為未填充的描線圖形，選中后對圖形進行了填充，突出已選中功能區，便于識別。為保持統一性，圖形的顏色與字體顏色保持一致，且圖形的顏色隨字體顏色的變化而變化。

（二）內容展示特點分析

新聞的內容是新聞類APP的核心，其傳播效果與表現形式有著密切的聯系。合理的表現形式能夠引起用戶的閱讀興趣，方便用戶閱讀。然而，如何在新聞類APP的界面中既做到界面空間的充分使用，又不會因為內容過于繁瑣而影響用戶閱讀。

文章根據四家紙媒的APP的C版塊設計特點，將其分為四種主要排版方式（如圖1）示：C1輪播模塊、C2左右結構排版、C3上下結構排版和C4平鋪模塊。

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

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

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

4.平鋪模塊。平鋪圖片主要應用于廣告圖片的展示，平鋪的結構嚴謹，形式整齊，因此也盡可能減少了APP界面的復雜度，避免影響用戶的閱讀。

結論

綜上所述，在綜合比對了《人民日報》等四種不同新聞類APP的界面設計后，針對界面B、C、D版塊的設計特點及不足之處將新聞類APP的設計要素歸納為以下三個方面：

1.形成圖片占主導地位、以視圖為中心的設計新特點。在快速閱讀時代，用戶花費在閱讀上的時間越來越少，對信息展現的形式要求越來越高。在移動端的有限界面內，以圖片為主導的視圖設計有效地實現了信息的快速捕捉與快速傳遞，逐漸被大眾廣為接受。圖片的展現形式也從靜態圖片漸漸拓展為動態圖片。動態圖片的出現使得有限的界面空間得到了拓展，并提高了閱讀的趣味性和信息篩選的高效性。“圖”已經成為整個界面中不可或缺的重要組成部分。有關聯性、指向性的“圖”的表現形式將成為今后新聞類APP界面設計中的主角。

2.導航區域宜簡不宜繁。導航區域主要用于輔助用戶閱讀，所以在導航界面設計與交互方式上宜簡單不宜繁雜。在界面設計上，可采取純文字或文字與ICON結合的形式表現，ICON的設計也要充分反映導航內容的特點，應當盡量避免與內容無關的裝飾類ICON設計。導航交互方式應當充分考慮用戶的閱讀體驗，遵循新聞閱讀頁面切換最少原則，結合實際案例，以三步之內可到達目標新聞的頁面導航設計為宜。

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

在信息閱讀效率至上的新媒體大時代背景下，圖文類APP將成為信息傳播的主流渠道。快速的閱讀方式，合理的信息疏導界面將成為今后APP設計的重點。如何精準定位用戶的閱讀喜好，快速對應用戶的信息閱讀需求將是評價一個APP好壞的重要標準。

參考文獻

[1]江紅中國古代官報——邸報[J]出版史料，2005 （3）：124-125

[2]王連科我國報紙的產生與發展[J]黑龍江造紙，2010，38 （1）：6565

[3]張立2014-2015中國數字出版產業年度報告[M]北京：中國書籍出版社，2015： 60

[4]廖冬莉在視覺傳播基礎上的App界面導航設計研究分析[J]數碼世界，2017 （11）：344-344

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

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

[7][龔麗網頁中輪播圖的實現方法探討[J]電腦知識與技術，2017，13 （31）：273274

[8]陳楊動態圖形的定義，應用與設計方法[J]設計2018，（13）：150-151

[9]楊飛飛新媒體藝術對數字生態城市理念的傳播[J]設計' 2016，29 （15）：80_81

[1O]孫穎，李禹臻，朱琳HTML5的創新應用——以新媒體平臺的視覺設計為例[J]設計'2017，30 （5）：30_31