第五章网站界面设计-视觉呈现设计.pptVIP

五、字体 第二节 网页版式设计 页面比例 网页的分栏 版面率 图版面积和跳跃率 一、页面比例 黄金比：1：0.618，在页面设计上，横向的比例分割是主要的，竖向的比例分割多用于页面头部的设计 一、页面比例：对称比 一、页面比例－德国比例标准 以正方形的对角线为长边，正方形的一边为短边，求得的长方形是德国的标准比例。大方、朴素、公正是它的特点 二、页面的分栏 网站页面的版面变化主要是通过栏的变化来体现，栏的变化有两种，一种是横栏打通，一种是竖栏打通。如果是网站的重要内容，可以跨越好几个栏。在网站的版面左上方是最受注目的地方，其次是右上方，再其次是右下与左下。重要的栏目标题尽量放在首屏。多数网站采用1－4竖式的版式。 三、版面率 再版面中文字的面积与版面总面积之比，称为版面率，版面率主要受文字、图片和留白之间关系的影响。版面率低的给人高雅感，版面率高的新闻性通俗性强。 三、版面率－不同版面率的设计 三、版面率－留白 四、图版面积和跳跃率 在版面中，单击点面积大小的差异，称为跳跃率，跳跃率低的适用于高格调古典风格的版面，跳跃率高的适用于活泼或现代感强的版面。 五、页面的边和角 边角对比 五、页面的边和角 第三节 网页元素设计技巧 可维护的网页设计 图片的设计技巧 线型 面的造型 一、可维护的网页设计 网站的开发流程 标准化设计 差异性设计 二、图片的设计技巧 图片的使用技巧 适合传输的图片格式 －GIF格式 －JPEG格式 －FLASH格式 －拆图 三、线形 单线 －方向感 －单线的造型 －表格线 复线 四、面的造型 面式最自然的形态。世界上各种各样的面可以归结为三角形、方形、方园过渡型、圆形于椭圆型五个基本形状，前面的偏向于运动的、阳刚的、外张的、属阳刚型，后面的偏向于阴柔型。在一般情况下，由于表格的需要，方形是最常用的形态，是主导方面；其他形态经常需要和方形配合使用，是次要方面；在有些情况下，后者可能升为主导方面，方形退居次要方面。 视觉呈现设计 视觉呈现设计 第一节 网站的主调 第二节 网页版式设计 第三节 网页元素设计技巧 第四节 视觉呈现案例分析 第一节 网站的主调 统一构成主调 视觉中心主导主调 形象点亮主调 色彩烘托主调 一、统一构成主调 主调涉及到公司形象的本质，需要设计人员深入理解公司的企业形象和文化内涵，以及客户的意图和需求，以此来确定网站的风格和主题。同时，网站应该清晰简洁、引人注目，有自己独特的语言 主调不是用语言能清楚描述的，是通过视觉元素的合理组织实现 当页面需要呈现很多不同的内容，这时需要保持主调的统一，通过精选特定的设计元素和谐搭配，经过讲究的版面组合，取得对立统一、丰富又不失协调的良好效果 历史凝重的主调 古典宁静的主调 二、视觉中心主导主调 页面左上角的“第一阅读点”，往往安排各个网站的标识或品牌 网站的“导航器”一般被放置在“第二阅读点” 页面的第一次或第二次黄金分割线的“第三阅读点”为真正的内容 视觉的焦点一般会聚集在画面的适中处，适中点为画面面积的1/25 广告一般安排在三个阅读点之间 三、形象点亮主调 形象是一种与现实事物相联系的感知形式，网站就是要利用形象营造某种氛围，带人们进入一个“想象界”，通过引发人们的想象来达到烘托、点亮主调的目的。如果将形象设置在视觉中心，这种作用就更加有效。 图12.1.1 无限分割的黄金矩形