A. 总结网站设计的几种版面布局形式
网站设计中.新鲜和个性是布局的最高境,能加强视觉效果。
1、T结构布局,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景教深,整体效果类似英文字母T,这是网页设计中用的最广返的一种布局方式。
这种布局的优点是页面结构清晰,主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意,很容易让人看之无味。
2、口型布局。就是页面一般上下各有一个广告条,左面是主菜单,右面放友情连接等,中间是主要内容。
这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站。
3、三型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为四部分,色块中大多放广告条。
4、对称对比布局,采取左右或者上下对称的布局,一半深色,一半浅色,一般用于设计型站点。优点是视觉冲击力强,缺点是将两部分有机的结合比较困难。
5、POP布局。POP引自广告术语,就是指页面布局象一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类站点。优点:漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。
B. 网页布局设计有哪些类型
1、拐角型
这种类型其实与国字型很相近的,只是在形式上不一样,最上面的部分是网站的标题以及网站的横幅广告条,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
2、“三”字型布局
这种布局多用于国外网站,国内用得不多。特点是在页面上有横向两条色块,将页面整体分割开,色块中大多放广告条、更新和版权提示。
3、标题正文类型
上面是网站的标题,或者是类似的东西,接着就是网站的正文内容,例如是一些文章或者是注册登录页面。
4、对称对比型
对称对比型采取左右或上下对称的布局,一半深色,一半浅色,一般用于设计型网站。而其优点是视觉冲击力强,缺点是将两部分进行有机结合较难。
5、变化型
即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。
6、左右框架类型
这是一种左右为分别两页的框架结构,一般布局是:片段含导航链接,最上面有时是一个小的标题或标志,而右面就是主要内容,最常使用是论坛网站,企业网站中的内页有很多是采用这种布局方式的而这种类型的布局的特点是结构清晰明了。
7、POP型式
POP形式是指页面布局像一张宣传海报,以一张精美图片作为页面设计中心。一般常用于时尚类网站,优点是漂亮吸引人,缺点则是速度慢。
C. 常见的网站版面布局:T结构布局,口型布局,对称对比布局,POP布局,国型布局,标题正文型布局,变化
T结构布局
上左右,左下,右下
D. 网页效果图的网页布局分类
网页布局大致可分为:骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。详例请参照图片册。
(1)骨骼型描述:网页中骨骼型是一种规范、严谨的分割方式,也是最为普通和最为常见的一种形式,类似报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。通常以竖向分栏居多。这种版式给人以和谐、理性的美。
(2)满版描述:满版型页面以图像充满整版。主要以图像为诉求点,可将部分文字置于图像之上。视觉传达效果直观而突出。给人以生动大方人感觉。满版型版式被各种网站所采用,以学校、娱乐、体育、艺术、儿童以及个性化网页,其中以韩国网站居多。
(3)分割型描述:分割型版式指把整个页面分成上下或左右两部分,分别安排图片或文字内容。两部分形成对比,使图片部分感性而具表现力,文字部分则理性而具说服力。可以调整图片和文字所占的面积比例,来调节对比强弱。如果图片比例过大,文字字体过于纤细,段落疏松,会造成视觉心理的不平衡,显得生硬。
(4)中轴或对称型描述:中轴型版式是将图片和文字沿浏览器窗口的中间轴心位置作水平或垂直方向排列的一种设计方式。沿中轴水平方向排列的页面可以给人稳定、平静、含蓄的感觉,沿中轴垂直方向排列的页面可以给人以舒畅的感觉。采用这种版式设计的网页比较适合做网站的首页。
(5)焦点型描述:焦点型的网页版式通过对浏览者视线人诱导,可以使页面产生强烈的视觉效果,如集聚感或膨胀感等。中心焦点型是将图片或文字置于页面的视觉中心。向心焦点型是视觉元素引导浏览者人视线向页面中心聚拢。离心焦点型是视觉元素引导浏览者的视线向外辐射。焦点型版式为各类网站使用,以体育、娱乐、动画网站为多。
(6)倾斜或曲线型描述:倾斜型页面主题形象或多幅图片、文字作倾斜编排,形成不稳定感或强烈的动感,引人注目。此类网站版式为各类网站所采用。曲线型网站图片、文字在页面上作曲线的分割或编排构成,产生韵律与节奏。此类网站版式为各类网站所采用。
(7)三角型描述:三角型版式是指见面各视觉元素呈三角形或多角形排列。正三角形最具稳定性,倒三角形则可产生动感。侧三角形构成一种均衡版式,既安定又有动感。三角形版式为各类网站所采用。
(8)自由型描述:自由型版式人页面具有活泼、轻快人气氛。自由型版式也可应用于多种网站。如网络、娱乐、体育、个人、商务等。
以上介绍的版式基本类型并不是固定不变的,在实际设计中,设计师可以根据网页所要传达的主题内容来灵活地变化版式。在设计前要认真分析网站的定位,在设计中要灵活把握版式结构,才能更好地达到设计目的。
E. 网页常见布局
在版式设计当中,主要有以下几种排版形式: 重心型、中轴型、分割型(分上下分割和左右分割)、倾斜型、骨骼型、满版型、曲线型、对称型、三角形、四角型和自由型 。这几种形式会比较常出现在网页设计当中,所以我们一一来分析以下几种排版方式。
1、重心型
重心型版式的网页容易让浏览者产生视觉焦点,界面效果强烈且突出。重心型又可以分以下三种形式。
A、直接以独立而轮廓分明的形象占据版面中心。
ivanovoiskozh俄罗斯企业网站
B、向心:视觉元素向版面中心聚拢的运动。
bdsalads食物食品网站
C、离心:犹如将石子投入水中,产生一圈圈尘孙纯向外扩散的弧线运动。
Twomari炸鸡食品美食网站
2、中轴型
中轴型的网页设计,是将图形做水平或垂直方向的排列,文案以上下或左右配置。水平排列的版面会给人稳定、安静、和平与含蓄之感。垂直排列的版面给人强烈的动感。垂直排列的这种排版方式比较常出现。
INSPOT激发你的品牌 韩国设计公司网站
3、分割型
分割型主要可以分成 上下分割和左派咐右分割 。相比较,左右分割型的网站会比较常见。
A、上下分割
上下分割,顾名思义,就是把整个版面分为上下两个部分。可以在上半部或下半部配置图片,另一部分则配置文案。配置有图片的部分感性而有活力,而文案部分则理性而静止。上下部分配置的图片可以是一幅或多幅。
Sojournal时尚家居企业网站
B、左右分割
左右分割,就把整个版面分割为左右两个部分,分别在左或右配置文案。当左右两部分形成强弱对比时,则造成视觉心理的不平衡。这仅仅是视觉习惯上的问题,也自然不如上下分割的视觉流程自然。不过,倘若将分割线虚化处理,或用文字进行左右重复或穿插,左右图文则变得自然和谐。
AVEDA美容美发时尚网站
4、倾斜型
倾斜型的网站比较少见,这样的网站偏个性化一些,多在一些设计公司或是运动品牌的网站中出现。版面的主体形象做倾斜设计,造成版面强烈的动感和不稳定因素,这种设计比较引人注目。
2016CHUNGNAM韩国体育网站
5、骨骼型
骨骼型比较在传统网站当中比较常见,它是一种规范的界面分割方法。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多。说到这个,就可以想到栅格系统,实际上这两者是差不多意思的。
骨骼型的网站会给人以严谨、和谐、理性的美。每一个区块经过相互混合后的版式,既理性、条理,又活泼而具弹性。凯茄
ZUI框架
6、满版型
满版型的网站近几年也越来越多见,通常是版面以图象充满整版,主要以图象为诉求,视觉传达直观而强烈。文字的配置压置在上下、左右或中部的图象上。满版型给人以大方、舒展的感觉。
水族馆度假村俱乐部
7、曲线型
图片或文字在版面结构上作曲线的编排构成,产生节奏和韵律。
Transfer Window
8、对称型
对称的版式给人稳定、庄重理性的感觉。对称有绝对对称和相对对称。一般多采用相对对称。以避免过于严谨。对称一般以左右对称居多。
DeLaneau (万花筒效果,心脏受不住的勿点),这个网站是绝对对称,比较少见,这样的网站看久了会比较单调。
9、三角形
在圆形、四方形、三角形等基本形态中,正三角形(金字塔形)是最具安全稳定因素的形态,而圆形和倒三角形则给人以动感和不稳定感。
Asahi Refining黄金产品网站
10、四角型
四角型指在版面四角以及连接四角的对角线结构上编排的图形。这种结构的版面,给人以严谨,规范的感觉。
NOROO PAINT企业网站
11、自由型
自由行结构是无规律的、随意的编排构成,有活泼、轻快之感。
Happymaker in 高野山
以上简单给大家分析讲解了常见的几种版式形式,每种版式设计并非以一种表现形态出现,比如四角型的网站可能会结合对称性的出现或是中轴型,所以大家在分析一个网站的时候不要以单一的一种视角去分析。因为一个网站的设计可能同时存在好几种版式形式。
不同的排版可以给人不同的视觉感受,好的排版会给整个网站“锦上添花”。版式也没有绝对的好坏,只有适合和不适合。希望今天给大家分享的内容可以帮助到大家。