響應(yīng)式頁面導(dǎo)航設(shè)計(jì)解析

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

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

當(dāng)自己和身邊的朋友越來越多的用上了iPhone、iPad、android手機(jī)或平板，當(dāng)越來越多的人都在談?wù)撨@個(gè)老意識(shí)新概念的話題，當(dāng)我們一直秉承的用戶體驗(yàn)第一與網(wǎng)頁設(shè)計(jì)完美結(jié)合的時(shí)候，我也陸續(xù)整理了一些關(guān)于響應(yīng)式的設(shè)計(jì)理念及方法的東西，今天就以響應(yīng)式導(dǎo)航的設(shè)計(jì)拋磚引玉，和大家分享一下。

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

一、情景定位

下面以三種有代表性的主流設(shè)備屏幕尺寸：Pc、iPad、iPhone做案例解析幾種常見的導(dǎo)航設(shè)計(jì)。

1.簡單智能的導(dǎo)航菜單形式

此款菜單適用于所有屏幕的一些設(shè)計(jì)，菜單扁平化，留有足夠空間在各個(gè)不同的屏幕上做響應(yīng)式的變化，一種簡單的設(shè)計(jì)便可以輕松調(diào)整。

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

另一種常見的右側(cè)導(dǎo)航設(shè)計(jì)在很多網(wǎng)站中應(yīng)用，例如：App設(shè)計(jì)團(tuán)隊(duì)Create，在移動(dòng)設(shè)備上，導(dǎo)航橫向排列不變，Logo和導(dǎo)航由一行變?yōu)閮尚校撁婧啙嵡逦矣脩趔w驗(yàn)一致。

2.導(dǎo)航菜單列表形式

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

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

兩列形式：Travelorego

多行多列形式：Regent College

3.導(dǎo)航隱藏形式

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

來看下Microsoft的下拉隱藏菜單，通過設(shè)定圖標(biāo)點(diǎn)擊對(duì)菜單做收縮或展開。經(jīng)典、簡約的布局完美適合平臺(tái)轉(zhuǎn)換。

國際標(biāo)準(zhǔn)化組織ISO網(wǎng)站在移動(dòng)設(shè)備預(yù)覽時(shí)也采用了隱藏菜單的形式，但展開的交互形式菜單欄出現(xiàn)在網(wǎng)站的底部。這樣，訪客不得不先看頭部和中間內(nèi)容，迫使訪客先瀏覽完網(wǎng)站后再?zèng)Q定下一步的走向。

4.下拉菜單形式

在第三種介紹中的隱藏菜單的兩個(gè)案例里，同時(shí)也采用了下拉菜單的形式。使用下拉菜單來組織復(fù)雜內(nèi)容是一個(gè)非常方便和流行的方式,復(fù) 雜的網(wǎng)站甚至?xí)褂枚鄬哟蔚南吕藛?。在較小的屏幕上，在依賴觸摸反應(yīng)的設(shè)備上，下拉菜單要慎用。這里沒有懸浮效果，屏幕資源可能非常有限。默認(rèn)情況下， 導(dǎo)航菜單根本就不顯示，只有當(dāng)觸摸到右上角指定的小圖標(biāo)時(shí)，第一個(gè)內(nèi)容層才會(huì)打開。當(dāng)觸摸到其中一個(gè)欄目時(shí)，第二個(gè)內(nèi)容層才會(huì)逐漸展開，給用戶一個(gè)非常清 晰明了的內(nèi)容導(dǎo)航。

下拉菜單的共通點(diǎn)是：默認(rèn)情況下菜單隱藏，一旦用戶需要導(dǎo)航鏈接，點(diǎn)擊圖標(biāo)菜單展開，選中后菜單自動(dòng)消失隱藏，下一次操作時(shí)重復(fù)。好處是不會(huì)影響其他的內(nèi)容頁面。

二、設(shè)計(jì)原則

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

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

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

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

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

結(jié)束語

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

最后介紹一款響應(yīng)式導(dǎo)航設(shè)計(jì)的插件：Responsive Nav Plugin

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

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

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

網(wǎng)頁標(biāo)題：響應(yīng)式頁面導(dǎo)航設(shè)計(jì)解析
轉(zhuǎn)載源于：http://muchs.cn/news10/321010.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、自適應(yīng)網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站

廣告

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