圖形界面美學(xué)下的移動新聞客戶端GUI設(shè)計探索

王苗苗，王泳力

（中央民族大學(xué) 美術(shù)學(xué)院，北京 100081）

一、移動新聞客戶端的GUI設(shè)計定位與用戶需求

移動新聞客戶端的GUI設(shè)計核心是以用戶需求為中心，能夠引導(dǎo)用戶更好地交互是GUI設(shè)計的關(guān)鍵所在。新聞資訊類APP是傳統(tǒng)媒介、PC新聞網(wǎng)站發(fā)展演變的第二代移動互聯(lián)網(wǎng)產(chǎn)品，帶有傳統(tǒng)信息門戶的基本屬性，為用戶提供新聞資訊等信息。GUI設(shè)計將程序化語言轉(zhuǎn)變?yōu)榭梢暬Z言，個性化地呈現(xiàn)客戶端的信息。生活節(jié)奏的加快，用戶使用移動產(chǎn)品的時間變得碎片化、多樣化。移動新聞客戶端順勢融入人們的生活，這類APP的界面設(shè)計的初衷是回歸到用戶體驗。移動新聞客戶端的出現(xiàn)，用戶需求又有了新的發(fā)展，衍生出了娛樂、社交、分享等個性化需求。那么GUI設(shè)計也順勢發(fā)展，以滿足用戶的更多期待，更好地為用戶提供專業(yè)的場景化、碎片化服務(wù)。

總的來說，新聞客戶端分為三大類：

門戶為主的移動新聞客戶端，以傳統(tǒng)的互聯(lián)網(wǎng)門戶網(wǎng)站為基礎(chǔ)，利用其市場優(yōu)勢，進入新聞客戶端市場；聚合類新聞客戶端，以網(wǎng)絡(luò)中已經(jīng)存在的新聞內(nèi)容為主要新聞來源，通過整合相關(guān)新聞內(nèi)容，為用戶推薦有價值的新聞信息；傳統(tǒng)紙媒等推出的客戶端，為了滿足部分用戶對某一個領(lǐng)域的新聞信息需求。

二、移動新聞客戶端的設(shè)計特點

過去的手機GUI設(shè)計以人為本而展開，強調(diào)視覺界面沖擊力，并以象征性的圖形設(shè)計貫穿整體。之后的一次風(fēng)格變革，從擬物化設(shè)計到扁平化發(fā)展，以更少的按鈕和選項讓APP界面看起來更加干凈整潔，可以更簡單地將信息展示出來，減少認知障礙。目前這種扁平化設(shè)計風(fēng)格廣泛應(yīng)用于新聞資訊類APP的界面設(shè)計之中。

從移動新聞客戶端的圖形界面GUI設(shè)計來看，影響布局美觀的因素有元素之間的平衡感、比例美感、簡潔性、節(jié)奏感。平衡即各元素之間分布是否均衡，用戶的閱讀是否會產(chǎn)生視覺上的疲勞感以及它的對稱性。界面的比例美感是以人在閱讀習(xí)慣中對美的認知為基準(zhǔn)而采用的差異化布局，從而有效地提高閱讀效率。界面的緊密關(guān)系和復(fù)雜程度是衡量界面簡潔性的標(biāo)準(zhǔn)，做到界面簡潔，以減少用戶的認知障礙。節(jié)奏感需考慮界面整體元素布局，在同一界面中盡量將各個元素的大小比例做到均衡，進行規(guī)范對齊以及歸納組合的妥善處理，從而使用戶得到更好的交互。

移動新聞客戶端界面設(shè)計的圖形語言應(yīng)用，將專業(yè)術(shù)語轉(zhuǎn)化為更容易識別的圖標(biāo)語言，應(yīng)該采用用戶最熟悉的圖形表現(xiàn)形式。界面作為人機交互的信息傳達者，需最大限度地減少用戶的認知障礙，節(jié)約用戶對信息識別的時間成本。

三、移動新聞客戶端的GUI設(shè)計案例分析

文章以2018年第一季度主要手機新聞資訊類客戶端用戶覆蓋率排名前三的今日頭條、騰訊新聞、UC頭條為例來分析它們的GUI設(shè)計。

（一）移動新聞客戶端的GUI設(shè)計的圖標(biāo)應(yīng)用

＞ 圖1 移動新聞客戶端圖標(biāo)設(shè)計

＞ 圖2 移動新聞客戶端歡迎頁面 從左向右依次是：今日頭條 騰訊新聞 UC頭條

＞ 圖3 移動新聞客戶端主頁面 從左向右依次是：今日頭條騰訊新聞 UC頭條

＞ 圖4 2018年Q1手機新聞客戶端用戶偏愛的新聞資訊形式

＞ 圖5 移動新聞客戶端的看圖模式

移動新聞客戶端的GUI圖標(biāo)，包括系統(tǒng)圖標(biāo)和應(yīng)用圖標(biāo)。從符號學(xué)的角度來看，圖標(biāo)與圖標(biāo)之間、圖標(biāo)與背景之間都有著內(nèi)在的情感化的聯(lián)系。這些圖標(biāo)不僅僅是外在的圖形展示，更是每一款應(yīng)用個性化的體現(xiàn)、情感的傳達。基于用戶的閱讀習(xí)慣，對界面的圖標(biāo)、界面以及功能排列進行合理布局，使界面更加簡潔直觀、輕松易懂。

在對扁平化圖標(biāo)和擬物化圖標(biāo)的傾向選擇調(diào)研來看，78.69%的用戶認為扁平化圖標(biāo)的可讀性更好，能容易提高用戶的點擊欲。70%以上的用戶認為扁平化的圖標(biāo)設(shè)計更清晰易懂，更有美感。因此目前的APP選擇扁平化設(shè)計的居多，更容易提高用戶的點擊行為和審美體驗。（數(shù)據(jù)來源：智能手機GUI設(shè)計要素對用戶體驗產(chǎn)生的影響。）

如圖1所示，界面圖標(biāo)分別是今日頭條、騰訊新聞、UC頭條的圖標(biāo)設(shè)計，今日頭條的圖標(biāo)以“頭條”的字體設(shè)計為主，配合有視覺沖擊力的紅色，讓用戶對該應(yīng)用輕松易懂。騰訊新聞的圖標(biāo)以騰訊特有的企鵝圖形為中心，搭配紅黃綠的配色，大氣沉穩(wěn)。UC頭條以鹿的造型為主要圖形元素，堅持做“信息流中的一股清流”是UC頭條的愿景，亦是設(shè)計中秉承的原則，更具親和力。其輕松活潑的辨識度、嚴(yán)謹?shù)膱D形設(shè)計，不僅可以較好地識別其功能應(yīng)用，而且具有情感化的視覺表現(xiàn)力。

（二）移動新聞客戶端的GUI設(shè)計的色彩應(yīng)用

打開APP首先進入歡迎界面，這一部分主要是用于同步服務(wù)端的數(shù)據(jù)，另一方面也可以通過個性化的歡迎界面引導(dǎo)用戶進入APP的主頁面。不同風(fēng)格的GUI設(shè)計帶給用戶不一樣的感官體驗，包括色彩印象、字體設(shè)計、圖形設(shè)計以及版式設(shè)計。如圖2所示分別是今日頭條、騰訊新聞、UC頭條的歡迎界面設(shè)計。

關(guān)于移動新聞客戶端的色彩應(yīng)用，今日頭條的歡迎界面以白色為主，主頁面以白色和紅色為主；騰訊新聞的歡迎界面以灰色為背景色，主頁面以白色為主，按鈕點擊后呈現(xiàn)藍色；UC頭條以白色為主，按鈕點擊后的色彩切換為黃色。可以看到騰訊新聞和UC頭條的頂部背景為凈白，克制的設(shè)計讓界面退居于內(nèi)容之后使閱讀更純粹。三者的共同之處是均以相同的顏色來表現(xiàn)同一類別的圖標(biāo)，整體感強，視覺效果統(tǒng)一和諧。（圖3）

（三）移動新聞客戶端的GUI設(shè)計的界面布局

進入APP首頁主頁面，可以看到首頁界面均由頂部搜索框、菜單欄、中央新聞資訊列表、底部功能按鈕組成。界面設(shè)計簡潔、板塊分布清晰明了。對比發(fā)現(xiàn)，騰訊新聞和UC頭條的底部圖標(biāo)更往中間聚攏，以便擁有大屏手機的用戶更容易點擊。

用戶最喜愛圖文結(jié)合的新聞資訊形式，比達咨詢（BigData-Research）數(shù)據(jù)顯示，2018年第一季度手機新聞客戶端用戶偏愛的新聞資訊形式分布中，圖文結(jié)合的資訊形式最受用戶喜愛，占比61.2%位居第一（圖4）（數(shù)據(jù)來源：比達咨詢〔BigData-Research〕數(shù)據(jù)中心）。可以看到，今日頭條、騰訊新聞和UC頭條均采用圖文結(jié)合的信息流呈現(xiàn)方式。有上部標(biāo)題下部大圖顯示、三圖顯示、左部標(biāo)題右部單圖小圖顯示多種方式呈現(xiàn)，統(tǒng)一之中有變化。整體信息飽滿、條理清晰、易于閱讀。

UC頭條精美的看圖模式，仿佛在看雜志封面。（圖5）

四、移動新聞客戶端的GUI設(shè)計的未來展望

移動新聞客戶端因其實效性、便攜性、媒體性以及交互性等成為人們了解世界的窗口。這類APP的發(fā)展，改變了人們獲取信息的傳統(tǒng)方式。當(dāng)這種新型互聯(lián)網(wǎng)方式普及之后，設(shè)計師更應(yīng)該考慮其交互性和個性。如何讀懂用戶交互需求，構(gòu)建個性化平臺，優(yōu)化圖形界面設(shè)計，產(chǎn)生優(yōu)質(zhì)化內(nèi)容，這是當(dāng)前移動新聞客戶端留住用戶的關(guān)鍵所在。在設(shè)計過程中，設(shè)計師要注重整體APP的框架搭建、板塊功能組合，做到主次分明，信息清晰明了；其次了解用戶需求，從用戶體驗出發(fā)；最終回到視覺設(shè)計中，也就是品牌形象的塑造，提升閱讀體驗。

設(shè)計師不斷從用戶的使用習(xí)慣去分析他們的選擇偏好，從用戶的行為數(shù)據(jù)分析其興趣所在，探索不同的色彩偏好以及圖形界面對用戶的交互影響，從而實現(xiàn)以人為本的設(shè)計理念以增加移動新聞客戶端的用戶黏性。移動新聞客戶端的GUI設(shè)計核心是用戶體驗，未來將不斷完善GUI設(shè)計美學(xué)的方法體系，并在圖形界面設(shè)計領(lǐng)域進行拓展性研究，探索其進一步的設(shè)計理念的普適性和可能性，為GUI設(shè)計師在設(shè)計工作中提供理論參考依據(jù)。■