單頁面網站導航設計研究

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

關鍵詞：單網頁；網站；導航

0 引言

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

1 單頁面導航設計特征

（1）信息淺層結構傳達的直接性，有利于用戶體驗。單頁面，導航的層級不多，除了基本的幾個欄目之外，其他的盡量的簡化。盡可能地安排關鍵詞作為導航欄目。對于網頁頁面層級越是扁平結構的網站導航越是有效。導航的內容盡可能提取主要信息，簡化導航層級，這樣信息傳達路徑縮短，直接，有利用戶很快找到相關的內容。

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

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

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

2 單頁面導航設計方法

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

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

3 單頁面用戶體驗

（1）信息結構方面，淺層的結構傳達直接性，有利于用戶體驗。單一頁面信息量較少。結構比較清晰，明確。其導航采用的是扁平結構，簡化了的導航層級，導航的內容提取的也是主要信息，這樣信息傳達路徑縮短，直接，有利用戶很快找到相關的內容，方便體驗。合理的鏈接結構是提升網站權重的一個很好的方面，也能給用戶最好的體驗。

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

單頁面網站，最核心的就是操控性與流動性體驗，交互操作產生的視覺動畫，是界面產生自然的流動性。交互動畫會給用戶帶來一種舒適、自然和流暢的感覺。單頁面網站正成為網站設計的一種趨勢。它正以獨有的視覺形式和表現形式進入人們日常生活中。

參考文獻：

[1] 辛希孟.交互設計之路：A集[C].北京：中國社會科學出版社，2008.

[2] 馮西橋.情感化設計[R].北京：清華大學設計研究院，2009.

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

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