首页 > 网站建设 > 蓝韵观点 > 设计前沿 > 杭州网页设计导航栏设计讲解
杭州网页设计导航栏设计讲解

作者:panjemin来源:www.lanyun2009.com时间:2017.06.30

杭州网页设计中,我们仅需要几秒钟就可以从导航浏览到内容。你需要很棒的网页内容来推销你的想法,但如果用户没办法找到他们需要的资讯,内容写的再棒都没用。

当然,我是自学的,一开始对于导航也是一无所知。在下面的章节,我会解释一下这件痛苦的事。

导航,就我所知就是:你需要一些首页(Home Button)、关于我们(About us)、联络我们(Contact us)的链接,再根据不同的网站需求增加新的按钮。较重要的是,这些按钮必须看起来很漂亮。

我开始学杭州网页设计是在Photoshop 刚出来的时候,那时候真是一段美好的时光啊!那时候做网页设计,你需要学的只有几个教学影片跟一些切PSDs 图档的小常识。那时候有一些输出很烂的HTML 跟少数的iframe,还有自由使用的Flash。对!

DreamWeaver 跟Frontpage 不能正确的显示我用Photoshop 做的设计图档,他们的HTML 跟JavaScript 导览列让我的表格变得乱七八糟的。如果我想让我的悬停效果在所有浏览器都可以起到作用,我就必须用Flash 来建造我的导览列。

注意,只有导览列喔!即使我后来学了CSS,我还是维持这个坏习惯好一阵子。因为我觉得:Hover 效果那时候还不能在每个浏览器都运作得很好。能够稍微安慰一点的是,那时候专家也不能更好的解决这个问题。

记得那时候用Photoshop设计师,常常把图片当成按钮的背景,即使他们没有使用Flash,那时候有些公司不得不在导航链接里置入他们的公司logo。我甚至不想列举在基于Flash的网站的日子创造的那些反面例子。

现在的导航

好的,这部分会有一些漂亮的图片。我们来看一些现在的导航模式吧,有些是已经使用很久的样式,到现在还是可以运作的很好、有���是全新的,还有一些是现有的导航模式基于相应的应用场景做了一些调整后的产物。

1. 简单的导航 Plain Navigation

这是经典导航模式,在网页上方放置一排竖的或横的链接清单。这个样式从来没消失过,只是比以前更简洁了。

它常被用于小型网站,通常是小册子网站(brochure sites)和电子商务网站,他们的列表通常较小因而这种导航非常适用。

2. 隐藏导航 Hidden Navigation

现在任何事都以移动端方案优先的情况创造了这个隐藏导航。这个概念也渗透到PC的网页,有些设计师甚至为了五或六个链接就制作了全屏菜单。

这听起来是不必要的,但我认为一旦你隐藏了你的导航,相对的菜单就会变得很大。事实上这一点也不会影响可用性。

用这个Awwwards 案例来说,隐藏导航是很合理的。因为它们有一个需要一定空间来工作的复杂的下钻菜单。

3. 混合导航 Hybrid Navigation

在较大型的网站跟某些网络应用程序上,通常需要多种导航方式。一个简单的例子是It’s Nice That,它的左上角有一些主要的导航链接,然后将一个更全面的链接列表藏在了汉堡包按钮的背后。

想要更改浏览网站语言、申请工作,或是阅读隐私权条款当作娱乐的人(真的有人这样吗?)也许可以从那里开始。

4. 分类导览 Taxonomy-Based Navigation

你可以在博客、新网站,或是Pinterest 中找到这种导航。

这是因为要引导你的用户浏览分类的帖子和其他信息集。无论是按主题、日期、标签或诸如此类的方法进行分类,都是为了帮助你找到更多相同类型的内容。

5. 实验性的导航 Experimental Navigation

这不是指任何一个特定的设计样式,而是他们的集合。我喜欢把他们称为「作品集导航」,因为通常这种导航都被应用在作品集网站中,设计师可以在这边自由发挥创意。它通常没有任何传统菜单或是将菜单项分散在页面周围。角落是相当普遍的选择。

它通常用了大量的JavaScript ,高度展示个人喜好的布局方式,还有大量的动画。。这种导航方法通常在一定程度上会降低可用性,但不能否认的是这种效果通常是新颖而富有创造性的。

本文为蓝韵网络(杭州网页设计)原创文章,转载请注明原文网址摘自于http://www.lanyun2009.com/views/669.html,注明出处;未注明出处禁止转载。

 

 

与蓝韵项目经理通话

请输入正确的手机号码格式

信息保护中请放心填写

在线咨询
 
提交成功
关闭浮窗