Embed Size (px)
DESCRIPTION
A simple summary of web navigation types
Citation preview
Types of Web
By 00
http://www.uegeek.com/
N A V G A T I O N I
按用途分
结构导航
（Structural Navigation）
全局导航
（Global/Main Navigation）
局部导航
（Local Navigation）
关联导航
（Associative Navigation）
上下文导航
（Contextual Navigation）
相关性导航
（Adaptive Navigation）
快速链接
（Quick Links）
页脚导航
（Footer Navigation）
功用导航
（Utility Navigation）
跨站导航
（Extra-Site Navigation）
工具箱
（Toolboxes）
标识链接
（Linked Logo）
语言选择器
（Language Selectors）
国家或地区选择器
（Country Or Region
Selectors）
页内导航
（Internal Page Navigation）
By 00
uegeek.com
按形式分
标签型导航
（Tabs Navigation）
导航标签 （Navigation Tabs）
模块标签 （Module Tabs）
层级型导航
（Hierarchy Navigation）
面包屑 （Breadcrumbs）
快捷下拉菜单 （Shortcut Dropdown）
首页链接 （Home Link）
页脚导航 （Footer）
菜单型导航
（Menus Navigation）
垂直下拉菜单（Vertical Dropdown Menu）
水平下拉菜单（Horizontal Dropdown Menu）
手风琴菜单 （Accordion Menu）
内容型导航
（Content Navgation）
页面导航 （Pagination）
标签和标签云 （Tag/Tag Cloud）
缩略图 （Thumbnail）
走马灯 （Carousel）
连续滚动 （Continuous Scrolling）
存档 （Archive）
文章列表 （Article list）
事件日历 （Event calendar）
By 00
uegeek.com
Examples
按用途分
按用途分 > 结构导航 > 全局导航（Global/Main Navigation）
http://www.lonelyplanet.com/
按用途分 > 关联导航 > 快速链接（Quick Links）
http://www.princeton.edu/
按用途分 > 功用导航 > 跨站导航（Extra-Site Navigation）
http://www.google.com/
按用途分 > 功用导航 > 工具箱（Toolboxes）
http://www.alipay.com/
按用途分 > 功用导航 > 标识链接（Linked Logo）
http://www.apple.com/
按用途分 > 功用导航 > 语言选择器（Language Selectors）
http://wii.com/
按用途分 > 功用导航 > 国家或地区选择器（Country Or Region Selectors）
http://www.tiffany.com/
按用途分 > 页内导航（Country Or Region Selectors）
http://www.apple.com/
Examples
按形式分
按形式分 > 标签型导航 > 导航标签（Navigation Tabs）
http://www.apple.com/
按形式分 > 标签型导航 > 模块标签（Module Tabs）
http://www.360buy.com/
按形式分 > 层级型导航 > 面包屑（Breadcrumbs）
http://www.163.com/
按形式分 > 层级型导航 > 快捷下拉菜单（Shortcut Dropdown）
http://www.toyota.co.uk/
按形式分 > 层级型导航 > 首页链接（Home Link）
http://www.ibm.com/
按形式分 > 内容型导航 > 页面导航（Pagination）
http://www.google.com/
按形式分 > 内容型导航 > 标签和标签云（Tag/ Tag Cloud）
http://www.delicious.com/
按形式分 > 内容型导航 > 缩略图（Thumbnail）
http://www.bing.com/
按形式分 > 内容型导航 > 走马灯（Carousel）
http://www.douban.com/
按形式分 > 内容型导航 > 存档（Archive）
http://www.uegeek.com/
按形式分 > 内容型导航 > 文章列表（Article list）
http://www.visitmix.com/
按形式分 > 内容型导航 > 事件日历（Event calendar）
http://live.cnn.com/
By 00
uegeek.com
Contact me Email: [email protected] MSN： [email protected]
http://book.douban.com/subject/2146224/ http://ui-patterns.com/
Reference
