毕业论文
您现在的位置: 卡片 >> 卡片前景 >> 正文 >> 正文

一文读懂如何打造B端导航设计人人都是产

来源:卡片 时间:2022/10/2

编辑导语:B端产品对于导航界面的结构设计比较注重,用户在进入页面的第一时间就对整个页面有一个大概的初印象,而且B端产品的功能性较强,所以对于设计方面要格外注意;本文作者分享了关于打造B端导航设计的思考,我们一起来了解一下。

导航作为网站或者平台的骨架,是产品设计中不容忽视的一环。

最近有幸接触到关于B端专题分享,课程中学到了很多关于导航的知识,于是结合自身对导航设计的理解,并综合当下导航设计相关的资料书籍,对B端导航设计作如下阐述;从多角度深入细节去解析导航,总结的一些方法和思考分享给小伙伴们,也希望大家从更多的角度跟我一起探讨。

本文主要从导航的结构层面出发去分析系统导航控件的组成与样式,而不是仅仅停留在导航的外观和形式上。

一、认识导航

1.导航的定义

我们先来圈定一下导航的范围,我们研究的是B端的导航设计,那到底啥是导航?

假设:同事约我们到一个陌生的大型商场吃饭,当我们到商场后,我们会通过什么找到约定的餐厅?

一般情况,我们都会通过商场楼层索引找到餐厅所在楼层和区域吧。如果商场里索引指示清楚的话,我们就能快速找到约定的饭店,不然,我们会感到困扰,自己瞎找,走了很多冤枉路还不一定找到,最后只能寻求朋友或商场工作人员帮助,难免会有不满。

其实商场楼层索引与B端导航作用很像,都是为了告诉我们,这里有什么、我可以做什么、我在什么位置?导航就是一种对信息的分类,帮助用户找到想要的信息,完成预期的任务,告诉用户从哪里来?用户在哪里?用户可以去哪儿?

很多同学会将它和菜单弄混淆,菜单是一种对动作的分类和集合,点击菜单之后,会立马产生相应的动作,而导航点击后,你看到的是信息分类的合集。

而且在B端系统中的后台系统是根据具体业务设计的,作为一个后台系统设计师,知道如何在狭小的屏幕空间选择合理的导航形式表达业务内容是很重要的。

2.导航的作用

告诉用户这里有些什么。导航通过让层次结构可视化,从而告诉用户网站上有些什么,有效地体现站点内容。告诉用户如何使用网站。好的导航能够帮助用户规划行程,含蓄地告诉用户该从哪里开始,能进行哪些选择,帮用户快速找到所需内容。确定用户的位置。当用户到达某一个地方,好的导航会告诉用户“你在哪里”让他们知道所在位置,避免迷路。

二、导航的分类

可能提到导航分类就会想到:顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等;但是这些都不是今天我们要讨论的重点,这些都只是导航不同的外观形式的区分,哪有人就有疑问了:那导航和导航条是一致的吗?

导航条也仅是导航的一种外观。今天我们要说的是从结构和交互层面出发,针对对象去解析我们的导航。

1.全局导航GlobalNavigation

特点:

可以覆盖整个产品的通路,往往是产品的一级信息分类,是用户操作上贯穿始终的导航;不一定包含全局信息,但是一定可以去到关键节点。

2.局部导航LocalNavigation

特点:

在同一个架构中,可以到这个节点的上下一级的通路;有严格的父子级关系,局部导航与全局导航有层级关系,局部导航帮助用户进入更加特定的页面。通常情况下,一个通路代表一个界面(这里的通路是交互上的概念),一般局部导航为二级导航。

3.辅助导航SupplementaryNavition

特点:

提供用户在全局/局部导航不可到达的相关内容的快捷途径;这个快捷途径是在本产品内的。例如在我们站酷的收藏文件夹页面,想要快速到达编辑作品收藏夹,这时候我们使用辅助导航,它可以帮助解决用户下一步去哪里,还能提供什么帮助等问题,优秀的设计是让用户可能多的使用关联导航,而不是全局和局部导航。

4.内嵌导航

特点:

也叫上下文导航,嵌入页面自身内容的导航;通常同在上下文超级链接,引导搜索等。

5.友好导航

特点:

给用户提供一个便利的前进途径,在需要的时候能找到信息入口,帮助提升网站可用性的功能,并不是主要功能,但却不能缺少,通常摆放位置在界面右上角。

通常置于网站右上角关于用户、消息、登录、帮助等导航,比如站酷右上角消息中心、我的个人服务等。

6.远程导航

特点:

不包含在产品结构中,以独立的方式独立存在于产品内。通常是网站地图、索引表(地址选择、品牌选择)等。

三、导航的外观

1.导航的外观

导航的类型有很多种,同样结构的导航可以使用不同的外形,常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可根据组件库进行统一设定。

顶栏菜单多为一级菜单,点击切换页面,或作为下拉菜单的父级,将子级菜单合理分类。

侧栏菜单为垂直导航菜单,可以内嵌子菜单。

下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

步骤条引导用户按照流程来完成任务,一般步骤不得少于两步。

四、导航的贴士

1.导航尽量扁平,保持稳定就算要多一次点击

三次点击已被证实无效,保证稳定的结构,多一次点击也未必是坏事。

网站导航的目标是为了让用户快速找到自己所需的内容,不能一味的追求扁平的导航结构,使得整个网站的信息分类混乱;所以,要根据情况综合考虑信息分类的广度与深度,对于信息的分类,常见的可以通过卡片分类法来进行划分。

比如小鹅通的后台导入用户藏的很深,通过用户管理到用户列表,再到导入用户。

再比如,我们平时使用

转载请注明:http://www.0431gb208.com/sjsbszl/1936.html