导航对付一个网站来说，起到主要的勾引浸染。一个精良的导航设计可以让用户快速的找到所需 ，为了让网站信息可以有效地通报给用户，导航一定要简洁、直不雅观、明确。
但是，有很多设计师在设计导航时过于看重视觉美，而忽略设计稿的还原 。如图
上图导航视觉很美，前端 想 哭 （代码还原）；
下面，站在前端工程师的角度与大家分享符合前端规范的导航应 把稳 的点：（以顶部导航为例）
顶部导航被广泛运用在各个领域的网站当中，这类导航可以一览无余的让用户迅速探求到所需。
此图为1805UI/UE高等设计师精修班胡正锐供应
我们从前端工程师还原这个导航提及：一、
前端工程师在利用代码还原设计稿时， 常日会先剖析页面的组成部分，顶部导航一样平常分为等宽和等间。
通过上图，我们看出导航中的每一个菜单笔墨数量是不一样，即可以打消等宽，也便是说这个导航为等间距导航；
每个菜单之间的间距通过借助ps软件中标尺得出，每个菜单之间的间距不一样， 如果站在前真个角度来说，有几个不一样的间距就得写几遍代码间距，
如图：↓↓↓
通过上图， 我们可以看出， 如果菜单之间的 间距 分歧一， 我们须要分别给每一个菜单命名并且重新设置间距， 那么这个导航我们须要25行的代码才能完成，这样是不利于提高事情效率的；
如果每个菜单之间的间距统一，我们不须要给每个菜单命名，且不须要 重新 设置间距；
如图：↓↓↓
我们就可以省6行代码，
不要小瞧省下的6行，如果页面中导航 不仅仅 是7个菜单呢？
如果我们在设计页面其它的版块以及版块内容时，也利用间距保持同等或者 有规律 的同等，那么我们的前端工程师是不是就省了韶光， 提高了事情效率呢。设计师与前端工程师在互助时，关系是不是又更进一步了呢。
二、
通过丈量笔墨的大小，得出笔墨的字号为14像素，
我们的设计稿终极是通过屏幕终端 呈现 在用户面前的，而我们的用户是不区分年事阶段的，如果上图的导航设计面向的用户是 中老年 阶段的群体的话，从视觉上来说，笔墨字号过小，不利于快、准、传达信息；
如图：↓↓↓
如果， 我们适当的把笔墨的大小改大2-4个字号， 效果是不是更好了呢。
如图：↓↓↓
通过上面案例的剖析，未来的你在设计顶部导航时应把稳：
1. 菜单（笔墨数量不一致）之间间距要统一（等间导航）；2. 菜单（笔墨数量同等）宽度可保持同等（等宽导航）；3. 笔墨大小要得当（14px-20px）；4. 菜单交互要突出。希望以上分享对大家有所帮助， 感激。
