教你怎样设计出优秀的App导航栏.pdfVIP

教你如何设计出优秀的App导航栏 导航的设计是 A pp 设计发展过程中很值得玩味的地方 ，由于移动设 特别是智能手机的屏幕尺寸 有限 ，设计者们通常会将屏幕空间尽量留给主体内容 ，优秀的导航设计会让用户轻松到达目的地而 又不会干扰和困惑用户。 　　经典导航 ：t abbar Tabbar 的导航方式是由谁发明的笔者不得而知 ，不过相信大家都同意是由苹果将其传播开来。不 仅很多苹果的官方应用采用了这种设计 ，苹果同样大力推荐应用开发者优先采用这种方式。从某种 角度来说 ，t abbar 基本就是导航的标准设计。 　　Tabbar 的优点很明显 ，用户完成切换的成本很低 ，只需要一次点击操作 ，而放在屏幕底部对主 体内容的视觉冲击可以说是最小的 ，这样用户就不会在浏览主体内容时受到过多的干扰。至于缺点 也同样明显 ，那就是受制于屏幕宽度的限制 ，通常 4 到 5 个功能项的切换会比较合适 ，过多的话将 会显著提高用户的切换成本。 　优秀的挑战者 ：抽屉式导航 Tabbar 并不是完美的 ，它并不适用于过多的切换项。抽屉式导航通过纵向排列切换项解决了这一 问题。不过这也意味着它不能和主体内容同时出现在屏幕上。 　　在大部分的设计当中 ，通过点击屏幕左上角的按钮唤出切换项 ，有些也可以通过向右滑动手指 来完成。一个简单的滑动动画 ，就像拉出一个抽屉 ， 「抽屉式导航」这个名称应该就是来源于此。 突破了数量的限制 ，更大程度上释放了主体空间 ，也因此提高了操作成本。就作者个人感觉 ，如果 能将主要功能项组织在 4 到 5 项 ，t abbar 的设计方式可能会更好 ，否则 ，就应该优先考虑抽屉式导 航了。 　　为频繁操作设计 ：滑动式的导航 导航并不一定只发生在功能项之间。例如新闻类应用需要在不同类别的新闻之间进行切换浏览。通 常来说 ，这种切换的频率要比功能项切换更高 ，切换项的数量也会比较多 ，像常见的新闻类别就有 7,8 种。我记得在 「网易新闻」早期的 iO S 版本中采用了 「抽屉式导航」的方式进行新闻类别的 切换 ，这种方式在高频率切换时需要过多的操作次数 ，当需要在相邻类别连续切换时更是缺乏操作 的连续性。新的 iO S 版 「网易新闻」对新闻类别的切换重新进行了设计。 　　用户通过在内容页面左右滑动手指即可在不同的类别之间进行切换。这种方式的用户体验改进 了很多 ，尤其在连续切换时其操作方式的连续性比较强 ，主体页面的过渡也更加平滑 ，会产生更加 流畅的体验。当然也会有一些缺陷 ，比如一次滑动只能切换到相邻的类别 ，要想直接切换到对应类 别可以点击上方的类别列表 ，不过由于类别过多 ，有时候可能需要滑动一下类别列表才能完成操作 。不过总体而言 ，当需要在具有相似属性类别之间进行较频繁切换时 ，这种设计方式很值得参考。 　　如何走得更远? 　　iO S 系统中使用小的圆点图来标示当前处于第几屏 ，优酷 iO S 版本中借鉴了这种设计方式 ，并 将其创新地应用到主体内容的导航上。上面说到 ，像t abbar 这种横向排列切换项的设计方式受制于 手机屏幕宽度的限制 ，而通过使用占用空间更小的圆点图 ，优酷打破了这种限制 ，手指触碰到圆点 图时 ，将会显示类别提示 ，由于无法直接看到 ，可能无法按到正确的类别 ，通常需要移动一下手指 ，不过就作者的体验来看 ，这个寻找类别的过程体验非常平滑 ，基本不会产生困扰。只是类别提示 有些小 ，并且有些视觉角度下可能会被操作的手指挡住 ，如果能将类别提示显示在更容易看到的 地方 ，比如在标题中显示一个指示或许能进一步提升用户体验。 优酷这种创新的导航方式应用在类别的切换上取得了不错的效果 ，它是否同样适用于功能项的切 换呢 ，它有可能在某种程度上代替 「抽屉式」导航吗?功能的和类别不同 ，相对于 「电影」、 「电 视剧」 、 「体育新闻」这种用户已经非常熟悉的词汇 ，功能描述通常有着更高的认知成本 ，如果再 将其用指示图代替 ，无疑会进一步提高这种认知成本。并且功能之间通常没有相似的属性 ，将其用 相同的图标来代替并不符合认知习惯 ，而使用不同图标又会使界面过于杂乱。看来问题重重 ，我们 还需要更多的思考。 人人都是产品经理 （woshipm.co m ）中国最大最活跃的产品经理学习、交流、分享平台