界面設(shè)計(jì)課程中的藝術(shù)與審美培養(yǎng)方案構(gòu)思

施兢蓉

摘 要：界面設(shè)計(jì)在計(jì)算機(jī)前端中發(fā)揮重要作用，同時(shí)也受到了高校的關(guān)注。它與信息技術(shù)緊密結(jié)合，也是技術(shù)與文化藝術(shù)溝通的橋梁。對此類人才的培養(yǎng)，首先需要了解學(xué)科關(guān)系的構(gòu)建，涉及的行業(yè)領(lǐng)域，在明確了各學(xué)科與界面設(shè)計(jì)之間盤根錯(cuò)節(jié)的聯(lián)系之后，制定一個(gè)合理且高效的人才培養(yǎng)方案，完善課程設(shè)置。

關(guān)鍵詞：界面設(shè)計(jì)；人才培養(yǎng)；跨界共融；

一、前言

在信息日益蓬勃的今天，UI的大時(shí)代也已經(jīng)到來。短短幾年里，無論是網(wǎng)站還是手機(jī)端應(yīng)用，界面的美觀度和舒適度有了很大的提高。好的界面設(shè)計(jì)，讓軟件變得頗有生趣，操作也變得更順暢、自由。社會對于計(jì)算機(jī)專業(yè)人才的需求量也在上升，高職院校作為我國高等教育的重要組成部分，每年向社會輸送大量專業(yè)型人才。界面設(shè)計(jì)類課程在計(jì)算機(jī)專業(yè)當(dāng)中也起著至關(guān)重要的作用，因此，對該專業(yè)的學(xué)生進(jìn)行藝術(shù)與審美的綜合培養(yǎng)，讓技術(shù)與藝術(shù)互相溝通、融合，具有積極的作用和意義[1]。

二、界面設(shè)計(jì)課程的重要性

（一）與信息技術(shù)的緊密聯(lián)系

界面設(shè)計(jì)并不是一門獨(dú)立存在的學(xué)科，而是前端開發(fā)中相當(dāng)重要的一部分，并涉及到整個(gè)開發(fā)隊(duì)伍。界面是人與機(jī)器之間傳遞和交換信息的媒介，包括硬件界面和軟件界面，是計(jì)算機(jī)科學(xué)與心理學(xué)、設(shè)計(jì)藝術(shù)學(xué)、認(rèn)知科學(xué)和人機(jī)工程學(xué)的交叉研究領(lǐng)域。對于一款產(chǎn)品而言，用戶與產(chǎn)品的溝通總是依靠視覺來完成。現(xiàn)階段的“安卓”和“IOS”系統(tǒng)兩大操作系統(tǒng)迅速推廣，各類數(shù)字產(chǎn)品被不斷開發(fā)，潛移默化的成為現(xiàn)代人生活中不可或缺的一部分，獨(dú)特的產(chǎn)品外觀和界面也成為提高產(chǎn)品競爭力的重要手段。而另一方面，只有在強(qiáng)大技術(shù)支持下，界面設(shè)計(jì)的效能才能被最好的發(fā)揮。

（二）文化藝術(shù)溝通的橋梁

藝術(shù)是圍繞情感或思維關(guān)切的主題，注重自我表達(dá)。從界面設(shè)計(jì)規(guī)則上來說，對藝術(shù)設(shè)計(jì)者的限制相對較少。因此，界面設(shè)計(jì)往往尋求產(chǎn)品的非凡獨(dú)特，附加更多的視覺價(jià)值。

互聯(lián)網(wǎng)產(chǎn)品在不斷發(fā)展創(chuàng)新，其中的藝術(shù)傳達(dá)成為現(xiàn)代人精神生活的重要組成部分，一方面給人們提供了高效便捷的生活服務(wù)，另一方面也是一種文化品位和審美情趣的提高。好的界面是藝術(shù)文化溝通的橋梁，富有人文關(guān)懷，在藝術(shù)構(gòu)想中不斷順應(yīng)時(shí)代變化，加入人性化的設(shè)計(jì)理念，形成“人-物-人”的情感交流。

三、學(xué)科關(guān)系的構(gòu)建

一個(gè)產(chǎn)品在開發(fā)之前，主要?dú)v經(jīng)：需求分析，交互原型和UI設(shè)計(jì)幾個(gè)步驟，（如圖2-1所示）：

一般情況下，對于界面要求較高的產(chǎn)品開發(fā)，往往會將UI設(shè)計(jì)和程序開發(fā)分為兩個(gè)不同的時(shí)間節(jié)點(diǎn)，并且設(shè)計(jì)師會對開發(fā)過程中界面1：1的實(shí)現(xiàn)起到協(xié)助和監(jiān)督的作用（如圖2-2所示）。還有一種情況是UI界面設(shè)計(jì)和程序開發(fā)同時(shí)進(jìn)行，這就需要前端設(shè)計(jì)者要明確界面設(shè)計(jì)的基本規(guī)律和各種美學(xué)常識。另外，在中小型團(tuán)隊(duì)中，原型交互、UI設(shè)計(jì)、程序開發(fā)三個(gè)步驟可能交叉進(jìn)行，一個(gè)崗位需要同時(shí)具備多項(xiàng)能力，程序員有時(shí)也會兼顧交互和界面設(shè)計(jì)等工作，甚至也參與討論用戶需求的分析[2]。

從根本上來說，界面設(shè)計(jì)為了突出美的感受，往往側(cè)重于關(guān)注如何處理和排版可視元素，包括圖標(biāo)、控件、圖片、文字等，從而傳達(dá)有效的行為信息。那么，在琢磨界面時(shí)，需要涉及到的主要元素有：

情景。每一套界面設(shè)計(jì)都需要考慮用戶的使用場景，就如同創(chuàng)設(shè)一個(gè)品牌，需要關(guān)注人的需求，必須把使用背景當(dāng)做視覺設(shè)計(jì)的先前條件，這就要求在課程設(shè)計(jì)中融入運(yùn)營、用戶分析等類型的課程，了解用戶需求，做好前期調(diào)研準(zhǔn)備等；

形狀。形狀雖然是肉眼識別一個(gè)對象的首要方式，但若要抓住用戶的注意力，形狀并不是有利因素，過多的形狀會讓用戶形成錯(cuò)亂與不適；

大小。為人的設(shè)計(jì)，自然要遵循人的本能與習(xí)慣。人通常會不由自主的按照物體的大小排序，較大的物體更能吸引注意力。這樣就能總結(jié)出大小屬性在傳達(dá)層級關(guān)系中的重要作用。在界面排版設(shè)計(jì)中，最重要的內(nèi)容需要放大，次要的第二大，不重要的最小，這樣就非常容易區(qū)別了，給人有條不紊的感受；

信息層級。用來給界面分層，通過大小、明亮、上下對比關(guān)系，區(qū)分信息的重要程度。

文字。是需要再三斟酌的元素。書面語言傳達(dá)重要信息，所以需要恰當(dāng)使用文字、字體、大小寫等。

顏色。在界面設(shè)計(jì)中對于色彩是需要仔細(xì)斟酌，必須非常精確謹(jǐn)慎。需要結(jié)合用戶目標(biāo)、環(huán)境、內(nèi)容、品牌等綜合因素考慮。因此，色彩的搭配選擇往往成為一套界面設(shè)計(jì)作品的先決條件。在設(shè)定了標(biāo)準(zhǔn)色后，還需要考慮顏色色值、色調(diào)、飽和度等具體數(shù)值。僅僅顏色這一元素，就對設(shè)計(jì)師產(chǎn)生了巨大的挑戰(zhàn)，需要長期的培養(yǎng)和不斷嘗試，當(dāng)然內(nèi)在的審美與藝術(shù)修養(yǎng)也十分重要；

紋理。例如在設(shè)計(jì)按鈕時(shí)，加上斜面和投影會讓用戶認(rèn)為可點(diǎn)擊?；蛘撸硞€(gè)元素設(shè)計(jì)成橡膠紋理，用戶會認(rèn)為可抓握。即使現(xiàn)在市面上多數(shù)的UI作品采用扁平化的風(fēng)格，偶爾的紋理使用往往能夠錦上添花，特別是針對兒童和老年人的學(xué)習(xí)操作；

方向。需要有一個(gè)可用的變量來傳達(dá)方向，例如表示房價(jià)上漲趨勢，就需要用向上的箭頭來表示；

位置。建立在人機(jī)工程學(xué)之上。一個(gè)完整界面相當(dāng)于一個(gè)完整的空間關(guān)系，什么元素放在左上角，什么元素適合放在右下角從而加強(qiáng)動作。

動作及變化。這是界面設(shè)計(jì)中的高級設(shè)計(jì)，難度較大。優(yōu)秀的設(shè)計(jì)師要掌握界面組件的移動，如何隨著時(shí)間變化等。就像視頻播放界面，當(dāng)開啟其它應(yīng)用，自動形成左上角的小屏幕[3]。

四、人才培養(yǎng)方案構(gòu)思

在明確了各學(xué)科與界面設(shè)計(jì)之間盤根錯(cuò)節(jié)的關(guān)系之后，需要制定一個(gè)合理且高效的人才培養(yǎng)方案。

根據(jù)一個(gè)互聯(lián)網(wǎng)產(chǎn)品開發(fā)的主要流程，前端視覺設(shè)計(jì)需要經(jīng)歷最重要的三個(gè)過程，即需求分析，原型交互，UI設(shè)計(jì)。在界面設(shè)計(jì)這門課程中三個(gè)過程不能割開，否則會造成市場需求與設(shè)計(jì)的脫節(jié)。

首先在需求分析階段，需要開設(shè)運(yùn)營、市場營銷等相關(guān)基礎(chǔ)課程，這是一款產(chǎn)品走向市場的必經(jīng)之路。學(xué)生要學(xué)會如何去分析產(chǎn)品，市場調(diào)研，了解用戶的真正需求，在腦中萌生一個(gè)不錯(cuò)的想法。

其次，確定產(chǎn)品方向后，需要進(jìn)行原型的模擬設(shè)計(jì)。學(xué)生要研究人機(jī)工程學(xué)，界面當(dāng)中的大小、紋理、方向、位置等都建立在人機(jī)工程基礎(chǔ)之上。一個(gè)界面的可用、易用、好用最終取決于人機(jī)交互是否得當(dāng)、順利。并能夠進(jìn)行簡單的手繪和尺寸測量。專業(yè)課程：原型交互（AXURE），Adobe XD等

如果把產(chǎn)品設(shè)計(jì)比喻成建造一棟大樓，那么需求分析就是選址和外形設(shè)計(jì)，原型交互就是框架架構(gòu)的搭建，而界面設(shè)計(jì)就是充實(shí)與裝修，起到錦上添花的作用。

基礎(chǔ)階段仍然要學(xué)習(xí)三大構(gòu)成（平面構(gòu)成、立體構(gòu)成、色彩構(gòu)成）。平面構(gòu)成的學(xué)習(xí)最終將運(yùn)用到界面設(shè)計(jì)和排版的實(shí)際項(xiàng)目中，從點(diǎn)、線、面的基礎(chǔ)訓(xùn)練延伸到界面圖標(biāo)、控件、圖片、文字及其他各種元素的綜合排版的控制；對于立體構(gòu)成學(xué)習(xí)，在現(xiàn)階段的應(yīng)用主要涉及到立體擬物圖標(biāo)、控件的繪制和設(shè)計(jì)。當(dāng)然還有產(chǎn)品的立體呈現(xiàn)，及例如：3DsMAX、CINEMA 4D、Rhino3D等計(jì)算機(jī)三維空間制圖的需要；色彩構(gòu)成培養(yǎng)學(xué)生如何正確使用色彩，搭配色彩，用色彩傳達(dá)情感等一系列訓(xùn)練，同時(shí)也要逐漸形成良好的色感，學(xué)會判斷和甄別色彩類型。前面提到的過，色彩是界面設(shè)計(jì)的先決條件。專業(yè)課程：圖形圖像處理（計(jì)算機(jī)輔助）、sketch（iOS系統(tǒng)專業(yè)UI設(shè)計(jì)軟件）、VR圖像編輯器，AE動效制作等其它UI設(shè)計(jì)相關(guān)。

另外，設(shè)計(jì)心理學(xué)。UI設(shè)計(jì)是從心理學(xué)的視角來構(gòu)建人機(jī)互動的形式，并通過視覺要素的刺激來提高用戶體驗(yàn)，根據(jù)終端屏幕的顯示空間對視覺要素合理設(shè)計(jì)與布局，從而達(dá)到用戶滿意的視覺效果。

五、總結(jié)

本文是建立在對界面設(shè)計(jì)行業(yè)大背景和高職院校計(jì)算機(jī)專業(yè)學(xué)生具體分析基礎(chǔ)之上，著重提出界面設(shè)計(jì)中藝術(shù)與審美培養(yǎng)方式的初步構(gòu)思和規(guī)劃。另外，未來的培養(yǎng)模式還可以從“互聯(lián)網(wǎng)+”與前沿資訊的敏感度、交互設(shè)計(jì)與用戶體驗(yàn)、美學(xué)之道（視覺審美培養(yǎng)）、學(xué)生創(chuàng)意思維與聯(lián)想培養(yǎng)，如何與藝術(shù)設(shè)計(jì)的跨界共融等方向進(jìn)行深入研究。

參考文獻(xiàn)：

[1]安小龍 界面設(shè)計(jì)之道[M]. 北京：清華大學(xué)出版社，2016.

[2]黃方聞.動靜之美：Sketch移動UI與交互動效設(shè)計(jì)詳解[M].北京：人民郵電出版社2016.08.

[3]Alan Cooper等著. About Face4：The Essential of interaction Design[M].北京：電子工業(yè)出版社，2015.10.