設計學中視覺心理學因素的應用
——以“今日頭條”新聞APP界面設計為例

杜艷春

（武漢理工大學，武漢 430074）

引言

在全球信息化的時代背景下，內容充實且令人愉悅的視覺界面會使產品獲得更多用戶的喜愛。理想的用戶界面設計能使用戶與界面之間保持愉悅、簡單和舒適的交流方式。一個舒適美觀的新聞類APP界面設計，不僅可以提升用戶的閱讀體驗，樹立良好的品牌印象，增加企業收益，甚至還能影響到其他類APP的的設計風格。

一、設計學與心理學之間的聯系

設計學是關于設計這一人類創造行為的理論研究。由于設計一直以功能性與審美性為目標，因此，設計學的研究對象便與設計的功能性與審美性有著不可割裂的關系。作為一門新興的學科。設計學是一門理、工、文相結合，融機電工程、藝術學、人機工效學和計算機輔助設計于一體的科技與藝術相融合的新型交叉學科。

設計心理學是設計藝術學與心理學交叉而成的邊緣性學科。設計心理學是屬于應用心理學的范疇，是心理學理論應用于設計藝術學科的具體實踐。心理學是研究人的科學，設計心理學同樣如此，因此，設計心理學的研究應圍繞與設計活動相關的所有的人的心理和行為來進行。而視覺心理學是基于生物學心理學之上，通過一定的理論和實踐總結出來的關于人的視覺怎么樣能動的影響思維的規律。視覺心理學的主要研究內容是以人眼為主體形成的視知覺規律，是從外到內的過程，不同的受眾看到不同的圖像，相同的受眾看到不同的圖像和不同的受眾看到相的圖像所帶來的心理感受也都是不同的。現代節奏的生活使得人們的碎片時間不斷增加，移動閱讀的習慣也逐漸形成。在移動互聯網科技高速發展的時代，新聞類客戶端成為了很多人日常生活中獲取新聞資訊的最重要途徑之一。用戶對于新聞類APP交互界面的要求在不斷提高，在使用過程中其產品的交互界面設計直接影響著大眾的體驗感受。

二、新聞類APP界面中圖標與布局的設計

在如今高度發展的互聯網視覺情景下，許多圖形圖標已經具有了語言表達的作用，用戶在多次使用圖標后，會從認知上將具有該視覺形狀的圖形與特定的概念緊密地聯系在一起。豐富多樣、富有趣味的圖標表現形式能夠傳達不同的產品理念，使產品更具吸引力的同時也給用戶留下深刻的印象。

> 圖1 三種類型圖標

> 圖2 “今日頭條”LOGO

> 圖3 APP中“×”圖標

> 圖4 “今日頭條”布局

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

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

三、新聞類APP界面中文字與色彩的設計

文字作為新聞類APP界面中的重要元素，對于信息的傳達有重要的作用。文字是將信息傳達給用戶的一種載體，要在有限的手機屏幕中合理地將文字展現出來，需要綜合考慮文字的字體、大小、間距和顏色等諸多元素的設計規范。作為一種信息載體藝術，文字設計也是與信息傳播相結合的一種信息視覺設計的形式。不同的字體帶給人的主觀感受也是不相同的。在“今日頭條”的文章中多采用簡潔易辨識的黑體字體，以方便用戶閱讀。手機界面的文字設計具有目的性和針對性，以用戶為中心，不僅需要考慮到用戶在不同情境下的使用習慣，還要根據不同的主題和對象選用合適的字體，使展示的字體與展示新聞的信息相協調。在設計新聞類APP的文字時，應該以易辨識性、實用性和閱讀舒適為出發點更好地為讀者服務。

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

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

四、設計心理學在APP用戶體驗設計中的應用

> 圖5 APP中字體色彩

> 圖6 APP中的色彩

> 圖7 APP中的夜間模式

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

在互聯網市場越來越多元化、復雜化的環境下，新聞類APP界面的視覺設計不僅要滿足用戶們的基本型功能需求，還要注重用戶的視覺與心理感受，以及審美感受來關注手機APP的界面視覺設計，不斷探索界面設計的法則，對于設計出優秀的新聞界面、樹立良好的品牌形象以及增加企業收益都有著重要的意義。

五、設計中心理學的實踐意義

APP界面視覺設計作為移動應用產品設計中的重要部分，是產品提供更優質用戶體驗的重要研究方向。通過由整體到局部、由理論到實踐，對新聞類APP交互界面視覺設計的發展現狀、界面視覺設計元素以及界面視覺設計與用戶體驗之間的關系進行研究分析，從而發現其中的不足之處，并且總結出優秀的界面設計原則。“今日頭條”真正地從用戶角度出發，注重用戶的視覺感受，整體的界面設計也簡潔大方。“今日頭條”在界面設計的細節上加以完善，以給用戶帶來更好的視覺設計感受，拓寬客戶端的發展空間。在互聯網市場越來越多元化、復雜化的環境下，新聞類APP界面的視覺設計不僅要滿足用戶們的基本型功能需求，還要注重用戶的視覺與心理感受，以及審美感受來關注手機APP的界面視覺設計，不斷探索界面設計的法則，對于設計出優秀的新聞界面、樹立良好的品牌形象以及增加企業收益都有著重要的意義。

六、結語

在移動互聯網的時代下，設計越來越影響著人們的生活，除了要注重產品設計本身的實用耐用性，現在的設計更多考慮人們精神層面的心理需求，一件優秀的藝術設計作品一定是對人的心理需求做了一定的了解和研究的結果。設計者不但要從表面的視覺審美對界面設計有一個成熟的理論支撐，更要從視覺思維、信息傳播、心理學和人機交互等多方面對界面設計有更深入的研究才行。個人認為心理學在用戶體驗設計領域還有很大的應用空間，應該更加深入的進行探索。■