美文网首页设计周刊
移动端交互之导航

移动端交互之导航

作者: frely | 来源:发表于2016-01-25 12:21 被阅读52次

讨论两种导航架构在应用中的区分:底部横向导航和侧边纵向导航

1、底部横向导航

特点:横向排列与界面底部,可直接方便的切换到不同模块;对功能而言,操作频率不高,占据底部很大一块区域,对移动应用而言算是个缺点

适用于用户进入应用时有多种目的的情况。

比如电商应用,用户买东西时,可能会无目的的先浏览首页推荐,也可能目的性较强的进入搜索页,也有可能到购物车里购买之前囤好的商品,这种情况适合直接显露的底部位置的横向导航。

另外这种导航更方便切换,适合于具有更紧密逻辑的菜单项形成的导航。

电商举例,用户进入应用通常有想买的商品,第一阶段:搜索想买的商品,浏览详情,确定购买,添加到购物车,然后继续添加商品到购物车;第二阶段:从购物车到支付流程,付款完成。在这个过程中用户一般会在犹豫对比中不断调整修改选择,即在“发现-购物车-我的订单”中来回切换。

结构示意图

2、侧边纵向导航

特点:通常在界面中由一个按钮触发,节省空间,用户可更专注于界面内容;交互方式决定对这类导航的操作频率不应太高。

内容与导航间在交互上存在卡顿,更适合沉浸式浏览型的应用内容。

图片浏览型应用,应用目的是从不同维度展示更多的图片,导航项一般是分类、收藏、我的等功能,且这些功能都在为一个核心功能服务--浏览图片,这是在最大限度的提高浏览时的沉浸体验,但牺牲了交互上的流畅性,这种类型的逻辑模块结构比较适合侧边纵向导航。

结构示意图:

相关文章

  • 移动端交互之导航

    讨论两种导航架构在应用中的区分:底部横向导航和侧边纵向导航 1、底部横向导航 特点:横向排列与界面底部,可直接方便...

  • 交互设计之(三)标签栏&导航栏设计

    来源:UI中国 在交互设计中,各个不同的场景需要不同的标签&导航栏设计 标签式导航又叫Tab式导航,是目前移动端市...

  • 移动端导航栏——交互基础篇

    1:导航栏位置 状态栏下面部分就是导航栏 京东导航栏:左侧logo,右侧扫一扫,消息 网易导航:左侧logo,右侧...

  • 移动端导航

    导航是任何应用程序的支柱。其目的是让用户以尽可能少的摩擦到达他们想去的地方。 移动导航必须是可发现的、可访问的并且...

  • 分享与交流

    关于移动端交互的思考。

  • WEB端导航交互设计原则

    自己从事B类产品web端交互设计3年来,设计过各式各样的导航。导航是用户从A移动到B完成任务的重要指引,体验良好的...

  • APP研究系列之抽屉式导航的使用场景

    最近刚好完成了积分移动端V1.0-2.0改版,整体界面交互和导航都进行了一次重新设计,恰好就是把之前的抽屉式导航换...

  • 判断浏览器,区分PC和移动

    判断浏览器 区分PC和移动 web端:app.vue app端:app.vue 网站导航 网站导航

  • localhost配置SSL证书

    背景 iOS移动端使用 CocoaAsyncSocket 通过本地HTTP Server与网页端交互 网页端支持 ...

  • 移动端导航栏

    可以作为应用主体导航 标签导航 标签导航是IOS系统中最常见的导航,它继承了桌面导航的样式,对图标进行了扁平化处理...

网友评论

    本文标题:移动端交互之导航

    本文链接:https://www.haomeiwen.com/subject/drzrkttx.html