當(dāng)前位置:首頁(yè) > 新聞中心 > 互聯(lián)網(wǎng)動(dòng)態(tài)
web導(dǎo)航菜單,還有哪些可行性的方案責(zé)任編輯 :李飛    文章來(lái)源 :星翼創(chuàng)想(16qt59sf.cn)    發(fā)布時(shí)間 :2017-09-01    閱讀次數(shù):2650     專(zhuān)題 :網(wǎng)站設(shè)計(jì)

web導(dǎo)航菜單還有哪些可行性方案:


分為以下幾大部分:


1.web導(dǎo)航菜單有哪些基本的形式,各自有哪些特點(diǎn)?


2.web導(dǎo)航菜單,還有哪些可能性?


1.web導(dǎo)航菜單有哪些基本的形式,各自有哪些特點(diǎn)


1.1水平導(dǎo)航


因?yàn)閷?dǎo)航菜單存在頂部(最不容易忽略的地方),易讀性更強(qiáng),最常見(jiàn)也最容易上手。


優(yōu)點(diǎn):減少對(duì)內(nèi)容區(qū)的干擾,可以更好的強(qiáng)化內(nèi)容區(qū)沉浸式的閱讀。因?yàn)榱艚o內(nèi)容區(qū)域的空間是最大的,所以對(duì)于橫向版面要求比較大的內(nèi)容(例如:后臺(tái)信息總覽大圖、大型的列表、類(lèi)似基于圖片的業(yè)務(wù))比較適合。


缺點(diǎn):橫向tab數(shù)量、以及沒(méi)給tab的字符數(shù)都存在限制。另外層級(jí)擴(kuò)展性也相對(duì)較差,單單水平導(dǎo)航層級(jí)最好不要超過(guò)2級(jí)。


思考點(diǎn):水平tab在視覺(jué)形式選擇上,需要注意什么?


下面是5種tab樣式:


當(dāng)導(dǎo)航菜單字符書(shū)較少時(shí),適當(dāng)?shù)膹?qiáng)化視覺(jué)效果(圖標(biāo),標(biāo)簽,下劃線(xiàn)),可以做出適當(dāng)?shù)牟町惢?,但是不能增加視覺(jué)負(fù)荷(因?yàn)榧訄D標(biāo)而加圖標(biāo),圖標(biāo)語(yǔ)義不夠,反而顯得擁擠)。


1.2垂直導(dǎo)航


優(yōu)點(diǎn):限制性更?。ú藛巫址麛?shù),菜單數(shù)量),另外具有一定的擴(kuò)展性(圖標(biāo)+文字,單純圖標(biāo),兩者之間的切換);菜單的自定義;菜單層級(jí)可以更加深(樹(shù)狀導(dǎo)航)。


缺點(diǎn):菜單層級(jí)上仍然存在限制,占用內(nèi)容區(qū)域,減弱了沉浸閱讀。


1.3混合型導(dǎo)航


混合型導(dǎo)航主要解決了水平/垂直導(dǎo)航的菜單層級(jí)問(wèn)題,在復(fù)雜的B端產(chǎn)品較為常見(jiàn)。


2.web導(dǎo)航菜單,還有哪些可能性


2.1彈出式導(dǎo)航欄


隨著響應(yīng)式技術(shù)普及,彈出式導(dǎo)航漸漸走出傳統(tǒng)陳舊的導(dǎo)航方式,導(dǎo)航移動(dòng)化。減少了頁(yè)面干擾元素,為頁(yè)面騰出更大的空間。適用層級(jí)淺,注重追求極致的的視覺(jué)體驗(yàn)的產(chǎn)品。


2.2首屏導(dǎo)航欄


因?yàn)榫W(wǎng)站信息層級(jí)淺,這種新型導(dǎo)航并不會(huì)引起網(wǎng)站功能性的不適,反而起到一個(gè)脫穎而出的效果。

以上兩個(gè)例子,因?yàn)樾畔蛹?jí)淺,新式的導(dǎo)航給web帶來(lái)了特有的調(diào)性。但是對(duì)于B端產(chǎn)品,這種方式是完全不適用的,多而深的層級(jí)下是不是就沒(méi)有其他的可能性了呢?


2.3B端產(chǎn)品導(dǎo)航菜單可能性1:“瀏覽器菜單”


適用信息架構(gòu)“淺而廣、并沒(méi)有明顯的優(yōu)先級(jí)“的產(chǎn)品。為了導(dǎo)航的簡(jiǎn)潔性,提高效率,菜單根據(jù)用戶(hù)需要顯示。


2.4B端產(chǎn)品導(dǎo)航菜單可能性2:“當(dāng)前導(dǎo)航菜單”


適用信息架構(gòu)“廣而深”的產(chǎn)品,“當(dāng)前導(dǎo)航菜單”可以在廣而深的菜單中獨(dú)立出來(lái),便于用戶(hù)的業(yè)務(wù)操作,減少因?yàn)椴藛吻袚Q帶來(lái)的行為負(fù)荷,也一定程度的減少了視覺(jué)負(fù)荷。


2.5B端產(chǎn)品導(dǎo)航菜單可能性3:Windows 10風(fēng)


模塊之間完全相互獨(dú)立,區(qū)分明顯,并且切換頻率低,內(nèi)容區(qū)對(duì)于沉浸式的操作要求較高(例如視頻業(yè)務(wù))。


2.6B端產(chǎn)品導(dǎo)航菜單可能性4:我的導(dǎo)航欄


例如OA系統(tǒng),模塊海量級(jí),深不可測(cè),用起來(lái)尤其痛苦。我的導(dǎo)航欄+樹(shù)型導(dǎo)航更配。



本文轉(zhuǎn)載自網(wǎng)絡(luò),版權(quán)歸原作者所有!



文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址:http://16qt59sf.cn/news/industry/1874.html

掃碼添加微信
159 8667 8737
24小時(shí)電話(huà)

返回頂部