淺談藝術(shù)設(shè)計中UI界面設(shè)計及應(yīng)用

佘文明

摘要：現(xiàn)今各式各樣的電子產(chǎn)品成為年輕人一個關(guān)鍵的消費品，界面設(shè)計也就凸顯它的重要性，操作簡單而美麗的界面會給人視覺上美的享受，進(jìn)而購買使用該產(chǎn)品。本文主要介紹UI界面設(shè)計的基本定義，通過對界面設(shè)計現(xiàn)狀的表述和界面設(shè)計常用軟件的介紹及界面元素的設(shè)計總結(jié)，并對部分例子剖析，證明界面設(shè)計的重要地位。最后，指出了未來UI設(shè)計的發(fā)展，并提出了UI設(shè)計人員的工作方向，更好的感受到設(shè)計改變生活的魅力。

關(guān)鍵詞：UI設(shè)計；界面元素；色彩搭配；實例分析

中圖分類號：TP393 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）27-0171-02

隨著信息時代的到來，知識經(jīng)濟(jì)的迅速發(fā)展，設(shè)計學(xué)科也在改變。我國的信息設(shè)計，顯示出它的生命力。UI設(shè)計作為信息設(shè)計的一部分，它正在悄然出現(xiàn)在我們的生活。UI即User Interface（用戶界面）的簡稱。UI設(shè)計是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。

國內(nèi)而言，UI，目前一般把屏幕上顯示的圖形用戶界面都簡單稱為UI。我們常稱的UI設(shè)計師，可以是圖形界面視覺設(shè)計師，負(fù)責(zé)產(chǎn)品或網(wǎng)站的圖形、圖標(biāo)、色彩、視覺風(fēng)格等，制造出各式各樣的視覺效果，從視覺層面把控產(chǎn)品界面設(shè)計

界面設(shè)計一直在等待藝術(shù)家們來美化，但他們的工作會被誤認(rèn)為僅是給使用界面做簡單的裝飾，沒有獨立的理論指導(dǎo)和創(chuàng)造力。然而與我們的生活，越來越多的電子產(chǎn)品和網(wǎng)站產(chǎn)品層出不窮，為了在市場上立于不敗之地，運(yùn)用高水平的界面交互設(shè)計成為各自產(chǎn)品在市場上成功的一種重要手段，給許多企業(yè)帶來可觀經(jīng)濟(jì)效益和不錯的口碑。一個漂亮合理的界面將帶給體驗者使用簡單，感覺也更方便。這將會成為產(chǎn)品的一個賣點。界面設(shè)計不是純粹的只考慮藝術(shù)美感，它需要考慮用戶、產(chǎn)品使用環(huán)境、使用人群、使用方法，并最終將其量產(chǎn)，占有市場。在體現(xiàn)在藝術(shù)美的同時，可以根據(jù)消費者生活習(xí)慣，操作習(xí)慣，方便消費者，可以滿足消費者使用該產(chǎn)品的期望，并感覺到操作步驟合理簡單。就像互動網(wǎng)絡(luò)電視菜單界面，整體美觀，分類科學(xué)，突出視覺焦點，并與遙控器配合，可以快速、輕松地選擇他們最喜歡的電視節(jié)目。

現(xiàn)在，許多設(shè)計師踴躍參與當(dāng)下的界面設(shè)計，在實踐中不斷完善自我。實際上并不能簡單的就認(rèn)為是純粹的藝術(shù)創(chuàng)作，他們的工作就是讓產(chǎn)品界面美觀、容易辨認(rèn)、簡潔易于學(xué)習(xí)。人們審美需求日益增加，界面的總體設(shè)計和規(guī)劃就尤為重要。面對無數(shù)的顯示屏設(shè)計，色彩的選擇和搭配是非常重要的。使用色調(diào)、明度和純度進(jìn)行調(diào)試，可以增加人的記憶，使個性和吸引力和瀏覽方便，以便產(chǎn)生商譽(yù)。使用顏色呼應(yīng)，設(shè)計中要注意重顏色的使用，界面才能完美呈現(xiàn)，它有非常大的影響的平衡，可以提供一個更好的用戶體驗。

1界面設(shè)計常用的軟件介紹

UI設(shè)計隨著電腦、手機(jī)、各種電子產(chǎn)品如平板電腦的普及和發(fā)展，界面設(shè)計賦予他新的生命力量。如Photoshop是一種常用的圖形圖像設(shè)計軟件。Photoshop是由Adobe開發(fā)的圖形圖像系統(tǒng)軟件。其精湛的編輯功能可以被稱為“最強(qiáng)的軟件”，可以有效地完成編輯、設(shè)計工作。CorelDRAW作為世界最著名的矢量圖形軟件，提供豐富的功能和便于操作的矢量圖形編輯、設(shè)計工具，隨著版本優(yōu)化提升，設(shè)計新功能也越來越完善。加上系統(tǒng)提供各種工具、豐富的顏色系統(tǒng)和可下載的筆刷形狀，使得設(shè)計運(yùn)用有廣闊的空間，能更方便、符合用戶們的想法和設(shè)計理念的實現(xiàn)。

2 UI 界面元素設(shè)計

高校還沒有建立一個相對完整的UI設(shè)計專業(yè)體系，所以提高UI設(shè)計師能力的關(guān)鍵是提供一個良好的學(xué)習(xí)和交換的資源和環(huán)境。從事設(shè)計工作的設(shè)計師，在任何時候都該有一個良好的心態(tài)并投入必要的努力，而且可多方咨詢業(yè)內(nèi)精英，取長補(bǔ)短不斷自我完善。就從界面各元素的設(shè)計說起：

2.1 整體頁面布局設(shè)計

布局設(shè)計需要設(shè)計師綜合多方面的知識，把多種元素進(jìn)行科學(xué)組合，明確界面設(shè)計主題。根據(jù)實際情況和要表達(dá)的內(nèi)容來布置，認(rèn)真研究版式，從點、線、面的構(gòu)成著手，注意平面構(gòu)成美的原則，尤其是疏密關(guān)系的處理。

2.2 界面尺寸的選擇

總的來說，界面的尺寸和顯示屏的大小及分辨率有關(guān)，如超出部分就要考慮滾動條的安排。在設(shè)計中經(jīng)常也采用多屏顯示，那第一屏就要格外慎重，精心打造，因為第一屏有黃金屏的美譽(yù)，接下來所有的界面都要一一呼應(yīng)。保證風(fēng)格、氣質(zhì)完全吻合。

2.3 界面外觀造型設(shè)計

界面外觀造型設(shè)計通常采用經(jīng)典的幾何形，常見的有圓形、矩形、菱形、梯形、平行四邊形等，圓形圓滿、柔和、團(tuán)結(jié)安定等，矩形代表中規(guī)中矩，平衡和諧的視覺感受；菱形代表平衡、個性、公平等，也有不少界面是以一種為主，結(jié)合多種形狀，表現(xiàn)出平和、活潑等的特點。

2.4 文字的排版、編輯設(shè)計

文本是整個界面信息內(nèi)容的主要展示部分，字體、字號、顏色的選擇搭配與組合，設(shè)計中的字、行、字塊等的通篇協(xié)調(diào)，在整個界面視覺節(jié)奏上給人以美感。

2.5 圖片的引用及設(shè)計

所謂圖文并茂，文字與圖片具有相互補(bǔ)充的視覺效果，相互襯托，既能活躍界面，又使整體呈現(xiàn)豐富的表現(xiàn)形式。

2.6 多媒體的引用及設(shè)計

為吸引使用者，界面可以使用2D＼3D動畫效果，讓聲音、動畫、視頻等更多的多媒體參與，豐富界面多層次的表現(xiàn)，充分調(diào)動使用者的五感體驗。

2.7 界面背景的設(shè)計

使用各式各樣的紋理當(dāng)背景，往往用對了背景，就已成功大半。背景的色調(diào)常使用比較柔和，主要起襯托作用，但不能喧賓奪主。做到風(fēng)格統(tǒng)一、首尾呼應(yīng)、渾然一體。

2.8 色彩運(yùn)用設(shè)計

色彩對人們的感官視覺沖擊和影響，直接作用人的感情和行動。不同的顏色使人產(chǎn)生不同的心理感受和不同的精神狀態(tài)可以接受顏色也不同。第一、人性化的UI界面色彩設(shè)計是用戶可以根據(jù)自己的需要改變系統(tǒng)的默認(rèn)設(shè)置，并選擇一個令人滿意的個性化的顏色設(shè)置。其目的是用顏色的變化來協(xié)調(diào)用戶的心理，以滿足用戶的需求的生理、心理、情感、影響自己的情緒和行為。第二、UI界面色彩設(shè)計體現(xiàn)在可以指導(dǎo)用戶進(jìn)行相應(yīng)的操作，起到向?qū)У淖饔谩Ｒ粋€好的UI設(shè)計師，總能把顏色運(yùn)用的靈活自如，設(shè)計中顏色傳達(dá)給用戶的感受，正是UI設(shè)計師想要表達(dá)的意向，所以顏色是設(shè)計師與用戶溝通的介質(zhì)之一。首先作為一個優(yōu)秀的UI設(shè)計師，要了解UI設(shè)計中如何巧用色彩這個問題，要懂得顏色和人的感覺是密不可分，那令人振奮的色彩搭配，能突出重點、提升易用性，并且吸引用戶使用你的設(shè)計項目。設(shè)計中如何巧用色彩，讓你的設(shè)計更具有亮點呢？

2.8.1深淺對比搭配

比如選用了深色，在深色背景上使用亮色文字，并在圖片上疊加了顏色，讓視覺重心停留在文字和相應(yīng)按鈕上。彈出菜單同樣使用了深色主題。得益于各種字體和深淺對比的色彩，深色風(fēng)格的更具完整性，受到偏愛。

2.8.2純色的配色

界面設(shè)計風(fēng)格強(qiáng)調(diào)客戶端的可用性，借扁平化設(shè)計和極簡風(fēng)格，打造一套用戶愿意接受的審美樣式和技巧。 這種樣式吸收了鮮艷、高純度的配色，從紅到綠色。雖然不是一定要遵循這些色彩建議?？梢约尤氪竺娣e、高亮度的配色，能夠創(chuàng)造賞心悅目的效果。。

2.8.3顏色的協(xié)調(diào)

為讓設(shè)計更具吸引人的亮點，細(xì)心、科學(xué)的選擇顏色，是一個不錯的選擇，它是一種用來烘托主題的重要手段。例如，彩色的搭配能打破視覺單一，促進(jìn)交互行為。

在此重點闡述用色之道，讓設(shè)計更具亮點，是因為色彩正是讓設(shè)計獨具一格的重要因素之一。選擇不同的配色技巧時，要考慮色彩如何最好地與品牌相結(jié)合，并為用戶服務(wù)。要產(chǎn)生最佳效果，就要帶著特定目的運(yùn)用色彩，通過設(shè)計吸引用戶，促使他們采取行動。無論是使用淺色還是深色，或者是純色和流行混搭，色彩都能影響用戶對于設(shè)計的認(rèn)同和使用頻次。

3 應(yīng)用與現(xiàn)實結(jié)合的實例分析

在各種電子設(shè)備充斥著生活的現(xiàn)代社會中，對于消費者而言可以有更多的選擇。如何抓住消費者眼球以及讓其購買自己的產(chǎn)品，則作為廠商所關(guān)注的重點。優(yōu)秀的界面設(shè)計以及操作系統(tǒng)，再加上鮮明帥氣外觀則作為消費者的首選，起到了至關(guān)重要的作用，這同時體現(xiàn)出有活力、有競爭力的企業(yè)形象，這對于產(chǎn)品的發(fā)展與銷售有無形的推動作用。隨著 4G “互聯(lián)網(wǎng)+“時代的發(fā)展，手機(jī)、平板等電子設(shè)備深受互聯(lián)網(wǎng)等的影響，與此同時，UI 設(shè)計也得到了突破性的發(fā)展。使用戶界面更呈現(xiàn)出了窗口化、圖標(biāo)化，菜單化、按鈕化。所以現(xiàn)在手機(jī)的 UI 設(shè)計也需考慮用戶使用智能手機(jī)程序的便捷與穩(wěn)定，但也要同時兼顧人與人之間的使用習(xí)慣及差異。作為這場互聯(lián)網(wǎng)變革中最成功騰訊qq及微信客戶的爭奪戰(zhàn)特別具有代表性。在產(chǎn)品、功能同質(zhì)化越來越趨同的今天，設(shè)計上配合手機(jī)擁有超大的觸摸屏幕滿足了人們對于智能手機(jī)使用的要求，讓用戶享受上網(wǎng)的同時帶來更舒適手感。此外，圖標(biāo)按鈕等外形做了相應(yīng)區(qū)別，使其各自特點鮮明、易于識別。操作快速響應(yīng)及輸入便捷與表情設(shè)置簡單實用，其語音、圖片傳輸?shù)脑O(shè)計尤為經(jīng)典，再加上操作界面精心設(shè)計配合，使得嚴(yán)謹(jǐn)、大氣而又不失時尚感的氣質(zhì)貫穿其中。其界面安排合理豐富而又不顯得亂，這使得微信的發(fā)展大有超越qq的趨勢，顯現(xiàn)出強(qiáng)大的競爭力。再加上其出色頂尖的營銷，產(chǎn)品廣受推廣和歡迎。如果設(shè)計師設(shè)計出來的產(chǎn)品恰好滿足了受眾對這個產(chǎn)品的心理需求，那設(shè)計者與用戶的情感就產(chǎn)生共鳴，使用戶更加深刻地體會設(shè)計的內(nèi)涵和喜愛產(chǎn)品。

4 結(jié)論

現(xiàn)在UI設(shè)計的時代越來越重要，它可以給用戶帶來更直觀的體驗，目前的技術(shù)條件和背景下人們的審美標(biāo)準(zhǔn)等等，讓人們認(rèn)識到技術(shù)真的離我們不遠(yuǎn)，UI設(shè)計人員應(yīng)該跟隨時代的步伐，掌握現(xiàn)代信息社會發(fā)展的新趨勢，站在一個較高的角度來提高他們的設(shè)計水平，使設(shè)計工作能夠有新的思想、新的文化、新的創(chuàng)意。同時，設(shè)計師還應(yīng)該挖掘中國優(yōu)秀的歷史文化，讓它注入我們的設(shè)計理念，伴隨UI設(shè)計。只有用這種方法，設(shè)計工作才能滿足人們的心理需求和情感交流、思想傳遞及豐富人們的生活，可以對各種電子設(shè)備添加情感色彩，體現(xiàn)更人性化設(shè)計并享受科技帶給人們的便捷、舒適感。

參考文獻(xiàn)：

[1] 達(dá)達(dá)尼亞.人性化設(shè)計以及在產(chǎn)品中的應(yīng)用 [EB/OL]：2015-10-09.http：//www.douban.com/note/175792970/？type=like.

[2] 李世國，顧振宇.交互設(shè)計[M].北京：中國水利水電出版社，2012：11.

[3] 王春鵬.談網(wǎng)絡(luò)界面設(shè)計的人性化[J].包裝工程，2007，28（6）：171-173.

[4] 張美珍.淺析色彩在 UI 設(shè)計中的應(yīng)用[J].設(shè)計，2014（07）.

[5] 李天賜.手機(jī) UI 的色彩運(yùn)用技巧[J].大眾文藝，2015（16）.

[6] 孟建華.UI 設(shè)計與應(yīng)用[J].藝術(shù)設(shè)計，2009（4）：49-50.

[7] 蔣陸.手機(jī)圖形用戶界面的圖標(biāo)個性化設(shè)計研究[J].黑龍江科技信息，2007（6）：67，152.

[8] 劉超.UI界面設(shè)計———界面設(shè)計不存在美工.