網(wǎng)站的導(dǎo)航就如同網(wǎng)站的一個風(fēng)向標,用戶在網(wǎng)站上想去某個頁面就要通過導(dǎo)航菜單。如果導(dǎo)航菜單設(shè)計的不合理或者結(jié)構(gòu)有誤,那么一個網(wǎng)站的整體結(jié)構(gòu)就是散亂的,沒有邏輯和用戶體驗可言的。如果想讓網(wǎng)站擁有優(yōu)秀的用戶體驗,良好的轉(zhuǎn)化率,可觀的銷售額,你需要花費相當(dāng)?shù)臅r間去了解你的用戶需求,精心設(shè)計網(wǎng)站的內(nèi)容,尋求可靠而直觀有效的內(nèi)容組織體系,而這些東西的外化體現(xiàn),就是網(wǎng)站的導(dǎo)航設(shè)計。本文以
上海官網(wǎng)制作為例,來談?wù)勅绾卧O(shè)計網(wǎng)站導(dǎo)航更高效?
什么是導(dǎo)航?
許多人對于網(wǎng)站導(dǎo)航設(shè)計的認知并不統(tǒng)一。有人認為,構(gòu)成網(wǎng)站導(dǎo)航的是網(wǎng)頁中的焦點元素,它們讓用戶清晰直觀地找到他們想要的東西。同樣的,還有人認為導(dǎo)航設(shè)計是一種方法,引導(dǎo)用戶去尋找網(wǎng)站上最重要的信息,以達到銷售或者查詢等目的。這些說法都沒問題,它們都是導(dǎo)航設(shè)計的一部分。
和設(shè)計領(lǐng)域的許多東西一樣,導(dǎo)航設(shè)計并沒有一個統(tǒng)一一致的“官方”的設(shè)計方法,或者說法,每個網(wǎng)站由于其目標、需求、設(shè)計手法、運營等諸多因素導(dǎo)致它們在導(dǎo)航設(shè)計上千差萬別,但是在最基本的設(shè)計思路和組織結(jié)構(gòu)上,導(dǎo)航設(shè)計還是有基本的規(guī)律和原則,確保組織架構(gòu)可靠,降低失敗的機率。
1、首先確定信息架構(gòu)
規(guī)劃一個大型網(wǎng)站,規(guī)劃好內(nèi)容是進行導(dǎo)航設(shè)計之前的第一要務(wù)。而我們此處所說的信息架構(gòu)(IA,Information Architecture),是合理的組織信息的展現(xiàn)形式,支撐起網(wǎng)站內(nèi)容的骨架。信息架構(gòu)的主要任務(wù)是為信息與用戶認知之間構(gòu)建一座暢通的橋梁。
從更高的位置來看待網(wǎng)站內(nèi)容有助于信息架構(gòu)的搭建。更重要的是,你得學(xué)會從用戶的角度來看待網(wǎng)站內(nèi)容。這也就意味著,有的時候你得站在正反兩個位置來看待同一個東西,不同視角下你會發(fā)現(xiàn)有的內(nèi)容的呈現(xiàn)方式非常反人類。你可以通過下面的問題來完善整個架構(gòu):
·哪些頁面是這個網(wǎng)站必不可少的?
·從宏觀架構(gòu)上來看是否每個頁面都有其獨立的目的,它們的存在是否影響整體的連續(xù)性和可靠性?
·有哪些內(nèi)容是需要在將來持續(xù)提供并更新的?
·網(wǎng)站所需要涉及到的用戶群有哪些?(登錄用戶、訂閱用戶、廣告商等等)
·針對每種用戶,網(wǎng)站所要達成的目標是什么?
思考這些問題能夠幫助你更好的完善網(wǎng)站的信息架構(gòu),為導(dǎo)航設(shè)計做好準備。
2、保持簡單
絕大多數(shù)的網(wǎng)站瀏覽者可能會一致的認同這一點:網(wǎng)站的導(dǎo)航區(qū)域要盡可能設(shè)計的簡單。的確,復(fù)雜而擁擠的導(dǎo)航欄設(shè)計會嚴重阻礙網(wǎng)站的整體可用性。
然而,簡單的設(shè)計還是具有欺騙性的。用戶在隨后的操作中會發(fā)現(xiàn)復(fù)雜的信息被以一種看起來簡單的方式包裝了起來。這就是信息架構(gòu)的作用。
以微軟的首頁為例,網(wǎng)站的導(dǎo)航欄被劃分成四個項目,考慮到微軟龐大的產(chǎn)品線,這幾乎已經(jīng)被簡化到了極致。也正是因此,每個項目的下拉菜單都被巧妙地分割成為幾段,這樣一來,導(dǎo)航的層級就清晰了,用戶可以更快地找到他們想要的東西,而微軟也可以將復(fù)雜多樣的產(chǎn)品和服務(wù),整合到一個看似簡單的導(dǎo)航欄里面。
類似迷你站的子頁面中,導(dǎo)航欄也沿用了相同的設(shè)計。菜單的設(shè)置乍一看和首頁很相似,實際上設(shè)計者加入了更多細節(jié),更有針對性的功能和服務(wù)。
總的來說,這樣的導(dǎo)航欄設(shè)計更加易用了,在保持一致的前提下,也具備更好的預(yù)測性??紤]到微軟的產(chǎn)品體量,產(chǎn)品所需的頁面數(shù),微軟官網(wǎng)的設(shè)計很明顯是耗費了大量時間迭代開發(fā)的產(chǎn)物,殊為不易。官網(wǎng)在這樣的組織架構(gòu)之下,不僅讓用戶的體驗更好了,而且對于微軟而言也更加便于管理內(nèi)容。這不僅保持簡單,也簡化了復(fù)雜。
3、謹慎選擇方向
傳統(tǒng)意義上的電腦屏幕方向是橫向的,這也使得縱向下拉菜單,在很長的一段時間里面成為了導(dǎo)航欄設(shè)計的主流方向。這樣的設(shè)計,平衡且少干擾,從設(shè)計的角度上來看是不錯的選擇。
作為虛擬現(xiàn)實設(shè)備制造商的Oculus,將導(dǎo)航設(shè)計成為橫向的非常符合他們的設(shè)備的自然邏輯。
但是橫向的導(dǎo)航并不一定符合所有的網(wǎng)站的需求,這也是為什么你會看到那么多縱向?qū)Ш降木W(wǎng)站,尤其是在電商領(lǐng)域。彩色的標簽被用來標識不同的品類,縱向的導(dǎo)航設(shè)計,與現(xiàn)實世界中的導(dǎo)購圖冊暗合。這樣的導(dǎo)航符合多品類,多內(nèi)容的信息架構(gòu),橫向?qū)Ш接迷诖颂帟驗槠奉惡臀淖謨?nèi)容而產(chǎn)生混亂。
一個良好的垂直方向的導(dǎo)航,要設(shè)計好并非易事,尤其是當(dāng)你的網(wǎng)站內(nèi)容非常多的時候。Jack Jones 的網(wǎng)站是一個很好的學(xué)習(xí)對象。
網(wǎng)站導(dǎo)航中的小圖標擁有不錯的可讀性,簡單的形狀包含了可觀的信息,整齊而有力。每點擊一個類別,菜單展開,顯示子類,邏輯清晰。
規(guī)則正在改變
新工藝新技術(shù)的不斷涌現(xiàn),使得新的設(shè)計趨勢和新的挑戰(zhàn)源源不斷呈現(xiàn)在我們面前。響應(yīng)式網(wǎng)頁設(shè)計使得桌面上傳統(tǒng)的橫向?qū)Ш皆谝苿佣顺尸F(xiàn)的時候,更多是以縱向?qū)Ш降男问奖憩F(xiàn)出來。導(dǎo)航的設(shè)計不再被固定的方案所束縛,多種多樣的表現(xiàn)手法都可以產(chǎn)生不俗的效果。但是,設(shè)計和測試的迭代方法,最好還是圍繞著網(wǎng)站轉(zhuǎn)化率和統(tǒng)計數(shù)據(jù)來進行。如果你有更多關(guān)于
網(wǎng)站設(shè)計/開發(fā)、印刷服務(wù)、
品牌設(shè)計、營銷推廣、APP/微信開發(fā)、數(shù)據(jù)業(yè)務(wù)等相關(guān)需求,請登錄創(chuàng)新互聯(lián)官網(wǎng)咨詢。
作為驅(qū)動網(wǎng)站發(fā)展的引擎,導(dǎo)航設(shè)計的好壞是可預(yù)計的,精心布置又簡單一致的。
網(wǎng)站欄目:如何設(shè)計網(wǎng)站導(dǎo)航更高效?
本文URL:http://jinyejixie.com/news30/33030.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計、網(wǎng)站導(dǎo)航等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)