響應式網(wǎng)站頁面導航設計

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

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

一、情景定位

下面以三種有代表性的主流設備屏幕尺寸：Pc、iPad、iPhone做案例解析幾種常見的導航設計。

1.簡單智能的導航菜單形式

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

先來看網(wǎng)頁開發(fā)設計公司Flip非常簡單色塊的導航，采用了由網(wǎng)頁文字鏈變到移動設備的按鈕形式，規(guī)避了移動設備操作不精準等一些弊端。

響應式網(wǎng)站頁面導航設計" src="http://www.bm7419.com/upload/pic15/201611241310534868.jpg" />

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

2.導航菜單列表形式

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

先來看單列形式的案例：Forefathers Group

兩列形式：Travelorego

多行多列形式：Regent College

3.導航隱藏形式

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

來看下Microsoft的下拉隱藏菜單，通過設定圖標點擊對菜單做收縮或展開。經(jīng)典、簡約的布局好適合平臺轉(zhuǎn)換。

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

4.下拉菜單形式

在第三種介紹中的隱藏菜單的兩個案例里，同時也采用了下拉菜單的形式。使用下拉菜單來組織復雜內(nèi)容是一個既快又流行又便捷的方式,復雜的網(wǎng)站甚至會使用多層次的下拉菜單。一個更小的屏幕上,依靠觸覺反應設備,小心謹慎的下拉菜單。沒有懸浮作用,屏幕資源可能非常有限。大部分時間采用默認的狀態(tài),導航菜單不顯示,只有瀏覽用戶點擊制定的圖標時，第一層的內(nèi)容就會打開。當觸摸其中一個列,第二層內(nèi)容會逐漸擴大,給用戶一個非常清楚明確的內(nèi)容導航。

來參考下面一個案例：The Copper Tree。

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

二、設計原則

舉了那么多案例，下面我們來看看在具體的設計中要遵循哪些原則?

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

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

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

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

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

標題名稱：響應式網(wǎng)站頁面導航設計
瀏覽路徑：http://www.bm7419.com/news11/166411.html

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

廣告

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