(完整版)网页设计（视觉篇）-1.ppt

1、网页设计从界面布局到视觉表现视觉表现篇视听元素网页视觉设计要点网页视觉风格6.视听元素6.1 文字6.2 图像6.3 色彩6.4 多媒体6.5 动效6.6 案例天猫商城店铺界面 设计 同操作系统都有不同的字体系统，而浏览器是用本地系统字库显示页面内容的，大多数浏览者的系统里只装有几种常的字体类型，因此设计的特殊字体在浏览者的系统里并不一定能看到预期设计效果。视觉篇6.1.1 字体的选择6.1 文字在平面设计中常以字体被修饰与是否将字体分为衬线字体与非无衬线字体，衬线字体就是中文里的宋体，英文的Times New Roma，其特点是在字体边角会多出一些修饰，可以清晰的分辨出字母和文字，分辨笔划的

2、起始和终止，适合大段文字正文的阅读。无衬线字体则是中文里的黑体、英文的Aril，这种文字看起来很干净整齐，同等字号的字体，无衬线体视觉感受更大，因此适合大标题显示衬线字体（左）与非无衬线字体（右）6.1.2 文字的可读性 浏览器有默认的字体设置对字体的显示进行了规范，但这并不意味着字体就拥有较佳的可读性。影响文字可读性有字体样式、间距这两大因素。字体样式间距包括文字的字距、行距等。字体样式包括字体的大小，颜色，字体是常规、还是倾斜或加粗等。目前，在桌面端网页界面中正文大小一般为12、13px，最小不小于11px，小标题为14px,大标题为16px，最大字体不要超过18px。由于奇数字号显示在较

3、早版本的浏览器中会出现锯齿状，所以经常采用偶数字号。12px18px16px图片文字的样式主要包括常规、粗体、斜体等。正文中的文字宜采用常规样式，标题宜采用加粗或斜体样式。合理的运用文字样式，将更有利于文字的视觉传达，更有利于浏览者的阅读。字距与行距的处理能直接体现设计作品的风格与品位，也能够影响读者的视觉和心理感受。行距可以说是让字有了呼吸空间。行距的常规比例为10:12，即用字10px，则行距12px。一般来说，欧文视情况取1.2-1.5 倍行距，而中文一般公认是取1.5 倍行距为宜,适当的行距会形成一条明显的水平空白条，以引导浏览者的目光，而行距过宽则会使一行文字失去较好的延续性。6.1

4、.3 文字编排的艺术性 如果你需要用一种特殊的字体来体现你的风格，那么特殊字体或艺术字体最好以图片的方式置入网页。Kim the movi官网字体的地方就是用图片来代替的，以保证所有人看到的页面是同一效果。但这无形中增大了网页的体积，这样的图片多了会延缓网页打开速度。6.2.1 图片的选择6.2 图片 不同类别的网站对图片的需求各不相同，这主要体现在对图片类型的选择和图形在界面中的比例大小上。按照图片的获取方式，其类型大致分为两类：摄影类与矢量类。摄影类图片来自摄影，图片能够直观地表现主题，侧重于如实地表现产品本身。因此，电子商务网站尤其亲睐高清的摄影类图片。矢量类图片为图形软件绘制，图片风格

5、多变，尺寸大小灵活，具有很强的装饰性。许多抽象图形、图表、图标都属于矢量类图片。如mailbakery网站，它使用了大量精致的卡通矢量图来宣传它们定制化邮件的服务。当鼠标单击并切换第一屏下方不同的导航图标时，图片区域就被替换成相应的图片内容，令用户容易理解、过目难忘。现如今无论是摄影图片还是矢量图片，使用大图作为网页背景越来越受欢迎，有的甚至全屏图片。如Martina Sperl家居网站首页将整个背景都铺满了大图，全局导航固定在界面右侧，其目的是让用户完全沉浸在美好的家居生活中的.虽然适当使用摄影图片来做网站背景可以提升网页的视觉效果，但图片加载还是多少会影响网站速度，因此这种布局较适用于结构

6、简单的品牌企业网站、时尚类网站、专题网站。6.2.2 格式与优化 网站中的图片的格式类型按放大后是否能清晰显示的维度可分为位图格式与矢量图格式两种。位图格式是网页设计中最常用的图片格式类型，图片有自己固定的尺寸大小，放大后不能清晰显示。如果将一个网页“另存为”，会看到文件夹中保存大量的Jpg、Png、Gif各种图片格式。各类图片格式JpgPngGif Jpg是一种有损压缩格式，能够将图像压缩在很小的储存空间,以 24 位颜色存储单个光栅图像，支持224（约1670万）种色彩，非常适合作为储存像素色彩丰富的图片、例如照片等等，这些图片即使有些微的失真也不容易轻易的察觉。Jpg 并不适合用来储存线

7、条图、图标或文字等等有清晰边缘的图片，各类浏览器均支持。jpg格式图片JpgPngGif Gif 使用无损压缩格式，但却限制了色彩表现能力、能够有效地节省档案尺寸。Gif 只拥有 8 位的颜色深度信息，也就是 2 的 8 次方，256 色。当图片中的色彩在 256 色以内时，使用 Gif 可以得到相当好的输出质量、同时兼顾了文件大小。因此 Gif 非常适合用来表现扁平化图标、线条插画、文字等部分的输出。Gif还支持全透明静态图片以及动画图档格式，能兼容所有浏览器。gif格式的扁平图标先对比一个450px*390px的照片图片切图输出为Jpg、Gif两种格，两张图的清晰程度相当，但Gif格式中的

8、渐变色呈颗粒状，文件大小为92.4kb，Jpg格式渐变色过渡自然，文件大小仅为26.4kb。显然Jpg格式更适合储存色彩丰富具有渐变色的照片图像。Gif-照片色彩鲜艳，渐变色颗粒状文件大小：92.4kbJpg-照片色彩鲜艳，渐变色细腻文件大小：26.4kbJpgPngGif Png 分为 Png-8 以及 Png-24 两种格式。两者后面的数字则是代表这种Png格式最多可以索引和存储的颜色值。“8”代表2的8次方也就是 256色，Png-8与Gif图片显示的特性十分接近。而“24”则代表2的24次方大概有1600多万色，也就是即使遇到色彩丰富的渐变色Png-24也能清晰显示。JpgPngGif

9、在透明度上Png-8 与 Gif 一样，支持图片的完全透明与完全不透明；而Png-24格式支持图片全透明及半透明显示。这里的透明图片类似于ps源文件中的一个图层，图像以外的空间不显示。全透明与半透明的区别在于，全透明的alpha值为0，放置网页上为一个完整、不透底的图；而半透明的alpha值可以任意设置，如同一个水印。虽然Png-8和Png-24同样支持全透明图片，但存储的效果却大不一样。JpgPngGifpng 格式图格式格式最高支持色彩通最高支持色彩通道道透明支持透明支持浏览器支持浏览器支持适合的图片类型适合的图片类型Jpg约1670万色支持不透明支持写实的摄影图像或是颜色层次非常丰富的图

10、像Gif256色支持不透明、全透明支持图像上颜色较少PngPng-8256色支持不透明、全透明支持图像上颜色较少Png-24约1670万色支持不透明、全透明、半透明仅高级浏览器支持支持所有静态图形类型三种静态的位图格式属性特点对比如下：其中矢量图格式的有Svg（Scalable Vector Graphics），其特点一是文件体积小，二是能够被大量的压缩，图片可无限放大而不失真，能够实现互动和滤镜效果，三是此格式既支持设计师在设计软件中设计后保存，还支持程序员通过代码直接生成图形。Jpg-图标背景默认白色，文件大小：6.06kbGif-图标背景全透明，文件大小：2.68kbjpg格式（左）gi

11、f格式（右）如在Illustrator软件中设计一个200px*200px西瓜的图标，将图形保存后为Svg格式。Svg储存格式（上）图像（左）代码（右6.2.3 图像的肌理 肌理，又称质感，由于物体的材料不同，表面的排列、组织、构造等不同，因而产生粗糙感、光滑、软硬感。不同的质感和肌理，会使人产生不同的心理感受。6.3.1 色彩的模式6.3 色彩设计师最常用的色彩模式有Cmyk，Rgb这两种。CMYK是青色（Cyan），洋红（Magenta）黄色（Yellow），黑色（Black）的缩写。CMYK色彩是一种依靠反光的色彩模式，它需要由外界光源照射在物体上再反射在我们的眼中，是一种基于印刷的色彩

12、模式。RGB分别是红(red)，绿（green），蓝（blue）的英文缩写。RGB是基于发光体的色彩模式，比如电脑屏幕，电视机，太阳光等。RGB色彩模式给图像中每一个RGB分量分配一个0255范围 内的强度值。在网页上要指定一种颜色，就要使用RGB模式来确定，方法是分别指定R、G、B三种色彩的强度，最低的强度数值为 0，最高强度数值为255，并通常都以16进制数值表示。因此255对应于十六进制就是FF，并把三个数值依次并列起来，以#开头。如R：255，G：255，B：255，其对应的十六进制色就是“#ffffff”,也就是白色。6.3.2 色彩的情感 不同的颜色有不同的色彩情感，能传递出不同的

13、视觉印象，大多数网站都有自己的主色调，同样的主色搭配不同比例的辅助色也会出现不同的心理感受。红色是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。红色在很多文化中代表的是停止的讯号，用于警告或禁止一些动作，很多停止的图标用的是红色。橙色也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。黄色是所有色相中最能发光的颜色，给人轻快，透明，辉煌，充满希望的色彩印象。此外，黄色也是一个可见度高的色彩，一些警告健康安全和设备危险的信号也选用黄色。绿色自然中最多的颜色，绿色能够唤起一种人类对于自然的本能意识。绿色代表着通行、准许通过的意思，因此很多常用于开始按钮和下载按钮，还有成

14、功提示页面。蓝色是最具凉爽，清新，专业的色彩。蓝色天生冷静，能够给人以安全感，但是它同样有着优雅和活泼的一面，在很多领域都能用得上它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)紫色是由温暖的红色和冷静的蓝色化合而成，被认为是一种优雅高档的色彩，常用于表现商品的奢华和高贵。紫色同时也是很多艺术家都喜欢的色彩。紫色智慧想象神秘高雅。6.3.3 色彩组合 色彩对情感有着巨大的冲击，色彩的搭配无穷无尽，可以玩多彩风格，也可以极简配色。按照色彩的多少来分类，大致分为无色系配色、单色配色、2-3色配色、多色配色三种类型。非彩色的搭配单色配色2-3色配色多种色彩配色 黑白是最基本和最简单的搭配

15、，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。velvet网无色系这个作品展示页是一个典型的单色设计，抽象的图形使得它看起来不那么接地气，而这种独特的设计美学可能更容易被那些经过专业训练的用户所欣赏。这个网站是相当值得探索也研究的。非彩色的搭配单色配色2-3色配色多种色彩配色 单色配色是指一种颜色与无色系（黑白灰）搭配，在色彩上进行不同的明暗渐变，或是贯穿全站的单一色彩。非彩色的搭配单色配色2-3色配色多种色彩配色 一种主色、一种辅助色，在此基础上进行明度、饱和度变化，构成配

16、色方案。主色所占页面的面积大、处于视觉中心位置，而辅助色常常选用主色的互补色或邻近色。这种或冲突或和谐的配色方案是一种前卫又时尚的网页色彩流行趋势。还有点缀色一般用饱和度和明度亮的颜色。非彩色的搭配单色配色2-3色配色多种色彩配色（1）选取一个色系是能统一多种色彩的首要条件。（2）多种色彩对比适宜还可以通过降低色彩本身的纯度及控制色彩的面积比例来达到悦目的效果。而Softwaremill官网同样用了多个明快的色彩，但在色彩所占的比例却十分讲究，而且最终统一在了一个白色的大背景下，时尚清新。6.4.1 视频 由于视频是最强大的可视化工具，能刺激人类的视觉听觉多个感官，因此将网页背景设置为视频动画

17、的网站也是相当受用户亲睐。6.4 多媒体6.4.2 音频 音频在网页中常与视频、动效搭配使用，虽不是必不可少，却是一种有效的提示功能，有时它能让网站变得更有趣、更讨巧的方式如在线新华字典网，用户查询完一个汉字后，可以通过点击音频按钮学习标准的汉字发音。再如某些个人博客，插入音乐彰显出自己的个性，但是此时的音乐需要注意其播放的灵活性，及音效本身的风格是否会打扰到用户阅读网页的内容信息，若使用不当就会变得画蛇添足 人的眼睛善于捕捉动态的图形，因此动效在网页的信息展示及交互中往往是点睛之笔。从技术的角度分类可分为gif,flash与程序实现的动画。6.5 动效6.5.1 gif动图 gif动图在网页

18、中不简单的小动画，如动态图标、动态表情等。大多数网站可以通过单击右键“另存为”而保存其gif动图。如moosend网中多个图表信息就是采用的gif动画，所占空间小，还可以直接保存在本地电脑上。6.5.2 flash动画 Flash动画由于体积小，动态交互效果丰富也常用于网页中，它可以是视频也可以是游戏，但不易直接保存，且需要安装Adobe Flash Player ActiveX插件才能正常观看。6.5.3 程序实现的动画 程序实现动画即是利用脚本语言编辑实现的绚丽的动画效果，它不能存在本地电脑上，只有高级浏览器才支持。程序实现动画包括js实现菜单、h5动画、css动画等，这是目前最流行的网页动画表现形式。如加拿大的法语机构Leeroy，其官网使用了大量的js动画，鼠标悬停在 哪，细砂就会散开。感觉玩上一天也不觉得累。H5动画都可以实现6.6 案例天猫商城店铺设计