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