论文部分内容阅读
摘要：随着中国互联网的快速崛起，我国的网站数量在逐年的增加。企业也已认识到互联网的快速发展所带来的巨大收益，纷纷建立属于自己品牌形象宣传的新版企业网站或者电子商务类型网站。针对目前企业网站设计的特点，提出新的网站前端界面设计内容构成概念，旨在丰富基于企业网站界面设计的视觉传达要素构成的理论和实践内容。
关键词：网页设计；网页界面设计；网页视觉传达要素；网站内容构成
★基金项目：山东协和学院职业教育创新发展高地理论实践研究专项“新工科背景下基于OBE理念的《网页网站设计》课程改革实践与应用”（课题编号2020GD27）。
引言
据中国互联网信息中心CNNIC发布的《中国互联网第44次统计发展报告》中阐述：截止2019年6月，我国网民数量为8.54亿人，手机网民数量8.47亿人，农村网民数量为2.25亿人，城镇网民数量为6.3亿人，使用台式机上网、笔记本上网、平板电脑上网的比例分别为46.2%，36.1%和28.3%，网络购物用户规模6.39亿，互联网的普及率超过6成，移动互联使用持续优化。网站，已作为上网的主要依托，由于人们频繁的使用网络，而变得越来越重要。网站设计也得到突飞猛进的发展。一个优秀的企业网站，通常具备合理布局的页面元素、丰富多样的内容、赏心悦目的编排方式和视觉效果，并在这几个方面实现页面整体的和谐统一。只有这样，才能给网站浏览者留下深刻的印象。网站是由多个网页通过超级链接组成的有机整体。现在网页，无论是在内容层面，还是在形式层面，都已经有了极大的丰富，而网页视觉设计也具有了视觉传达的一般特征，在交互性方面、版式的不可控方面、技术和艺术的紧密性方面、多媒体的综合性方面、多维性方面均有了较大的提高。网页设计师必须具有强势的主题诉求能力和内容选择创造力。与传统媒体不同，网站界面设计除了文本和图像等基本元素外，还包含一些其他的重要元素。本文从网站内容建设方面入手，以SONY中国官方网站的截图（如图2所示）为例，详述企业网站内容视觉传达的构成要素。
1、网页界面基本元素
1.1 文本
文本，即文字，是人类最重要的信息载体和表现形式，也是人类进行思想和情感交流的重要手段。文字是信息传达中最普遍使用的视觉元素，是网页的主体内容。文字对于网站的气质风格有很大的影响，字体的样式、字号大小、加粗、倾斜、下划线、字距、行距、跳跃率、编排方式等字体效果可以明显的突出信息诉求。网页正文中使用较多的字体样式一般为黑体和宋体，黑体用于网页标题，宋体用于网页正文部分，但不绝对；目前较为典型的中文屏幕字体黑体包括方正兰亭黑、微软雅黑、黑体、信黑体等，如图1所示。
传统而规范的字体，偏小的字号，整齐、低跳跃率的编排，会给人平静、稳重的感觉，营造一种安静的气质；相反，使用字形活跃的字体，或者排版不规则、高跳跃率的组织，会使网站形成活跃的氛围。字距的大小由字体结构来决定，行距指的是临近两行文本之间的距离，行距过小容易造成上下文的干扰，行距过宽视觉效果变差、出现版面散、乱、无重心的视觉感受，也会降低文字的延续性。一般行距为1.25倍-2倍较佳。文字的排版方式受网站信息量和网站设计风格影响，文字信息量大时，采用齐头齐尾的块状排版方式；文字信息量不大时，文字排版较为灵活，但要注意协调对比、统一、节奏和平衡，并注意把控视觉秩序。在设计页面时，字体排版要注意两点：（1）在页面设计过程中，主、副标题要明确标出，可以利用不同字体的样式或者字号大小粗确标注出来，主副标题要大小层次分明、主次分明，这样浏览者可以轻松的抓取到它本身的在意点。（2）在网页页面中，使用的字体样式不要过多，尽量不要超过三种，字体太多，会让页面很乱，没有统一性。
1.2 图像
图像在网站中应用比较多，在网页的信息诉求中起到体现风格、美化网页、提供信息、展示作品的作用。与文字相比，图像在信息传递方面更加直观和生动，更易吸引用户的视线，能够更好的帮助用户聚焦信息，并引导用户行为。尤其是在产品销售型企业网站中，图像的作用更为显著，它能直观的突出产品整体外观、提供相应产品信息和产品品质，一般宜用细腻、质感、分辨率高的位图图像，以体现产品的调性定位和风格。网页中使用较多的图像格式为JPG位图图像和GIF矢量图图像。JPG图像在复杂图像、细微色彩、阴影色彩、连续色调表现等方面具有明显优势，使用有损压缩模式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤，并失真。GIF矢量图像在线条表现方面，具有相关的优势，支持放大、缩小、旋转等方面，不失真，不影响清晰度，支持全透明/半透明（alpha）/不透明模式。
2、网页界面扩展元素
2.1 网站LOGO
网站Logo是整个网站对外宣传、展示的重要标识和标志，是网站特色和内涵的集中体现，它用于传递企业网站的定位和经营理念。 LOGO设计隶属于企业VI视觉设计的表现点之一，其具有简洁、明确、高度凝练，一目了然的视觉传递特性，特别强调辨识性和独特性的要求，其目的为强化受众区别性的记忆及持续的品牌忠诚度。Logo的内容通常包括特定的图形和文本。其中，图形往往与网站的具体内容或开发网站的企业文化紧密结合，以体现网站的定位和特色；文本主要起到加深用户印象的作用，一般介绍网站的名称、服务，也可以体现网站的价值观、宣传口號。简洁、明快、流畅、瞬间印象的诉求使得LOGO的设计越来越追求独特、高度的洗练。一般采用合成文字的设计方式。设计网站LOGO时，面向对象的应用要做出相应的规范，对指导网站的整体建设具有极现实的意义。
2.2 Banner
banner是企业网站的核心组成部分，其宣传展示效果越来越受到设计师重视，其空间大小占据网页界面设计一定的比例。banner的构成主要为企业文化活动形象展示区或为主推爆款产品的诉求展示区。Banner的设计表现形式会根据企业网站风格而设计多样化，或企业活动拍摄、FLASH动画、手绘插画风格、C4D、高级图像合成等设计手法，但不管使用何种手法，符合视觉主题表达及企业形象调性、激发目标客户群的兴趣和诉求核心的企业价值观，才是banner设计的首要任务。在设计过程中， banner主题文字数量要适中，不能过多，要一目了然。通过文字排版及视觉传达诉求，契合网页设计要素，配合好文字样式、 大小、粗细等效果，博人眼球，做好视觉冲击点的设计。Banner的设计高度应根据品牌的要求来做相应的调整，最佳尺寸在450-1000PX。
2.3 图形符号
在网页设计中，图形符号不占有一定的比例，但是图形符号可以很深刻的影响网站的视觉美观度，具有设计形态简单、点缀、丰富、润色的特点。网页中的图形符号，主要包括网站的ICON图标、按钮、项目符号等；图标是具有指代功能的图像，其存在的目的就是帮助用户快速识别和找到网站中的相应内容，要求图像设计与页面整体风格统一、易于识别、与网页相协调、富有创意、高度凝练等特性；按钮的设计主要有两种，一种是具有表单数据提交功能的按钮，另一种是仅仅表示链接功能的“伪按钮”。前者用于实现功能，后者侧重设计美观，强调整体的协调统一。
3、网页页面布局元素
3.1 导航系统
一个优秀的企业网站必须具有清晰的层次结构，即物理结构和逻辑结构。通俗的讲，物理结构是网站的实际目录结构，就是由文件夹和文件构成的树状目录；逻辑结构是网站内的链接构成的一个巨大的网络图，它反映网站强大的逻辑关系。网站导航根据所在网页位置一般分为导航条设计（横向）、侧边导航栏设计（纵向）、顶部导航设计、标签导航、面包屑导航、多媒体导航等。导航的设计现在也是网站风格调性的表现点之一，好的导航设计在实用功能体现的同时，也能体现网站风格。定位好的扁平化导航设计，可以使企业网站的层次感分明，使浏览者能够快速定位到相应的模块，从而引发兴趣、激发需求、产生信任、打消疑虑等一系列的心理过程。规模大一些的企业网站，导航系统往往需要两到三层，甚至更多层级目录。根据经验，一般将网站的逻辑结构设计要素总结如下：1、网站主页需要链接所有的频道主页。2、网站主页一般不直接链接内容页面，除非是非常想突出推荐的特殊页面。3、所有的频道主页需要与其他频道主页相互链接，并能都返回到主页。4、频道主页也需要连接到自己的频道内容页面，一般不连接其他频道的内容页面。5、所有内容页面都能够返回网站主页。优秀的网站其导航系统的物理结构和逻辑结构都会非常出色，两者可以相互结合，又可以有所区分。而控制好的逻辑结构会使用户体验更加优异，并且能够促进和带动整个网站的页面在搜索引擎上的权重。
3.2 超级链接
超级链接可以将多个闲散的页面组织起来，使多个页面构成一个有机整体，超级链接在网页中的运用，大体可以分为：站内链接，站外链接，文件下载链接、锚点链接、脚本链接、电子邮件链接等。在网站中应用比较多的为站内链接和锚点链接；站内链接可以将本网站内的文件串并起来构成一个有组织结构的整体；锚点链接可以将网页内容较多时，将网站定位到本页面的某一个位置或者另外页面的某个固定位置。定位清晰明确，可以让浏览者快速找到某个网页位置，增加网页内容的可读性。
3.3 表格
表格，又称为表，既是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。在企业网站设计中，它是重要的布局工具，起到网页元素定位与组织布局的作用。通过表格菜单，可以从整体页面规划上进行有效的规划和排版，在符合视觉流程的前提下，从整体上调控各个页面元素的分布与排列。目前的网站设计中可以用Table+Div+Css来进行网页的布局、定位和实施。
4、网页界面增效元素
4.1 表单
表单是网页中交互设计中的提供反馈和收集信息的重要工具，其作用对于用户而言，是数据的录入和提交的界面；而对于网站而言，是获取用户信息的途径。表单实质由两部分组成：一、存储表单控件的网页文件；二、处理表单提交数据的处理程序。该程序在服务器上运行，一般与后台数据库配合使用。在企业网站中的表单的主要应用有：用户注册表、网站反馈信息、调查问卷、站内搜索等。
4.2 多媒体及特效
多媒体的使用可以让网页元素更加丰富，多媒体包含的内容比较宽泛，在网页设计中，特指音频技术、视频技术及动画效果。音频即为声音，视频元素可以将传统媒体宣传报道与网络媒体相结合，利用网络媒体7*24小时不间断服务的特性，起到相互映衬或者不间断广告宣传的作用。动画元素可以摒弃因文字或图像展示过于单调、刻板、局部等方面的缺陷，使主题的传达诉求更具有直观性和可信赖性。特效，即特殊效果，指的是在网页中利用JAVA语言的脚本程序或者VB语言的脚本程序来完成特殊的网页视觉效果制作，包含图像特效、鼠标特效、代码特效等。
5、小结
本文从网页界面基本元素、网页界面扩展元素、网页界面布局元素、网页界面增效元素四个方面来阐述企業网站视觉界面设计的元素的构成，重点分析了文本、banner及导航系统的设计，凝练提出了扩展元素部分的图像符号的设计理论，丰富完善基于企业网站界面设计的视觉元素构成分析。
参考文献：
[1] 杨飞飞.企业网站视觉互动设计与品牌传[J].创意与设计，2013（6）：33-38.
[2] 刘桃媛.网页界面设计中视觉要素的比例关系研究[D].南京：南京理工大学，2017.
[3] 郭芳.现代企业类网站版式设计研究[D].济南：山东大学，2013.
[4] 马福浚.基于视觉体验理论的WEB界面设计研究[D].济南：山东大学，2011.
作者简介：郭恩，讲师，现就职于山东协和学院，研究方向为WEB开发、数据库系统、电子商务、管理信息系统。
关键词：网页设计；网页界面设计；网页视觉传达要素；网站内容构成
★基金项目：山东协和学院职业教育创新发展高地理论实践研究专项“新工科背景下基于OBE理念的《网页网站设计》课程改革实践与应用”（课题编号2020GD27）。
引言
据中国互联网信息中心CNNIC发布的《中国互联网第44次统计发展报告》中阐述：截止2019年6月，我国网民数量为8.54亿人，手机网民数量8.47亿人，农村网民数量为2.25亿人，城镇网民数量为6.3亿人，使用台式机上网、笔记本上网、平板电脑上网的比例分别为46.2%，36.1%和28.3%，网络购物用户规模6.39亿，互联网的普及率超过6成，移动互联使用持续优化。网站，已作为上网的主要依托，由于人们频繁的使用网络，而变得越来越重要。网站设计也得到突飞猛进的发展。一个优秀的企业网站，通常具备合理布局的页面元素、丰富多样的内容、赏心悦目的编排方式和视觉效果，并在这几个方面实现页面整体的和谐统一。只有这样，才能给网站浏览者留下深刻的印象。网站是由多个网页通过超级链接组成的有机整体。现在网页，无论是在内容层面，还是在形式层面，都已经有了极大的丰富，而网页视觉设计也具有了视觉传达的一般特征，在交互性方面、版式的不可控方面、技术和艺术的紧密性方面、多媒体的综合性方面、多维性方面均有了较大的提高。网页设计师必须具有强势的主题诉求能力和内容选择创造力。与传统媒体不同，网站界面设计除了文本和图像等基本元素外，还包含一些其他的重要元素。本文从网站内容建设方面入手，以SONY中国官方网站的截图（如图2所示）为例，详述企业网站内容视觉传达的构成要素。
1、网页界面基本元素
1.1 文本
文本，即文字，是人类最重要的信息载体和表现形式，也是人类进行思想和情感交流的重要手段。文字是信息传达中最普遍使用的视觉元素，是网页的主体内容。文字对于网站的气质风格有很大的影响，字体的样式、字号大小、加粗、倾斜、下划线、字距、行距、跳跃率、编排方式等字体效果可以明显的突出信息诉求。网页正文中使用较多的字体样式一般为黑体和宋体，黑体用于网页标题，宋体用于网页正文部分，但不绝对；目前较为典型的中文屏幕字体黑体包括方正兰亭黑、微软雅黑、黑体、信黑体等，如图1所示。
传统而规范的字体，偏小的字号，整齐、低跳跃率的编排，会给人平静、稳重的感觉，营造一种安静的气质；相反，使用字形活跃的字体，或者排版不规则、高跳跃率的组织，会使网站形成活跃的氛围。字距的大小由字体结构来决定，行距指的是临近两行文本之间的距离，行距过小容易造成上下文的干扰，行距过宽视觉效果变差、出现版面散、乱、无重心的视觉感受，也会降低文字的延续性。一般行距为1.25倍-2倍较佳。文字的排版方式受网站信息量和网站设计风格影响，文字信息量大时，采用齐头齐尾的块状排版方式；文字信息量不大时，文字排版较为灵活，但要注意协调对比、统一、节奏和平衡，并注意把控视觉秩序。在设计页面时，字体排版要注意两点：（1）在页面设计过程中，主、副标题要明确标出，可以利用不同字体的样式或者字号大小粗确标注出来，主副标题要大小层次分明、主次分明，这样浏览者可以轻松的抓取到它本身的在意点。（2）在网页页面中，使用的字体样式不要过多，尽量不要超过三种，字体太多，会让页面很乱，没有统一性。
1.2 图像
图像在网站中应用比较多，在网页的信息诉求中起到体现风格、美化网页、提供信息、展示作品的作用。与文字相比，图像在信息传递方面更加直观和生动，更易吸引用户的视线，能够更好的帮助用户聚焦信息，并引导用户行为。尤其是在产品销售型企业网站中，图像的作用更为显著，它能直观的突出产品整体外观、提供相应产品信息和产品品质，一般宜用细腻、质感、分辨率高的位图图像，以体现产品的调性定位和风格。网页中使用较多的图像格式为JPG位图图像和GIF矢量图图像。JPG图像在复杂图像、细微色彩、阴影色彩、连续色调表现等方面具有明显优势，使用有损压缩模式，能够将图像压缩在很小的储存空间，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤，并失真。GIF矢量图像在线条表现方面，具有相关的优势，支持放大、缩小、旋转等方面，不失真，不影响清晰度，支持全透明/半透明（alpha）/不透明模式。
2、网页界面扩展元素
2.1 网站LOGO
网站Logo是整个网站对外宣传、展示的重要标识和标志，是网站特色和内涵的集中体现，它用于传递企业网站的定位和经营理念。 LOGO设计隶属于企业VI视觉设计的表现点之一，其具有简洁、明确、高度凝练，一目了然的视觉传递特性，特别强调辨识性和独特性的要求，其目的为强化受众区别性的记忆及持续的品牌忠诚度。Logo的内容通常包括特定的图形和文本。其中，图形往往与网站的具体内容或开发网站的企业文化紧密结合，以体现网站的定位和特色；文本主要起到加深用户印象的作用，一般介绍网站的名称、服务，也可以体现网站的价值观、宣传口號。简洁、明快、流畅、瞬间印象的诉求使得LOGO的设计越来越追求独特、高度的洗练。一般采用合成文字的设计方式。设计网站LOGO时，面向对象的应用要做出相应的规范，对指导网站的整体建设具有极现实的意义。
2.2 Banner
banner是企业网站的核心组成部分，其宣传展示效果越来越受到设计师重视，其空间大小占据网页界面设计一定的比例。banner的构成主要为企业文化活动形象展示区或为主推爆款产品的诉求展示区。Banner的设计表现形式会根据企业网站风格而设计多样化，或企业活动拍摄、FLASH动画、手绘插画风格、C4D、高级图像合成等设计手法，但不管使用何种手法，符合视觉主题表达及企业形象调性、激发目标客户群的兴趣和诉求核心的企业价值观，才是banner设计的首要任务。在设计过程中， banner主题文字数量要适中，不能过多，要一目了然。通过文字排版及视觉传达诉求，契合网页设计要素，配合好文字样式、 大小、粗细等效果，博人眼球，做好视觉冲击点的设计。Banner的设计高度应根据品牌的要求来做相应的调整，最佳尺寸在450-1000PX。
2.3 图形符号
在网页设计中，图形符号不占有一定的比例，但是图形符号可以很深刻的影响网站的视觉美观度，具有设计形态简单、点缀、丰富、润色的特点。网页中的图形符号，主要包括网站的ICON图标、按钮、项目符号等；图标是具有指代功能的图像，其存在的目的就是帮助用户快速识别和找到网站中的相应内容，要求图像设计与页面整体风格统一、易于识别、与网页相协调、富有创意、高度凝练等特性；按钮的设计主要有两种，一种是具有表单数据提交功能的按钮，另一种是仅仅表示链接功能的“伪按钮”。前者用于实现功能，后者侧重设计美观，强调整体的协调统一。
3、网页页面布局元素
3.1 导航系统
一个优秀的企业网站必须具有清晰的层次结构，即物理结构和逻辑结构。通俗的讲，物理结构是网站的实际目录结构，就是由文件夹和文件构成的树状目录；逻辑结构是网站内的链接构成的一个巨大的网络图，它反映网站强大的逻辑关系。网站导航根据所在网页位置一般分为导航条设计（横向）、侧边导航栏设计（纵向）、顶部导航设计、标签导航、面包屑导航、多媒体导航等。导航的设计现在也是网站风格调性的表现点之一，好的导航设计在实用功能体现的同时，也能体现网站风格。定位好的扁平化导航设计，可以使企业网站的层次感分明，使浏览者能够快速定位到相应的模块，从而引发兴趣、激发需求、产生信任、打消疑虑等一系列的心理过程。规模大一些的企业网站，导航系统往往需要两到三层，甚至更多层级目录。根据经验，一般将网站的逻辑结构设计要素总结如下：1、网站主页需要链接所有的频道主页。2、网站主页一般不直接链接内容页面，除非是非常想突出推荐的特殊页面。3、所有的频道主页需要与其他频道主页相互链接，并能都返回到主页。4、频道主页也需要连接到自己的频道内容页面，一般不连接其他频道的内容页面。5、所有内容页面都能够返回网站主页。优秀的网站其导航系统的物理结构和逻辑结构都会非常出色，两者可以相互结合，又可以有所区分。而控制好的逻辑结构会使用户体验更加优异，并且能够促进和带动整个网站的页面在搜索引擎上的权重。
3.2 超级链接
超级链接可以将多个闲散的页面组织起来，使多个页面构成一个有机整体，超级链接在网页中的运用，大体可以分为：站内链接，站外链接，文件下载链接、锚点链接、脚本链接、电子邮件链接等。在网站中应用比较多的为站内链接和锚点链接；站内链接可以将本网站内的文件串并起来构成一个有组织结构的整体；锚点链接可以将网页内容较多时，将网站定位到本页面的某一个位置或者另外页面的某个固定位置。定位清晰明确，可以让浏览者快速找到某个网页位置，增加网页内容的可读性。
3.3 表格
表格，又称为表，既是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。在企业网站设计中，它是重要的布局工具，起到网页元素定位与组织布局的作用。通过表格菜单，可以从整体页面规划上进行有效的规划和排版，在符合视觉流程的前提下，从整体上调控各个页面元素的分布与排列。目前的网站设计中可以用Table+Div+Css来进行网页的布局、定位和实施。
4、网页界面增效元素
4.1 表单
表单是网页中交互设计中的提供反馈和收集信息的重要工具，其作用对于用户而言，是数据的录入和提交的界面；而对于网站而言，是获取用户信息的途径。表单实质由两部分组成：一、存储表单控件的网页文件；二、处理表单提交数据的处理程序。该程序在服务器上运行，一般与后台数据库配合使用。在企业网站中的表单的主要应用有：用户注册表、网站反馈信息、调查问卷、站内搜索等。
4.2 多媒体及特效
多媒体的使用可以让网页元素更加丰富，多媒体包含的内容比较宽泛，在网页设计中，特指音频技术、视频技术及动画效果。音频即为声音，视频元素可以将传统媒体宣传报道与网络媒体相结合，利用网络媒体7*24小时不间断服务的特性，起到相互映衬或者不间断广告宣传的作用。动画元素可以摒弃因文字或图像展示过于单调、刻板、局部等方面的缺陷，使主题的传达诉求更具有直观性和可信赖性。特效，即特殊效果，指的是在网页中利用JAVA语言的脚本程序或者VB语言的脚本程序来完成特殊的网页视觉效果制作，包含图像特效、鼠标特效、代码特效等。
5、小结
本文从网页界面基本元素、网页界面扩展元素、网页界面布局元素、网页界面增效元素四个方面来阐述企業网站视觉界面设计的元素的构成，重点分析了文本、banner及导航系统的设计，凝练提出了扩展元素部分的图像符号的设计理论，丰富完善基于企业网站界面设计的视觉元素构成分析。
参考文献：
[1] 杨飞飞.企业网站视觉互动设计与品牌传[J].创意与设计，2013（6）：33-38.
[2] 刘桃媛.网页界面设计中视觉要素的比例关系研究[D].南京：南京理工大学，2017.
[3] 郭芳.现代企业类网站版式设计研究[D].济南：山东大学，2013.
[4] 马福浚.基于视觉体验理论的WEB界面设计研究[D].济南：山东大学，2011.
作者简介：郭恩，讲师，现就职于山东协和学院，研究方向为WEB开发、数据库系统、电子商务、管理信息系统。