会员

开通优设VIP星球

尊享13项VIP特权 持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

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

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

 投稿
搜索

导航栏设计 话题

网页排版

收录31篇文章

版式排版

收录28篇文章

工作习惯

收录30篇文章

构图技巧

收录29篇文章

你丫才美工

收录27篇文章

1 / 2 到第 页
5000字干货！全方位掌握「导航栏设计」知识点！

UI

5000字干货！全方位掌握「导航栏设计」知识点！

本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结。
2022/08/01

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

UI

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

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

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

UI

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

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

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

UI

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

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

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

UI

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

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

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

UI

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

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

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

UI

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

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

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

交互

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

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

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

产品

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

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

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

UI

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

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

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

UI

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

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

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

UI

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

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

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

UI

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

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

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

交互

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

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

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

交互

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

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

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

交互

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

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

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

网页

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

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

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

教程

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

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

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

教程

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

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

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

教程

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

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

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

教程

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

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

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

教程

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

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

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

教程

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

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

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

产品

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

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

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

UI

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

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

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

教程

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

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

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

酷站推荐

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

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

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

酷站推荐

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

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

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

酷站推荐

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

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

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

教程

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

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

导航栏设计
1/2

大家都在看

干货

文章 154

立即查看

平面设计

文章 516

立即查看

用户研究

文章 148

立即查看

优设大课堂

文章 142

立即查看

设计师专访

文章 149

立即查看

ICON

文章 204

立即查看

ps技巧

文章 643

立即查看

设计师职场

文章 889

立即查看

职场

文章 137

立即查看

优设读报 2023年02月06日 星期一

01

上周热门文章：《借势海报必看! 二十四节气之立春海报设计常用意象总结》

02

优设年度策划拜年活动完满收官！累计送出祝福 373 万

03

《深海》票房达 5.88 亿，创国产原创动画电影票房新纪录

04

谷歌将以「搜索伴侣」形式推出类 ChatGPT 服务

05

香港旅游发展推出「你好，香港！」全球宣传活动

查看全部

设计问答 全部问答

35岁普通设计师的出路在哪？

5.3k 设计师围观了该问题

我不是来制造焦虑的，但是焦虑就在那，这个年纪又没有20多岁的时候能加班，卷肯定是卷不过小年轻的，靠的阅历和经验，都是拿经验可以做的那些工作，所以想和大家探讨一下，35岁普通设计师还有哪些出路？

我来回答

设计问答 全部问答

你的问题，优设知道！每日一问，进步很简单，优质问题和回答将获得设计书籍一本！

邀请你来回答

大家好！优设新版「优设问答」频道已经上线一年有余，首先感谢大家的支持和喜爱！如果平时工作生活中遇到一些难以解决的职场问题欢迎大家来问答频道提问，优质问题或回答获得设计书籍一本！详细活动方案见下方海报：

我来回答

免费图库

高质量的免费可商用图片都在这儿了！

查看专题

专题

已有340.7w位观众已收录43篇持续更新

有图的都交给我！新生代图片素材管理神器Inboard

91553 人阅读

超方便神器Bridge！设计师的终极图像管理术

99538 人阅读

细节

考勤机器人提醒：你有缺勤记录，请快速补卡

「钉钉」使用了智能工作助理机器人来协助用户每日上班打卡和进行考勤统计与管理。与同类型的竞品相比,「钉钉」对话形式的记录考勤方式更加简单方便，也更具亲和力。在每周一的上午，助理机器人还会以聊天的方式，向用户汇报上周的打卡情况。
2019/04/08

AmberDu小白

互动

设计神器 全部神器

这个叫「全历史」的网站惊艳到我了，业界良心！

神器推荐

已打包！谷歌专业图像处理插件「Nik Collection」开放免费下载

神器推荐

三维地图绘制神器 NB MAP 升级了！可支持下载区县、乡镇地图！

神器推荐

浮世绘素材网站Ukiyo：拥有22万张高清图的设计灵感库！

神器推荐

课程

爆款课程！零基础C4D实战就业班

涨薪指数
技能点 · C4D

涨薪必备名师亲授

课程

如何快速创作火爆全网的手绘作品？

涨薪指数
技能点 · 手绘插画

私单涨薪必备技能

课程

插画学到什么程度，才够接私单赚钱？

涨薪指数
技能点 · 手绘插画

接单涨薪快速入门

课程

为什么阿里和OPPO超爱这类插画风格？

涨薪指数
技能点 · 手绘插画

高效实战百万人气

求职招聘 发布职位

交互设计师

上海本科及以上3-5年
25k-50k

漫画插画师

武汉学历不限1-3年
6k-8k

微博内容运营

武汉大专及以上经验不限
4k-6k
查看全部

行业新闻 发布行业新闻

「大春晚季」品牌授权与版权文创暨「百人千创」合作计划：聚焦版权激发文创活力

活动赛事

喜兔迎年！iGame RTX 4070 Ti 开售，新春礼盒同步发布

新品推荐

为玩家和创作者提供超强动力：GeForce RTX 40 系列设计本发布

新品推荐

查看全部

热门频道

设计专题

热门设计知识精挑细选

查看专题

细节猎人

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

查看猎人

优设读报

行业资讯一站知晓

查看读报

优设琅琊榜

顶尖设计作品聚集地

查看榜单

优设9图

优设爆火的干货频道

查看9图

设计问答

高手大咖在线答疑解惑

查看话题

优设网 uisdc.com

2012年成立至今，是国内极具人气的设计师交流学习平台

看设计文章，学软件教程，找灵感素材，尽在优设网
按Ctrl+D收藏本站 返回首页

优设基础训练营

@林雅诺

关于我们

优设是国内极具人气的设计师平台，2012 年成立至今，一直专注于设计师的学习成长交流。 我们通过优设网、优优教程网沉淀优质设计知识的同时，更率先试水新媒体领域。目前旗下媒体矩阵包括：微博@优秀网页设计、微信公众号@优秀网页设计、抖音号@优设PS大神、@优设AI大神等，全网粉丝量过千万。

热门频道

设计灵感

支持与服务

优设
优优教程网
优设大课堂
设计师导航
细节猎人
优设训练营
优设推荐：

本网站所有数据及文档均受《著作权法》及相关法律法规保护，任何组织及个人不得侵权，违者本公司将依法追究侵权责任，特此声明。优设网法律顾问：刘杰律师
Copyright © 2023 优设-UISDC - 优设网官方微信号：youshege - 鄂ICP备16005435号-1 鄂公网安备 42018502001134号

每天官微五分钟
一年萌新变大神

扫码关注

每天10篇设计干货
300万设计师关注！

访问官方微博

全部文章

18489篇

UI

1765篇

网页

370篇

平面

1340篇

手绘

197篇

电商

229篇

交互

729篇

产品

1923篇

下载

379篇

神器推荐

1231篇

新视野

630篇

职场

1232篇

设计专题

热门设计知识精挑细选

细节猎人

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

优设读报

行业资讯一站知晓

设计问答

高手大咖在线答疑解惑

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

行业新闻

行业大事小事全知道

活动大赛

精彩纷呈的设计活动及赛事

求职招聘

理想岗位等你选

设计师

心有猛虎细嗅像素

设计导航

精选520个设计师网站

图书导航

高分必读设计书籍大全

电商导航

全球顶尖电商网站合集

色彩导航

中日传统色彩一网打尽

优设大课堂

名师高徒！专业实战就业

优设训练营

就业衔接！只教设计真本领

优设私房课

火什么看这里！好课风向标

设计公开课

顶尖设计高手免费公开课

学教程

3000+免费教程在线观看

找灵感

每日都有新灵感

找软件

省时高效的设计神器都在这

知识树

热门软件零基础入门

字体下载

最新免费可商用字体