《网页中的页面区域设计讲解》由会员分享，可在线阅读，更多相关《网页中的页面区域设计讲解（50页珍藏版）》请在金锄头文库上搜索。
1、Page 1 网页中的页面区域设计 主讲：方颖松 Page 2 主要页面区域 n 标志logo n 导航 n 主题区 n 底部区域 Page 3 Page 4 1 网站标志logo n 网站logo的要求 n因为一般企业都有自己专门的logo，所以一般企业网站开发过程中很少 用到logo设计，但可能对部分UI方案不完整的logo，进行方向上的修改 。 Page 5 Page 6 1 网站标志logo n 常规logo组成 图形、中文名称、英文名称或英文网址或拼音 Page 7 1 网站标志logo n Logo设计常用手法 详细教程见网络课程平台课程资源 Page 8 2.导航 n 导航的定义
2、：网页导航（navigation）是指通过一定的技术手段，为 网页的访问者提供一定的途径，使其可以方便地访问到所需的内容。 网页导航设置是在网页栏目结构的基础上，进一步为用户浏览网页提 供的提示系统 Page 9 2.导航 n 导航的类型 n顶部水平栏导航 n竖直/侧边栏导航 n选项卡导航 n弹出式菜单和下拉菜单导航 Page 10 2.导航 n 顶部水平栏导航：当前最流行地网站导航菜单设计模式之一。它最常用 于网站的主导航菜单，且最通常地放在网站所有页面的主题区的上方或 下方。 n 顶部水平栏导航对于只需要在主导航中显示5-12个导航项的网站来说是 非常好的选择。当它与下拉子导航结合时，这种
3、设计模式可以支持更多 的链接。 Page 11 Page 12 Page 13 2.导航 n 竖直/侧边栏导航 n 侧边栏导航的导航项被排列在一个单列，一 项在一项的上面。它经常在左上角的列上， 在主题区之前。根据一份针对从左到右习惯 读者的导航模式的可用性研究，左边的竖直 导航栏比右边的竖直导航表现要好。 Page 14 Page 15 Page 16 2.导航 n 选项卡导航 n 选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到 圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且 可以纳入任何视觉效果。 n 优点：选项卡比起其它类别的导航有一个明显的优势：
4、它们对用户有积极的 心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或 资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个 真实世界的暗喻使得选项卡导航非常直观。 n 缺点：它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资 源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们 也不太适用于链接很多的情况 Page 17 Page 18 Page 19 2.导航 n 弹出式菜单和下拉菜单导航 n 弹出式菜单(与竖直/侧边栏导航一 起使用)和下拉菜单(一般与顶部水 平栏导航一起使用)是构建健壮的 导航系统的好方法。 n 优点：它使得你的网
5、站整体上看起 来很整洁，而且使得深层章节很容 易被访问。 n 缺点：除非你在主导航链接边上放 置一些标识(通常是箭头图标)，不 然访客可能不知道那有包含子导航 项的下拉或出式菜单，因此使这些 标识很明显是非常重要的。同时出 式菜单和下拉可能使得导航在移动 设备上非常难用，所以要确保你的 移动样式表处理了这种情况。 Page 20 Page 21 Page 22 n 导航常见设计手法 n渐变底色+文字 n底纹+文字 n不同底色+文字 n图标+底色+文字 n苹果风格 n个性导航 Page 23 渐变底色+文字 Page 24 图标+底色+文字 Page 25 不同底色+文字 Page 26 苹果风
6、格 Page 27 个性导航 Page 28 n 导航的注意事项 n站点导航切忌堆叠太多 n导航栏不推荐 flash。 Page 29 3. 主题区 n 主题区概念：指网页中表达主题、突出主题的较大幅面的图像或动画 。一个好的主题区域，可以使浏览者见该区域即知其内容，主题区能 够形成整个页面的视觉中心，它具有直观性强的特点，不需要像文字 那样去逐字逐句地阅读，可以不受文化水平的限制，并能在瞬间给人 以深刻印象。 Page 30 3. 主题区 n 设计形式 n全页面宽大图片+文字 n局部图片+文字 Page 31 3. 主题区 n 全页面宽大图片+文字 Page 32 3. 主题区 Page 3
7、3 3. 主题区 3. 主题区 Page 34 Page 35 3. 主题区 n 局部图片+文字 Page 36 3. 主题区 Page 37 3. 主题区 n 常见设计手法 图片+文字编排 Page 38 Page 39 3. 主题区 Page 40 Page 41 Page 42 3. 主题区 n 常见设计手法 图片渐变过渡+同类底色+文字编排 Page 43 Page 44 3. 主题区 n 常见设计手法 人物或产品抠图+底色或底图+文字编排 Page 45 Page 46 Page 47 Page 48 4. 底部区域 n 底部导航（可选） n关于本站 n联系我们 n网站地图 n广告服务 n问题报告 n或者同主导航 n 版权信息 Copyright 1998 - 2013 公司英文名或拼音. All Rights Reserved.公 司中文名 版权所有 n 信息备案 n域名IP备案（工信部） n经营性网站备案 Page 49 Page 50
