提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
-转自知乎张妮妮
学习+配了新的案例图
导航布局,是UI设计时需要重点考虑的部分。一款App的导航可以被设计成多种形式的,导航设计的合理与否,直接关系到用户能否根据自己过去的生活习惯和直觉,不假思索地去使用APP,并且完成用户想要完成的任务。
一款产品从初期架构到上线会经历无数次的改版。有可能是因为商业模式的改变,也可能是产品本身的架构不能满足业务需求…… 产品在不断的迭代和更新。每进行一次结构上的调成,成本都是非常大的。所以,在设计之初,我们就要慎重考虑app的导航框架设计。
单独说导航框架包含:标签、列表、网格、屏幕轮播、抽屉导航等等各种形式。但是,导航的设计与产品所在行业、产品的特点、产品的商业目标有着密不可分的关系,或者说导航是完全服务于应用的。所以本着服务于App的目的,所以我们把导航分成三类:同级导航、层级导航和内容式导航。
本文主要从导航的目的去展开。
同级导航
一般都是运用在软件的入口位置或者是一级界面上,方便用户在同级界面之间进行来回切换。
优势在于所有的内容都是平面化的,铺开在用户面前。不论用户怎样切换,都能清楚的知道自己现在所处的界面层级,不会迷失方向。
标签导航
最常见,底部固定不动,有效减少层级,直接显示入口,有效提高产品转化率。
当顶部导航标签过多时,会部分隐藏,左右滑动,常见于新闻资讯类 APP。
Tab 导航
页面顶部,辅助标签导航,当前页面不必增加层级的情况下,放置更多的内容
网格导航
icon 平铺,优势在于入口排列在同一界面中,易于操作,对于服务型和工具型应用非常友好。
缺点是没有主次,容易使用户迷惑、选择困难,阻碍用户提取信息。
层级导航
层级导航可以一直向下滚动页面,多用来展示,而不是作为主要入口出现
抽屉式导航(汉堡导航)
把标签集合在一起,隐藏于抽屉中,在点击抽屉图标时展示出来。
从左右两边拉出,也称之为侧边栏导航
可节省更多空间,但会将功能隐藏起来,需要多一步操作,影响使用感,可用于低频操作。
列表导航
常见于功能比较单一的 APP
列表长度没有限制,可无限的通过滚动屏幕浏览,由上至下。
内容式导航
多出现于咨询、社交功能不强的软件中,用户可直观浏览内容,二级页面是对内容导航的承接。
轮播式导航
用户可左右滑动页面,适合页面层级少的 应用,轮播导航下方通常会有分页点
交互层级低
卡片导航
常见排列形式有:列表、网络、轮播、泳道
一组聚合的矩形
优势是清晰直观,无理解压力,易于操作。
劣势是占用空间大,有一定视觉压力,需合理设计。
卡片导航-泳道导航
垂直排列的轮播式导航,每个轮播可以独立水平滚动
交互形式是水平滑动、垂直滑动、点击
泳道的优势在于更加具有交互感也可以展示更多的内容,但是泳道的使用需要非常谨慎,因为被隐藏的内容难以被发现,需要进行一些引导,而且要考虑到内容的优先级。
卡片导航-陈列式导航
同级内容并列在同一个界面,横向纵向排列,向下无限延伸,滚屏浏览
优势是很大限度的呈现内容,电商 APP 友好
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册