視覺傳達(dá)設(shè)計(jì)在移動(dòng)UI界面中的運(yùn)用

李潔星

摘? 要：由于目前科技的快速發(fā)展，移動(dòng)設(shè)備的應(yīng)用越來越廣泛，人們對(duì)于移動(dòng)設(shè)備的視覺要求開始越來越重視，在虛擬的視覺文化當(dāng)中，移動(dòng)UI的設(shè)計(jì)具有著很大的代表性，它是能夠直接影響用戶體驗(yàn)性的。所以，在進(jìn)行設(shè)計(jì)的時(shí)候，需要運(yùn)用好特殊的平面視覺符號(hào)、插畫以及文字等重要元素，將自身的設(shè)計(jì)理念以及構(gòu)想傳達(dá)給用戶，其目的就是為了能夠展現(xiàn)出設(shè)計(jì)者獨(dú)特的設(shè)計(jì)理念，所以該文針對(duì)于視覺傳達(dá)設(shè)計(jì)在移動(dòng)UI界面中的實(shí)際應(yīng)用進(jìn)行研究分析，同時(shí)希望該文能夠給相關(guān)從業(yè)人員提供借鑒，進(jìn)一步提升移動(dòng)UI界面的整體設(shè)計(jì)水平。

關(guān)鍵詞：視覺傳達(dá)設(shè)計(jì)? 移動(dòng)UI? 視覺符號(hào)? 界面設(shè)計(jì)

中圖分類號(hào)：TP311.5 ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2020）07（b）-0031-03

The Application of Visual Communication Design in Mobile UI

LI Jiexing

（Wuhan Vocational and Technical College， Wuhan， Hubei Province， 430074 China）

Absrtact： With the rapid development of science and technology， the application of mobile devices is more and more extensive. People begin to pay more and more attention to the visual requirements of mobile devices. In the virtual visual culture， the design of mobile UI is very representative， which can directly affect the user experience. Therefore， when designing， we need to use special plane visual symbols， illustrations， characters and other important elements to convey our design ideas and ideas to users. The purpose is to show the designer's unique design ideas. Therefore， this paper studies and analyzes the practical application of visual communication design in mobile UI interface， and hopes that This paper can provide reference for relevant practitioners， and further improve the overall design level of mobile UI interface.

Key Words： Visual communication design; Mobile UI; Visual symbols; Interface design

一直以來人們都是通過視覺來觀看信息事物的，視覺傳達(dá)設(shè)計(jì)是一門比較專業(yè)的學(xué)科，同時(shí)也是為了能夠?qū)崿F(xiàn)信息的傳播，對(duì)于文字、圖片、頁面布局等會(huì)影響到視覺的元素進(jìn)行優(yōu)化的行為。UI設(shè)計(jì)是互聯(lián)網(wǎng)發(fā)展過程當(dāng)中的新型產(chǎn)業(yè)，同時(shí)和傳統(tǒng)的視覺設(shè)計(jì)有著很多相同的地方，不同的是，UI需要在平面當(dāng)中將視覺傳達(dá)設(shè)計(jì)和移動(dòng)設(shè)備的特點(diǎn)和交互進(jìn)行融合，從而能夠設(shè)計(jì)出用戶體驗(yàn)好的移動(dòng)應(yīng)用界面。

1? 人類視覺注意以及所具有的特點(diǎn)

1.1 人類視覺注意的基本情況

人類視覺注意，其具體指的是人類在對(duì)于一個(gè)事物進(jìn)行觀察的時(shí)候，很多人都會(huì)對(duì)于自己感興趣的場景或者事物過度去關(guān)注，并且會(huì)進(jìn)行仔細(xì)的觀察，從而就會(huì)導(dǎo)致了忽略周圍其他的視覺特征，這就會(huì)出現(xiàn)一個(gè)現(xiàn)象，人們會(huì)在這么多的視覺特征當(dāng)中，記住顏色這一視覺特征，進(jìn)而對(duì)于這個(gè)信息進(jìn)行分析，提高觀察能力。

1.2 視覺注意具有許多特點(diǎn)

1.2.1 視覺注意具有寬度

人們對(duì)某一地方關(guān)注的時(shí)候，其視覺寬度就會(huì)變小，只能看到這個(gè)寬度之間的事物。

1.2.2 視覺注意強(qiáng)度

就是人們對(duì)于某些事物集中關(guān)注的時(shí)候，從而就會(huì)忽略附近所有的事物，和視覺寬度有點(diǎn)類似。

1.2.3 視覺注意表現(xiàn)出選擇性特點(diǎn)

因?yàn)槿说拇竽X在接受到視覺圖像之后會(huì)對(duì)圖像進(jìn)行一些處理，處理會(huì)依據(jù)人類的喜好程度，感興趣的部分會(huì)處理得更加細(xì)致，所以也就是為什么感興趣的事物和場景印象會(huì)更深。

1.2.4 視覺平衡性

在同一時(shí)刻當(dāng)中，視覺所表現(xiàn)出來的現(xiàn)象是當(dāng)寬度越大的時(shí)候，注意強(qiáng)度就會(huì)變小反之則會(huì)變大，這就是視覺平衡性特點(diǎn)。

2? 視覺傳達(dá)設(shè)計(jì)與移動(dòng)UI界面設(shè)計(jì)的概述

2.1 視覺傳達(dá)設(shè)計(jì)的概念

視覺傳達(dá)設(shè)計(jì)指的是設(shè)計(jì)者通過對(duì)于頁面的布局、繪圖等進(jìn)行視覺設(shè)計(jì)的方法。視覺傳達(dá)設(shè)計(jì)一般都是采用了二維的方法，將文字、圖片等信息融入進(jìn)去。人們?cè)谌粘Ｉ町?dāng)中，所見所得都是一種視覺傳達(dá)，所以視覺傳達(dá)和人們的視覺是分不開的，其具體可以劃分成語言、動(dòng)畫、色彩等，設(shè)計(jì)者可以將這些視覺因素完美地結(jié)合在一起，從而能夠滿足用戶審美需求[1]。由于人體接受信息的一種方法便是利用視覺來完成，對(duì)此通過利用視覺傳達(dá)設(shè)計(jì)，能夠?qū)D像文字和色彩等傳播的工具進(jìn)行高度的組織和融合，從而對(duì)公共的信息進(jìn)行有效的傳播，在公共信息傳播的過程中，非常重視審美理念以及實(shí)用性，不僅需要保證信息傳播的美感，同時(shí)也需要保障所傳播的信息能夠在實(shí)際生活當(dāng)中得到應(yīng)用。移動(dòng)UI界面設(shè)計(jì)的許多理論實(shí)踐與視覺傳達(dá)設(shè)計(jì)的相關(guān)理念具有相同之處，對(duì)此，在移動(dòng)UI界面當(dāng)中進(jìn)行視覺傳達(dá)的設(shè)計(jì)能夠更好地提高人們的審美能力、傳播公共信息。在利用移動(dòng)UI界面進(jìn)行視覺傳達(dá)設(shè)計(jì)的過程中，設(shè)計(jì)師需要嚴(yán)格按照移動(dòng)UI設(shè)計(jì)平臺(tái)的基本規(guī)范，并且與視覺傳達(dá)設(shè)計(jì)的元素進(jìn)行充分的融合，從而讓所設(shè)計(jì)出來的作品具有美感，讓交互設(shè)計(jì)與操作邏輯進(jìn)行高度的統(tǒng)一，從而設(shè)計(jì)出符合用戶審美體驗(yàn)以及實(shí)用性體驗(yàn)比較強(qiáng)的移動(dòng)UI界面。

2.2 移動(dòng)UI界面的設(shè)計(jì)

移動(dòng)UI界面也可以被稱為用戶的界面。比如手機(jī)鎖屏平面，還有移動(dòng)程序的頁面等，由于視覺傳達(dá)設(shè)計(jì)的逐漸發(fā)展使得移動(dòng)UI界面的設(shè)計(jì)更具美感，并且風(fēng)格發(fā)生了變化，由原本的擬物化風(fēng)格逐漸過渡為扁平化風(fēng)格，從而讓設(shè)計(jì)的風(fēng)格更加多樣化，滿足不同審美能力的人群。由于信息時(shí)代的到來，移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的更新速度逐漸加快，為了能夠順應(yīng)時(shí)代發(fā)展的潮流，滿足人們對(duì)于移動(dòng)產(chǎn)品的需要，便需要加快各種移動(dòng)UI界面的設(shè)計(jì)，讓各種移動(dòng)UI界面的設(shè)計(jì)進(jìn)入市場當(dāng)中，吸引越來越多的用戶。為了能夠讓所設(shè)計(jì)出來的移動(dòng)UI界面更加滿足當(dāng)前用戶對(duì)于界面的要求，必須要按照人們的審美習(xí)慣進(jìn)行移動(dòng)UI的界面設(shè)計(jì)，同時(shí)還需要在保持審美能力的基礎(chǔ)上提高移動(dòng)UI界面的實(shí)用性。

3? 視覺傳達(dá)設(shè)計(jì)在移動(dòng)UI設(shè)計(jì)中的運(yùn)用

3.1 移動(dòng)UI設(shè)計(jì)要求

UI其具體指的是用戶界面，因?yàn)殡S著目前移動(dòng)設(shè)備的需求不斷擴(kuò)大，基本每個(gè)人都會(huì)有一部移動(dòng)設(shè)備，從而也就促進(jìn)了UI行業(yè)的發(fā)展。在目前用戶視覺要求不斷提高的背景之下，設(shè)計(jì)者需要在保證視覺效果的前提之下，還需要對(duì)于每個(gè)視覺元素都具備獨(dú)特的含義。UI設(shè)計(jì)的目的就是為了能夠讓用戶和移動(dòng)設(shè)備之間產(chǎn)生聯(lián)系，用戶通過點(diǎn)擊這些頁面圖標(biāo)，從而使得機(jī)器收到指令進(jìn)行各種操作，所以就需要UI設(shè)計(jì)需要通俗易懂，能夠讓用戶理解其中的含義，同時(shí)還需要遵循用戶使用移動(dòng)設(shè)備的習(xí)慣。另外，UI設(shè)計(jì)需要加強(qiáng)信息傳播的強(qiáng)度，用戶接收信息的方式大多數(shù)都是通過文字、圖片以及視頻，這些信息的設(shè)計(jì)的美感能夠直接影響用戶的求知欲。最后，UI視覺傳達(dá)設(shè)計(jì)需要注意各個(gè)環(huán)節(jié)的審美，從而能夠在整體上給用戶很好的視覺體驗(yàn)[2]。

3.2 界面色彩的視覺傳達(dá)設(shè)計(jì)

視覺傳達(dá)要素當(dāng)中最重要的一點(diǎn)就是界面色彩，色彩的搭配會(huì)直接影響整體的視覺傳達(dá)效果。在UI設(shè)計(jì)當(dāng)中，需要有著一套換膚技術(shù)，為用戶提供更多的色彩搭配效果，從而才能夠滿足每個(gè)用戶對(duì)于色彩的不同需求。另外，在界面的整體設(shè)計(jì)當(dāng)中，需要考慮到每個(gè)色彩之間所產(chǎn)生的視覺效果，避免顏色的搭配導(dǎo)致界面出現(xiàn)視覺理論錯(cuò)誤，出現(xiàn)假面亂花的色彩問題[3]。色彩在移動(dòng)UI界面設(shè)計(jì)當(dāng)中要堅(jiān)持3個(gè)基本原則：首先，需要遵循多樣性的原則。在設(shè)計(jì)移動(dòng)UI界面的時(shí)候，可以根據(jù)不同APP的功能選擇適當(dāng)?shù)纳剩热缬螒駻PP和直播網(wǎng)站APP等，需要借用比較明快的顏色進(jìn)行設(shè)計(jì)，但是閱讀類的APP便可以運(yùn)用比較沉悶的色彩進(jìn)行設(shè)計(jì)。其次，需要遵循功能性的原則。對(duì)于UI界面的規(guī)范性控件等，可以利用紅色進(jìn)行提醒以及警示。最后，需要遵循靈活性的原則。在APP的使用過程中可以根據(jù)使用的場景以及人群確定整體的設(shè)計(jì)色調(diào)。

總體來說，移動(dòng)界面布局的核心是在于要將頁面當(dāng)中最重要的元素放在最顯眼的位置，從而能夠提高用戶的訪問量以及使用量，才能保證信息傳遞;在設(shè)計(jì)的時(shí)候還需要對(duì)于頁面進(jìn)行留白操作，如果頁面全部都是文字圖片會(huì)顯得不美觀，影響用戶體驗(yàn)。

4? 結(jié)語

綜上所述，移動(dòng)UI作為目前移動(dòng)終端設(shè)備當(dāng)中重要的信息傳輸方式，其設(shè)計(jì)效果會(huì)直接影響用戶的視覺體驗(yàn)。設(shè)計(jì)者就需要在設(shè)計(jì)的過程當(dāng)中，注重色彩以及文字的布局，加強(qiáng)界面的整體性，同時(shí)還需要注意每個(gè)重點(diǎn)內(nèi)容進(jìn)行重點(diǎn)處理，能夠提高用戶的視覺感，從而能夠提高視覺傳達(dá)效果。

參考文獻(xiàn)

[1] 楊洋.數(shù)字媒體藝術(shù)專業(yè)“工作坊”教學(xué)模式實(shí)踐探索[J].教育理論與實(shí)踐，2016，36（36）：49-50.

[2] 王蒙蒙.視覺傳達(dá)設(shè)計(jì)在移動(dòng)UI界面中的運(yùn)用[J]. 西部皮革，2019，41（7）：72.

[3] 周璨.視覺傳達(dá)設(shè)計(jì)在移動(dòng)UI界面設(shè)計(jì)中的應(yīng)用[J].教育教學(xué)論壇，2019（12）：272-273.

[4] 朱雄軒.探討數(shù)字媒體藝術(shù)設(shè)計(jì)UI設(shè)計(jì)課程的現(xiàn)狀及其實(shí)踐教學(xué)[J].科技資訊，2019，17（2）：154-155.

[5] 周碧靜.數(shù)字媒體藝術(shù)專業(yè)實(shí)踐教學(xué)體系構(gòu)建探索[J]. 科技資訊，2019，17（11）：106-107.

[6] 王崇寧，何其彪.視覺傳達(dá)設(shè)計(jì)在移動(dòng)UI界面設(shè)計(jì)中的應(yīng)用[J].探索科學(xué)，2019（2）：289.

[7] 孟立叢.網(wǎng)絡(luò)傳媒對(duì)我國視覺傳達(dá)設(shè)計(jì)教育的影響[J].教育與職業(yè)，2006（32）：91-92.