一淘UX：有人說，2013將是響應式網頁設計之年。自用戶體驗設計師Ethan Marcotte在2010年提出Responsive Web Design(RWD)的名詞，即響應式網頁設計，這個概念從Responsive Architecture延伸到web設計領域，讓所有的交互設計、視覺、前端開發(fā)都開始投入到這個趨勢，或者說新的設計解決方案中。

cool，贊昵子，里面的一些案例很不錯，導航(分一級導航、多級導航、面包屑)的響應方式bradfrost整理的比較全，附簡單demo→https://github.com/kissygalleryteam/responsive

當自己和身邊的朋友越來越多的用上了iPhone、iPad、android手機或平板，當越來越多的人都在談論這個老意識新概念的話題，當我們一直秉承的用戶體驗第一與網頁設計完美結合的時候，我也陸續(xù)整理了一些關于響應式的設計理念及方法的東西，今天就以響應式導航的設計拋磚引玉，和大家分享一下。

響應式導航的設計遵循了響應式Web設計理念，頁面的設計與開發(fā)根據用戶行為以及設備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。通過同比例縮減元素尺寸、調整頁面結構布局以及內容的優(yōu)化調整等方式，使得用戶在不同的平臺上有著獨一無二的用戶體驗。這里要說明的是，懸浮特效、flash是不適用移動設備的。

一、情景定位

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

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

此款菜單適用于所有屏幕的一些設計，菜單扁平化，留有足夠空間在各個不同的屏幕上做響應式的變化，一種簡單的設計便可以輕松調整。

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

另一種常見的右側導航設計在很多網站中應用，例如：App設計團隊Create，在移動設備上，導航橫向排列不變，Logo和導航由一行變?yōu)閮尚校撁婧啙嵡逦矣脩趔w驗一致。

2.導航菜單列表形式

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

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

兩列形式：Travelorego

多行多列形式：Regent College

3.導航隱藏形式

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

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

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

4.下拉菜單形式

在第三種介紹中的隱藏菜單的兩個案例里，同時也采用了下拉菜單的形式。使用下拉菜單來組織復雜內容是一個非常方便和流行的方式,復 雜的網站甚至會使用多層次的下拉菜單。在較小的屏幕上，在依賴觸摸反應的設備上，下拉菜單要慎用。這里沒有懸浮效果，屏幕資源可能非常有限。默認情況下， 導航菜單根本就不顯示，只有當觸摸到右上角指定的小圖標時，第一個內容層才會打開。當觸摸到其中一個欄目時，第二個內容層才會逐漸展開，給用戶一個非常清 晰明了的內容導航。

下拉菜單的共通點是：默認情況下菜單隱藏，一旦用戶需要導航鏈接，點擊圖標菜單展開，選中后菜單自動消失隱藏，下一次操作時重復。好處是不會影響其他的內容頁面。

二、設計原則

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

1.在 響應式網頁設計中，有時候我們需要對頁面內容進行刪減，按照優(yōu)先級顯示內容，只顯示高優(yōu)先級內容是原則之一。在屏幕較小的移動設備上應該優(yōu)先考慮內容并且 去移掉那些小的欄目。在頂部顯示高優(yōu)先級內容，即把最重要的內容放置在頂部。導航是否一定要出現在頁頭或者重新布局改在頁尾都要依網站具體規(guī)劃去考慮。

2.提供清晰和友好的手指操作鏈接。尤其在手機設備上，可點擊操作的區(qū)塊不宜過小，引導要清晰強烈，不忽略任何一款設備。

3.調整設計來適應可用空間，使得用戶在不同的設備上仍保持對同一頁面相同的視覺和感覺。這也遵循我們交互設計體驗一致的原則。大家可以參考Oliver Russell網站，一個設計非常靈活的網站，在不同的屏幕分辨率下保持相同的視覺和感覺。

4.需考慮大部分用戶右手點擊操作，左手負責握住設備的習慣，右側的導航列表既方便右手的點擊，又可以避免被握著設備的左手不小心觸碰到。有興趣的同學可以參考Chris Kemm一篇非常棒的關于觸屏設計的文章《Designing for Touch Screen》原文地址：http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/

結束語

響應式之所以變得流行的一大原因是無論在哪，看起來都很棒。2013我們正處在移動互聯網快速發(fā)展的時代，一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本，響應式設計為移動互聯網而生，Web設計也將迎來更多的響應式設計元素。

最后介紹一款響應式導航設計的插件：Responsive Nav Plugin

下載地址：http://responsive-nav.com/

針對小屏幕的可切換式導航的創(chuàng)建，支持觸屏事件和CSS3過渡(transitions)效果，具有非常好的性能。

本文來源于成都網站建設公司與成都網站設計制作公司-創(chuàng)新互聯成都公司！

網頁標題：響應式頁面導航設計解析
轉載源于：http://m.kartarina.com/news10/321010.html

成都網站建設公司_創(chuàng)新互聯，為您提供用戶體驗、自適應網站、網頁設計公司、網站建設、網站設計公司、動態(tài)網站

廣告

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