UI設(shè)計(jì)中的視覺表現(xiàn)

潘寧

（德州職業(yè)技術(shù)學(xué)院 山東省德州市 253034）

在21 世紀(jì)，各種先進(jìn)的技術(shù)層出不窮，不光是為了滿足社會(huì)群眾的生活需求，也是為了獲得一定的商業(yè)利益。UI 設(shè)計(jì)具有較強(qiáng)的互動(dòng)性，通過操作軟件來發(fā)揮軟件的應(yīng)用價(jià)值，實(shí)用功能強(qiáng)大。高水平的UI 設(shè)計(jì)可以在最大程度上提高軟件的檔次和品位，使得軟件更加具有個(gè)性，滿足用戶多元化需求。因此，從實(shí)際角度出發(fā)，分析UI 設(shè)計(jì)的基本概念、包含元素、視覺表現(xiàn)對(duì)于有關(guān)設(shè)計(jì)工作的優(yōu)化與完善是十分必要的。

1 UI設(shè)計(jì)的基本概念

1.1 UI設(shè)計(jì)概念

UI 設(shè)計(jì)主要是指用戶界面，是針對(duì)軟件進(jìn)行操作，借此來提高軟件的應(yīng)用價(jià)值，具有較強(qiáng)的實(shí)用性，能夠從各個(gè)層面對(duì)軟件進(jìn)行調(diào)整、設(shè)計(jì)，使得用戶能夠與軟件之間形成良好互動(dòng)，提高界面的美觀程度，而一個(gè)高水平、高質(zhì)量的UI 設(shè)計(jì)更是可以提升軟件的品位，使得單一的軟件更加具有個(gè)性，化繁為簡(jiǎn)，為用戶帶來更為高質(zhì)量的享受與反饋舒適程度。目前，UI 設(shè)計(jì)已經(jīng)朝著更為專業(yè)化、標(biāo)準(zhǔn)化、多樣化的方向發(fā)展，為軟件提供了精準(zhǔn)定位，涉及范圍也更加廣泛，要求UI 設(shè)計(jì)師必須要不斷提高自身的學(xué)術(shù)知識(shí)與水平，提高個(gè)人技能與綜合水平，這樣才能夠高效、高質(zhì)量為按成UI 設(shè)計(jì)，提高界面的觀賞性與實(shí)用性。需要注意的是，UI 設(shè)計(jì)并不是單純的指代界面美化設(shè)計(jì)這一部分設(shè)計(jì)工序，同時(shí)還必須要包括前期的深度用戶研究、中期交互設(shè)計(jì)部分。其中，前期的客戶研究是UI 設(shè)計(jì)開展的首要前提，只有在了解用戶將的各種習(xí)慣以后，才能夠深度發(fā)掘用戶對(duì)軟件功能的訴求，進(jìn)而設(shè)計(jì)出用戶更能夠接受的軟件界面。在此期間，設(shè)計(jì)者應(yīng)避免融入個(gè)人的主觀意識(shí)，而是要從用戶角度來深度探討產(chǎn)品，是一種客觀行為。中期交互設(shè)計(jì)的主要方向，是做減法，在了解用戶基礎(chǔ)之上將主要功能輸出，而后經(jīng)過簡(jiǎn)單梳理形成交互框架，對(duì)交互的原型與規(guī)范進(jìn)行確定，為后續(xù)產(chǎn)品上架并更好的被用戶接受創(chuàng)造有利條件[1]。

1.2 UI設(shè)計(jì)內(nèi)容

若是從現(xiàn)階段UI 設(shè)計(jì)的實(shí)際情況來看，整體設(shè)計(jì)主要包含了三個(gè)部分內(nèi)容：

1.2.1 界面美工

其主要目的，是為了對(duì)軟件的界面、外觀進(jìn)行美化，使得UI界面能夠傳遞更多有效的信息，也可以理解為是為了更有效的傳遞信息，屬于一個(gè)人機(jī)相互操作的平臺(tái)，設(shè)計(jì)者可以利用人機(jī)交互來實(shí)現(xiàn)對(duì)界面美工的操作與整體設(shè)計(jì)，使得界面效果能夠達(dá)到預(yù)期狀態(tài)[2]。

1.2.2 人與界面

由于UI 設(shè)計(jì)本身涉及到的范圍就十分廣泛因此UI 設(shè)計(jì)者必須要熟悉軟件的操作過程，且對(duì)各個(gè)方面的知識(shí)內(nèi)容、學(xué)科也有著一定的了解，在接受編碼前完成高效設(shè)計(jì)，保證UI 設(shè)計(jì)能夠達(dá)到預(yù)期規(guī)范要求。

1.2.3 用戶測(cè)試

在設(shè)計(jì)完成以后，UI 設(shè)計(jì)者還需要針對(duì)軟件質(zhì)量、效果等各個(gè)方面進(jìn)行科學(xué)測(cè)試，對(duì)于可能產(chǎn)生的一系列問題予以合理化解決，減少軟件在進(jìn)入市場(chǎng)、用戶應(yīng)用的過程中產(chǎn)生較大的失誤率，為用戶帶來更為良好的感官與體驗(yàn)。

2 UI設(shè)計(jì)中包含的視覺元素

2.1 文字元素

文字作為信息傳遞的重要渠道，是UI 設(shè)計(jì)中最為主要也是極為重要的一部分內(nèi)容，使得信息傳遞更為直接。通常情況下，文字元素主要是由兩個(gè)部分構(gòu)成的，第一部分是系統(tǒng)默認(rèn)的字體元素，與復(fù)雜樣式字體相比，可以較好的減少用戶在視覺上產(chǎn)生的負(fù)擔(dān)，而為了避免大篇幅系統(tǒng)默認(rèn)字體使受眾產(chǎn)生的審美疲勞，設(shè)計(jì)者需要從字體大小、樣式、顏色、層次等對(duì)字體進(jìn)行排版，借此提高字體的藝術(shù)性。第二部分，在UI 界面設(shè)計(jì)中，為了更好的展現(xiàn)出產(chǎn)品本身的特點(diǎn)與個(gè)性，特殊字體設(shè)計(jì)時(shí)必不可少的，而為了提高展示效果，設(shè)計(jì)者往往會(huì)將文字轉(zhuǎn)化為圖片，以圖片的方式置入，來提高頁面設(shè)計(jì)的文字元素效果[3]。

2.2 圖形元素

圖形也是UI 設(shè)計(jì)中所包含的重要元素，是通過“圖”與“形”的相互組合，來構(gòu)成界面，包括功能性圖標(biāo)元素與裝飾性圖形元素。其中功能性圖標(biāo)元素主要是指一些按鈕、圖標(biāo)的應(yīng)用，由點(diǎn)、線、面、文字等構(gòu)成，能夠更為直觀的傳遞信息，裝飾性圖形元素主要是指按照一定形式法則構(gòu)成的一些裝飾元素，達(dá)到和諧美的最終目的，是心理要素的一種較好詮釋，同時(shí)也在一定程度上揭示了抽象性思維，實(shí)現(xiàn)了聯(lián)想與認(rèn)知的相互結(jié)合。一般情況下裝飾圖形元素的應(yīng)用往往應(yīng)用在最不起眼的地方，雖然不是主要部分，但是對(duì)于整個(gè)界面設(shè)計(jì)的美觀性又有著重要的輔助作用。

2.3 圖像元素

從像素畫風(fēng)格開始以后，UI 界面就往往會(huì)受到技術(shù)條件方面的制約，只能夠合理化應(yīng)用一些簡(jiǎn)單的平面布局來完成各項(xiàng)工作。隨著我國科技的快速發(fā)展，現(xiàn)如今UI 技術(shù)水平已經(jīng)有了較大程度的提升，成為UI 設(shè)計(jì)中一種最為主要的展示形式，能夠?qū)⑿畔⑸鷦?dòng)、形象的傳遞給用戶。目前，最為常見的UI 設(shè)計(jì)圖像元素是靜態(tài)圖像與動(dòng)態(tài)圖像兩種不同類型。靜態(tài)圖像元素是十分常見的，主要格式為JPEG，擴(kuò)展名稱為.jpg 或者是.jpeg，這種格式包含了上百萬種元素，可以將商品本身信息、特點(diǎn)、各個(gè)細(xì)節(jié)等更為具象的呈現(xiàn)出來。動(dòng)態(tài)圖形的格式往往會(huì)涉及到GIF、PNG、SVG 三種格式，其中GIF 的動(dòng)態(tài)格式圖片具有一定的缺點(diǎn)，會(huì)受到256 色存儲(chǔ)方面的限制，無法將色彩豐富的畫面充分還原，較長(zhǎng)應(yīng)用于低分表率的頁面編輯。PNG 圖像格式在網(wǎng)頁設(shè)計(jì)中應(yīng)用最為廣泛，顏色多達(dá)上百萬中，屬于一種新興網(wǎng)絡(luò)圖像格式，通長(zhǎng)是會(huì)經(jīng)過無損壓縮方法，形成畫質(zhì)同等的縮小文件內(nèi)存，是主流界面制作工具的默認(rèn)儲(chǔ)存格式。SVG 可以得到縮放矢量圖形的目的，以文本格式來儲(chǔ)存圖像，不受到物理分辨率的影響與限制[4]。

2.4 色彩元素

色彩是人們視覺的第一觀感，能夠帶給人不一樣的視覺沖擊，并給人留下較為深刻的印象。因此，UI 設(shè)計(jì)者必須要結(jié)合實(shí)際情況，在界面設(shè)計(jì)中合理的運(yùn)用色彩元素進(jìn)行搭配，使得界面呈現(xiàn)出更為豐富多彩之感。一方面，UI 設(shè)計(jì)作為一門數(shù)字藝術(shù)學(xué)科，主要特點(diǎn)時(shí)借助自發(fā)光電子設(shè)備顯示器來展現(xiàn)出最終的效果，需要設(shè)計(jì)者根據(jù)設(shè)計(jì)需求，實(shí)現(xiàn)色彩數(shù)字化，保證色彩元素融入科學(xué)。另一方面，為了更進(jìn)一步增強(qiáng)UI 設(shè)計(jì)色彩對(duì)于用戶所產(chǎn)生的視覺沖擊，在針對(duì)顏色元素進(jìn)行合理化設(shè)計(jì)時(shí)，必須要對(duì)主體色調(diào)進(jìn)行明確，使得軟件界面、產(chǎn)品信息等都能夠直觀傳遞，并給用戶一種耳目一新的感覺，增強(qiáng)視覺表現(xiàn)效果。

3 UI設(shè)計(jì)中的視覺表現(xiàn)分析

基于上述分析，在UI 設(shè)計(jì)中視覺表現(xiàn)主要是會(huì)受到文字、圖形、圖像、色彩元素組合方面的影響而產(chǎn)生不同的效果，為了在最大程度上滿足用戶的多元需求，在UI 設(shè)計(jì)視覺表達(dá)方面，應(yīng)該滿足以下幾項(xiàng)內(nèi)容：

3.1 視覺交互活動(dòng)必須具有交叉性

UI 設(shè)計(jì)主要是作為一種與用戶之間形成良好互動(dòng)狀態(tài)而存在的，合理化設(shè)計(jì)能夠?yàn)橛脩魩砀鼮榱己玫捏w驗(yàn)、感受，使得軟件本身能夠更好的達(dá)到客戶要求。因此，設(shè)計(jì)師在進(jìn)行UI 設(shè)計(jì)的過程中，必須要注重界面與用戶之間到底能不能形成良好的交互性關(guān)系。首先，在實(shí)現(xiàn)應(yīng)該對(duì)有關(guān)設(shè)計(jì)內(nèi)容進(jìn)行充分了解，而在這一部分設(shè)計(jì)任務(wù)完成以后，還需要對(duì)設(shè)計(jì)本身產(chǎn)生的結(jié)果與作用進(jìn)行深層次分析，獲得精準(zhǔn)數(shù)據(jù)與信息，并對(duì)下一步要完成的設(shè)計(jì)任務(wù)進(jìn)行確認(rèn)，做好一系列的鋪墊，從而達(dá)到較好的效果。其次，保證UI 設(shè)計(jì)能夠起到較好的視覺效果，滿足用戶的多元化需求。由于人與事物在接觸的過程中，能夠獲得相應(yīng)的信息，而具體感知主要是來自于兩個(gè)方面，即行為感與物感，是除了聽覺、觸覺以外獲得感知的有效路徑，是一種通過視覺來獲得具體感知。從這一層面考慮，設(shè)計(jì)師就必須要結(jié)合軟件本身的特點(diǎn)，完善UI 設(shè)計(jì)，以保證界面中的所有信息，都能夠被用戶更好的接收、了解、處理，提升用戶的感知能力。

3.2 交互行為中的視覺需求

在進(jìn)行UI 設(shè)計(jì)的過程中，設(shè)計(jì)師所有的涉及行為，都是需要CUD 來作為支撐的，CUD 的有效應(yīng)用，能夠?qū)鹘y(tǒng)的思維邏輯進(jìn)行更為細(xì)致的分析，為深層次了解用戶需求創(chuàng)造了有利條件。這也就要求設(shè)計(jì)師在進(jìn)行UI 設(shè)計(jì)的過程中，應(yīng)該盡可能的以用戶的思維習(xí)慣為導(dǎo)向，然后對(duì)界面設(shè)計(jì)的整體思路、布局進(jìn)行創(chuàng)新，使得大眾用戶的需求，能夠在UI 設(shè)計(jì)中加以充分體現(xiàn)。在設(shè)計(jì)期間，內(nèi)部視覺效果的特殊性思維，有助于設(shè)計(jì)者更好的發(fā)現(xiàn)用戶潛在的視覺因素，在了解這一點(diǎn)以后設(shè)計(jì)師就可以結(jié)合用戶具體的個(gè)人需求、思想、傳統(tǒng)思維等等，來優(yōu)化UI 設(shè)計(jì)，保證界面的交互性能夠充分發(fā)揮。通過采用這種方式，設(shè)計(jì)師也能夠?qū)€(gè)人思維、設(shè)計(jì)與用戶思維進(jìn)行相互結(jié)合，使得產(chǎn)品質(zhì)量有所提升，并加深用戶對(duì)于產(chǎn)品的主觀體驗(yàn)，為軟件發(fā)展創(chuàng)造有利條件[5]。

3.3 保證設(shè)計(jì)的個(gè)性化

個(gè)性化設(shè)計(jì)的主要目的在于，要滿足不同類型用戶，對(duì)于軟件UI 界面的審美需求。隨著現(xiàn)如今我國科技的快速發(fā)展，網(wǎng)絡(luò)已經(jīng)稱為人們?nèi)粘Ｉ钪胁豢扇鄙俚闹匾M成部分，不同年齡段的人均開始應(yīng)用互聯(lián)網(wǎng)來滿足自身的各項(xiàng)需求，軟件應(yīng)用十分廣泛。因此，設(shè)計(jì)師在進(jìn)行UI 設(shè)計(jì)的過程中，必須要對(duì)軟件用戶的使用情況進(jìn)行充分了解，根據(jù)用戶的年齡分段，考慮界面設(shè)計(jì)方式與方法，使得界面能夠滿足就大部分用戶的個(gè)人需求。對(duì)于小部分用戶的喜好、思維，設(shè)計(jì)者則是可以為其提供一定的選擇空間與權(quán)力，設(shè)計(jì)不同模式、皮膚、背景等等，使得這些用戶能夠根據(jù)自己的需求對(duì)界面進(jìn)行切換。

3.4 保證視覺元素布局的合理性

從某種層面上來說，視覺元素布局也可以被理解為是排版，其中包含了多項(xiàng)元素，要求設(shè)計(jì)者必須要結(jié)合用戶的需求以及設(shè)計(jì)理念，對(duì)點(diǎn)、線、面、色彩、圖形、文字等進(jìn)行合理規(guī)劃與布局，進(jìn)而保證視覺元素布局符合用戶的審美需求與瀏覽需求。目前，視覺元素布局大致可以分為橫向平面布局、縱向空間布局、四維時(shí)間布局三個(gè)部分，設(shè)計(jì)者必須要在事先對(duì)用戶做好充分調(diào)查的情況下，綜合視覺元素布局形式的各自特點(diǎn)來最終選擇應(yīng)用的形式。橫向平面布局分為結(jié)構(gòu)化布局、藝術(shù)化布局兩種，其中結(jié)構(gòu)化布局具有較強(qiáng)的交互性，根據(jù)事先研究、調(diào)查結(jié)果，將界面以模塊化的形式進(jìn)行調(diào)整，使得整個(gè)界面設(shè)計(jì)更加具有秩序性；藝術(shù)化布局是從界面美感角度出發(fā)，通過分割、節(jié)奏、變化統(tǒng)一等等手法，來提高界面的藝術(shù)性。

縱向空間布局在UI 設(shè)計(jì)中，充分利用了格式塔的接近性原則，將整個(gè)設(shè)計(jì)過程當(dāng)成設(shè)計(jì)師設(shè)計(jì)表現(xiàn)的一種特定性是，而各種不同元素，則是設(shè)計(jì)師傳遞信息、實(shí)現(xiàn)交互與交流的重要載體，確保人機(jī)信息交互。在設(shè)計(jì)期間，大致流程可以分為三個(gè)部分，第一層次是色彩元素，能夠凸顯出整個(gè)UI 界面的魅力、產(chǎn)品性格屬性等，設(shè)計(jì)師也可以通過合理的色彩元素分配，與用戶心理產(chǎn)生呼應(yīng)，實(shí)現(xiàn)高水平的產(chǎn)品營銷。第二個(gè)層次，是利用圖形、圖像元素來傳遞產(chǎn)品信息，提高界面瀏覽的便利性。第三層次文字元素，是一種更為詳細(xì)的信息傳遞手段，使用戶可以在直觀感受以后可以進(jìn)行更加深入的理解。除此之外，設(shè)計(jì)師還需要充分利用四維時(shí)間布局，來更進(jìn)一步塑造UI 界面的交互效果，為視覺表現(xiàn)的效果提升創(chuàng)造有利條件。

4 結(jié)束語

綜上所述，在互聯(lián)網(wǎng)快速發(fā)展的當(dāng)下，各種類型的軟件層出不窮，而如何更好的實(shí)現(xiàn)與用戶之間的互動(dòng)，也已經(jīng)成為各個(gè)軟件開發(fā)商所需要思考的一個(gè)重要問題。UI 設(shè)計(jì)作為重要一環(huán)，也應(yīng)受到相應(yīng)的重視。在設(shè)計(jì)期間，不光是要保證文字、圖形、圖像、色彩各部分視覺元素應(yīng)用的合理性，同時(shí)還需要給人交互性、個(gè)性化，同時(shí)融入對(duì)用戶視覺需求的考慮以及人本思想，保證視覺元素布局的合理性，這樣才能夠提高UI 設(shè)計(jì)質(zhì)量，滿足用戶對(duì)于界面的多元化需求。