完美的用户体验：如何设计一个直观和有效的网站导航？

APP的顶部导航栏对我们来说很熟悉。导航栏是UI设计中不可或缺的一部分，几乎每个页面都使用导航栏。虽然导航栏看起来很简单，不需要太多精力，但是设计一个与产品需求和客户目标高度匹配的导航栏并不是那么容易的。导航栏的设计标准有很多细节需要注意。为了让大家对导航栏的设计标准有一个更清晰、更全面的了解，本文将总结导航栏的设计风格、构成结构、风格、互动等方面。希望能帮到大家。

即时设计-可实时协作的专业 UI 设计工具https://js.design/community?category=search&search=%E5%AF%BC%E8%88%AA%E6%A0%8F&source=csdn&plan=smt07171

1、基本介绍导航栏

标签栏、工具栏、工具栏等UI设计部件Tab 栏目、应用栏目、标题栏目、导航栏目等多种类型和名称中，很多新设计师很难区分这些重复的名称和相应的区域。

1.1 导航栏在哪里？

导航栏设计位于应用程序的顶部，即通知栏下方，主要用于明确页面的位置和层次，权重应高于当前页面的所有内容。如果客户不知道当前位置，不知道如何回到最后一步，就证明导航栏肯定有问题。虽然是 iOS 系统内叫做 导航栏 、Android 系统叫顶端应用栏 ，不同的名字，但是它的位置和作用几乎是一样的。

1.2 导航栏设计能起到什么作用？

第一，导航栏可以告知用户当前的位置，并提供回到上一步或下一步的操作入口，以免使用户迷失方向；

第二，顶部 Tab 对当前页面内容进行梳理分类，并将各种类型的入口汇集到导航栏中，为用户提供全局操作；

最后，品牌曝光可以得到改善，如器皿品牌颜色、图标品牌颜色等。，甚至在必要的前提下放置品牌。LOGO。

2、结构导航栏

常用的导航栏分为左、中、右构造，主要由返回按钮(左)组成、标题（中）、协助操作按钮(右)由三部分组成，这也是基于最常用、最常见的布局方式。在实际应用中，为了满足多样化的产品需求和用户目标，导航栏定制的布局方式有很多，不管款式有多复杂，只是站在设计的角度，目的是让用户使用起来更加方便方便。

2.1 导航栏设计标题

标题用于描述客户当前位置或界面的具体情况。在iPhone全屏出现之前，由于设备屏幕空间有限，大多使用常规标题，即34px~40px(网格所需，常见小编36px)加粗，中标题文字。

随着全屏设备的逐渐普及，导航栏的发挥空间必然会增加，大标题风格开始兴起，然后引入设计平台规范。大标题导航栏的设计主要取决于市场定位和功能的影响，而不仅仅是设计风格的问题。毫无疑问，大标题可以让页面的头部有更多的空白空间，更强的呼吸感，特别适合产品结构浅、功能单一、规模轻的应用，也就是常说的。 小而精 。

标题导航栏设计的容器高度为192px，字体大小一般设置为56px~68px(网格所需，小编常用64px)，页面滑动后，将恢复到88px的常规高度，标题大小也会减少。

2.2 导航栏图标设计

主界面导航栏中的图标比较多样化，如左侧常见定位、品牌标识等。、抽屉菜单入口等，右边如搜索、消息、扫描、更多…

二级及以后页面导航图标相对固定，左侧必须有返回上级界面的“返回”图标，可以是左剪头、下剪头、关闭按钮等。需要注意的是，无论设计什么风格，都需要满足“返回”风格的估计，保证用户不会产生疑惑。功能图标一般放在右侧，如次级功能延伸、信息提交、删除等。，最多不超过两个操作入口，以免造成功能层次混乱。

2.3 设计导航栏按钮

定制导航栏的左侧已经被定制 回到 图标占用，按键基本上只能放在右边，而且大部分都是文字按钮样式，主要用来承载界面的辅助操作，功能入口。

当导航有足够的垂直空间时，也可以使用圆形、方形、圆形矩形等容器按钮。页面上的视觉权重应该通过按钮的形状、大小、添加和边缘来确定，主次级关系应该灵活区分。好的导航按钮总能抓住用户的注意力。

3、分类导航栏款式

3.1 常规的导航栏设计风格

常规导航栏用于95%以上的二级和后续界面，这种类型也用于一些简单的主页。以iOS的两倍图为例。器皿高度固定在88px，基本上只由按钮和标题组成，背景颜色多为白色或主色调。

3.2 大标题的导航栏设计

在 iOS11 系统发布后，标题导航栏逐渐流行起来。标题导航栏的设计一般只出现在主界面(底部识别功能分类)，详细描述了基本规范。

标题导航栏的设计会给人一种高强度、透明的空间感。整体设计简洁大方，不适合电商应用。因为占用空间大，适合新闻信息、社交、工具型、功能单一的应用。

3.3 导航输入框的类型

根据搜索功能的权重，在常规导航栏中添加一个输入框，而不是标题显示。由于空间限制，导航栏定制的输入框高度一般设置在56px~64px之间，总宽度取决于其他功能图标的多少。如果图标多，输入框可以放在第二行。如果没有必要，尽量将输入框整体放在中间，这样两边的距离或两边的图标数量相同，从而提高视觉美观度。

4、导航栏设计工具

导航栏几乎是每个界面都必须存在的控件。虽然很常见，但并不是每个设计师都能高质量地设计它，需要在基本导航栏的设计标准和功能上赋予它更多的产品价值。“如果逃不掉，就静下心来享受。”既然导航栏不能轻易删除，设计好可能会带来意想不到的好处。即时设计作为中国新一代在线协同网站页面设计工具，具有非常强大的设计功能。它不仅可以一起进行原型、设计和交付，还支持跨平台合作、标记、绘画和文档即时云匹配。、Figma和XD格式的引入和使用非常实用，无论是初学者还是大师，工作效率都在飙升。初学者可以快速入门，从社区资源中汲取灵感和经验；网页设计大神可以利用里面的一站式功能，大大提高工作效率。

原文地址：https://blog.csdn.net/sky768872/article/details/140505007

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！