论文部分内容阅读
[摘要]:网站是计算机技术所带来的信息传播方式,无论是商业网站还是个人网站,要想使网页丰富多彩,吸引大量访问者,给读者舒畅的感觉,首先要从版式设计入手。版式设计应用在网页中有其特有的设计原则和设计方法。
[关键词]:网页版式设计 网格设计 自由版式设计
中图分类号:D046.3 文献标识码:D 文章编号:1009-914X(2012)35- 0408-01
一、网页版式设计的重要性
网站是计算机技术所带来的信息传播方式,和书籍、雜志、报纸等传统媒体一样,也是一种视觉语言。无论是商业网站还是个人网站,要想使网页丰富多彩,吸引大量访问者,需要特别讲究编排和布局,也就是说网页的版式设计至关重要。优秀的版式设计会给访问者留下良好的第一印象,给访问者舒畅的感觉,在视觉上也不会疲劳。
二、网页版式设计形式原理
1、网页类型
网页界面类型的划分是一个复杂的问题。平时人们接触更多的是网站类型的划分,如门户型网站、电子商务网站、个人网站等。事实上,网页界面可以依据其传达信息内容的特点来进行类型的划分,主要有以下6种。
信息查询类,大众媒体类,宣传窗口类,电子商务类、交流平台类、网络社区类。
2、形式原理
比例,是整体形式的部分与部分之间,部分与整体之间的数量比率关系。比例是在配置与组合过程中数量上的优化选择,让人们有“恰到好处”的心理感受。
在网页设计上,空间可分为空间等量分割和空间不等量分割两种。下面分别予以介绍。
空间等量分割。将页面空间进行等量的分割,放入不同的图形图像的文字,以产生秩序的美。
空间不等量分割。将页面进行不等量的空间分割,将页面空间产生对比与节奏感。
对称,指形态以某一点为中心,其左右或上下因同等、同量、同形而形成的平衡。对称的形式法则是自然法则在设计上的具体表现,对称存在于很多自然形态中。
均衡,是指版面以某一点为中心,在左右或上下等量分布。均衡是一种造型上有变化的平衡状态,具有变化的统一性。揭示了形式内在的持续和平衡,体现了造型动与静结合的动态之美。
节奏,是指单体按照一定条理、秩序、重复连续地排列,形成一种律动形式。在版式设计中也是如此,同样的形态、同样的色彩变化、同样的明暗对比以反复、渐变的方式出现,使人体会到一种类似音乐中的节奏,从而产美学体验。
韵律,是一种规律性的变化,它是比节奏更高级的律动。在网页界面上,当图形图像、文字、色彩等视觉要素在组织上是合乎某种规律的,在视觉和心理上便产生节奏性的韵律感觉。
三、网页版式设计方法
1、步骤
调研。设计师需要了解客户需求、网站定位、受众、成本、浏览习惯等资料。依据对资料的分析,设计师对设计网站有了初步的把握,同时在调研过程中积极与客户沟通,对方向性的问题进行进一步的磋商。
构思。了解客户需求之后,设计师就发挥想象力,将想到的"构思"画上去。不讲究细腻工整,也不必考虑具体的细节部分,只用几条粗陋的线条勾画出创意的轮廓。可采用发散联想、数据推导、思维乍现等方法来进行创意构思。
粗略布局。在草案的基础上,将确定需要放置的功能模块安排到页面上。只要把重要的元素和网页结构相结合,检查框架是否合理、是否适合客户需求。此时关键的是将文字和图形转化为以点、线、面进行编排,这样更有利于观察版式的形式原理和整体效果。
完善布局。当基本框架完成,设计师意念正确传达后,就需要根据客户的要求将其所需的内容有条理的融入于整个的框架中,这便是完善网页布局的阶段。
2、设计方法
网格设计
网格设计产生于二十世纪初叶的西欧诸国,完善则于五十年代的瑞士。在网页设计中,利用网格为所有的设计元素提供一个骨格结构,可以使设计创造更加轻松、灵活,也让设计师的决策过程变得更加简单。
“F”浏览图式。研究表明,人们对网页的阅读路线遵循一个F图式,他们从左到右快速地浏览页面的上两行,然后向下浏览,想要尽快找出有意义的东西。应用到设计领域,就意味设计师必须将关键信息和看点放在这个F图式的区域中,以增加抓住用户注意力机会。
倒三角模式。最重要的信息在最上面,以下信息的重要性依次递减。当这个模式被应用到屏幕上时,由于每个用户花在每个页面上的时间都很有限,因此网格和结构与常见的印刷品设计不同。因为用户不会读完所有的内容,所以最重要的信息必须要有引导的作用,需要在左侧安排定义清楚的标题,以适应读者的浏览方式。
“T”结构。所谓"T"结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母"T",所以称为"T"形布局。这是网站版面设计中用的最广泛的一种网站版面设计方式。
“口”型结构。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。
“三”型结构。这种网站版面设计多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。
对称对比结构。采取左右或者上下对称的网站版面设计,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。
自由版式设计
自由版式设计,它是通过版式编排的自身元素自由组合排列的设计方式。由于电脑制版技术的普及,自由版式设计在世界范围内广泛流行并越来越为人们所重视,美国人戴维·卡森1改变了字体和书法规律,打破了人们原有对版式设计的认识,并使自由版式设计与电脑技术相结合。
版心的无疆界。自由版式设计其版心从诞生的那天起就无固定的疆界,它依照设计中字体、图形内容随心所欲地自由编排。设计内容空间与补白同等重要,页面中正负形的关系均为有形空间,正形通过负形的衬托而存在,负形则以正形的存在来显现。无疆界性打破了传统页面天头、地脚、内外白边的含义。在排版过程中文字常常冲出该区域使读者在阅读过程中产生不间断的联想。
字图一体。根据自由版式设计的特点,文字常常成为图形的一部分,即通常所说的字体图形。在页面排版中常用的“计白当黑”的设计手法通过版式编排中的空白处理以达到“以形写意,以意达神”的目的。字图一体还体现在版式的编排和图片可以任意相互叠加重合上,使版面中有无数的层次,以增加网页画面的空间厚度。
解构。解构是自由版式设计的最主要特征之一。解构就是对原有古典和以数理为基础的排版秩序结构的支解,是对正统版面的解散和破坏。它运用了不和谐的点、线、面等元素与破碎的文化符号去重组新型的网页版面形式。
四、结束语
不管是网页版式设计,还是其他任何设计,方法和规则并不是恒久不变。各种方法、法则是作为指导原则而存在,方便于衡量设计的优劣。更为重要的是,这些法则可以帮助设计师避免沟通的干扰。但是,设计师有时需要想方设法打破规则,打破原有的形式法则,似乎也会得到另一种平衡,有得必有失。
参考文献:
[1] 蒂莫西·萨马拉[美], 设计元素——平面设计样式 [M], 广西美术出版社,2008
[2] 加文·安布罗斯[英] 保罗·哈里斯[英] 网格设计[M], 中国青年出版社, 2008
[3] 王汀,版面构成 [M], 广东人民出版社, 2000
[4] 满懿,平面构成 [M],辽宁美术出版社, 1999
[5] 保罗·兰德[美],设计、造型和混乱 [M], 耶鲁大学出版社, 1993
[关键词]:网页版式设计 网格设计 自由版式设计
中图分类号:D046.3 文献标识码:D 文章编号:1009-914X(2012)35- 0408-01
一、网页版式设计的重要性
网站是计算机技术所带来的信息传播方式,和书籍、雜志、报纸等传统媒体一样,也是一种视觉语言。无论是商业网站还是个人网站,要想使网页丰富多彩,吸引大量访问者,需要特别讲究编排和布局,也就是说网页的版式设计至关重要。优秀的版式设计会给访问者留下良好的第一印象,给访问者舒畅的感觉,在视觉上也不会疲劳。
二、网页版式设计形式原理
1、网页类型
网页界面类型的划分是一个复杂的问题。平时人们接触更多的是网站类型的划分,如门户型网站、电子商务网站、个人网站等。事实上,网页界面可以依据其传达信息内容的特点来进行类型的划分,主要有以下6种。
信息查询类,大众媒体类,宣传窗口类,电子商务类、交流平台类、网络社区类。
2、形式原理
比例,是整体形式的部分与部分之间,部分与整体之间的数量比率关系。比例是在配置与组合过程中数量上的优化选择,让人们有“恰到好处”的心理感受。
在网页设计上,空间可分为空间等量分割和空间不等量分割两种。下面分别予以介绍。
空间等量分割。将页面空间进行等量的分割,放入不同的图形图像的文字,以产生秩序的美。
空间不等量分割。将页面进行不等量的空间分割,将页面空间产生对比与节奏感。
对称,指形态以某一点为中心,其左右或上下因同等、同量、同形而形成的平衡。对称的形式法则是自然法则在设计上的具体表现,对称存在于很多自然形态中。
均衡,是指版面以某一点为中心,在左右或上下等量分布。均衡是一种造型上有变化的平衡状态,具有变化的统一性。揭示了形式内在的持续和平衡,体现了造型动与静结合的动态之美。
节奏,是指单体按照一定条理、秩序、重复连续地排列,形成一种律动形式。在版式设计中也是如此,同样的形态、同样的色彩变化、同样的明暗对比以反复、渐变的方式出现,使人体会到一种类似音乐中的节奏,从而产美学体验。
韵律,是一种规律性的变化,它是比节奏更高级的律动。在网页界面上,当图形图像、文字、色彩等视觉要素在组织上是合乎某种规律的,在视觉和心理上便产生节奏性的韵律感觉。
三、网页版式设计方法
1、步骤
调研。设计师需要了解客户需求、网站定位、受众、成本、浏览习惯等资料。依据对资料的分析,设计师对设计网站有了初步的把握,同时在调研过程中积极与客户沟通,对方向性的问题进行进一步的磋商。
构思。了解客户需求之后,设计师就发挥想象力,将想到的"构思"画上去。不讲究细腻工整,也不必考虑具体的细节部分,只用几条粗陋的线条勾画出创意的轮廓。可采用发散联想、数据推导、思维乍现等方法来进行创意构思。
粗略布局。在草案的基础上,将确定需要放置的功能模块安排到页面上。只要把重要的元素和网页结构相结合,检查框架是否合理、是否适合客户需求。此时关键的是将文字和图形转化为以点、线、面进行编排,这样更有利于观察版式的形式原理和整体效果。
完善布局。当基本框架完成,设计师意念正确传达后,就需要根据客户的要求将其所需的内容有条理的融入于整个的框架中,这便是完善网页布局的阶段。
2、设计方法
网格设计
网格设计产生于二十世纪初叶的西欧诸国,完善则于五十年代的瑞士。在网页设计中,利用网格为所有的设计元素提供一个骨格结构,可以使设计创造更加轻松、灵活,也让设计师的决策过程变得更加简单。
“F”浏览图式。研究表明,人们对网页的阅读路线遵循一个F图式,他们从左到右快速地浏览页面的上两行,然后向下浏览,想要尽快找出有意义的东西。应用到设计领域,就意味设计师必须将关键信息和看点放在这个F图式的区域中,以增加抓住用户注意力机会。
倒三角模式。最重要的信息在最上面,以下信息的重要性依次递减。当这个模式被应用到屏幕上时,由于每个用户花在每个页面上的时间都很有限,因此网格和结构与常见的印刷品设计不同。因为用户不会读完所有的内容,所以最重要的信息必须要有引导的作用,需要在左侧安排定义清楚的标题,以适应读者的浏览方式。
“T”结构。所谓"T"结构。就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似英文字母"T",所以称为"T"形布局。这是网站版面设计中用的最广泛的一种网站版面设计方式。
“口”型结构。这是一个象形的说法,就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。
“三”型结构。这种网站版面设计多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。
对称对比结构。采取左右或者上下对称的网站版面设计,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。
自由版式设计
自由版式设计,它是通过版式编排的自身元素自由组合排列的设计方式。由于电脑制版技术的普及,自由版式设计在世界范围内广泛流行并越来越为人们所重视,美国人戴维·卡森1改变了字体和书法规律,打破了人们原有对版式设计的认识,并使自由版式设计与电脑技术相结合。
版心的无疆界。自由版式设计其版心从诞生的那天起就无固定的疆界,它依照设计中字体、图形内容随心所欲地自由编排。设计内容空间与补白同等重要,页面中正负形的关系均为有形空间,正形通过负形的衬托而存在,负形则以正形的存在来显现。无疆界性打破了传统页面天头、地脚、内外白边的含义。在排版过程中文字常常冲出该区域使读者在阅读过程中产生不间断的联想。
字图一体。根据自由版式设计的特点,文字常常成为图形的一部分,即通常所说的字体图形。在页面排版中常用的“计白当黑”的设计手法通过版式编排中的空白处理以达到“以形写意,以意达神”的目的。字图一体还体现在版式的编排和图片可以任意相互叠加重合上,使版面中有无数的层次,以增加网页画面的空间厚度。
解构。解构是自由版式设计的最主要特征之一。解构就是对原有古典和以数理为基础的排版秩序结构的支解,是对正统版面的解散和破坏。它运用了不和谐的点、线、面等元素与破碎的文化符号去重组新型的网页版面形式。
四、结束语
不管是网页版式设计,还是其他任何设计,方法和规则并不是恒久不变。各种方法、法则是作为指导原则而存在,方便于衡量设计的优劣。更为重要的是,这些法则可以帮助设计师避免沟通的干扰。但是,设计师有时需要想方设法打破规则,打破原有的形式法则,似乎也会得到另一种平衡,有得必有失。
参考文献:
[1] 蒂莫西·萨马拉[美], 设计元素——平面设计样式 [M], 广西美术出版社,2008
[2] 加文·安布罗斯[英] 保罗·哈里斯[英] 网格设计[M], 中国青年出版社, 2008
[3] 王汀,版面构成 [M], 广东人民出版社, 2000
[4] 满懿,平面构成 [M],辽宁美术出版社, 1999
[5] 保罗·兰德[美],设计、造型和混乱 [M], 耶鲁大学出版社, 1993