UI交互設(shè)計(jì)技術(shù)中的Web設(shè)計(jì)在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用

陳青陽(yáng)

摘要：高職高專廣告設(shè)計(jì)與制作專業(yè)課程內(nèi)容包含Web設(shè)計(jì)，UI設(shè)計(jì)過(guò)程中，常常要用到Web界面設(shè)計(jì)，在Web已經(jīng)進(jìn)入嶄新的時(shí)代的今天，UI交互設(shè)計(jì)技術(shù)運(yùn)用在Web設(shè)計(jì)中顯得非常重要。本文探討的是UI交互設(shè)計(jì)技術(shù)中的Web設(shè)計(jì)在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用。

關(guān)鍵詞：UI交互設(shè)計(jì)技術(shù);Web設(shè)計(jì);高職高專廣告設(shè)計(jì)與制作

一、UI交互技術(shù)

交互技術(shù)指利用計(jì)算機(jī)輸入和輸出設(shè)備，實(shí)現(xiàn)人與設(shè)備交互的技術(shù)。人機(jī)交互技術(shù)主要分為以下幾種類型。

（一）通過(guò)硬件設(shè)備實(shí)行交互的技術(shù)

鼠標(biāo)、鍵盤、手柄等硬件設(shè)備是常見(jiàn)的交互工具，用戶可以通過(guò)鼠標(biāo)或鍵盤點(diǎn)擊界面中的某個(gè)區(qū)域，完成對(duì)該區(qū)域的縮放、拖拽等操作。這類交互雖然操作方法簡(jiǎn)單，但對(duì)外部設(shè)備的依賴較強(qiáng)，降低了交互體驗(yàn)。

（二）通過(guò)語(yǔ)音識(shí)別實(shí)行交互的技術(shù)

語(yǔ)言是人與人之間最直接的溝通方式，語(yǔ)言中所包含的交互信息量很大。語(yǔ)音識(shí)別也就成為人機(jī)交互的方式之一。隨著計(jì)算機(jī)運(yùn)算能力的增強(qiáng)以及人工智能的飛速發(fā)展，促使語(yǔ)音識(shí)別技術(shù)越來(lái)越成熟并運(yùn)用于各種智能終端上，其中最具代表性的是蘋果公司推出的Siri，支持語(yǔ)音識(shí)別，根據(jù)語(yǔ)音完成用戶發(fā)出的指令，實(shí)現(xiàn)人機(jī)交互，增強(qiáng)了交互體驗(yàn)。

（三）通過(guò)觸控實(shí)行交互的技術(shù)

通過(guò)觸控的交互技術(shù)，是以手的觸摸為主要輸入方式，相比傳統(tǒng)的鍵盤和鼠標(biāo)更為便捷和人性化。觸控交互技術(shù)使得智能移動(dòng)設(shè)備迅速發(fā)展，得到廣大用戶的認(rèn)可。2007年，蘋果公司推出第一代iPhone智能手機(jī)，主體是一面3.5英寸多點(diǎn)觸控觸摸屏，除觸摸屏外僅有五個(gè)物理按鍵，分別為音量鍵、靜音鍵、關(guān)閉鍵與Home鍵。

（四）通過(guò)動(dòng)作識(shí)別實(shí)行交互的技術(shù)

通過(guò)捕獲動(dòng)作的關(guān)鍵部位進(jìn)行計(jì)算和處理，分析出用戶的動(dòng)作行為的意圖，并將其轉(zhuǎn)化為輸入指令，實(shí)現(xiàn)用戶與計(jì)算機(jī)之間的交互。

（五）通過(guò)眼動(dòng)追蹤實(shí)行交互的技術(shù)

眼動(dòng)追蹤的交互技術(shù)是通過(guò)捕獲人眼在注視不同位置時(shí)的細(xì)微變化，分析確定人眼的注視點(diǎn)，并將其轉(zhuǎn)化為信號(hào)發(fā)送給計(jì)算機(jī)，實(shí)現(xiàn)人與計(jì)算機(jī)之間的互動(dòng)，這一過(guò)程中無(wú)需手動(dòng)輸入。

二、Web設(shè)計(jì)

網(wǎng)頁(yè)設(shè)計(jì)也稱之為Web Design，隨著網(wǎng)絡(luò)的發(fā)展，5G網(wǎng)絡(luò)正在推廣中，5G網(wǎng)絡(luò)技術(shù)會(huì)在無(wú)線傳輸效率、無(wú)線通信頻率以及通信系統(tǒng)智能化這三個(gè)主要方面得到改善和提升，5G網(wǎng)絡(luò)會(huì)更加關(guān)注體驗(yàn)用戶的使用性。網(wǎng)頁(yè)為人們提供了豐富多彩的資訊和信息，在人們的生活中占據(jù)重要地位，從傳統(tǒng)的純文字界面發(fā)展到擁有音視頻，具有交互性的多媒體頁(yè)面，網(wǎng)頁(yè)UI的界面設(shè)計(jì)也得到的快速發(fā)展，UI交互技術(shù)也被廣泛運(yùn)用到網(wǎng)頁(yè)設(shè)計(jì)中。

網(wǎng)頁(yè)UI設(shè)計(jì)不僅具備傳統(tǒng)視覺(jué)傳達(dá)的一般特征，而且還具備了新媒體時(shí)代的藝術(shù)形式，一個(gè)優(yōu)秀的網(wǎng)頁(yè)可以給用戶帶來(lái)視覺(jué)上的美感和舒適的操作體驗(yàn)。

新媒體時(shí)代的網(wǎng)頁(yè)與傳統(tǒng)媒體的最大區(qū)別在于與用戶的交互性以及信息會(huì)實(shí)時(shí)動(dòng)態(tài)更新。網(wǎng)絡(luò)媒體的主要特征是交互性，這是網(wǎng)頁(yè)設(shè)計(jì)中必須要考慮的問(wèn)題。

三、廣告設(shè)計(jì)與制作專業(yè)網(wǎng)頁(yè)設(shè)計(jì)課程的現(xiàn)狀

廣告設(shè)計(jì)與制作專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)課程通過(guò)對(duì)學(xué)生系統(tǒng)的教學(xué)，讓其掌握網(wǎng)頁(yè)設(shè)計(jì)的基本原理及應(yīng)用方法，并通過(guò)和相關(guān)課程緊密結(jié)合，達(dá)到相關(guān)知識(shí)的延續(xù)和發(fā)展。此課程涉及較多編程知識(shí)，藝術(shù)類的學(xué)生在計(jì)算機(jī)方面的知識(shí)、技能比較薄弱，入學(xué)之后也不接觸數(shù)學(xué)及計(jì)算機(jī)編成類的課程。目前的網(wǎng)頁(yè)設(shè)計(jì)課程存在以下幾個(gè)問(wèn)題。

第一，網(wǎng)頁(yè)設(shè)計(jì)與制作課程沿用傳統(tǒng)教學(xué)模式，以板書教學(xué)和上機(jī)練習(xí)兩種教學(xué)為主。教師把網(wǎng)頁(yè)設(shè)計(jì)看成軟件設(shè)計(jì)課程來(lái)上，只局限于Dreamweaver的軟件操作。

第二，教學(xué)內(nèi)容不能緊跟時(shí)代發(fā)展，在新媒體的日益發(fā)展的大環(huán)境下，智能終端不斷更新，網(wǎng)頁(yè)不只是在電腦端進(jìn)行瀏覽，已經(jīng)在各種智能設(shè)備上進(jìn)行展示。傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)依然是以電腦端的尺寸來(lái)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，導(dǎo)致這些網(wǎng)頁(yè)在智能設(shè)備上因尺寸各不相同從而導(dǎo)致視覺(jué)效果很差，頁(yè)面瀏覽不方便。

四、UI交互設(shè)計(jì)技術(shù)中的Web設(shè)計(jì)在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用

UI交互設(shè)計(jì)技術(shù)包含三方面的內(nèi)容：圖形設(shè)計(jì)、交互設(shè)計(jì)和用戶體驗(yàn)，Web設(shè)計(jì)中使用程序語(yǔ)言，輔助使用JavaScript腳本語(yǔ)言、具有藝術(shù)美感的頁(yè)面、生動(dòng)的動(dòng)畫或視頻，便形成了交互式網(wǎng)頁(yè)。

交互技術(shù)中的一些技術(shù)規(guī)范，被靈活、有效地運(yùn)用到了高職高專廣告設(shè)計(jì)與制作專業(yè)中。

（一）Web設(shè)計(jì)中的信息可視化在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用

信息可視化是一個(gè)跨學(xué)科的領(lǐng)域，匯集設(shè)計(jì)、心理學(xué)、哲學(xué)、認(rèn)知科學(xué)和無(wú)數(shù)其他調(diào)查領(lǐng)域的圖表和知識(shí)，是藝術(shù)與科學(xué)的表現(xiàn)。信息可視化通過(guò)研究大規(guī)模的數(shù)據(jù)，利用圖形設(shè)計(jì)方面的技術(shù)與方法，以視覺(jué)的方式呈現(xiàn)給用戶，幫助人們理解數(shù)據(jù)。

信息可視化包括了信息圖形、知識(shí)、科學(xué)、數(shù)據(jù)等的可視化表現(xiàn)形式，根據(jù)道格·紐瑟姆2004年定義，從表現(xiàn)形式的角度“信息圖表”作為視覺(jué)工具應(yīng)包括以下六類：圖表、圖解、圖形、表格、地圖、列表。信息可視化圖表屬于圖形創(chuàng)意設(shè)計(jì)中的一個(gè)內(nèi)容，它是以簡(jiǎn)潔明了的視覺(jué)語(yǔ)言，首先通過(guò)分析數(shù)據(jù)設(shè)計(jì)圖形，其次通過(guò)圖形創(chuàng)建符號(hào)，最后再通過(guò)符號(hào)組建信息，以視覺(jué)化的邏輯語(yǔ)言進(jìn)行視覺(jué)的傳達(dá)。

高職高專廣告設(shè)計(jì)與制作專業(yè)，可以通過(guò)Illustrator矢量軟件繪制關(guān)系流程圖、敘事插圖、樹(shù)狀結(jié)構(gòu)圖、時(shí)間表述圖以及空間構(gòu)造圖等圖表設(shè)計(jì)。隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)絡(luò)改變了信息的傳達(dá)方式，信息可視化逐步向圖形用戶界面發(fā)展。當(dāng)下快節(jié)奏的生活，使得用戶對(duì)文字的羅列和表格已逐漸失去仔細(xì)閱讀的耐心，為了讓信息能快速地被用戶感知和接收，網(wǎng)頁(yè)中的信息可視化成為傳遞信息的一種方式，網(wǎng)頁(yè)中引入動(dòng)態(tài)交互的操作模式，打破了單純的平面化的信息可視化圖形。圖形和色彩能很快引起用戶的注意，再加上一系列的交互行為刺激了用戶的閱讀興趣。

（二） Web設(shè)計(jì)中的虛擬現(xiàn)實(shí)在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用

虛擬現(xiàn)實(shí)技術(shù)包含計(jì)算機(jī)仿真技術(shù)和電子信息，其展示方式是用計(jì)算機(jī)模擬虛擬的環(huán)境從而給人以身臨其境的感覺(jué)。隨著社會(huì)生產(chǎn)力和科學(xué)技術(shù)的不斷發(fā)展，各行各業(yè)對(duì)虛擬現(xiàn)實(shí)技術(shù)的需求日益增加。虛擬現(xiàn)實(shí)技術(shù)也因此取得了巨大進(jìn)步，并逐步成為一個(gè)新的科學(xué)技術(shù)領(lǐng)域。

虛擬現(xiàn)實(shí)技術(shù)受到各大網(wǎng)站的青睞，紛紛在各自網(wǎng)頁(yè)上創(chuàng)造出屬于自己的獨(dú)特而又新穎的虛擬現(xiàn)實(shí)。

虛擬現(xiàn)實(shí)技術(shù)對(duì)于高職高專廣告設(shè)計(jì)專業(yè)的學(xué)生來(lái)說(shuō)有一定的難度，廣告專業(yè)的學(xué)生缺乏三維建模的能力，但廣告專業(yè)的學(xué)生可以通過(guò)360°全景攝影來(lái)制作和實(shí)現(xiàn)虛擬場(chǎng)景。

（三）Web設(shè)計(jì)中的響應(yīng)式布局在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能夠?yàn)椴煌闹悄茉O(shè)備提供良好地用戶體驗(yàn)，它的版面適合各類屏幕尺寸及分辨率。響應(yīng)式網(wǎng)站引入了流式布局，不僅在美感上得到提升，而且自適應(yīng)能力很強(qiáng)，在屏幕尺寸大小不同的電腦、智能設(shè)備上都能顯示網(wǎng)站頁(yè)面。

高職高專廣告設(shè)計(jì)與制作專業(yè)教學(xué)中依然是非響應(yīng)式的網(wǎng)頁(yè)設(shè)計(jì)，所做的網(wǎng)頁(yè)規(guī)格只適用于電腦設(shè)備，無(wú)法匹配手機(jī)、平板等不同屏幕尺寸及分辨率的智能設(shè)備上。廣告專業(yè)網(wǎng)頁(yè)設(shè)計(jì)中引入響應(yīng)式布局是很有必要的。

五、結(jié)語(yǔ)

UI交互技術(shù)中的Web設(shè)計(jì)涉及信息可視化設(shè)計(jì)、虛擬現(xiàn)實(shí)技術(shù)以及響應(yīng)式布局，這三個(gè)方面的內(nèi)容都可以在相關(guān)課程中引入，不僅豐富了課堂內(nèi)容，拓展了學(xué)生的技術(shù)，還能提高學(xué)生的學(xué)習(xí)興趣。

參考文獻(xiàn)：

[1]貍雅人.Photoshop智能手機(jī)APP界面設(shè)計(jì)[M].人民郵電出版社.2013

本文系2018年江蘇省教育廳高校哲學(xué)社會(huì)科學(xué)研究基金項(xiàng)目“UI交互設(shè)計(jì)技術(shù)在高職高專廣告設(shè)計(jì)與制作專業(yè)中的運(yùn)用探討”（項(xiàng)目批準(zhǔn)號(hào)：2018SJA0732）的研究成果。