UI设计教程——下拉菜单&导航菜单

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

1.4 确认文本域

设置好文本的行高，就可以根据它来确认文本域了，确定文本区域后，就能找到文本与矩形框之间的距离了。确定文本域也不难，把每一行文本都加上鼠标状态，然后得到高度的总和就是整个文本域的高度了。

另外要注意的是，当我们确认文本域后，不能直接与矩形框对齐，应该在文本域的上下留有一段距离。这段距离的高度留多少也是根据菜单高度和行高来确定的，行高越高，留的距离就越多。

1.5 视觉差

把文本置入到矩形框中，如果文本周边的距离按照统一距离来算，就会形成视觉差。总会觉得头重脚轻，上面要比下面的重量大。其实造成这个问题的原因，就是视觉不平衡的问题。

因为下拉菜单中是包含按钮的，不管是有底色的按钮，还是纯文本的按钮，只要被点击，颜色就会变重，颜色一变重视觉重量就会被影响（灰阶度）。这时下拉菜单的上半部分要显得重一些，就要在下半部分增加一些重量，让他们看上去"平衡"一些。