恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
用户体验设计-关于“导航布局”
0.0°
2020-09-16 好文转载 经验/观点 原作者: 张妮妮 举报 769 5 1 0

-转自知乎张妮妮

学习+配了新的案例图


导航布局,是UI设计时需要重点考虑的部分。一款App的导航可以被设计成多种形式的,导航设计的合理与否,直接关系到用户能否根据自己过去的生活习惯和直觉,不假思索地去使用APP,并且完成用户想要完成的任务。


一款产品从初期架构到上线会经历无数次的改版。有可能是因为商业模式的改变,也可能是产品本身的架构不能满足业务需求…… 产品在不断的迭代和更新。每进行一次结构上的调成,成本都是非常大的。所以,在设计之初,我们就要慎重考虑app的导航框架设计。


单独说导航框架包含:标签、列表、网格、屏幕轮播、抽屉导航等等各种形式。但是,导航的设计与产品所在行业、产品的特点、产品的商业目标有着密不可分的关系,或者说导航是完全服务于应用的。所以本着服务于App的目的,所以我们把导航分成三类:同级导航、层级导航和内容式导航。


本文主要从导航的目的去展开。


同级导航

一般都是运用在软件的入口位置或者是一级界面上,方便用户在同级界面之间进行来回切换。

优势在于所有的内容都是平面化的,铺开在用户面前。不论用户怎样切换,都能清楚的知道自己现在所处的界面层级,不会迷失方向。


标签导航

最常见,底部固定不动,有效减少层级,直接显示入口,有效提高产品转化率。

当顶部导航标签过多时,会部分隐藏,左右滑动,常见于新闻资讯类 APP。



Tab 导航

页面顶部,辅助标签导航,当前页面不必增加层级的情况下,放置更多的内容


网格导航

icon 平铺,优势在于入口排列在同一界面中,易于操作,对于服务型和工具型应用非常友好。

缺点是没有主次,容易使用户迷惑、选择困难,阻碍用户提取信息。



层级导航

层级导航可以一直向下滚动页面,多用来展示,而不是作为主要入口出现


抽屉式导航(汉堡导航)

把标签集合在一起,隐藏于抽屉中,在点击抽屉图标时展示出来。

从左右两边拉出,也称之为侧边栏导航

可节省更多空间,但会将功能隐藏起来,需要多一步操作,影响使用感,可用于低频操作。


列表导航

常见于功能比较单一的 APP

列表长度没有限制,可无限的通过滚动屏幕浏览,由上至下。



内容式导航

多出现于咨询、社交功能不强的软件中,用户可直观浏览内容,二级页面是对内容导航的承接。


轮播式导航

用户可左右滑动页面,适合页面层级少的 应用,轮播导航下方通常会有分页点

交互层级低


卡片导航

常见排列形式有:列表、网络、轮播、泳道

一组聚合的矩形

优势是清晰直观,无理解压力,易于操作。

劣势是占用空间大,有一定视觉压力,需合理设计。



卡片导航-泳道导航

垂直排列的轮播式导航,每个轮播可以独立水平滚动

交互形式是水平滑动、垂直滑动、点击

泳道的优势在于更加具有交互感也可以展示更多的内容,但是泳道的使用需要非常谨慎,因为被隐藏的内容难以被发现,需要进行一些引导,而且要考虑到内容的优先级。


卡片导航-陈列式导航

同级内容并列在同一个界面,横向纵向排列,向下无限延伸,滚屏浏览

优势是很大限度的呈现内容,电商 APP 友好



Powered by Froala Editor

更新:2020-09-16

收藏

5人已收藏

  • 13

    作品

  • 20

    粉丝

  • 10

    关注

  • 「在家」×宜家 | 周末居家无限可能
  • 用户体验设计-《用户体验要素》读书笔记
  • 用户体验设计-重读《破茧成蝶》读书笔记
  • 用户体验设计-常用用户研究方法汇总

    猜你喜欢

      2020-09-16 好文转载 经验/观点 原作者: 张妮妮 举报 769 5 1 0

      用户体验设计-关于“导航布局”

      0.0°

      你确定要举报用户体验设计-关于“导航布局”

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年09月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录