网页版式设计2

曲线型
• 6.倾斜型
• 页面主题形象或多幅图片、文字作倾斜编 排，形成不稳定感或强烈的动感，引人注 目。 • 此类网站版式为各类网站所采用。如 BIOTHERM。
倾斜型
• 7.对称型
• 对称的页面给人稳定、严谨、庄重、理性的感受。对称分 为绝对对称和相对对称。一般采用相对对称的手法，以避 免呆板。左右对称的页面版式比较常见。四角型也是对称 型的一种，是在页面四角安排相应的视觉元素。四个角是 页面的边界点，重要性不可低估。在四个角安排的任何内 容都能产生安定感。控制好页面的四个角，也就控制了页 面的空间。越是凌乱的页面，越要注意对四个角的控制。 • 此类网站版式为各类网站所采用。如PEDRPPER。
什么是版式设计?
– 版式设计 1 版式设计概述 版式设计是现代设计艺术的重要组成部分，是视觉传达的重 要手段，表面上看，它是一种关于编排的学问；实际上，它不仅 是一种技能，更是技术与艺术的高度统一。版式设计是现代设计 家必须具备艺术修养和技术知识。 – 1.1 版式设计的定义 版式[format] －指书刊等的版面格式 版面－（报刊、书籍的一）整页 所谓版式设计，就是在版面上，将有限的视觉元素进行有机 的排列组合。 将理性思维，个性化地表现出来；一种具有个人风格和艺术 特色的视觉传送方式。 – 传达信息，同时，也产生感官上的美感。 版式设计的范围，涉及到报纸、刊物、书籍（画册）、产品 样本、挂历、招贴画、唱片封套和网页页面等平面设计各个领域。
除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加 强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。 例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容 恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层 次与弹性，表现出独到的匠心
• 行距的变化也会对文本的可读性产生很大影响。一般情况 下，接近字体尺寸的行距设置比较适合正文。行距的常规 比例为10:12，即用字10点，则行距12点。这主要是出于 以下考虑:适当的行距会形成一条明显的水平空白带，以 引导浏览者的目光，而行距过宽会使一行文字失去较好的 延续性。
12px/18--20 行距
自由型 无规律的、随意的编排构成。 有活泼、轻快的感觉。
自由型 无规律的、随意的编排构成。 有活泼、轻快的感觉。
自由型 无规律的、随意的编排构成。 有活泼、轻快的感觉。
• 怎么样做好网页版式设计？
先来了解网页版式布局的基本类型
主要有：
骨骼型、满版型、分割型、中轴型、曲线 型、倾斜型、对称型、焦点型、三角型、 自由型十种。
• 1.骨骼型 网页版式的骨骼型是一种规范的、理性的分割方 法，类似于报刊的版式。常见的骨骼有竖向通栏、 双栏、三栏、四栏和横向的通栏、双栏、三栏和 四栏等。一般以竖向分栏为多。这种版式给人以 和谐、理性的美。几种分栏方式结合使用，既理 性、条理，又活泼而富有弹性。 • 此类网站均属门户、新闻媒体类网站所采用。如 TNT.com。
骨骼型
.2.满版型
页面以图像充满整版。主要以图像为诉求点，也 可将部分文字压置于图像之上。视觉传达效果直观而 强烈。满版型给人以舒展、大方的感觉。随着宽带的 普及，这种版式在网页设计中的运用越来越多。 此类版式被各种网站所采用，但运用自如的是韩 国网站。韩国网站设计在运用满版和FLASH方面是我 们应当仔细研习的。如SK-KING。
• • • • • • • • • • •
优秀网页设计的共同特点近期惹人喜欢的网站都有下面的特征： ·布局简单 ·中心定位 ·3D效果 ·柔和,自然的背景色 ·颜色鲜亮（要谨慎使用） ·可爱的图标（也要谨慎使用） ·有许多留白 ·大字体 ……………………………………………..
一.文字的格式化
字号、字体、行距 字号大小可以用不同的方式来计算，例如磅(point)或像 素(pixel)。因为以计算机的像素技术为基础的单位需要在打 印时转换为磅，所以，建议采用磅为单位。 最适合于网页正文显示的字体大小为12磅左右，现在很多 的综合性站点，由于在一个页面中需要安排的内容较多，通常 采用9磅的字号。较大的字体可用于标题或其他需要强调的地 方，小一些的字体可以用于页脚和辅助信息。需要注意的是， 小字号容易产生整体感和精致感，但可读性较差。
•焦点型
• 9.三角型
• 网页各视觉元素呈三角形或多角形排列。正三角形（金字 塔型）最具稳定性，倒三角形则产生动感。侧三角形构成 一种均衡版式，既安定又有动感。 • 此类网站均属门户、新闻媒体类网站所采用。如LIFEbeat。
•三角型
• 10.自由型
• 自由型的页面具有活泼、轻快的风格。 • 此类网站如SESAC。
分割型
• 4.中轴型 • 沿浏览器窗口的中轴将图片或文字作水平或 垂直方向的排列。水平排列的页面给人稳定、 平静、含蓄的感觉。垂直排列的页面给人以 舒畅的感觉。 • 此类网站版式为各类网站所采用。如ALFA ROMEO。
中轴型
• 5.曲线型
• 图片、文字在页面上作曲线的分割或编 排构成，产生韵律与节奏。 • 此类网站版式为各类网站所采用。如 POISE。
•对称型
• 8.焦点型 • 焦点型的网页版式通过对视线的诱导，使页面具 有强烈的视觉效果。焦点型分三种情况。（1）中 心 以对比强烈的图片或文字置于页面的视觉中 心。（2）向心 视觉元素引导浏览者视线向页面 中心聚拢，就形成了一个向心的版式。向心版式 是集中的、稳定的，是一种传统的手法。（3）离 心 视觉元素引导浏览者视线向外辐射，则形成 一个离心的网页版式。离心版式是外向的、活泼 的，更具现代感，运用时应注意避免凌乱。 • 此类网站如AQUAFINA。
• 1.2 版式设计的原则 让观看者在享受美感的同时，接受作者想要传达的信息。 1、主题鲜明突出 版式设计的最终目的是使版面产生清晰的条理性，用悦目的组织 来更好地突出主题，达到最佳诉求效果。 按照主从关系的顺序，使放大的主体形象视觉中心，以此表达主 题思想。 将文案中的多种信息作整体编排设计，有助于主体形象的建立。 在主体形象四周增加空白量，使被强调的主体形象更加鲜明突出。 2、形式与内容统一 版式设计的前提－版式所追求的完美形式必须符合主题的思想内 容。 通过完美、新颖的形式，来表达主题。 没有文字的版面，最难设计。
满版型
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文 案。两个部分形成对比：有图片的部分感性而具活力， 文案部分则理性而平静。可以调整图片和文案所占的面 积，来调节对比的强弱。例如：如果图片所占比例过大， 文案使用的字体过于纤细，字距、行距、段落的安排又 很疏落，则造成视觉心理的不平衡，显得生硬。倘若通 过文字或图片将分割线虚化处理，就会产生自然和谐的 效果。 此类网站版式为各类网站所采用。如ABBEY。
在同一页面中，字体种类少，版面雅致，有稳定感;字体种 类多，则版面活跃，丰富多采。关键是如何根据页面内容来 掌握这个比例关系。
从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器 是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数 浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字 体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解 决问题的办法是:在确有必要使用特殊字体的地方，可以将文字制成图像，然 后插入页面中。
• 2 版式的基本类型 骨格型、满版型、上下分割型、左右分割型、中轴型、曲线型、 倾斜型、对称型、重心型、三角型、并置型、自由型和四角型等13种。 • 2.1 骨格型 规范的、理性的分割方法。 常见的骨格有－竖向通栏、双栏、三栏和四栏等。一般以竖向 分栏为多。 图片和文字的编排上，严格按照骨格比例进行编排配置，给人 来自百度文库严谨、和谐、理性的美。 骨格经过相互混合后的版式，既理性有条理，又活泼而具有弹 性。 • 2.2 满版型 版面以图像充满整版，主要以图像为诉示，视觉传达直观而强 烈。文字配置压置在上下、左右或中部（边部和中心）的图像上。 满版型，给人大方、舒展的感觉。是商品广告常用的形式。
9pt(磅)\12px(像数)
网页设计者可以用字体来更充分地体现设计中要表达的情感。 字体选择是一种感性、直观的行为。但是，无论选择什么字 体，都要依据网页的总体设想和浏览者的需要。 1.粗体字强壮有力，
有男性特点，
适合机械、 建筑业等内容
细体字高雅细致， 有女性特点，更适合服装、 化妆品、食品等行业的内容