数字媒体交互设计（慕课版） 课件 13网页视觉设计规范及界面分割方法与优化.ppt

网页视觉设计规范 及页面切片方法与优化 天津电子信息职业技术学院 知识要点 01 Ps-网页设计分类和设计规范 02 掌握web界面在ps中的切片方法 03 根据交互需求进行页面切图 04 Ps-切图文件的命名 网页设计分类和设计规范 概念介绍-什么是网页设计 通常意义上的网站设计,即指的是网站中各个页面的设计。对于设计，最先用到的就是网页的布局。布局是否合理、美观； Ps-网页设计分类和设计规范 1. 综合资讯类 Ps-网页设计分类和设计规范 2. 企业品牌类 3. 交易类 设计分类 4. 社区类 Ps-网页设计分类和设计规范 5. 办公及政府机构类 6. 互动游戏类 设计分类 7. 有偿资讯类 Ps-网页设计分类和设计规范 8. 功能类 9. 综合类 设计分类 设计规范 1、网页尺寸 1920px 安全尺寸 1200px *800px Ps-网页设计分类和设计规范 设计规范 1、网页尺寸 1920px 安全尺寸 1200px *800px Ps-网页设计分类和设计规范 设计规范 2、文字选择 正文宋体居多、思源； 英文：Arial；Tacoma；Veranda； 消除锯齿的方式为：Windows LCD 行间距尽量保持在1.5-2倍的距离 字体颜色不要纯黑（#000000） Ps-网页设计分类和设计规范 文字颜色 #333333 #666666 #999999 #cccccc 标题文字 正文文字 次要文字 提示性文字（用于组件或提示框文字） 字号 16-18 12-14,14居多 12，英文10 行间距 16号文字，行间距24-32 14号文字，行间距21-28 12号文字，行间距18-24 设计规范 3、统一性配色 尽量保持色相一致 要有主色调 除图片外，尽量不要超过3种颜色 Ps-网页设计分类和设计规范 掌握web界面在ps中的切图方法 02 掌握web界面在ps中的分割方法 主要目的是减小文件容量，提高组件的复用性，让网页浏览更快。 为什么要切图 1、以这个图片为例，按住【Alt】键点住我们要切的图所在组，这样背景就直接隐藏了【如图所示】。 切图方法-PS手动切图 掌握web界面在ps中的分割方法 2、【选框工具】框选出我们需要的图片，鼠标【右键】点击图片所在组，选择【转换为智能对象】。 然后裁剪工具选中我们框选的地方，直接把图片切出来【如图所示】。 切图方法 切图方法-PS手动切图 掌握web界面在ps中的分割方法 3、【文件】存储为web所用格式，弹出对话框，图片格式修改为【PNG】格式，适当调整长宽比，然后点击【存储】，选择保存路径【如图所示】。 切图方法 切图方法-PS手动切图 掌握web界面在ps中的分割方法 1、右键“快速导出为png文件” 切图方法 切图方法-PS图层右键存储 掌握web界面在ps中的分割方法 1、我们使用“切片”工具，切出我们要存储的多个画面；打开【文件】存储为web所用格式，点击“存储”，选择“所有用户切片” 切图方法 切图方法-PS切图工具 掌握web界面在ps中的分割方法 1、Cutterman是一款运行在photoshop中的插件，能够自动将我们需要的图层进行输出， 以替代传统的手工 导出web所用格式 以及使用切片工具进行挨个切图的繁琐流程。 切图方法 切图方法-ps插件Cutterman 掌握web界面在ps中的分割方法 本节课主要讲解网页视觉设计规范及界面分割方法与优化 根据本课的内容 ，我们可以练习去分析一些网站 ，包括它的是属于哪种网站类型 ，它有哪些基础元素 ，然后有哪些设计合理的地方 ，大家在课程结束后可以去试着总结一下； * 我们这节课主要讲到的知识要点是网页设计的分类 ，包括它一些设计规范 ；还有掌握下web页面切图的方法，以及如果根据交互设计的需求进行分割，切图文件的如何命名等等； 因为很多同学是没有接触过网页设计的 ，并不了解它的一些基础知识 ，所以本节课在这里给大家做一些总结 ，同学们了解之后 ，在设计网页的时候 ，心里就会有一个大概的定位 ， 就是我们做的是哪种类型的网站 ，然后我们用哪种版式 ，包括一些字体颜色的选择方面 ，基本上都有一个基础的了解 ； * * 什么是网页设计，其实就是一个网站的设计 ，也就是说我们的一个网站 ，包含各个页面 ，那么对于设计首先想到的是布局以及布局是否合理，将直接影响到用户的阅读体验及访问时间。 比如，我们通过一个链接在浏览器上打开一个页面 ，那么打开的任何页面都可以叫做是网页 ； 下面我们来了解网站的一些常见分类 ； * 网页设计的分类大概分以下几种，首先我们看 综合资讯类 以提供信息资讯为主，是目前最普遍的网站形式之一； 特点是信息量大，