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

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

导航是与可用性直接相关的因素之一。如果没有合适的导航系统,当我们进入一个网站后,很可能会感到犹豫迷茫。

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

今天就和大家分享网站设计时应考虑的因素,构建出直观易用的导航结构。

良好的导航是详细研究结果。同样设计应该使用户可以轻松进行导航并通过搜索和浏览找到所需内容。

01 网站信息架构与导航的区别

设计师有时会混淆信息架构和导航的概念。确实,这些概念密切相关,但是它们并不相同。信息架构为导航的设计提供指导。

信息架构是通过我们合理安排各方面的内容,使内容易于理解的方式。

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

信息架构定义网站的内容和功能,而导航则是帮助访问者查找信息和功能的界面组件的集合。

导航的形式包括全局和本地导航菜单,面包屑导航,上下文链接等。

02 导航结构的指导原则

导航的主要目的是帮助访问者通过功能查找信息,并鼓励他们深度访问。

1. 易用性

在导航时,无论访问者来自哪个页面,他们都必须能够在该页面和网站的其他页面上找到所需的内容。

良好的导航应该像一只看不见的手,引导用户找到想要的信息。

2. 可见性

隐藏的导航模式会增加用户忽略导航选项的可能性。

即使用户知道信息隐藏在某个图标(汉堡键)后面,他们也可能会忘记点击,因为它们不处于视线的直接范围内。

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

所以应该明确导航并用户能的位置。

03 内容组织模型

内容组织模型是定义网页间关系的组织结构。内容组织模型是网站导航结构的基础。
让我们看一下常见的模型:

1. 单页模型

单个页面包含所有必需的信息和导航选项。当产品页面需要展示的信息很少时,单页模型是理想的选择。此模型最适合于单一的网页。

2. 扁平模型

在扁平化结构中,所有页面都是同等重要的,它们被置于导航系统的同一层级中。此模型最适合小型网站。
如何构建直观有效的导航结构(上)

3. 分层模型

分层模型显示从主要信息到次要信息的层级关系,是大型网站的默认选择。
它包括标准的分层模型和共存的分层模型。在标准的分层模型中,子页面仅和上一层级的父页面关联。
如何构建直观有效的导航结构(上)
在共存的分层模型中,可以从多个父页面/更高级别的页面访问子页面。
如何构建直观有效的导航结构(上)

04 建立导航结构的方法

信息架构与导航有着直接的联系。清晰的信息架构为接下来的导航系统奠定坚实的基础。
这就是在设计导航之前定义信息架构的原因,信息架构帮助处理信息的数量和复杂关系,并设计出更好的导航。

1. 建立分类法

创建分类法是构建网站结构中极为重要的一步。分类法试图对不同的非结构化信息进行分组并对其进行描述,以创建更结构化的设计。
对内容进行分类的最重要的方式是卡片式分类。(之前的文章里介绍过卡片式设计,点这里回看

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

卡片式设计的特点和使用场景)

信息架构应该始终牢记目标用户,分类的重点在于用户如何看待网站的内容。

2. 定义网站的结构

创建分类法后,需要定义网站的结构。阶段的目标明确定义网站的各个页面优先级关系。

这里建议采用宽泛的方法来组织内容,因为这与人们期望交互的方式(从一般到特定)完全吻合。

例如苏宁易购的主页中就采用范围广泛的内容组织形式,主页充当各种产品类别的导航中心。

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

3. 创建导航元素

建立网站的层级结构后,下一步就是设计实施。当设计师为每种类型的内容选择适当的导航元素时,导航结构应该提供自然的信息流。
考虑各种类型的导航:

主要导航。主要导航是全局导航,可在所有页面上使用。此导航包含全局的选项,使用户可以从每个位置访问网站的主要部分。

二级导航。通过提供上下文相关的内容来辅助主要导航。

内容导航。内容导航提供细分化的页面信息,这些信息可以是搜索的结果页或者内容页。

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

关于导航设计的发现之旅还很长,本次的分享先到这里,主要介绍构建导航的基本原理和方法,希望对你有所帮助~

下一站将重点分析设计导航结构时需要牢记的事情,请时刻关注…

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

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

走,咱们去赞!

除非注明,否则均为UIED用户体验学习平台-Clip设计夹的原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.uied.cn/19009.html

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

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

帮你改善产品UX设计的实用要素

2023-5-15 19:01:12

UI设计干货

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

2023-5-15 19:01:24

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