网页设计基础-1课件

标题:字体:微软雅黑粗体字号:32-36pt颜色:主题蓝色副标题:字体:微软雅黑字号:24pt颜色:主题灰色网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇基础篇网页设计的概述网页界面设计的内容1.网页设计的概述1.1认识网站1.2网页界面空间的影响要素1.3

网站开发的团队与协作1.4网页的制作流程1.1认识网站基础篇

本章中首先带领大家认识了网站的一些基本概念、了解网页界面空间的影响要素，接着走进网站开发团队知晓各个职责间如何协作，然后介绍了网站制作的工作流程，让大家在设计网站的过程中做到知己知彼，百战不殆。1.1.1网站的基本概念基础篇

网站是由多个网页用超链接的方式组成的有机整体。网站被储存在指定的网站空间（服务器或虚拟主机），通过域名（网址）进行访问。一个网站至少包含一个网页，上不封顶。网页是以提供人机交流便利为目的的中间媒体。它是超文本标记的语言格式（.html或.htm）,是一种可以在WWW（WorldWideWeb的缩写）网上传输，经由网址（URL）被浏览器识别并翻译成页面显示出来的文件。

主页也称首页，是用户访问一个网站时看到的第一个页面，就像一本书的封面或目录，对整个网站的风格定位、框架结构起到指导作用。一屏指的是用户不拉动右侧滚动条或者鼠标的就能在浏览器中看到的有效可视区，第一屏就是指打开页面后在浏览器中默认看到的第一个有效可视区，相当于一张报纸的头版。基础篇

静态网页是指不用程序（如Asp,Jsp,PHP等）而直接制作成HTML页面。每个静态网页都有一个固定的网址，一般以htm、html、shtml等形式结尾，且不带有“？”。这种网页不能识别用户的不同身份而呈现出不同的内容。此静态页面并非绝对的静止，也可以出现各种动态效果，如Gif格式动画，Flash动画，滚动字幕，这些只是视觉上的“动态效果”，而不是动态网页。基础篇

动态网页是指使用网页程序语言，如Asp，Jsp,PHP等，通过程序讲网站内容动态储存到数据库。用户访问网站时再通过读取数据库来动态生成网页的方法。对用户不具备可见性。基础篇

网页界面是用户与网站的一个中间媒介。较之传统的平面设计，网页界面设计的特点在于它的交互性、持续性、多维性、多媒体性，其目标是优化信息与通信系统以满足用户的需求。网页界面设计必须以科学技术与艺术审美的结合为基础，以视觉为手段，始终遵循艺术与功能高度统一的原则，让用户在“动态的”浏览操作中感受网页界面设计之美。基础篇1.1.2网站的分类

网站的种类样式繁多，目前尚无一个严谨的分类方式。将网站按照主体性质不同，可大概分为：门户类、垂直类、电子商务类、社交类、企业类和个人类。门户类网站是以提供信息资讯为主要目的，类似于网络世界的“超市”的综合网站。其特点是信息量大、内容丰富、多为分栏结构。这类网站用户群广，因具有较高的访问量，很容易得到较多的广告投放量。典型的门户网站有搜狐、网易和新浪等。门户网站涉及的领域非常广泛，如搜狐网包括提供各类新闻、搜索引擎、娱乐视频、功能链接、免费邮箱等，整个界面中有多处广告区域。基础篇

垂直类网站是聚焦于某些特定的领域，提供该领域的深度信息和相关服务的网站。相对传统门户类网站而言更像是一个网络“专卖店”。垂直类网站的用户一般是该领域或行业的爱好者、关注者和消费者，所以吸引该网站用户的方法就是将网站内的信息整理的更具深度，更加精彩。全球最大的WEB技术资源网站W3School，网页面布局简洁大气。从基础的HTML到CSS，乃至进阶的XML、SQL、JS、PHP和ASP.NET，提供全面的教程、完善的参考手册以及庞大的代码库。基础篇

电子商务类网站是企业、机构或者个人实施电商服务或交易的窗口。它的用户为供应商、客户或者企业产品的消费群体。随着互联网技术的迅速发展，电子商务逐渐渗透现代商业的各个领域，最常见的为用户提供一种新的购物方式——网上虚拟商城，如亚马逊网站、淘宝商城、一号店、唯品会等。

如果垂直网站加上专业化的购物服务就形成更加专业化的电子商务，就能以权威、专业的内容吸引、刺激和带动顾客消费。聚美优品网，专注于女性化妆品正品折扣网店，具有强烈的产品特色和专业性。在设计电子商务类网站时，要充分考虑到网站有高质量且丰富的内容，更新及时，网站响应时间短，易于操作等因素。基础篇社交类网站也称为SNS（SocialNetworkSite）是帮助用户建立社会性网络关系的互联网平台。在这个平台上，人们可以实现娱乐共享、展现自我观点以及分享自身经历等功能，最具代表性的有Facebook、人人网、新浪微博等。企业类网站是企业向用户宣传产品和服务的互联网平台，是当今时代企业对外的窗口。有的企业网站还开展了电子商务的基础设施和信息平台，方便用户直接购买企业本身的产品及服务。基础篇

个人网站可以说是个人在网络上的家，可以存放个人信息资料，让更多的网页浏览者了解你，相互结识成为网络中的朋友。一般在个人网站中会存放一些个人收藏整理的资料并不断更新，这也为网络浏览者们提供了资讯服务，使个人站点发挥了更强大的功能。基础篇摄影师JulianAbrams的个人网站为单页设计，页面两栏布局，大胆的留白。当你向下滑动鼠标滚轴，便可切换菜单选项，而点击左右方向图标即可观看摄影作品。1.1.3网站的商业模式

网站的商业模式是依据网站类型而具体设置的。其盈利内容主要是卖服务和卖产品，具体的盈利途径可分为以下四种类型。基础篇1.流量变现模式2.佣金与分成3.增值服务收费4.直销模式1.流量变现模式基础篇

流量变现模式是一种先获得大量的流量，然后在此基础上通过广告、流量分发等的赚钱方式，它也是最基础的盈利模式。具体的落地方案有：（1）banner广告

banner广告是网站通过出租广告位、展示广告图来盈利。无论用户是否点击广告图，网站都需要向广告商家收取费用。腾讯大申网（2）匹配广告搜索引擎网站/电子商务中的搜索功能都是靠搜索关键词来匹配广告的一种形式。此类搜索广告一般按照CPC（CostPerClick，每次点击价格）的方式计价，展现免费，产生有效点击才会收费。基础篇百度网搜索结果页面（3）社交广告社交广告模式是将广告跟社交元素结合，最大的特点凭借“他人推荐”而对广告产生信任感。例如喜马拉雅网站中，头条推荐栏目中的播放、点赞、留言数量，凡是有很多人关注与点赞的质量都不会差。基础篇（4）流量分发流量分发模式主要是用于一些门户网站或者浏览器入口，其利用其独特的网站定位和运营模式，争夺用户的上网入口，从而获得大量的流量，最后，再把这些流量分发到各种网站上，向网站收费。如hao123网就提供了大量网站的入口，最后向这些网站收费。基础篇2.佣金与分成佣金与分成模式是借助网站这一平台直接为客户提供服务，收取一定的提成。最常见的是B2C电商平台，如天猫商城网（见图1.13），它就是按卖出商品的价格向店铺租户收取提成。基础篇3.增值服务收费增值服务收费模式是指基础服务功能免费，高级服务功能收费。这种模式常见于一些社交网站的会员制度及游戏网站中的道具。如在QQ本身免费，但是你要想享受更多服务就得付费升级会员。基础篇4.直销模式直销模式是利用互联网平台本身来卖自营商品，这种模式实际上就是减少中间环节，把商品直接销售到用户手中。典型方式如当当网的自营部分基础篇即便大家打开同一个网页时，各自看到的界面效果可能大不相同，这是由于网页的显示媒介的特性所决定的。即网页界面空间显示依赖于显示器的分辨率与浏览器这两大因素。1.2网页界面空间的影响要素基础篇

分辨率是屏幕上图片所呈现的精细度。一般而言，较高的分辨率的图片所呈现出来的细节越多、效果越好。像素是屏幕分辨率的单位，是一个相对单位，即物理设备上的1像素。一般以纵向像素*横向像素来表示一个终端设备的分辨率。如当前显示器的屏幕分辨率是1920*1080px,即每一条水平线上包含有1920个像素点，共有1080根水平线。1.2.1分辨率与显示器基础篇

一显示器看一个网站，高分辨率与低分辨率看到视觉效果会有一定差别。如同样打开美食节网站，左图分辨率为1920*1080px能看到的图文信息更小巧丰富，右图分辨率为1366*768px感觉上略显粗糙，视觉信息展示的较少。基础篇基础篇需要特别强调的是屏幕像素密度不是像素分辨率。屏幕像素密度是指屏幕上每英寸可以显示的像素点的数量，单位是ppi（pixelsperinch）。如大多数网站制作常用图片ppi为72，即每英寸像素为72，因此我们在设计网页的时候需要将ppi设置为72。网页设计中的ppi设置1.2.2浏览器基础篇浏览器是指可以显示网页服务器或文件系统的HMTL内容，并让用户与这些文件交互的一种软件。常用的浏览器有Chrome,IE，Safari，火狐，UC等。用户可以根据自己的喜好及浏览器特性来选择使用。从左至右分别是Chrome,IE，Safari，火狐，UC浏览器

不同品牌的浏览器所用内核不一，其渲染机制也不相同，所以同一网页用不同浏览器访问的视觉效果和响应时间也会略有区别。如对比一下用IE（9.0版）和Chrome（45.0版本）浏览器浏览器打开微软的网站的区别。不同浏览器下的微软网站，左图为IE9.0浏览器，右图为Chrome45.0浏览基础篇IE浏览器比Chrome展示的内容略少，信息显示的更大；然后，细节上IE浏览器下的字体较大且颜色为黑色、蓝色，广告区域的文字信息置于图片之下，菜单栏高度较高；再然后，IE浏览器头部的高度略要低于Chrome浏览器，这样会导致在浏览器容器内看到的一屏信息的高度会更高。不同浏览器的头部高度不一基础篇

然而就算是同一品牌的浏览器，不同版本所呈现出来的界面效果也不尽相同。如IE11.0、IE9.0和IE8.0打开饿了么网站，IE9.0以上版本浏览器属于高级浏览器，所以9.0与11.0版本效果较为接近，11.0版默认状态下输入框有默认文字区域位置选项，而10.0版本输入框内为空。而8.0版本的效果相差较远，8.0版的界面仅为一个二维码。实际上，高版本浏览器与一般浏览器的不同主要表现在如圆角、阴影、动画、文字阴影、背景渐变等方面。我们难以让网页100%兼容所有浏览器，这就要求我们在设计界面时，需要针对当前主流用户群来选择测试的浏览器。基础篇

相同浏览器不同版本，从左至右浏览器为IE11.0、IE9.0和IE8.0

高版本浏览器与一般浏览器的不同主要表现在如圆角、阴影、动画、文字阴影、背景渐变等方面。我们难以让网页100%兼容所有浏览器，这就要求我们在设计界面时，需要针对当前主流用户群来选择测试的浏览器。了解当前主流浏览器的方式有查看相关的统计平台，如百度统计——流量研究院基础篇1.3网站开发的团队与协作基础篇

从整体上看，一个小型网站的设计团队起码应该具有产品策划人员、开发人员、设计人员及运维人员四个角色，而在一些较为大型的公司则细分为产品经理、架构师、交互设计师、UI设计师、前端开发工程师、后端开发工程师、测试工程师、运维工程师等职位。

产品经理是对网站从策划到上线都了如指掌的角色。他们负责分析项目、分析市场、分析用户，分析竞品，产品线规划，原型、PRD，产品宣讲，进度推进。架构师是既掌控网站整体开发技术又能洞悉技术局部瓶颈并依据具体的业务场景给出解决方案的团队技术领导型人物。他们主要着眼于系统的“技术实现”，负责确认和评估系统需求，给出开发规范，搭建网站实现的核心系统构架，并澄清技术细节、扫清主要难点。交互设计师是秉承以用户为中心的设计理念，以用户体验度为原则，对交互过程进行研究并开展设计的工作人员。他们一边要协调信息、技术部门协调相关的页面逻辑，数据承载方式等，平衡多方利弊，一边还要梳理用户与网站间的交互关系，并将交互流程转换为流程图、线框图，可视化展现网站的低保真原型（也称交互原型），确保设计人员与开发人员的有效沟通。UI设计师（也称用户界面设计师）负责界面设计。他们具备较强的图形设计能力，了解各平台的设计规范，掌握一定前端开发的知识，能将模糊的“需求”直接转化为富有创意与视觉表现力的界面。基础篇前端开发工程师和后台开发工程师都是随着web技术发展，从开发工程师中细分出来的职业。前端开发工程师熟知前端开发技术（如HTML、CSS、JavaScript等），负责网站前端代码的修改调试和开发工作。后端开发工程师负责数据逻辑存储（数据库、redis等），复杂逻辑的设计（如权限控制、前端数据交互、配置信息、路由等等），让用户不仅体验到了视觉和炫酷的风格，而且还要能够起到实用的功能。测试工程师负责内容包括编写测试计划、规划详细的测试方案、编写测试用例，接着根据测试计划搭建和维护测试环境，然后执行测试工作，提交测试报告，最后对测试中发现的问题进行详细分析和准确定位，与开发人员讨论缺陷解决方案。基础篇运维工程师负责响应及解决客户的技术要求、疑问以及系统使用过程中遇到的各种问题。他们会收集并撰写服务过程中问题现象和处理方案，形成知识库，并且及时反馈技术处理过程中的异常情况，联系相关部门负责人，主动协调资源推动问题解决。网站开发团队示意图基础篇1.4网页的制作流程

网页的制作是一个循环往复的过程，大致要经历前期策划、规划框架、整理相关素材、设计与制作网页、测试完善及推广维护创新这六个步骤，若有一天需要对网站大型改版则又会跳转到第一个步骤。对网页的制作流程清楚地认知有利于把控网页设计与开发的进程，下面将一一详述这六个步骤所包含的内容。基础篇基础篇

首先是由产品经理组织策划网站主题，明确网站建设的目的意义，进行前期调查。网站主题是网站的中心内容,前期调查是紧紧围绕这一主题展开的。前期调查包括：一、了解目前同类型网站的发展趋势，了解目标用户的需求，分析其优劣势；二、根据调查结果，结合自身特点，确定网站的产品和服务方向；三、考虑网站所用技术。基础篇

在前期策划的基础上，我们需要分析消费者的需求和市场状态，以用户为中心，规划网站的内容框架。这里的框架是指网站的服务范围，即提供那些服务，拥有那些功能。明确网站各个页面之间的关系，知晓每个页面上的功能及栏目划分。基础篇