移動終端用戶界面中的視覺創(chuàng)新

鐘鳳鳴

摘要：基于當前大數(shù)據(jù)與信息時代下智能移動終端覆蓋率高，而信息繁多雜亂的現(xiàn)狀，提出移動終端用戶界面的視覺設(shè)計創(chuàng)新，以便用戶快速精準地接收關(guān)鍵有效信息。大數(shù)據(jù)信息時代下，應(yīng)用程序用戶界面需結(jié)合時代要求，以創(chuàng)新性的視覺設(shè)計使用戶界面具備信息傳遞快速準確、視覺呈現(xiàn)簡潔有效、用戶體驗輕松愉悅的特點。

關(guān)鍵詞：移動終端 用戶界面 視覺設(shè)計

隨著電子科學技術(shù)與互聯(lián)網(wǎng)技術(shù)的日新月異，手持移動終端的持有率呈井噴式上漲趨勢，移動終端設(shè)備的全面普及接踵而來的即是數(shù)量龐大、林林總總的應(yīng)用程序。據(jù)國家工信部數(shù)據(jù)顯示，截至2019年末，我國國內(nèi)市場上監(jiān)測到的本土第三方應(yīng)用商店APP數(shù)量為217萬款?？梢娙藗兊纳钆c應(yīng)用程序已然無法分割，應(yīng)用程序已經(jīng)能夠包羅人們生活的方方面面。面對恒河沙數(shù)的信息和數(shù)據(jù)，許多移動終端的用戶界面在篩選和處理冗余信息及最終的視覺呈現(xiàn)時顯得力不從心。本文旨在以用戶為中心，將用戶的心理需求和情感體驗作為重要考慮因素，從而在用戶界面進行一系列視覺創(chuàng)新設(shè)計，目的是使用戶在應(yīng)用程序界面中感受到信息傳達快速精準、視覺呈現(xiàn)簡潔有效、用戶體驗輕松愉悅的舒暢過程。

一、用戶界面的視覺設(shè)計創(chuàng)新

（一）版式布局化繁為簡 對于移動終端用戶界面而言，將特定的信息以快速準確的方式傳遞給受眾是重中之重。置身于當今大數(shù)據(jù)下信息泛濫的時代，人們每天生活在數(shù)不勝數(shù)的各類信息中，導致他們的注意力十分有限，這就對當下的用戶界面設(shè)計師提出更高要求，通過科學合理的方式使用戶在有限的注意力中快速識別目標信息。同時，就受眾而言，用戶界面的視覺設(shè)計不同于海報設(shè)計那么有針對性，以購物網(wǎng)站為例，通常其界面設(shè)計要同時面對多類人群和多種任務(wù)，而不是像海報設(shè)計一樣針對特定人群進行設(shè)計，這就需要移動終端用戶界面在信息的處理上，應(yīng)收集整合大量數(shù)據(jù)與信息并進行篩選，有選擇性地過濾冗余信息，將重要信息重點呈現(xiàn)。在版面布局上，分清視覺層級關(guān)系，保持版面簡潔精煉，給用戶輕松、流暢的體驗過程。在元素分區(qū)上，合理地將相關(guān)信息進行編組，理清閱讀視覺流，避免出現(xiàn)閱讀干擾，保證準確快速傳播。

（二）過濾冗余信息 前文提到用戶的注意力十分有限，誠然，在大數(shù)據(jù)時代的推動下，移動終端勢必要跳出長久以來信息壘積的傳統(tǒng)傳遞模式，向更加有條理的方向拓展。尤其是對于許多碎片化的信息，一味的堆砌只會讓用戶在繁雜的環(huán)境中產(chǎn)生厭惡煩躁的情緒，過多的碎片化信息也會使得用戶在閱讀的過程中備受困擾，信息的整合與歸納此時顯得不容忽視。篩選和保留重要的信息，并將之進行精簡化或圖像化處理，過濾無用的多余信息，使傳遞時更加直觀明確，從而提高用戶的信任度。整個過程應(yīng)時刻保持高度簡潔，若采用圖形化處理，則應(yīng)多采用矩形、方形、圓形等簡單的幾何形狀。理清層級關(guān)系。版面的構(gòu)成方式、元素的邏輯秩序、主次的排放位置等因素都會對一個版面是否簡潔美觀影響重大。合理的版式編排能夠引導用戶產(chǎn)生流暢的操作過程，給人一種循序漸進的秩序感。這就要求在進行用戶界面設(shè)計時，首先要將篩選后的圖文信息進行編組化，體現(xiàn)出元素與元素、信息與信息之間的親密性;其次要清晰梳理信息層級關(guān)系，并分組對應(yīng)進行視覺表現(xiàn)上的差異。目的是使用戶在短暫的閱讀時間內(nèi)迅速掌握要點，并選擇是否要更進一步地去了解內(nèi)容。除此之外還可以結(jié)合用戶的心理和行為特點創(chuàng)建簡潔易用的交互方式，提升界面的有效性。合理分區(qū)元素。清晰的板塊分區(qū)能夠讓受眾第一時間會意該板塊的內(nèi)容側(cè)重，節(jié)省閱讀時間，提高閱讀效率。要將邏輯相關(guān)的信息排列在一起，而剩余信息則按照對齊排列的方式凸顯統(tǒng)一性與秩序感，使界面和諧整潔，了然于目。

以購物網(wǎng)站淘寶為例， 淘寶恰到好處地處理著龐雜的商品信息。在手機淘寶主界面底部導航中采用“圖形+文字”的處理方式，合理利用了人們對于圖形圖像更高的注目度加上對文字快速識別的這兩個特點，將主要分類與特定特殊分類形成視覺層級差異化。在商品分類方面，手機淘寶的導航系統(tǒng)從用戶的角度出發(fā)，做到涵蓋面廣、分類明確、清晰簡潔，幾乎不存在購物障礙。在網(wǎng)頁淘寶中的導航則更是琳瑯滿目，層級分明，僅從戶外運動一欄分類中就包含六十余種商品類別，用戶只需根據(jù)自身需求一層層向下點擊，即可準確瀏覽到心儀的商品類別。簡明合理的界面設(shè)計能夠在一瞬間打動瀏覽者并增強用戶黏度，隨之擁有更加廣泛的用戶與市場。

（三）色彩與文字的一致性 色彩與文字在用戶界面視覺設(shè)計中的作用已經(jīng)無需贅述了?！耙恢滦栽瓌t”甚至也作為一種安全保險的設(shè)計準則被設(shè)計師們引為參照。對于體驗用戶而言，界面一致能夠使用戶感到舒適，一旦用戶掌握主要的功能或界面，就可以在其他界面不需要過多提示從而進行自由操作。不會過多消耗時間與精力，由此降低用戶的學習和記憶成本。一般在同一界面中不建議使用超過三種色彩或文字的組合，這會使人眼花繚亂，降低閱讀性，提升閱讀成本。相反，一個秩序嚴謹?shù)囊苿咏K端界面，會帶來“干凈”、“清爽”的感受，使體驗的過程充滿愉悅。

色彩的一致性。早在先秦時期就已形成了中國傳統(tǒng)五色觀。古人把藍、紅、黃、白、黑五種顏色賦予特定的文化含義，并廣泛應(yīng)用于社會生活的各個方面，五色觀也成為我國古典色彩美學思想的核心。遠在古代人們就已對不同色彩所帶給人的心理反應(yīng)進行了劃分。發(fā)展到現(xiàn)如今的設(shè)計中，對各種豐富色彩的感受也已分門別類。但在同一界面中如果天馬行空任意使用過多的色彩會使閱讀者帶來誤解與迷惑，不能達到渲染或強調(diào)某一氛圍的效果。

需謹記，設(shè)計不是單純?yōu)榱诵问矫溃墙鉀Q矛盾，從矛盾入手。在此處的矛盾即是純粹的設(shè)計審美與用戶體驗之間的矛盾，為了追求絕對的視覺美感而放棄用戶心理的設(shè)計就像空中樓閣，無非是自娛自樂。而一味的去附和低俗審美無疑阻礙著設(shè)計之美的傳播與發(fā)揚。因此二者之間應(yīng)相互協(xié)調(diào)，共同發(fā)展。在用戶界面中同一分區(qū)內(nèi)使用統(tǒng)一的、相近的色彩會使界面更加整體，引導著用戶的心理感受。大面積使用同色系色彩并不意味著界面一定會呈現(xiàn)出呆板、無趣、木訥的狀態(tài)，可以在明確色彩的屬性和特點與目標受眾的關(guān)系后，以有規(guī)律的重復(fù)、流體的漸變等創(chuàng)新技法以及打造有質(zhì)感的肌理與材料的呈現(xiàn)方式再結(jié)合色彩本身的明度、純度、色相，形成具有可變化的節(jié)奏感、韻律感及視覺沖擊的界面，以此創(chuàng)新設(shè)計打造惹人注目，具有獨特統(tǒng)一的色彩風格。

文字在應(yīng)用程序的用戶界面中同樣發(fā)揮著舉足輕重的作用。文字具有直觀、清晰的傳遞重要信息的作用，能夠直截了當表達內(nèi)容，讓用戶首先識別界面欲想傳達的信息。在移動終端用戶界面內(nèi)，文字字體的選擇需跟應(yīng)用程序整體的風格相統(tǒng)一。在同一個界面設(shè)計中，字體的種類同樣不宜超過三種，盡量保持規(guī)范化、整體化，若界面中出現(xiàn)拼音或英文字母的組合方式，則每一個英文字體也都需要與中文字體風格相一致。

除此之外，還需對字體的字號、顏色、行距、布局做統(tǒng)一性考慮，以達到整體流暢的瀏覽效果，給用戶行云流水的使用體驗。切忌僅憑設(shè)計師個人喜好而進行個性化嘗試，極具個性化字體的使用范圍較有針對性，濫用恐導致字體的辨識度降低或搭配風格怪異，影響用戶體驗感。

以一款介紹我國古代傳統(tǒng)家具構(gòu)件的手機端軟件“榫卯”為例，首先它的啟動界面明快簡潔，精美大氣的宋體字“榫卯”二字映入眼簾，就能迅速使用戶的眼神與注意力聚焦，加之附上斑駁殘缺的磨損質(zhì)感，顯露出一種充滿歲月的美感。在這款軟件中，整體色彩的調(diào)性全部選取與原木相關(guān)聯(lián)的暖色調(diào)，給人以溫暖、人情味的情感聯(lián)系。通過滑動屏幕選擇任意一個構(gòu)件則可進入該構(gòu)件的詳情頁，詳情頁的文字信息極為精簡，但卻重點明確。除開標志以外的字體統(tǒng)一采用黑色楷體，詮釋出濃厚的中華文化的意蘊，文字內(nèi)容不多卻恰到好處。展現(xiàn)出“大道至簡”的精髓，既重視了用戶內(nèi)心對“精簡”的要求，又使得信息能夠得到有效傳達。

二、用戶界面融入動態(tài)化圖形

動態(tài)化圖形設(shè)計在二維的平面設(shè)計基礎(chǔ)上增加了時間與交互的維度，是一種多維的視覺設(shè)計。將動態(tài)化圖形融入到移動終端用戶界面的視覺設(shè)計中，不僅能夠豐富界面的表達形式，使動態(tài)信息更加扣人心弦，被用戶視線所捕捉，提升注目度，還是對傳統(tǒng)界面設(shè)計的一大拓展，是藝術(shù)設(shè)計與科學技術(shù)的創(chuàng)新性結(jié)合。動態(tài)化的圖形設(shè)計能夠引導用戶對界面產(chǎn)生很強的吸引力，更加全面、有效地展示界面信息，同時使用戶即使處在紛擾的環(huán)境下也能夠沉浸式地享受在應(yīng)用程序中。在使用動態(tài)風格進行展示時，由靜到動的順序應(yīng)符合閱讀習慣和邏輯，此外，動態(tài)展示方式與圖形之間應(yīng)保持契合度，動態(tài)風格應(yīng)與靜態(tài)風格相統(tǒng)一。當前的動態(tài)化圖形已通過智能手機、平板電腦、公共信息平臺等新的傳播媒介日益進入大眾視野中，逐漸成為傳播界的新寵，迎來越來越廣闊的空間。

用戶界面中的動態(tài)化圖形設(shè)計是基于傳統(tǒng)平面設(shè)計原則的基礎(chǔ)上，結(jié)合動畫、特效中的影像規(guī)律，最終以新穎的多維度動態(tài)效果展示出界面中的關(guān)鍵信息，同時提高整個界面的趣味性、層次感和美感。在動態(tài)化圖形設(shè)計中，首先要考慮在傳統(tǒng)的界面設(shè)計形式上需要進行的轉(zhuǎn)變。例如，運動方向遵循從左到右或是從右到左？關(guān)鍵圖形展示的順序是否存在邏輯關(guān)聯(lián)？動態(tài)化的速度或節(jié)奏是否與用戶心理值相契合？要時刻“以人為中心”，這意味著要時刻以用戶的心理感受為中心，設(shè)想并調(diào)研普通受眾可接受的范圍，盡可能達到最舒適愉悅的視覺感受，將用戶因等待而產(chǎn)生的焦慮感大大緩解或降至最低。除此之外，還需要考慮圖形動態(tài)化設(shè)計的形式美感要與靜態(tài)化界面之間產(chǎn)生聯(lián)系性。例如，動態(tài)元素以何種運動方式呈現(xiàn)？聚散、虛實、疊合、碰撞、跳躍等皆可根據(jù)靜態(tài)界面風格要求進行相應(yīng)設(shè)定。

以某一音樂類應(yīng)用程序的動態(tài)化啟動界面為例，使用動態(tài)標志或動態(tài)標語進行啟動界面的展示能夠生動形象傳達出品牌的格調(diào)與類型，使用點、線、面等元素進行跳躍、閃爍、流淌去營造與用戶一致的期待音符在心中跳動的心理感受。既在短時間內(nèi)加強了用戶對該音樂品牌的直觀印象，也使用戶在等待進入程序的這一時間段感受到趣味性而不覺乏味。這種將動態(tài)形式與內(nèi)容的高度統(tǒng)一，實現(xiàn)了一加一大于二的效應(yīng)，豐富了界面表現(xiàn)語言。還需注意的是，避免盲目套用動態(tài)模板，在整個動態(tài)設(shè)計的過程中必須保持圖形的動作命令與界面風格、內(nèi)涵、元素、音樂之間和諧統(tǒng)一，巧妙的關(guān)聯(lián)性會使用戶產(chǎn)生全新的不同于靜態(tài)界面的視覺體驗，創(chuàng)造典雅獨特的視覺盛宴，強化整體風格。

移動終端用戶界面的視覺設(shè)計經(jīng)歷了不同時代的洗禮，迎來了百花齊放的盛況，同時也隨著科技的發(fā)展與審美的提升而注入更高要求，對用戶界面的視覺創(chuàng)新已成為必然之勢。面對生活環(huán)境中繁多雜亂的各類數(shù)據(jù)和信息，如何去分析提取關(guān)鍵點并借助用戶界面創(chuàng)造性地呈現(xiàn)，使之直達受眾的內(nèi)心，透過冰冷的移動終端使用戶在思想和感情上產(chǎn)生情感共鳴，對每一位設(shè)計工作者都是一個很大的挑戰(zhàn)。在新媒體與新技術(shù)日益交融的時代潮流中，既要把握時機，又要勇于創(chuàng)新，才能呈現(xiàn)出更多富有感染力的、令人嘆為觀止的設(shè)計作品。

參考文獻：

[1]高海軍，歷泉恩，張超軍.色彩構(gòu)成[M].北京：中國青年出版，2010.1.

[2]林嘉怡.大數(shù)據(jù)時代移動終端界面設(shè)計創(chuàng)新趨勢研究[J].包裝工程，2017，38（02）：239-242.

[3]楊潔.基于用戶認知特點的移動終端APP界面設(shè)計[J].傳媒，2017（04）：63-65.

[4]殷俊，王婉晴.基于注意和視知覺的移動端界面設(shè)計應(yīng)用[J].包裝工程，2019，40（10）：68-72.

[5]楊琴.平面視覺元素在界面設(shè)計中的應(yīng)用[J].包裝工程，2019，40（06）：278-281.

[6]彭綱.論網(wǎng)頁的色彩[J].裝飾，2004（02）：94.

[7]彭芳.移動終端的網(wǎng)頁設(shè)計優(yōu)化的思考[J].科技創(chuàng)新導報，2018，15（15）：130+132.

[8]黃蘭.動態(tài)圖形設(shè)計在信息傳播中的創(chuàng)意途徑研究[J].包裝工程，2018，39（22）：52-56.

[9]李濯纓.動態(tài)圖形設(shè)計的動態(tài)表現(xiàn)原則——以“第25屆金曲獎頒獎典禮”視覺設(shè)計為例[J].裝飾，2018（09）：142-143.

（作者單位：貴州日報當代融媒體集團）