網(wǎng)絡(luò)信息技術(shù)下UI設(shè)計(jì)的視覺思維研究

何 婧

(江西環(huán)境工程學(xué)院 工業(yè)與設(shè)計(jì)學(xué)院，江西 贛州 341000)

0 引言

隨著網(wǎng)絡(luò)信息技術(shù)的發(fā)展和應(yīng)用，人們的日常生活也發(fā)生了極大的變化，越來越多的智能電子產(chǎn)品走進(jìn)了人們的生活，比如：平板電腦，智能手機(jī)，電子手環(huán)，智能家電、兒童學(xué)習(xí)電子書等，極大提升了人們的生活品質(zhì)[1]。作為連接產(chǎn)品界面與用戶的UI設(shè)計(jì)也開始為人們重視起來，許多高校為了應(yīng)對(duì)發(fā)展，紛紛開設(shè)了UI 設(shè)計(jì)課程。但是由于UI 設(shè)計(jì)屬于新興行業(yè)，發(fā)展尚不成熟，在設(shè)計(jì)過程中存在諸多問題有待改進(jìn)。

1 UI 設(shè)計(jì)的視覺元素

分析UI設(shè)計(jì)的視覺元素，有助于對(duì)UI設(shè)計(jì)進(jìn)行整體思考，為視覺傳達(dá)設(shè)計(jì)工作的開展發(fā)揮指導(dǎo)性作用，進(jìn)而對(duì)用戶界面進(jìn)行積極的優(yōu)化。UI設(shè)計(jì)的視覺元素主要有以下幾個(gè)方面。

1.1 文字

文字是日常生活中傳遞信息的重要方式，在UI界面可以簡潔、準(zhǔn)確地將信息傳達(dá)給用戶，發(fā)揮著重要的作用，文字也是視覺傳達(dá)設(shè)計(jì)中最基本的表現(xiàn)形式，不同的文本形式可以配合不同的界面環(huán)境，增強(qiáng)用戶的記憶。其由兩部分組成，一部分是系統(tǒng)的默認(rèn)字體，使界面大面積的字體在大小、樣式、顏色、層次等方面進(jìn)行統(tǒng)一，提高用戶閱讀效率，減少視覺負(fù)擔(dān)。例如蘋果專門為中國用戶打造的蘋果蘋方字體，和原先黑體字相比較字形扁平化，筆畫更加細(xì)致耐看，中文顯示效果更加清晰優(yōu)美，提升閱讀觀感。另一部分的字體為了突出產(chǎn)品的特色，吸引用戶眼球，將個(gè)別的字體圖形化，加入藝術(shù)化效果，從而達(dá)到宣傳的目的例如淘寶App圖標(biāo)就是用了淘寶的首字“淘”字為設(shè)計(jì)元素，將“淘”字筆畫設(shè)計(jì)得非常圓潤，有一個(gè)像小喇叭的形態(tài)，表現(xiàn)淘寶在喊話消費(fèi)者前來購買。

1.2 圖形

除文字以外，圖形也是UI設(shè)計(jì)里重要的表現(xiàn)元素，相對(duì)于文字而言，圖形更加的直觀突破了文字區(qū)域限制，圖形也包括兩部分，一部分是功能性圖標(biāo)，包括按鈕、圖標(biāo)等，用點(diǎn)、線、面構(gòu)成，有些圖標(biāo)也會(huì)用文字的形式，圖標(biāo)所蘊(yùn)含的內(nèi)容必須要準(zhǔn)確，雖然要準(zhǔn)確地表達(dá)它，但是圖標(biāo)是一個(gè)隱喻，表達(dá)這個(gè)圖標(biāo)代表的含義，所以圖標(biāo)的形狀、構(gòu)思、顏色、質(zhì)感等都有講究；另一部分圖形是裝飾圖形，按照?qǐng)D形構(gòu)成的法則構(gòu)成，比文字更加直觀，還有圖形海報(bào)的形式，大部分由裝飾圖形作為背景，烘托產(chǎn)品或者人物，將聯(lián)想和認(rèn)知相結(jié)合[2]。目前，UI設(shè)計(jì)里有靜態(tài)圖和動(dòng)態(tài)圖兩種不同形式，靜態(tài)圖像主要使用JPEG格式，這種文件格式的優(yōu)點(diǎn)是：文件小，圖形清晰度較高，可以廣泛地使用在圖標(biāo)，展示產(chǎn)品詳細(xì)信息、靜態(tài)廣告和字體圖形等方面，在很多頁面首頁最醒目的位置就是產(chǎn)品的廣告位，當(dāng)顧客對(duì)此商品有興趣可以點(diǎn)擊廣告，進(jìn)入產(chǎn)品詳情頁，內(nèi)頁詳情圖片清晰，新穎，多方位展現(xiàn)產(chǎn)品角度，有很多產(chǎn)品的詳細(xì)信息；App歡迎頁面也做得非常精彩，為了吸引顧客，拉近和顧客之間的距離商家也是費(fèi)盡心思，比如閑魚的歡迎頁面，不同時(shí)期會(huì)有不同的主題，618、雙十一是商品促銷日，歡迎海報(bào)里會(huì)出現(xiàn)琳瑯滿目的時(shí)尚商品，也有為消費(fèi)者省錢的優(yōu)惠券等插畫展示。母親節(jié)閑魚頁面有和母親通電話的溫馨場(chǎng)景，還不忘給母親帶上愛心小禮物。這些都是商家為了打消顧客視覺疲勞所用心的地方；隨著我國科技的不斷發(fā)展，動(dòng)態(tài)圖形在很大空間上得到應(yīng)用，成為UI設(shè)計(jì)的主流格式，最常用的格式是GIF，PNG，SVG等3種，GIF格式圖片色彩還原不高，圖像不清晰，一般用在要求不高的動(dòng)態(tài)圖形上，如一些簡潔的動(dòng)態(tài)表情包的使用，為顧客溝通增添了情趣，但是這樣的表情包是不能用大圖的，大圖雖然畫質(zhì)高，但是在傳輸速度上不占優(yōu)勢(shì)，一個(gè)表情不能瞬間傳達(dá)此分此秒的心情，下一秒也許又是另一種表情了，會(huì)影響使用者使用的感受。PNG格式和GIF格式不同，兩者同為動(dòng)態(tài)效果，但是PNG是無損格式，圖像清晰，色彩還原度高，在縮小的畫面上仍舊以清晰的畫質(zhì)展示，所以是UI界面設(shè)計(jì)里面運(yùn)用最多，是主流動(dòng)態(tài)的格式，這樣質(zhì)感的格式在展示產(chǎn)品信息的時(shí)候豐富了展示形態(tài)，當(dāng)靜態(tài)圖形看多了有厭倦感的時(shí)候，動(dòng)態(tài)效果正好改善了人們的疲倦感。SVG可以縮放矢量圖形，并以文本格式來儲(chǔ)存[3]。雖然這些圖形只是配角，但起到了裝飾美化的作用，在UI用戶高要求的今天，緩解了用戶的視覺疲勞，激發(fā)了用戶的感官視覺，使用戶在使用的過程中得到良好的互動(dòng)體驗(yàn)。

1.3 色彩

色彩能夠使人們?cè)谝曈X上第一時(shí)間得到?jīng)_擊，這種感受能夠在使用UI界面的過程中貫穿始終，最終保持在人們的腦海里，人們也許不記得界面具體的內(nèi)容，但是卻始終記得界面色調(diào)的搭配，例如提到淘寶，人們會(huì)想起橘紅的暖色，一般來說橘紅色象征著歡樂、愉快，消費(fèi)者在淘寶購物消費(fèi)，自然心情要好，情緒要高漲，才會(huì)不停買買買；提起百度，人們會(huì)聯(lián)系到藍(lán)色，藍(lán)色有如浩瀚的星空，有無盡的知識(shí)帶人們探索和提問，給人知識(shí)淵博之感。大紅顏色又讓人想到了拼多多，你看這就是色彩的魔力，也許你不記得App標(biāo)志詳細(xì)的樣子，但是你一定記得它主打是什么顏色。確定界面主色調(diào)，合理搭配色彩，激活人們的感官世界，對(duì)UI產(chǎn)品產(chǎn)生充分的聯(lián)想，使界面功能得到滿足，通過色彩提升用戶對(duì)界面的認(rèn)同感，界面的統(tǒng)一性，形成對(duì)界面固有的觀念和習(xí)慣，而這寶貴的習(xí)慣將會(huì)引導(dǎo)人們繼續(xù)使用該界面，提高該移動(dòng)終端或者軟件的使用率，進(jìn)而提升UI產(chǎn)品本身的價(jià)值。

2 UI 設(shè)計(jì)的視覺優(yōu)化重點(diǎn)

通過上述分析，在UI設(shè)計(jì)中視覺表現(xiàn)主要在文字、圖形、色彩等視覺元素的組合方面，這和視覺傳達(dá)設(shè)計(jì)存在相似地方，又有明顯的差異，為了更好地滿足用戶的需求，設(shè)計(jì)師在UI設(shè)計(jì)過程中應(yīng)該注意以下的幾個(gè)方面。

2.1 形成良好的視覺交互邏輯

UI設(shè)計(jì)主要是為用戶和界面形成良好互動(dòng)而存在的，合理的交互設(shè)計(jì)能夠?yàn)橛脩魩砀玫慕换ンw驗(yàn)，從而達(dá)到使用要求。所以一個(gè)好的UI設(shè)計(jì)首先就是界面形成良好的視覺交互邏輯。UI視覺設(shè)計(jì)師常常會(huì)說：“這個(gè)內(nèi)容我可以換個(gè)位置嗎？”但交互設(shè)計(jì)師也許會(huì)說：“你這樣表達(dá)會(huì)產(chǎn)生歧義，用戶容易誤解，需要改進(jìn)”。為什么會(huì)出現(xiàn)這類問題呢？因?yàn)閮烧咚镜慕嵌炔煌?，作為UI設(shè)計(jì)師必須對(duì)界面的內(nèi)容有充分的了解，對(duì)界面之間的邏輯關(guān)系有深層次的掌握，并且通過一系列精準(zhǔn)數(shù)據(jù)作為最終設(shè)計(jì)的準(zhǔn)繩，和交互設(shè)計(jì)師做好配合。在這準(zhǔn)備的基礎(chǔ)上發(fā)揮設(shè)計(jì)師的長處，做好視覺效果處理，以滿足用戶的視覺需求。結(jié)合UI產(chǎn)品特色，完善UI界面設(shè)計(jì)，保證界面里所有的信息都能被用戶理解、接受、處理，滿足用戶使用需求[4]。

2.2 符合用戶的視覺需求

UI設(shè)計(jì)的最終目的是需要用戶使用的，用戶在進(jìn)行閱讀的時(shí)候都有相應(yīng)的閱讀順序，UI設(shè)計(jì)的邏輯性也是服務(wù)于用戶視覺習(xí)慣的，經(jīng)過大量的數(shù)據(jù)分析能夠使設(shè)計(jì)師能夠精準(zhǔn)地分析用戶的使用特點(diǎn)，將對(duì)應(yīng)的模塊內(nèi)容和層級(jí)關(guān)系交互視覺流程設(shè)計(jì)保持一致。這就要求設(shè)計(jì)師在進(jìn)行UI設(shè)計(jì)的時(shí)候，需要以客觀調(diào)查為準(zhǔn)繩，對(duì)界面設(shè)計(jì)的整體風(fēng)格，頁面布局，圖形創(chuàng)意都圍繞用戶視覺需求來進(jìn)行[5]。在設(shè)計(jì)期間結(jié)合設(shè)計(jì)師個(gè)人的設(shè)計(jì)思維，不僅使得UI界面畫面質(zhì)量可以得到明顯提升，加深用戶對(duì)產(chǎn)品使用的感官體驗(yàn)，更有助于發(fā)掘潛在用戶，為UI產(chǎn)品的發(fā)展發(fā)揮重要作用。

2.3 合理安排布局

布局也可以說是對(duì)UI界面的視覺排版，要求設(shè)計(jì)師運(yùn)用點(diǎn)、線、面、圖形、文字、色彩等元素進(jìn)行合理規(guī)劃。在設(shè)計(jì)布局的過程中，可以用色彩展現(xiàn)UI界面的性格特點(diǎn)，傳遞產(chǎn)品魅力；利用圖形和文字傳遞產(chǎn)品詳細(xì)信息，提升瀏覽舒適度；同時(shí)，在界面布局上還可以分為橫向、縱向和三維立體3種布局方式，設(shè)計(jì)師可以根據(jù)具體的界面內(nèi)容，和移動(dòng)終端呈現(xiàn)方式，結(jié)合用戶視覺和思維習(xí)慣之后來設(shè)計(jì)的具體布局方案，例如在手機(jī)上展現(xiàn)內(nèi)容的時(shí)候適合豎向布局方式，方便操作；如果是平板展示的話，可以用橫向的方式，因?yàn)榇蟛糠衷谑褂闷桨宓臅r(shí)候都是橫向放置的，內(nèi)容用橫向展示方便用戶瀏覽。從界面風(fēng)格上，一方面可以利用UI產(chǎn)品的內(nèi)容對(duì)界面進(jìn)行模塊化的設(shè)計(jì)，使得界面呈現(xiàn)出理性，規(guī)范之感；如果UI產(chǎn)品帶有文藝色彩，也可以運(yùn)用藝術(shù)化的表現(xiàn)方式，對(duì)畫面進(jìn)行分割，節(jié)奏變化，來提升界面的藝術(shù)效果。

3 結(jié)語

綜上所述，在網(wǎng)絡(luò)科技快速發(fā)展的時(shí)代，如何更好地提升產(chǎn)品界面品質(zhì)，實(shí)現(xiàn)良好的人機(jī)互動(dòng)，成為當(dāng)下UI設(shè)計(jì)領(lǐng)域的重要問題，為了解決這一問題設(shè)計(jì)師在設(shè)計(jì)過程中應(yīng)融入用戶的視覺需求，將色彩、文字、圖形等視覺元素進(jìn)行合理布局，同時(shí)加入設(shè)計(jì)師獨(dú)到的設(shè)計(jì)創(chuàng)意，不斷對(duì)用戶界面的功能和藝術(shù)性進(jìn)行優(yōu)化，使UI 設(shè)計(jì)在新時(shí)期能夠良性發(fā)展。