第5章 设计网站页面效果

CONTENTS1.设计和制作网站页面布局设计和制作网站页面布局1.微课网的视觉设计遵循共同的网页风格，有自己的配色体系，它们分别是橙色、白色和灰色，我们的色彩体系是如图所示。微课网色彩体系PART.1设计和制作网站页面布局网站由非常多的页面组成，它们都会作为一个资源放入随书所附的电子资源里面。在这个案例中，重点要介绍4张网页，分别是首页、课程、笔记和登陆注册页面。它们涉及到交互类型网站的大部分知识，因此，在这里也列出它们的布局图。网站页面布局PART.1设计和制作网站页面布局首页页面布局图课程页面布局图PART.1设计和制作网站页面布局笔记页面布局图登陆注册页面布局图根据上一节提供的布局图，以我们的系统配色为依据，我们制作了页面图，这些图片默认网页宽度是1024px。PART.1设计和制作网站页面布局设计和制作页面图首页设计图课程页面设计图根据上一节提供的布局图，以我们的系统配色为依据，我们制作了页面图，这些图片默认网页宽度是1024px。PART.1设计和制作网站页面布局设计和制作页面图笔记页面设计图登陆注册页面设计图网页设计师需要考虑有效的表达构思的图形效果。通过图形确立网页风格大致分为：平面图形、半立体图形、立体图形。微课网用平面图形进行视觉造型。我们设计了统一的字体，插图，图形符号，和照片。汉字是我们数千年来的交流工具，它象形，表意。时至今日，字体(typography)的发展和研究仍然在继续。计算机出现后，字形（typeface）的开发和表现越来越多样化字体不仅仅局限于可读性，也可以依靠文字的属性-字形、大小、字号、字间距等变化主动的引导人们集中视线。本网站采用微软雅黑为标准字体，正文字号14px，标题30px，PART.1设计和制作网站页面布局设计和制作logo、icon字体微课网的Logo来源于微课的汉语拼音Weike，我们使用了前两个字母W和e然后对它进行变形。我们设计了2个Logo样式，分别放在首页和子页面里面。如图所示。PART.1设计和制作网站页面布局logo用于首页的logo图用于子页的logo图对于网页而言，图形符号主要用作象征主页、网站地图、留言等图标，比如说点赞的图标。称之为icon。图形符号有着单一的形态。在微课网中我们采用了Bootstrap授权使用的图形。如图所示。图形符号（pictogram）是指不受国家、文化、地区等限制的单一化视觉语言，它也是人们能够快速、最准确地进行沟通的交流手段。比如奥运会图形符号如图所示。PART.1设计和制作网站页面布局Icon08奥运会图标公共场所符号微课网使用的部分icon图越来越多的网站重视网站特效的设计和使用，我们称之为动效（DynamicEffect）大到页面的转场，图片相册的切换，小到图标的动作等，在重视用户交互和用户体验的网站中非常多见。比如说w3网站的首页，它的Logo会随着http://ua.w3.co/。PART.1设计和制作网站页面布局设计和制作网站特效图片轮播首页中我们采用了图片轮播的形式，一次播放热门课程、热门专题、热门讨论的链接式大图如图所示。用户在收藏某课程、笔记的时候就需要点击收藏图标。或者在点赞某个帖子，某个课程时，就会出现这