基于WEB岗位的网页界面设计新教学内容探索

摘要：在网页界面设计的教学中，一般是先落实布局和配色的知识，然后分析常见类型网页。本文在保留网页界面设计基本内容的基础上尝试挖掘出新内容。由于以文字，按钮、图像和动画为主要形式的网页界面设计逐渐变得没有新意，而现在普遍看到的网页和以往相差较大，比如网页的风格主要出现了扁平化风格、手绘风格、立体风格、纹理和质感风格超、现实主义风格等；表现形式有图标、仿手绘、鼠绘、非主流、编程动画等。

关键词：分析首页；网页特点；新的美学观和设计趋势

一、首页分析和设计

选取并整理出具有代表性的首页，这些首页涵盖游戏、活动专题、产品展示、电子商务等类型。如：

第4个首页，尺寸是1200像素*1320像素，主题是个人作品；主要有黑白色；

第7个首页，尺寸是1200像素*1172像素，主题是产品展示；主要有绿黄蓝灰橙色；

第11个首页，尺寸是1200像素*1400像素，主题是餐饮类；主要有棕色；

第1个首页，网页布局是（1）网页头部（网站标题、广告语、logo、公司简介）；（2）导航（主导航、二级导航、主题图标和文字说明）；（3）网站主要内容（主题主要内容、图片以及主题的尾部内容）；（4）网页底部（标题、LOGO、版权信息）。

第6个首页，网页布局是（1）网页头部（LOGO，导航，某个菜单下的左侧文字区和右侧幻灯片区）。（2）网页主体（四个框，每个框里加图标和标题文本。再分两个文字区，上区分左右不等两块，区分同等四块）。（3）页脚。

第8个首页，网页布局是（1）网页头部（上面是LOGO，下面是导航，放在方块里）。（2）网页主体（banner，上、中、下三个区。上区是标语和按钮，中区又均分为四个部分，分别是图标和文字，下区分左长块和右短块，分别是标题和文字）。（3）页脚。

第9个首页，网页布局是（1）网页头部（背景框里放上矢量素材，上面是立体小矩形框，在小矩形框里放LOGO，右边添加标语文字；导航条，下方是背景条，条中放矢量素材，banner，中间是圆形画面，两边是文字标题和文字说明，说明下加矢量素材）。（2）网页主体（左栏是文章，文章分上中下三个区。每个区的标题下架矢量素材，文字说明区右侧加超链接；右栏是三个上中下排列的图片区加图片说明）。（3）页脚（版权信息，矢量图片做底）。

通过分析首页，了解网页类型，网页尺寸，网页基本布局，网页的基本元素如文字、按钮等，了解产品图像、BANNER、特效、游戏网页界面、封面式布局在网页上的应用。

二、典型网站特点分析

接下来选取艺术网站、旅游网站、医疗保健网站、房地产网站、餐饮酒店网站、新闻网站、教育网站、美容化妆网站、IT数码网站、童装网站、食品网站等进行分析。主要目的是了解网页的素材特点和行业内容。现举例如下：

（一）政府网站

阳江市政府网站特点是：（1）合理清晰的网站导航，比如有网站首页、走进阳江、信息公开、互动交流、在线服务和数据开放6个主导航；（2）栏目科学明确，比如有阳江要闻、部门资讯、县区动态、政声传递、政府信息公开目录、重点领域信息公开、公告公示、视频新闻8个栏目；（3）配色特点以蓝色为主，白色做背景，黑色文字，可读性强，呈现的信息多。

（二）医疗保健网站

阳江市人民医院特点是：（1）主要展示医院实力及亮点，比如国家级青年文明号；（2）充分体现服务性，比如有首页、医院概况、新闻中心医院文化、特色医疗、就医指南、信息公开、人力资源、求医问药、青年文明号、中医部、联系我们12个栏目；（3）配色特点禁忌过于沉重的色彩。

（三）新闻网站

中国首都网特点是：（1）合理清晰的网站导航，比如有北京、人事、法治、千龙原创、廉政、军事、文化、教育、经济、国企、科技、住房、娱乐、体育、工商、汽车、旅游、质监、采访、评论、图像、视频、兔爷动漫、中国、国际、公益、冰雪、社区、拍客、FM、千龙图表、中关村、智库、English共34个主导航；（2）互动性强，比如有京城新闻客户端、千龙网微信、千龙网微博、微信号矩阵、手机千龙网5个应用；（3）页面超长，可滚动4到5屏；（4）时效性，比如有更多头条、今日聚焦、一周要闻等专栏。

（四）教育网站

中国美术学院特点是：（1）艺术感强的BANNER，比如有轮播效果且画面时尚唯美；（2）栏目分类明确，比如有国美日新、综合资讯、两学一做、学术预告、通知公告、教学科研、国美聚焦、国美校史、院长讲坛、院系导航10个栏目；（3）一级导航有首页、学院、教学、研创、招生、师资、交流、院报8个；（4）内容丰富，有34个二级导航。

三、网页中新的设计趋势

现代网站多采用扁平化风格、立体风格、复古风格、卡通风格等，在设计元素上多采用矢量图标、彩色铅笔效果、照片人物转手绘、彩色水墨、人物插画等。

（1）矢量图标：传智播客智能物联网、蓝桥杯、知网网页这三个网站中，可见到大量的矢量图标。制作矢量图标主要用到钢笔工具、形状工具以及矢量绘制方法。

（2）彩色铅笔：在阳江职业技术学院网站主页BANNER中可以见到，主要用到图像调整，混合模式，滤镜。

（3）照片人物转手绘：主要用表面模糊滤镜、涂抹工具以及钢笔工具勾勒眉毛部分、下眼睑和眼皮部分。

（4）彩色水墨：主要用到去色、色阶和水彩滤镜以及图层混合模式。经过这些内容的挖掘，学生在界面设計的艺术美感上有很大提升，不仅能审美，还能自己创造美。这些新的设计思想和实践过程充分体现在网页界面的各个地方，比如导航、BANNER、主体部分、页脚等。这些内容可以对接UI界面设计和WEB前端岗位。

作者简介：杨玲（1979），女，土家族，湖南张家界人，本科，广东工业大学工程硕士在职研究生，阳江职业技术学院讲师，主要研究方向：数字媒体等。