杜艷春

（武漢理工大學(xué)，武漢 430074）

引言

在全球信息化的時(shí)代背景下，內(nèi)容充實(shí)且令人愉悅的視覺(jué)界面會(huì)使產(chǎn)品獲得更多用戶的喜愛(ài)。理想的用戶界面設(shè)計(jì)能使用戶與界面之間保持愉悅、簡(jiǎn)單和舒適的交流方式。一個(gè)舒適美觀的新聞?lì)怉PP界面設(shè)計(jì)，不僅可以提升用戶的閱讀體驗(yàn)，樹(shù)立良好的品牌印象，增加企業(yè)收益，甚至還能影響到其他類APP的的設(shè)計(jì)風(fēng)格。

一、設(shè)計(jì)學(xué)與心理學(xué)之間的聯(lián)系

設(shè)計(jì)學(xué)是關(guān)于設(shè)計(jì)這一人類創(chuàng)造行為的理論研究。由于設(shè)計(jì)一直以功能性與審美性為目標(biāo)，因此，設(shè)計(jì)學(xué)的研究對(duì)象便與設(shè)計(jì)的功能性與審美性有著不可割裂的關(guān)系。作為一門新興的學(xué)科。設(shè)計(jì)學(xué)是一門理、工、文相結(jié)合，融機(jī)電工程、藝術(shù)學(xué)、人機(jī)工效學(xué)和計(jì)算機(jī)輔助設(shè)計(jì)于一體的科技與藝術(shù)相融合的新型交叉學(xué)科。

設(shè)計(jì)心理學(xué)是設(shè)計(jì)藝術(shù)學(xué)與心理學(xué)交叉而成的邊緣性學(xué)科。設(shè)計(jì)心理學(xué)是屬于應(yīng)用心理學(xué)的范疇，是心理學(xué)理論應(yīng)用于設(shè)計(jì)藝術(shù)學(xué)科的具體實(shí)踐。心理學(xué)是研究人的科學(xué)，設(shè)計(jì)心理學(xué)同樣如此，因此，設(shè)計(jì)心理學(xué)的研究應(yīng)圍繞與設(shè)計(jì)活動(dòng)相關(guān)的所有的人的心理和行為來(lái)進(jìn)行。而視覺(jué)心理學(xué)是基于生物學(xué)心理學(xué)之上，通過(guò)一定的理論和實(shí)踐總結(jié)出來(lái)的關(guān)于人的視覺(jué)怎么樣能動(dòng)的影響思維的規(guī)律。視覺(jué)心理學(xué)的主要研究?jī)?nèi)容是以人眼為主體形成的視知覺(jué)規(guī)律，是從外到內(nèi)的過(guò)程，不同的受眾看到不同的圖像，相同的受眾看到不同的圖像和不同的受眾看到相的圖像所帶來(lái)的心理感受也都是不同的?，F(xiàn)代節(jié)奏的生活使得人們的碎片時(shí)間不斷增加，移動(dòng)閱讀的習(xí)慣也逐漸形成。在移動(dòng)互聯(lián)網(wǎng)科技高速發(fā)展的時(shí)代，新聞?lì)惪蛻舳顺蔀榱撕芏嗳巳粘Ｉ钪蝎@取新聞資訊的最重要途徑之一。用戶對(duì)于新聞?lì)怉PP交互界面的要求在不斷提高，在使用過(guò)程中其產(chǎn)品的交互界面設(shè)計(jì)直接影響著大眾的體驗(yàn)感受。

二、新聞?lì)怉PP界面中圖標(biāo)與布局的設(shè)計(jì)

在如今高度發(fā)展的互聯(lián)網(wǎng)視覺(jué)情景下，許多圖形圖標(biāo)已經(jīng)具有了語(yǔ)言表達(dá)的作用，用戶在多次使用圖標(biāo)后，會(huì)從認(rèn)知上將具有該視覺(jué)形狀的圖形與特定的概念緊密地聯(lián)系在一起。豐富多樣、富有趣味的圖標(biāo)表現(xiàn)形式能夠傳達(dá)不同的產(chǎn)品理念，使產(chǎn)品更具吸引力的同時(shí)也給用戶留下深刻的印象。

> 圖1 三種類型圖標(biāo)

> 圖2 “今日頭條”LOGO

> 圖3 APP中“×”圖標(biāo)

> 圖4 “今日頭條”布局

圖標(biāo)的設(shè)計(jì)形式有純文形式、純圖形式以及圖文并存的形式（圖1），因?yàn)樗麄兲匦圆煌?，所以其給用戶的心理感受也不一樣。純文字圖標(biāo)是通過(guò)文字直接明了地將標(biāo)識(shí)信息傳遞給觀眾，在新聞?lì)怉PP的LOGO圖標(biāo)上就更多地采用純文字的圖標(biāo)，以明確地表達(dá)出信息；純圖形式的圖標(biāo)可以創(chuàng)造獨(dú)特的圖像形式，使用戶在多次使用后對(duì)品牌標(biāo)識(shí)印象深刻，比如一些社交、銀行和網(wǎng)絡(luò)瀏覽器的圖標(biāo)主要以純圖形式來(lái)表達(dá)；圖文并存的圖標(biāo)是將特色的圖像與清楚的文字結(jié)合，能夠更加準(zhǔn)確地傳達(dá)信息和宣傳品牌形象，如作為APP的Icon。在用戶界面中的圖標(biāo)設(shè)計(jì)中，可以利用人對(duì)于課題想象的基本心理規(guī)律，人在心理對(duì)客體事物所表現(xiàn)的形象是以原型的方式存儲(chǔ)的，所以在回憶或者在認(rèn)定物體上具有特定的規(guī)律。如“今日頭條”的LOGO圖標(biāo)設(shè)計(jì)用紅底白字，簡(jiǎn)潔化的字形簡(jiǎn)明扼要地突出“今日頭條”四個(gè)大字（圖2），雖然沒(méi)有運(yùn)用太多的設(shè)計(jì)元素，但品牌主題卻得到了突出，在長(zhǎng)時(shí)間使用后會(huì)使用戶的印象更加深刻。在進(jìn)行個(gè)性化推送新聞的同時(shí)每條新聞的右下角都會(huì)有一個(gè)“×”的圖標(biāo)，用戶可以根據(jù)自己的興趣點(diǎn)，對(duì)此類型的信息進(jìn)行選擇是否感興趣，這樣更加直觀的了解用戶的心理貼心用心。（圖3）

設(shè)計(jì)師設(shè)計(jì)作品的過(guò)程就是利用人眼在觀察影像時(shí)大腦產(chǎn)生的力的平衡感使受眾產(chǎn)生放松精祌，愉悅心理的過(guò)程。平衡只是一種手段，而是通過(guò)這種能的平衡效果所構(gòu)成的整體版而給人們帶來(lái)視覺(jué)心理的影響。由于移動(dòng)設(shè)備本身屏幕的大小有限，所以新聞APP的界面布局設(shè)計(jì)會(huì)受到制約，要在有限的屏幕空間內(nèi)對(duì)屏幕中的各種元素如圖標(biāo)、文字、圖片等進(jìn)行合理地排列組合,以保證各種之間的平衡感。例如在“今日頭條”這款A(yù)PP中界面的整體布局十分明確，功能分類也是清晰可視。在“今日頭條”界面中的文字與圖片多以“文上圖下”的排列方式，文字與圖片左端對(duì)齊，或者“文左圖右”的排列方式，在文圖排列上十分的整齊、清晰（圖4）。在新聞?lì)怉PP交互界面的整體布局設(shè)計(jì)中，應(yīng)該注重文字和圖片的比例、以及各種疏密搭配的節(jié)奏，注重界面中各個(gè)元素與元素之間的呼應(yīng)關(guān)系，給用戶以舒適的心理感受。由于客戶使用時(shí)間的碎片化，使用的狀態(tài)也不固定，因此在設(shè)計(jì)中還要在注重用戶在不同場(chǎng)景中的使用習(xí)慣，在設(shè)計(jì)中對(duì)用戶持機(jī)的穩(wěn)定性和手指移動(dòng)的靈活性的設(shè)計(jì)也會(huì)給用戶良好的使用感受。

三、新聞?lì)怉PP界面中文字與色彩的設(shè)計(jì)

文字作為新聞?lì)怉PP界面中的重要元素，對(duì)于信息的傳達(dá)有重要的作用。文字是將信息傳達(dá)給用戶的一種載體，要在有限的手機(jī)屏幕中合理地將文字展現(xiàn)出來(lái)，需要綜合考慮文字的字體、大小、間距和顏色等諸多元素的設(shè)計(jì)規(guī)范。作為一種信息載體藝術(shù)，文字設(shè)計(jì)也是與信息傳播相結(jié)合的一種信息視覺(jué)設(shè)計(jì)的形式。不同的字體帶給人的主觀感受也是不相同的。在“今日頭條”的文章中多采用簡(jiǎn)潔易辨識(shí)的黑體字體，以方便用戶閱讀。手機(jī)界面的文字設(shè)計(jì)具有目的性和針對(duì)性，以用戶為中心，不僅需要考慮到用戶在不同情境下的使用習(xí)慣，還要根據(jù)不同的主題和對(duì)象選用合適的字體，使展示的字體與展示新聞的信息相協(xié)調(diào)。在設(shè)計(jì)新聞?lì)怉PP的文字時(shí)，應(yīng)該以易辨識(shí)性、實(shí)用性和閱讀舒適為出發(fā)點(diǎn)更好地為讀者服務(wù)。

字體的顏色同樣也是界面設(shè)計(jì)的重要細(xì)節(jié)之一。顏色是通過(guò)光作用于人眼被人的大腦所感知，遇到各種各樣的顏色時(shí)，會(huì)潛意識(shí)中影響著我們的情緒。色彩不僅可以影響人們的視覺(jué)神經(jīng)，還會(huì)影響體內(nèi)激索的分泌，影響著人們的神經(jīng)系統(tǒng)，以給人不同的心理感受。在“今日頭條”中根據(jù)不同信息的推送程度，字體顏色的灰度深淺也有著一定的變化。其中，黑色最為普遍，突出的文字用淺藍(lán)色或紅色標(biāo)識(shí)，閱讀過(guò)的新聞?dòng)脺\灰色標(biāo)識(shí)，新聞圖片下方的信息來(lái)源，其評(píng)論和時(shí)間則用了小的字號(hào)和淺灰色。這樣主次分明的色彩能夠很好突出信息重點(diǎn)，使“今日頭條”APP的界面視覺(jué)更加平衡。（圖5）

色彩形象是展現(xiàn)新聞?lì)怉PP界面視覺(jué)風(fēng)格的重要元素之一，不同的APP對(duì)色彩的選擇不同，其展現(xiàn)出的視覺(jué)效果不同，給人們的心理感受也是各不相同。在“今日頭條”中采用的白色為背景色，易于用戶閱讀。在界面上方引導(dǎo)欄中使用主題色、最下方的圖標(biāo)文字也是使用主題色大紅色，界面內(nèi)容區(qū)域以主題色為主，大紅色的主題色，鮮艷、活潑、十分醒目；局部圖標(biāo)或一些小的功能圖標(biāo)上采用橙色與藍(lán)色為輔助色起到點(diǎn)綴作用.點(diǎn)擊某一個(gè)圖標(biāo)時(shí)會(huì)變成主題色紅色，告訴用戶此時(shí)是在這個(gè)專欄中（圖6）。“今日頭條”在APP上特別設(shè)置了一個(gè)可切換的白天模式和夜間模式。在夜間模式中，原有的紅色標(biāo)題和白色背景都加上一層灰色，使屏幕在夜間不會(huì)那么刺眼，背景顏色的變化有關(guān)燈效果使整個(gè)頁(yè)面在夜晚閱讀柔和，色彩也舒服簡(jiǎn)潔，貼心的設(shè)計(jì)讓用戶擁有更好地體驗(yàn)。（圖7）

四、設(shè)計(jì)心理學(xué)在APP用戶體驗(yàn)設(shè)計(jì)中的應(yīng)用

> 圖5 APP中字體色彩

> 圖6 APP中的色彩

> 圖7 APP中的夜間模式

體驗(yàn)表面上理解是對(duì)任何事物的感覺(jué)、知覺(jué)、情感、情緒的心理變化，而用戶體驗(yàn)更多的是指用戶在與產(chǎn)品互動(dòng)過(guò)程中形成的體驗(yàn)。為了使APP的界面視覺(jué)設(shè)計(jì)更優(yōu)秀，使用戶有更舒適的用戶體驗(yàn)，建議提高界面整體視覺(jué)信息的平衡感和穩(wěn)定性，并注重界面中各種設(shè)計(jì)元素的面積與位置的合理性，使界面有一個(gè)相對(duì)統(tǒng)一和諧的視覺(jué)感受；需要站在用戶的角度去思考APP的界面視覺(jué)設(shè)計(jì)，遵循一定的視覺(jué)瀏覽規(guī)律，進(jìn)行界面元素的差異化布局，以提高用戶視覺(jué)閱讀效率；提倡簡(jiǎn)單、明確、高效地將信息展現(xiàn)在新聞?lì)怉PP的界面中，在不影響信息高效傳遞的前提下，使界面整體設(shè)計(jì)簡(jiǎn)潔明了，以免給用戶造成視覺(jué)疲勞；建議確定界面的整體化風(fēng)格，新聞?lì)怉PP的界面設(shè)計(jì)元素盡量規(guī)范對(duì)齊，整體設(shè)計(jì)風(fēng)格統(tǒng)一，同時(shí)也要注重界面主次的對(duì)比性；最后建議將主題文化融入界面設(shè)計(jì)中，增加新聞?lì)怉PP的品牌辨識(shí)性，以提高用戶的操作效率和情感熟悉度。

在互聯(lián)網(wǎng)市場(chǎng)越來(lái)越多元化、復(fù)雜化的環(huán)境下，新聞?lì)怉PP界面的視覺(jué)設(shè)計(jì)不僅要滿足用戶們的基本型功能需求，還要注重用戶的視覺(jué)與心理感受，以及審美感受來(lái)關(guān)注手機(jī)APP的界面視覺(jué)設(shè)計(jì)，不斷探索界面設(shè)計(jì)的法則，對(duì)于設(shè)計(jì)出優(yōu)秀的新聞界面、樹(shù)立良好的品牌形象以及增加企業(yè)收益都有著重要的意義。

五、設(shè)計(jì)中心理學(xué)的實(shí)踐意義

APP界面視覺(jué)設(shè)計(jì)作為移動(dòng)應(yīng)用產(chǎn)品設(shè)計(jì)中的重要部分，是產(chǎn)品提供更優(yōu)質(zhì)用戶體驗(yàn)的重要研究方向。通過(guò)由整體到局部、由理論到實(shí)踐，對(duì)新聞?lì)怉PP交互界面視覺(jué)設(shè)計(jì)的發(fā)展現(xiàn)狀、界面視覺(jué)設(shè)計(jì)元素以及界面視覺(jué)設(shè)計(jì)與用戶體驗(yàn)之間的關(guān)系進(jìn)行研究分析，從而發(fā)現(xiàn)其中的不足之處，并且總結(jié)出優(yōu)秀的界面設(shè)計(jì)原則?！敖袢疹^條”真正地從用戶角度出發(fā)，注重用戶的視覺(jué)感受，整體的界面設(shè)計(jì)也簡(jiǎn)潔大方。“今日頭條”在界面設(shè)計(jì)的細(xì)節(jié)上加以完善，以給用戶帶來(lái)更好的視覺(jué)設(shè)計(jì)感受，拓寬客戶端的發(fā)展空間。在互聯(lián)網(wǎng)市場(chǎng)越來(lái)越多元化、復(fù)雜化的環(huán)境下，新聞?lì)怉PP界面的視覺(jué)設(shè)計(jì)不僅要滿足用戶們的基本型功能需求，還要注重用戶的視覺(jué)與心理感受，以及審美感受來(lái)關(guān)注手機(jī)APP的界面視覺(jué)設(shè)計(jì)，不斷探索界面設(shè)計(jì)的法則，對(duì)于設(shè)計(jì)出優(yōu)秀的新聞界面、樹(shù)立良好的品牌形象以及增加企業(yè)收益都有著重要的意義。

六、結(jié)語(yǔ)

在移動(dòng)互聯(lián)網(wǎng)的時(shí)代下，設(shè)計(jì)越來(lái)越影響著人們的生活，除了要注重產(chǎn)品設(shè)計(jì)本身的實(shí)用耐用性，現(xiàn)在的設(shè)計(jì)更多考慮人們精神層面的心理需求，一件優(yōu)秀的藝術(shù)設(shè)計(jì)作品一定是對(duì)人的心理需求做了一定的了解和研究的結(jié)果。設(shè)計(jì)者不但要從表面的視覺(jué)審美對(duì)界面設(shè)計(jì)有一個(gè)成熟的理論支撐，更要從視覺(jué)思維、信息傳播、心理學(xué)和人機(jī)交互等多方面對(duì)界面設(shè)計(jì)有更深入的研究才行。個(gè)人認(rèn)為心理學(xué)在用戶體驗(yàn)設(shè)計(jì)領(lǐng)域還有很大的應(yīng)用空間，應(yīng)該更加深入的進(jìn)行探索?！?/p>