佘文明

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2 界面尺寸的選擇

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

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

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

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

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

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

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

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

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

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

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

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

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

2.8.1深淺對(duì)比搭配

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

2.8.2純色的配色

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

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

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

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

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

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

4 結(jié)論

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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