第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

APP设计模式:浅析导航栏设计

时间:2017-08-31 16:19来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
文章总结了APP种常见的几类导航栏及特点,希望给大家带来些启发。 1 一级导航/主导航 1.1 标签式导航 标签式导航又叫Tab式导航,是目前移动端市场上最为广泛的导航设计。标签导航通常分

  文章总结了APP种常见的几类导航栏及特点,希望给大家带来些启发。

  

APP设计模式:浅析导航栏设计

  1 一级导航/主导航

  1.1 标签式导航

  标签式导航又叫Tab式导航,是目前移动端市场上最为广泛的导航设计。标签导航通常分为底部,顶部,顶、底混合使用这三种模式。

  1.1.1 底部导航

  采用文字加图标的方式展现。一般有3~5个标签,适合在相关的几类信息中间频繁的切换使用。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。它的缺点是会占用一定高度的空间,如果用户是小屏幕手机,则视觉体验不太好。

  下图应用分别为微信、Facebook:

  

APP设计模式:浅析导航栏设计

  1.1.2顶部导航

  当内容分类比较多,用户对不同内容的打开率相差不是很大,需要快速切换/调出的时候,经常会采用顶部导航设计模式,常见于工具类APP中,如Wave Analytics、滴滴打车:

  

APP设计模式:浅析导航栏设计

  1.1.3 顶部、底部双Tab导航

  标签式导航除了设在顶部和底部,另外有些内容比较多的产品会采用顶部、底部混合使用标签式导航,如简书、网易云阅读:

  

APP设计模式:浅析导航栏设计

  1.2 抽屉式导航

  抽屉导航指的是一些功能菜单按钮隐藏在当前页面后,点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航设计比较适合于那么不需要频繁切换的次要功能,例如对设置、关于、会员、皮肤设置等功能的隐藏。下图分别是Wave Analytics、Gadgets News、My Rolls和Perisfind:

  

APP设计模式:浅析导航栏设计

  

APP设计模式:浅析导航栏设计

  抽屉式导航的优点在于节省页面展示空间,使主页面更加简洁美观,让用户将更多的注意力聚焦到当前页面。

  缺点在于次功能入口比较隐蔽,用户不容易发现;使用次功能需要二次点击,增加用户使用成本。

  1.3 桌面式导航

  桌面式导航类似于操作系统或启动控制面板,其特色是主页由多个按钮组成。均衡布局时,按钮通常大小一致,以3*3、2*3、2*2和1*2等形式排布于桌面。点击按钮时,跳转至其他内部子系统/子模块。

  如图,Strides和Finance采用了基于圆形按钮的均衡布局:

  

APP设计模式:浅析导航栏设计

  而360和日语五十音图则采用了基于圆角矩形按钮的均衡布局:

  

APP设计模式:浅析导航栏设计

  注:当圆角矩形弧度越来越小,甚至消失不见成为正方形的时候,往往用方形格子隔开各个按钮,使得视觉效果最好,这种模式见于下一节的“宫格式导航”中。

  市面上还存在着一些极少数应用,它们内部生态繁杂,提供(自己的或者来自第三方服务)眼花缭乱、不胜枚举的服务项目,有些服务项目单独拎出来,做成一款应用,都可以匹敌一家小型互联网公司,甚至是中型互联网公司,但是出于业务整合、平台搭建、体系构建、服务扁平化,它们会被塞到一个“壳子”里,形成“超级服务平台类”APP,比如阿里系的支付宝和千牛工作台:

  

APP设计模式:浅析导航栏设计

  支付宝首页的服务项目,可以在“全部”页面中进行个性化配置;千牛工作台首页的三方服务,可以在“设置”页面中进行个性化配置。两个APP都支持用户根据自己实际需求和使用频度,优化服务项目的显示顺序,进行入口优化。

  

APP设计模式:浅析导航栏设计

  这种“超级服务平台类”APP,目前我仅在阿里系的产品中看到过,其特点是:

  高频/超高频使用,用户粘性极高,应用处于市场垄断地位,几乎无可替代产品(生态庞大带来的优势);

  应用服务种类多且扁平化(使得并列式的桌面布局模式成为必选项);

  可以当做企业移动后台来使用(支付宝的服务包括衣食住行,可认为是企业个人),我称之为“行走的ERP”;

  商业氛围浓厚。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕