导航:首页 > 万维百科 > 网页版式设计表现形式

网页版式设计表现形式

发布时间:2021-02-20 16:13:58

1、网页版面布局有几种?

1.T型布局
T型布局是指页面顶部为横条网站标志和广告条,下方左半部分为主菜单,右半部分为显示内容的布局。因为菜单背景饺探,整体效果类似英文字母T,所以称之为T型布局,这是网页设计中使用最广泛的一种布局方式。其优点是页面结构清晰,主次分明,是初学者最容易学习的布局方法;缺点是规矩呆板,如果把握不好,在细节和色彩搭配上不注意,容易让人看了之后感到乏味。
2.“口”型布局
“口”型布局是页面上下各有一个广告条,左边是主菜单,右边是友情链接等内容,中间是主要内容。其优点是充分利用了版面,信息量大;缺点是页面拥挤,不够灵活。
3.“国”型布局
“国”型布局又称为“同”型布局,是一些大型网站喜欢使用的布局类型。页面顶部是一横条,横条左部设置网站标志,右部是横条广告,横条下部是水平放置的主导航栏。导航栏下方分为左中右三栏,左边一般放置内容导航、二级栏目、注册登录、搜索引擎等,右边一般放置动态新闻、热点内容、友情链接等,中间显示网页的主体内容,在页面的最下方是一横条状菜单或广告,也可以是网站的一些基本信息、联系方式、版权声明等。这种布局通常用于主页设计,主要优点是页面容纳的内容多,信息量大。
4.标题正文型布局
标题正文型布局最上方是标题或广告等内容,下方是正文,通常文章页面或注册页面采用此种布局,其特点是简洁明快,干扰信息少,较为正规。
5.“三”型布局
“三”型布局具有简洁明快的艺术效果,适合于艺术类、收藏类、展示类网站。这种布局往往采用简单的图像和线条代替拥挤的文字,给浏览者以强烈的视觉冲击,使其感觉进入了一幅完整的画面,而不是一个分门别类的超市。它的一级页面和二级页面的链接都按行水平排列在页面的中部,网站标志非常醒目。
6.“川”型布局
“川”型布局比较特殊,整个页面在垂直方向分为3列,网站的内容按栏目分布在这3列中,可以最大限度地突出主页的索引功能。如果网站栏Bf良多,可以考虑采用这种布局。它和“国”形布局的主要区别是:把主内容区换成了各个二级页面的链接,其中的不足是二级栏目比例不易配置平衡,色彩不易协调。
7.POP布局
POP布局像一张宣传海报,以一张精美图片作为页面的设计中心,在适当位置放置主菜单,常用于时尚类站点。这种布局方式不讲究上下和左右的对称,但要求平衡有韵律,能达到动感的效果,其优点是漂亮吸引入,缺点是速度慢。
8.变化型
采用上述几种布局的结合与变化,布局采用上、下、左、右结合的综合型框架,再结合F1ash动画,使页面形式更加多样,视觉冲击力更强。
网页布局的基本形式主要有上述几种类型,至于哪种布局类型最好,需要具体问题具体分析,要从网站内容、页面结构和表现形式等多方面进行综合考虑,同时也需要制作者具有较高的设计水平。

2、版式设计的种类

所谓版式设计,就是在版面上,将有限的视觉元素进行有机的排列组合。将理性思维,版式设计个性化地表现出来;一种具有个人风格和艺术特色的视觉传送方式。传达信息的同时,也产生感官上的美感。版式设计的范围,涉及到报纸、刊物、书籍(画册)、产品样本、挂历、招贴画、唱片封套和网页页面等平面设计各个领域.

特征
思想性与单一性
排版设计本身并不是目的,设计是为了更好地传播客户信息的手段。设计师以往中意自我陶醉于个人风格以及与主题不相符的字体和图形中,这往往是造成设计平庸失败的主要原因。一个成功的排版设计,首先必须明确客户的目的,并深入了解、观察、研究与设计有关的方方面面,简要的咨询是设计良好的开端。版面离不开内容,更要体现内容的主题思想,用以增强读者的注目力与理解力。只有做到主题鲜明突出,一目了然,才能达到版面构成的最终目标。

艺术性与装饰性
为了使排版设计更好地为版面内容服务,寻求合乎情理的版面视觉语言则显得非常重要,也是达到最佳诉求的体现。构思立意是设计的第一步,也是设计作品中所进行的思维活动。主题明确后,版面构图布局和表现形式等则成为版面设计艺术的核心,也是一个艰难的创作过程。怎样才能达到意新、形美、变化而又统一,并具有审美情趣,这就要取决于设计者文化的涵养。所以说,排版设计是对设计者的思想境界、艺术修养、技术知识的全面检验。
版面的装饰因素是由文字、图形、色彩等通过点、线、面的组合与排列构成的,并采用夸张、比喻、象征的手法来体现视觉效果,既美化了版面,又提高了传达信息的功能。装饰是运用审美特征构造出来的。不同类型的版面的信息,具有不同方式的装饰形式,它不仅起着排除其他、突出版面信息的作用,而且又能使读者从中获得美的享受。

趣味性与独创性
排版设计中的趣味性,主要是指形式的情趣。这是一种活泼性的版面视觉语言。如果版面本无多少精彩的内容,就要靠制造趣味取胜,这也是在构思中调动了艺术手段所起的作用。版面充满趣味性,使传媒信息如虎添翼,起到了画龙点睛的传神功力,从而更吸引人,打动人。趣味性可采用寓意、幽默和抒情等表现手法来获得。
独创性原则实质上是突出个性化特征的原则。鲜明的个性,是排版设计的创意灵魂。试想,一个版面多是单一化与概念化的大同小异,人云亦云,可想而知,它的记忆度有多少?更谈不上出奇制胜。因此,要敢于思考,敢于别出心裁,敢于独树一帜,在排版设计中多一点个性而少一些共性,多一点独创性而少一点一般性,才能羸得消费者的青睐。

整体性与协调性
排版设计是传播信息的桥梁,所追求的完美形式必须符合主题的思想内容,这是排版设计的根基。只讲表现形式而忽略内容,或只求内容而缺乏艺术表现,版面都是不成功的。只有把形式与内容合理地统一,强化整体布局,才能取得版面构成中独特的社会和艺术价值,才能解决设计应说什么、对谁说和怎样说的问题。
强调版面的协调性原则,也就是强化版面各种编排要素在版面中的结构以及色彩上的关联性。通过版面的文、图间的整体组合与协调性的编排,使版面具有秩序美、条理美,从而获得更好的视觉效果。

形式:

重复与交错
在排版设计中,不断重复使用的基本形或线,它们的形状、大小、方向都是相同的。重复使设计产生安定、整齐、规律的统一。但重复构成的视觉感受有时容易显的呆板、平淡、缺乏趣味性的变化,故此,我们在版面中可安排一些交错与重叠,打破版面呆板、平淡的格局。

节奏与韵律
节奏与韵律来自于音乐概念,正如歌德所言:“美丽属于韵律。”韵律被现代排版设计所吸收。节奏是按照一定的条理、秩序、重复连续地排列,形成一种律动形式。它有等距离的连续,也有渐变、大小、长短,明暗、形状、高低等的排列构成。在节奏中注入美的因素和情感--个性化,就有了韵律,韵律就好比是音乐中的旋律,不但有节奏更有情调,它能增强版面的感染力,开阔艺术的表现力。

对称与均衡
两个同一形的并列与均齐,实际上就是最简单的对称形式。对称是同等同量的平衡。对称的形式有以中轴线为轴心的左右对称;以水平线为基准的上下对称和以对称点为源的放射对称;还有以对称面出发的反转形式。其特点是稳定、庄严、整齐、秩序、安宁、沉静。

对比与调和
对比是差异性的强调,对比的因素存在于相同或相异的性质之间。也就是把相对的两要素互相比较之下,产生大小、明暗、黑白、强弱、粗细、疏密、高低、远近、硬软、直曲、浓淡、动静、锐钝、轻重的对比,对比的最基本要素是显示主从关系和统一变化的效果。
调和是指适合、舒适、安定、统一,是近似性的强调,使两者或两者以上的要素相互具有共性。对比与调和是相辅相成的。在版面构成中,一般事例版面宜调和,局部版面宜对比。

比例与适度
比例是形的整体与部分以及部分与部分之间数量的一种比率。比例又是一种用几何语言和数比词汇表现现代生活和现代科学技术的抽象艺术形式。成功的排版设计,首先取决于良好的比例:等差数列、等比数列、黄金比等。黄金比能求得最大限度的和谐,使版面被分割的不同部分产生相互联系。
适度是版面的整体与局部与人的生理或习性的某些特定标准之间的大小关系,也就是排版要从视觉上适合读者的视觉心理。比例与适度,通常具有秩序、明朗的特性 ,予人一种清新、自然的新感觉。

变异与秩序
变异是规律的突破,是一种在整体效果中的局部突变。这一突变之异,往往就是整个版面最具动感、最引人关注的焦点,也是其含义延伸或转折的始端,变异的形式有规律的转移、规律的变异,可依据大小、方向、形状的不同来构成特异效果。
秩序美是排版设计的灵魂:它是一种组织美的编排,能体现版面的科学性和条理性。由于版面是由文字、图形、线条等组成,尤其要求版面具有清晰明了的视觉秩序美。构成秩序美的原理有对称、均衡、比例、韵律、多样统一等。在秩序美中溶入变异之构成,可使版面获得一种活动的效果。

虚实与留白
中国传统美学上有“计白守黑”这一说法。就是指编排的内容是“黑”,也就是实体,斤斤计较的却是虚实的“白”,也可为细弱的文字、图形或色彩,这要根据内容而定。
留白则是版中未放置任何图文的空间,它是“虚”的特殊表现手法。其形式、大小、比例、决定着版面的质量。留白的感觉是一种轻松,最大的作用是引人注意。在排版设计中,巧妙地留白,讲究空白之美,是为了更好地衬托主题,集中视线和造成版面的空间层次。

变化与统一
变化与统一是形式美的总法则,是对立统一规律在版面构成上的应用。两者完美结合,是版面构成最根本的要求,也是艺术表现力的因素之一。变化是一种智慧、想象的表现,是强调种种因素中的差异性方面,造成视觉上的跳跃。
统一是强调物质和形式中种种因素的一致性方面,最能使版面达到统一的方法是保持版面的构成要素要少一些,而组合的形式却要丰富些。统一的手法可借助均衡、调和、秩序等形式法则。

3、网页设计方法有哪三种?

第一:页面尺寸的问题,网页设计和我们通常的平面设计有一定区别,我们设计出来的网页最终是要在浏览器上运行,所以在设计之初就应该知道网页一般的注意事项,网页的宽、网页字体、网页图片的分别率等这是基础。

第二:网页的版式问题。当你把基础的设置做好后接下来就应该考虑网页的版式问题,当然了大家看的网页很多,天天上网也会发现有的网站好看,有些不好看,问什么呢?那就是版式问题,因为版式决定了你网页的基本结构,就行盖房子,你把基本的地基打好之后,你就就会考虑你把房子盖成什么结构的,是三室两厅还是两室两厅等。当然网页的版式有很多,着部分学习先从最基础的版式开始,就是我们常见的垂直型的版式,我们一般见到网页大部分都是这种样子。这部分的学习要去多看看。

第三:网页的风格。这个很多同学可能不理解,风格是个什么东西?怎么来体现风格?其实着东西也是一种感觉,只有经过一段时间摸索才能够有所理解。这个风格决定了你的网站体现的是什么内容,是什么气质,是什么水平,就是一种外在的表现,就和人的穿衣打扮一样,当你决定了穿T恤和裙子的时候,那该穿什么样的裙子搭什么样的T恤,这就是人的风格,他能体现初你的气质、你的爱好、你的内涵等等。说到这你可能会问,穿衣服要注意颜色,板型呀等等,其实网页也是一样的。所以这块一定要注意,风格的体现主要取决于颜色、图片风格、细节处理等等。举个简单的例子,就像我们区别欧式风格、中国风格、以及现代风格一样,中国古典家居注意使用红檀木,多用古典的红色等,细节上多是雕刻的纹饰等等,而欧式的则多是白色的大理石、白色的皮草、网格、纹饰等等,而现代风格则注重白色纯色、曲线、规则分明、边就是边,角就是角,更注重简介大方。这里我就不多说了,这个还需要我们去实践摸索,经过长期的学习才会有一定的体会。

第四:网页结构。网页其实也是一种媒体,和我们的报纸杂志等一样只不过媒介变成了网络,依托浏览器来阅读,表现形式更加多样,除了我们时候的图片、文字等网页跟多了互动性能以及美观好看活泼的动画等,所以在页面结构上也要注意很多,主要就是指如何安排你网页的内容,有头版头条,有动画,有图片有问题等等,看你如何合理安排这些元素。

等等诸多方面。

4、版式设计的主要形式有哪些

?

5、网站设计风格主要体现在哪几个方面

网站简单的可以分为:功能型和展示型

功能型:网站在美工设计上可能不适合大块图片,在数据功能上比较强,比如:搜索、会员注册。一般企业网、购物网、大型门户、交友网等。

展示型:追求视觉上的美丽,对功能要求不高,在美工上、设计上要有强烈的视觉感。这种网站一般属于:美容业、女性用品、服饰等。
可以是企业展示网站、企业宣传网站、门户网站、电子商务、社交交友、综合型网站等等。
1、将你的标志logo,尽可能的放在每个页面上最突出的位置。

2、突出你的标准色彩。

3、总结一句能反映贵站精髓的宣传标语!

4、相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!

二、网页色彩的搭配  

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。在此告诉大家一些网页配色时的小技巧。

1、用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色。

3、用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:  

1、不要将所有颜色都用到,尽量控制在三至五种色彩以内。

2、背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

现在是眼球经济时代,什么都要靠包装。你的网站设计的不好看,也无法引起用户的兴趣。我想谁都不喜欢看那些乱七八糟的网站,进去之后看不到网站主题,看不到主要内容,也找不到我们想要的信息。成功网站的第一步,就是从设计开始做起。
一、确定网站的整体风格
网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站,在这里,提供给大家一些参考经验:
1、将你的标志logo,尽可能的放在每个页面上最突出的位置。

2、突出你的标准色彩。

3、总结一句能反映贵站精髓的宣传标语!

4、相同类型的图像采用相同效果。

二、网页色彩的搭配  

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。在此告诉大家一些网页配色时的小技巧。

1、用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色。

3、用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:  

1、不要将所有颜色都用到,尽量控制在三至五种色彩以内。

2、背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

6、网页版式设计中可以同时运用多种表现手法吗

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

1、骨骼型
网页版式的骨骼型是一种规范的、理性的分割方法,类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用,既理性、条理,又活泼而富有弹性。

2、满版型

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

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

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

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

6.倾斜型
页面主题形象或多幅图片、文字作倾斜编排,形成不稳定感或强烈的动感,引人注目。

7.对称型
对称的页面给人稳定、严谨、庄重、理性的感受。
对称分为绝对对称和相对对称。一般采用相对对称的手法,以避免呆板。左右对称的页面版式比较常见。
四角型也是对称型的一种,是在页面四角安排相应的视觉元素。四个角是页面的边界点,重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角,也就控制了页面的空间。越是凌乱的页面,越要注意对四个角的控制。

8.焦点型
焦点型的网页版式通过对视线的诱导,使页面具有强烈的视觉效果。焦点型分三种情况

(1)中心 以对比强烈的图片或文字置于页面的视觉中心。
(2)向心 视觉元素引导浏览者视线向页面中心聚拢,就形成了一个向心的版式。向心版式是集中的、稳定的,是一种传统的手法。
(3)离心 视觉元素引导浏览者视线向外辐射,则形成一个离心的网页版式。离心版式是外向的、活泼的,更具现代感,运用时应注意避免凌乱。

9.三角型
网页各视觉元素呈三角形排列。正三角形(金字塔型)最具稳定性,倒三角形则产生动感。侧三角形构成一种均衡版式,既安定又有动感。

7、网页的版式设计应注意哪几个方面?与平面设计相比有哪些共同点和不同点

两者共同点:
1、都需要良好的视觉表现;
2、设计师需要有良好的审美能力;
3、基本都是用同一类软件;
其实网页设计应该属于多媒体设计的范畴,多媒体设计是从属于平面设计规律而又有很多不同的一个领域,网页除了注重设计外,更多的是考虑浏览的使用体验,打工速度,程序逻辑,SEO优化各方面的知识,知识面和侧重点跟平面设计有很大的不一样。一个好的平面设计师不一定就能做好网页设计,网页注重交互性、操作性跟浏览性。如果细分出来主要差别有一下几点:
1、设计核心的差别
平面设计的核心是品牌。它要以品牌为出发点去设计,要在视觉上100%体现品牌的魅力。
网页设计的核心是用户。要以用户的操作习惯为出发点去设计,换句话说也就是要设计得人性化,让用户浏览和操作要方便。
2、字体使用有限制
平面设计的字体一般不受限制,为了表现效果,相关的字体中以任意使用。
网页设计的字体则受到很多的限制,一般中文字体只能用宋体、微软雅黑。
3、颜色运用的区别
平面设计可以使用成千上万种颜色,换句话说可以使用所有颜色,但是网页设计不行!网页设计中规定相关安全色。
4、处理与制作方面的差别问题
传统平面设计的作品大多是以印刷的平面形式表现。
网页设计作品则是透过显示器表现,并且在传输的过程中受到网路频宽的限制。网页设计不仅仅是在做设计,更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。
5、图片格式和像素的差别
平面设计需要的图片格式一般为 PSD CDR AI EPS 等比较大的源文件格式 或导出的JPG 一般像素(分辨率)大于300的高清晰图片。
网站设计 一般为GIF 或PNG 或JPG 一般像素(分辨率)小于72的)。
6、目的差异
传统平面的设计作品是以向人们传达某种资讯或诉求为目的。
网站制作的设计必须是配合网站的内容设计,而不是单纯地只为表现艺术而设计。除了拥有平面设计作品的功能以外,还有重要的引导和连接功能,也就是网页具有很强的可操作性和互动性。

8、网页设计的经典布局类型有哪些

网站建设中网页布局大致可分为:“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,以下分别论述:

1、国字类型:也被称为同字型,顶部是网站的标题、横幅广告条,然后是网站的主体内容个,而左右分别是一些比较小的内容条,中间就是主要内容,最底部是网站的一些基本信息、联系方式、版权声明等。这也是现在网上见到的差不多最多的一种结构类型;

2、拐角型:这种类型其实与国字型很相近的,只是在形式上不一样,最上面的部分是网站的标题以及网站的横幅广告条,一种很常见的类型是最上面是标题及广告,左侧是导航链接;

3、标题正文类型:上面是网站的标题,或者是类似的东西,接着就是网站的正文内容,例如是一些文章或者是注册登录页面;

4、左右框架类型:这是一种左右为分别两页的框架结构,一般布局是:左边是导航链接,最上面有时是一个小的标题或标致,而右面就是主要内容,最常使用是论坛网站,企业网站中的内页有很多是采用这种布局方式的;这种类型的布局的特点是结构清晰明了;

5、上下框架类型:与左右框架类型类似,只是这种类型是上下两页的框架;

6、综合框架类型:其实就是左右框架类型和上下框架类型的结合体;

7、封面型:这种类型基本上是出现在一些网站的首页,多是精美平面结合小动画,再加几个简单链接或仅是一个“进入”链接或无任何提示;

8、Flash型:其实这与封面型结构是类似的,采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体;

9、变化型:即上面几种类型的结合与变化,但所实现的功能的实质是那种上、左、右结构的综合框架型;

9、网页设计的特点是什么?

技术与艺术的紧密结合在网页艺术设计中体现得尤为突出。
具体表现在以下几个方面:

1. 交互性与持续性
即时的交互性是 Web 成为热点的主要原因,网页不同于传统媒体之处。也是网页设计时必须考虑的问题。

2. 多维性
主要体现在网页设计中对导航的设计上。由于超级链接的呈现, 多维性源于超级链接。网页的组织结构更加丰富,浏览者可以在各种主题之间自由跳转,从而打破了以前人们接收信息的线性方式。

3. 媒体的综合性
随着网络带宽的增加、芯片处置速度的提高以及跨平台的多媒体文件格式的推广, 目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等。

4. 版式的灵活性

以上理解,希望对你有所帮助。

国内很少公司专门培养设计师,也许这也是我国多年来不能涌现出大量的优秀设计师的原因之一吧。

与网页版式设计表现形式相关的知识