网站版式设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
页面中不同的视域，注目程度不同，给人心理 上的感受也不同。
如下:
上部给人轻快、漂浮、积极、高昂之感；下部 给人压抑、沉重、限制、稳定的印象；左侧， 感觉轻便、自由、舒展，富于活力；右侧，感 觉局促却显得庄重。网页中最重要的信息，应 安排在注目率最高的页面位置，这个位置便是 页面的最佳视域。
9.三角型 ： 网页各视觉元素呈三角形排列。正三角形（金 字塔型）最具稳定性，倒三角形则产生动感。 侧三角形构成一种均衡版式，既安定又有动感。
10.自由型： 自由型的页面具有活泼、轻快的风格。
三.网站制作中的比例：
美的比例是网页设计成功的基础，好页面的首 部、菜单、页面和底部的合理安排和选择，首 先取决于良好的比例！
4.主次关系 ： 对用户引导的关键就在于怎么处理主次关系。
说白了就是对比，从视觉的角度上看：形状的 大小，颜色，摆放的位置都会影响信息的重要 与否。
比如yahoo中间新闻栏的设计，大图带大标题 是第一要点，小图带字是第二要点，纯文本第 三，节奏感、主次关系非常强。
5.常见问题：
(1)视觉设计师不懂代码，前端设计师在视觉 方面又不专业。常常是实现出来的产品跟视 觉设计出来的图片有所偏差。建议视觉设计 师跟进调整。
公认为最美的比例是黄金比(黄金分割)－－ 1:1.618。
还有一种美的比例标准产生于德国，我们称之 为德国标准比例。1:1.141。
四.网站设计风格 ：
风格是抽象的。是指站点的整体形象给浏览者 的综合感受。
举个例子：我们觉得网易是平易近人的，迪斯 尼是生动活泼的，IBM是专业严肃的。这些都 是网站给人们留下的不同感受。
网站版式设计
一.网站的视觉路径
1.视觉路径一般是：从上到下，从左到右。 2.网站中方块： (1)方块感越强越能给用户方向感。 (2)方块越少越好。 (3)尽量用留白做视觉区分。
3.对齐和间距：
(1)视觉设计最简单，也是最容易忽略的就是 对齐。
(2)间距的一般规律：字距小于行距，行距小 于段距，段距小于块距。
(7)各种图形从大到小渐层排列时，视线会强 烈地按照排列方向流动。
2.视觉流程概念：
是视线在观赏物上的移动过程，是二维或三维 空间中的运动。
3.视觉流程 ：
(1)视觉流程的筹划 ：
视觉流程是网页版式设计的重要内容，可以说， 视觉流程运用的好坏，是设计者技巧成熟与否 的表现。
七.视觉流程版式类型 ：
1.视觉运动规律 ： (1)一条垂直线在页面上，会引导视线作上下
的视觉流动 。
(2)水平线会引导视线向左右的视觉流动 。 (3)斜线比垂直线、水平线有更强的视觉诉求
力。百度文库
(4)矩形的视线流动是向四方发射的 。
(5)圆形的视线流动是辐射状的 。
(6)三角形则随着顶角之方向使视线产生流动 。
4.中轴型 ： 沿浏览器窗口的中轴将图片或文字作水平或垂 直方向的排列。水平排列的页面给人稳定、平 静、含蓄的感觉。垂直排列的页面给人以舒畅 的感觉。
5.曲线型 ： 图片、文字在页面上作曲线的分割或编排构成， 产生韵律与节奏。
6.倾斜型： 页面主题形象或多幅图片、文字作倾斜编排， 形成不稳定感或强烈的动感，引人注目
2．用两种色彩。先选定一种色彩，然后选择 它的对比色。 3．用一个色系。简单的说就是用一个感觉的 色彩，例如淡蓝，淡黄，淡绿；或者土黄，土 灰，土蓝。
六.颜色误区 ：
1．不要将所有颜色都用到，尽量控制在三~五 种色彩以内。 2．背景和前文的对比尽量要大，(绝对不要用 花纹繁复的图案作背景)，以便突出主要文字 内容。
7.对称型： 对称的页面给人稳定、严谨、庄重、理性的感 受。
8.焦点型 ： 焦点型的网页版式通过对视线的诱导，使页面 具有强烈的视觉效果。
（1）中心 以对比强烈的图片或文字置于页 面的视觉中心。 （2）向心 视觉元素引导浏览者视线向页面 中心聚拢，就形成了一个向心的版式。向心版 式是集中的、稳定的，是一种传统的手法。 （3）离心 视觉元素引导浏览者视线向外辐 射，则形成一个离心的网页版式。离心版式是 外向的、活泼的，更具现代感，运用时应注意 避免凌乱。
2.满版型 ： 页面以图像充满整版。主要以图像为诉求点， 也可将部分文字压置于图像之上。视觉传达效 果直观而强烈。满版型给人以舒展、大方的感 觉。随着宽带的普及，这种版式在网页设计中 的运用越来越多。
3.分割型： 把整个页面分成上下或左右两部分，分别安排 图片和文案。两个部分形成对比：有图片的部 分感性而具活力，文案部分则理性而平静。可 以调整图片和文案所占的面积，来调节对比的 强弱。例如：如果图片所占比例过大，文案使 用的字体过于纤细，字距、行距、段落的安排 又很疏落，则造成视觉心理的不平衡，显得生 硬。倘若通过文字或图片将分割线虚化处理， 就会产生自然和谐的效果。
(2)广告图片破坏视觉效果。如果网站足够牛 的话，可以让广告方遵循视觉规范。如果不 行的话，起码设计师还能决定广告的尺寸， 位置等等。
新浪、腾讯、淘宝的首页改版。单纯从视觉 设计的角度上看，腾讯非常清爽，很用心。
二.版式的基本类型：
1.骨骼型 ： 网页版式的骨骼型是一种规范的、理性的分割 方法，类似于报刊的版式。常见的骨骼有竖向 通栏、双栏、三栏、四栏和横向的通栏、双栏、 三栏和四栏等。一般以竖向分栏为多。这种版 式给人以和谐、理性的美。几种分栏方式结合 使用，既理性、条理，又活泼而富有弹性。
1．将你的标志logo，尽可能的放在每个页面 上最突出的位置。
2．突出你的标准色彩。 3．总结一句能反映贵站精髓的宣传标语！ 4．相同类型的图像采用相同效果，比如说标
题字都采用阴影效果，那么在网站中出现的所 有标题字的阴影效果的设置应该是完全一致的！
五.网页色彩的搭配 ：
1．用一种色彩。这里是指先选定一种色彩， 然后调整透明度或者饱和度，这样的页面看起 来色彩统一，有层次感。
如下:
上部给人轻快、漂浮、积极、高昂之感；下部 给人压抑、沉重、限制、稳定的印象；左侧， 感觉轻便、自由、舒展，富于活力；右侧，感 觉局促却显得庄重。网页中最重要的信息，应 安排在注目率最高的页面位置，这个位置便是 页面的最佳视域。
9.三角型 ： 网页各视觉元素呈三角形排列。正三角形（金 字塔型）最具稳定性，倒三角形则产生动感。 侧三角形构成一种均衡版式，既安定又有动感。
10.自由型： 自由型的页面具有活泼、轻快的风格。
三.网站制作中的比例：
美的比例是网页设计成功的基础，好页面的首 部、菜单、页面和底部的合理安排和选择，首 先取决于良好的比例！
4.主次关系 ： 对用户引导的关键就在于怎么处理主次关系。
说白了就是对比，从视觉的角度上看：形状的 大小，颜色，摆放的位置都会影响信息的重要 与否。
比如yahoo中间新闻栏的设计，大图带大标题 是第一要点，小图带字是第二要点，纯文本第 三，节奏感、主次关系非常强。
5.常见问题：
(1)视觉设计师不懂代码，前端设计师在视觉 方面又不专业。常常是实现出来的产品跟视 觉设计出来的图片有所偏差。建议视觉设计 师跟进调整。
公认为最美的比例是黄金比(黄金分割)－－ 1:1.618。
还有一种美的比例标准产生于德国，我们称之 为德国标准比例。1:1.141。
四.网站设计风格 ：
风格是抽象的。是指站点的整体形象给浏览者 的综合感受。
举个例子：我们觉得网易是平易近人的，迪斯 尼是生动活泼的，IBM是专业严肃的。这些都 是网站给人们留下的不同感受。
网站版式设计
一.网站的视觉路径
1.视觉路径一般是：从上到下，从左到右。 2.网站中方块： (1)方块感越强越能给用户方向感。 (2)方块越少越好。 (3)尽量用留白做视觉区分。
3.对齐和间距：
(1)视觉设计最简单，也是最容易忽略的就是 对齐。
(2)间距的一般规律：字距小于行距，行距小 于段距，段距小于块距。
(7)各种图形从大到小渐层排列时，视线会强 烈地按照排列方向流动。
2.视觉流程概念：
是视线在观赏物上的移动过程，是二维或三维 空间中的运动。
3.视觉流程 ：
(1)视觉流程的筹划 ：
视觉流程是网页版式设计的重要内容，可以说， 视觉流程运用的好坏，是设计者技巧成熟与否 的表现。
七.视觉流程版式类型 ：
1.视觉运动规律 ： (1)一条垂直线在页面上，会引导视线作上下
的视觉流动 。
(2)水平线会引导视线向左右的视觉流动 。 (3)斜线比垂直线、水平线有更强的视觉诉求
力。百度文库
(4)矩形的视线流动是向四方发射的 。
(5)圆形的视线流动是辐射状的 。
(6)三角形则随着顶角之方向使视线产生流动 。
4.中轴型 ： 沿浏览器窗口的中轴将图片或文字作水平或垂 直方向的排列。水平排列的页面给人稳定、平 静、含蓄的感觉。垂直排列的页面给人以舒畅 的感觉。
5.曲线型 ： 图片、文字在页面上作曲线的分割或编排构成， 产生韵律与节奏。
6.倾斜型： 页面主题形象或多幅图片、文字作倾斜编排， 形成不稳定感或强烈的动感，引人注目
2．用两种色彩。先选定一种色彩，然后选择 它的对比色。 3．用一个色系。简单的说就是用一个感觉的 色彩，例如淡蓝，淡黄，淡绿；或者土黄，土 灰，土蓝。
六.颜色误区 ：
1．不要将所有颜色都用到，尽量控制在三~五 种色彩以内。 2．背景和前文的对比尽量要大，(绝对不要用 花纹繁复的图案作背景)，以便突出主要文字 内容。
7.对称型： 对称的页面给人稳定、严谨、庄重、理性的感 受。
8.焦点型 ： 焦点型的网页版式通过对视线的诱导，使页面 具有强烈的视觉效果。
（1）中心 以对比强烈的图片或文字置于页 面的视觉中心。 （2）向心 视觉元素引导浏览者视线向页面 中心聚拢，就形成了一个向心的版式。向心版 式是集中的、稳定的，是一种传统的手法。 （3）离心 视觉元素引导浏览者视线向外辐 射，则形成一个离心的网页版式。离心版式是 外向的、活泼的，更具现代感，运用时应注意 避免凌乱。
2.满版型 ： 页面以图像充满整版。主要以图像为诉求点， 也可将部分文字压置于图像之上。视觉传达效 果直观而强烈。满版型给人以舒展、大方的感 觉。随着宽带的普及，这种版式在网页设计中 的运用越来越多。
3.分割型： 把整个页面分成上下或左右两部分，分别安排 图片和文案。两个部分形成对比：有图片的部 分感性而具活力，文案部分则理性而平静。可 以调整图片和文案所占的面积，来调节对比的 强弱。例如：如果图片所占比例过大，文案使 用的字体过于纤细，字距、行距、段落的安排 又很疏落，则造成视觉心理的不平衡，显得生 硬。倘若通过文字或图片将分割线虚化处理， 就会产生自然和谐的效果。
(2)广告图片破坏视觉效果。如果网站足够牛 的话，可以让广告方遵循视觉规范。如果不 行的话，起码设计师还能决定广告的尺寸， 位置等等。
新浪、腾讯、淘宝的首页改版。单纯从视觉 设计的角度上看，腾讯非常清爽，很用心。
二.版式的基本类型：
1.骨骼型 ： 网页版式的骨骼型是一种规范的、理性的分割 方法，类似于报刊的版式。常见的骨骼有竖向 通栏、双栏、三栏、四栏和横向的通栏、双栏、 三栏和四栏等。一般以竖向分栏为多。这种版 式给人以和谐、理性的美。几种分栏方式结合 使用，既理性、条理，又活泼而富有弹性。
1．将你的标志logo，尽可能的放在每个页面 上最突出的位置。
2．突出你的标准色彩。 3．总结一句能反映贵站精髓的宣传标语！ 4．相同类型的图像采用相同效果，比如说标
题字都采用阴影效果，那么在网站中出现的所 有标题字的阴影效果的设置应该是完全一致的！
五.网页色彩的搭配 ：
1．用一种色彩。这里是指先选定一种色彩， 然后调整透明度或者饱和度，这样的页面看起 来色彩统一，有层次感。