网页设计【视觉篇】
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
最小不小于11px，小标题为14px,大标题为16px，最大字
体不要超过18px。由于奇数字号显示在较早版本的浏览器
1中8p会出现锯齿状，所以经常采用偶数字号。 x
16p x
12p x 文字的样式主要包括常规、粗体、斜体等。正文中的文字宜采
用常规样式，标题宜采用加粗或斜体样式。合理的运用文字样 式，将更有利于文字的视觉传达，更有利于浏览者的阅读。
衬线字体（左）与非无衬线字体（右）
6.1.2 文字的可读性
浏览器有默认的字体设置对字体的显示进行了规 范， 但这并不意味着字体就拥有较佳的可读性。影响 文字可读性有字体样式、间距这两大因素。
字体样式
间距包括文 字的字距、 行距等。
图片
字体样式包括字体的大小，颜色，字体是常规、还是
倾斜或加粗等。
目前，在桌面端网页界面中正文大小一般为12、13px，
Png
颜色值。“8”代表2的8次方也就是 256色，Png-8与
Gif图片显示的特性十分接近。而“24”则代表2的24次
方大概有1600多万色，也就是即使遇到色彩丰富的渐变
色Png-24也能清晰显示。
Jpg
在透明度上Png-8 与 Gif 一样，支持图片的完全透明
Gif
6.1.3 文字编排的艺术性
如果你需要用一种特殊的字体来体现你的风格， 那么特殊字体或艺术字体最好以图片的方式置入网页。
Kim the movi官网字体的地方就是用图片来代替的， 以保证所有人看到的页面是同一效果。但这无形中增 大了网页的体积，这样的图片多了会延缓网页打开速 度。
6.2 图片
6.2.1 图片的选择
各类图片格式
Jpg Png Gif
Jpg是一种有损压缩格式，能够将图像压缩在很小 的储存空间 ,以 24 位颜色存储单个光栅图像，支持224 （约1670万）种色彩，非常适合作为储存像素色彩丰 富的图片、例如照片等等，这些图片即使有些微的失真 也不容易轻易的察觉。Jpg 并不适合用来储存线条图、 图标或文字等等有清晰边缘的图片，各类浏览器均支持。
不同类别的网站对图片的需求各不相同，这主要体现在对 图片类型的选择和图形在界面中的比例大小上。按照图片的获 取方式，其类型大致分为两类：摄影类与矢量类。
摄影类图片来自摄影，图片能够直观地表现主题，侧重于如实地表现 产品本身。因此，电子商务网站尤其亲睐高清的摄影类图片。
矢量类图片为图形软件绘制，图片 风格多变，尺寸大小灵活，具有很强的 装饰性。许多抽象图形、图表、图标都 属于矢量类图片。
如mailbakery网站，它使用了大量精致的卡通矢量图来宣传它们定制化 邮件的服务。当鼠标单击并切换第一屏下方不同的导航图标时，图片区域 就被替换成相应的图片内容，令用户容易理解、过目难忘。
现如今无论是摄影图片还是矢 量图片，使用大图作为网页背景越 来越受欢迎，有的甚至全屏图片。 如Martina Sperl家居网站首页将 整个背景都铺满了大图，全局导航 固定在界面右侧，其目的是让用户 完全沉浸在美好的家居生活中的.
的输出。Gif还支持全透明静态图片以及动画图档格式，能兼容 所有浏览器。
Jpg-照片色彩鲜艳，渐变色细腻 文件大小：26.4kb
G文giiff件格-照式大片的小扁色：平彩图92鲜标.4艳kb，渐变色颗粒状
Jpg
Png 分为 Png-8 以及 Png-24 两种格式。两者后 Gif
面的数字则是代表这种Png格式最多可以索引和存储的
在平面设计中常以字体被修饰与是否将字体分为衬线字体与非无衬线字体，衬线字体就是中文 里的宋体，英文的Times New Roma，其特点是在字体边角会多出一些修饰，可以清晰的分辨 出字母和文字，分辨笔划的起始和终止，适合大段文字正文的阅读。无衬线字体则是中文里的 黑体、英文的Aril，这种文字看起来很干净整齐，同等字号的字体，无衬线体视觉感受更大， 因此适合大标题显示
网页设Βιβλιοθήκη Baidu从界面布局到视觉表现
视觉表现篇
视听元素 网页视觉设计要点 网页视觉风格
6. 视听元素
6.1 文字 6.2 图像 6.3 色彩 6.4 多媒体 6.5 动效 6.6 案例——天猫商城店铺界面
设计
视觉篇
6.1 文字
6.1.1 字体的选择
同操作系统都有不同的字体系统，而浏览器是用本地系 统字库显示页面内容的，大多数浏览者的系统里只装有几种 常的字体类型，因此设计的特殊字体在浏览者的系统里并不 一定能看到预期设计效果。。
虽然适当使用摄影图片来做网站背景可以提升网页的视觉效果， 但图片加载还是多少会影响网站速度，因此这种布局较适用于结构 简单的品牌企业网站、时尚类网站、专题网站。
6.2.2 格式与优化
网站中的图片的格式类型按放大后是否能清晰显示的维度可 分为位图格式与矢量图格式两种。
位图格式是网页设计中最常用的图片格式类型，图片有自己固定 的尺寸大小，放大后不能清晰显示。如果将一个网页“另存为”，会 看到文件夹中保存大量的Jpg、Png、Gif各种图片格式。
jpg格式图片
Jpg Gif Png
先对比一G个if 4使5用0p无x*损39压0p缩x格的式照，片但图却片限切制图了输色出彩为表现能力、能够有 Jpg、G效if两地种节格省，档两案张尺图寸的。清Gi晰f 只程拥度有相当8 ，位但的G颜if色格深式度信息，也就是 中的渐变2 色的呈8颗次粒方状，，2文56件色大。小当为图92片.4中kb的，色Jp彩g在格式25渐6 色以内时，使 变色过渡用自G然if ，可文以件得大到小相仅当为好2的6输.4k出b质。量显、然同Jp时g格兼式顾更了文件大小。因 适合储存此色G彩if 丰非富常具适有合渐用变来色表的现照扁片平图化像图。标、 线条插画、文字等部分
字距与行距的处理能直接体现设计作品的风格与品位，也能够影响 读者的视觉和心理感受。
行距可以说是让字有了呼吸空间。行距的常规比例为10:12，即 用字10px，则行距12px。一般来说，欧文视情况取1.2-1.5 倍行距， 而中文一般公认是取1.5 倍行距为宜,适当的行距会形成一条明显的 水平空白条，以引导浏览者的目光，而行距过宽则会使一行文字失 去较好的延续性。
体不要超过18px。由于奇数字号显示在较早版本的浏览器
1中8p会出现锯齿状，所以经常采用偶数字号。 x
16p x
12p x 文字的样式主要包括常规、粗体、斜体等。正文中的文字宜采
用常规样式，标题宜采用加粗或斜体样式。合理的运用文字样 式，将更有利于文字的视觉传达，更有利于浏览者的阅读。
衬线字体（左）与非无衬线字体（右）
6.1.2 文字的可读性
浏览器有默认的字体设置对字体的显示进行了规 范， 但这并不意味着字体就拥有较佳的可读性。影响 文字可读性有字体样式、间距这两大因素。
字体样式
间距包括文 字的字距、 行距等。
图片
字体样式包括字体的大小，颜色，字体是常规、还是
倾斜或加粗等。
目前，在桌面端网页界面中正文大小一般为12、13px，
Png
颜色值。“8”代表2的8次方也就是 256色，Png-8与
Gif图片显示的特性十分接近。而“24”则代表2的24次
方大概有1600多万色，也就是即使遇到色彩丰富的渐变
色Png-24也能清晰显示。
Jpg
在透明度上Png-8 与 Gif 一样，支持图片的完全透明
Gif
6.1.3 文字编排的艺术性
如果你需要用一种特殊的字体来体现你的风格， 那么特殊字体或艺术字体最好以图片的方式置入网页。
Kim the movi官网字体的地方就是用图片来代替的， 以保证所有人看到的页面是同一效果。但这无形中增 大了网页的体积，这样的图片多了会延缓网页打开速 度。
6.2 图片
6.2.1 图片的选择
各类图片格式
Jpg Png Gif
Jpg是一种有损压缩格式，能够将图像压缩在很小 的储存空间 ,以 24 位颜色存储单个光栅图像，支持224 （约1670万）种色彩，非常适合作为储存像素色彩丰 富的图片、例如照片等等，这些图片即使有些微的失真 也不容易轻易的察觉。Jpg 并不适合用来储存线条图、 图标或文字等等有清晰边缘的图片，各类浏览器均支持。
不同类别的网站对图片的需求各不相同，这主要体现在对 图片类型的选择和图形在界面中的比例大小上。按照图片的获 取方式，其类型大致分为两类：摄影类与矢量类。
摄影类图片来自摄影，图片能够直观地表现主题，侧重于如实地表现 产品本身。因此，电子商务网站尤其亲睐高清的摄影类图片。
矢量类图片为图形软件绘制，图片 风格多变，尺寸大小灵活，具有很强的 装饰性。许多抽象图形、图表、图标都 属于矢量类图片。
如mailbakery网站，它使用了大量精致的卡通矢量图来宣传它们定制化 邮件的服务。当鼠标单击并切换第一屏下方不同的导航图标时，图片区域 就被替换成相应的图片内容，令用户容易理解、过目难忘。
现如今无论是摄影图片还是矢 量图片，使用大图作为网页背景越 来越受欢迎，有的甚至全屏图片。 如Martina Sperl家居网站首页将 整个背景都铺满了大图，全局导航 固定在界面右侧，其目的是让用户 完全沉浸在美好的家居生活中的.
的输出。Gif还支持全透明静态图片以及动画图档格式，能兼容 所有浏览器。
Jpg-照片色彩鲜艳，渐变色细腻 文件大小：26.4kb
G文giiff件格-照式大片的小扁色：平彩图92鲜标.4艳kb，渐变色颗粒状
Jpg
Png 分为 Png-8 以及 Png-24 两种格式。两者后 Gif
面的数字则是代表这种Png格式最多可以索引和存储的
在平面设计中常以字体被修饰与是否将字体分为衬线字体与非无衬线字体，衬线字体就是中文 里的宋体，英文的Times New Roma，其特点是在字体边角会多出一些修饰，可以清晰的分辨 出字母和文字，分辨笔划的起始和终止，适合大段文字正文的阅读。无衬线字体则是中文里的 黑体、英文的Aril，这种文字看起来很干净整齐，同等字号的字体，无衬线体视觉感受更大， 因此适合大标题显示
网页设Βιβλιοθήκη Baidu从界面布局到视觉表现
视觉表现篇
视听元素 网页视觉设计要点 网页视觉风格
6. 视听元素
6.1 文字 6.2 图像 6.3 色彩 6.4 多媒体 6.5 动效 6.6 案例——天猫商城店铺界面
设计
视觉篇
6.1 文字
6.1.1 字体的选择
同操作系统都有不同的字体系统，而浏览器是用本地系 统字库显示页面内容的，大多数浏览者的系统里只装有几种 常的字体类型，因此设计的特殊字体在浏览者的系统里并不 一定能看到预期设计效果。。
虽然适当使用摄影图片来做网站背景可以提升网页的视觉效果， 但图片加载还是多少会影响网站速度，因此这种布局较适用于结构 简单的品牌企业网站、时尚类网站、专题网站。
6.2.2 格式与优化
网站中的图片的格式类型按放大后是否能清晰显示的维度可 分为位图格式与矢量图格式两种。
位图格式是网页设计中最常用的图片格式类型，图片有自己固定 的尺寸大小，放大后不能清晰显示。如果将一个网页“另存为”，会 看到文件夹中保存大量的Jpg、Png、Gif各种图片格式。
jpg格式图片
Jpg Gif Png
先对比一G个if 4使5用0p无x*损39压0p缩x格的式照，片但图却片限切制图了输色出彩为表现能力、能够有 Jpg、G效if两地种节格省，档两案张尺图寸的。清Gi晰f 只程拥度有相当8 ，位但的G颜if色格深式度信息，也就是 中的渐变2 色的呈8颗次粒方状，，2文56件色大。小当为图92片.4中kb的，色Jp彩g在格式25渐6 色以内时，使 变色过渡用自G然if ，可文以件得大到小相仅当为好2的6输.4k出b质。量显、然同Jp时g格兼式顾更了文件大小。因 适合储存此色G彩if 丰非富常具适有合渐用变来色表的现照扁片平图化像图。标、 线条插画、文字等部分
字距与行距的处理能直接体现设计作品的风格与品位，也能够影响 读者的视觉和心理感受。
行距可以说是让字有了呼吸空间。行距的常规比例为10:12，即 用字10px，则行距12px。一般来说，欧文视情况取1.2-1.5 倍行距， 而中文一般公认是取1.5 倍行距为宜,适当的行距会形成一条明显的 水平空白条，以引导浏览者的目光，而行距过宽则会使一行文字失 去较好的延续性。