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）的研究成果。