每個(gè)網(wǎng)站有屬于自己的個(gè)性——它能反射出背后的個(gè)人或者團(tuán)隊(duì)。如何做到讓自己的網(wǎng)站顯得與眾不同、卓爾不群，讓用戶流連忘返或者立馬下單？
為了讓你的網(wǎng)站脫穎而出，不僅需要有豐富的高質(zhì)量?jī)?nèi)容，同時(shí)也要兼顧網(wǎng)站的創(chuàng)新性和功能性。從用戶的角度出發(fā)好好想一下，怎樣讓你的網(wǎng)站用戶體驗(yàn)更友好？簡(jiǎn)單的搜索功能是需要的，或者你也可以精心設(shè)計(jì)一下網(wǎng)站的導(dǎo)航。同時(shí)，要注意保持整個(gè)網(wǎng)站設(shè)計(jì)語言的一致性。在這個(gè)html5狂潮涌進(jìn)的時(shí)代，誕生了很多優(yōu)秀的網(wǎng)頁設(shè)計(jì)作品，他們都有卓越的導(dǎo)航設(shè)計(jì)，接下來整理的這些網(wǎng)站將喚起你關(guān)于導(dǎo)航的極限創(chuàng)意，快來親自體驗(yàn)下吧！
Toybox
在需要的時(shí)候?qū)Ш綑趹?yīng)該一直在那里，而當(dāng)用戶想要專注于某個(gè)特定的任務(wù)時(shí)，導(dǎo)航欄則應(yīng)該優(yōu)雅的隱藏起來。比如說，在設(shè)計(jì)一個(gè)網(wǎng)上商店的出納頁面時(shí)，網(wǎng)站的導(dǎo)航應(yīng)該可以隨時(shí)都易于使用，但同時(shí)也要注意突出像出納表單和按鈕控件之類的鮮明功能。Toybox的導(dǎo)航設(shè)計(jì)就恰好滿足了這些。
如下圖示，這個(gè)側(cè)邊導(dǎo)航給人的感覺就像是你在窺視頁面背后或者是掀開了一個(gè)玩具盒的蓋子看看里面到底有些什么。這個(gè)側(cè)邊導(dǎo)航非常方便使用，鼠標(biāo)懸停在瀏覽器左側(cè)即可出現(xiàn)，主體部分即時(shí)出現(xiàn)的旋轉(zhuǎn)效果也很帶感，可以很好的引導(dǎo)用戶的注意力。將導(dǎo)航隱藏起來同時(shí)也實(shí)現(xiàn)了界面的簡(jiǎn)潔，使網(wǎng)站的瀏覽體驗(yàn)非常的愉悅，因?yàn)榫W(wǎng)站并沒有留下太多無用的信息去分散用戶的注意力。
至于其他你想知道的信息，比如說Toybox公司的主營(yíng)業(yè)務(wù)和地址，可以在頂部的一個(gè)直接呈現(xiàn)的導(dǎo)航欄里找到。首頁的磁貼鼠標(biāo)hover效果也非常的有趣，當(dāng)鼠標(biāo)懸停于某個(gè)項(xiàng)目的縮略圖時(shí)，其余的項(xiàng)目縮略圖都后退變暗并且產(chǎn)生景深的效果。
Olivier Bossel
交互設(shè)計(jì)師Olivier Bossel的個(gè)人作品博客非常有趣。該網(wǎng)站的導(dǎo)航元素在鼠標(biāo)hover狀態(tài)下會(huì)產(chǎn)生像素爆炸式的效果（譯者注：火狐瀏覽器測(cè)試通過，chrome測(cè)試無效果）。這個(gè)效果相對(duì)于網(wǎng)站其余的簡(jiǎn)潔設(shè)計(jì)來說非常有動(dòng)感，由此產(chǎn)生強(qiáng)烈的對(duì)比效果。作為一個(gè)視覺元素它非常有效的促進(jìn)了用戶繼續(xù)閱讀該網(wǎng)站，統(tǒng)一的視覺語言也彰顯了品牌的特點(diǎn)。
<p style="white-space:normal;text-transform:none;word-spacing:0px;color:#525252;font:1.2em/1.8 Tahoma, Verdana, 宋體;margin:20px 0px;orphans:2;widows:2;letter-spacing:normal;background-color:#ffffff;text-indent:0px;-webkit-text-size-ad
