菜单优设网 - UISDC

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

导航栏设计话题

首页
设计文章
导航栏设计

UI 2.3w

从5个方面循序渐进，帮你掌握导航栏 Navigation Bar 的设计方法

本文分别从功能作用、布局样式、如何突出重点、视觉细节、交互细节5个层面梳理了导航栏设计策略和设计思考。

2021/12/01

设计师doo

主编推荐

UI 2.7w

超详细！总监出品的B端设计规范指南（六）：导航栏

本文对 B 端一些常见的导航组件进行解析，帮助大家更好掌握导航细节设计。

2021/09/13

酸梅干超人

UI 1.1w

这6种类型的菜单图标和用法，这篇全总结了！

不同的样式可能代表着截然不同的设计目的，常思考这些小而精的细节，是保证产品体验提升的关键。

2021/09/06

土拨鼠

UI 2.4w

顶部导航 vs 侧边导航，到底哪种更好用？

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。

2021/08/18

陈子木

UI 2.1w

如何设计出体验更好的 UI 底部导航栏？

编者按：设计 UI 底部导航栏可以说是绝大多数 UI 项目当中必然会遭遇的设计内容，而这篇来自设计师 Vikalp Kaushik 的文章详细梳理了底部导航栏的最佳实践：导航在 UI 界面当中是相当常见、直接影响用户体验的基础组件。通常底部导航，会用到图标、文本标签等元素，看起来不复杂，但是想要设计出效果，在视觉、交互、体验、逻辑上确保质量，还是有很多注意事项的。这篇文章就系统梳理一下 UI 导航栏的设计。

2021/08/05

陈子木

UI 1.2w

从主流海外产品中，提炼了 8 个底部导航栏设计技巧

本文通过分析海外多款主流产品，带大家掌握底部导航栏（Tab Bar）的基本知识。

2021/08/02

土拨鼠

交互 1.8w

5000 干货！写给设计师的导航栏设计指南

这篇文章介绍了导航栏的基础规范，也列举业内对导航栏的设计做的比较好的一些应用，包括导航栏如何配合操作进行变化，如何让信息更加高效展示等。

2021/07/30

土拨鼠

产品 3.0w

如何做好底部导航栏图标设计？来看高级设计师的全面总结！

图标在产品中的应用非常重要，不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。

2020-07-03

土拨鼠

UI 1.3w

iOS 人机界面指南精简版笔记之界面元素：Bars

最近仔细研读了苹果官网最新的设计规范。网上没有找到很满意的翻译版本，于是自己老老实实的啃了几遍官方文档，顺便把学习笔记输出给大家分享一下。

2020-04-06

土拨鼠

UI 1.9w

用三期干货，全方位解析「标签栏」控件设计

本系列将分三期全方位解析如何做好标签栏设计，第一期先从 iOS 人机交互规范和 Google Material Design 平台规范切入，来系统梳理一下「标签栏」。

2020-03-26

土拨鼠

UI 2.7w

用交互经典四原则，帮你做好导航栏设计

我参阅了大量的应用，想总结出它们是如何运用导航栏来给产品赋能的。竟然很巧地发现，再花式的导航栏设计也难逃「四策略」手法。

2020-03-13

土拨鼠

UI 1.8w

用一篇深度好文，帮你完全掌握导航栏知识点

你是否遇到过导航栏页面控件叫不上来专业名称的情况？本文是作者工作中的一些导航栏知识内容沉淀分享，帮你更加深入了解导航栏。（文末附导航栏 Symbol 组件库福利）

2020-03-04

土拨鼠

交互 3.4w

6000 字干货！B端产品的导航菜单设计5步法

导航菜单设计对用户使用、体验都尤为重要，来看高手经验的全面总结，更新你的导航菜单知识体系，全程干货，快来学习！

2020-02-19

土拨鼠

交互 3.0w

掌握了这个导航控件，你可以设计80%的应用导航

底部导航栏可以说是现在最流行的导航控件了，如何使用这种极普遍的导航控件呢？看完这篇你就会了！

2019-05-29

程远

导航栏设计

交互 2.2w

交互基础小课堂！移动端的导航设计模式

在《用户体验的要素》一本书中，Jesse James Garrett 将用户体验分为了五个层级，战略层，范围层，结构层，框架层，表现层。其中在框架层里面有一个很重要的概念就是导航设计，作者对导航设计的定义是：元素的组合，允许用户在信息架构中穿行。我觉得可以把导航设计理解为：我们从用户的心智模型出发，结合业务目标，对信息架构的一个梳理，来帮助用户完成目标。

2018-05-26

程远

网页 2.3w

想设计好网站的悬浮导航，这12个案例不容错过

导航是网站和 APP 当中必不可少的组成部分，它们引导用户抵达目标，发现内容。为了让用户能够更加方便地使用导航，许多网站和 APP 选择使用了顶部悬浮导航，无论浏览到哪里，都能轻松使用它跳转到其他地方。虽然有的用户并不喜欢这个一直占据屏幕空间的小控件，但是它确实提供了无与伦比的便捷性。

2018-03-30

陈子木

web导航设计

教程 2.8w

最常见的Tab该怎么设计？来看这篇超全的总结

王M争：今天这篇文章来给大家分析一下Tab。其实它隶属于产品导航体系的一部分，所以你要了解Tab，必须要它放在导航体系中来分析。希望这篇文章可以帮助大家以后更合理的去使用Tab。

2017-11-26

程远

教程 7.8w

超实用！网页顶部导航栏设计方法总结

网页中的header，一般我们称之为顶部导航栏，这里为了行文方便，以下都简称顶部栏。顶部栏对于一个网站的用户体验来说是至关重要的，因为根据用户的浏览习惯（从左到右，从上到下），当他们进入一个新的网站，顶部栏通常是他们最先看到的地方。我们都知道用户对于你产品的第一印象是很重要的，因为它会一直伴随接下来的使用过程，而且第一印象无法更改。

2017-11-03

程远

导航栏设计

教程 2.2w

轻松看懂规范！详解组件控件结构体系之导航类

Echo ：本文将详细阐述组件控件结构体系中的导航系统，分别为7类：底部标签式导航、分段控制式导航、列表式导航、下拉菜单式导航、抽屉式导航、宫格式导航和卡片式导航。什么是控件？什么组件？

2017-10-08

程远

导航栏设计

教程 1.9w

这5种成熟的导航设计模式，可以为用户体验加分

导航设计千变万化，但是能够同时兼顾到可用性、易用性还能够带来足够舒适体验的导航模式，就不是那么多了。可靠的导航设计需要帮助用户达成目标，找到内容，提升页面的转化率。设计不合理的导航对于用户体验是灾难性的，最直接的影响，是用户不再能足够快捷方便的找到想要的页面和内容，间接地影响了网站的转化率和用户的留存率。

2017-09-01

陈子木

web导航设计

教程 1.2w

汉堡图标不好使？这5个替代方案帮你搞定移动端导航

对于设计师而言，移动端设备屏幕上的每一寸空间都是宝贵的资源。为了在小屏幕上做更多的事情，设计师在设计导航系统的时候，通常需要花费更多的时间来打磨。汉堡图标在过去几年当中，是最常见的一种设计策略，导航和选项被隐藏在这个小小的图标之后，但是实际上，虽然大众已经习惯了它的存在，但是它并不是最佳的导航设计方案。

2017-08-23

陈子木

教程 2.1w

那些让人一见钟情的网页首屏，遵循着怎样的设计模式？

无论是APP还是网页，第一印象都很重要。再优质的内容，都需要首屏这个漂亮的脸面来吸引用户驻留，才能被人注意到。在竞争激烈的数字产品领域，这是难以辩驳的残酷经验。

2017-06-09

陈子木

导航栏设计

产品 1.1w

PM要多加底部导航时，设计师如何说服他打消念头？

记得之前写过关于标签导航如何设计的一篇文章，大体上的介绍了几种类型，这周正好遇到一个关于标签导航的问题：产品经理要求在底部的导航中由原来的五个主功能增加至六个，交互设计师如何说服产品打消这个念头？本周就这个问题我详细说下当中的几个要点以及延伸出来的几个问题。标签导航如何设计：《超实用！

2017-03-31

程远

UI 1.8w

超实用干货！聊聊底部导航设计的四个关键原则

@惜可若己：设计师都知道设计绝不仅仅是做出外表好看的东西，设计还涉及到如何做才能让用户使用你的网站/应用程序。这项工作内容就像跟用户间对话一样，而导航就是对话内容之一。因为如果用户连他们究竟在哪儿都搞不清楚，那你的网站/应用程序设计得再棒又有什么用呢？

2016-08-12

程远

教程 2.5w

万剑归宗！值得学习总结的网页导航设计最佳实践

优质的网页设计通常都有着相当不错的导航设计来支撑。如果你的网站有着有趣的内容和受欢迎的视觉设计，那么一个体验良好，可用性优异的导航栏无疑是必须的。可用和易用一直是高效交互的核心，也是激发创意、创造高效设计和优秀视觉设计的基础。

2016-03-27

陈子木

优秀网页设计

酷站推荐 1.5w

这创意给满分！有哪些炫酷好玩儿的网页导航设计？（二）

编者按：以前的网站创意导航都喜欢在大小、形式、色彩以及排版方面上玩花样，现在与时俱进，都会加上酷炫的动效了。比如今天这组网站，就有不少在动效上玩得很溜，找灵感的同学不妨来看看。Signes du quotidienGiampiero BodinoNorilsk filmAndy Wolf Eyewear BreweryCrop Trust – Annual Report 201430uGiorgio Armani – Frames of LifeQuechua Lookbook Spring Sum...

2016-01-13

程远

优秀网页设计

酷站推荐 2.2w

这创意给满分！有哪些炫酷好玩儿的网页导航设计？（一）

编者按：以前的网站创意导航都喜欢在大小、形式、色彩以及排版方面上玩花样，现在与时俱进，都会加上酷炫的动效了。比如今天这组网站，就有不少在动效上玩得很溜，找灵感的同学不妨来看看。VOIDZero LandfillWeber – BBQ CulturesI am SachaShare the Force34SilenzaSons of GallipoliJoseph a avouéFS MillbankLe Dernier GauloisPanicThe Happy ForecastGinventory...

2016-01-12

程远

优秀网页设计

酷站推荐 1.7w

意料之外的设计！20个将导航玩得独一无二的网站

编者按：导航是网站不可或缺的一部分，看惯了一成不变传统的网站导航和今年倍受宠爱的隐藏式汉堡菜单导航，是时候来点不一样的刺激下灵感了。这20个网站不仅都有自己脑洞大开的导航设计，整体设计也是创意丰满，一起来点意料之外的惊喜吧。Vincent TavanoACT FestivalECC ArchitecturalPrint GalleryHeat ArchitectureThe Mark HotelGloria CortinaIreneAlice + WhittlesBeth ElleryTWO5SIX...

2015-10-23

程远

优秀网页设计

教程 4.6w

一篇搞定！2015网页导航设计趋势&案例大搜罗

不管你喜欢不喜欢，汉堡图标反正已经是大势所趋了。今年无数的网站将这个小元素纳入到界面中来，成为页面导航的重要组成部分。不过汉堡图标并不是今年唯一的导航设计趋势。

2015-10-09

陈子木

导航栏设计

酷站推荐 2.1w

脑洞大交互好！17个特别舒服的圆形导航菜单网站设计

编者按：安利一下今天这组网站，虽然都是圆形菜单，但几乎没有创意重复的，18个网站都有自己独特的脑洞，而且有几个动画效果棒呆惹，已经给放到前边了，来惊喜一下。奥迪TT交互情景很有意思，从太空掉到地球，让人不由自主的继续玩下去。Game Of Purpose这是一个用于演示游戏被解锁的导航，它们巧妙地链接在一起，有一个良好的说明性状态指示。

2015-08-29

程远

优秀网页设计

1/2

1
2
下一页
前往页

大家都在看

字体下载

文章 132

设计规范

文章 192

神器推荐

文章 299

设计师职场

文章 664

UI

文章 142

优秀网页设计

文章 582

配色

文章 143

神器下载

文章 129

干货

文章 149

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

行业新闻

行业大事小事全知道

设计话题

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：uisdc123

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注