logo 返回列表
APP导航设计的对比总结(二)
2018-04-02 1337

05 宫格导航

描述:

  1. 宫格式导航被广泛应用于各平台系统的中心页面;
  2. 用在二级页作为内容列表的一种图形化形式呈现,或作为一系列工具入口的聚合;
  3. 用户频繁切换的概率是比较低;
  4. 在不同的文章中可能被称作:跳板(图标卡片式)、磁贴式。

优点:

  1. 扩展性非常好,便于组合不同的信息类型(运营位、广告位、内容块、设置等);
  2. 视野范围内可以展示的功能入口多,能够让用户整体上了解APP提供的服务,从而选择自己所需要的那个服务;
  3. 静态、动态结合可以展示出丰富的信息,同时保持视觉统一;
  4. 跨平台不受平台限制。

缺点:

  1. 每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通;
  2. 当排布过多的时候,用户容易眼花缭乱,选择压力较大;

06 陈列馆式导航

描述:

  1. 宫格导航的变式吧,可用来呈现实时内容,比如新闻、菜谱、文章或照片,可以采用网格布局(比如一直播和ins)或轮盘布局(比如格瓦拉电影),还可以采用幻灯片模式进行展示。
  2. 陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。

优点:

  1. 相较于列表导航、宫格式导航的不同在于,陈列馆式导航有更丰富的表现形式、更加随意的组合效果(瀑布流等)以及丰富的动态效果(轮盘、幻灯片形式);
  2. 直观展现各项内容。

缺点:

  1. 不适合展现顶层入口框架;
  2. 容易形成界面内容过多,显得杂乱;
  3. 设计效果容易呆板。

07 抽屉导航

描述:

  1. 抽屉式也是谷歌提出来的一种导航模式,由于虚拟按键的存在,所以在安卓上使用底部Tab会造成双底栏,视觉观感不佳;
  2. 一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,或者不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏;
  3. 更多的被应用于信息流产品设计中,这类产品注重核心内容的展示,用户的任务路径较为单一,几乎都是用于浏览产品的核心内容;至于其他比较低频的模块入口则会隐藏在当前界面后方,避免冗余的模块抢夺用户的眼球;
  4. 在不同的地方可能被称为:扩展菜单、侧边导航、汉堡导航;
  5. “2/8”法则告诉我们,80%的用户只用那些20%功能,这20%功能就是信息流里面的核心功能;如果那80%不常用的功能也占用着最重要的位置,那么用户就会被打扰,产生臃肿感,甚至会放弃使用产品。

优点:

  1. 节省页面展示空间,让用户将更多的注意力聚焦到当前页面;
  2. 由于导航界面是隐藏在屏幕之外,展开之后整一页面都是导航菜单内容,所以可扩展和个性化的空间很大;
  3. 扩展性好,导航的个数没上限。

缺点:

  1. 用户不易发现,使用次功能需要二次点击,给用户在切换功能带来了操作成本;
  2. 可见性太差,用户还没能把汉堡菜单按钮和侧边栏联系起来,所以,侧边栏的渗透率很低;
  3. 不直观、不适用于主导航、如遇频繁操作的功能,用户不断开关抽屉体验不好。

08 下拉导航/菜单导航

描述:

  1. 与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单;
  2. 通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些常用的功能模块,而不需要频繁的页面跳转 ;
  3. Android中对应的控件为spinner控件,但该控件用于同一类别下不同视图之间的切换,而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件,可以实现不同类别之间的切换;
  4. 下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多。

优点:

菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置;

缺点:

  1. 位于屏幕上方,相对隐蔽且不能结合手势操作,不适合于频繁的切换功能使用;
  2. 考虑到导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容。

09 列表导航

描述:

  1. 作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。
  2. 适合用来显示较长或拥有次级文字内容的标题,每行可以融入较多信息。
  3. 与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常app不会在首页使用它;
  4. 无论ios开发和android 都有现成的列表布局插件和模板。

优点:

  1. 由上至下查看符合习惯;
  2. 结构清晰,易于理解,冷静高效,能够帮助用户快速的定位去到对应的页面。

缺点:

  1. 条目太多或分布不合理会导致用户查找困难;
  2. 不适合需要频繁切换任务的情况。

总结

导航可能不单单只有这几种,可能大家的叫法也不同,而且每种导航都有其存在的意义,不是它不够好,而是它可能不适用于你的产品。真正在实际项目中,还是得根据产品的实际情况综合去运用。

相关推荐
微信扫一扫
微信扫一扫
关注公众号,了解更多资讯
联系客服

微信扫码联系客服