何 婧

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

0 引言

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

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

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

1.1 文字

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

1.2 圖形

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

1.3 色彩

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

2 UI 設(shè)計的視覺優(yōu)化重點

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

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

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

2.2 符合用戶的視覺需求

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

2.3 合理安排布局

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

3 結(jié)語

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