響應(yīng)交互式網(wǎng)頁(yè)設(shè)計(jì)

本文格式為Word版，下載可任意編輯——響應(yīng)交互式網(wǎng)頁(yè)設(shè)計(jì)響應(yīng)交互式網(wǎng)頁(yè)設(shè)計(jì)

設(shè)計(jì)師，最主要的是創(chuàng)新，明銳洞察設(shè)計(jì)前沿，了解掌管設(shè)計(jì)趨勢(shì)。這樣才能更好的設(shè)計(jì)出更加時(shí)尚、符合時(shí)代潮流的東西。接待大家閱讀！更多相關(guān)信息請(qǐng)關(guān)注相關(guān)欄目！

自用戶體驗(yàn)設(shè)計(jì)師EthanMarcotte在2022年提出ResponsiveWebDesign（RWD）的名詞，即響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，這個(gè)概念從ResponsiveArchitecture延遲到web設(shè)計(jì)領(lǐng)域，讓全體的交互設(shè)計(jì)、視覺(jué)、前端開(kāi)發(fā)都開(kāi)頭投入到這個(gè)趨勢(shì)，或者說(shuō)新的設(shè)計(jì)解決方案中。

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

響應(yīng)式導(dǎo)航的設(shè)計(jì)遵循了響應(yīng)式Web設(shè)計(jì)理念，響應(yīng)式Web設(shè)計(jì)ResponsiveWebdesign的理念是頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)設(shè)備環(huán)境（屏幕尺寸、屏幕定向、系統(tǒng)平臺(tái)等）以及用戶行為（變更窗口大小等）舉行相應(yīng)的響應(yīng)和調(diào)整。概括的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSSmediaquery的使用等。無(wú)論用戶正在使用pc、平板電腦，或者手機(jī)，無(wú)論是全屏顯示還是非全屏的處境，無(wú)論屏幕是橫向還是豎向，頁(yè)面都理應(yīng)能夠自動(dòng)切換辨識(shí)率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。

一、情景定位

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

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

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

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

另一種常見(jià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)閮尚校?yè)面干脆明顯且用戶體驗(yàn)一致。

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

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

先來(lái)看單列形式的案例：ForefathersGroup

兩列形式：Travelorego

多行多列形式：RegentCollege

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

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

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

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

4.下拉菜單形式

在第三種介紹中的暗藏菜單的兩個(gè)案例里，同時(shí)也采用了下拉菜單的形式。使用下拉菜單來(lái)組織繁雜內(nèi)容是一個(gè)分外便當(dāng)和流行的方式,繁雜的網(wǎng)站甚至?xí)褂枚鄬哟蔚南吕藛巍Ｔ谳^小的屏幕上，在憑借觸摸回響的設(shè)備上，下拉菜單要慎用。這里沒(méi)有懸浮效果，屏幕資源可能分外有限。默認(rèn)處境下，導(dǎo)航菜單根本就不顯示，只有當(dāng)觸摸到右上角指定的小圖標(biāo)時(shí)，第一個(gè)內(nèi)容層才會(huì)開(kāi)啟。當(dāng)觸摸到其中一個(gè)欄目時(shí)，其次個(gè)內(nèi)容層才會(huì)逐步開(kāi)展，給用戶一個(gè)分外明顯領(lǐng)略的內(nèi)容導(dǎo)航。

來(lái)參考下面一個(gè)案例：TheCopperTree。

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

二、設(shè)計(jì)原那么

舉了那么多案例，下面我們來(lái)看看在概括的設(shè)計(jì)中我們要遵循哪些原那么？

1.在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)候我們需要對(duì)頁(yè)面內(nèi)容舉行刪減，按照優(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)在頁(yè)頭或者重新布局改在頁(yè)尾都要依網(wǎng)站概括規(guī)劃去考慮。

2.供給明顯和友好的手指操作鏈接。尤其在手機(jī)設(shè)備上，可點(diǎn)擊操作的區(qū)塊不宜過(guò)小，引導(dǎo)要明顯猛烈，不疏忽任何一款設(shè)備。

3.調(diào)整設(shè)計(jì)來(lái)適應(yīng)可用空間，使得用戶在不同的設(shè)備上仍保持對(duì)同一頁(yè)面一致的視覺(jué)和感覺(jué)。這也遵循我們交互設(shè)計(jì)體驗(yàn)一致的原那么。大家可以參考OliverRussell網(wǎng)站，一個(gè)設(shè)計(jì)分外生動(dòng)的網(wǎng)站，在不同的屏幕辨識(shí)率下保持一致的視覺(jué)和感覺(jué)。

4.需考慮大片面用戶右手點(diǎn)擊操作，左手負(fù)責(zé)握住設(shè)備的習(xí)慣，右側(cè)的導(dǎo)航列表既便當(dāng)右手的點(diǎn)擊，又可以制止被握著設(shè)備的左手不提防觸碰見(jiàn)。

終止語(yǔ)

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