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

葉聰

摘要：當(dāng)前的移動軟件已經(jīng)開始重視UI界面設(shè)計(jì)工作，并且引入了多種設(shè)計(jì)技術(shù)，其中視覺傳達(dá)設(shè)計(jì)為其中的最重要設(shè)計(jì)技術(shù)之一。基于對視覺傳達(dá)設(shè)計(jì)中可用因素以及表達(dá)形式的分析，結(jié)合對移動UI界面設(shè)計(jì)中需要關(guān)注重點(diǎn)內(nèi)容的總結(jié)，本文提出了視覺傳達(dá)設(shè)計(jì)在移動UI界面設(shè)計(jì)中的應(yīng)用方法，從而讓界面設(shè)計(jì)的科學(xué)性提升。

關(guān)鍵詞：視覺傳達(dá)設(shè)計(jì);移動UI界面;界面設(shè)計(jì)

中圖分類號：TP393? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2019）25-0308-03

在視覺設(shè)計(jì)中，其當(dāng)前已經(jīng)成了一門獨(dú)立的學(xué)科，其在不同的設(shè)計(jì)領(lǐng)域中使用方式和注重的因素有所不同。在移動軟件的設(shè)計(jì)中，要從這類軟件的本身角度出發(fā)，依照視覺傳達(dá)設(shè)計(jì)中的相關(guān)知識完成所有的設(shè)計(jì)項(xiàng)目，但是對于移動UI界面來說，由于UI界面占用空間過大會降低軟件的響應(yīng)速度，所以也要考慮界面設(shè)計(jì)上的簡潔性。

1視覺傳達(dá)設(shè)計(jì)中的可用因素以及表達(dá)形式

1.1 版式布局

移動APP受到手機(jī)屏幕空間的桎梏較大，為了能夠更好地完成對所有項(xiàng)目的分析，要通過對整個界面版式的合理布局，提高界面的設(shè)計(jì)美觀性和科學(xué)性。

版式布局設(shè)計(jì)中，當(dāng)前開發(fā)出了多種形式，本文將其歸類為多階段分布式布局和整體性布局兩種方式。前者的概念為，界面上分為多個不同的層次，或者通過在界面上設(shè)置對中顏色強(qiáng)度漸變圖片、線條增加復(fù)雜度等方式，提高界面涵蓋信息數(shù)量的樣式。對于分為不同層次的方式，在當(dāng)前的移動UI界面中的應(yīng)用概率較低，原因?yàn)檫@種設(shè)計(jì)方式難以和移動APP中的內(nèi)容和內(nèi)涵對接，并且當(dāng)前的手機(jī)系統(tǒng)中多植入廣告，所以界面會保持一段時間，這種方式會提高對用戶的感官刺激，只有在特定情況下才可用。而對于提高信息量的情況，考慮到手機(jī)屏幕尺寸，一味增加信息量的方式作用效果較為一般[1]。從整體上來看，當(dāng)前這種版式布局方式的使用量較少。

后者的概念為，移動UI界面不再只重視對信息的表達(dá)和傳遞，而是更注重對用戶的吸引，常用的設(shè)計(jì)方法為“留白”形式，只通過凸顯出關(guān)鍵信息的方式，展現(xiàn)相關(guān)APP的特色。

1.2 界面色彩

界面設(shè)計(jì)中采用的色彩要考慮多種因素，其中最首要的為整個底色方面的色彩搭配方案，對不同的手機(jī)移動軟件來說，其具備的內(nèi)涵和發(fā)揮的作用有很大不同，其需要向用戶展現(xiàn)的特點(diǎn)也有所區(qū)別。為了能夠提高用戶的觀感，所以要保證采用的底色能夠和app發(fā)揮的功能以及具備內(nèi)涵方面的完整適配，通過這種方法方可讓軟件能夠被更多用戶所接受。

而對于版式設(shè)計(jì)工作來說，雖然在設(shè)計(jì)中經(jīng)過多種設(shè)計(jì)上的變更方案在， 即從小內(nèi)存階段的簡約設(shè)計(jì)，到智能機(jī)普及時的復(fù)雜設(shè)計(jì)，再到當(dāng)前最為常見的簡約設(shè)計(jì)方式，設(shè)計(jì)思想經(jīng)過了對此變更，但是具體的設(shè)計(jì)中都需要能夠通過對移動UI設(shè)計(jì)工作，凸顯出所要向用戶傳達(dá)的信息和意圖[2]。

在界面設(shè)計(jì)工作中，要注意整個界面設(shè)計(jì)過程中的選用顏色，尤其是對于整個界面中的文字信息，由于文字為整個界面的升華和相關(guān)信息歸納，所以需要其能夠與背景顏色之間有較高的差別，可以讓用戶在第一時間通過閱讀文字發(fā)現(xiàn)該手機(jī)移動軟件的具體應(yīng)用特點(diǎn)和功能。

1.3 文字線條

界面設(shè)計(jì)中針對文字線條的設(shè)計(jì)工作必不可少，原因?yàn)橹煌ㄟ^設(shè)置的照片很難讓用戶找到這一軟件中涵蓋的信息，而通過對文字和線條的應(yīng)用，可以實(shí)現(xiàn)對相關(guān)因素的有效融合和連接。在完成對所有項(xiàng)的歸類和融合后，用戶可以第一時間發(fā)現(xiàn)這一界面所具備的信息量和信息內(nèi)容，最終讓用戶能夠根據(jù)自身所求，確定是否下載相關(guān)軟件。

文字線條設(shè)計(jì)一方面要注意這些信息的傳達(dá)方式，以確定文字的構(gòu)成以及表達(dá)方式，文字和線條信息為軟件的整體升華項(xiàng)目，所以要保證設(shè)計(jì)的專業(yè)性，尤其是對于文字方面，這一因素需要有專業(yè)的文案撰寫人員完成設(shè)計(jì)。而對于字體的其余構(gòu)造因素，包括字體顏色、字體大小、字體字號、字體設(shè)置位置等多種因素，這些因素將由界面設(shè)計(jì)人員完成，就在所有因素合理搭配的情況下，才可確保用戶能夠提前通過閱讀文字找到整個軟件的特點(diǎn)和相關(guān)信息。

1.4 元素符號

元素符號的概念為，通過對字母、相關(guān)圖形等因素的使用和融合，完成對整個移動UI界面的設(shè)計(jì)，并且這些因素要能夠與軟件的整體運(yùn)行方式和運(yùn)行內(nèi)涵銜接，通過這種方法最終讓軟件能夠被更多用戶接受。

對于不同類型、不同功能的軟件來說，其具備的元素符號類型也有所不同，例如對于圖形元素當(dāng)前常用的為圓形因素以及其余不具備較為尖銳角度的圖形，原因?yàn)閺男睦韺W(xué)上來看，當(dāng)前常用的圖形能夠更好地與用戶的心理契合，并且這類元素最大限度降低了信息傳達(dá)中的攻擊性因素。

2 移動UI界面設(shè)計(jì)中需要關(guān)注的重點(diǎn)內(nèi)容

2.1 搭配合理性

移動UI界面設(shè)計(jì)中要關(guān)注使用元素的搭配量和搭配效果，需要考慮的因素包括整體版式設(shè)計(jì)、選用的因素設(shè)計(jì)、移動UI界面中設(shè)置的文字以及線條等，只有在所有項(xiàng)目都符合要求的情況下，才可以保證整個UI界面的搭配合理性。

考慮到移動UI界面的特殊性，即展現(xiàn)屏幕較小，所以在搭配方面需要考慮的內(nèi)容為文字的確定位置、相關(guān)圖形的表現(xiàn)形式等[3]。

另外也要按照整個app發(fā)揮作用的角度出發(fā)，確定該軟件的作用形式以及內(nèi)涵和功能特點(diǎn)，在此基礎(chǔ)上確定采用何種版式布局形式，雖然常見的版式為簡約性設(shè)計(jì)，但是在一些特殊情境下的軟件中，簡約現(xiàn)設(shè)計(jì)涵蓋的信息量過低，降低了這一系統(tǒng)的發(fā)揮作用。

2.2 界面簡約性

在當(dāng)前的網(wǎng)絡(luò)信息技術(shù)發(fā)展中，用戶會在短時間之內(nèi)收集到大量的信息，長此以往，會使用戶產(chǎn)生信息收集疲勞癥狀，所以可以看到當(dāng)前用戶對界面設(shè)計(jì)簡潔性提出的要求逐漸升高。

移動UI界面設(shè)計(jì)的兩個重要因素為對相關(guān)信息的傳達(dá)和對用戶心理預(yù)期的滿足，甚至在一定條件下或特定的軟件中，后者的優(yōu)先級要遠(yuǎn)高于前者。從這一角度來看，當(dāng)前和今后的移動界面發(fā)展研發(fā)中，采用簡約性設(shè)計(jì)的軟件類型會逐漸增高。

但是這種認(rèn)知只是一種普適性的認(rèn)知模式，對于一些特殊類型的軟件來說，其移動UI界面的設(shè)計(jì)復(fù)雜都需要大幅提高，達(dá)到刺激用戶感官、吸引用戶興趣以及大量傳達(dá)信息的目的，這類軟件最常見的為各類手機(jī)移動游戲軟件，當(dāng)前已經(jīng)確定這類游戲軟件的UI界面設(shè)計(jì)舒適程度和對用戶的感官刺激程度，會直接決定該游戲今后一段時間內(nèi)的用戶熱度和發(fā)展表現(xiàn)。

2.3 界面適配性

對于界面的適配性來說，要從該軟件發(fā)揮作用、發(fā)揮功能以及作用內(nèi)涵的角度出發(fā)，完成對各類信息的傳達(dá)，并在此基礎(chǔ)上確定采用的整體性設(shè)計(jì)思路。而對于當(dāng)前的移動軟件來說，其功能區(qū)別性較高，除了上文中提及的游戲的軟件采用非簡約型設(shè)計(jì)思想，對于其余一些類型的軟件界面設(shè)計(jì)中，其跳脫傳統(tǒng)設(shè)計(jì)思想的概率越來越高。

在信息傳達(dá)量以及軟件界面設(shè)計(jì)方式的確定中，也可以分析該軟件需要向用戶傳達(dá)的思想和軟件本身涵蓋的信息量，研究軟件界面是否需要提高復(fù)雜度。例如對于中國大學(xué)MOOC軟件的說，其界面就屬于非簡約原型設(shè)計(jì)模式，軟件界面上覆蓋的信息量較高，通過界面上設(shè)置的文字表述了該軟件發(fā)揮的作用和功能，所以從這一設(shè)計(jì)思想和產(chǎn)品表達(dá)上來看，可以確定要能夠提高對移動UI界面的設(shè)計(jì)精度和設(shè)計(jì)科學(xué)性，需要分析軟件的運(yùn)作方式，在此基礎(chǔ)上讓整個軟件和UI界面之間能夠更好銜接。

3 視覺傳達(dá)設(shè)計(jì)在移動UI界面設(shè)計(jì)中的應(yīng)用方法

3.1 版式布局設(shè)計(jì)應(yīng)用

在移動UI界面設(shè)計(jì)中，最基礎(chǔ)也是最重要的工作為版式布局設(shè)計(jì)，在此基礎(chǔ)上才可以完成對后續(xù)內(nèi)容的研究和完善。在本文的分析中已經(jīng)按照軟件的用途實(shí)現(xiàn)對版面布局方式的分類，并且從用戶的心理預(yù)期和心理期待角度出發(fā)，提出版面設(shè)計(jì)的具體操作方式[4]。

對于非簡約性設(shè)計(jì)的版面布局形式來說，界面發(fā)揮作用的最主要形式為能夠?qū)崿F(xiàn)對大量信息的傳達(dá)和能夠刺激用戶的感官，另外與一些特定用戶的審美思想集合。

在具體的設(shè)計(jì)中要嚴(yán)格分析這一軟件發(fā)揮的作用，在此基礎(chǔ)上完成對后續(xù)內(nèi)容的開發(fā)和完善，針對大量信息傳達(dá)內(nèi)容來說，主要包括的軟件類型為教育學(xué)軟件、各類行業(yè)專用軟件等，這類軟件需要具備一定文化基礎(chǔ)的人才能使用，尤其是對于各類專業(yè)性軟件，所以其采用的布局模式可以為較為復(fù)雜性的布局模式。但是對于大部分這類軟件來說，由于具備一定知識量的人員通常對復(fù)雜信息處理效率較高，并且對這類軟件的界面具備信息量追求較低，所以當(dāng)整個設(shè)計(jì)復(fù)雜度過高時，通常情況下，無法實(shí)現(xiàn)對用戶注意力的有效吸引，同時該過程中設(shè)計(jì)人員需要考慮大量的因素，導(dǎo)致整個軟件界面的設(shè)計(jì)成本提升。

對于需要通過界面刺激用戶感官的軟件來說，主要為各類游戲軟件，其設(shè)計(jì)的界面通常為游戲的更新內(nèi)容、游戲的主要玩法等，并且為了進(jìn)一步提高用戶的感官刺激，可以采用動態(tài)圖片的方式完成對整個UI界面的設(shè)計(jì)。

而對于有一些只針對特定用戶審美情境的軟件來說，需要從該軟件發(fā)揮功能的角度出發(fā)，確定整個軟件中涵蓋的信息量和信息內(nèi)容的表述。

對于其余的簡約性軟件設(shè)計(jì)方法來說，最主要的設(shè)計(jì)思想為在確定底色的基礎(chǔ)上，完成對其余因素的增加，通常情況下要配置的底色為單一性顏色，通過這種方式才能夠更好凸顯其實(shí)設(shè)計(jì)內(nèi)容中涵蓋的信息。在當(dāng)前的大量軟件設(shè)計(jì)中，已經(jīng)開始采用這種設(shè)計(jì)思想實(shí)現(xiàn)對各類信息的輸出。

3.2 界面色彩設(shè)計(jì)應(yīng)用

在界面色彩的設(shè)計(jì)中，要考慮整個軟件需要向用戶傳達(dá)的信息，并且要防止采用的顏色搭配模式對用戶的心理情況造成過大影響，另外也要考慮該顏色是否會對用戶的感官產(chǎn)生刺激。

通常情況下，冷色系和暖色系的顏色都可以作為UI設(shè)計(jì)界面的底色，但是也要考慮這一軟件的整體氛圍和整體風(fēng)格。比如對于運(yùn)動類軟件來說，需要讓用戶才能一種沖動性行為，以刺激用戶能夠參與到運(yùn)動項(xiàng)目中，由于冷色系通常會讓用戶產(chǎn)生冷靜行為和冷靜心里，這與整個軟件的功能范圍不協(xié)調(diào)，所以要通過對暖色系的顏色應(yīng)用，讓最終設(shè)計(jì)的移動UI界面和整個軟件的功能協(xié)調(diào)。另外發(fā)現(xiàn)也具有一些特殊類型的軟件，采用色調(diào)顛倒的方式提高用戶的黏度，例如對于keep運(yùn)動軟件來說，其移動UI界面主要采用冷色系，原因在于該軟件強(qiáng)調(diào)一種用戶需要長期堅(jiān)持的觀念，從最終的作用效果上來看，其已經(jīng)屬于提高用戶冷靜程度的范圍，所以采用這種設(shè)計(jì)方法具有很高的科學(xué)性。

3.3 文字線條設(shè)計(jì)應(yīng)用

文字線條應(yīng)用能夠在很大程度上提高整個界面的復(fù)雜性程度，所以要在具體的設(shè)計(jì)工作中考慮這些因素對界面的具體影響效果。

由于文字的作用為完成對所有關(guān)鍵信息的表述和傳達(dá)，所以文字要能夠被凸顯，而凸顯的方式包括文字顏色和底色之間的差別、文字的字號大小和文字的表達(dá)形式，要確保所有的因素都能夠?yàn)樾畔鬟_(dá)過程奠定基礎(chǔ)。比如在各類用戶多年的文字閱讀中，已經(jīng)養(yǎng)成了宋體為信息表達(dá)過程的最佳字體思想，所以通常使用這種字體表述信息[5]。

而對于設(shè)計(jì)的顏色來說，要根據(jù)背景顏色確定文字顏色，比如背景為偏白色的顏色，為提高對比度，文字顏色為黑色即可，需要注意的是，要嚴(yán)格避免出現(xiàn)形如粗體紅色類型的字體，防止對用戶的感官造成過大刺激。

對于線條設(shè)計(jì)，則起到對UI界面的因素鏈接和氛圍烘托作用，要根據(jù)具體的軟件功能確定線條形式、顏色等因素，由于需要提高簡約性，則要降低線條顏色和背景之間的對比度。

3.4 元素符號設(shè)計(jì)應(yīng)用

因素符號的設(shè)計(jì)中，需要考慮的因素為軟件的整體運(yùn)行形式和發(fā)揮的功能，為了能夠讓這一系統(tǒng)更好運(yùn)行，則要考慮的因素為文字的形式、圖形表現(xiàn)形式等，只有在所有的項(xiàng)目符合要求情況下，才可讓整個界面的設(shè)計(jì)科學(xué)性提高。

設(shè)計(jì)的符號因素要從軟件的作用形式考慮，選用正確合理的圖形，從最終的表現(xiàn)形式來看，當(dāng)前的設(shè)計(jì)方法為，對于商標(biāo)等信息來說，通常不做出變更，需要對軟件中具備信息的分析，合理確定其余各類信息的傳達(dá)形式。

4 結(jié)論

綜上所述，在視覺傳達(dá)設(shè)計(jì)中，需要考慮的因素包括版式布局設(shè)計(jì)、文字線條設(shè)計(jì)、色彩視圖設(shè)計(jì)和融入因素設(shè)計(jì)，移動UI界面的設(shè)計(jì)過程要研究的項(xiàng)目包括界面的簡潔性、搭配合理性等，要通過對相關(guān)軟件需要涵蓋信息的分析和研究，完成對整個界面中所有項(xiàng)目的具體深入了解，最終制定出相應(yīng)的設(shè)計(jì)方案。

參考文獻(xiàn)：

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

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

[3] 陶少奇.視覺傳達(dá)設(shè)計(jì)在移動UI設(shè)計(jì)中的運(yùn)用初探[J].新聞研究導(dǎo)刊，2019，10（04）：172.

[4] 韓婷婷.移動互聯(lián)網(wǎng)時代視覺傳達(dá)設(shè)計(jì)的方法和表現(xiàn)特性[J].工業(yè)設(shè)計(jì)，2019（02）：145-146.

[5] 許琛.UI界面設(shè)計(jì)在視覺傳達(dá)設(shè)計(jì)專業(yè)教學(xué)中的應(yīng)用研究[J].科教導(dǎo)刊（上旬刊），2016（12）：98-99.

【通聯(lián)編輯：光文玲】