13网页视觉设计规范及界面分割方法与优化.ppt

* 我们这节课主要讲到的知识要点是网页设计的分类 ，包括它一些设计规范 ；还有掌握下web页面切图的方法，以及如果根据交互设计的需求进行分割，切图文件的如何命名等等； 因为很多同学是没有接触过网页设计的 ，并不了解它的一些基础知识 ，所以本节课在这里给大家做一些总结 ，同学们了解之后 ，在设计网页的时候 ，心里就会有一个大概的定位 ， 就是我们做的是哪种类型的网站 ，然后我们用哪种版式 ，包括一些字体颜色的选择方面 ，基本上都有一个基础的了解 ； * * 什么是网页设计，其实就是一个网站的设计 ，也就是说我们的一个网站 ，包含各个页面 ，那么对于设计首先想到的是布局以及布局是否合理，将直接影响到用户的阅读体验及访问时间。 比如，我们通过一个链接在浏览器上打开一个页面 ，那么打开的任何页面都可以叫做是网页 ； 下面我们来了解网站的一些常见分类 ； * 网页设计的分类大概分以下几种，首先我们看 综合资讯类 以提供信息资讯为主，是目前最普遍的网站形式之一； 特点是信息量大，访问群体广，功能比较简单，基本包含检索、留言等简单的交互； 目前大部分企业的综合门户类网站都属于这类；比如新浪、搜狐、网易、腾讯新闻等； 企业品牌类 以展示为主，展示企业综合实力、体现企业品牌理念，对创意、美工、内容的组织策划等的要求较高；利用多媒体交互技术、视频、动态网页等技术，达到品牌营销传播的目的。 比如我们来看图片 ；这个网页是以展示为主，并没有太多交互；这样的网站有很多 ，但它们基本上都包含“首页”，“关于我们” ，然后一些“新闻资讯” ，以及一些文章页，这就是一个企业品牌类； 交易类 以实现交易为目的，网站的内容基本是商品的展示、订单的生成、执行，淘宝、京东、苏宁易购、拼多多 * 第四种，社区类 由同一地区或同一类型构成，把用户集中在一个平台；如猫扑、天涯等，大的门户网站都有自己的论坛，这部分论坛也是属于社区类； 办公及政府机构类 包括人力资源系统、办公事物管理系统等，基本的功能是提供多数据接口，实现业务系统的数据整合；统一用户管理，提供方便有效的访问权限和管理权限体系；面向公众，既可提供 版式指南、政策法规、动态信息等，也可提供网上业务申报、办理、数据查询等；如税务局网站、工商局网站、人力资源网站等 随着信息技术的高速发展，我国政府信息化程度也越来越高，并且随着政府信息化进程加快和政府知识管理需求的增加，政府知识门户网站必将成为越来越多政府部门发展必然选择； 高度重视政府网站建设是电子政务领先国家的普遍经验，通过访问这些政府网站，企业和社会公众可以24小时不间断地，不受任何空间界限影响地与之进行信息交互，政府已经成为企业和社会公众感知和获取电子政务公共服务的平台。实践证明，“以人为本，以用户为中心”的网站能够提高用户对电子政务的认知度和满意度。 互动游戏类 是近年来流行的一种类型，如贪玩游戏、4399、17173、7298等； * 有偿资讯类 与资讯类相似，也是以提供资讯为主，但这类的业务模式一般要求访问者按次、时间、或按量付费； 比如百度知道(悬赏)、知乎（付费咨询）等； 功能类 它的主要特征是将一个具有广泛需求的功能扩展开，开发一套强大的支撑体系，看似简单的页面实现，却往往投入很大； 比如百度、360、搜狗等；目前这类市场趋于饱和、市场比较稳定； 这类搜索引擎，涵盖方方面面（地图、直播、视频、贴吧、百科等），根据需求搜索后会有一系列的延伸拓展； 综合类 特点是提供两个以上类型的服务，比如搜狐、新浪（里面包含 新闻资讯类、互动游戏类、交易类（理财）等等） 当然很多网站它并没有说做了很明确的区分 ，比如说企业官网就不 能做功能 ，一些功能网站的话 ，就必须弱化掉自己的企业信息 ，更多的时候是几种类型共存的一种状态 ，是需要看我们的侧重点在哪里 ； 接下来我们了解下设计规范 我们先看网页尺寸 一般情况下，采用1920的整体大小，这个数据并不是我们去单纯的想象，是根据相关的统计网站统计出来的。市面上占比最多的显示器的分辨率比例为1920*1080； 我们可以看一下“百度统计-流量研究院”，它可以很有效的来辅助我们做设计 ，去了解一些用户的数据， 首先是“浏览器的市场份额”，现在份额最高的是谷歌浏览器，这是一些相应的占比，基本上设计的时候尽量以这些主流浏览器为基准。 不同浏览器对交互的实现方式没有统一，如果兼顾起来，实现会很复杂，甚至会影响网页的加载，就会影响用户体验，所以我们还是根据主流浏览器去适配符合它的一些要求 ，便于通用；  安全尺寸：我们来看华为网站，网页左右有个边界，也就是“留白”，这么做是为了适应小屏幕，很多时候我们使用1200像素来设计，左右各留白360px； 这只是个参考值，有的网站像政府类的可