首頁?>?知識?資訊?>?良好的導(dǎo)航是網(wǎng)站設(shè)計有效的基石?>?正文

良好的導(dǎo)航是網(wǎng)站設(shè)計有效的基石

2011/4/19 0:00:00 · 稿源:傳誠信
良好的導(dǎo)航是網(wǎng)站設(shè)計有效的基石。 但在實(shí)踐中,它通常一個嚴(yán)峻的挑戰(zhàn)來與用戶有意義的,明確的方式來組織,安排和顯示的內(nèi)容,以及它的往往不是很容易找到一個有趣的視覺解決辦法。 像jQuery的廣泛適應(yīng)性的JavaScript庫正在越來越輕松添加各種動畫時尚導(dǎo)航設(shè)計。 例如,最近許多促銷網(wǎng)站豐富的用戶體驗(yàn)本質(zhì)上是單頁和網(wǎng)站具有更平滑的動畫效果數(shù)組用來做導(dǎo)航。

我們必須非常小心,小心,我們的設(shè)計中使用這些動態(tài)效果。 一個簡單的,平靜的導(dǎo)航時,通常比一的進(jìn)化,動態(tài)的用戶友好。 用戶要使用網(wǎng)站,不要被怪異,難可用導(dǎo)航百思不得其解。 但是,這并不是說,一個創(chuàng)造性的導(dǎo)航應(yīng)該不惜一切代價避免,在某些情況下,一個交互式菜單有一定道理,特別是當(dāng)它涉及到,如網(wǎng)上宣傳,投資組合或廣告促銷網(wǎng)站 - 在這些網(wǎng)站,交互式導(dǎo)航可以提供一些動力學(xué)乏味的,乏味的經(jīng)驗(yàn)。

下面我們介紹一些有趣的網(wǎng)站導(dǎo)航菜單的例子-它們不一定非常有用,但他們肯定是鼓舞人心,原來這樣的話你可以建立你的設(shè)計的想法后,介紹如下:使用它們,調(diào)整和改善他們在他們身上。 我們還討論了在這個崗位提出了實(shí)用性的技術(shù)潛力的問題每個。 在使用一個類似的技術(shù)在你的設(shè)計,請確保它適合你的設(shè)計中。 測試,驗(yàn)證和核實(shí),該技術(shù)將實(shí)際意義上讓你的網(wǎng)站。 這些技術(shù)方法謹(jǐn)慎。 讓我們來看看 一些有趣的方式呈現(xiàn)導(dǎo)航菜單 的網(wǎng)站內(nèi)容更小的宣傳頁和深刻的信息。

視差和滾動

視差是一個動畫效果,讓層移動響應(yīng)特定的觀點(diǎn)。 其效果是用來添加一個三維立體感的設(shè)計和制作的互動更加敏感和有趣。 最近,這項(xiàng)技術(shù)已被經(jīng)常用來制作動畫的背景圖像,在著名的 耐克公司更美好的世界 網(wǎng)站。

耐克公司更美好的世界

豐富的圖形和3D效果視差
Www Nikebetterworld Com-2011-3-11-20 18 20 in Showcase of Creative Navigation Menus: Good and Bad Examples

垂直視差的背景與影響滾動導(dǎo)航

在?耐克?頁,效果是明顯的,當(dāng)用戶滾動頁面垂直。?背景圖片看起來重疊,因?yàn)槿绻麄冊诩装迳隙逊诺幕脽羝?/span>?這種效果是特別強(qiáng)大的時候,你圈點(diǎn)擊該網(wǎng)站右側(cè)的面積。?注意水平和垂直虛線線,頁面顯示為您滾動。?他們生動地Connect網(wǎng)站部分,并幫助建立一個更加一致的用戶體驗(yàn)。

這里的一個缺點(diǎn)是導(dǎo)航的導(dǎo)航控制是非常微妙。?事實(shí)上,在這許多網(wǎng)站使用這種技術(shù),強(qiáng)勁的重點(diǎn)是富有的,這使得它更具挑戰(zhàn)性的一點(diǎn)實(shí)際的導(dǎo)航找到詳細(xì)的插圖。?在這個例子中,感知上的導(dǎo)航右側(cè)的圓點(diǎn),而不是當(dāng)成設(shè)計可能需要一段時間的一部分。?盡管如此,一個非常獨(dú)特的,令人難忘的設(shè)計。

羅索Carmilla

動畫水平視差

Www Rossocarmilla Com-2011-3-11-16 11 2 in Showcase of Creative Navigation Menus: Good and Bad Examples
水平滾動的視差動畫

羅索Carmilla?特點(diǎn)是滾動導(dǎo)航有趣的轉(zhuǎn)折和視差的組合效應(yīng)。?設(shè)計者采用了水平,而不是垂直方向,與在頂部經(jīng)典的導(dǎo)航菜單。?隨著對視覺元素的用戶停留,他們似乎移動,創(chuàng)造深度錯覺。?有限的色彩和原創(chuàng)插畫作品非常好,動畫,創(chuàng)造一個難忘的經(jīng)歷。?微妙的動畫可見只有在內(nèi)容區(qū)域用戶懸停。

這個想法是非常有趣的,執(zhí)行是做得相當(dāng)好。?然而,更大的字體大小和一節(jié)之間的平穩(wěn)過渡額外導(dǎo)航控制可以提高網(wǎng)站的整體可用性:水平滾動頁面的底部欄是不容易察覺,是不是很舒適的使用。

田納西州的滑雪道和小道探索

水平滾動導(dǎo)航,澄清。

Tntrailsandbyways Com-2011-3-11-16 15 37 in Showcase of Creative Navigation Menus: Good and Bad Examples
水平滾動的動畫,并澄清與視差導(dǎo)航

田納西州的滑雪道和小道探索?納入“線索查看器”為他們的用戶導(dǎo)航。?該網(wǎng)站的設(shè)計者使用水平視差的動畫滾動導(dǎo)航與一個同樣的想法的,但他們決定首先向用戶解釋如何使用該網(wǎng)站的導(dǎo)航。?通常,這不是一個導(dǎo)航注冊一個有效的,但它工作在這個例子非常好,尤其是整體設(shè)計顯得十分新穎,活潑和實(shí)驗(yàn)反正用戶。?在技術(shù)的案件,特別是不常見或創(chuàng)新的設(shè)計,該指令種可能是必要的模式,直到用戶理解范式的新的導(dǎo)航。

當(dāng)一個用戶點(diǎn)擊圖標(biāo)拖車,進(jìn)一步的相關(guān)詳細(xì)信息顯示在一個燈箱。?還要注意如何在“地圖”與拖車右側(cè)移動,當(dāng)用戶使用的主要“線索查看器”導(dǎo)航。?其他有趣的網(wǎng)站上的導(dǎo)航菜單是在頁面底部顯示一個,當(dāng)用戶選擇一個區(qū)域,中學(xué)選項(xiàng)在菜單顯示在右側(cè),這個選擇只要不改變用戶的鼠標(biāo)。?這種導(dǎo)航菜單也非常不錯,整體綜合網(wǎng)站的設(shè)計。

Siebennull

'混亂的辦公桌,符合視差

Www Siebennull Com-2011-3-11-16 18 33 in Showcase of Creative Navigation Menus: Good and Bad Examples
采取一種獨(dú)特的和原始的'凌亂辦公桌風(fēng)格

引人注目的是原始的,?Siebennull?功能a'cluttered辦公桌風(fēng)格的木制的主題,以及一個三維的感覺頁面提供現(xiàn)實(shí)的一部分陰影和其他圖形和全部分由視差效果,這是適用的。?整體效果感到非?;ヂ?lián),沒有太多的混亂。

一個使用動畫背景的陷阱,然而,就是背景不一定仍持有,而用戶正在查看詳細(xì)的東西無論是在模型箱,或一個簡單的放大中。這可以使之更難以閱讀大量文本塊。?該頁面不覺得有點(diǎn)難以集中,由于強(qiáng)大的視差效應(yīng)。?這可能是一個視差效應(yīng)的例子是使用過于強(qiáng)烈,從而惡化導(dǎo)航的目的。

評書

這是常見的做法是保持盡可能簡單和直觀的設(shè)計,使它非常方便用戶從一個網(wǎng)頁點(diǎn)擊到下一個,幾乎是盲目地- “不要讓用戶覺得”是規(guī)則。?但是,您可以參與網(wǎng)站的用戶,以及對你的,讓他們思考正在發(fā)生的事情在頁面中,涉及他們在更深的層次上的經(jīng)驗(yàn)。?例如,你可以采用講故事來?增加接觸?或互動的網(wǎng)站,告訴你一個故事,你的用戶希望的追求。

一個辦法讓訪問者參與感是把該網(wǎng)站的互動旅程。?當(dāng)用戶與頁面交互,他們可以學(xué)習(xí)的東西前進(jìn)的道路上,正由創(chuàng)意和網(wǎng)站的不確定性感到困惑。?這種技術(shù)可能是最適合的促銷目標(biāo)網(wǎng)頁,而不是內(nèi)容為主的網(wǎng)站。?如果一個有趣的故事和有趣的,也許非傳統(tǒng)的方式呈現(xiàn),這將捕捉用戶的注意力,encourange他們繼續(xù)通過您的網(wǎng)站的行動呼吁。?一個這種類型的航行幾個例子強(qiáng)調(diào)了以下的罰款。

本保鏢

敘述一個登陸頁面

Benthebodyguard Com-2011-3-11-16 27 0 in Showcase of Creative Navigation Menus: Good and Bad Examples
一個令人興奮的用戶體驗(yàn),創(chuàng)建用戶的參與和效果與設(shè)計

的設(shè)計者?本保鏢?到達(dá)網(wǎng)頁已選擇了一個非常難忘的主角比喻。?而不是提出一個描述即將到來的服務(wù)的通用頁“即將推出”,該網(wǎng)站有效地講述了一個故事。?該網(wǎng)頁的主要口號是“一個法國人保護(hù)你的秘密。?是的,認(rèn)真對待?!敖酉聛磉@句話,一個工具的描述,提出了?微妙的?。?神秘的字符顯示在后臺,但它很好地捕捉用戶的注意力和興趣。

實(shí)際的頁面有趣的部分發(fā)生在你慢慢地滾動頁面。?如果你留意插圖和閱讀所有的細(xì)節(jié)介紹,你可以看一個故事展開。?雖然敘述者走在街上,他給你一些解釋,但只夠提高你的興趣。?當(dāng)你不斷滾動,故事達(dá)到高潮,有突出的號召性動作按鈕結(jié)束。?請注意,反應(yīng)靈敏,設(shè)計插圖調(diào)整到用戶的視口。?從總體上看,它不是典型的導(dǎo)航,但它不是一個傳統(tǒng)的網(wǎng)站之一。?本保鏢是一個了不起的網(wǎng)站和講故事的作品相當(dāng)不錯,在這方面的宣傳作品。?這就是為什么該網(wǎng)站已收到這么多的關(guān)注時,它最初發(fā)布的原因。

Youzee

平滑,溫和的講故事

Youzee Com-2011-3-11-16 21 26 in Showcase of Creative Navigation Menus: Good and Bad Examples
平滑,溫和的視差動畫

Youzee?講故事的另一個例子是一個平滑,垂直單頁滾動導(dǎo)航的員工。?該網(wǎng)頁有頂部的主通航,但它沒有鏈接到單獨(dú)的頁面,而是這一小節(jié)中加載的。?事實(shí)上,每節(jié)片整齊,用動畫位,但不足以使用戶頭暈?zāi)垦!?/span>

仔細(xì)注意如何用講故事的設(shè)計師參與故事的用戶和參與有關(guān)的工具學(xué)習(xí)。?本對面的保鏢,在設(shè)計上并不過分依賴一個字符,而是使用比較熟悉,現(xiàn)有的比喻來展開故事。?在頂部的主要領(lǐng)域是不是說什么服務(wù)是有關(guān)的;用戶學(xué)習(xí)一路走來,它作為他滾動頁面。?還要注意如何使用好設(shè)計師“打開”比喻為在頁面頂部的按鈕,它看起來好像要被點(diǎn)擊并適當(dāng)?shù)鼗貞?yīng)一個點(diǎn)擊。?干得好,伙計們,干得不錯。

滾動導(dǎo)航

審判和真實(shí)的,滾動的導(dǎo)航是一個簡單而優(yōu)雅的方式來引導(dǎo)用戶通過您的內(nèi)容。?許多設(shè)計人員正在試驗(yàn)用滾動的單頁設(shè)計可容納在一張紙上,而不是分散在多個頁面,將它分裝在一個網(wǎng)站的全部信息導(dǎo)航。?可用性研究,以確定是否需要這種導(dǎo)航模式是一個典型的多有效,這將是第一個沒有驗(yàn)證其實(shí)用性錯將它應(yīng)用到環(huán)境。?使你的滾動導(dǎo)航獨(dú)特的一些方法如下。

波爾卡特

回的基本知識

Ipolecat Com-2011-3-11-16 28 16 in Showcase of Creative Navigation Menus: Good and Bad Examples
簡單固體滾動導(dǎo)航

波爾卡特?是一個滾動的導(dǎo)航網(wǎng)站還不錯的單頁的一個例子。?右上角導(dǎo)航上主要是極少,純文字差不多,但它運(yùn)作良好,因?yàn)樗⒉幌袼那逦捎?,使用戶感覺他們確切地知道他們在哪里。?獨(dú)特的插圖和吸引力。?當(dāng)你第一次訪問該頁面的,你可能會感到不知所措了你們許多投擲項(xiàng)目的信息,但這種感覺就會消失后不久,該網(wǎng)站更詳細(xì)的探討。

當(dāng)一個導(dǎo)航項(xiàng)目被點(diǎn)擊后,頁面順利滾動到頁面的選擇部分。?有趣的是,該網(wǎng)頁的各個部分都分得很清楚使用獨(dú)特的背景顏色,因此用戶總是知道究竟在何處一節(jié)開始,并在那里結(jié)束。?此外,每節(jié)生動地說明了,留下一個持久的和令人難忘的印象。它具有比同類網(wǎng)站當(dāng)中又有一個投資組合的網(wǎng)站更有趣,引人入勝的設(shè)計。

主要缺點(diǎn):乍一看,這不是很清楚哪些元素是可以點(diǎn)擊和如何導(dǎo)航工程,可在第一有點(diǎn)混亂。

Cornerd

簡單的垂直滾動導(dǎo)航

Cornerd Com-2011-3-11-16 29 28 in Showcase of Creative Navigation Menus: Good and Bad Examples
簡單的垂直滾動導(dǎo)航

很喜歡波爾卡特,?Cornerd?功能糖果大量的說明眼。?怪物的主題是工作非常好,細(xì)微的怪物眼球運(yùn)動創(chuàng)造一個溫馨,有趣的氛圍。?設(shè)計師丹尼斯錢德勒沒有考慮自己太當(dāng)回事,這正是在網(wǎng)站上調(diào)用移情和同情,從而更容易開展工作信任設(shè)計師的能力產(chǎn)生吸引力和吸引力。

在頁面的theop工作,而是一個固定的導(dǎo)航的部分可能真正有助于建立長期投資組合的部分更象一節(jié),尤其是在一個意義上的自由。?相反的是,用戶只提供了選擇遷回??。

好奇發(fā)電集團(tuán)

與一捻單頁滾動

Curiousgenerationgroup Com-2011-3-11-16 34 53 in Showcase of Creative Navigation Menus: Good and Bad Examples
與一捻單頁滾動

雖然清潔和有組織的,?好奇的發(fā)電集團(tuán)?感到有點(diǎn)意外其豐富多彩的形狀圓。?一個簡單的在頂部的靜態(tài)導(dǎo)航欄是微妙和播放以及與本網(wǎng)站的整體設(shè)計。?有時,一個固定的導(dǎo)航欄可以感覺到笨重和分心,但是這一個感覺,其透明度光線和通風(fēng)。?內(nèi)容定位的行之有效的滾動動畫的網(wǎng)站,并做了很好的工作,通過領(lǐng)先的眼睛。?請注意,所有單領(lǐng)域相互關(guān)聯(lián)的:每個區(qū)域,有一個側(cè)邊欄導(dǎo)航顯示進(jìn)一步的導(dǎo)航選項(xiàng)。?一個非常生動,豐富多彩,令人難忘的設(shè)計。

埃里克約翰遜

騎在摩托車

Ericj Se-2011-3-11-16 25 45 in Showcase of Creative Navigation Menus: Good and Bad Examples
騎摩托車,具有視差動畫

埃里克約翰遜?做了用戶對夫婦的事情,使探索為他的網(wǎng)站感興趣。?該網(wǎng)頁提供了導(dǎo)航微妙的線索就如何使用而且也是一個水平)滾動條(種內(nèi)出現(xiàn)的頁面的上下文。?這是一個小的差異,有一個滾動瀏覽器窗口的滾動條本身不是使用幾個像素以上的底部,但它提供幾乎足以區(qū)分的明確表示,用戶應(yīng)該單擊并拖動。

隨著用戶滾動頁面,他們需要尋求箭出并處理需要點(diǎn)擊導(dǎo)航顯示,以便進(jìn)行進(jìn)一步的設(shè)置的人。?Eric是玩的用戶,所以沒有辦法在一個非常獨(dú)特。?用戶不舒服的感覺它不過是提供了選項(xiàng),?查看擴(kuò)展與“正?!钡木W(wǎng)站?。?頁面上的圖像上可以改進(jìn)一下,使設(shè)計看上去有點(diǎn)現(xiàn)實(shí),但也許這是設(shè)計這個目的的方法上。?但是,這將是巨大的,如果用戶可以滾動(見頁頁,而不必使用集成滾動欄上底部的?水平滾動頁面使用鼠標(biāo)滾輪?)。

鬧鬼Cathouse

垂直滾動導(dǎo)航圖形與故事書

Haunted Cathouse in Showcase of Creative Navigation Menus: Good and Bad Examples
垂直滾動導(dǎo)航與插圖故事書

鬧鬼Cathouse?是一個又一個,很詳細(xì),很說明網(wǎng)頁,打破了該網(wǎng)頁板塊之間的流動插圖顯示了獨(dú)特的一頁。?當(dāng)用戶滾動垂直,他可以看到當(dāng)前節(jié),跳轉(zhuǎn)到上一個或下一個。

就在右下角的小貓頭鷹為您服務(wù)點(diǎn)擊顯示在導(dǎo)航欄幻燈片不管你是在網(wǎng)站上,一個較好的指標(biāo)但游客可節(jié)省一些時間。?雖然一些用戶可能會高興地開始了他們的鼠標(biāo)滾動才能到內(nèi)容,在此特別設(shè)計的,它可能是有用的,提供多種選擇。?頂級導(dǎo)航欄還提供了一種方法來突出一種什么樣的內(nèi)容用戶可以期望找到以下。

山姆網(wǎng)站

在水平滾動水平滾動

Www Samweb Com Br-2011-3-11-16 36 42 in Showcase of Creative Navigation Menus: Good and Bad Examples
在橫向水平滾動滾動嵌套

山姆Web的?水平滾動板,而一個相當(dāng)經(jīng)典的導(dǎo)航模 ??型,都是非常干凈執(zhí)行。?這也不錯,有些路段幻燈片水平,而聯(lián)系人鏈接滾動至底部,因?yàn)樵撛厥悄壳叭颉?/span>

有趣的是這里的嵌套組合頁面上的水平滾動條。?由于滾動在面積為主要內(nèi)容的方向相同,但并非由相同的導(dǎo)航控制,它具有一些潛在的來迷惑用戶。?左,右箭頭是視覺的東西是不同的指標(biāo),這個部分,但它也可能會受益于一個滾輪稍有不同的,或者使用一些其他的交互瀏覽該內(nèi)容。?這是一個棘手的事情,找到一個漂亮的方式來增加導(dǎo)航subcontent一些互動導(dǎo)航排序已經(jīng)在里面。

丹尼的餐廳

太多太多東西是對你不好

Dennys in Showcase of Creative Navigation Menus: Good and Bad Examples
水平和垂直滾動組合

設(shè)計師的?丹尼餐館?可能超越搜索內(nèi)容時,一種方式,以容納了許多。?滾動組合的橫向和縱向比較迷惑不僅僅是幫忙。?沒有家的小屏幕上的提示,用戶甚至可能錯過的內(nèi)容只有通過額外到達(dá)垂直滾動。?其他內(nèi)容是隱藏在滑塊,它似乎很容易迷路。?除了 ??是混亂的,該網(wǎng)站是不是很友好的移動用戶,希望找到一個令或去餐廳的。?該網(wǎng)站上創(chuàng)建一個感覺可能“流體內(nèi)容”這是一個有點(diǎn)難以把握和焦點(diǎn),因?yàn)橐磺姓?,一切是互動的,一切正在發(fā)生變化。?該設(shè)計可以用多一點(diǎn)平靜。

實(shí)驗(yàn)導(dǎo)航菜單

看來,設(shè)計師往往感到經(jīng)典導(dǎo)航模式和發(fā)明新的方法或航行只需要添加一個新的轉(zhuǎn)折方便的設(shè)計模式深刻的印象一點(diǎn)。?這些網(wǎng)站的特色低于目前的一些有趣的方式導(dǎo)航。

兇猛季刊

非傳統(tǒng)的標(biāo)簽越多

Fe Rocious Com-2011-3-12-12 53 41 in Showcase of Creative Navigation Menus: Good and Bad Examples
有趣的插圖

兇猛季度的?網(wǎng)站在標(biāo)簽的上半部分是一個普通的小出來的。?單事實(shí)上,他們以不同的方式呈現(xiàn),創(chuàng)造一個深度錯覺,使設(shè)計突出了一下。?一個很好的例子更有趣的一個小細(xì)節(jié),如何能作出否則很引人注意的設(shè)計看起來有點(diǎn)。

該死Alors

彈出最佳躁狂癥在其?[警告:?一五秒鐘可能導(dǎo)致頭痛!?]

Zutalorsinc Com-2011-3-11-16 42 27 in Showcase of Creative Navigation Menus: Good and Bad Examples
前面和中心標(biāo)簽導(dǎo)航

總體而言,?承擔(dān)浙江工業(yè)ALORS!?是非常前衛(wèi),非常阿旺非傳統(tǒng)。?大前沿和中心信函是唯一的網(wǎng)頁內(nèi)容,他們導(dǎo)航。?每個字母彈出打開的網(wǎng)頁內(nèi)容安排一系列徹底隨后彈出的UPS。

雖然這種方法是獨(dú)一無二的,必將脫穎而出,它也將阻止普通用戶。?短,目標(biāo)網(wǎng)頁上的簡單的聲明是不是很豐富,使用戶感到困惑。?在彈出的二級頁面可能會適得其反,但:如果用戶有很多的窗戶打開,在新開的并不一定是主要的焦點(diǎn),這可能使設(shè)計混亂。?雖然它有可能那是擺在首位設(shè)計師的意圖。?一個很奇怪,嘈雜,非常令人難忘的設(shè)計。?請不要在家里嘗試。

方法設(shè)計實(shí)驗(yàn)室

截至最新消息

Method-Design-Lab in Showcase of Creative Navigation Menus: Good and Bad Examples
圖形均衡器選擇

方法設(shè)計實(shí)驗(yàn)室的?菜單跟隨他們的飼料是獨(dú)一無二的。?繼其網(wǎng)站上的活動是由簡單的圖形均衡器一樣的角落,在歷史上的右手。?在一個小時的點(diǎn)擊帶來的所有職位,媒體發(fā)布和小時鳴叫過去。?區(qū)分不同類型之間很容易,因?yàn)槊總€被分配一個特定的顏色。?新聞點(diǎn)擊一個泡沫持久性有機(jī)污染物之一,打開一個消息窗口與實(shí)際。?無論是理念和實(shí)施是非常清爽,不會過度緊張的旅客耐心。

Web標(biāo)準(zhǔn)夏爾巴

通過內(nèi)容跳繩

The-Web-Standards-Sherpa in Showcase of Creative Navigation Menus: Good and Bad Examples
簡潔易用 - 只要內(nèi)容是有限的

Web標(biāo)準(zhǔn)夏爾巴人?基本上沒有出現(xiàn)太大的導(dǎo)航。?提出了基于內(nèi)容的幻燈片,可以跳過通過。?箭頭清楚地表明了之前和之后的文章。?雖然它仍然是通過文章管理跳過不到十個,這個導(dǎo)航型是沒有更大的使用一旦超過二十篇的看法注冊。?該功能鏈接發(fā)表的所有文章的列表,以及搜索借此照顧。?一個更深層次的網(wǎng)站進(jìn)入,水平導(dǎo)航僅包含三個選項(xiàng)清楚他們的下落,大約不留黑暗中的一個。

BonLook

畫報下拉菜單

BonLook1 in Showcase of Creative Navigation Menus: Good and Bad Examples
提供選擇的形狀使用象形圖

BonLook?功能下拉菜單很好的例子說明了一個清潔,簡單的輟學(xué)。?選擇品牌眼鏡的形狀,而不是使產(chǎn)品目錄瀏覽器更容易任何客戶的。?一般而言,使用上下文菜單中的圖標(biāo),幫助客戶簡化方向找到他們所期待的。

計算機(jī)智能設(shè)計

右側(cè)動態(tài)導(dǎo)航標(biāo)簽

Design-Intellection2 in Showcase of Creative Navigation Menus: Good and Bad Examples
右側(cè)導(dǎo)航改變其外觀

球員在該?設(shè)計計算機(jī)智能?目前在其投資組合的右側(cè)標(biāo)簽導(dǎo)航網(wǎng)站與風(fēng)格。?有趣的是,導(dǎo)航圖標(biāo)滾動時更改外觀到各自的范圍內(nèi)部分小頁面,取代原來的菜單與文字。?一個圖標(biāo)點(diǎn)擊帶來的用戶返回到每個部分的頂部,給他們一個快速提示該圖標(biāo)的風(fēng)格是一個簡單的內(nèi)容部分小版本的主菜單,子菜單不具體的。

一般來說一個很好的和直觀的菜單風(fēng)格值得適應(yīng)和容易地擴(kuò)展到涵蓋內(nèi)容小節(jié)。

伯納特Fortet Unanue

一個創(chuàng)意和有趣的方式介紹你的工作

Bernat-Fortet in Showcase of Creative Navigation Menus: Good and Bad Examples
清晰明確的菜單設(shè)計和有趣

Fortet?功能的按鈕圓形的導(dǎo)航22類工作的形式。?完整菜單再次出現(xiàn)在頁末的每一個,使網(wǎng)站易于瀏覽。?即使是很密集的空間,用戶已經(jīng)習(xí)慣了它的外觀并確認(rèn)訪問類別。?另一個例子說明一個明確的視覺作出積極貢獻(xiàn)的外觀和感覺的網(wǎng)站。

尕,尕

與翻車職稱直觀,清晰圖標(biāo)

LegaLega in Showcase of Creative Navigation Menus: Good and Bad Examples
直截了當(dāng)導(dǎo)航

在?尕-尕?是結(jié)構(gòu)簡單和流暢。?菜單只包括七類,每間均設(shè)有一個單獨(dú)的層。?只有減:水平滾動條很容易被誤認(rèn)為是布局的一部分,而不是被確認(rèn)為滾輪。?添加鼠標(biāo)經(jīng)過效果可能會解決這個問題。?一個簡單的導(dǎo)航網(wǎng)站與清潔,容易-你肯定不會迷路了。

Bluecadet互動

清潔子

Bluecadet in Showcase of Creative Navigation Menus: Good and Bad Examples
讓用戶選擇的類別

Bluecadet?樹立了一個子菜單的例子在實(shí)施為主的干凈版本的圖形。?該設(shè)計采用了側(cè)滑塊的權(quán)利;為用戶瀏覽滑塊的項(xiàng)目,背景圖像的變化,以及。?一旦導(dǎo)航項(xiàng)在選定后,頁面顯示上一個和下一個項(xiàng)目,以及提供了一個鏈接,回到主菜單。?此外,用戶可以親自檢查所顯示的類別。

達(dá)尼洛Iurlaro

創(chuàng)意動畫效果

Www Daniloiurlaro Com-2011-3-11-16 47 111 in Showcase of Creative Navigation Menus: Good and Bad Examples
創(chuàng)意動畫效果

達(dá)尼洛Iurlaro?具有創(chuàng)造性地使用動畫效果的滾動,當(dāng)然它在人群中脫穎而出。?然而,文本從跳下只要點(diǎn)擊頂部導(dǎo)航項(xiàng)目是真正惱人的分心。?首先,它給人的印象是,這個文本是網(wǎng)頁的標(biāo)題,不只是一個過渡性的圖形,這實(shí)際上并非如此。?讓用戶手動向下滾動,以查看大航區(qū)的實(shí)際內(nèi)容是這樣一個相當(dāng)大的挑戰(zhàn)。

當(dāng)使用新的導(dǎo)航技術(shù),許多用戶可能不熟悉,它是真正重要的是利用清晰的標(biāo)簽,以幫助他們找到他們的方式通過該網(wǎng)站。

幻想制圖

的導(dǎo)航地圖

Www Fantasy-cartography Com-2011-3-11-17 0 36 in Showcase of Creative Navigation Menus: Good and Bad Examples
的導(dǎo)航地圖

幻想制圖?是一個網(wǎng)站展示的地圖導(dǎo)航,本身就是仿照地圖。?而內(nèi)容部分基本上都是采取滾動導(dǎo)航,組織和選擇布局的導(dǎo)航是不尋常。?該網(wǎng)站還插圖充滿'軟的影響,這與配合得很好。

清除視覺指示使用鏈接相關(guān)的對應(yīng)點(diǎn)的顯示的內(nèi)容與活動標(biāo)簽。?標(biāo)簽是在非典型導(dǎo)航局勢的關(guān)鍵。

C&C的咖啡公司

迷人的動畫

Www Candccoffee Com-2011-3-11-16 43 13 in Showcase of Creative Navigation Menus: Good and Bad Examples
簡單,有趣,更可以增加動畫從它分心導(dǎo)航

導(dǎo)航上的?C&C的咖啡公司?是一個導(dǎo)航的例子就是最小的動畫,簡單,雖然是動態(tài)的,并不強(qiáng)制用戶本身上。?動態(tài)導(dǎo)航元素很好地適應(yīng)到頁面的整體設(shè)計,其中還包含其他的“手寫”分子,給啤酒廠一個更個性化,友好的觸摸。?不過,有一次看到了動畫,可足以使一些游客。

面包屑

一氧化氮合酶

上下文敏感的面包屑

Nos-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
互動式面包屑

在這個例子中的導(dǎo)航頂層很簡單,但很聰明。?NOS的?顯示子類別的被點(diǎn)擊右側(cè)每個頂層類時,面包屑,幾乎像一個。?這是一個非常有趣的需要和良好的方式來處理網(wǎng)站與很多類別的大而重內(nèi)容。?它很適合在博客格式,其中一類很多不同的新可能是人來人往不斷。

MDM的銀行

持續(xù)面包屑

Mdm-bank-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
持續(xù)面包屑

銀行采用了經(jīng)典的MDM面包屑式導(dǎo)航。?但是,它不僅保留了在用戶已使他們可以隨時返回任何給定的點(diǎn)容易,但在網(wǎng)站上點(diǎn)擊地圖標(biāo)簽,方便追蹤顯示整個網(wǎng)站的導(dǎo)航精確完整的互動式地圖。

滑動節(jié)

滑動部分是一個偉大的方式來顯示在更小空間的內(nèi)容很多。?你有具體的內(nèi)容集中到該塊一時間,這可能是有用的,如果你想以目前的某些信息,并試圖不分散在同一時間與其他信息用戶的用戶優(yōu)勢。?下面是一些例子,有效的實(shí)現(xiàn)。

方向

手風(fēng)琴式的導(dǎo)航鏈接

Directions Com-2011-3-11-16 45 5 in Showcase of Creative Navigation Menus: Good and Bad Examples
手風(fēng)琴式的導(dǎo)航鏈接

方向?是一個很好的例子滑動部分執(zhí)行的。?有很多內(nèi)容在這一個頁面,但它并不感到不知所措,因?yàn)椴皇撬械氖窃谕粫r間顯示。?這是一個很好的方法很多鏈接的網(wǎng)站的,或這只是深。

二級導(dǎo)航延續(xù)到二級頁面,這樣用戶就不會丟失。?一個建議,但是,這是,如果導(dǎo)航模式會以某種方式重新出現(xiàn)在二級頁面以及導(dǎo)航,而不是經(jīng)典。?這或許有助于使網(wǎng)站上出現(xiàn)了一點(diǎn)更為突出和一致的。

Coexhibitions

看到內(nèi)容展開

Co-Exhibitions in Showcase of Creative Navigation Menus: Good and Bad Examples
日歷內(nèi)容展開

Coexhibitions?基本上是一個大的滑動菜單。?點(diǎn)擊標(biāo)題上的信息顯示陳列室過去和當(dāng)前的事件發(fā)生。?當(dāng)然,一個不錯的選擇有限的內(nèi)容與一個網(wǎng)站,即使一個簡單的方法回到頂端是不提供。?隱藏在滑塊的內(nèi)容很舒服。?在這種情況下,它有助于創(chuàng)造一個地點(diǎn)在日歷事件發(fā)生。

Bankwest的

多層次拓展

Www Bankwest Com Au-2011-3-18-15 52 2 in Showcase of Creative Navigation Menus: Good and Bad Examples
多層次拓展

Bankwest的?不使用滑動動畫,但它是一個很好的例子導(dǎo)航系統(tǒng)的多層次的。?他們有一個左對齊的頂級導(dǎo)航,擴(kuò)大了第一水平垂直,然后在用戶導(dǎo)航更深。?這又是一個沉重的網(wǎng)站有一個很深的戰(zhàn)略,內(nèi)容。?雖然它運(yùn)行得很好,因?yàn)樗且粋€小JavaScript交互使用 ??戶能夠仔細(xì)閱讀更深層次的導(dǎo)航能夠輕松一些,使其更加有效。?公告內(nèi)容區(qū)域的面包屑導(dǎo)航頂部的:它支持導(dǎo)航和幫助用戶跟蹤整個網(wǎng)站的路徑。

埃利奧特麻風(fēng)病人

滑動字幕盒

Viteungraphiste Com-2011-3-11-16 45 58 in Showcase of Creative Navigation Menus: Good and Bad Examples
滑動字幕盒

埃利奧特麻風(fēng)病人?使用一個交互式滑動盒有趣的電網(wǎng)布局與。?他們快速載入和網(wǎng)站易于瀏覽。?該網(wǎng)頁主要是簡單的信息被上就很難迷路,因?yàn)榭倳屑^遵循和點(diǎn)擊。?這些顏色是相當(dāng)活力和內(nèi)容很好地組織。

每個項(xiàng)目的二級頁面也做得好。?在左邊的大箭頭上是唯一的導(dǎo)航,每個出現(xiàn)在,但由于主要的導(dǎo)航??在頭版,但仍然完全符合其功能。

全球人道主義援??助

隱藏的部分幫助處理大量的內(nèi)容

Www Globalhumanitarianassistance Org-2011-3-11-16 54 52 in Showcase of Creative Navigation Menus: Good and Bad Examples
隱藏的部分幫助處理大量的內(nèi)容

對一的第一件事情一個用戶可能會注意到?全球人道主義援助?是明亮的黃色左側(cè)滑出菜單。?它巧妙地執(zhí)行,但因?yàn)樗衅渌囟际屈S色的,也并不真正跳轉(zhuǎn)到眼睛。?該網(wǎng)站是非常數(shù)據(jù)沉重,旨在提供酒吧訪問者進(jìn)入許多報告和個案研究,這是黃色的所有隱藏的背后,總體而言,這是一個非常整潔和簡單的方法來隱藏輔助導(dǎo)航,直到它的需要(?上下文敏感導(dǎo)航?)。?一個有趣的想法:如滑出式面板一般都是一個沉重的網(wǎng)站內(nèi)容的好方法,以使它們隱藏的東西,而全球范圍內(nèi)提供。?在此特定情況下,二級導(dǎo)航面板可能是一個厚一點(diǎn),以吸引用戶的焦點(diǎn)。

新西蘭創(chuàng)意

以少量的空間很多的信息

Creative-nz-website-screenshot in Showcase of Creative Navigation Menus: Good and Bad Examples
以少量的空間很多的信息

創(chuàng)意新西蘭?擁有一個“超級下拉菜單”。?這是一個個很好的例子使用的導(dǎo)航,使良好的空間聯(lián)系表,高級搜索等)以及區(qū)塊的沿底部加入像是典型的導(dǎo)航(。?如果你要使用這樣的菜單,這真的值得花時間認(rèn)真研究的內(nèi)容,并確保你有效地選擇子菜單內(nèi)容,每個人都可以包括在。

此外,注意主網(wǎng)頁上的分類滑塊。?通過使類別的使用,它實(shí)際上提出了一次多個幻燈片。

結(jié)論

有些最后兩點(diǎn)要記住工作時,創(chuàng)造性的導(dǎo)航:

  • 使用適當(dāng)?shù)恼f明,以澄清?在必要時。?并不是每一個從事導(dǎo)航模 ??式是不言自明,有時一點(diǎn)點(diǎn)解釋或介紹的方法可能有更大的幫助,網(wǎng)站的用戶。?不要夸大,不要過分復(fù)雜的事情,但。?這些經(jīng)驗(yàn)應(yīng)該是順利和簡單。
  • 一致性是至關(guān)重要的?。?甚至完全阿旺前衛(wèi)的導(dǎo)航可以正常工作的關(guān)鍵因素時,總是訪問,使用戶有一個永久的概述,以及一個浮標(biāo)樣的生活。
  • 使用明確的標(biāo)簽?。?簡單的圖像并不總是足夠的線索,引導(dǎo)用戶和動畫元素的線索可能不被視為航行。
  • 考慮告訴了一個故事?。?你可以采用講故事,增加與社會參與互動的追求或在您的網(wǎng)站通過講述了一個故事,你的用戶會喜歡。?這種技術(shù)可能是最適合的促銷目標(biāo)網(wǎng)頁,而不是內(nèi)容為主的網(wǎng)站。


    選擇北京網(wǎng)站建設(shè)公司-傳誠信,優(yōu)質(zhì)服務(wù),絕對不容錯過 !

    1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證

    ?(配送雙線獨(dú)立ip空間,國際A級BGP機(jī)房,99.5% 的主機(jī)在線時間)

    2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計水平,更放心

    3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。

    -----------------------------------------------------------------------------------------------------

    我們的與眾不同之處:

    ????? 免費(fèi)網(wǎng)絡(luò)營銷顧問:我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營銷顧問服務(wù),您需要了解關(guān)于如何開展網(wǎng)絡(luò)營銷,電子商務(wù),網(wǎng)站設(shè)計等的事宜,歡迎隨時聯(lián)系我們。

    ???? ?seo友好的網(wǎng)站管理系統(tǒng):除了優(yōu)質(zhì)的網(wǎng)站空間,網(wǎng)站管理系統(tǒng),和網(wǎng)站設(shè)計外,我們的網(wǎng)站管理系統(tǒng)更是seo友好的,包括:自定義欄目名,Google Sitemap自動生成,靜態(tài)頁面生成等等,讓您的網(wǎng)站。

    ???? ?免費(fèi)網(wǎng)絡(luò)營銷培訓(xùn):如何更好的投放網(wǎng)絡(luò)廣告,如何提高網(wǎng)絡(luò)廣告的投資回報,如何發(fā)帖子,
    ???? ?如何優(yōu)化網(wǎng)站,
    我們有豐富的經(jīng)驗(yàn)開放給您!祝君成功!

    聯(lián)系我們:010-62199213?? 62122723-808?? 賈先生
    傳誠信北京網(wǎng)站建設(shè)網(wǎng)站:
    www.94883.cn?點(diǎn)擊查看經(jīng)典網(wǎng)站案例!

  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354