APP设计模式：浅析导航栏设计的几种特点.doc

《APP设计模式：浅析导航栏设计的几种特点.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、APP设计模式：浅析导航栏设计的几种特点　　文章总结了APP种常见的几类导航栏及特点，希望给大家带来些启发。　　　　1一级导航/主导航　　1.1标签式导航　　标签式导航又叫Tab式导航，是目前移动端市场上最为广泛的导航设计。标签导航通常分为底部，顶部，顶、底混合使用这三种模式。　　1.1.1底部导航　　采用文字加图标的方式展现。一般有3~5个标签，适合在相关的几类信息中间频繁的切换使用。这类信息优先级较高、用户使用频繁，彼此之间相互独立，通过标签式导航的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效。它的缺点是会占用一定高度的空间，

2、如果用户是小屏幕手机，则视觉体验不太好。　　下图应用分别为微信、Facebook：　　　　1.1.2顶部导航　　当内容分类比较多，用户对不同内容的打开率相差不是很大，需要快速切换/调出的时候，经常会采用顶部导航设计模式，常见于工具类APP中，如WaveAnalytics、滴滴打车：　　　　1.1.3顶部、底部双Tab导航　　标签式导航除了设在顶部和底部，另外有些内容比较多的产品会采用顶部、底部混合使用标签式导航，如简书、网易云阅读：　　　　1.2抽屉式导航　　抽屉导航指的是一些功能菜单按钮隐藏在当前页面后，点击入口或侧滑即可像拉抽屉一样拉出菜单。这种

3、导航设计比较适合于那么不需要频繁切换的次要功能，例如对设置、关于、会员、皮肤设置等功能的隐藏。下图分别是WaveAnalytics、GadgetsNews、MyRolls和Perisfind：　　　　　　抽屉式导航的优点在于节省页面展示空间，使主页面更加简洁美观，让用户将更多的注意力聚焦到当前页面。　　缺点在于次功能入口比较隐蔽，用户不容易发现；使用次功能需要二次点击，增加用户使用成本。　　1.3桌面式导航　　桌面式导航类似于操作系统或启动控制面板，其特色是主页由多个按钮组成。均衡布局时，按钮通常大小一致，以3*3、2*3、2*2和1*2等形式排布于

4、桌面。点击按钮时，跳转至其他内部子系统/子模块。　　如图，Strides和Finance采用了基于圆形按钮的均衡布局：　　　　而360和日语五十音图则采用了基于圆角矩形按钮的均衡布局：　　　　注：当圆角矩形弧度越来越小，甚至消失不见成为正方形的时候，往往用方形格子隔开各个按钮，使得视觉效果最好，这种模式见于下一节的“宫格式导航”中。　　市面上还存在着一些极少数应用，它们内部生态繁杂，提供（自己的或者来自第三方服务）眼花缭乱、不胜枚举的服务项目，有些服务项目单独拎出来，做成一款应用，都可以匹敌一家小型互联网公司，甚至是中型互联网公司，但是出于业务整合、

5、平台搭建、体系构建、服务扁平化，它们会被塞到一个“壳子”里，形成“超级服务平台类”APP，比如阿里系的支付宝和千牛工作台：　　　　支付宝首页的服务项目，可以在“全部”页面中进行个性化配置；千牛工作台首页的三方服务，可以在“设置”页面中进行个性化配置。两个APP都支持用户根据自己实际需求和使用频度，优化服务项目的显示顺序，进行入口优化。　　　　这种“超级服务平台类”APP，目前我仅在阿里系的产品中看到过，其特点是：　　高频/超高频使用，用户粘性极高，应用处于市场垄断地位，几乎无可替代产品（生态庞大带来的优势）；　　应用服务种类多且扁平化（使得并列式的桌

6、面布局模式成为必选项）；　　可以当做企业移动后台来使用（支付宝的服务包括衣食住行，可认为是企业个人），我称之为“行走的ERP”；　　商业氛围浓厚。　　最佳实践：菜单无主次之分，每个菜单所占空间大小一致。菜单有主次之分，主要的占空间较大，其余的占空间较小。在使用桌面式导航布局时，要充分考虑到给客户提供个性化和定制化功能。　　1.4宫格式导航　　宫格导航是将主要入口全部聚合在主页面中（因其布局比较像传统PC桌面上的图标排列，又被称为“桌面式导航”），每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统

7、的中心页面。这样的组织方式无法让用户在第一时间看到内容，选择压力较大，因此现在采用这种导航的APP已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。下图应用分别是钉钉和epocrates：　　　　作为二级导航的宫格式导航：　　　　1.5舵式导航　　在有些情况下，简单的底部tab式导航难以满足更多的操作功能，这个时候我们就需要一些扩展形式来满足需求，新浪微博、lofter、闲鱼底部采用的就是舵式导航，舵式导航（之前看到别人这么叫所以我也就这么称呼吧）跟标签式导航相比，区别在于舵式导航把类似生产内容的主功能按钮放

8、在中间，标签更加突出醒目，同时该主功能标签做了功能扩展，也因此给设计增加了一些个性化的亮点。如新浪微博和育学