网页设计视觉篇.ppt

网页设计视觉篇;视觉表现篇;6.视听元素;同操作系统都有不同的字体系统，而浏览器是用本地系统字库显示页面内容的，大多数浏览者的系统里只装有几种常的字体类型，因此设计的特殊字体在浏览者的系统里并不一定能看到预期设计效果。;在平面设计中常以字体被修饰与是否将字体分为衬线字体与非无衬线字体，衬线字体就是中文里的宋体，英文的TimesNewRoma，其特点是在字体边角会多出一些修饰，可以清晰的分辨出字母和文字，分辨笔划的起始和终止，适合大段文字正文的阅读。无衬线字体则是中文里的黑体、英文的Aril，这种文字看起来很干净整齐，同等字号的字体，无衬线体视觉感受更大，因此适合大标题显示;;字体样式包括字体的大小，颜色，字体是常规、还是倾斜或加粗等。

目前，在桌面端网页界面中正文大小一般为12、13px，最小不小于11px，小标题为14px,大标题为16px，最大字体不要超过18px。由于奇数字号显示在较早版本的浏览器中会出现锯齿状，所以经常采用偶数字号。

;字距与行距的处理能直接体现设计作品的风格与品位，也能够影响读者的视觉和心理感受。;行距可以说是让字有了呼吸空间。行距的常规比例为10:12，即用字10px，则行距12px。一般来说，欧文视情况取1.2-1.5倍行距，而中文一般公认是取1.5倍行距为宜,适当的行距会形成一条明显的水平空白条，以引导浏览者的目光，而行距过宽则会使一行文字失去较好的延续性。;6.1.3文字编排的艺术性;6.2.1图片的选择;摄影类图片来自摄影，图片能够直观地表现主题，侧重于如实地表现产品本身。因此，电子商务网站尤其亲睐高清的摄影类图片。;现如今无论是摄影图片还是矢量图片，使用大图作为网页背景越来越受欢迎，有的甚至全屏图片。如MartinaSperl家居网站首页将整个背景都铺满了大图，全局导航固定在界面右侧，其目的是让用户完全沉浸在美好的家居生活中的.;虽然适当使用摄影图片来做网站背景可以提升网页的视觉效果，但图片加载还是多少会影响网站速度，因此这种布局较适用于结构简单的品牌企业网站、时尚类网站、专题网站。;6.2.2格式与优化;位图格式是网???设计中最常用的图片格式类型，图片有自己固定的尺寸大小，放大后不能清晰显示。如果将一个网页“另存为”，会看到文件夹中保存大量的Jpg、Png、Gif各种图片格式。;Jpg;Jpg;Jpg;Jpg;虽然Png-8和Png-24同样支持全透明图片，但存储的效果却大不一样。;格式;其中矢量图格式的有Svg（ScalableVectorGraphics），其特点一是文件体积小，二是能够被大量的压缩，图片可无限放大而不失真，能够实现互动和滤镜效果，三是此格式既支持设计师在设计软件中设计后保存，还支持程序员通过代码直接生成图形。;Jpg--图标背景默认白色，

文件大小：6.06kb

;6.2.3图像的肌理;6.3.1色彩的模式;在网页上要指定一种颜色，就要使用RGB模式来确定，方法是分别指定R、G、B三种色彩的强度，最低的强度数值为0，最高强度数值为255，并通常都以16进制数值表示。因此255对应于十六进制就是FF，并把三个数值依次并列起来，以#开头。如R：255，G：255，B：255，其对应的十六进制色就是“#ffffff”,也就是白色。;6.3.2色彩的情感;橙色也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。;黄色是所有色相中最能发光的颜色，给人轻快，透明，辉煌，充满希望的色彩印象。;绿色自然中最多的颜色，绿色能够唤起一种人类对于自然的本能意识。绿色代表着通行、准许通过的意思，因此很多常用于开始按钮和下载按钮，还有成功提示页面。;蓝色是最具凉爽，清新，专业的色彩。蓝色天生冷静，能够给人以安全感，但是它同样有着优雅和活泼的一面，在很多领域都能用得上它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:);紫色是由温暖的红色和冷静的蓝色化合而成，被认为是一种优雅高档的色彩，常用于表现商品的奢华和高贵。紫色同时也是很多艺术家都喜欢的色彩。紫色智慧想象神秘高雅。;6.3.3色彩组合;非彩色的搭配;非彩色的搭配;非彩色的搭配;非彩色的搭配;6.4.1视频;6.4.2音频;人的眼睛善于捕捉动态的图形，因此动效在网页的信息展示及交互中往往是点睛之笔。从技术的角度分类可分为gif,flash与程序实现的动画。;6.5.1gif动图;6.5.2flash动画;6.5.3程序实现的动画;6.6案例——天猫商城店铺设计