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

王苗苗，王泳力

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

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

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

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

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

二、移動(dòng)新聞客戶端的設(shè)計(jì)特點(diǎn)

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

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

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

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

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

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

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

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

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

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

＞ 圖5 移動(dòng)新聞客戶端的看圖模式

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

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

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

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

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

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

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

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

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

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

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

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

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