网站导航设计模式
新闻 2024-9-22编辑：深圳网站建设阅读（）标签：
网站导航设计模式
可靠的导航设计需【xū】要帮【bāng】助【zhù】用户达成目标，找到内【nèi】容，提升页面的【de】转化率【lǜ】。设计不合理【lǐ】的导航对于用户体验是灾难【nán】性【xìng】的，下面是【shì】小编整理的
网站导航设计模式，仅供参考。
1、带有流畅动效的下拉导航菜单
下代菜单【dān】是UI设【shè】计【jì】中最常见的设计元【yuán】素，作为一种扩展性【xìng】良好的控件，它在【zài】被触发之后扩展显示更多的选项，呈现更【gèng】多的【de】内容。下拉【lā】菜单有许多【duō】种不同的衍生样式【shì】，在导航设【shè】计中也很常见。许多传统的导航当中【zhōng】，导【dǎo】航【háng】元【yuán】素的下拉菜单是需要点【diǎn】击【jī】触发【fā】的，而现【xiàn】在更【gèng】多【duō】的设计【jì】师会【huì】选择光标悬浮在导航元素上【shàng】的时【shí】候触发，这样对于用户会更加省心省力。
为了【le】确保导【dǎo】航的整【zhěng】洁清晰，如今网页的主【zhǔ】要导航【háng】类目通常不会太【tài】多，控制在4~6个选【xuǎn】项，而下拉菜单则用来【lái】承载二级导航元素，这样就节【jiē】省了【le】空间【jiān】，也让信息层【céng】级更【gèng】加清晰。
这种设计模【mó】式对于用户而言【yán】并【bìng】不陌生，浏览起来也颇为【wéi】方【fāng】便，对【duì】于多层级、大量选项的导航需【xū】求而言【yán】，它正好可以应【yīng】对。值【zhí】得注意的是，光标悬浮触发下拉菜【cài】单的时候，展现的动效要【yào】足够【gòu】的微【wēi】妙，降低【dī】用户打【dǎ】开的突兀【wū】感，这样【yàng】会【huì】让体验更加优秀。
2、汉堡菜单+侧边栏
汉堡菜【cài】单【dān】加【jiā】上弹出【chū】式的侧边【biān】栏在iOS和 Android 平台上都是极为常见【jiàn】的导航设计【jì】模式。虽【suī】然有数据表明，汉堡菜单和默认隐藏的侧边【biān】栏导【dǎo】航在打【dǎ】开率上并不如常【cháng】见【jiàn】的显性导航，但是它在体验上有独特的【de】优【yōu】势，让整个界面更加简【jiǎn】约、整洁【jié】，干扰性更小。用户点击汉堡【bǎo】菜单，侧边栏【lán】导【dǎo】航从侧面滑出显【xiǎn】示，用户可【kě】选择他们想要点【diǎn】击的选【xuǎn】项。
汉【hàn】堡菜【cài】单和侧边栏的搭配特【tè】别【bié】适用于响应式的网页设计，例如【rú】Android 平台的 Gmail 官方应用，YouTube 和 Facebook，均【jun1】是沿用【yòng】了这样的设计【jì】。
隐【yǐn】藏式的侧边栏导航，在很【hěn】大程【chéng】度上【shàng】让用户更加专注于主要【yào】的【de】界面内容，让界面【miàn】更加整洁。虽然【rán】打【dǎ】开率不如显【xiǎn】性导航【háng】，但是在很多情况下，这种隐藏性的设计更符合实际【jì】需求。
3、悬浮固定网页导航菜单
悬浮固定的【de】导航菜单在【zài】越来【lái】越多的网页【yè】设计中出现，当用户【hù】在滚动页面向下【xià】浏览的【de】时候，悬浮固定导航在页【yè】面顶部悬【xuán】浮【fú】不动【dòng】，随【suí】着用户浏览，它们【men】一直都可见【jiàn】，用户无【wú】需滚动到顶部就【jiù】可以点击导航跳转。
目前【qián】，悬浮固定导航【háng】菜单已经成为常见的导航设计手法【fǎ】，电商、产品类的网【wǎng】站，多会【huì】选择这样的导航设计，便于用户快速跳转。这种导航【háng】设计的优【yōu】势在【zài】于快速、便【biàn】捷【jié】，用户对于在网站【zhàn】不同的页面间跳转的需求比较大，那么这样的设计【jì】能够省去很多麻烦。根据【jù】 Akamai 和【hé】 Gomez.com 的【de】调研，79%的线【xiàn】上购物的用户【hù】，在遭遇糟【zāo】糕的浏览和导航体【tǐ】验之后，会一【yī】去不复【fù】返【fǎn】，由此可见【jiàn】，便捷的导航是多【duō】么【me】重要【yào】。
4、深度定制的超大导航菜单
此处我【wǒ】们所说的深度【dù】定制的超大导航菜单，更接近选【xuǎn】项卡的设计，它们大多分【fèn】为2个层【céng】级，不同【tóng】的选项【xiàng】被组【zǔ】织到【dào】不同的选项卡当中，选项卡中所【suǒ】承【chéng】载的导航选项相比于【yú】下拉菜【cài】单更大，设计也【yě】更加视【shì】觉化，更易于点击【jī】选取。有的选项当【dāng】中甚至【zhì】会包含【hán】文本和【hé】说明【míng】，便于【yú】用户进行选择。
这【zhè】种超大导航菜单当中的子选项的【de】尺寸足够【gòu】大，视【shì】觉化设计也足【zú】够突出，可见性【xìng】极强，用户很【hěn】难【nán】选【xuǎn】错。
超大导航菜单所能容纳的导【dǎo】航【háng】条目相对【duì】更多、更加视觉化，和【hé】开头所说的下拉菜【cài】单导航类似，光标【biāo】悬浮在标签页上的时候，自动显【xiǎn】示下面的【de】选项。根据 NNGroup 的研【yán】究，这类导航当【dāng】中，导【dǎo】航菜【cài】单越【yuè】大，越受【shòu】欢【huān】迎。
这种导航菜【cài】单适合对可访问性要求高的网页，对【duì】于【yú】有视【shì】力障碍和进【jìn】阶用户都更为【wéi】友【yǒu】好。另外【wài】一【yī】方面，这种【zhǒng】导航还为设计师提供了更【gèng】多发挥的空间。
5、响应式卡片栅格导航
响应式的【de】设计就不必赘述，但是卡片栅【shān】格式的导航【háng】无疑是从移【yí】动端开始流行的导航模式【shì】。在这里，导航选项【xiàng】被设【shè】计【jì】成为小【xiǎo】卡片，置于导航栏的栅格当中，当屏【píng】幕尺【chǐ】寸发生【shēng】改变的时候，导【dǎo】航中【zhōng】的小卡片会随着自适应的栅格而重新排列【liè】，以匹配整个布局【jú】。这种【zhǒng】设计【jì】不【bú】仅【jǐn】高度【dù】可视化，而【ér】且可以根据【jù】主题风格，进行深度的【de】定制。
