十個有趣的網(wǎng)站導(dǎo)航設(shè)計

本文節(jié)選自http://designmodo.com/廊遍,原作者為Nataly Birch踪旷,本人僅作翻譯植捎。

簡單而有效的導(dǎo)航菜單對用戶體驗及搜索效率有著明顯的幫助衙解。今天,我們將演示一些讓人印象深刻導(dǎo)航方案焰枢,包括有趣的蚓峦,原創(chuàng)的,甚至十分超前的設(shè)計济锄。這些方案中暑椰,部分比你平常對導(dǎo)航的認識要復(fù)雜的多。

我們不只是出于設(shè)計的原創(chuàng)性才列出了這份清單荐绝。清單中的多數(shù)示例對技術(shù)有著大膽的使用一汽,使我們的清單更加有啟發(fā)性、教育性低滩。

JOVA

Jova // Home

Jova的導(dǎo)航菜單干凈召夹、純粹,并且在菜單結(jié)構(gòu)上也很恰當恕沫,感覺相當和諧监憎。

細而直的線條,網(wǎng)格布局昏兆,黑與白的配色枫虏,干脆而鋒利的排版,幾何風格的文本爬虱,這些導(dǎo)航元素的組合使網(wǎng)站給人以精致的感覺隶债,在淡化過的圖片背景下效果更為突出。

Beloesuhoe

注:翻譯者最愛跑筝,整個網(wǎng)站都炫酷到?jīng)]朋友死讹。

Beloesuhoe Production

這支團隊的設(shè)計巧妙并且獨具一格,在打開網(wǎng)站后你就會感受到強烈的視覺沖擊曲梗。乍一眼看上去赞警,首頁就只有一張背景圖片,但在菜單title旁像脈搏一樣跳動的紅點暗示著這一切并不是那么簡單虏两。準確的說愧旦,這些菜單不是無趣的平鋪直敘,而是本身就具有交互效果定罢,引導(dǎo)你點擊前往你所需要的頁面笤虫。

這項與實物圖片結(jié)合的設(shè)計其實帶有一絲虛擬現(xiàn)實的味道。

First Person

First Person

First Person創(chuàng)造了一個復(fù)雜而超現(xiàn)實的立方體,認真嚴謹?shù)耐敢曅Ч喈斢腥で眚牵⒎襟w還有白天和黑夜兩種狀態(tài)酬凳。但這種方式還是難以作為主導(dǎo)航來使用,吸引用戶的作用更加明顯遭庶。無論怎樣宁仔,這種使用動效技術(shù),展示一個物體深入細節(jié)的創(chuàng)意簡直可以用天馬行空來形容峦睡。

Mint Design Company

Mint Design Company : Melding Art With Technology

Mint Design有種讓人難以置信(譯者:為什么英文寫作好愛用incredible翎苫,別這么dramatic好嗎...)的設(shè)計。網(wǎng)站使用了手繪的插圖榨了,并且配合合理的動效拉队,讓該網(wǎng)站充滿了生氣。得益于是藝術(shù)項目的原因阻逮,所有元素,包括導(dǎo)航風格都相當統(tǒng)一秩彤。每個菜單項都有黑白和彩色兩種狀態(tài)叔扼,通過這種設(shè)定,狀態(tài)之間的不停切換帶來了活潑的感覺漫雷。

Vive Latino

Vive Latino 2015

這只團隊試圖用涂鴉的方式讓自己的首頁更加突出瓜富。干凈的單色方案、手繪排版設(shè)計降盹、動態(tài)的小人物与柑,這些元素不僅為了渲染一種節(jié)日氛圍,也使得菜單導(dǎo)航看起來非常動感蓄坏。

Pete Nottage

Pete Nottage

對色彩的放縱价捧、肆意的使用使得網(wǎng)站新奇而跳動。網(wǎng)頁上的城市由充滿生氣的扁平化元素組成涡戳,整個城市好像一個游樂場结蟋,而主導(dǎo)航也融入其中。

開發(fā)者不僅對諸如轎車和快艇的一些細節(jié)添加了動效渔彰,通過點擊還可以使一些元素以有趣的方式消失嵌屎。這些設(shè)計細節(jié)相當逗比又迷人。

Moira Young

Home

Moira Young自然又略帶夢幻的主題使網(wǎng)頁變得高雅而精致恍涂。導(dǎo)航不像平常一樣顯眼宝惰,每個鏈接都隱藏在大樹旁跳動的微光里。

Mathilde Jacon

www.mathildejacon.com/

Mathilde Jaco的首頁只有一個主體——一個可交互的再沧、圓形的菜單導(dǎo)航尼夺,出乎尋常而又有趣。最重要的是,每個不同想小分塊代表了不同的鏈接汞斧,通過組合的方式實現(xiàn)了風格獨特的導(dǎo)航設(shè)計夜郁。

Bancolombia

Bancolombia

和上訴部分例子很像,主頁在風景畫融入了動態(tài)元素粘勒。不過要特別提到的是該網(wǎng)頁需要flash竞端,這些亮點在H5的情況下將不復(fù)存。

Nat-Ant

Nat-Ant

對極簡主義有所體現(xiàn)的設(shè)計一向值得關(guān)注庙睡,該網(wǎng)站的設(shè)計和結(jié)構(gòu)恰是如此事富。整個網(wǎng)頁從整體看上去非常簡潔與純粹,并有大量的留白乘陪,僅有的一些元素也是精致的分散在頁面上统台。他們用一種不平庸的方式展現(xiàn)了菜單導(dǎo)航。

總結(jié):

非傳統(tǒng)的啡邑、不陳腐的導(dǎo)航方式總能引起用戶關(guān)注贱勃,激發(fā)他們的興趣。好的導(dǎo)航設(shè)計能夠使一個原本普通的頁面得到升華谤逼。

無論怎樣贵扰,知道什么時候提醒自己別再讓網(wǎng)頁變得喧鬧和擁擠是至關(guān)重要的,因為在多數(shù)情況下這對用戶非常關(guān)鍵流部,即使你的網(wǎng)頁看起來是多么有趣或不平常戚绕。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市枝冀,隨后出現(xiàn)的幾起案子舞丛,更是在濱河造成了極大的恐慌,老刑警劉巖果漾,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件球切,死亡現(xiàn)場離奇詭異,居然都是意外死亡绒障,警方通過查閱死者的電腦和手機欧聘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來端盆,“玉大人怀骤,你說我怎么就攤上這事』烂睿” “怎么了蒋伦?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長焚鹊。 經(jīng)常有香客問我痕届,道長韧献,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任研叫,我火速辦了婚禮锤窑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嚷炉。我一直安慰自己渊啰,他們只是感情好,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布申屹。 她就那樣靜靜地躺著绘证,像睡著了一般。 火紅的嫁衣襯著肌膚如雪哗讥。 梳的紋絲不亂的頭發(fā)上嚷那,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音杆煞,去河邊找鬼魏宽。 笑死,一個胖子當著我的面吹牛决乎,可吹牛的內(nèi)容都是我干的湖员。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼瑞驱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了窄坦?” 一聲冷哼從身側(cè)響起唤反,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎鸭津,沒想到半個月后彤侍,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡逆趋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年盏阶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片闻书。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡名斟,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出魄眉,到底是詐尸還是另有隱情砰盐,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布坑律,位于F島的核電站岩梳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜冀值,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一也物、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧列疗,春花似錦滑蚯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至竭讳,卻和暖如春创葡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背绢慢。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工灿渴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胰舆。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓骚露,卻偏偏與公主長得像,于是被迫代替她去往敵國和親缚窿。 傳聞我的和親對象是個殘疾皇子棘幸,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,111評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件倦零、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,102評論 4 62
  • 昨天和朋友聊天误续,彼此都說說現(xiàn)在的生活情況。她說除了上班扫茅,周六周日真是太無聊了蹋嵌。那我就問她是不是工作很累,是否還滿意...
    色光蜜糖閱讀 338評論 0 2
  • 昨天的朋友圈被楊絳先生仙逝的消息刷屏了,然而恋脚,如此一位錢鐘書眼中“最賢的妻腺办,最才的女”,跨越了兩個世紀糟描,終于洗凈了...
    冬眠的塵埃閱讀 460評論 0 0
  • 當落地時菇晃,表的指針在5點27分。隨著人流很快都聚集在安檢入口處蚓挤。但因為是團體邀請函磺送,一個組必須等齊人才可出關(guān)驻子,為此...
    涂勇閱讀 271評論 0 0