單頁(yè)面網(wǎng)站導(dǎo)航設(shè)計(jì)研究

摘 要：近幾年，在設(shè)計(jì)網(wǎng)站中，開始流行一種具有獨(dú)特設(shè)計(jì)風(fēng)格的網(wǎng)站，網(wǎng)站是由一個(gè)單一的頁(yè)面組成，呈現(xiàn)出網(wǎng)站內(nèi)容的流動(dòng)性。單頁(yè)面網(wǎng)站的導(dǎo)航的設(shè)計(jì)是具有挑戰(zhàn)性的，這種網(wǎng)站的導(dǎo)航設(shè)計(jì)，是整個(gè)頁(yè)面設(shè)計(jì)的基礎(chǔ)，是每個(gè)頁(yè)面鏈接的紐帶。如何能將所需要表達(dá)的信息集中在一個(gè)網(wǎng)頁(yè)中，而且每個(gè)頁(yè)面有共性，還有個(gè)性，排版布局結(jié)合動(dòng)態(tài)效果有機(jī)穿插，也能以有效的應(yīng)用代碼，實(shí)現(xiàn)華麗的場(chǎng)景過(guò)渡效果，展示出網(wǎng)站的中心思想和主題內(nèi)容。

關(guān)鍵詞：?jiǎn)尉W(wǎng)頁(yè)；網(wǎng)站；導(dǎo)航

0 引言

隨著網(wǎng)絡(luò)信息的飛速發(fā)展，網(wǎng)絡(luò)傳媒已被越來(lái)越多的企業(yè)看好，而網(wǎng)站是傳媒很好的一種方式，所以網(wǎng)頁(yè)制作已經(jīng)被帶入前所未有的新時(shí)期。而且近幾年，隨著網(wǎng)絡(luò)技術(shù)的不斷提升，計(jì)算機(jī)硬件以及軟件的不斷強(qiáng)大，人們的視覺審美欣賞水平不斷提升，對(duì)網(wǎng)頁(yè)是設(shè)計(jì)要求也不僅僅限于可操作性和實(shí)用性了，更多的是追求視覺美感，完美的體驗(yàn)式操作，與產(chǎn)品產(chǎn)生良好的互動(dòng)?？刹僮餍耘c實(shí)用性已經(jīng)轉(zhuǎn)變?yōu)樽罨镜膶傩粤?。而網(wǎng)站中導(dǎo)航是一個(gè)必不可少的元素，導(dǎo)航設(shè)計(jì)的形式直接關(guān)系到網(wǎng)站的應(yīng)用，它是網(wǎng)站訪問(wèn)者獲取所需內(nèi)容的快速通道和途徑。導(dǎo)航讓網(wǎng)站的層次結(jié)構(gòu)以一種有條理的方式清晰展示，并引導(dǎo)用戶毫不費(fèi)力地找到并所需的信息，達(dá)到有效地傳遞。本文是針對(duì)時(shí)下網(wǎng)站最流行的頁(yè)面形式——單頁(yè)面中的導(dǎo)航進(jìn)行研究的，一個(gè)界面的導(dǎo)航設(shè)計(jì)對(duì)用戶體驗(yàn)至關(guān)重要，簡(jiǎn)單直觀的導(dǎo)航不僅能提高網(wǎng)站易用性，而且在方便用戶找到所要的信息后，可有助提高用戶體驗(yàn)。

1 單頁(yè)面導(dǎo)航設(shè)計(jì)特征

（1）信息淺層結(jié)構(gòu)傳達(dá)的直接性，有利于用戶體驗(yàn)。單頁(yè)面，導(dǎo)航的層級(jí)不多，除了基本的幾個(gè)欄目之外，其他的盡量的簡(jiǎn)化。盡可能地安排關(guān)鍵詞作為導(dǎo)航欄目。對(duì)于網(wǎng)頁(yè)頁(yè)面層級(jí)越是扁平結(jié)構(gòu)的網(wǎng)站導(dǎo)航越是有效。導(dǎo)航的內(nèi)容盡可能提取主要信息，簡(jiǎn)化導(dǎo)航層級(jí)，這樣信息傳達(dá)路徑縮短，直接，有利用戶很快找到相關(guān)的內(nèi)容。

（2）單頁(yè)面導(dǎo)航的視覺表現(xiàn)形式。單頁(yè)面導(dǎo)航的基本形式是以文字加裝飾的形式設(shè)計(jì)的，導(dǎo)航信息在點(diǎn)擊按鈕的上部，保持靜止效果，當(dāng)鼠標(biāo)懸停在其中一個(gè)導(dǎo)航裝飾上時(shí)，裝飾按鈕就發(fā)生變化，為保證頁(yè)面的統(tǒng)一效果，導(dǎo)航視覺風(fēng)格應(yīng)與界面風(fēng)格相應(yīng)。有的文字信息直接形成導(dǎo)航的導(dǎo)航設(shè)計(jì)十分簡(jiǎn)潔，除了用于分割導(dǎo)航標(biāo)題的直線外，沒有多余的裝飾，導(dǎo)航的簡(jiǎn)潔明快，使網(wǎng)站看起來(lái)也頗為輕快，自然。

（3）視覺流動(dòng)性強(qiáng)，增強(qiáng)操作真實(shí)體驗(yàn)與趣味性。隨著體驗(yàn)經(jīng)濟(jì)時(shí)代的到來(lái)，人們對(duì)產(chǎn)品界面的期待值也越來(lái)越高，用戶在使用產(chǎn)品功能的同時(shí)，也追求完美的體驗(yàn)式操作，與產(chǎn)品產(chǎn)生良好的互動(dòng)。網(wǎng)頁(yè)的視覺流動(dòng)性也從單一流動(dòng)性，轉(zhuǎn)換到視差滾動(dòng)效果（讓多層背景以不同速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺體驗(yàn)），使網(wǎng)站設(shè)計(jì)樣式繽紛多彩。

（4）視覺設(shè)計(jì)更具挑戰(zhàn)性。單頁(yè)面網(wǎng)站設(shè)計(jì)是有挑戰(zhàn)性的，這種網(wǎng)站直接考驗(yàn)設(shè)計(jì)師的個(gè)人能力，將所有需要表達(dá)的信息集中在一個(gè)網(wǎng)頁(yè)中，除了如何排版布局外，也能以更夸張的形式展示網(wǎng)站的中心思想。同時(shí)在另一層面，單頁(yè)面的網(wǎng)站的極簡(jiǎn)主義和充滿創(chuàng)意性的設(shè)計(jì)也能極大提高了用戶的興趣和關(guān)注。動(dòng)感十足的導(dǎo)航、細(xì)致入微的交互、恰如其分的音效反饋、優(yōu)雅流暢的場(chǎng)景過(guò)渡、精致視覺質(zhì)感的打造，都為其增色了不少。

2 單頁(yè)面導(dǎo)航設(shè)計(jì)方法

（1）頁(yè)面導(dǎo)航的視覺化傳達(dá)方式。單頁(yè)面的導(dǎo)航，在視覺風(fēng)格和視覺形式上與之前網(wǎng)站導(dǎo)航設(shè)計(jì)形式，有了很多創(chuàng)新。視覺風(fēng)格上，導(dǎo)航的設(shè)計(jì)更多結(jié)合了網(wǎng)站的屬性風(fēng)格，有的導(dǎo)航也作為其中的裝飾元素而存在。與整個(gè)頁(yè)面產(chǎn)生視覺互動(dòng)。在視覺形式上，單頁(yè)面網(wǎng)站形成了獨(dú)特的布局特征：1）水平式延長(zhǎng)。水平式延長(zhǎng)是指橫向畫布，交互時(shí)，頁(yè)面左右滑動(dòng)，頁(yè)面在運(yùn)動(dòng)中可以看到相關(guān)的其他界面元素，可營(yíng)造一種親切感的氛圍，不會(huì)產(chǎn)生更多的陌生感，從而最大限度地減少了干擾，幫助人們沉浸在整個(gè)網(wǎng)站的信息內(nèi)容中。與內(nèi)容交互，提升了用戶掌握的控制權(quán)，且讓他們感到自信。在頁(yè)面視覺設(shè)計(jì)上，每個(gè)頁(yè)面都要有相互關(guān)聯(lián)性，想成一個(gè)整體的畫面，從設(shè)計(jì)的風(fēng)格，到設(shè)計(jì)形式，都保持要一致性。使用平衡、層次結(jié)構(gòu)來(lái)培養(yǎng)信任和完整性感覺。水平式延長(zhǎng)頁(yè)面主導(dǎo)航大部分是橫向的。2）垂直式延長(zhǎng)。垂直式延長(zhǎng)是指縱向畫布。交互時(shí)，頁(yè)面上下滑動(dòng)。垂直式延長(zhǎng)頁(yè)面主導(dǎo)航有的是橫向的，有的是縱向的。

（2）頁(yè)面操控性與自然流暢性體驗(yàn)。單頁(yè)面網(wǎng)站，最核心的就是操控性與流動(dòng)性體驗(yàn)。點(diǎn)擊菜單選項(xiàng)可以看到屏幕如何從下至上以及從上至下地切換。點(diǎn)擊任一界面的主導(dǎo)航時(shí)，導(dǎo)航都會(huì)有輕微的跳動(dòng)。這些簡(jiǎn)單的轉(zhuǎn)場(chǎng)效果直接傳達(dá)給用戶他們?cè)诓僮飨到y(tǒng)里處于何種位置。讓人們直接與內(nèi)容進(jìn)行交互，利用與其相符的精力對(duì)操作進(jìn)行響應(yīng)。通過(guò)使用有意義的運(yùn)動(dòng)使得體驗(yàn)更加豐富，形成持續(xù)的視覺流動(dòng)的感覺。流動(dòng)性怎么能增強(qiáng)界面的視覺效果呢？動(dòng)畫在交互易用性方面體現(xiàn)了其優(yōu)勢(shì)，一個(gè)動(dòng)畫樣式的小轉(zhuǎn)場(chǎng)，增強(qiáng)了頁(yè)面的視覺美感，連接了用戶體驗(yàn)與界面之間的關(guān)系。交互動(dòng)畫會(huì)給用戶帶來(lái)一種舒適、自然和流暢的感覺。交互動(dòng)畫逐漸成了視覺界面與用戶之間的溝通方式，成為界面導(dǎo)航應(yīng)用的肢體語(yǔ)言。它可以清晰表現(xiàn)出導(dǎo)航之間的切換過(guò)程。當(dāng)用戶進(jìn)入一個(gè)不同的交互模式時(shí)，比如兩個(gè)應(yīng)用程序之間的切換，動(dòng)畫可以提供一個(gè)指引，告訴用戶已進(jìn)入另一個(gè)場(chǎng)景。在界面視覺設(shè)計(jì)過(guò)程中，合理運(yùn)用交互動(dòng)畫，讓界面與用戶更好的互動(dòng)，能讓其變的更具情感。

3 單頁(yè)面用戶體驗(yàn)

（1）信息結(jié)構(gòu)方面，淺層的結(jié)構(gòu)傳達(dá)直接性，有利于用戶體驗(yàn)。單一頁(yè)面信息量較少。結(jié)構(gòu)比較清晰，明確。其導(dǎo)航采用的是扁平結(jié)構(gòu)，簡(jiǎn)化了的導(dǎo)航層級(jí)，導(dǎo)航的內(nèi)容提取的也是主要信息，這樣信息傳達(dá)路徑縮短，直接，有利用戶很快找到相關(guān)的內(nèi)容，方便體驗(yàn)。合理的鏈接結(jié)構(gòu)是提升網(wǎng)站權(quán)重的一個(gè)很好的方面，也能給用戶最好的體驗(yàn)。

（2）視覺流動(dòng)性強(qiáng)，增強(qiáng)了用戶操作的真實(shí)體驗(yàn)與趣味性。點(diǎn)擊任一界面的主導(dǎo)航時(shí)，頁(yè)面在運(yùn)動(dòng)中可以看到相關(guān)的其他界面元素，可營(yíng)造一種親切感的氛圍，不會(huì)讓用戶產(chǎn)生更多的陌生感，從而最大限度地減少了干擾，幫助人們沉浸在整個(gè)網(wǎng)站的信息內(nèi)容中。當(dāng)用戶進(jìn)入一個(gè)不同的交互模式時(shí)，比如兩個(gè)應(yīng)用程序之間的切換，動(dòng)畫可以提供一個(gè)指引，告訴用戶已進(jìn)入另一個(gè)場(chǎng)景。精心設(shè)計(jì)的有針對(duì)性的動(dòng)畫可以使網(wǎng)頁(yè)變得更豐富，并且使體驗(yàn)感覺精良和完美。幫助用戶理解上下文環(huán)境變動(dòng)，將體驗(yàn)與視覺轉(zhuǎn)換緊密相連。

單頁(yè)面網(wǎng)站，最核心的就是操控性與流動(dòng)性體驗(yàn)，交互操作產(chǎn)生的視覺動(dòng)畫，是界面產(chǎn)生自然的流動(dòng)性。交互動(dòng)畫會(huì)給用戶帶來(lái)一種舒適、自然和流暢的感覺。單頁(yè)面網(wǎng)站正成為網(wǎng)站設(shè)計(jì)的一種趨勢(shì)。它正以獨(dú)有的視覺形式和表現(xiàn)形式進(jìn)入人們?nèi)粘Ｉ钪小?/p>

參考文獻(xiàn)：

[1] 辛希孟.交互設(shè)計(jì)之路：A集[C].北京：中國(guó)社會(huì)科學(xué)出版社，2008.

[2] 馮西橋.情感化設(shè)計(jì)[R].北京：清華大學(xué)設(shè)計(jì)研究院，2009.

[3] 何齡修.讀顧城《操作界面設(shè)計(jì)模式》[J].2010（3）：167-173.

作者簡(jiǎn)介：穆瑞潔（1985—），女，天津人，碩士，助教，主要研究方向：視覺傳達(dá)系平面媒體。endprint