當越來越多周圍的朋友使用iPhone,android手機或平板電腦,隨著越來越多的人都在討論新舊概念的主體意識,當我們一直秉承用戶體驗的第一個與網頁設計完美結合,海淘科技也收集了響應設計理念和方法,今天與大家分享響應式導航的設計。
響應網頁設計遵循導航的響應式設計理念,響應頁面的設計和開發(fā)基于用戶行為和環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕取向,等等)的反應,并相應地調整。同樣的元素大小比例,調整頁面布局和內容的結構的優(yōu)化調整,允許用戶在不同的平臺上有一個獨特的用戶體驗。這里解釋是懸掛特效,flash在響應式流行年代已經不適用于移動設備。
下面以三種有代表性的主流設備屏幕尺寸：Pc、iPad、iPhone做案例解析幾種常見的導航設計。
1.簡單智能的導航菜單形式
此款菜單適用于所有屏幕的一些設計，菜單扁平化，并且會留有一定的空白空間在不同的手機屏幕上做自適應的變化，一種簡單的設計便可以輕松調整。
先來看網頁開發(fā)設計公司Flip非常簡單色塊的導航，采用了由網頁文字鏈變到移動設備的按鈕形式，規(guī)避了移動設備操作不精準等一些弊端。
另一種常見的右側導航設計在很多網站中應用，例如：App設計團隊Create，在移動設備上，導航橫向排列不變，Logo和導航由一行變?yōu)閮尚?，頁面簡潔清晰且用戶體驗一致。
2.導航菜單列表形式
最常用的一種排列形式，橫向導航在小屏幕下變?yōu)榭v向排列，一列、兩列甚至是多列多行的形式，具體應實際情況而定。
先來看單列形式的案例：Forefathers Group
兩列形式：Travelorego
多行多列形式：Regent College
3.導航隱藏形式
在手機設備上導航的另一種形式以隱藏列表的方式呈現，是對空間的有效利用，突出高優(yōu)先級內容的處理方式。
來看下Microsoft的下拉隱藏菜單，通過設定圖標點擊對菜單做收縮或展開。經典、簡約的布局完美適合平臺轉換。
國際標準化組織ISO網站在移動設備預覽時也采用了隱藏菜單的形式，但展開的交互形式菜單欄出現在網站的底部。這樣，吸引用戶瀏覽頭部和中間的內容，逼迫訪客先瀏覽完網站后再決定下一步要做什么
4.下拉菜單形式
在第三種介紹中的隱藏菜單的兩個案例里，同時也采用了下拉菜單的形式。使用下拉菜單來組織復雜內容是一個既快又流行又便捷的方式,復雜的網站甚至會使用多層次的下拉菜單。一個更小的屏幕上,依靠觸覺反應設備,小心謹慎的下拉菜單。沒有懸浮作用,屏幕資源可能非常有限。大部分時間采用默認的狀態(tài),導航菜單不顯示,只有瀏覽用戶點擊制定的圖標時，第一層的內容就會打開。當觸摸其中一個列,第二層內容會逐漸擴大,給用戶一個非常清楚明確的內容導航。
來參考下面一個案例：The Copper Tree。
下拉菜單的共同點是:默認隱藏菜單,如果用戶認可并需要導航鏈接，點擊圖標菜單,選擇菜單消失自動隱藏,在下次操作重復。這樣設置的優(yōu)勢是內容不會影響其他頁面。
舉了那么多案例，下面我們來看看在具體的設計中要遵循哪些原則?
1.在響應web設計中,有時我們需要削減的內容頁面,根據優(yōu)先級根據內容,只顯示高優(yōu)先級內容的一個原則。在小屏幕移動設備上應該優(yōu)先考慮內容和去除小列。在頂部顯示高優(yōu)先級的內容,即把最重要的內容。導航是必須出現在標題或改變頁面布局應按照網站具體規(guī)劃需要考慮。
2.提供清晰友好的手指觸摸操作鏈接。特別是在移動設備上,可以點擊操作塊不宜太小,導致清晰有力,不忽略任何設備。
3.調整設計以適應可用空間,允許用戶在不同的設備將保持相同的外觀和感覺在相同的頁面上。它還遵循我們的交互設計經驗的原則是一致的。您可以參考奧利弗·羅素的網站,一個網站的設計非常靈活,在不同的屏幕分辨率保持相同的外觀和感覺。
4.大多數用戶應該考慮右鍵操作,左手負責夾具的習慣,方便右鍵單擊右側導航列表,并且可以避免左手不小心觸摸設備。
最后，海淘科技總結：響應式之所以變得流行的一大原因是無論在哪，看起來都很棒。2016我們正處在移動互聯網快速發(fā)展的時代，2017年響應式網站必然也將是網站設計的流行趨勢，一個網站能夠兼容多個終端，而不是為每個終端做一個特定且唯一的版本，響應式設計為移動互聯網而生，網頁設計也將迎來更多的響應式設計元素。
