想劍走偏鋒?試試這6種實(shí)驗(yàn)性的網(wǎng)頁(yè)導(dǎo)航模式
雖然絕大多數(shù)的設(shè)計(jì)都遵循設(shè)計(jì)規(guī)則和用戶(hù)的使用風(fēng)俗,但是標(biāo)新立異的設(shè)計(jì)仍然特別很是有場(chǎng)。獨(dú)特的設(shè)計(jì)更容易讓人難忘,這一點(diǎn)是毋庸置疑的。在網(wǎng)頁(yè)的導(dǎo)航欄設(shè)計(jì)上,也是如此。隨著越來(lái)越多的網(wǎng)頁(yè)開(kāi)始采用加粗的非襯線字體置于網(wǎng)頁(yè)頂部作為導(dǎo)航,很多有想法的設(shè)計(jì)師開(kāi)始故意識(shí)的打破這一規(guī)律,別出機(jī)杼,采用不一樣的導(dǎo)航模式。
當(dāng)然,假如你的網(wǎng)站用戶(hù)量大,并且必要盡量降低用戶(hù)的使用門(mén)檻,遵循常規(guī)的設(shè)計(jì)更合適。假如你的網(wǎng)站是更加偏向?qū)嶒?yàn)性的小網(wǎng)站,風(fēng)趣而好玩的導(dǎo)航模式,反而更適宜于用戶(hù)探索。不同的導(dǎo)航模式對(duì)于網(wǎng)站的影響不盡雷同,針對(duì)不同的內(nèi)容、不同的用戶(hù),你必要細(xì)心遴選導(dǎo)航模式。
實(shí)驗(yàn)性的導(dǎo)航并不具備泛用性,但是假如你在尋求別具一格的設(shè)計(jì),那么下面這些獨(dú)特的導(dǎo)航設(shè)計(jì)應(yīng)該能激發(fā)你的靈感。
側(cè)邊欄導(dǎo)航
側(cè)邊欄導(dǎo)航的設(shè)計(jì)多種多樣,它可以是靜態(tài)的也可以是動(dòng)態(tài)的,寬度可大可小,幾乎可以隨心所欲地進(jìn)行設(shè)置。
但是假如你細(xì)心審視會(huì)發(fā)現(xiàn),它不僅僅是單純的將本來(lái)的頂部導(dǎo)航旋轉(zhuǎn) 90 度放到側(cè)面就好了,對(duì)于正常的上下滾動(dòng)的頁(yè)面而言,常駐的側(cè)邊欄導(dǎo)航意味著整個(gè)頁(yè)面其他部分的長(zhǎng)寬比和以往截然不同了。
所以,不論側(cè)邊欄導(dǎo)航的寬窄如何,你都必要重新審視,尤其是它在不同尺寸、比例的屏幕下的表現(xiàn)結(jié)果,并且進(jìn)行合理的重設(shè)計(jì)。同時(shí),導(dǎo)航中的筆墨假如太長(zhǎng),在側(cè)邊欄中還存在展示上的題目,那么你要怎么解決呢?
必要考慮的題目特別很是之多。
最優(yōu)的導(dǎo)航設(shè)計(jì)通常都不會(huì)使用太長(zhǎng)的詞匯,并且占有的空間也相對(duì)固定。導(dǎo)航項(xiàng)目最好不要太多,假如導(dǎo)航欄必要滾動(dòng)欣賞那就太過(guò)了。上面Sanctum 的案例就做的充足簡(jiǎn)單干凈,當(dāng)用戶(hù)滾動(dòng)欣賞的時(shí)候,導(dǎo)航會(huì)停頓在對(duì)應(yīng)的位置,并且隨著背景而改變色彩。
這個(gè)案例的良好之處在于,它的導(dǎo)航和背景融為一體,它的設(shè)計(jì)會(huì)促使用戶(hù)先查看圖標(biāo)和名稱(chēng),再縱向滾動(dòng)頁(yè)面欣賞。
隱蔽和彈出式導(dǎo)航
漢堡圖標(biāo)的流行讓隱蔽式導(dǎo)航大行其道,而隱蔽式的設(shè)計(jì)所帶來(lái)的另外一個(gè)效果就是彈出式導(dǎo)航。
在桌面端上,隱蔽/彈出式導(dǎo)航很少會(huì)占有整個(gè)屏幕,而在移動(dòng)端設(shè)備上,為了保證可用性,不少的彈出菜單會(huì)選擇做成全屏式的。
隱蔽/彈出式導(dǎo)航嚴(yán)酷意義上算不上是特別很是實(shí)驗(yàn)性的設(shè)計(jì),但是它可以玩的特別很是多樣。對(duì)于一部分用戶(hù)而言,漢堡圖標(biāo)并不是那么直觀,也不夠認(rèn)識(shí)。設(shè)計(jì)師可以在彈出結(jié)果、樣式和位置甚至圖標(biāo)樣式上,多花點(diǎn)心思,玩出花頭。
上面 Caava Design 這個(gè)網(wǎng)站的彈出式導(dǎo)航特別很是風(fēng)趣。在絕大多數(shù)的設(shè)計(jì)師還在使用扁平而簡(jiǎn)單的彈出樣式的時(shí)候,他們走的更遠(yuǎn)。這種設(shè)計(jì)讓用戶(hù)更容易細(xì)致到關(guān)鍵的信息,指導(dǎo)用戶(hù)欣賞信息。
水平滾動(dòng)
當(dāng)你首次欣賞一個(gè)必要水平滾動(dòng)的網(wǎng)站的時(shí)候,體驗(yàn)會(huì)特別很是的新鮮。首先它的物理和視覺(jué)活動(dòng)方向和常規(guī)的縱向滾動(dòng)不同,而且當(dāng)你使用鼠標(biāo)滾輪滾動(dòng)的時(shí)候,這種交互的錯(cuò)位感會(huì)極其強(qiáng)烈。
想要讓水平滾動(dòng)式欣賞更加天然,設(shè)計(jì)師必要加入視覺(jué)線索來(lái)幫助用戶(hù)導(dǎo)航,強(qiáng)化欣賞邏輯和體驗(yàn)。使用箭頭和定位式導(dǎo)航結(jié)果會(huì)特別很是不錯(cuò)。
上方 Norgram 這個(gè)網(wǎng)站就使用了部分圖片作為視覺(jué)指導(dǎo),向用戶(hù)暗示屏幕側(cè)面還有更多的內(nèi)容可供欣賞。視覺(jué)線索的存在,使得內(nèi)容結(jié)構(gòu)和滾動(dòng)方向顯得同一而天然。
無(wú)導(dǎo)航模式
有些網(wǎng)站擯棄了導(dǎo)航這個(gè)模塊,而是選擇將所有的內(nèi)容平鋪在整個(gè)頁(yè)面之上。這種設(shè)計(jì)其實(shí)挺棘手的,由于如何頁(yè)面所承載的內(nèi)容過(guò)于復(fù)雜的話,這種模式可能會(huì)讓用戶(hù)覺(jué)得無(wú)所適從,難以動(dòng)手。
無(wú)導(dǎo)航模式其實(shí)最適合一些小型的、目的直接而簡(jiǎn)單的網(wǎng)站,比如一些“Comming Soon”的網(wǎng)站頁(yè)面,就不必要導(dǎo)航。還有一些特定工能的小網(wǎng)站,只必要簡(jiǎn)單的滾動(dòng)欣賞,幾乎不必要太多點(diǎn)擊就能完成信息的獲取。
結(jié)合簡(jiǎn)單的動(dòng)畫(huà)和動(dòng)效,如許的無(wú)導(dǎo)航的網(wǎng)頁(yè)也可以特別很是風(fēng)趣。不過(guò)總的來(lái)說(shuō),如許的設(shè)計(jì)會(huì)讓人覺(jué)得缺了點(diǎn)什么。
帶標(biāo)記的單頁(yè)式設(shè)計(jì)
很多良好的實(shí)驗(yàn)性的網(wǎng)頁(yè)設(shè)計(jì)都采用單頁(yè)式設(shè)計(jì)作為重要載體。而這種選擇也是有道理的:用戶(hù)不會(huì)在單頁(yè)式設(shè)計(jì)中迷失。
而與此同時(shí),長(zhǎng)單頁(yè)設(shè)計(jì)中,用戶(hù)必要通過(guò)賡續(xù)向下滾動(dòng)來(lái)欣賞信息,欣賞到什么程度,用必要通過(guò)標(biāo)記、目錄和進(jìn)度條如許的視覺(jué)標(biāo)識(shí)來(lái)判斷,而這本質(zhì)上和導(dǎo)航的功能異曲同工。
在上面的Socius 頁(yè)面的右側(cè),使用了很多同類(lèi)網(wǎng)站都采用的小圓點(diǎn)來(lái)作為視覺(jué)標(biāo)識(shí),當(dāng)光標(biāo)懸停在小圓點(diǎn)上的時(shí)候,會(huì)有信息浮現(xiàn),告訴用戶(hù)這些區(qū)域的內(nèi)容。同樣的,用戶(hù)可以通過(guò)點(diǎn)擊這些小圓點(diǎn)快速跳轉(zhuǎn)到特定的區(qū)域。
當(dāng)你采用如許的設(shè)計(jì)之時(shí),技巧在于盡量讓導(dǎo)航定位快一些,利索的切換能夠讓整個(gè)體驗(yàn)更加令人舒適。
玄妙的邊緣導(dǎo)航
和側(cè)邊欄導(dǎo)航不同,這種完全旋轉(zhuǎn) 90 度到右側(cè)的筆墨導(dǎo)航,設(shè)計(jì)的更加玄妙,通常出如今小型的作品展示型的網(wǎng)頁(yè)上。就像上方這個(gè)名為S的網(wǎng)站。
這種風(fēng)格的導(dǎo)航只會(huì)使用筆墨,并且條款通常會(huì)特別很是少,字體也相對(duì)會(huì)少。這種導(dǎo)航元素會(huì)隨著界面、元素的轉(zhuǎn)變而發(fā)生改變,甚至在某些界面中會(huì)消散。
和側(cè)邊欄式的導(dǎo)航雷同,如許的邊緣導(dǎo)航也會(huì)影響到整個(gè)界面比例,不過(guò)總體上是很玄妙的,這種影響特別很是小。
結(jié)語(yǔ)
在導(dǎo)航設(shè)計(jì)上,絕大多數(shù)的設(shè)計(jì)師都樂(lè)意遵循傳統(tǒng)的設(shè)計(jì)。不過(guò)今天所談及的這些實(shí)驗(yàn)性的設(shè)計(jì),也越來(lái)越多的出如今新的網(wǎng)站設(shè)計(jì)上,大概你會(huì)在未來(lái)的設(shè)計(jì)趨勢(shì)文章當(dāng)中看到這些元素。
下一篇::關(guān)于圖片的性能優(yōu)化,作為設(shè)計(jì)師的你知道多少
最新文章
- 1火兔助手

火兔助手......
- 2Access數(shù)據(jù)庫(kù)超過(guò)2G解決方案

Access數(shù)據(jù)庫(kù)操作、管理起來(lái)很方便,工作多年......
- 3火兔助手|快手點(diǎn)贊|快手評(píng)論

......
- 4微型B2C站點(diǎn)的建立

《微型B2C站點(diǎn)的建立》對(duì)于大多數(shù)企業(yè)來(lái)說(shuō),......
- 5百度優(yōu)化之判斷關(guān)鍵詞是否犯

??關(guān)鍵詞堆砌(keywordstuffing)在網(wǎng)頁(yè)中大......


