导航栏设计的要求有哪些,导航栏菜单的设计与实现


设计师都知道设计绝不仅仅是做出外表好看的东西 , 设计还涉及到如何做才能让用户使用你的网站/应用程序 。这项工作内容就像跟用户间对话一样 , 而导航就是对话内容之一 。因为如果用户连他们究竟在哪儿都搞不清楚 , 那你的网站/应用程序设计得再棒又有什么用呢?来看这篇好文 , 帮你做出合格的底部导航设计!
如果你连基础都没打好 , 建议最好学习一下:《交互基础知识科普!带你认识最热门的12种导航模式》 。
如果想看深入的好文 , 可右戳直达:《交互设计实战!Tab导航与侧边抽屉导航的巅峰对决》
一、为何底部导航如此重要
Steven Hoover 在他的「用户究竟如何使用移动设备」的研究中发现 , 49%的人习惯于使用单个拇指来完成所有操作 。在下图中 , 屏幕中不同颜色的区域表明用户拇指能够触及的难度等级 , 其中 , 绿色区域表示很容易触及的范围 , 黄色则表示拇指要伸展开来才能够到 , 而要触达红色区域则要求用户改变设备的手持方式 。
△ 用户单手操作智能手机的区域图
这样看来 , 将顶级(经常使用的)功能放在屏幕的底部是非常重要的 , 因为这里是用户使用拇指能轻松跟设备产生交互的位置 。
许多程序正是遵循上述原则 , 使用底部导航来表示程序中最重要的功能 。Facebook便是代表之一 , 这样做也允许了用户能在不同功能间快速切换 。
△ Facebook iOS客户端底部导航
二、底部导航设计的四个关键点
导航通常就是指引用户前往他们想去的地方的工具 。底部导航则应该用来表示程序中常用的几项重要功能 。这些功能要求能够直接从应用程序的任何地方访问 。
好的底部导航设计遵循以下规则:
1、只显示最重要的功能
使用3-5个顶级导航标签 。如果少于3个标签 , 考虑使用标签选项卡替代 。
避免使用超过5个底部导航块 , 否则会造成块与块间显示太拥挤 , 也容易造成误点错点问题 。另外 , 过多导航块会让你的程序看起来更加复杂 。
如果你的顶层导航块确实超出了5个 , 不要都放在底部导航 , 考虑放在其他地方或选出最重要的放在底部 。
2、避免使用滚动设计
对于小屏幕来说 , 隐藏一部分导航块显然是一个解决方案——你不用担心屏幕限制 , 只需要把导航块置于一个可滚动区域 。但是这种方式难免会降低使用效率 , 因为即使你已经看到了你需要的块 , 你可能仍然需要滚动一下才能看到全部标签 。
△ Rookie Cam iOS客户端滚动设计方案
3、告知用户当前位置
没有向用户表明其当前所在的位置大概是所有程序常常犯的一个错误 。而对于用户 , 在成功地使用导航之前 , 他们要搞清楚的基本问题便是“我现在在哪” 。

推荐阅读