網(wǎng)站導(dǎo)航欄的設(shè)計(jì)方法!

大多數(shù)網(wǎng)站設(shè)計(jì)師都會(huì)同意，導(dǎo)航是一個(gè)網(wǎng)站最重要的組成部分之一。盡管此，它不總是容易的使用或訪問。傳統(tǒng)上，用戶必須向后滾動(dòng)到頂部的網(wǎng)站訪問的導(dǎo)航菜單。最近，我不知道是否粘性的菜單，使網(wǎng)站更快地瀏覽，而我進(jìn)行的可用性研究，找到問題的答案。讓我們來看看在這項(xiàng)研究的結(jié)果，一些實(shí)現(xiàn)技術(shù)和一些相關(guān)的挑戰(zhàn)。

（非凡的邊注：你已經(jīng)買了全新的非凡的書＃3本書介紹了新的實(shí)用技術(shù)和進(jìn)步的網(wǎng)頁設(shè)計(jì)了一個(gè)全新的思維方式。今天你的書！）

置頂導(dǎo)航的定義

粘，或?qū)Ш绞枪潭ǖ模旧鲜且粋€(gè)網(wǎng)站菜單鎖定到位，因此，它并沒有消失，當(dāng)用戶向下滾動(dòng)頁面，換句話說，它是從任何地方訪問的網(wǎng)站，而不必滾動(dòng)。雖然粘導(dǎo)航可以應(yīng)用到任何菜單，如頁腳或社會(huì)媒體按鈕，我們將重點(diǎn)放在主（或主要）的網(wǎng)站導(dǎo)航。下圖顯示了在移動(dòng)設(shè)備上的標(biāo)準(zhǔn)和粘導(dǎo)航之間的差異。

可用性研究

科研條件

在這項(xiàng)研究中，我創(chuàng)建了兩個(gè)幾乎相同的測(cè)試網(wǎng)站。唯一的區(qū)別是他們中的一個(gè)標(biāo)準(zhǔn)的導(dǎo)航和其他導(dǎo)航粘。40位與會(huì)的時(shí)間完成五項(xiàng)任務(wù)的第一個(gè)網(wǎng)站。然后，他們被要求完成5個(gè)不同的任務(wù)在第二個(gè)網(wǎng)站。用戶之間交替的任務(wù)順序平衡的熟悉因子。在臺(tái)式機(jī)上的網(wǎng)站進(jìn)行了測(cè)試，并沒有被告知的網(wǎng)站之間的差異，直到他們的會(huì)議結(jié)束。數(shù)據(jù)分析，直到測(cè)試完成。研究的結(jié)果中產(chǎn)生了兩個(gè)有趣的結(jié)論。

1。粘性的菜單，分別為22％，更快地導(dǎo)航

從研究的數(shù)據(jù)表明，參加者能夠找到他們?cè)趯ふ沂裁磿r(shí)，他們沒有向回滾動(dòng)到頁面頂部的更快。22％的可能不會(huì)看起來像一個(gè)大數(shù)目，但它可以對(duì)游客有很大的影響。根據(jù)這一數(shù)據(jù)，粘導(dǎo)航降低了36秒的五分鐘訪問網(wǎng)站。當(dāng)然，讓游客在頁面上不再是只有一個(gè)好處，如果你與它一起被提升了用戶體驗(yàn)。迫使人們挖通了一個(gè)網(wǎng)站，發(fā)現(xiàn)不符合這樣的東西。

2。100％的首選粘性的菜單，不知道為什么

用戶在每個(gè)會(huì)話結(jié)束時(shí)，問他們是否注意到這兩個(gè)用戶界面之間的差異。沒有人能夠識(shí)別它。這些變化是微妙的，并沒有捕獲的用戶，因?yàn)樗麄兌技性谕瓿勺约旱娜蝿?wù)。參加了一個(gè)網(wǎng)站，然后問是否覺得更容易使用。6的40名參加者有沒有偏好，但是，確實(shí)有偏好的34，100％的人表示，用粘導(dǎo)航網(wǎng)站更容易和更快地使用。沿著這條線的許多意見，如“我不知道怎么的網(wǎng)站是不同的，但我覺得好像我是花了很多的時(shí)間更少點(diǎn)擊第一個(gè)?！边@樣的評(píng)論指出，粘導(dǎo)航壓倒性的贊成票。

桌面軟件的導(dǎo)航菜單

想象一下，在Microsoft Word中鍵入一個(gè)文件，并具有向上滾動(dòng)到第一頁的頂部，每次你想大膽的一個(gè)字或擴(kuò)大利潤(rùn)。一想到這聽起來令人沮喪。大多數(shù)桌面軟件提供了到整個(gè)導(dǎo)航菜單，不管你在做什么在應(yīng)用程序的訪問。Web瀏覽器是沒有什么不同的，我們會(huì)覺得很可笑，滾動(dòng)到頂部的一個(gè)網(wǎng)站，訪問瀏覽器的地址欄中。

一個(gè)很好的例子

最近通過Facebook和Google+的粘導(dǎo)航，但他們是少數(shù)派。其中25個(gè)在美國(guó)訪問量最大的網(wǎng)站中，只有16％的企業(yè)目前有粘粘的導(dǎo)航。下面是一些例子，其他網(wǎng)站做一個(gè)出色的工作，拉動(dòng)這一關(guān)。

碳酸軟件，
這是一個(gè)很好的例子，在最高層的水平粘導(dǎo)航。一切都感覺舒適，當(dāng)您使用本網(wǎng)站。

網(wǎng)絡(luò)Appers
的導(dǎo)航是垂直的，在左，有些類似Google+上的導(dǎo)航。這里唯一的缺點(diǎn)是，如果屏幕的高度小于560像素，然后菜單的底部可能會(huì)無法訪問的情況下，這是在上網(wǎng)本上，當(dāng)我測(cè)試的網(wǎng)站。

MakeBetterApps
這里是另一個(gè)很好的例子。使導(dǎo)航略透明的，給了一絲下面的內(nèi)容，是一個(gè)很好的接觸。

魯?shù)婪颉とR斯坦
這個(gè)棘手的導(dǎo)航蔓延一路之隔的頂部，但是當(dāng)你向下滾動(dòng)頁面，菜單的設(shè)計(jì)稍有變化。這樣可以簡(jiǎn)化設(shè)計(jì)，是一個(gè)很好的技術(shù)，只要它不覺得不一致。此外，設(shè)計(jì)師采取了日益流行的做法使得整個(gè)網(wǎng)站只有一個(gè)頁面的菜單鏈接的錨撞你的頁面。一些很好的過渡和懸停效果，使用本網(wǎng)站愉快。

瑞安舍夫
本網(wǎng)站的導(dǎo)航是垂直的，只有圖標(biāo)。這里的創(chuàng)意令人印象深刻。

網(wǎng)頁設(shè)計(jì)師墻
粘行之有效的垂直導(dǎo)航菜單上這個(gè)網(wǎng)站，因?yàn)橹挥兴膫€(gè)項(xiàng)目。這已經(jīng)足夠了博客，我不知道為什么別人不采用這種方法。

雖然粘性的菜單，是不是最流行 的導(dǎo)航形式，越來越多的例子如雨后春筍般冒出了所有的時(shí)間。

入門

避免比賽！

這似乎是一個(gè)簡(jiǎn)單的方法來實(shí)現(xiàn)粘導(dǎo)航，但要避免這種方法。iFrame中造成更多的問題比解決的問題，特別是跨瀏覽器的兼容性，安全性和搜索引擎優(yōu)化。的iFrame中有自己的位置，但他們不應(yīng)該是你的HTML布局的重要組成部分。

CSS

CSS是一個(gè)偉大的方式來實(shí)現(xiàn)粘導(dǎo)航。這也似乎是最簡(jiǎn)單，最輕量級(jí)和最快捷的代碼。要注意的三件事位置的margin-top和z-index值。設(shè)置菜單的位置固定禁用元素的滾動(dòng)頁的其余部分。這可能會(huì)甩開你的利潤(rùn)，如果您的導(dǎo)航是水平的，所以你要調(diào)整。最后，使用同一個(gè)水平菜單的z-index，以確保導(dǎo)航坐在之上的一切，當(dāng) 你滾動(dòng)，這將使其他內(nèi)容的幻燈片下方的導(dǎo)航。這是一般的想法：

你將不得不玩的CSS使該技術(shù)適合您的網(wǎng)站。W3C的網(wǎng)站上的附加信息可以被發(fā)現(xiàn)。

JQUERY和JAVASCRIPT的

簡(jiǎn)單的智能置頂導(dǎo)航欄是一個(gè)許多很好的JavaScript實(shí)現(xiàn)。

如果你更喜歡jQuery的一個(gè)CSS或JavaScript的解決方案，那么你可以嘗試下列選項(xiàng)之一：

• jScroll
• 簡(jiǎn)單的智能置頂導(dǎo)航欄
• jQuery的航點(diǎn)
• 置頂?shù)腗enuBar

許多其他的解決方案和腳本都在那里。請(qǐng)?jiān)谙旅娴囊庖?，包括您的收藏夾。

什么是壞消息嗎？

有很多關(guān)于這個(gè)主題的意見，有些人認(rèn)為，粘導(dǎo)航是不值得的。這里有一些事情要注意的。

設(shè)計(jì)上的局限性

粘導(dǎo)航可以排除一些設(shè)計(jì)選擇，你的團(tuán)隊(duì)可能不愿意放棄。例如，將水平黏導(dǎo)航的最合乎邏輯的地方是在頁面頂部，高于一切。雖然很容易實(shí)現(xiàn)的，它可能不是你的用戶需要什么。

分散注意力，并侵入

如果不加小心，粘導(dǎo)航可以分散注意力。一些棘手的元素被延遲了，當(dāng)反彈到的位置，當(dāng)用戶滾動(dòng)下來的頁面。其他人是如此的高或?qū)?，他們主宰的布局和阻止訪問的內(nèi)容。導(dǎo)航應(yīng)該是方便，但不應(yīng)該競(jìng)爭(zhēng)，關(guān)注的內(nèi)容。

的移動(dòng)性

固定位置的CSS和某些JavaScript實(shí)現(xiàn)的一些移動(dòng)瀏覽器不支持，這是一個(gè)令人關(guān)注的一些開發(fā)商。文章“?組織流動(dòng)?“由Luke Wroblewski有一些偉大的原則時(shí)，要牢記為移動(dòng)設(shè)備創(chuàng)建導(dǎo)航。響應(yīng)的設(shè)計(jì)技術(shù)，還提供了一些解決方案，用于調(diào)整大小的屏幕上導(dǎo)航。

請(qǐng)注意每個(gè)設(shè)備所提供的支持級(jí)別。事先知道兼容性問題將節(jié)省您的時(shí)間，到底我什么時(shí)候可以使用？有一些有趣的信息的位置是：固定支持。布拉德·弗羅斯特也做了一些自己的測(cè)試和分析，提供了一些有趣的見解，他的隨行??視頻。

結(jié)論

為什么我們的Web設(shè)計(jì)人員和開發(fā)人員不斷迫使我們的用戶向上滾動(dòng)和向下的導(dǎo)航搜索頁？這不是一個(gè)問題在桌面軟件，現(xiàn)在我們有統(tǒng)計(jì)數(shù)據(jù)顯示的好處有粘性的菜單。導(dǎo)航上的排名前25位的84％的訪問量最大的美國(guó)網(wǎng)站可以更快實(shí)施粘導(dǎo)航。

當(dāng)然，這是不適合在任何情況下，尤其是房地產(chǎn)是緊的。但是，認(rèn)真考慮粘導(dǎo)航的同時(shí)，始終占可用性和整體的用戶體驗(yàn)。

本文作者來自北京傳誠(chéng)信，轉(zhuǎn)載請(qǐng)注明出處：北京傳誠(chéng)信（m.saddlebargains.com）