交互设计/UI设计/游戏设计/平面设计/视频后期处理/

说说移动应用导航

众所周知,导航对于用户寻找足迹是至关重要的,那移动设备的导航和WEB端有何不同呢?正文是结合自己见解和对搜集资料的总结。

 

如果说web设计中的导航是“可见式”的,让用户可以看到自己所在的位置,那么移动设备中的导航似乎有些“隐藏式”,将用户不常用但必须知道的导向性元素隐藏起来,将有限的界面让位给主要信息呈现。

在本文内容中,对于应用程序各个页面的导航,我们称之为应用程序的“导航模型”;对于单个页面的组织层次设计,我们称之为“导航栏”的设计。

页面导航栏几种形式(原生app)

      1)产品logo;或者产品logo+控件

       2)2-3个tab选项卡
 

       3)任务标题;或者任务标题+控件

       4)搜索框

应用程序导航模型几种形式

抽屉式导航

核心思路:将不需要随时使用的导航信息隐藏起来,随时呼入呼出

      优势:

  1. 扩展性好,可以用户自定义
  2. 主要界面留给了重要信息

  3. 逻辑清晰,层次明了


卡片标签栏导航

卡片标签栏位于屏幕的底部,将应用以TAB的形式归类,用户可以随时选择一个tab,所选tab会以高亮显示所选,跳转到相应的界面并对其刷新,每个页面都可以有各自的内容和布局。

  1. 高度: 49px
  2. Tab个数:<5个,超过五个则在第五个出现“更多”按钮
 提醒:在卡片栏上显示一个提醒标记,引导用户进行信息交互


树形列表

树形列表导航模式将每一级的功能用list展示,点击之后展开下一级的list列表,直到最终的详细页面。例如:

优势:可扩展性大,能应对具有大量的类别、功能和项目的应用,比如购物分类。劣势:层级深,返回层层父级页面需要多次点击“返回”。


九宫格导航

平铺列表使用“页面指示器”对列表中的各个并列页面做出指示。建议指示器个数不要过多。

优点:“页面”数量和顺序可以随意改变,拓展性强;“页面指示器”只占用6px,展示内容区域大

缺点:页面数目不能过大,用户返回某个界面需要很多步骤


选择适合你的导航模型

上述五种导航模式并不是互斥的,可以在一个应用里对他们进行混搭。个人认为用简洁的导航隐藏复杂的架构,确实是一项技术活。


评论

© 壹蜂窝 | Powered by LOFTER