看点高级的
拿点有用的
学点真干货
找点新财路
发布
登录
注册
最全的导航设计
三悠
杭州
/
设计爱好者
/
228天前
/
777浏览
版权
私信
关注
最全的导航设计
三悠
关注
导航用来展示当前产品中，用户在哪儿，可以去哪儿。
设计目标
让用户明确知晓当前所处产品中的位置，并方便快捷地带用户到ta想去的地方。
设计原则
可循性
用户可定位到他们想要的信息。
高效
多接入点：对同一目的地提供多个链接。
捷径：提供访问内容的捷径，如相关链接。
逃生舱：点击logo回到首页重新启动信息搜寻。
设计建议
信息架构
设计时应尽量保持浅平宽的信息架构层级。
从用户的使用路径考虑导航，而非仅基于层级结构。
常见的组织方式有：
按主题，例如产品提供的服务或内容分类，好处是直接呈现站点的内容范围。
按受众群体，例如管理员、运营、操作员。
按任务，例如了解合作模式、联系合作专员、签约流程、合作联调、业务运营、客户服务。
导航路径
完善的导航应该允许用户沿多种路径移动：
A-平移：同层级跳转
B-下钻：进入低层级的内容
C-返回：返回浏览历史或高层级内容
D-联想导航：根据相关性导航至内容
收藏
类型
正确理解和使用导航组件对产品全局体验至关重要。
我们将导航划分为以下5种类型：
全局导航
返回类导航
业内导航
下钻类导航
联想类导航
收藏
全局导航
全局导航体现网站的核心组织架构。
收藏
侧边导航
很多菜单时使用，建议菜单多于6项时使用。
可以承载多个层级，但建议1-3个层级。
企业级产品推荐使用侧栏导航，其可见性更好，易于扫读，各菜单重要性受菜单排列顺序影响较小。
收藏
顶部导航
各菜单权重常常与排列顺序呈正相关，即排列顺序影响用户使用频次。
建议2-7项内容使用。
建议 1-2个层级，超出2个层级时，建议采用弹出式导航。
收藏
弹出式导航
用于拓展导航承载层级，适用于大型网站。
站点地图式导航可以让用户对整个网站的可用功能一目了然。
不要让用户沿着狭窄的悬停路径获取导航菜单。
不要让用户逐层打开每层菜单去查找，低效又困难。
此建议仅针对导航类菜单，不适用于操作类菜单。
收藏
实用工具
通常放在网站的右上角，是一种习惯用法，用户习惯在这个位置找到这些内容。
内容通常包括：
全局搜索
通知中心
网站帮助
客服信息、购物车
收藏夹
登录工具
语言切换
不要将页面内的操作放到实用工具中。
收藏
子站点导航
企业级产品常采用层级+数据库混合结构的信息架构，这种信息架构通常层级较深，为了实现用户感知层面的浅平宽，将较深几个层级组织为一个子站点，降低单个站点层级数量，减轻用户认知负担。
另一种子站点场景是，面对一些任务复杂，需要较大的工作空间，以子站点的方式沉浸式处理任务。最常见的是编辑器。子站点模式下，对全站导航功能需求低，通常只需提供一个返回上级或回到首页的出口。
此处的数据库是一种信息架构形式，各页面内容独立，但都遵循一致的形式/格式。
收藏
沉浸式导航
用于处理较为复杂或需要较大工作空间的任务。
收藏
多级站点导航
菜单数量较多的子站点使用。
子站点设计上，应明显区别于全站导航，使得进入子站点需要较大的过渡波动，提示用户进入了新的空间。
收藏
页内导航
信息架构中较低层级的内容导航可以使用页内导航，如果页面需要分享给他人，需在URL添加定位标记。
页头
页头位于页内容上方，主要作用是申明页面主题、页内信息导航、页面级内容操作。
收藏
tree树型控件
页面内多层次的结构展示。
收藏
锚点
在各个页面分区之间跳转，当平铺呈现的内容过长时使用。
收藏
回到顶部
快速回到页面顶部。
收藏
走马灯
循环播放一系列内容。
收藏
下钻类导航
点击进入信息架构下层内容，默认站内跳转，站外新开标签页，典型场景为列表下钻至详情。
返回类导航
面包屑
反映当前页面在网站结构中的位置，在少于三个层级时无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。
收藏
返回按钮
一般标题会和面包屑一起出现，有面包屑时标题默认不推荐使用返回按钮。
页头中的返回按钮相当于一个短面包屑，用于返回上一层级页面。适用于子站点场景，该场景隐藏了全站导航，用户需要通过返回按钮回到上级页面。
收藏
联想类导航
步骤条
按照预先定义的顺序引导用户一步一步前后移动。
在一系列页面的每一页上都展示步骤条，并标记当前页面在这条线性路径上的位置。
适用于：
用户访问路径是线性的。
步骤条将复杂的任务分解为易于处理的小任务，减少用户出错，更快完成任务。
收藏
上一篇下一篇
协助我们移动到其他关系紧密的网页。
收藏
如何验证设计结果
验证导航系统的设计好坏可对其进行压力测试：像跳伞一样跳进网站里，验证导航系统的极限。
忽略首页，随机直达网站某一页面。
看用户是否能知道当前位置以及与网站其他部分的关系。在哪个网站的哪个部分？上层网页是什么？
是否知道这个网页会带你到哪里去？链接文字是否能说明去向？
注：以上文中配图均来自于网络或应用截图，仅作学习分享使用。
3
举报
|
声明
2
分享
原创文章
UI
网页
相关推荐
换一换
怎么找到体验设计灵感 第5期
244
三悠
怎么找到体验设计灵感第4期
410
三悠
B端数据可视化的设计思路
111
三悠
数据可视化太重要了
51
三悠
列表总是做不好？不知道什么原因，来这里看看
81
三悠
关注
电商
沐鱼姑娘
如何设计列表页
48
三悠
会员精选
跨境电商详情页 | 充气泵 ✖ LCX光锥设计
15
光锥设计
推广
表单设计的三大场景
78
三悠
B端表单页设计总结
198
三悠
交互设计灵感总结
123
三悠
评论
登录
评论你的想法~
表情
发布评论
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
你可能喜欢
换一换
蘸水笔针管笔｜电灯花
290
CatCastleDZ
Tagg塔吉|文具品牌全案设计
168
回声实验室
AIGC原创PV短片《赤魔》
272
热点映象
日常的诗学重构 展览设计
173
一颗蛋设计OneEgg
Amazon亚马逊 I 主图A+ [合集]
202
好也视觉_AI
STAR FLASH（星闪）—嘻哈精神IP形象
357
建模机器MK
相关收藏夹
换一换
关注
电商
沐鱼姑娘
关注
国潮&国风
6489
曜Shea
关注
地产VI
1715
喾二
关注
品牌VI系统
1986
恶狗设计中心
关注
白酒包装 酒产品
934
老馬识图
关注
简历/作品集/述职
3713
瘫_ATAN
大家都在看
查看更多
IP 形象
国庆
LOGO 设计
海报设计
插画设计
壁纸图片
作品集
VI 设计
UI 设计规范
AI 绘画
表情包
PPT模板
、设计
设计.
设计】
设计
设计、
设计
#设计#
🤮设计
设计‘’
is设计
设计‘
设计
设计。
#设计
if设计
设计，
设计
@设计
an设计
设计 、
设计|
设计／
设计
#设计
#设计
设计#
#设计
设计
设计’
以设计
设计in
in设计
AS设计
it设计是
by设计
a设计
it设计
把设计
登录注册
3
登录即可同步推荐记录哦
2
登录即可加入我的收藏
评论
登录即可评论想法
分享
分享
![Amazon亚马逊 I 主图A+ [合集]](https://img.zcool.cn/community/6a38dcce3687ayo427oj4f8979.png?k=3e3252ae8478be33fb4a58c54147c367&t=6a662f00&x-oss-process=image/resize,m_fill,w_520,h_390,limit_1/auto-orient,1/sharpen,100/quality,q_80)
