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

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

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

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

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

可用性研究

科研條件

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

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

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

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

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

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

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

一個很好的例子

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

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

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

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

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

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

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

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

入門

避免比賽！

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

CSS

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

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

JQUERY和JAVASCRIPT的

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

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

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

許多其他的解決方案和腳本都在那里。請在下面的意見，包括您的收藏夾。

什么是壞消息嗎？

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

設(shè)計上的局限性

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

分散注意力，并侵入

如果不加小心，粘導(dǎo)航可以分散注意力。一些棘手的元素被延遲了，當(dāng)反彈到的位置，當(dāng)用戶滾動下來的頁面。其他人是如此的高或?qū)挘麄冎髟椎牟季趾妥柚乖L問的內(nèi)容。導(dǎo)航應(yīng)該是方便，但不應(yīng)該競爭，關(guān)注的內(nèi)容。

的移動性

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

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

結(jié)論

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

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

本文作者來自北京傳誠信，轉(zhuǎn)載請注明出處：北京傳誠信（m.jzztb.org.cn）