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

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

一、情景定位

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

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

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

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

響應式網站頁面導航設計" src="http://m.js-pz168.com/upload/pic15/201611241310534868.jpg" />

另一種常見的右側導航設計在很多網站中應用，例如：App設計團隊Create，在移動設備上，導航橫向排列不變，Logo和導航由一行變為兩行，頁面簡潔清晰且用戶體驗一致。

2.導航菜單列表形式

最常用的一種排列形式，橫向導航在小屏幕下變為縱向排列，一列、兩列甚至是多列多行的形式，具體應實際情況而定。

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

兩列形式：Travelorego

多行多列形式：Regent College

3.導航隱藏形式

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

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

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

4.下拉菜單形式

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

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

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

二、設計原則

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

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

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

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

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

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

標題名稱：響應式網站頁面導航設計
瀏覽路徑：http://m.js-pz168.com/news11/166411.html

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

廣告

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