火星网校
如何设计一个优秀的导航？
导航对于一个网站来说，起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ，为了让网站信息可以有效地传递给用户，导航一定要简洁、直观、明确。那如何设计一个优秀的导航？
有很多设计师在设计导航时过于注重视觉美，而忽略设计稿的还原 。如图
上图导航视觉很美，前端想哭 （代码还原）；
下面，站在前端工程师的角度与大家分享符合前端规范的导航应注意的点：（以顶部导航为例）
顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需。
此图为1805UI/UE高级设计师精修班胡正锐提供
我们从前端工程师还原这个导航说起：
一、
前端工程师在使用代码还原设计稿时， 通常会先分析页面的组成部分，顶部导航一般分为等宽和等间。
通过上图，我们看出导航中的每一个菜单文字数量是不一样，即可以排除等宽，也就是说这个导航为等间距导航；
每个菜单之间的间距通过借助ps软件中标尺得出，每个菜单之间的间距不一样， 如果站在前端的角度来说，有几个不一样的间距就得写几遍代码间距，
如图：↓↓↓
通过上图， 我们可以看出， 如果菜单之间的 间距 不统一， 我们需要分别给每一个菜单命名并且重新设置间距， 那么这个导航我们需要25行的代码才能完成，这样是不利于提高工作效率的；
如果每个菜单之间的间距统一，我们不需要给每个菜单命名，且不需要 重新 设置间距；
如图：↓↓↓
我们就可以省6行代码，
不要小瞧省下的6行，如果页面中导航 不仅仅 是7个菜单呢？
如果我们在设计页面其它的版块以及版块内容时，也使用间距保持一致或者 有规律 的一致，那么我们的前端工程师是不是就省了时间， 提高了工作效率呢。设计师与前端工程师在合作时，关系是不是又更进一步了呢。
二、
通过测量文字的大小，得出文字的字号为14像素，
我们的设计稿最终是通过屏幕终端 呈现 在用户面前的，而我们的用户是不区分年龄阶段的，如果上图的导航设计面向的用户是 中老年 阶段的群体的话，从视觉上来说，文字字号过小，不利于快、准、传达信息；
如图：↓↓↓
如果， 我们适当的把文字的大小改大2-4个字号， 效果是不是更好了呢。
如图：↓↓↓
通过上面案例的分析，未来的你在设计顶部导航时应注意：
1. 菜单（文字数量不一致）之间间距要统一（等间导航）；
2. 菜单（文字数量一致）宽度可保持一致（等宽导航）；
3. 文字大小要合适（14px-20px）；
4. 菜单交互要突出；
希望以上分享对大家有所帮助， 谢谢。
作者：鲁慧娟
来源：UI设计师之家
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
为给新片造势，迪士尼这次豁出去了，拿出压箱底的一众经典IP，开启了梦幻联动朱迪和尼克奉命潜入偏远地带卧底调查 截至11月24日......
-
此前Q2问答环节，邹涛曾将《解限机》首发失利归结于“商业化保守”和“灰产猖獗”，导致预想设计与实际游玩效果偏差大，且表示该游戏......
-
2025 Google Play年度游戏颁奖：洞察移动游戏新趋势
玩家无需四处收集实体卡，轻点屏幕就能开启惊喜开包之旅，享受收集与对战乐趣库洛游戏的《鸣潮》斩获“最佳持续运营游戏”大奖，这不仅......
-
说明：文中所有的配图均来源于网络 在人们的常规认知里，游戏引擎领域的两大巨头似乎更倾向于在各自赛道上激烈竞争，然而，只要时间足......
-
在行政服务优化层面，办法提出压缩国产网络游戏审核周期，在朝阳、海淀等重点区将审批纳入综合窗口；完善版权服务机制，将游戏素材著作......
-
未毕业先就业、组团入职、扎堆拿offer...这种好事，再多来一打！
众所周知，火星有完善的就业推荐服务图为火星校园招聘会现场对火星同学们来说，金三银四、金九银十并不是找工作的唯一良机火星时代教育......
