导航对于一个网站来说，起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ，为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。那如何设计一个优秀的导航？

有很多设计师在设计导航时过于注重视觉美，而忽略设计稿的还原  。如图

上图导航视觉很美，前端想哭 （代码还原）；

下面，站在前端工程师的角度与大家分享符合前端规范的导航应注意的点：（以顶部导航为例）

顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需。

此图为1805UI/UE高级设计师精修班胡正锐提供

我们从前端工程师还原这个导航说起：

一、

前端工程师在使用代码还原设计稿时， 通?；嵯确治鲆趁娴淖槌刹糠?，顶部导航一般分为等宽和等间。

通过上图，我们看出导航中的每一个菜单文字数量是不一样，即可以排除等宽，也就是说这个导航为等间距导航；

每个菜单之间的间距通过借助ps软件中标尺得出，每个菜单之间的间距不一样， 如果站在前端的角度来说，有几个不一样的间距就得写几遍代码间距，

如图：↓↓↓

通过上图， 我们可以看出， 如果菜单之间的  间距  不统一， 我们需要分别给每一个菜单命名并且重新设置间距， 那么这个导航我们需要25行的代码才能完成，这样是不利于提高工作效率的；

如果每个菜单之间的间距统一，我们不需要给每个菜单命名，且不需要  重新  设置间距；

如图：↓↓↓

我们就可以省6行代码，

不要小瞧省下的6行，如果页面中导航  不仅仅  是7个菜单呢？

如果我们在设计页面其它的版块以及版块内容时，也使用间距保持一致或者  有规律  的一致，那么我们的前端工程师是不是就省了时间， 提高了工作效率呢。设计师与前端工程师在合作时，关系是不是又更进一步了呢。

二、

通过测量文字的大小，得出文字的字号为14像素，

我们的设计稿最终是通过屏幕终端  呈现  在用户面前的，而我们的用户是不区分年龄阶段的，如果上图的导航设计面向的用户是  中老年  阶段的群体的话，从视觉上来说，文字字号过小，不利于快、准、传达信息；

如图：↓↓↓

如果， 我们适当的把文字的大小改大2-4个字号， 效果是不是更好了呢。

如图：↓↓↓

通过上面案例的分析，未来的你在设计顶部导航时应注意：

1. 菜单（文字数量不一致）之间间距要统一（等间导航）；

2. 菜单（文字数量一致）宽度可保持一致（等宽导航）；

3. 文字大小要合适（14px-20px）；

4. 菜单交互要突出；

希望以上分享对大家有所帮助， 谢谢。

作者：鲁慧娟  

来源：UI设计师之家