第12章--web设计原则课件

Company name网页设计与开发网页设计与开发第12章 Web 设计基础 1概况1您的内容打在这里，或者通过复制您的文本后。概况2您的内容打在这里，或者通过复制您的文本后。概况3您的内容打在这里，或者通过复制您的文本后。+整体概况2主要内容Web设计原则 网站结构规划网页布局内容设计 色彩设计 312.1 Web设计原则 Web设计师需要研究如何布局、处理字体和颜色以及空白的应用。Web站点所要实现的目标是设计的最终方向，而页面的制作仅仅是设计的具体实现。Web站点的设计并不是通常认为的网页制作，而是一个融合了多种设计原则和设计过程的系统工程。412.1.1明确站点类型 l新闻资讯类站点，如新浪，搜狐等大型门户网站 512.1.1明确站点类型l一些资讯和形象相结合的网站，如政府网等 612.1.1明确站点类型l形象类网站，比如商业企业的对外宣传网站 712.1.1明确站点类型l除了上述网站类型外，还有一些网站具有更多的专业化设计。例如，瑞丽女性网 812.1.1明确站点类型l迪士尼网站充分考虑了儿童的特别，其设计非常活泼有趣 9lWeb设计要求界面简洁l简洁首先是对内容文本进行精炼化，保留关键信息。l使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。l另一种保持简洁的做法是限制所用的字体和颜色的数目。lWeb设计要求内容明确l使用清楚的消息标识，确保用户了解此页面的上下文l还可以使导航元素保持一致，并且对访问率最高的区域进行明显的标记，是它们易于被用户找到。l界面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把界面装点起来。l除此之外，还要确保界面上每一个元素都能让浏览者看到。12.1.2保持站点简洁明确 10l页面的结构排版 l通过定义一致的页面模板，各个页面使用相同的页边距；l文本和图形之间保持相同的间距；l主要图形、标题或符号旁边留下相同的空白。l如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志，l如果使用图标导航，则各个页面应当使用相同的图标来创造出一种熟悉感。12.1.3页面设计一致性 1112.1.3页面设计一致性l当当网的二级栏目图书频道和其首页导航条保持一致。这样使得这些页面呈现出的视觉形象就是相互联系，也使用户感知到正在访问的页面与此前访问的该网站的网页是相互联系的。12l注重用户体验是Web站点设计应考虑的一个重要方面，它要求把用户放在第一位，设计时既要考虑用户的共性，同时也要考虑他们的差异性。12.1.4 注重用户体验1312.1.4 注重用户体验l研究用户 l有效的导航和位置设计 l保持整个网站一致性的设计 l清晰准确的内容设计，便于用户快速的获得所需的任何信息 14lWeb 站点由一组 Web 页面组成，而且这些 Web 页面具有一定的分层设计和组织。l结构设计要做的事情就是如何将内容划分为清晰合理的层次体系，建立起组成 Web 站点的各个页面相互关联关系，构建一个组织优良的网站整体。12.2 网站结构规划1512.2.1网站栏目规划l好的栏目规划结构是网站内容的总体概述，它利用导航的形式予以表现，指引浏览者在页面间访问和跳转。l网站栏目的划分需要遵循一些基本的原则。l第一，栏目内容一定要紧扣主题 l第二，栏目的目录设计要求简洁，结构层次清晰，以方便网站的管理。l第三，栏目的内容要突出重点，对于用户经常要访问的内容应直接放入主栏目下。l第四，为方便用户使用，一般情况下访问者应能够在3-5次鼠标点击后可查询到相关问题。1612.2.2目录结构规划l下面是建立目录结构的一些建议l不要将所有文件都存放在根目录下。l按栏目内容建立子目录 l建立一些特定目录存放公共信息。l另外还有一些需要注意的目录规划原则。如l目录的层次不要太深，建议不要超过3层。l不要使用中文目录；使用中文目录可能对网址的正确显示造成困难。l不要使用过长的目录；l尽量使用意义明确的目录，比如可以使用image，css，js，post，bbs等。l首页通常命名为index或者default，并应放在根目录下，而且每个栏目的首页也应遵循这样的规则。17一个班级网站的目录结构规划图 1812.3 网页布局l布局设计原则l布局设计类型 l布局设计元素 l布局设计技术 1912.3.1布局设计原则l网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式 l网页布局应区分栏目模块的重要程度。l网页布局必须尊重用户习惯。2012.3.2布局设计类型l网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。21“国”字型网页布局 22拐角型 23标题正文型 l这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类型。24框架型l框架型还分为左右框架，上下框架及综合框架等。框架型网站的优势在于可以使网站的维护变的相对容易，但其不易被搜索引擎索引。框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活，通常用于网站后台管理页面的布局；25封面型26Flash型 2712.3.4 布局设计技术ltable表格布局；lDIV+CSS布局；l框架布局。28表格布局技术l表格布局的优点：简单易用 所见即所得 设计速度快 l表格布局的缺陷：代码可读性差，可维护性差。网页打开速度较慢。后台代码太多，导致网站打开速度慢。29DIV+CSS布局技术lDIV+CSS布局优点：Div 用于搭建网站结构、css 用于创建网站表现，将表现与内容分离，便于大型网站的协作开发和维护。提高搜索引擎对网页的索引效率。缩短改版时间。大大缩减页面代码，提高页面浏览速度，缩减带宽成本；强大的字体控制和排版能力。l存在一定的缺点 可观性差 操作繁琐 兼容性较差 30框架布局技术l框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用，先用框架将页面划分为几个区域，然后再用表格实现各区域的精确局部，其常常用在网站系统的后台页面设计中。3112.4内容设计l对于网页来说，最重要的就是信息内容。信息的品质与数量决定了人们对这个网页的评价高低。一般而言，内容通常有两种表现类型：文本和多媒体。3212.4.1文本l文字的格式化 文字的格式化包括字号、字体、字间距、行距等。l字号的大小可以用不同的方式表达，例如磅(Point)或像素(Pixel)。l字体可以被网页设计者用来更充分地体现设计中要表达的情感。l行距就是在两行文字之间间隔距离的大小，是从一行文字基线到另一行文字基线之间的距离。行距本身也是具有强表现力的设计语言。3312.4.1文本l文字的强调 文字的强调一般是对网站内容信息的一个加强手法。通常有以下几种l行首的强调l引文的强调l个别文字的强调34文字的颜色l文字的颜色在网页设计中，颜色的运用可以强调文字中特别的部分，还可以对整个文字内容的情感表达产生影响。3512.4.2多媒体l图片格式GIF格式 JPG格式 PNG格式 l图片使用原则要尽可能保证下载速度 在网页中所采用的每一张图片最好加入Width、Height这两个属性，这样会网页数据下载过程更顺畅。尽量将网站内容进行分类管理，尽量细化管理 将这些大的图片分割一下 网页底图要简单明快 3612.4.3内容排版l排版并仅仅做到整齐就足够，还要有明确的分类，以及主题的适当规划。排版包括表格、框架的应用、文字缩排、段落等等。两端均齐 居中排列 左对齐或右对齐 绕图排列 3712.4.3内容排版l在对内容进行排版上，需要注意以下几个问题：把关联项在视觉上进行分组创建视觉层次容易查找和阅读的布局利用三分法，确定表现重点位置。3812.5色彩设计l色彩是网站最重要的一个部分，色彩能够呈现设计意图、表达个性、对内容进行区分、布局和强调，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。39提问与解答环节Questionsandanswers40结束语CONCLUSION感谢参与本课程，也感激大家对我们工作的支持与积极的参与。课程后会发放课程满意度评估表，如果对我们课程或者工作有什么建议和意见，也请写在上边，来自于您的声音是对我们最大的鼓励和帮助，大家在填写评估表的同时，也预祝各位步步高升，真心期待着再次相会！41感谢观看Theusercandemonstrateonaprojectororcomputer,orprintthepresentationandmakeitintoafilm42