如何构建直观有效的导航结构(下)

当前位置:首页>设计文章>UI>如何构建直观有效的导航结构(下)

在“关于导航设计的发现之旅”的第一站里,我们介绍了构建导航的基本原理和方法。没看过的小伙伴点这里可快速回看

如何构建直观有效的导航结构(下)
如何构建直观有效的导航结构(下)

如何构建直观有效的导航结构(上)

从上次的介绍中能知道,导航结构的重要性在于帮助用户理解各页面的关系,并从一个页面精确导航到目标页面。

没有定义结构的产品或网站只是页面的随机集合。

如何构建直观有效的导航结构(下)

在第二站里,将带着大家重点分析设计导航结构时需要牢记的事情~

01 首页访问

首页应充当访问者的导航中心。这样可以提高可发现性,访问者更有可能找到相关内容,并向搜索引擎显示最重要的页面。
三次点击的原则建议用户只需单击三下鼠标就能找到任何信息。
此规则将帮助确定信息的优先级。理想情况下,重要页面应该距离首页有2-3次点击,不那么重要的有4-5次点击。
同时首页的导航格式和设计决策要保持一致。因为一致性能提高网站的可预测性,让使用户用起来更安心。

02 用户心理模型

心理模型是解释人在现实生活中如何进行工作以及思考的描述。
心理模型不匹配是产品设计师之间的常见问题,产品团队成员容易陷入错误共识效应的陷阱。
通常,他们会根据自己的想法而不是用户的真实需求,将行为和反应投射到设计布局和导航中。
如何构建直观有效的导航结构(下)

要创建功能强大的网站导航,必须从全面的用户研究开始。首先了解用户的需求和行为,然后将内容映射给目标受众。

03 定位当前位置

无法指出当前位置可能是最常见的错误。
“我在哪里”是良好的导航必须回答的基本问题之一。通过明确他们在哪里来确保访客在正确的位置。
通过向页面添加面包屑导航(面包屑导航是一系列可单击的链接,通常在页面顶部出现),可以使站点的导航结构更清晰。
如何构建直观有效的导航结构(下)
面包屑导航能反映网站的结构,并帮助访问者确定他们在网站上的位置。

它也是许多大型网站的重要组成部分,例如携程上面的导航设计,信息层级分明,展示内容清晰。

04遵循移动端优先的思想

如果设计师从针对移动端产品的信息架构开始设计时,考虑到移动端页面的局限性,就会被迫在页面上放置最重要的内容。
移动端优先的思想帮助确定内容和导航的优先级。
如何构建直观有效的导航结构(下)
在喜马拉雅app中关于有声小说的分类,展示的是言情、悬疑和都市这三个栏目;在网页版本的分类里,这三项仍然是最靠前的位置,之后才是其他栏目。

因此,在开始进行桌面设计时,要清楚地了解要包含的导航选项以及要在各个页面上显示的优先顺序。

05 考虑认知能力

在给定的时间内,没有太多信息可以让人的大脑处于最前沿。
一个普通人可以在短期记忆中保留的对象数是72。这意味着,如果导航设计中有很多选项,那么无法一次把所有这些选项都提供出来。
当导航系统包含太多链接或过于冗长时,将变得难以扫描和理解,结果会让内容变得难以找到。
如何构建直观有效的导航结构(下)
与其立即摆上所有内容,不如将信息分类并逐步提供给用户。

站酷首栏的导航就是好的例证,在可认知的范围内,分层次把内容展示出来。

06 根据用户旅程图评估导航结构

用户的旅程很少是线性的。大多数情况下,它们的转换路径涉及多个入口点和接触点,这直接影响了导航系统。
准备好导航和标签后勾勒整个结构,然后创建一个旅程图。定义交互方案并评估用户将访问哪些页面以完成此方案。
如何构建直观有效的导航结构(下)

07 使用数据分析来告知导航结构

在进行导航时,始终牢记业务目标即希望人们在网站上做什么。使业务目标与人们实际在网站上采取的行动相匹配,并据此设计信息架构。
可以使用诸如Google Analytics或Hotjar之类的分析工具来了解当前的导航模型是否适合用户。
如何构建直观有效的导航结构(下)

小结

导航是用户与系统之间的对话,良好的导航结构是反映用户行为的有效对话。这就是为什么导航设计过程中应将用户放在首位。

始终从用户角度评估导航设计的有效性,使其适应用户的心理模型。
同时用户应参与产品设计的所有步骤——从创建信息架构到对各种类型的设备进行网站导航的最终测试,以此来构建良好的导航结构。

关于导航设计的发现之旅到这里就结束了,希望整个过程让你有所收获!

如何构建直观有效的导航结构(下)
如何构建直观有效的导航结构(下)
如何构建直观有效的导航结构(下)

走,咱们去点赞!

温馨提示:

文章标题:如何构建直观有效的导航结构(下)

文章链接:https://www.uied.cn/19010.html

更新时间:2023年05月16日

本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI设计干货

如何构建直观有效的导航结构(上)

2023-5-15 19:01:18

交互设计干货

掌握视觉层级原则,优化用户体验

2023-5-15 19:01:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索