网站导航设计指南:如何做一个有吸引力的网站?
导航的功能是为了让用户更容易地找到需要的信息,可以对网站的信息架构和站内搜索进行分析和优化,也能对用户起到很好的引导作用。一个有吸引力的导航能够吸引用户去浏览更多的网站内容,增加用户在网站的停留时间。导航在网站设计中的地位举足轻重,它引导着用户进行浏览和查找,一个良好的导航系统能让用户在离开网站时感觉享受了一次愉快的旅程。
1.顶部水平栏导航
顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一。它最常用于网站的主导航菜单,且通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局的网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时,这种设计模式可以支持更多的链接。所有重要的信息都会固定在顶部,对于用户来说这样使用起来会更简便舒适。
2.抽屉式导航设计
默认情况下,导航菜单根本就不显示,只有当触摸到右上角指定的小图标时,第一个内容层才会打开。当触摸到其中一个栏目时,第二个内容层才会逐渐展开,给用户一个非常清晰明了的内容导航。使用抽屉式导航来组织复杂内容是一个非常方便和流行的方式。通常,复杂的网站会使用抽屉式的导航来设计。
3.固定式侧边栏导航
侧边栏导航菜单可以兼容不同的屏幕尺寸。适合一个非常明亮干净的排版布局的网站,可以很好地做到了和用户之间的交互,让人一眼就把精力集中在导航栏上。侧边导航栏的优美之处主要表现在空间够大,大量的空白让用户感觉整个网站有呼吸之处,显得非常微妙而自由。通过拥有独特的设计,引起用户的注意。
4.隐藏式侧边栏导航
侧边栏菜单将会是2014的一个新趋势!侧边导航给人的感觉就像是你在窥视页面背后或者是掀开了一个玩具盒的盖子看看里面到底有些什么。在需要的时候导航栏应该一直在那里,而当用户想要专注于某个特定的任务时,导航栏则应该优雅的隐藏起来。隐藏式侧边导航非常方便使用,鼠标悬停在浏览器左侧即可出现,主体部分即时出现的旋转效果也很带感,可以很好的引导用户的注意力。将导航隐藏起来同时也实现了界面的简洁,使网站的浏览体验非常的愉悦,因为网站并没有留下太多无用的信息去分散用户的注意力。
5.图标式导航
图标式导航的好处是节省空间,让界面更简洁。图标也可用于细致的分类,提供更明显的视觉线索,而且图标具有直观的语义显示,每一个图标代表每一个不同的事件,吸引用户的注意,从而更好的引导用户操作。如果再加上优秀的动效转换能够吸引用户注意,让用户迅速找到导航菜单。
6.选项卡导航
选项卡导航可以随意设计成任何你想要的样式,从逼真的、有手感的标签到圆滑的标签,以及简单地方边的标签等。它存在于各种各样的网站里,并且可以纳入任何视觉效果。选项卡比起其它类别的导航有一个明显的优势:它们对用户有积极的心理效应。
7.响应式导航设计
响应式导航的设计遵循了响应式Web设计理念,页面的设计往往会根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式,使用户在不同的平台上有着独一无二的用户体验,达到更好的阅读效果。响应式导航的优势是在不同的屏幕分辨率下保持相同的视觉和感觉。
总之,网站导航各种各样的通用和大家熟知的设计模式,都可以用来作为为网站创建有效地信息架构的基础。导航栏的设计可以是静态的、动态的、可扩展的等多种方式,甚至只是隐藏在一个微妙的符号里面。任何导航在网站里面都扮演者不可或缺的角色,所以,探索网站采用何种导航方式是很有必要的。
延伸阅读:
- 爱不释手的侧边栏!网站导航应该去一边玩儿
- 网站导航之痛:如何让用户找到想要的内容?
- 如何打造完美的网站导航
- 网站导航必备的10款jquery插件
注:相关网站建设技巧阅读请移步到建站教程频道。
- 06-07辛辛苦苦做了个活动却没人点?提升“行为引导按钮”点击率的秘诀
- 06-07小心谨慎!网页重设计的7个常见误区与解决方案
- 06-07理清思路!如何从头打造让用户真正信任的界面?
- 03-282016年网页设计趋势:卡片式设计如何在占尽优势?
- 03-28小谈用户体验:让访客反感的12种网页设计
- 03-07复杂产品的响应式设计流程
- 02-26从交互设计角度,聊聊Web网站和移动App的六大差异
- 02-24母婴电商网站是如何进行个性化推荐的
- 01-11全球最受赞誉公司揭晓:苹果连续九年第一
- 12-09罗伯特·莫里斯:让黑客真正变黑
- 12-09谁闯入了中国网络?揭秘美国绝密黑客小组TA
- 12-09警示:iOS6 惊现“闪退”BUG
- 11-18LG新能源宣布与Bear Robotics达成合作,成为
- 11-18机构:三季度全球个人智能音频设备市场强势
- 11-18闲鱼:注册用户过6亿 AI技术已应用于闲置交
- 11-18美柚、宝宝树回应“涉黄短信骚扰”:未发现
- 11-01京东七鲜与前置仓完成融合