中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

除此之外還有更多基于上述兩個(gè)導(dǎo)航欄拓展出來(lái)的導(dǎo)航欄，比如更多目錄，縮放、疊放等等，但是它們的原型都是上述兩個(gè)導(dǎo)航，只不過(guò)是適用于不同場(chǎng)景而做的的拓展。

那么為什么B端系統(tǒng)的導(dǎo)航欄都會(huì)選用側(cè)邊和頂部呢？這里需要借助一個(gè)新的知識(shí)點(diǎn)：F模式。

F形狀網(wǎng)頁(yè)瀏覽模式源自美國(guó)網(wǎng)站設(shè)計(jì)工程師杰柯伯·尼爾森在2006年4月發(fā)表的《眼睛軌跡的研究》報(bào)告。

F模式是指人們?cè)诰W(wǎng)頁(yè)上瀏覽內(nèi)容時(shí)，往往會(huì)遵循F字母的觀察模式：

1. 讀者的眼睛首先是水平運(yùn)動(dòng)，常常是掃過(guò)網(wǎng)頁(yè)內(nèi)容的最上半部分，這樣就形成了一條橫向的運(yùn)動(dòng)軌跡。這就是F字母的第一條橫線。
2. 讀者的眼光略微下移，很典型地掃描比第一步范圍較短的區(qū)域。這就又畫(huà)了F字母中的第二條橫線。
3. 讀者朝網(wǎng)頁(yè)左邊的部分進(jìn)行垂直掃描。有時(shí)候，這個(gè)舉動(dòng)很慢而且很有系統(tǒng)性，這樣就畫(huà)了F字母中的一條豎線。

通過(guò)這次實(shí)驗(yàn)，我們可以得出一個(gè)結(jié)論，那就是縱向或者橫向，能夠讓瀏覽者第一時(shí)間注意到，這也是為什么我們需要讓導(dǎo)航置頂，或者保持在側(cè)邊欄的一個(gè)因素。因?yàn)檫@些地方，會(huì)被瀏覽者重點(diǎn)關(guān)注。

那么為什么側(cè)邊導(dǎo)航會(huì)比橫向?qū)Ш揭媚?？我們可以從兩個(gè)方面來(lái)探究：布局和適配。

1. 布局

從布局角度來(lái)說(shuō)，橫向?qū)Ш接袃?yōu)勢(shì)，因?yàn)闄M向?qū)Ш綑谡紦?jù)的位置非常小，通常只有一行內(nèi)容。

而側(cè)邊導(dǎo)航欄則不同，往往需要占據(jù)一個(gè)頁(yè)面的 1/5 來(lái)做展示，會(huì)更多影響其他的內(nèi)容。

但是這里面橫向?qū)Ш綑谟幸粋€(gè)缺點(diǎn)無(wú)法避免，那就是一旦導(dǎo)航欄內(nèi)容過(guò)多時(shí)，用戶的操作就會(huì)非常不方便，需要滾動(dòng)或者隱藏后續(xù)內(nèi)容，導(dǎo)致操作成本和認(rèn)知成本過(guò)高。

2. 適配

從適配角度而言，現(xiàn)在多端場(chǎng)景越來(lái)越常見(jiàn)，那么橫向?qū)Ш綍?huì)面臨一個(gè)非常大的問(wèn)題，當(dāng)從PC端遷移至移動(dòng)端時(shí)，因?yàn)長(zhǎng)OGO、用戶頭像、狀態(tài)圖等信息占據(jù)頭部橫向位置，導(dǎo)致導(dǎo)航欄的內(nèi)容會(huì)被進(jìn)一步壓縮。

這個(gè)時(shí)候，用戶操作成本進(jìn)一步提高，當(dāng)導(dǎo)航內(nèi)容過(guò)多時(shí)，用戶需要來(lái)回滑動(dòng)自己的手機(jī)屏幕找到自己的位置，這違背了導(dǎo)航的初衷，即明確自己在哪，指引用戶到自己想去的地方。

而側(cè)邊導(dǎo)航欄則可以避免這個(gè)問(wèn)題，側(cè)邊導(dǎo)航往往只有展開(kāi)和收起兩個(gè)狀態(tài)，遷移到不同端上時(shí)，我們只需要讓側(cè)邊欄合理的展示對(duì)應(yīng)的內(nèi)容即可，用戶可以進(jìn)行一定程度上的自定義，因?yàn)閭?cè)邊欄往往并不需要和其他元素共用位置。

03 總結(jié)

無(wú)論是側(cè)邊導(dǎo)航還是橫向?qū)Ш?，它們的作用都是清晰的，指引用戶。我們?yīng)該基于此目的來(lái)設(shè)計(jì)導(dǎo)航，在合適的場(chǎng)景下去使用合適的導(dǎo)航，當(dāng)導(dǎo)航內(nèi)容過(guò)多，且使用多端設(shè)備時(shí)，我們應(yīng)該更多的考慮側(cè)邊縱向?qū)Ш剑驗(yàn)樗募嫒菪院筒僮鞒杀靖佟?/p>

當(dāng)你的導(dǎo)航內(nèi)容不多，且頁(yè)面瀏覽內(nèi)容較多時(shí)，那么我們應(yīng)該考慮橫向?qū)Ш?，提高?yè)面的利用率，降低導(dǎo)航欄所占據(jù)的版面位置。

當(dāng)然無(wú)可否認(rèn)的是，這兩種導(dǎo)航欄方式都是極其好的。

更重要的一點(diǎn)是，我們應(yīng)該保持一個(gè)系統(tǒng)內(nèi)的不同頁(yè)面之間導(dǎo)航欄一致，千萬(wàn)不能出現(xiàn)A頁(yè)面使用縱向?qū)Ш?，B頁(yè)面使用橫向?qū)Ш降那闆r。統(tǒng)一使用有利于用戶操作，也方便我們做優(yōu)化。

本文由 @子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議