浅谈web端导航设计 @UED频道

时间：2023-09-07 08:48:02 | 来源：网站运营

时间：2023-09-07 08:48:02 来源：网站运营

浅谈web端导航设计 @UED频道： 导航作为网站或者平台的骨架，是产品设计中不容忽视的一环。结合自身对于导航设计的理解，并综合当下导航设计相关的资料书籍，对web端导航设计作如下阐述，望本文能对读者有所启迪，也期盼能有机会与大咖沟通交流。

导航的价值

是器，是术，而非终点。导航设计的目的不是设计导航，导航是内容或者功能的定位、导向与通道；除了竞品捕食者，一般用户恐怕没有欣赏导航的习惯；同样，除了在完成其使命的同时，导航更多承担的是一个静默者的角色。

召之即来，挥之即去的功能主义者。导航更多情况下是功能主义的倡导者，他的存在是具备使命性的，一般操作过程中，用户更多是在进入页面前、进入界面初、将要离开界面时才会愈加关注导航设置；如没有特殊的需求，在满足其“导”与“航”功能的前提下，个人感觉，导航应尽量弱化。导航的存在毕竟是服务并烘托内容与功能的，任何导航中心化的设计不免有舍本逐末之嫌，改变了其应有的属性。

偶尔想起你，却又不能没有你。优秀的导航设计更是一个网站或者平台的宏观概览，同时也是用户与网页间的关键触点。面向用户一连串哲学性的问题“我们从哪里来？”“我们在哪里？”“还可以做什么？”，总是可以给予肯定的回答。

优秀导航的素养

在满足基本的功能性需求外，优秀的导航还具备如下属性：

无感知：该观点似乎不仅仅应用于导航设计，似乎任何功能性设计最佳的体验便是在无意识状态下完成任务。这种无意识更多的是无障碍、无不适，仿佛你永远不会想回家的路该如何走，因为对于家的位置，你非常了解。而设计所构建的呈现模型也应努力向用户心理感知靠近。或许，优秀的设计，便是无感知的。

一致性：基于格式塔理论的整体性原则，用户观察内容是总是将相近或者关联的内容视为一个整体，同级导航的一致性也是必然的，这种一致性体现在交互、元素等各个方面。

扁平的导航结构：构建合理高效的信息架构是平台搭建的关键，一般网站架构三到四级即可；而今愈受欢迎的全屏导航设计似乎也表明用户更加倾向于一步到位的操作。

积极的交互反馈：导航设计需关注交互细节，给予用户操作前、操作中及操作后不同阶段的反馈，并需保持交互的一致性。

导航分类

结构导航：遵循导航层级结构，包括全局导航和局部导航；全局导航顾名思义，是用户操作上贯穿始终的导航；局部导航，其操作范围只针对平台部分界面或者模块适用。

关联导航：解决用户下一步去哪里，还能提供什么等问题；优秀的设计是让用户尽可能多的使用关联导航，而不是结构导航。

可用性导航：通常置于网站右上角关于用户、消息、登录、帮助等导航。

常见的导航模式

结合当下优秀导航设计案例，将导航模式做如下归类，还是按结构导航和关联导航两个大类展开，结构导航分为：全局导航、顶部导航、左侧导航、右侧导航、底部导航、个性化导航、混合导航；关联导航分为面包屑导航、卡片式导航、分步式导航；另外部分网站采用无导航模式。以上分类仍有不足，后期个人也将不断更新完善。

全屏导航-抽屉式

网址：http://www.vitysdesign.com/

说明：点击上方折叠按钮，下拉展开导航（全屏显示）；全屏导航页在一定层度上提升了网站扁平化，是导航新兴趋势。




全屏导航-抽屉式

网址：https://adwyse.de/#!/ueber-uns.html

说明：导航一分为二在左侧和右侧对称显示，适用于趣味性较强，简单娱乐性网站

顶部导航-下拉式

网址：https://www.zcool.com.cn/

说明：导航水平分布；鼠标悬浮下拉，可选择二级导航，跳转至二级界面

顶部导航-标签式

网址：https://www.apple.com/cn/

说明：导航水平分布；导航区域固定；标签平铺展示，点击进入相应界面；




顶部导航-网页定位

网址：https://prollective.com/

说明：点击对应导航，页面滚动至导航对应模块




顶部导航-纵向分布

网址：https://prollective.com/contact

说明：导航字体较小，纵向排布于页面右上角；既方便用户切换，且预留出空间呈现内容


左侧导航-标签式

来源于METRONIC web模板

说明：左侧纵向排列；web内容或层次较多时，常用该导航样式（若导航层级三级或者多于三级可考虑双导航栏布局）；导航栏菜单可实现整体折叠或局部折叠，折叠方式可纵向或横向。


左侧导航-抽屉式

网址：http://www.vitysdesign.com/

说明：点击左上方折叠按钮，左侧划出导航栏

右侧导航-抽屉式

网址：http://futurewatercity.com/

说明：点击右上方折叠按钮，右侧划出导航栏；右侧导航与用户日常操作不符合，多用于导航切换频率低的场景

底部导航-标签式

网址：http://www.galleristapp.com/

说明：导航平铺于页面底部，适用于趣味性较强，用户操作性较强的网站

底部导航-网页定位

网址：https://www.croptrust.org/2014/home

说明：导航平铺于页面底部，点击切换网页滚动定位至相关模块




个性化导航-左右布局

网址：https://shuka.design/

说明：导航一分为二在左侧和右侧对称显示，适用于趣味性较强，简单娱乐性网站




个性化导航-可视化

网址： http://futurewatercity.com/
http://www.thehappyforecast.com/

说明：由整体到局部，采用可视化元素引导用户


个性化导航-差异化

网址： http://grazsecrets.at/

说明：顶部导航居中放置下载菜单，鼓励用户点击下载

个性化导航-交互式

网址：https://www.signesduquotidien.org/

说明：长按“导航球”将其拖入中间虚线框内，则跳转至对应界面，增强用户互动性

混合导航-电商平台

网址：https://www.suning.com/

说明：全局导航和商品导航并行，采用不同分类标准；可用性导航及快捷入口位于上方和右侧




混合导航-双导航

网址：http://hao.shejidaren.com/index.html

说明：顶部导航+左侧导航；顶部导航为一级导航，左侧导航为二级导航；一级导航较少，二级导航多的场景更契合

无导航模式

网址：http://www.quincy-requin-avocats.com/

说明：适用于无目的游客或者内容介绍与预览，打造旅行式体验；通过鼠标滚动和前进/后退按钮进行操作


关联导航-卡片式导航

网址：https://www.zcool.com.cn/work/ZMTg3MjI1NTY=.html

说明：卡片式布局是web端布局的一大趋势，关联导航也更多采用该样式引导下一步操作，构建安全网，防止用户离开,常用【猜你喜欢】【更多类似】【查看更多】等引导用户

关联导航-面包屑导航

网址：https://product.suning.com/0000000000/690105195.html

说明：面包屑导航用于表示页面间的层级关系、用户当前位置、并方便用户执行返回操作；当前电商平台面包屑变异，将其与产品类型筛选与搜索控件复合使用

分步式导航

来源于METRONIC web模板

说明：分步式导航多用于流程性操作引导，方便用户了解当前位置，对之后步骤也有预见性；部分分步式支持点击切换，返回之前步骤

导航设计实践论

做好导航设计，个人建议需要关注以下几个方面：

严谨的信息架构搭建：信息架构的搭建是网站的基础，可尝试采用卡片分类法对导航进行分类筛选；而对于导航设计目前已经形成的规则，个人还是建议遵循的，改变用户行为总是要付出成本的。

可视化语义表达：可采用颜色、icon等元素提高导航可视性，根据NNG
study的研究：用当户在网页检索信息时，相比于只有文案，通过颜色和icon的差异化设计的视觉指引能让用户快37%。

注重交互细节：加强触点交互反馈；对同一级导航制定统一的交互行为规则、反馈及循环模式等，例如鼠标每次悬浮，菜单背景灰色显示，文字由深灰变为蓝色；另外需注意，对不同层级的导航可进行差异化处理，凸显导航层级。




以上为个人对导航设计的些许梳理，望大家不吝赐教。