- 相關(guān)推薦
響應(yīng)交互式網(wǎng)頁設(shè)計
設(shè)計師，最主要的是創(chuàng)新，明銳洞察設(shè)計前沿，了解掌握設(shè)計趨勢。這樣才能更好的設(shè)計出更加時尚、符合時代潮流的東西。歡迎大家閱讀！更多相關(guān)信息請關(guān)注相關(guān)欄目！
自用戶體驗設(shè)計師Ethan Marcotte在2010年提出Responsive Web Design（RWD）的名詞，即響應(yīng)式網(wǎng)頁設(shè)計，這個概念從Responsive Architecture延伸到web設(shè)計領(lǐng)域，讓所有的交互設(shè)計、視覺、前端開發(fā)都開始投入到這個趨勢，或者說新的設(shè)計解決方案中。
當(dāng)自己和身邊的朋友越來越多的用上了iPhone、iPad、android手機或平板，當(dāng)越來越多的人都在談?wù)撨@個老意識新概念的話題，當(dāng)我們一直秉承的用戶體驗第一與網(wǎng)頁設(shè)計完美結(jié)合的時候，我也陸續(xù)整理了一些關(guān)于響應(yīng)式的設(shè)計理念及方法的東西，今天就以響應(yīng)式導(dǎo)航的設(shè)計拋磚引玉，和大家分享一下。
響應(yīng)式導(dǎo)航的設(shè)計遵循了響應(yīng)式Web設(shè)計理念，響應(yīng)式Web設(shè)計(Responsive Web design)的理念是頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)設(shè)備環(huán)境（屏幕尺寸、屏幕定向、系統(tǒng)平臺等）以及用戶行為（改變窗口大小等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無論用戶正在使用pc、平板電腦，或者手機，無論是全屏顯示還是非全屏的情況，無論屏幕是橫向還是豎向，頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。
一、情景定位
下面以三種有代表性的主流設(shè)備屏幕尺寸：Pc、iPad、iPhone做案例解析幾種常見的導(dǎo)航設(shè)計。
1.簡單智能的導(dǎo)航菜單形式
此款菜單適用于所有屏幕的一些設(shè)計，菜單扁平化，留有足夠空間在各個不同的屏幕上做響應(yīng)式的變化，一種簡單的設(shè)計便可以輕松調(diào)整。
先來看網(wǎng)頁開發(fā)設(shè)計公司Flip非常簡單色塊的導(dǎo)航，采用了由網(wǎng)頁文字鏈變到移動設(shè)備的按鈕形式，規(guī)避了移動設(shè)備操作不精準(zhǔn)等一些弊端。
另一種常見的右側(cè)導(dǎo)航設(shè)計在很多網(wǎng)站中應(yīng)用，例如：App設(shè)計團(tuán)隊Create，在移動設(shè)備上，導(dǎo)航橫向排列不變，Logo和導(dǎo)航由一行變?yōu)閮尚�，頁面簡潔清晰且用戶體驗一致。
2.導(dǎo)航菜單列表形式
最常用的一種排列形式，橫向?qū)Ш皆谛∑聊幌伦優(yōu)榭v向排列，一列、兩列甚至是多列多行的形式，具體應(yīng)實際情況而定。
先來看單列形式的案例：Forefathers Group
兩列形式：Travelorego
多行多列形式：Regent College
3.導(dǎo)航隱藏形式
在手機設(shè)備上導(dǎo)航的另一種形式以隱藏列表的方式呈現(xiàn)，是對空間的有效利用，突出高優(yōu)先級內(nèi)容的處理方式。
來看下Microsoft的下拉隱藏菜單，通過設(shè)定圖標(biāo)點擊對菜單做收縮或展開。經(jīng)典、簡約的布局完美適合平臺轉(zhuǎn)換。
國際標(biāo)準(zhǔn)化組織ISO網(wǎng)站在移動設(shè)備預(yù)覽時也采用了隱藏菜單的形式，但展開的交互形式菜單欄出現(xiàn)在網(wǎng)站的底部。這樣，訪客不得不先看頭部和中間內(nèi)容，迫使訪客先瀏覽完網(wǎng)站后再決定下一步的走向。
4.下拉菜單形式
在第三種介紹中的隱藏菜單的兩個案例里，同時也采用了下拉菜單的形式。使用下拉菜單來組織復(fù)雜內(nèi)容是一個非常方便和流行的方式,復(fù)雜的網(wǎng)站甚至?xí)褂枚鄬哟蔚南吕藛�。在較小的屏幕上，在依賴觸摸反應(yīng)的設(shè)備上，下拉菜單要慎用。這里沒有懸浮效果，屏幕資源可能非常有限。默認(rèn)情況下，導(dǎo)航菜單根本就不顯示，只有當(dāng)觸摸到右上角指定的小圖標(biāo)時，第一個內(nèi)容層才會打開。當(dāng)觸摸到其中一個欄目時，第二個內(nèi)容層才會逐漸展開，給用戶一個非常清晰明了的內(nèi)容導(dǎo)航。
來參考下面一個案例：The Copper Tree。
下拉菜單的共通點是：默認(rèn)情況下菜單隱藏，一旦用戶需要導(dǎo)航鏈接，點擊圖標(biāo)菜單展開，選中后菜單自動消失隱藏，下一次操作時重復(fù)。好處是不會影響其他的內(nèi)容頁面。
二、設(shè)計原則
舉了那么多案例，下面我們來看看在具體的設(shè)計中我們要遵循哪些原則？
1.在響應(yīng)式網(wǎng)頁設(shè)計中，有時候我們需要對頁面內(nèi)容進(jìn)行刪減，按照優(yōu)先級顯示內(nèi)容，只顯示高優(yōu)先級內(nèi)容是原則之一。在屏幕較小的移動設(shè)備上應(yīng)該優(yōu)先考慮內(nèi)容并且去移掉那些小的欄目。在頂部顯示高優(yōu)先級內(nèi)容，即把最重要的內(nèi)容放置在頂部。導(dǎo)航是否一定要出現(xiàn)在頁頭或者重新布局改在頁尾都要依網(wǎng)站具體規(guī)劃去考慮。
2.提供清晰和友好的手指操作鏈接。尤其在手機設(shè)備上，可點擊操作的區(qū)塊不宜過小，引導(dǎo)要清晰強烈，不忽略任何一款設(shè)備。
3.調(diào)整設(shè)計來適應(yīng)可用空間，使得用戶在不同的設(shè)備上仍保持對同一頁面相同的視覺和感覺。這也遵循我們交互設(shè)計體驗一致的原則。大家可以參考Oliver Russell網(wǎng)站，一個設(shè)計非常靈活的網(wǎng)站，在不同的屏幕分辨率下保持相同的視覺和感覺。
4.需考慮大部分用戶右手點擊操作，左手負(fù)責(zé)握住設(shè)備的習(xí)慣，右側(cè)的導(dǎo)航列表既方便右手的點擊，又可以避免被握著設(shè)備的左手不小心觸碰到。
結(jié)束語
響應(yīng)式之所以變得流行的一大原因是無論在哪，看起來都很棒。2013我們正處在移動互聯(lián)網(wǎng)快速發(fā)展的時代，一個網(wǎng)站能夠兼容多個終端，而不是為每個終端做一個特定的版本，響應(yīng)式設(shè)計為移動互聯(lián)網(wǎng)而生，Web設(shè)計也將迎來更多的響應(yīng)式設(shè)計元素。
最后介紹一款響應(yīng)式導(dǎo)航設(shè)計的插件：Responsive Nav Plugin
針對小屏幕的可切換式導(dǎo)航的創(chuàng)建，支持觸屏事件和CSS3過渡（transitions）效果，具有非常好的性能。
【響應(yīng)交互式網(wǎng)頁設(shè)計】相關(guān)文章：
響應(yīng)式網(wǎng)頁設(shè)計的技巧06-25
響應(yīng)式網(wǎng)頁怎么設(shè)計04-28
響應(yīng)式網(wǎng)頁設(shè)計技巧05-22
響應(yīng)式網(wǎng)頁設(shè)計的小技巧03-13