下拉菜单/导航菜单背后的逻辑

让我们来看一下最终绘制的效果吧。

2.1 了解导航菜单

我们能学会如何绘制下拉菜单，相对的导航菜单就显得非常简单了。首先要了解下拉菜单的样式，导航菜单分为两部分，上半部分为导航栏，这里的导航栏跟其他功能性导航栏没有任何差别。下半部分就是菜单部分，这里的菜单部分就是上面讲的下拉菜单。导航栏部分如下图所示：

那下图中的菜单部分，就是文章上面讲的下拉菜单。另外，上面提到每个组件有三个尺寸和三种颜色，它们其中还包含三种曲率，这个也要在我们制作组件时考虑好，身为设计师也要有全局思维。

2.2 确定距离

绘制导航菜单的矩形框不像绘制下拉菜单那样麻烦，只要算清文本、图标和矩形框之间的距离就行可以。我还是以中等尺寸为示例。

之后我们在解构小盒子的各个要素，就知道它是怎么布置的了。1.这里按钮的尺寸就看设计师要采用多大尺寸的按钮了；2.按钮与文本之间的距离，需要根据设计师的审美进行控制；3.文本的尺寸是根据字数多少而定的。就这么点事儿，很好处理。

当把所有元素的尺寸都定好，再把它们拼装到小盒子中，那么整个导航栏部分不就做好了吗。以后再把上面讲过的下拉菜单部分拼装到导航栏部分上，那导航菜单这个组件就制作好了。

谢谢阅读

感谢支持

最近在研究收纳（房屋收纳），也在阅读相关书籍。那在最后分享一句我觉得还不错的，关于收纳方面的心得吧。

"舒适的生活是由日常中各种喜欢的东西集合形成的"- 收纳的艺术

谢谢大家的支持~

记得点个赞哦

∨

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/