重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
4个要点教你设计更好的导航
相比于直接搜索，用户更喜欢用导航，因为导航是让用户做选择题，而搜索是填空题（导航文案是现有的信息，不需要经过用户大脑的额外加工去进行搜索)。并且他解释道：如果链接的文案与用户寻找的内容相符，那他们直接点击链接的可能性更大。
尽管导航设计一直是一个有争议的话题，仍然有一些比较好的应用规则，是作为用户体验设计师的我们，在进行网站导航设计时值得注意的：
保持(导航结构的)连贯性和一致性；设计清晰易懂的交互方式；设计扁平的导航结构；考虑响应式设备的兼容性。
一、保持（导航结构）的连贯性和一致性1-1子页面与落地页
连贯性的产生也需要经过内容的筛选，不是所有的导航项目都需要展示其子页面链接，亦或者全都不展示；而是要展示那些会让用户误以为不展示其子页面链接，就没有更多内容的导航项目。
如果子页面链接没有在一级导航结构中展示，那么就要确保其在各个板块的次级导航结构中的使用始终保持一致（不要在这个版块是一级导航结构中展示，而到了另一个版块却是在二级导航结构中展示）。
同样，所有的一级导航项目要么都是跳转到落地页的链接，要么都是作为二级导航链接的标题。如果一部分是跳转到落地页，另一部分则是二级导航链接的标题，那么用户就会在点击时产生疑惑。
在视觉设计上，同样应该比较明显的示意处，一级导航项目到底是跳转到落地页的链接？还是二级导航机构的标题、字体的颜色和样式，鼠标指针的变化？
此外，如果一级导航项目是一个链接，那么就要清楚地示意相关操作，或者通过文案措辞或者通过视觉设计。
在FairfaxCountyPublicSchool’s官网的Fullmenu栏下，用户可以通过点击“Career”文案来链接到“Career”落地页，或者点击向右的箭头来展开查看次级导航项目的标题。
这与前面讲的导航机构的一致性也是相符的：一级导航项目要么都调到次级落地页；要么都作为二级导航项目的标题入口。如果两者都有，那么就在样式上作区分。
二、设计清晰易懂的交互方式2-1功能的可视化
视觉元素的变化，可以帮助用户搞清楚网站有哪些可能的交互形式。例如：把关闭状态的按钮滑至开启意味着某个设置改变了，并且知道如何反置。当icon没有改变，那么用户可能就无法预知操作结果。
三、设计扁平的导航结构
为了设计一个很好的导航结构，好的网站信息架构和层级才是关键。当网站的信息层级结构图已经出来时，此时就要尽力去设计一个扁平的导航结构，这种扁平的结构要能让用户只需要点击一两次就可以去到最底层的页面。
尽管扁平的导航结构固然是最理想的，但是仅仅因为短时记忆的局限，而把菜单设计得很简短也是错的。
就像NielsenNormanGroup说的：
菜单的意义是让用户辨识导航栏项目，而不是让用户去回忆(导航栏项目)。
所以菜单必须设计的简短以方便用户浏览，但是信息必须表达明确。(菜单栏必须设计得简洁明了，表意准确)
3-1限制导航层级
导航结构的层级数最终是由网站的信息层级所决定，理想状态下，用户需要点击的导航层级越少，那么用户到达他们的目标页面也就越快越清晰。
3-2为每一层级设计独特的视觉(或者说差异化每一层及的视觉感受)
用户应该能够快速浏览导航信息，并且知道那些链接分别是哪个层级的导航项目，这些链接的摆放和分组都应该建立在这种层级基础上。
像字体样式、字体大小、字体权重或者颜色这些视觉设计，都应该建立在导航层级之上，并且应该始终保持一致。如果使用一个次级导航，那么它与其父/子或者同级导航链接的设计，也同样应该区分开来并且与主导航保持一致。
3-3使用位置指引
就像面包屑导航结构，导航栏上的当前位置释义能帮助用户找到自己当前的位置，尤其是如果他们处在一个层级比较深的页面，这种清晰的视觉指引可以帮助用户明白他们在哪个页面。
四、考虑响应式设备的兼容性
一个好的导航结构可以很好的适应手机和平板电脑，设计导航结构时应该考虑到多端通用，或者考虑使用两种相似的导航结构，这种结构不会让用户去切换思维模式去适应移动端和PC端的不同。
4-1移动端没有hover态
用户在PC端hover主导航项目时状态显示次级导航的内容链接，然而移动端没有hover状态，这就会使得移动端和PC端不能保持一致。用户在使用移动设备时，不会像在PC上本能地hover菜单来找他们想要的内容。
如果非得要把两种交互形式用在一个内容链接上，可以考虑设计两个不同的点击位置(产生不同的点击效果)，就像之前看过的FairfaxCountyPublicSchools的案例——点击主导航标题文案本身可以跳转到一个页面，然后点击标题文案旁边的加号，可以展开这一部分主导航的内容。
4-2为移动端设计不同于PC的导航形式
例如：日本的时代周刊在PC端的导航结构设计，用的是宽屏而且是横向分布排列的导航条。而在移动端同样的导航内容用的是汉堡包式导航设计，并且它在展开时利用的是手机长条的纵向空间这种特点。
当点击一级导航标题时，二级导航标题会在其下方展开，而不是将导航区域分割成一级、二级导航两条纵列。
成都网站建设科技告诉大家，这种设计并不是机械的把PC端的导航形式照搬到移动端，可以注意到移动端蓝色线条，是更加挨着次级导航标题而不是主导航，这实际上更符合移动端上的设计。
网页名称：4个要点教你设计更好的导航
文章URL：http://cqcxhl.com/article/sppoog.html
尽管导航设计一直是一个有争议的话题，仍然有一些比较好的应用规则，是作为用户体验设计师的我们，在进行网站导航设计时值得注意的：
保持(导航结构的)连贯性和一致性；设计清晰易懂的交互方式；设计扁平的导航结构；考虑响应式设备的兼容性。
一、保持（导航结构）的连贯性和一致性1-1子页面与落地页
连贯性的产生也需要经过内容的筛选，不是所有的导航项目都需要展示其子页面链接，亦或者全都不展示；而是要展示那些会让用户误以为不展示其子页面链接，就没有更多内容的导航项目。
如果子页面链接没有在一级导航结构中展示，那么就要确保其在各个板块的次级导航结构中的使用始终保持一致（不要在这个版块是一级导航结构中展示，而到了另一个版块却是在二级导航结构中展示）。
同样，所有的一级导航项目要么都是跳转到落地页的链接，要么都是作为二级导航链接的标题。如果一部分是跳转到落地页，另一部分则是二级导航链接的标题，那么用户就会在点击时产生疑惑。
在视觉设计上，同样应该比较明显的示意处，一级导航项目到底是跳转到落地页的链接？还是二级导航机构的标题、字体的颜色和样式，鼠标指针的变化？
此外，如果一级导航项目是一个链接，那么就要清楚地示意相关操作，或者通过文案措辞或者通过视觉设计。
在FairfaxCountyPublicSchool’s官网的Fullmenu栏下，用户可以通过点击“Career”文案来链接到“Career”落地页，或者点击向右的箭头来展开查看次级导航项目的标题。
这与前面讲的导航机构的一致性也是相符的：一级导航项目要么都调到次级落地页；要么都作为二级导航项目的标题入口。如果两者都有，那么就在样式上作区分。
二、设计清晰易懂的交互方式2-1功能的可视化
视觉元素的变化，可以帮助用户搞清楚网站有哪些可能的交互形式。例如：把关闭状态的按钮滑至开启意味着某个设置改变了，并且知道如何反置。当icon没有改变，那么用户可能就无法预知操作结果。
三、设计扁平的导航结构
为了设计一个很好的导航结构，好的网站信息架构和层级才是关键。当网站的信息层级结构图已经出来时，此时就要尽力去设计一个扁平的导航结构，这种扁平的结构要能让用户只需要点击一两次就可以去到最底层的页面。
尽管扁平的导航结构固然是最理想的，但是仅仅因为短时记忆的局限，而把菜单设计得很简短也是错的。
就像NielsenNormanGroup说的：
菜单的意义是让用户辨识导航栏项目，而不是让用户去回忆(导航栏项目)。
所以菜单必须设计的简短以方便用户浏览，但是信息必须表达明确。(菜单栏必须设计得简洁明了，表意准确)
3-1限制导航层级
导航结构的层级数最终是由网站的信息层级所决定，理想状态下，用户需要点击的导航层级越少，那么用户到达他们的目标页面也就越快越清晰。
3-2为每一层级设计独特的视觉(或者说差异化每一层及的视觉感受)
用户应该能够快速浏览导航信息，并且知道那些链接分别是哪个层级的导航项目，这些链接的摆放和分组都应该建立在这种层级基础上。
像字体样式、字体大小、字体权重或者颜色这些视觉设计，都应该建立在导航层级之上，并且应该始终保持一致。如果使用一个次级导航，那么它与其父/子或者同级导航链接的设计，也同样应该区分开来并且与主导航保持一致。
3-3使用位置指引
就像面包屑导航结构，导航栏上的当前位置释义能帮助用户找到自己当前的位置，尤其是如果他们处在一个层级比较深的页面，这种清晰的视觉指引可以帮助用户明白他们在哪个页面。
四、考虑响应式设备的兼容性
一个好的导航结构可以很好的适应手机和平板电脑，设计导航结构时应该考虑到多端通用，或者考虑使用两种相似的导航结构，这种结构不会让用户去切换思维模式去适应移动端和PC端的不同。
4-1移动端没有hover态
用户在PC端hover主导航项目时状态显示次级导航的内容链接，然而移动端没有hover状态，这就会使得移动端和PC端不能保持一致。用户在使用移动设备时，不会像在PC上本能地hover菜单来找他们想要的内容。
如果非得要把两种交互形式用在一个内容链接上，可以考虑设计两个不同的点击位置(产生不同的点击效果)，就像之前看过的FairfaxCountyPublicSchools的案例——点击主导航标题文案本身可以跳转到一个页面，然后点击标题文案旁边的加号，可以展开这一部分主导航的内容。
4-2为移动端设计不同于PC的导航形式
例如：日本的时代周刊在PC端的导航结构设计，用的是宽屏而且是横向分布排列的导航条。而在移动端同样的导航内容用的是汉堡包式导航设计，并且它在展开时利用的是手机长条的纵向空间这种特点。
当点击一级导航标题时，二级导航标题会在其下方展开，而不是将导航区域分割成一级、二级导航两条纵列。
成都网站建设科技告诉大家，这种设计并不是机械的把PC端的导航形式照搬到移动端，可以注意到移动端蓝色线条，是更加挨着次级导航标题而不是主导航，这实际上更符合移动端上的设计。
网页名称：4个要点教你设计更好的导航
文章URL：http://cqcxhl.com/article/sppoog.html