网页设计课程中融入UI 设计理念的教学探索

张延玲　喻芸

摘要：UI设计与网页设计紧密相关，网页UI界面设计师成为社会上需求的热门人才，所以在网页设计课程中融入UI设计理念，先明确UI设计师的工作内容，让学生进行自我定位，再强调用户体验的重要性，了解以人为本的网页UI设计原则，接着介绍了云时代UI设计的新方向，最后详细阐述了在网页设计课程的项目教学中需要加入哪些UI设计知识以及如何训练学生提高网页UI设计水平。

关键词：网页设计；UI设计；网页UI；用户体验；UI设计方向

中图分类号：G642 文献标识码：A 文章编号：1009-3044（2015）34-0178-02

Abstract： UI design and web design is closely related to the web UI interface designers to become a popular talent， so in the web design course into the UI design concept， first clear UI designer's work content， let students to self positioning， and emphasize the importance of user experience， to understand the people-oriented UI design principle， and then introduced the UI design of the new direction， and finally， in the web design courses teaching in which UI design knowledge and how to train students to improve web UI design level.

Key words： Web design； UI design； Web UI； user experience； UI design direction

在今天这个“互联网+”的时代，有问题找“度娘”已经成为人们的口头禅，网页成为人们浏览信息、获取信息、交流信息的主要方式之一，网页成为个人、公司或企业展示自我宣传推广的有效媒介。因此，网页编程设计师、网页设计师、网页UI界面设计师应运而生，也成为社会上大量需求的热门人才。网页设计课程是计算机专业的必修课，就业市场决定专业设置，正是这样的人才和专业的需求关系，国内大部分院校对网页设计课程的重视程度越来越大。

UI设计与网页设计紧密相关。UI（user interface） 的本意是用户与产品界面的关系，UI 设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的 UI 设计不仅是让网页变得具有美感、个性和品位，还能让操作变得舒适、简单、自由[1]。网页UI 设计不仅重视好看，更要体现好用。网页UI 设计本身已不再是单纯的视觉设计，而是将视觉设计与人的行为习惯、生活方式、心理体验等结合在一起的设计。

优秀的网页UI设计师要精通网页UI编码设计与网页UI界面设计两个部分，目前大部分院校开设的网页设计课程偏向于网页编码设计，主要学习用Dreamwear软件制作网页，涉及HTML、CSS、DIV、JavaScript等知识，有些自诩水平高的教师会让学生完全用代码编写网页，侧重于功能的实现，对于网页界面则一带而过，学生制作出的页面粗糙凌乱毫无美感，进入社会后大部分会选用网页模板，但会千篇一律缺乏设计创意和艺术造型。为了提高学生的网页设计水平，我尝试在网页设计课程中融入UI设计理念的教学探索。

1 了解UI设计理论，明确自我定位

UI是英文User和Interface的缩写，包括用户与界面两个部分，实际上指网页、软件、游戏、手机APP等电子视觉产品在用户使用过程中针对用户心理感受、操作互动逻辑、界面美观舒适的一系列设计。它是产品的重要卖点，地位等同于与工业产品中的工业造型设计，一个外观漂亮、界面友好、互动合理的电子视觉产品会使人感觉亲切舒适，更易于接受。国内外众多大型互联网IT企业都已经有比较完善的 UI设计部门，如腾讯CDC、百度UED、淘宝UED等等，都致力于互联网产品的产品调研、用户研究、交互设计、视觉设计等[2]。

UI设计师从工作内容的侧重点上来说分为3个方向，分别是图形设计师、交互设计师、用户测试工程师。图形设计师研究界面，是软件产品的外形设计师；交互设计师研究人与界面的关系，设计软件的操作流程、操作规范、软件的结构等；用户测试工程师研究人，测试用户的感受，对于网页交互设计的合理性及界面图形色彩设计的美观性进行测试。图形设计师需要有美术设计功底，交互设计师需要有软件程序设计知识，用户测试工程师需要心理学人文学知识。

根据学生的个人特点，明确自我定位，学习补充所需要的知识。

2 强调网页UI设计中用户体验的重要性

检验一个网页设计好坏的标准不是项目开发组领导的意见，而是用户体验。苹果公司 CEO 斯蒂芬·乔布斯曾经说过 ：“任何个性化的前提都是满足人们的需求，这个需求就是要做好用户体验——让用户因为使用苹果的产品而爽起来。”[3] 在UI 设计师在网页设计中承担着用户体验的重要使命。好的网站界面设计不仅仅是图形和色彩的搭配、板块栏目的规划等，还应该研究用户的生活方式、社会文化、上网习惯以及审美心理等方方面面。要以用户为中心、以人为本。

网页UI设计的主要原则包括以下几个方面：

以人为本的用户导向原则。设计网页首先要明确谁才是使用者，要站在用户的观点和立场上来考虑。网页设计的界面风格符合用户的审美观，交互功能要正确、合理，不能过于专业化。以理服人，以情感人。

KISS简洁原则。KISS就是"Keep It Sample And Stupid"的缩写，网页设计要简洁和易于操作，过于花哨的图片、复杂的操作反而会引起用户反感。

眼睛和心理的共通性原则[1]。在图形和色彩、信息呈现、板块规划、交互体现上都应该兼顾美学和心理的感受。

3 云时代UI设计的方向

在现在云计算、云存储、云共享的云时代，UI设计的方向也发生着重大转变。

首先是以视觉为主导，更注重视觉效果的“炫”。将文字转化成图形，图形图像成为传递和获取信息的强势媒介，简洁而严谨，直接而明快，视觉效果十分强烈。

其次是以内容为王。“内容为王”指的是界面设计应该为内容服务 [4]。强调传达功能，去除不必要的装饰。过去的UI 设计过于美化图标、按钮和修饰界面，随着时代发展，我们慢慢发现许多“精美”的设计反而成为一种干扰，影响用户的体验，也加重了系统的负担。

第三是构建动态友好的交互。动态效果能给更好的视觉享受，能让用户身临其境，融入其中。灵动多变的动态交互构建起人与设备、人与信息、人与人之间的有生命力的连接，充分体香出了数字设备的特点乃至数字化生活的时代特质，。

4 在网页设计课程的教学中融入UI设计内容

在实际网页设计课程的讲解中，将以上的UI理论、用户体验、UI设计方向等内容融入日常教学，将网页设计课程内容扩大，在网页课程中引入UI设计内容中，为学生将来的从事网页界面UI设计工作打下正确的专业基础。

在网页设计课程学习中，在学习了Html、css、div等编程知识后，还要掌握相关平面设计制作软件的基本操作，以及简单的平面设计知识，如版式的布局、色彩的搭配、产品标志的设计、文案的设计、Banner设计、文字的创意等，并将平面设计知识与网页设计课程融会贯通，综合应用。

在实训教学中也给学生增加UI设计实践练习。如在课程中增加静态与动态的图标ICON制作练习、BANNER条制作练习、整体界面色彩搭配练习、企业LOGO动态设计与制作练习、交互按钮动态设计等。不是随便使用图形，而是经过精心设计、与网页表达思路相关的图形，设计好图形后，运用PhotoShop、Adobe illustrator、FLash等软件来绘制图标图形，增加学生的动手能力。通过这样的创意制作，体会静态视觉效果与动态视觉效果的差别之处。

在项目化教学的过程中根据实际需求，不断分析研究、合理调整、阶段总结，运用多种教学方法启发学生的想象力，激发学生对网页UI设计的热情和创作灵感。利用课题专项分别训练和综合项目实战相结合的方法，带领学生参加网站UI设计项目的实际制作，单项训练包括：UI基本元素，如图标、按钮、LOGO、导航、栏目等的设计；综合训练：将单项训练的成果综合在一起设计出符合用户浏览习惯并且设计感强的网站UI界面设计；个人训练：依据个人喜好及审美设计并制作出独特、个性的网页UI设计作品。

5 结束语

计算机专业网页设计的教学中，单纯讲授代码知识，学生的就业面会很窄，现在社会上需求大量的即能应用代码进行网页编码设计，又会UI界面设计的人才。所以在网页设计课程教学过程中，融入了UI设计的理念，先明确UI设计师的工作内容，让学生进行自我定位，再强调用户体验的重要性，了解以人为本的网页UI设计原则，接着介绍了云时代UI设计的新方向，最后详细说明在网页设计课程的项目教学中需要加入哪些UI设计知识以及如何训练学生提高网页UI设计水平。

参考文献：

[1] 王晓丹. 以人为本 创新感受——浅谈网页设计中 UI 设计的用户体验[J]. 中国艺术， 2012（2）： 148.

[2] 梁亮. 新型 UI 设计在艺术设计专业中的教学探索研究[J]. 美与时代， 2015（9）： 119-120.

[3] 沃尔特·艾萨克森. 史蒂夫·乔布斯传[D]. 北京： 中信出版社， 2011.

[4] 王正林. UI设计的理念和方向：以Windows UI为例[J]. 装饰， 2015（2）： 138-139.