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

版权申明：本文出自“Lawrence_V”原创，感谢“Lawrence_V”的原创经验分享！

上两篇讲解了如何绘制规范化的按钮，今天就讲一下如何绘制下拉菜单和导航菜单。不管是下拉菜单还是导航菜单，都是设计语言部分中的基础部分中的某个组成部分。当这些组件按照功能和需求整合到一起，就生成了新的页面或用户界面。还有一点，所有文章中提到的尺寸和距离，都没有一定的标准化，这些距离是需要设计师们根据自身经验与审美，结合实际项目情况和使用场景去调节的。所以我只是教大家如何绘制这些组件，具体如何应用他们，就需要靠你们自己的理解去自行发挥了。

我只提供设计思维与思想，希望引导大家去自发性的解决问题。方法与流程是死的人是活的，大家要在遵循一定的设计规则的基础上，去做思维的发散，并按照实际需求去完成设计，这大致就是我的夙愿吧。

目录

1.下拉菜单

1.1 了解下拉菜单

1.2 绘制矩形框

1.3 文本行高

1.4 确定文本域

1.5 视觉差

2.导航菜单

2.1 了解导航菜单

2.1 确定距离

1.1 了解下拉菜单

首先要了解下拉菜单的样式，它的组成及绘制方法。下拉菜单有两种样式，分别是主菜单和二级菜单。它也是由按钮、菜单栏、鼠标状态（Hover）组成的。按钮前几篇文章讲过了，其他部分的都是些基础操作，它看似很好绘制，也很简单，但实际上却包含一些规则与逻辑的。

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

那真正整合成组件时，所以组件会有三种不同的尺寸（大中小），被配置不同的高度，不同的颜色和不同的曲率。那由于文章总长度和复杂程度的关系，我就以中等尺寸为示例，为大家讲解它吧。

1.2 绘制矩形框

绘制下拉菜单的矩形框，要定义它的高度和宽度。这里要说明几点，下拉菜单框的高度是根据内容的增加而随之变化的，而它的宽度是受里面字数影响的。字数的最大宽度定下来，才能定下矩形框的宽度。一般情况下，菜单中的功能名称不会超过9个字，利用7±定律得知，超过9个字不易理解和阅读（易读性），所以这里的矩形框的宽度，不过超过9个字符。

那如果下拉菜单中的功能名称，超过9个字，会怎么样呢，如下图所示。

1.3 文本行高

添加文本内容，就是在下拉菜单里添加文字。当用7±2定律得知最大字符数不能超过9个字符后，就说明下拉菜单里的文字的宽度定好了，接下来就要定文字的行高了。文字的宽度和行高都计算好，就可以绘制文字与矩形框之间的间距了。文字的行高是由鼠标状态（Hover）的高度来确定的，Hover的高度有多高，文字的行高就有多高。