网页的基本认识概要.pptx

第一章 网页的基本认识 课程目录 网页的基本认识 1 常规网页的基本构成 一、头部 1）Logo（标志区） 2）Banner（广告区） 3）Navigation（导航） 二、主体内容区 可分结构： 1）左右（2栏） 2）左中右（3栏） 三、底部 1）FriendLink（友情链接区） 2）Bottom Nav（底部次导航） 3）CopyRight（版权区） Logo Banner 其他功能区 Nav Left Center Right Sec Nav（次导航） FriendLink（友情链接） CopyRigth（版权区） Logo Banner 其他功能区 Nav Left Right Sec Nav（次导航） FriendLink（友情链接） CopyRigth（版权区） Logo Banner 其他功能区 Nav Left Right Sec Nav（次导航） FriendLink（友情链接） CopyRigth（版权区） 其他更加丰富的版面排版介绍或其他特殊页面的欣赏 网页设计与平面设计的区别 2 先来看看网页设计跟平面设计的共同点：?? 1.?都需要良好的视觉表现?? 2.?做网页设计和平面设计的人都需要有良好的审美能力?? 3.?它们都是在平面上做设计，而不是空间中做设计 可能正是因为第三点，大家都把他们混淆了。?? 网页设计与平面设计的区别 2 那么它们之间到底有什么不同呢？ 网页设计与平面设计的区别 2 设计理念的不一样 平面设计的核心是品牌。它要以品牌为出发点去设计，要在视觉上100％体现品牌的魅力。 而网页设计的核心是用户。网站的目的是与用户100％沟通，是要实现某些特定的功能，这有点像电脑中的软件。那么网页设计其实是一种UI设计，也就是所谓的界面设计，要以用户的操作习惯为出发点去设计，换句话说也就是要设计得人性化。让用户使用得更方面，长时间盯着网页看也不觉得累。这也就是为什么众多门户要用白色做为页面主色调的原因，因为白色看久了不会造成眼睛疲劳，而鲜艳的颜色看久了会眼困！ 网页设计与平面设计的区别 2 2. 视觉元素 在色彩方面平面设计与网页设计使用的色彩模式完全不同，平面设计因为后期的实现依赖于印刷，所以采用CMYK的色彩模式，而网页根据其显像方式使用RGB的色彩模式。平面设计时的色彩运用注重视觉的冲击力及视觉流的引导(在这点上与网页设计中的BANNER设计相类似)，而网页设计(产品类)更注重的是信息结构关系的梳理，如果将色彩运用的过多过强，很容易引起视觉的疲劳感。 字体的选用 平面设计的字体选用更为自由一些，不用担心后期实现的问题，而网页设计就需要考虑的更为全面，并且在字体的选用范围上也很小所有字体都是根据用户操作系统内默认字体而定的（宋体，微软雅黑，黑体） 字号选择范围：12——24号之间（特殊要求除外) 网页设计与平面设计的区别 2 图形使用上，平面设计比网页设计丰富，表现方式也多样化，特别是对于产品类的网页设计，模块化的设计思路更为明显，在视觉表现上也是如此，平面对于图形的表现是不需要考虑到后期的实现的，在一点上是有目共睹的。在来说一下咱们设计时使用的尺寸单位问题，平面设计在使用尺寸标注时都用的是物理尺寸的概念，比如英寸，厘米，毫米等，而网页使用的像素。 网页设计与平面设计的区别 2 3. 特殊的要求 网页设计不仅仅是在做设计，更多的是要考虑网页的打开速度、兼容性等问题。所以有时候不得不为了照顾这些特殊的要求而牺牲美观。我们往往看到门户站的网页都是大量的文字，这其实是为了减少页面的打开时间。韩国的网站喜欢用大量的图片、FLASH，那是因为韩国的网络带宽全球第二，它有那个条件去大量的实现视觉冲击！而目前的中国不行！ 网页设计与平面设计的区别 2 4. 还有一点，就是很多人觉得做网站就要做得很绚丽，很好玩。其实这些人是把做网站和做网络广告给弄混淆了！ 我们平时看到很多品牌的网站，很绚丽、很好玩、甚至很有创意。但是别忘了！那其实是网络广告而已！虽然那表面上是个网站。网络广告的目的跟其他广告一样，为的就是宣传品牌形象、介绍产品功能等等。但是网站不一样！一个网站是要实现某些具体的功能，也就是说网站是要功能美观，而网络广告是要美观功能。 网页设计与平面设计的区别 2 5、呈现方式对比 网页设计与平面设计的区别 2 5、呈现方式对比 网页设计与平面设计的区别 2 5、浏览方式 平面设计的属于渐进式的浏览方式，无法对整个浏览的过程进行多样化串联，网页设计拥有滚动条下拉、按钮链接跳转等多样化的浏览信息方式，在拥有同样一种信息架构的条件下，信息之间的串联性更为丰富，用户选择信