基于圖形在UI界面視覺(jué)傳達(dá)中的創(chuàng)新與應(yīng)用的研究

景學(xué)紅 尚會(huì)斌 榮江

（新疆政法學(xué)院 新疆維吾爾自治區(qū)圖木舒克市 843800）

就UI 設(shè)計(jì)中的圖形視覺(jué)元素進(jìn)行分析，其目前在我國(guó)已經(jīng)形成一門獨(dú)立學(xué)科。在不同領(lǐng)域，使用的方法以及注意因素均有不同。新疆政法學(xué)院校園導(dǎo)航界面設(shè)計(jì)基于網(wǎng)站自身的實(shí)際角度出發(fā)，依照視覺(jué)傳達(dá)設(shè)計(jì)的相關(guān)知識(shí)點(diǎn)，形成所有設(shè)計(jì)項(xiàng)目的全面融合。針對(duì)于新疆政法學(xué)院校園導(dǎo)航界面，要保證界面設(shè)計(jì)美觀、實(shí)用。但導(dǎo)航界面占用空間過(guò)大，也會(huì)降低軟件以及網(wǎng)站的響應(yīng)速度。因此，在保障能夠進(jìn)行有效視覺(jué)傳達(dá)的基礎(chǔ)上，對(duì)新疆政法學(xué)院校園導(dǎo)航界面進(jìn)行全新設(shè)計(jì)，將具有非常重要的現(xiàn)實(shí)意義。

1 視覺(jué)傳達(dá)設(shè)計(jì)概述分析

1.1 視覺(jué)傳達(dá)——布局

針對(duì)于視覺(jué)設(shè)計(jì)而言，為了使視覺(jué)設(shè)計(jì)的有效性能夠得到更多認(rèn)可。本文針對(duì)移動(dòng)設(shè)備中的APP、網(wǎng)站為例進(jìn)行討論。目前APP 以及網(wǎng)站受智能設(shè)備空間的限制，因此需要針對(duì)于整個(gè)版面的布局以及色彩等進(jìn)行有效的搭配，以提升界面的美觀性以及實(shí)用性，吸引使用者能夠主動(dòng)的進(jìn)行操作，完成交互。其中，在版式布局設(shè)計(jì)中，目前我國(guó)開(kāi)發(fā)了全新的應(yīng)用方式，并將其作為多分段的分布式布局以及整體式布局兩種。在分布式布局中，其界面分為不同層次，通過(guò)相關(guān)界面，可以設(shè)置顏色強(qiáng)度、漸變的圖片以及線條等，增加視覺(jué)交互的特性，并提升界面涵蓋的信息數(shù)量。在新疆政法學(xué)院校園導(dǎo)航界面設(shè)計(jì)中，此種設(shè)計(jì)方法可以保障與移動(dòng)APP 的內(nèi)容銜接，以提升對(duì)用戶的感官的視覺(jué)融合。在視覺(jué)傳達(dá)設(shè)計(jì)時(shí)，需要考慮手機(jī)屏幕尺寸，若過(guò)于注重信息量的增加，將會(huì)導(dǎo)致整體空間較為擁擠。而在整體式布局當(dāng)中，新疆政法學(xué)院校園導(dǎo)航界面除對(duì)信息表達(dá)進(jìn)行有效的重視以及傳遞外，更注重用戶的使用體驗(yàn)以及交互感覺(jué)，凸顯出關(guān)鍵信息，隱藏不必要信息。通過(guò)相關(guān)連接，將剩余信息展示，凸顯自身特色。通過(guò)簡(jiǎn)潔、美觀、大方的布局，提升使用者的交互體驗(yàn)。避免了國(guó)際廠商將所有信息集中至統(tǒng)一界面，導(dǎo)致消費(fèi)者出現(xiàn)思路混亂的問(wèn)題。

圖1：界面結(jié)構(gòu)布局

界面布局和層次結(jié)構(gòu)統(tǒng)稱為界面結(jié)構(gòu)布局。在層次結(jié)構(gòu)中又分為深型結(jié)構(gòu)和寬型結(jié)構(gòu)。層級(jí)劃分較多的是深型結(jié)構(gòu)，界面復(fù)雜繁瑣，用戶在使用此結(jié)構(gòu)會(huì)消耗很多時(shí)間用來(lái)查找所需的功能，一般不建議采用此結(jié)構(gòu)。而寬型結(jié)構(gòu)相對(duì)簡(jiǎn)潔便于用戶容易記憶和快速操作。新疆政法學(xué)院校園導(dǎo)航界面布局主要包括界面的菜單導(dǎo)航、布局排列分組的設(shè)計(jì)。這樣的設(shè)計(jì)不僅能提升校內(nèi)校外人員在使用過(guò)程中的視覺(jué)體驗(yàn),同時(shí)還能提高他們的操作體驗(yàn)。

1.2 視覺(jué)傳達(dá)——色彩

色彩是校園導(dǎo)航界面呈現(xiàn)的最重要一項(xiàng)因素。柔和的色彩不僅能夠突出重點(diǎn)，同時(shí)更可以成為整個(gè)界面的重點(diǎn)因素。就目前搭配的色彩方案而言，其手機(jī)移動(dòng)軟件以及網(wǎng)站需要將自身的內(nèi)涵發(fā)揮出最大作用，并對(duì)用戶展現(xiàn)出各自的特點(diǎn)。為了提升用戶的觀感，在色彩搭配中，其底色需要完成有效選擇。底色不僅能夠保障APP以及網(wǎng)站發(fā)揮出其自身的內(nèi)涵，同時(shí)也可以通過(guò)良好的底色配色，降低消費(fèi)者的色彩刺激，以保障能夠被更多用戶接受。

在設(shè)計(jì)過(guò)程中，需要通過(guò)多種色彩選擇方案，完成新疆政法學(xué)院校園導(dǎo)航界面色彩的簡(jiǎn)約設(shè)計(jì)。在智能手機(jī)普及的過(guò)程中，我們對(duì)新疆政法學(xué)院校園導(dǎo)航界面設(shè)計(jì)也提出了更多的要求。最常見(jiàn)的色彩設(shè)計(jì)為純色以及漸變色。純色指在UI 界面設(shè)計(jì)中，色彩使用純黑、純白等進(jìn)行設(shè)計(jì)。如在純黑界面放置純白色文字，而在純白界面放置純黑色文字，并通過(guò)文字之間的不同樣式配比，達(dá)到特殊效果（在各大奢侈品品牌中較為常見(jiàn)）。而在漸變色設(shè)計(jì)中，可以通過(guò)柔和的界面，通過(guò)色彩的自然過(guò)渡，形成更加繽紛多樣的界面（常見(jiàn)于美妝以及電子產(chǎn)品）。

我國(guó)以往的UI 界面設(shè)計(jì)為了突出醒目特征，因此在顏色選擇上，多使用較為明顯且激烈的顏色，如明黃、明綠、鮮紅等。這些色彩在用戶使用時(shí)，將會(huì)對(duì)用戶的眼球造成不良影響。很多用戶在使用時(shí)，受這種顏色的刺激以及相關(guān)廠商對(duì)此顏色做出的閃爍處理感到頭暈?zāi)垦?。因此，?dǎo)致整體使用性不高。而在新疆政法學(xué)院校園導(dǎo)航界面設(shè)計(jì)中，通過(guò)全新的純色以及漸變色，可以使整個(gè)界面更為高端、美觀，促使消費(fèi)者主動(dòng)的在此界面中進(jìn)行操作。

另外，界面顏色的呈現(xiàn)通常使用的都是光源色。根據(jù)光源色的成色原理，我們可以了解到，紅光、綠光、藍(lán)光等比例混合會(huì)形成白光，不同比例混合即可形成自然界的各種顏色。由于光混合后，形成的新色光在亮度和明度上比混合前的色光高，因此，在顏色搭配上要考慮到顏色亮度對(duì)整個(gè)導(dǎo)航界面帶來(lái)的視覺(jué)美感。如果我們?cè)谛陆▽W(xué)院校園導(dǎo)航界面中大部分使用了明度高的顏色，在長(zhǎng)時(shí)間觀看時(shí)，會(huì)給人帶來(lái)煩躁的感覺(jué)，甚至人的眼睛也會(huì)在高明度色光的長(zhǎng)時(shí)間刺激受到傷害。

如果界面中大面積的使用了低明度的顏色，會(huì)使校園導(dǎo)航界面看起來(lái)沉悶，給人帶來(lái)不愉快的感覺(jué)。因此，在做校園導(dǎo)航界面設(shè)計(jì)時(shí)，我們注重了注色彩明度的搭配。即：低明度和高明度搭配。顏色明度高低巧妙搭配會(huì)在視覺(jué)上帶來(lái)一定的層次感，也會(huì)在某一點(diǎn)為用戶視覺(jué)上帶來(lái)興奮感或沉靜感。

色彩搭配,不僅與顏色的冷暖感覺(jué)有關(guān),也要考慮顏色的面積,做到雅而不俗,明快大方。顏色具有的冷暖的感覺(jué)，冷暖感主要反應(yīng)在顏色的色相上。一般來(lái)說(shuō)紅、黃、橙等色相給人一種前進(jìn)感，讓人覺(jué)得熱血沸騰，就像是冬夜里的火把、三九天的太陽(yáng)一樣溫暖，稱為暖色。青色、藍(lán)色、綠色會(huì)讓人聯(lián)想到高遠(yuǎn)天空、深邃的海洋、廣袤的草地、陰影處的冰雪，給人一種清冷的感覺(jué)，所以稱為冷色。

大面積的暖色調(diào)或者大面積的冷色調(diào)使用在視覺(jué)傳達(dá)上都會(huì)給用戶帶來(lái)情感上的波動(dòng)。比如，在設(shè)計(jì)校園導(dǎo)航界面時(shí)，如果采用大面積的紅色，長(zhǎng)時(shí)間觀看后用戶的心理會(huì)從最初的喜慶、興奮慢慢變?yōu)闊┰辍嵟?。在顏色搭配?一般暖色+暖色是最好的搭配,但是只要處理好暖色和間色的顏色面積，即可以保持畫面的平衡，又能突出設(shè)計(jì)效果的立體感。

1.3 視覺(jué)傳達(dá)——線條以及符號(hào)

在界面設(shè)計(jì)中，UI 需要對(duì)文字的線條進(jìn)行有效設(shè)計(jì)。通過(guò)文字線條的處理，使用戶能夠自然的找到軟件中的涵蓋信息，并通過(guò)文字線條的應(yīng)用，對(duì)相關(guān)因素進(jìn)行有效融合。在設(shè)計(jì)時(shí)，保障用戶可以在第一時(shí)間發(fā)現(xiàn)界面所具備的信息量以及內(nèi)容，以促使用戶能夠自主的根據(jù)需求，決定是否使用相關(guān)的軟件以及網(wǎng)站文字線條設(shè)計(jì)。需要注重整體信息的表達(dá)方法，例如以文字構(gòu)成以及線條的組成形式為主體，使整個(gè)項(xiàng)目得到升華，保障整體設(shè)計(jì)的專業(yè)性以及有效性。在對(duì)文字設(shè)計(jì)中，需要具有專業(yè)的文案撰寫人員參與，對(duì)字體以及文案搭配、字體顏色、符號(hào)等多種因素合力完成。并在搭配合理情況下，保障用戶能夠閱讀文字，便可以抓取整個(gè)信息重點(diǎn)。

而在符號(hào)中，通過(guò)字母、相關(guān)圖案等因素，均可以將其歸納為符號(hào)。符號(hào)對(duì)新疆政法學(xué)院界面設(shè)計(jì)起到了非常重要的作用，能夠與導(dǎo)航的運(yùn)行方式以及內(nèi)涵進(jìn)行銜接。并通過(guò)此種方法，以保障設(shè)計(jì)出的界面能夠被更多的用戶所接受。針對(duì)不同類型功能的界面而言，其元素符號(hào)類型也具有不同。在圖形元素中，最常用的圖形元素為抽象圖形以及圓形等。此類圖形能夠更好的與用戶的心理進(jìn)行契合，并降低信息傳達(dá)中的攻擊性因素。

文字作為特殊的符號(hào)，在視覺(jué)傳達(dá)時(shí)有特殊的意義。為此，在UI 界面設(shè)計(jì)時(shí)，一定要考慮到文字的三個(gè)特點(diǎn)：

（1）文字的字體。漢字有多種字體，其中用的最多的就是黑體系列、宋體系列、楷體系列、圓體系列，其次隸書、綜藝、倩體也有很大的使用量；

（2）字體的大小。文字的大小主要是指文字的字號(hào)。一般來(lái)說(shuō)標(biāo)題字的字號(hào)大于副標(biāo)題、大于正文、大于注釋；

（3）文字的顏色。顏色的使用在“視覺(jué)傳達(dá)—色彩”中已經(jīng)詳細(xì)做了研究。通過(guò)文獻(xiàn)查閱后整理的資料信息，以及日常工作設(shè)計(jì)中積累的經(jīng)驗(yàn)，結(jié)合自己的觀點(diǎn)，對(duì)這三小點(diǎn)的內(nèi)容進(jìn)行梳理。一般情況下，黑體字作為標(biāo)題使用，使用比較鮮艷或者比較厚中的顏色，目的是為了使標(biāo)題更加的醒目，從而引起讀者的注意；在新疆政法學(xué)院導(dǎo)航的界面正文我們使用宋體系列，是因?yàn)樗误w系列的字形秀美、纖細(xì)，字形筆畫排布舒朗，這樣的文字排版會(huì)給人一種美感和協(xié)調(diào)，不會(huì)為用戶帶來(lái)不舒服的情緒。為了使版面設(shè)計(jì)更為豐富我們也可以使用隸書、倩體做裝飾。

2 視覺(jué)傳達(dá)因素在UI界面設(shè)計(jì)中的具體使用方法

2.1 版式布局設(shè)計(jì)

在版式布局設(shè)計(jì)中，作為最基礎(chǔ)重要的工作，版式布局需要研究整個(gè)展示的內(nèi)容，并進(jìn)行完善。在分析中，可以按照軟件的實(shí)際用途，對(duì)版式布局的方法以及版式布局的應(yīng)用從用戶角度出發(fā)，提出版式設(shè)計(jì)的具體操作方法。針對(duì)于設(shè)計(jì)過(guò)程中的信息模式而言，需要完成后續(xù)內(nèi)容的完善，并針對(duì)大量信息進(jìn)行有效傳遞。

例如，針對(duì)教育領(lǐng)域，在版式設(shè)計(jì)中，需要具備一定文化基礎(chǔ)。因此，在布局采用時(shí)，可以采用復(fù)雜性的布局方法進(jìn)行設(shè)定，將各學(xué)科進(jìn)行統(tǒng)一融合，以保障學(xué)生可以獲得最直觀的操作體驗(yàn)。而對(duì)于各專業(yè)性軟件，則可以借鑒簡(jiǎn)潔式處理模式。因各專業(yè)軟件專業(yè)人員在使用過(guò)程中，需要進(jìn)入沉浸式使用。過(guò)于龐大的信息量會(huì)干擾相關(guān)人員的正確判斷以及發(fā)揮，干擾效率。因此，需要突出重點(diǎn)，隱藏不必要信息，保障相關(guān)使用者能夠有效的獲取數(shù)據(jù)。

2.2 文字線條設(shè)計(jì)

在文字線條應(yīng)用中，通過(guò)文字線條，可以保障提升整個(gè)校園導(dǎo)航界面的復(fù)雜程度。在設(shè)計(jì)工作中，考慮相關(guān)因素，對(duì)具體界面的影響效果進(jìn)行有效優(yōu)化。文字作用非常重要，文字可以實(shí)現(xiàn)關(guān)鍵信息的轉(zhuǎn)述以及表達(dá)，以保障相關(guān)信息能夠凸顯。因此，需要對(duì)文字顏色以及文字色之間進(jìn)行差別設(shè)定，根據(jù)文字的大小以及表達(dá)形式，以確保所有因素能夠在傳達(dá)過(guò)程中，奠定必要基礎(chǔ)。在文字閱讀中，其可以以信息表達(dá)過(guò)程中的“最佳字體”思想為例。使用信息表述，對(duì)于文字設(shè)計(jì)顏色而言，必須根據(jù)背景顏色確定文字顏色。

例如背景為白色，文字必須以黑色為主，提高對(duì)比度。需要注意的是，在純白色的底色中，需要避免大紅、大綠、大黃等激烈顏色，以避免對(duì)用戶感官造成過(guò)大刺激。在線條設(shè)計(jì)中，其線條可以起到導(dǎo)航界面各元素之間的連接以及氛圍烘托，因此需要根據(jù)具體的使用軟件，明確線條的整個(gè)使用形式以及顏色，提高線條以及背景之間的對(duì)比度。

中華文明源遠(yuǎn)流長(zhǎng)，在人類文明歷史的發(fā)展過(guò)程中文字起著至關(guān)重要的作用。為了突出界面標(biāo)志的簡(jiǎn)潔和易解性，在導(dǎo)航界面圖標(biāo)設(shè)計(jì)時(shí)，我們把某個(gè)漢字或者某個(gè)字母圖形化。如圖2所示：在新疆政法學(xué)院校園導(dǎo)航UI 界面設(shè)計(jì)時(shí)，我們使用了“圖書”繁體字體效果，然后有機(jī)的藝術(shù)改造，最后作為“圖書館”界面標(biāo)識(shí)。這種設(shè)計(jì)簡(jiǎn)潔易懂，也能達(dá)到文字圖形化要求的簡(jiǎn)約美。漢字設(shè)計(jì)具有文化的傳承性和延續(xù)性，在不同的時(shí)期以不同的文字形象來(lái)表達(dá)對(duì)事物的概括力與表現(xiàn)力。文字圖形化，并不是隨意的取舍，而在“取其精華去其糟粕”后進(jìn)行藝術(shù)上、應(yīng)用上的重構(gòu)。在重構(gòu)時(shí)必須做到以下幾點(diǎn)：

圖2：“圖書”繁體字體效果

（1）重構(gòu)后標(biāo)識(shí)的識(shí)別性。在文字設(shè)計(jì)時(shí)要明確設(shè)計(jì)的主題、強(qiáng)化圖形化特征，更要注意設(shè)計(jì)的獨(dú)特性，讓用戶有一定的記憶點(diǎn)；

（2）表義的準(zhǔn)確性。如果圖形化后的標(biāo)識(shí)含義不準(zhǔn)確，則圖形化設(shè)計(jì)沒(méi)有任何意義，在一定程度上還會(huì)起到反向作用；

（3）圖形化后的標(biāo)識(shí)具備時(shí)代美感。在科技日新月異的今天，人們對(duì)某一件的事務(wù)的認(rèn)識(shí)也在不斷的提高。文字圖形化設(shè)計(jì)要把握文字本身具有的形式美感，還要對(duì)文字有一定的想象美感和組合美感，握文字的設(shè)計(jì)規(guī)律和圖形化設(shè)計(jì)方式，根據(jù)時(shí)代的特性創(chuàng)作出新時(shí)代的作品。

2.3 元素符號(hào)設(shè)計(jì)

在元素符號(hào)設(shè)計(jì)中，考慮到整體元素符號(hào)的使用需要為軟件的運(yùn)行發(fā)揮自身價(jià)值。因此，各元素符號(hào)的整體設(shè)計(jì)方法具有一定差異。為了保障元素符號(hào)的組成形式能夠符合項(xiàng)目需求，使整個(gè)界面的設(shè)計(jì)具有明顯的科學(xué)性以及有效性。在設(shè)計(jì)符號(hào)因素過(guò)程中，需要以軟件的作用完成考慮，選擇正確且合理的圖形。就最終的表現(xiàn)形式而言，在設(shè)計(jì)方法中，對(duì)商標(biāo)等信息通常做出一定形式的變更，并對(duì)軟件中的具體模式進(jìn)行分析，合理的保障信息有效傳遞。

例如，在元素符號(hào)設(shè)計(jì)中，可以將網(wǎng)站的某些連接做成元素符號(hào)的形式。在針對(duì)用戶反饋界面，很多網(wǎng)站會(huì)提出良好、一般、待改進(jìn)等三個(gè)選項(xiàng)，以保障用戶通過(guò)選擇，能夠?qū)W(wǎng)站的建設(shè)提出可行性建議。在UI 設(shè)計(jì)時(shí)，可以將良好、一般、待改進(jìn)設(shè)置為不同情緒的表情。如笑臉以及哭臉等，通過(guò)符號(hào)的應(yīng)用，不僅使用戶能夠明確該選擇內(nèi)部所涵蓋的意義，同時(shí)更可以提升網(wǎng)站的趣味性以及交互性。

2.4 底圖顯示設(shè)計(jì)

目前，導(dǎo)航界面的底圖顯示一般都是二維矢量圖顯示，二維圖雖然注重地理對(duì)象之間的位置特征和相互關(guān)系，占用的內(nèi)存較小，用戶在刷新頁(yè)面時(shí)速度較快，但是二維圖在設(shè)計(jì)制作時(shí)往往會(huì)舍棄一些圖像對(duì)象中一些與項(xiàng)目有關(guān)聯(lián)不大的對(duì)象信息，忽略很多圖像細(xì)節(jié)層次，只保留了圖像的骨架構(gòu)成部分，形式上做成了導(dǎo)航地圖的地理表象。

由于二維圖忽視了物體的很多細(xì)節(jié)，在表達(dá)方法上,矢量底圖過(guò)于簡(jiǎn)單明了，而使該地區(qū)的新進(jìn)用戶在導(dǎo)航過(guò)程中目的地的建筑或物體產(chǎn)生一定的疑慮。在新疆政法學(xué)院的地理位置導(dǎo)航系統(tǒng)中，我們采用了三維平面靜態(tài)圖形。三維平面靜態(tài)圖與矢量底圖相比,具有更為豐富的物體細(xì)節(jié),能夠更清楚地表現(xiàn)建筑、學(xué)校、醫(yī)院等場(chǎng)合的特征，使用后更加直觀清晰有效地辨認(rèn)地理位置信息。由于，圖像幾乎包含了物體的所有位置和細(xì)膩，所以它所含的信息量極為豐富,容易讓人識(shí)別,極具表現(xiàn)力。在色彩表達(dá)上,圖像底圖色調(diào)變化豐富,圖面負(fù)載量相當(dāng)大。采用的色彩主要是客觀、準(zhǔn)確、協(xié)調(diào)地表現(xiàn)地表的自然色彩,同時(shí)考慮要素表示的清晰性和整體色彩的協(xié)調(diào)性。本項(xiàng)目設(shè)計(jì)研發(fā)的新疆政法學(xué)院校園導(dǎo)航的界面如圖3所示。

圖3：校園導(dǎo)航界面

3 結(jié)束語(yǔ)

綜上所述，新疆政法學(xué)院的校園導(dǎo)航界面設(shè)計(jì)在視覺(jué)傳達(dá)設(shè)計(jì)中，重注整個(gè)布局的色彩以及線條的融入。在設(shè)計(jì)因素中，注重了項(xiàng)目的整個(gè)使用特性。通過(guò)簡(jiǎn)潔、美觀、大方的搭配，針對(duì)所需要涵蓋的信息進(jìn)行分析研究，最終使整個(gè)界面中的項(xiàng)目能夠?qū)崿F(xiàn)具體的深入了解，形成對(duì)應(yīng)方案。