單頁(yè)面網(wǎng)站導航設計的策略論文
0 引言
隨著(zhù)網(wǎng)絡(luò )信息的飛速發(fā)展,網(wǎng)絡(luò )傳媒已被越來(lái)越多的企業(yè)看好,而網(wǎng)站是傳媒很好的一種方式,所以網(wǎng)頁(yè)制作已經(jīng)被帶入前所未有的新時(shí)期。而且近幾年,隨著(zhù)網(wǎng)絡(luò )技術(shù)的不斷提升,計算機硬件以及軟件的不斷強大,人們的視覺(jué)審美欣賞水平不斷提升,對網(wǎng)頁(yè)是設計要求也不僅僅限于可操作性和實(shí)用性了,更多的是追求視覺(jué)美感,完美的體驗式操作,與產(chǎn)品產(chǎn)生良好的互動(dòng)?刹僮餍耘c實(shí)用性已經(jīng)轉變?yōu)樽罨镜膶傩粤。而網(wǎng)站中導航是一個(gè)必不可少的元素,導航設計的形式直接關(guān)系到網(wǎng)站的應用,它是網(wǎng)站訪(fǎng)問(wèn)者獲取所需內容的快速通道和途徑。導航讓網(wǎng)站的層次結構以一種有條理的方式清晰展示,并引導用戶(hù)毫不費力地找到并所需的信息,達到有效地傳遞。本文是針對時(shí)下網(wǎng)站最流行的頁(yè)面形式——單頁(yè)面中的導航進(jìn)行研究的,一個(gè)界面的導航設計對用戶(hù)體驗至關(guān)重要,簡(jiǎn)單直觀(guān)的導航不僅能提高網(wǎng)站易用性,而且在方便用戶(hù)找到所要的信息后,可有助提高用戶(hù)體驗。
1 單頁(yè)面導航設計特征
。1)信息淺層結構傳達的'直接性,有利于用戶(hù)體驗。單頁(yè)面,導航的層級不多,除了基本的幾個(gè)欄目之外,其他的盡量的簡(jiǎn)化。盡可能地安排關(guān)鍵詞作為導航欄目。對于網(wǎng)頁(yè)頁(yè)面層級越是扁平結構的網(wǎng)站導航越是有效。導航的內容盡可能提取主要信息,簡(jiǎn)化導航層級,這樣信息傳達路徑縮短,直接,有利用戶(hù)很快找到相關(guān)的內容。
。2)單頁(yè)面導航的視覺(jué)表現形式。單頁(yè)面導航的基本形式是以文字加裝飾的形式設計的,導航信息在點(diǎn)擊按鈕的上部,保持靜止效果,當鼠標懸停在其中一個(gè)導航裝飾上時(shí),裝飾按鈕就發(fā)生變化,為保證頁(yè)面的統一效果,導航視覺(jué)風(fēng)格應與界面風(fēng)格相應。有的文字信息直接形成導航的導航設計十分簡(jiǎn)潔,除了用于分割導航標題的直線(xiàn)外,沒(méi)有多余的裝飾,導航的簡(jiǎn)潔明快,使網(wǎng)站看起來(lái)也頗為輕快,自然。
。3)視覺(jué)流動(dòng)性強,增強操作真實(shí)體驗與趣味性。隨著(zhù)體驗經(jīng)濟時(shí)代的到來(lái),人們對產(chǎn)品界面的期待值也越來(lái)越高,用戶(hù)在使用產(chǎn)品功能的同時(shí),也追求完美的體驗式操作,與產(chǎn)品產(chǎn)生良好的互動(dòng)。網(wǎng)頁(yè)的視覺(jué)流動(dòng)性也從單一流動(dòng)性,轉換到視差滾動(dòng)效果(讓多層背景以不同速度移動(dòng),形成立體的運動(dòng)效果,帶來(lái)非常出色的視覺(jué)體驗),使網(wǎng)站設計樣式繽紛多彩。
。4)視覺(jué)設計更具挑戰性。單頁(yè)面網(wǎng)站設計是有挑戰性的,這種網(wǎng)站直接考驗設計師的個(gè)人能力,將所有需要表達的信息集中在一個(gè)網(wǎng)頁(yè)中,除了如何排版布局外,也能以更夸張的形式展示網(wǎng)站的中心思想。同時(shí)在另一層面,單頁(yè)面的網(wǎng)站的極簡(jiǎn)主義和充滿(mǎn)創(chuàng )意性的設計也能極大提高了用戶(hù)的興趣和關(guān)注。動(dòng)感十足的導航、細致入微的交互、恰如其分的音效反饋、優(yōu)雅流暢的場(chǎng)景過(guò)渡、精致視覺(jué)質(zhì)感的打造,都為其增色了不少。
2 單頁(yè)面導航設計方法
。1)頁(yè)面導航的視覺(jué)化傳達方式。單頁(yè)面的導航,在視覺(jué)風(fēng)格和視覺(jué)形式上與之前網(wǎng)站導航設計形式,有了很多創(chuàng )新。視覺(jué)風(fēng)格上,導航的設計更多結合了網(wǎng)站的屬性風(fēng)格,有的導航也作為其中的裝飾元素而存在。與整個(gè)頁(yè)面產(chǎn)生視覺(jué)互動(dòng)。在視覺(jué)形式上,單頁(yè)面網(wǎng)站形成了獨特的布局特征:1)水平式延長(cháng)。水平式延長(cháng)是指橫向畫(huà)布,交互時(shí),頁(yè)面左右滑動(dòng),頁(yè)面在運動(dòng)中可以看到相關(guān)的其他界面元素,可營(yíng)造一種親切感的氛圍,不會(huì )產(chǎn)生更多的陌生感,從而最大限度地減少了干擾,幫助人們沉浸在整個(gè)網(wǎng)站的信息內容中。與內容交互,提升了用戶(hù)掌握的控制權,且讓他們感到自信。在頁(yè)面視覺(jué)設計上,每個(gè)頁(yè)面都要有相互關(guān)聯(lián)性,想成一個(gè)整體的畫(huà)面,從設計的風(fēng)格,到設計形式,都保持要一致性。使用平衡、層次結構來(lái)培養信任和完整性感覺(jué)。水平式延長(cháng)頁(yè)面主導航大部分是橫向的。2)垂直式延長(cháng)。垂直式延長(cháng)是指縱向畫(huà)布。交互時(shí),頁(yè)面上下滑動(dòng)。垂直式延長(cháng)頁(yè)面主導航有的是橫向的,有的是縱向的。
。2)頁(yè)面操控性與自然流暢性體驗。單頁(yè)面網(wǎng)站,最核心的就是操控性與流動(dòng)性體驗。點(diǎn)擊菜單選項可以看到屏幕如何從下至上以及從上至下地切換。點(diǎn)擊任一界面的主導航時(shí),導航都會(huì )有輕微的跳動(dòng)。這些簡(jiǎn)單的轉場(chǎng)效果直接傳達給用戶(hù)他們在操作系統里處于何種位置。讓人們直接與內容進(jìn)行交互,利用與其相符的精力對操作進(jìn)行響應。通過(guò)使用有意義的運動(dòng)使得體驗更加豐富,形成持續的視覺(jué)流動(dòng)的感覺(jué)。流動(dòng)性怎么能增強界面的視覺(jué)效果呢?動(dòng)畫(huà)在交互易用性方面體現了其優(yōu)勢,一個(gè)動(dòng)畫(huà)樣式的小轉場(chǎng),增強了頁(yè)面的視覺(jué)美感,連接了用戶(hù)體驗與界面之間的關(guān)系。交互動(dòng)畫(huà)會(huì )給用戶(hù)帶來(lái)一種舒適、自然和流暢的感覺(jué)。交互動(dòng)畫(huà)逐漸成了視覺(jué)界面與用戶(hù)之間的溝通方式,成為界面導航應用的肢體語(yǔ)言。它可以清晰表現出導航之間的切換過(guò)程。當用戶(hù)進(jìn)入一個(gè)不同的交互模式時(shí),比如兩個(gè)應用程序之間的切換,動(dòng)畫(huà)可以提供一個(gè)指引,告訴用戶(hù)已進(jìn)入另一個(gè)場(chǎng)景。在界面視覺(jué)設計過(guò)程中,合理運用交互動(dòng)畫(huà),讓界面與用戶(hù)更好的互動(dòng),能讓其變的更具情感。
3 單頁(yè)面用戶(hù)體驗
。1)信息結構方面,淺層的結構傳達直接性,有利于用戶(hù)體驗。單一頁(yè)面信息量較少。結構比較清晰,明確。其導航采用的是扁平結構,簡(jiǎn)化了的導航層級,導航的內容提取的也是主要信息,這樣信息傳達路徑縮短,直接,有利用戶(hù)很快找到相關(guān)的內容,方便體驗。合理的鏈接結構是提升網(wǎng)站權重的一個(gè)很好的方面,也能給用戶(hù)最好的體驗。
。2)視覺(jué)流動(dòng)性強,增強了用戶(hù)操作的真實(shí)體驗與趣味性。點(diǎn)擊任一界面的主導航時(shí),頁(yè)面在運動(dòng)中可以看到相關(guān)的其他界面元素,可營(yíng)造一種親切感的氛圍,不會(huì )讓用戶(hù)產(chǎn)生更多的陌生感,從而最大限度地減少了干擾,幫助人們沉浸在整個(gè)網(wǎng)站的信息內容中。當用戶(hù)進(jìn)入一個(gè)不同的交互模式時(shí),比如兩個(gè)應用程序之間的切換,動(dòng)畫(huà)可以提供一個(gè)指引,告訴用戶(hù)已進(jìn)入另一個(gè)場(chǎng)景。精心設計的有針對性的動(dòng)畫(huà)可以使網(wǎng)頁(yè)變得更豐富,并且使體驗感覺(jué)精良和完美。幫助用戶(hù)理解上下文環(huán)境變動(dòng),將體驗與視覺(jué)轉換緊密相連。
單頁(yè)面網(wǎng)站,最核心的就是操控性與流動(dòng)性體驗,交互操作產(chǎn)生的視覺(jué)動(dòng)畫(huà),是界面產(chǎn)生自然的流動(dòng)性。交互動(dòng)畫(huà)會(huì )給用戶(hù)帶來(lái)一種舒適、自然和流暢的感覺(jué)。單頁(yè)面網(wǎng)站正成為網(wǎng)站設計的一種趨勢。它正以獨有的視覺(jué)形式和表現形式進(jìn)入人們日常生活中。
參考文獻:
[1] 辛希孟.交互設計之路:A集[C].北京:中國社會(huì )科學(xué)出版社,2008.
[2] 馮西橋.情感化設計[R].北京:清華大學(xué)設計研究院,2009.
[3] 何齡修.讀顧城《操作界面設計模式》[J].2010(3):167-173.
【單頁(yè)面網(wǎng)站導航設計的策略論文】相關(guān)文章:
我國婦幼保健院網(wǎng)站設計中的導航設計研究論文10-29
網(wǎng)站的網(wǎng)絡(luò )推廣策略論文07-01
中國元素在專(zhuān)題頁(yè)面設計中的應用論文11-18
校園資訊網(wǎng)站設計論文11-16