网页中的页面区域设计

1、网页中的页面区域设计网页中的页面区域设计主讲：方颖松主讲：方颖松Page 2主要页面区域主要页面区域n 标志标志logologon 导航导航n 主题区主题区n 底部区域底部区域Page 3Page 41 1 网站标志网站标志logologon 网站网站logo的要求的要求n 因为一般企业都有自己专门的因为一般企业都有自己专门的logo，所以一般企业网站开发过程中很少，所以一般企业网站开发过程中很少用到用到logo设计，但可能对部分设计，但可能对部分UI方案不完整的方案不完整的logo，进行方向上的修改。，进行方向上的修改。Page 5Page 61 1 网站标志网站标志logologon常规常

2、规logo组成组成图形、中文名称、英文名称或英文网址或拼音图形、中文名称、英文名称或英文网址或拼音 Page 71 1 网站标志网站标志logologonLogo设计常用手法设计常用手法详细教程见网络课程平台详细教程见网络课程平台课程资源课程资源Page 82.导航导航n 导航的定义：网页导航（导航的定义：网页导航（navigation）是指通过一定的技术手段，）是指通过一定的技术手段，为网页的访问者提供一定的途径，使其可以方便地访问到所需的内为网页的访问者提供一定的途径，使其可以方便地访问到所需的内容。网页导航设置是在网页栏目结构的基础上，进一步为用户浏览容。网页导航设置是在网页栏目结构的基

3、础上，进一步为用户浏览网页提供的提示系统网页提供的提示系统Page 92.导航导航n 导航的类型导航的类型n 顶部水平栏导航顶部水平栏导航 n 竖直竖直/侧边栏导航侧边栏导航n 选项卡导航选项卡导航n 弹出式菜单和下拉菜单导航弹出式菜单和下拉菜单导航Page 102.导航导航n顶部水平栏导航：当前最流行地网站导航菜单设计模式之一。它最常用顶部水平栏导航：当前最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的主题区的上方或于网站的主导航菜单，且最通常地放在网站所有页面的主题区的上方或下方。下方。n顶部水平栏导航对于只需要在主导航中显示顶部水平栏导航对于只需

4、要在主导航中显示5-12个导航项的网站来说是个导航项的网站来说是非常好的选择。当它与下拉子导航结合时，这种设计模式可以支持更多非常好的选择。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。的链接。 Page 11Page 12Page 132.导航导航n竖直竖直/侧边栏导航侧边栏导航n侧边栏导航的导航项被排列在一个单列，一侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，项在一项的上面。它经常在左上角的列上，在主题区之前。根据一份针对从左到右习惯在主题区之前。根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直读者的导航模式的可用性研究，左边的竖直导

5、航栏比右边的竖直导航表现要好。导航栏比右边的竖直导航表现要好。Page 14Page 15Page 162.导航导航n选项卡导航选项卡导航n选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳入任何视觉效果。可以纳入任何视觉效果。n优点：选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的优点：选项卡比起其它类别的导航有一个明显的优势：它们对用户有积极的心理效应。人们通常

6、把导航与选项卡关联在一起，因为他们曾经在笔记本或心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。真实世界的暗喻使得选项卡导航非常直观。n缺点：它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资缺点：它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链

7、接很多的情况也不太适用于链接很多的情况Page 17Page 18Page 192.导航导航n弹出式菜单和下拉菜单导航弹出式菜单和下拉菜单导航n弹出式菜单弹出式菜单(与竖直与竖直/侧边栏导航一侧边栏导航一起使用起使用)和下拉菜单和下拉菜单(一般与顶部水一般与顶部水平栏导航一起使用平栏导航一起使用)是构建健壮的是构建健壮的导航系统的好方法。导航系统的好方法。n优点：它使得你的网站整体上看起优点：它使得你的网站整体上看起来很整洁，而且使得深层章节很容来很整洁，而且使得深层章节很容易被访问。易被访问。n缺点：除非你在主导航链接边上放缺点：除非你在主导航链接边上放置一些标识置一些标识(通常是箭头图标通

8、常是箭头图标)，不，不然访客可能不知道那有包含子导航然访客可能不知道那有包含子导航项的下拉或出式菜单，因此使这些项的下拉或出式菜单，因此使这些标识很明显是非常重要的。同时出标识很明显是非常重要的。同时出式菜单和下拉可能使得导航在移动式菜单和下拉可能使得导航在移动设备上非常难用，所以要确保你的设备上非常难用，所以要确保你的移动样式表处理了这种情况。移动样式表处理了这种情况。Page 20Page 21Page 22n 导航常见设计手法导航常见设计手法n 渐变底色渐变底色+文字文字n 底纹底纹+文字文字n 不同底色不同底色+文字文字n 图标图标+底色底色+文字文字n 苹果风格苹果风格n 个性导航个

9、性导航Page 23渐变底色渐变底色+文字文字Page 24图标图标+底色底色+文字文字Page 25不同底色不同底色+文字文字Page 26苹果风格苹果风格Page 27个性导航个性导航Page 28n 导航的注意事项导航的注意事项n 站点导航切忌堆叠太多站点导航切忌堆叠太多n 导航栏不推荐导航栏不推荐 flash。Page 293. 主题区主题区n 主题区概念：指网页中表达主题、突出主题的较大幅面的图像或动主题区概念：指网页中表达主题、突出主题的较大幅面的图像或动画。一个好的主题区域，可以使浏览者见该区域即知其内容，主题画。一个好的主题区域，可以使浏览者见该区域即知其内容，主题区能够形成整

10、个页面的视觉中心，它具有直观性强的特点，不需要区能够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在像文字那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给人以深刻印象。瞬间给人以深刻印象。Page 303. 主题区主题区n 设计形式设计形式n 全页面宽大图片全页面宽大图片+文字文字n 局部图片局部图片+文字文字Page 313. 主题区主题区n 全页面宽大图片全页面宽大图片+文字文字Page 323. 主题区主题区Page 333. 主题区主题区3. 主题区主题区Page 34Page 353. 主题区主题区n 局部图片局

11、部图片+文字文字Page 363. 主题区主题区Page 373. 主题区主题区n 常见设计手法常见设计手法图片图片+文字编排文字编排Page 38Page 393. 主题区主题区Page 40Page 41Page 423. 主题区主题区n 常见设计手法常见设计手法图片渐变过渡图片渐变过渡+同类底色同类底色+文字编排文字编排Page 43Page 443. 主题区主题区n 常见设计手法常见设计手法人物或产品抠图人物或产品抠图+底色或底图底色或底图+文字编排文字编排Page 45Page 46Page 47Page 484. 底部区域底部区域n 底部导航（可选）底部导航（可选）n 关于本站关于本站n 联系我们联系我们n 网站地图网站地图n 广告服务广告服务