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

陳青陽

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

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

一、UI交互技術(shù)

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

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

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

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

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

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

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

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

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

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

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

二、Web設(shè)計

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

五、結(jié)語

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

參考文獻(xiàn)：

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

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