UI交互設計技術中的Web設計在高職高專廣告設計與制作專業中的運用

陳青陽

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

關鍵詞：UI交互設計技術;Web設計;高職高專廣告設計與制作

一、UI交互技術

交互技術指利用計算機輸入和輸出設備，實現人與設備交互的技術。人機交互技術主要分為以下幾種類型。

（一）通過硬件設備實行交互的技術

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

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

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

（三）通過觸控實行交互的技術

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

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

通過捕獲動作的關鍵部位進行計算和處理，分析出用戶的動作行為的意圖，并將其轉化為輸入指令，實現用戶與計算機之間的交互。

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

眼動追蹤的交互技術是通過捕獲人眼在注視不同位置時的細微變化，分析確定人眼的注視點，并將其轉化為信號發送給計算機，實現人與計算機之間的互動，這一過程中無需手動輸入。

二、Web設計

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

網頁UI設計不僅具備傳統視覺傳達的一般特征，而且還具備了新媒體時代的藝術形式，一個優秀的網頁可以給用戶帶來視覺上的美感和舒適的操作體驗。

新媒體時代的網頁與傳統媒體的最大區別在于與用戶的交互性以及信息會實時動態更新。網絡媒體的主要特征是交互性，這是網頁設計中必須要考慮的問題。

三、廣告設計與制作專業網頁設計課程的現狀

廣告設計與制作專業的網頁設計課程通過對學生系統的教學，讓其掌握網頁設計的基本原理及應用方法，并通過和相關課程緊密結合，達到相關知識的延續和發展。此課程涉及較多編程知識，藝術類的學生在計算機方面的知識、技能比較薄弱，入學之后也不接觸數學及計算機編成類的課程。目前的網頁設計課程存在以下幾個問題。

第一，網頁設計與制作課程沿用傳統教學模式，以板書教學和上機練習兩種教學為主。教師把網頁設計看成軟件設計課程來上，只局限于Dreamweaver的軟件操作。

第二，教學內容不能緊跟時代發展，在新媒體的日益發展的大環境下，智能終端不斷更新，網頁不只是在電腦端進行瀏覽，已經在各種智能設備上進行展示。傳統的網頁設計依然是以電腦端的尺寸來進行網頁設計，導致這些網頁在智能設備上因尺寸各不相同從而導致視覺效果很差，頁面瀏覽不方便。

四、UI交互設計技術中的Web設計在高職高專廣告設計與制作專業中的運用

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

交互技術中的一些技術規范，被靈活、有效地運用到了高職高專廣告設計與制作專業中。

（一）Web設計中的信息可視化在高職高專廣告設計與制作專業中的運用

信息可視化是一個跨學科的領域，匯集設計、心理學、哲學、認知科學和無數其他調查領域的圖表和知識，是藝術與科學的表現。信息可視化通過研究大規模的數據，利用圖形設計方面的技術與方法，以視覺的方式呈現給用戶，幫助人們理解數據。

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

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

（二） Web設計中的虛擬現實在高職高專廣告設計與制作專業中的運用

虛擬現實技術包含計算機仿真技術和電子信息，其展示方式是用計算機模擬虛擬的環境從而給人以身臨其境的感覺。隨著社會生產力和科學技術的不斷發展，各行各業對虛擬現實技術的需求日益增加。虛擬現實技術也因此取得了巨大進步，并逐步成為一個新的科學技術領域。

虛擬現實技術受到各大網站的青睞，紛紛在各自網頁上創造出屬于自己的獨特而又新穎的虛擬現實。

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

（三）Web設計中的響應式布局在高職高專廣告設計與制作專業中的運用

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

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

五、結語

UI交互技術中的Web設計涉及信息可視化設計、虛擬現實技術以及響應式布局，這三個方面的內容都可以在相關課程中引入，不僅豐富了課堂內容，拓展了學生的技術，還能提高學生的學習興趣。

參考文獻：

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

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