商业网页版式构成设计

《商业网页版式构成设计》由会员分享，可在线阅读，更多相关《商业网页版式构成设计（101页珍藏版）》请在金锄头文库上搜索。

1、商业网页版式构成设计 -商业网页艺术设计-商业网页版式构成设计 .主要内容:1.版式构成设计的概念2.版式构成的分类和特点3.版式构成的排版工具和方法 .学习重点:1.各类版式构成的特点2.排版工具的选用 .学习难点:区域式布局、排版工具的操作版式构成设计的概念网页界面的版式构成设计，是将文字、 图像、色彩、动画、视频等网页界面的传达 要素，根据特定的内容和主题，在网页所限 定的范围中，运用造型元素和形式原理进行 视觉的关联与配置，从而将设计意图以视觉 形式表现出来。这一过程实际上是创造性、 艺术性地传达信息的过程。版式构成的分类和特点商业网页的版式构成大致可分为分列式布局结构区域式布局结构自

2、由式布局结构1）分列式布局结构的特点分列式布局结构是运用最为广泛的商 业网页布局结构，英特网上的门户网站和 综合类网站绝大部分是这一结构。分列式 布局结构一般版面呈长方形，显示效果横 窄竖宽，有上下滚动条。分列式布局结构可分为：整列式、二 列式、三列式、四列式、五列式、混合列 式。整列式(通列) 其格式从上到下一通到底。这种版式构 成通常用于商业网页的内页，显示信息内容 、注册信息等页面的布局。二列式是最常见的分列式版式构成。二列式版 式构成一般是左窄右宽，也有时是右窄左宽 ，但非主流。三列式给人的感觉开放、大气，适用于门户类 和流量大的网站。常规内容设置是：导航横 排在页面上部，左右两列为功

3、能区和附加信 息区，中列为主要信息显示区和重要资料显 示区。四列式会使得页面相对很拥挤，给人一种网站 的信息量很大的感觉，信息储备少的站点采 用这种布局结构，可以在视觉感观上调整信 息量少的不足。五列式分列式布局的极限，多用于内页布局。 混合列式2）区域式布局结构的特点区域式布局结构在商业网页布局中运 用也很广，它通常利用颜色、线条、文字 的断口或插图的变换等手段把网页平面划 分为几个规则的或不规则的区域。区域式 布局结构版面接近方形，一般没有滚动条 或滚动条很短。 区域式布局结构灵活多变，划分出来 的区域大小、形式都可以自行定义，格局 则变化莫测。此类版式构成比较适用于企 业站点和产品单一的

4、电子商务类站点，以 及对页面要求较高、信息流通量小的专业 性信息站点，不适用于门户开放式站点和 信息交错紧密的站点。 3）自由式布局结构的特点自由式布局结构有静态和动态两种形 式。静态布局通常把网页当作平面出版物 创意设计，将信息与背景画面融为一体， 没有清晰的界限区分，设计好的网页图片 通常采取分割整张图片生成网页的形式去 制作。此类页面设计通常精美华丽，视觉 效果较好，个性化强，但不适用于信息量 大的站点。动态布局通常采用流行的Flash动画 作为表现形式。由于Flash强大的功能， 很多国际大公司都采用了布局结构。这 种排版形式变化多样，视觉冲击力强， 整体效果好。Flash动画使页面体

5、现出极 强的互动感、时代感和科技感。各类版式构成设计的开发工具类型推荐布局排版工具 分列式布局结构Dreamweaver 区域式布局结构Dreamweaver 自由式布局结构(静态)Photoshop+Dreamweaver 自由式布局结构(动态)Flash商业网页的页面元素设计 p logo设计 p Banner设计 p 导航设计 p 网页文字设计 p 图形图像设计 p 网页动画设计 一个网站是由多个网页组成，一张网页又是 由多个页面元素构成。网页界面包含了更多的构 成要素。除了文字和图形以外，还有动画、声音 和视频等多媒体元素，以及各种特殊效果及交互 功能正是由于这些区别于传统媒体的元素，

6、使 网页界面的设计要考虑更多的因素。通过本单元 使学生熟悉网页界面的基础页面元素，掌握页面 元素的设计要点，能综合运用各种元素设计出风 格各异的网页。1logo设计1）Logo的含义和形式网页Logo是指网站的标志、标识。Logo是 企业综合信息传递的媒介，是依据企业的构成 结构、行业类别、经营理念，并充分考虑标志 接触的对象和应用环境，为企业制定的标准视 觉符号。它以单纯、显著、易识别的物象、图 形或文字符号为直观语言，具有表达意义、情 感和指令行动等作用。Logo设计将具体的事物 、事件、场景和抽象的精神、理念、方向通过 特殊的图形固定下来，使人们在看到Logo标志 的同时，自然的产生联想

7、，从而对企业产生认 同。网页中的Logo可分为图案Logo、文字Logo 、图文Logo。（1）图案Logo通过隐寓、联想、概括、 抽象 等绘画表现方法表现被标识体，对其理念的表 达概括而形象，容易区分、记忆，如图所示。 但图案Logo往往与被标识体关联 性不够直接 ，浏览者容易记忆图案本身，对被标识体的关 系的认知需要相对较曲折的 过程。可一旦建 立联系，印象较深刻，对被标识体记忆则相对 持久。所以对持久记忆要求高时应设计良好的 特示图案形象。（2）文字Logo涵义明确、直接， 易于被理解 ，认知，对所表达的理念也具有说明的作用， 如图所示。但因为文字本身的相似性易模糊受 众对标识本身的记忆

8、，从而对被标识体的长久 记忆发生弱化。所以特示文字，一般作为特示 图案的补充，要求选择的字体应与整体风格一 致， 应尽可能做全新的区别性创作。完整的 Logo设计，尤其是有中国特色的Logo设计，在 国际化的要求下，一 般都应考虑至少有中英 文双语的形式，要考虑中英文字的比例、搭配 ，还要兼顾标识或文字展开后的应用是否美观 ，这 一点对背景等的制作十分必要，有利于 追求符号扩张的效果。（3）图文Logo是文字与图案结合，兼具文字与 图案的属性，如图所示。但图文Logo易导致相 关属性的影响力相对弱化。为了不同的对象取 向，制作偏图案或偏文字的 Logo，会在表达 时产生较大的差异。如只对印刷字

9、体做简单修 饰，或把文字变成一 种装饰造型让大家去猜 。其综合功能为：能够直接将被标识体的印象 ，透过文字造型让读者理解；造型后的文字， 较易于使观者留下深刻印象与记忆。2）Logo设计原则（1）遵循人们的认识规律，突出主题、引人注 目。能够在方寸之间概括出站点的理念，保持 视觉平衡、讲究线条的流畅，使整体形状美观 ，用反差、对比或边框等强调主题。（2）外观尺寸要根据页面的整体版面设计来确 定，选择恰当字体，注意留白，给人想象空间 。（3）在色彩运用上基色要相对稳定，强调色彩 的形式感、记忆感和感情规律。合理使用色彩 的对比关系，重视色彩的注目性。（4）形式上重视简约，以简洁的符号化的视觉 艺

10、术形象把网站的形象和理念长留于人们心中 。Banner设计 1）Banner的含义和形式网页Banner是指网页中的广告。它可分为 横幅广告、通栏广告、弹出窗口广告、擎天柱 广告、按钮广告、画中画广告、漂浮（滑动） 广告、文字链接广告、隐藏页面广告等。 （1）横幅广告是互联网广告中最基本的广告形 式，尺寸是49060像素，或23330像素，可 以使用静态图形，也可用多帧图像拼接为动画 图像，如图所示。除普通GIF格式外，目前流行使用动感更强，交互性更高的Flash形式。横幅广告只需稍具视觉冲击力就能轻易吸引浏览者的视线，可谓事半功倍。既可以通过广告画面或告语向浏览者传递某种信息，更可以引导浏览

11、者与商家进行深度接触，实现交互。（2）通栏广告通常放在网页顶部或中间等显著 位置，横贯页面，如图所示。 该广告形式尺 寸较大，视觉冲击力强，能給网络访客留下深 刻印象。特别适合活动信息发布、产品推广、 庆典等。这种广告版幅较大，是当今网络媒体中深受喜爱的广告形式。贯穿页面的大面积发布空间使广告诉求得以充分发挥，从而将网络媒体较之传统媒体的优势演绎得更加彻底。其合理地嵌入页面重要位置更使其如虎添翼。一种规格相当于两条横幅的宽屏广告，广告置于整个页面的中部，可以在媒体网站的首页和频道页面刊登。宽屏广告由于被放置在网站的黄金版位上，一 方面广告的含金量增加，另一方面由于中位的 缘故，访客在浏览页面下

12、端信息时势必接触广 告，从而提高广告的有效曝光。广告面积大， 广告信息丰富； 广告创意可以任意发挥，尽现 广告表现； 由于宽银幕广告是上端页面与下端 下页面的“桥梁“，访客在浏览整个页面时，必 须先浏览广告，即广告信息可以迅速地传达到 访客的视野中，这样广告的有效度大大提高。 （3）弹出窗口广告是在访问者进入该页面之前 ，就抢先以大尺寸弹出的形式将相关广告信息 推介给浏览者，使人在意外之间加以关注。首 页弹出窗口广告是网页中十分流行的广告形式 ，它可以有力的为您做好每一种广告，加大对 您的宣传力度。（4）擎天柱广告是在网页右侧或左侧竖条式广 告形式，它可以形象的表现广告的宣传，是一 种新型的广

13、告形式，是利用网站页面左右两侧 的竖式广告位置而设计的广告形式，如图所示 。 这种广告形式可以直接将客户的产品和产品特 点详细的说明，并可以进行特定的数据调查、 有奖活动。广告规格为120600像素，制作表 现为Flash, JavaScript或 Gif, Jpg。由于广 告规格较大，广告置于页左右两侧，不会产生 上下段位的广告盲区，广告位置可以强烈冲击 访客视觉； 广告的独享和排他性，可以降低广 告的干扰，同时也可以更好的传达广告信息； 可以进行多方位的广告信息诉求，广告调查、 有奖活动、产品测试、热点追踪等均可在此进 行，并容易引起访客的注意。（5）按钮广告尺寸较小，有12060、904

14、0、4020像素等大小。由于图形尺寸小，故可以被更灵活的放置在网页的任何位置。（7）漂浮（滑动）广告是随页面浏览而上下移 动的小型图像，会一直处于浏览者的视线之中 。往往一个颇具悬念的诉求就会使浏览者欲罢 不能，点击即进入。（8）文字广告是通过一般性的简短文字链接， 直链连接到客户的广告内容页面上。广告简单 明了，直接涵盖主题，对访问者而言具有较强 的针对性和引导性。文字链接广告是较软性的 宣传手法，以精简煽动的语句体现相关诉求， 引发浏览者的好奇心理并进一步地关注。文字 链接是一种对浏览者干扰最少，却很有效果的 网络广告形式。一般不超过10个汉字，发布在 首页、重点频道首页的推荐位置。 （9

15、）隐藏页面广告是在Banner广告的基础上发 展的产物，也是为了弥补Banner广告传载信息 较少、广告表现单一的不足。隐藏页面广告主 要是通过鼠标掠过，从而产生动态的页面。这 个页面是隐藏在特定的广告表现形式下，广告 规格一般是特定广告的3-4倍，这样弥补了基本 广告所不能说明的信息。由于广告信息的出现 由访客鼠标控制，并具有隐蔽性的特点，所以 广告具有明显的趣味性； 广告主要是对基本广 告形式的补充，所以起到了说明、感染的作用 ，并提高了访客对广告的兴趣； 广告在没有动 作的情况下不会出现更大的广告页面，这样不 会影响访客对自己所关心的信息的接受和浏览 ，可以增加亲和力，并广告的针对性也较

16、强。 （10）播放式广告是在Banner出现的广告位置 上不断的变化单一广告客户的广告，在流量上 进行控制。这样避免了单一Banner缺乏吸引的 状况，并在视觉上使访客产生新鲜的感觉。广 告动感更加明显，广告形式从单一型，向多元 型转变；广告动态的感觉象电影播放，色彩丰 富； 广告集中，避免一条广告不能吸引访客的 弊端，多条客户广告的播放状态，使广告信息 更加广泛。 2）Banner设计原则（1）文字编排简洁、和谐。（2）内容醒目、美观，视觉效果好（3）广告内容的方向正确。（4）激起点击的欲望。你的广告让浏览者点击 的理由是什么？点击后将能看到什么？（5）适当的留空，避开广告条的边缘。 导航设计1）导航的含义和形式导航是网页的目录，网页之间的联系和分 类通过它来实现。导航应放置在页面的醒目位 置，让浏览者在第一时间看到它。网页中的导航通常分为文字导航、图像导 航、交替图像导航、下拉菜单导航、Flash导航 。（1）文字导航是由纯文字构成，简洁、清爽， 容量较小。（2）图像导航美观、大方，字体选用不受限制 ，但占用空间较大。（3）交替图像导航是指当站点访问