當(dāng)越來(lái)越多周圍的朋友使用iPhone,android手機(jī)或平板電腦,隨著越來(lái)越多的人都在討論新舊概念的主體意識(shí),當(dāng)我們一直秉承用戶體驗(yàn)的第一個(gè)與網(wǎng)頁(yè)設(shè)計(jì)好結(jié)合,創(chuàng)新互聯(lián)也收集了響應(yīng)設(shè)計(jì)理念和方法,今天與大家分享響應(yīng)式導(dǎo)航的設(shè)計(jì)。

響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)遵循導(dǎo)航的響應(yīng)式設(shè)計(jì)理念,響應(yīng)頁(yè)面的設(shè)計(jì)和開(kāi)發(fā)基于用戶行為和環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕取向,等等)的反應(yīng),并相應(yīng)地調(diào)整。同樣的元素大小比例,調(diào)整頁(yè)面布局和內(nèi)容的結(jié)構(gòu)的優(yōu)化調(diào)整,允許用戶在不同的平臺(tái)上有一個(gè)獨(dú)特的用戶體驗(yàn)。這里解釋是懸掛特效,flash在響應(yīng)式流行年代已經(jīng)不適用于移動(dòng)設(shè)備。

一、情景定位

下面以三種有代表性的主流設(shè)備屏幕尺寸：Pc、iPad、iPhone做案例解析幾種常見(jiàn)的導(dǎo)航設(shè)計(jì)。

1.簡(jiǎn)單智能的導(dǎo)航菜單形式

此款菜單適用于所有屏幕的一些設(shè)計(jì)，菜單扁平化，并且會(huì)留有一定的空白空間在不同的手機(jī)屏幕上做自適應(yīng)的變化，一種簡(jiǎn)單的設(shè)計(jì)便可以輕松調(diào)整。

先來(lái)看網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì)公司Flip非常簡(jiǎn)單色塊的導(dǎo)航，采用了由網(wǎng)頁(yè)文字鏈變到移動(dòng)設(shè)備的按鈕形式，規(guī)避了移動(dòng)設(shè)備操作不精準(zhǔn)等一些弊端。

響應(yīng)式網(wǎng)站頁(yè)面導(dǎo)航設(shè)計(jì)" src="http://m.newbst.com/upload/pic15/201611241310534868.jpg" />

另一種常見(jiàn)的右側(cè)導(dǎo)航設(shè)計(jì)在很多網(wǎng)站中應(yīng)用，例如：App設(shè)計(jì)團(tuán)隊(duì)Create，在移動(dòng)設(shè)備上，導(dǎo)航橫向排列不變，Logo和導(dǎo)航由一行變?yōu)閮尚校?yè)面簡(jiǎn)潔清晰且用戶體驗(yàn)一致。

2.導(dǎo)航菜單列表形式

最常用的一種排列形式，橫向?qū)Ш皆谛∑聊幌伦優(yōu)榭v向排列，一列、兩列甚至是多列多行的形式，具體應(yīng)實(shí)際情況而定。

先來(lái)看單列形式的案例：Forefathers Group

兩列形式：Travelorego

多行多列形式：Regent College

3.導(dǎo)航隱藏形式

在手機(jī)設(shè)備上導(dǎo)航的另一種形式以隱藏列表的方式呈現(xiàn)，是對(duì)空間的有效利用，突出高優(yōu)先級(jí)內(nèi)容的處理方式。

來(lái)看下Microsoft的下拉隱藏菜單，通過(guò)設(shè)定圖標(biāo)點(diǎn)擊對(duì)菜單做收縮或展開(kāi)。經(jīng)典、簡(jiǎn)約的布局好適合平臺(tái)轉(zhuǎn)換。

國(guó)際標(biāo)準(zhǔn)化組織ISO網(wǎng)站在移動(dòng)設(shè)備預(yù)覽時(shí)也采用了隱藏菜單的形式，但展開(kāi)的交互形式菜單欄出現(xiàn)在網(wǎng)站的底部。這樣，吸引用戶瀏覽頭部和中間的內(nèi)容，逼迫訪客先瀏覽完網(wǎng)站后再?zèng)Q定下一步要做什么

4.下拉菜單形式

在第三種介紹中的隱藏菜單的兩個(gè)案例里，同時(shí)也采用了下拉菜單的形式。使用下拉菜單來(lái)組織復(fù)雜內(nèi)容是一個(gè)既快又流行又便捷的方式,復(fù)雜的網(wǎng)站甚至?xí)褂枚鄬哟蔚南吕藛巍Ｒ粋€(gè)更小的屏幕上,依靠觸覺(jué)反應(yīng)設(shè)備,小心謹(jǐn)慎的下拉菜單。沒(méi)有懸浮作用,屏幕資源可能非常有限。大部分時(shí)間采用默認(rèn)的狀態(tài),導(dǎo)航菜單不顯示,只有瀏覽用戶點(diǎn)擊制定的圖標(biāo)時(shí)，第一層的內(nèi)容就會(huì)打開(kāi)。當(dāng)觸摸其中一個(gè)列,第二層內(nèi)容會(huì)逐漸擴(kuò)大,給用戶一個(gè)非常清楚明確的內(nèi)容導(dǎo)航。

來(lái)參考下面一個(gè)案例：The Copper Tree。

下拉菜單的共同點(diǎn)是:默認(rèn)隱藏菜單,如果用戶認(rèn)可并需要導(dǎo)航鏈接，點(diǎn)擊圖標(biāo)菜單,選擇菜單消失自動(dòng)隱藏,在下次操作重復(fù)。這樣設(shè)置的優(yōu)勢(shì)是內(nèi)容不會(huì)影響其他頁(yè)面。

二、設(shè)計(jì)原則

舉了那么多案例，下面我們來(lái)看看在具體的設(shè)計(jì)中要遵循哪些原則?

1.在響應(yīng)web設(shè)計(jì)中,有時(shí)我們需要削減的內(nèi)容頁(yè)面,根據(jù)優(yōu)先級(jí)根據(jù)內(nèi)容,只顯示高優(yōu)先級(jí)內(nèi)容的一個(gè)原則。在小屏幕移動(dòng)設(shè)備上應(yīng)該優(yōu)先考慮內(nèi)容和去除小列。在頂部顯示高優(yōu)先級(jí)的內(nèi)容,即把最重要的內(nèi)容。導(dǎo)航是必須出現(xiàn)在標(biāo)題或改變頁(yè)面布局應(yīng)按照網(wǎng)站具體規(guī)劃需要考慮。

2.提供清晰友好的手指觸摸操作鏈接。特別是在移動(dòng)設(shè)備上,可以點(diǎn)擊操作塊不宜太小,導(dǎo)致清晰有力,不忽略任何設(shè)備。

3.調(diào)整設(shè)計(jì)以適應(yīng)可用空間,允許用戶在不同的設(shè)備將保持相同的外觀和感覺(jué)在相同的頁(yè)面上。它還遵循我們的交互設(shè)計(jì)經(jīng)驗(yàn)的原則是一致的。您可以參考奧利弗·羅素的網(wǎng)站,一個(gè)網(wǎng)站的設(shè)計(jì)非常靈活,在不同的屏幕分辨率保持相同的外觀和感覺(jué)。

4.大多數(shù)用戶應(yīng)該考慮右鍵操作,左手負(fù)責(zé)夾具的習(xí)慣,方便右鍵單擊右側(cè)導(dǎo)航列表,并且可以避免左手不小心觸摸設(shè)備。

最后，創(chuàng)新互聯(lián)總結(jié)：響應(yīng)式之所以變得流行的一大原因是無(wú)論在哪，看起來(lái)都很棒。2016我們正處在移動(dòng)互聯(lián)網(wǎng)快速發(fā)展的時(shí)代，2017年響應(yīng)式網(wǎng)站必然也將是網(wǎng)站設(shè)計(jì)的流行趨勢(shì)，一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定且唯一的版本，響應(yīng)式設(shè)計(jì)為移動(dòng)互聯(lián)網(wǎng)而生，網(wǎng)頁(yè)設(shè)計(jì)也將迎來(lái)更多的響應(yīng)式設(shè)計(jì)元素。

分享名稱：響應(yīng)式網(wǎng)站頁(yè)面導(dǎo)航設(shè)計(jì)
文章位置：http://m.newbst.com/news/166411.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有響應(yīng)式網(wǎng)站等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)