网页的版式设计(七)

设计|网页

三、版式的基本类型

  网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。

1.骨骼型
  网页版式的骨骼型是一种规范的、理性的分割方法,类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用,既理性、条理,又活泼而富有弹性。
 
2.满版型
  页面以图像充满整版。主要以图像为诉求点,也可将部分文字压置于图像之上。视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及,这种版式在网页设计中的运用越来越多。

3.分割型
  把整个页面分成上下或左右两部分,分别安排图片和文案。两个部分形成对比:有图片的部分感性而具活力,文案部分则理性而平静。可以调整图片和文案所占的面积,来调节对比的强弱。例如:如果图片所占比例过大,文案使用的字体过于纤细,字距、行距、段落的安排又很疏落,则造成视觉心理的不平衡,显得生硬。倘若通过文字或图片将分割线虚化处理,就会产生自然和谐的效果。

 
4.中轴型
  沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。

 
5.曲线型
  图片、文字在页面上作曲线的分割或编排构成,产生韵律与节奏。

 
(以上内容节选自顾群业等编著的《网页艺术设计》一书,山东美术出版社出版。)

图21:综合运用多种分栏形式。
图22:四边出血,向外扩张,适合年轻人的口味。
图23:分割线上的压置的图片既打破了页面分割的生硬感,也使自身得到强调。左边框上的小标签乃点睛之笔。
图24:不易觉察的中轴型版式,给人以轻快之感。
图25:网站的导航标题沿图形弧线排列。

时间: 2024-08-30 02:50:40

网页的版式设计(七)的相关文章

网页的版式设计(五)

设计|网页 3.图像的编排 (1)四角与中轴四点结构 页面的四个角与对角线.中轴四点及水平与垂直的中轴线,具有支配页面结构的作用. 四角是页面边界相交形成的四个点,把四角连接起来的斜线即对角线,交叉点为页面中心.中轴四点指经过页面中心的垂直线和水平线的端点.这四个点可上.下.左.右移动. 通过四角与中轴四点结构的不同组合.变化,可以求得多样的页面结构.在图像排版时紧紧抓住这八个点,可以突出网页的形式美感,网页的版式设计.视觉流程的筹划也得到相应简化.   (2)块状组合与散点组合结构 块状组合,

网页的版式设计—文字的格式化

网页的版式设计---文字的格式化 编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心.特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感.目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少. 文字的格式化 1.字号.字体.行距 字号大小可以用不同的方式来计算,例如磅(point)或像素(pixel).因为以计算机的像素技术为基础的单

网页的版式设计---网页的排版与布局

网页的版式设计---网页的排版与布局 很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver.flash.firework.photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快. 今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现.我想强调的是关于网页排版布局方面的必要的知识,很多初学者都忽视这方面,以为技术就能代表一切,能够知道怎么用这个做网页的工具就能够

网页的版式设计(三)

设计|网页 3.文字的强调 (1) 行首的强调 将正文的第一个字或字母放大并作装饰性处理,嵌入段落的开头,这在传统媒体版式设计中称之为"下坠式".此技巧的发明溯源于欧洲中世纪的文稿抄写员.由于它有吸引视线.装饰和活跃版面的作用,所以被应用于网页的文字编排中.其下坠幅度应跨越一个完整字行的上下幅度.至于放大多少,则依据所处网页环境而定. (2) 引文的强调 在进行网页文字编排时,常常会碰到提纲挈领性的文字,即引文(也称为眉头).引文概括一个段落.一个章节或全文大意,因此在编排上应给予特殊

网页的版式设计(二)

设计|网页 3.文字的强调 (1) 行首的强调 将正文的第一个字或字母放大并作装饰性处理,嵌入段落的开头,这在传统媒体版式设计中称之为"下坠式".此技巧的发明溯源于欧洲中世纪的文稿抄写员.由于它有吸引视线.装饰和活跃版面的作用,所以被应用于网页的文字编排中.其下坠幅度应跨越一个完整字行的上下幅度.至于放大多少,则依据所处网页环境而定. (2) 引文的强调 在进行网页文字编排时,常常会碰到提纲挈领性的文字,即引文(也称为眉头).引文概括一个段落.一个章节或全文大意,因此在编排上应给予特殊

网页的版式设计(八)

设计|网页 6.倾斜型 页面主题形象或多幅图片.文字作倾斜编排,形成不稳定感或强烈的动感,引人注目. 7.对称型 对称的页面给人稳定.严谨.庄重.理性的感受. 对称分为绝对对称和相对对称.一般采用相对对称的手法,以避免呆板.左右对称的页面版式比较常见. 四角型也是对称型的一种,是在页面四角安排相应的视觉元素.四个角是页面的边界点,重要性不可低估.在四个角安排的任何内容都能产生安定感.控制好页面的四个角,也就控制了页面的空间.越是凌乱的页面,越要注意对四个角的控制.  8.焦点型 焦点型的网页版式

网页的版式设计(一)

设计|网页 编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心.特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感.目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少.经过作者同意,从这一期开始,我们选载<网页艺术设计>一书的部分章节,从最基本的内容讲起,希望对广大网页制作者有所助益. 一.文字的格式化 1.字号.字体.行距 字号

网页的版式设计

图像的处理 图像的外形.大小.数量以及与背景的关系,都与内容有着密切的联系. (1)图像的外形处理 图像的外形能使页面的气氛发生变化,并直接影响浏览者的兴趣.一般而言,方形的稳定.严肃,三角形的锐利,圆形或曲线外形的柔软亲切,退底图及一些不规则或不带边框的图像活泼. (2)图像的面积 图像在网页中占据的面积大小能直接显示其重要程度.一般地,大图像容易形成视觉焦点,感染力强,传达的情感较为强烈;小图像常用来穿插在字群中,显得简洁而精致,有点缀和呼应页面主题的作用.在一个页面中,如果只有大图像而无小

网页的版式设计(六)

设计|网页 4.图像的处理 图像的外形.大小.数量以及与背景的关系,都与内容有着密切的联系. (1)图像的外形处理 图像的外形能使页面的气氛发生变化,并直接影响浏览者的兴趣.一般而言,方形的稳定.严肃,三角形的锐利,圆形或曲线外形的柔软亲切,退底图及一些不规则或不带边框的图像活泼. (2)图像的面积 图像在网页中占据的面积大小能直接显示其重要程度.一般地,大图像容易形成视觉焦点,感染力强,传达的情感较为强烈:小图像常用来穿插在字群中,显得简洁而精致,有点缀和呼应页面主题的作用.在一个页面中,如果