APP开发阶段怎么设计APP导航,APP栏目导航需要注意哪些?
UIUX设计在自建移动应用中占据很重要的位置,好的交互效果,美观且合适的设计风格都会为移动应用带来多重优势。
人是感官动物,下载您的移动应用后,首先意识就是“这个移动应用好不好看”,而这一点将决定了他会不会继续使用您的移动应用。
APP制作专家一门APP发现,假设用户无法简单在应用中进行导航,则将很快对您的应用失去兴趣。
所以,能否为APP设计出有效的导航功能很重要。
app导航设计的四大注意事项
一. 可达性 – APP的导航功能能够说是所有界面最关键的组成部分,所以一定要确保其可达性,并把最重要的要素尽量突出,同时不要影响到内容本身。
二. 是否有意义 – 保证菜单、操作栏、弹窗、按钮、箭头、链接等导航要素轻松明了,让用户看一眼就知道是什麽意思以及操作成果是什麽。
不要弄的太过花哨,用户没有耐心去“猜”。
三. 易于理解 – 假设您想设计相对高级的导航功能(例如链接图片、允许滑动或其他手势导航,或者访问隐藏菜单),请务必在设计过程中确保前后一致,以便
用户熟悉您所使用的模式,同时还应加入一些额外的信息(例如小箭头、文字或改变颜色或高亮等)来吸引用户注意力,并以微妙的方案对用户进行引导。
不要给用户呈上“看得见摸不着的导航功能”。
四. 常用性 – 您的导航功能应当以一定的形式显示于APP的各个界面。
各个导航模式不一定要完全相同,但其根本结构应当在应用内保持一致,能够依据背景进行小幅度的调整。
常见的导航设计模式
核心导航
· Springboard 跳板式
· List Menu 列表式
· Tab Menu 选项卡式
· Galllery 陈列馆式
· D自己创建appashboard 仪表式
· Metaphor 隐喻式
· Mega Menu 超级菜单式
· Drawer Menus 抽屉式
次要导航
· Page Carousel 页面轮盘式
· Image Carousel 图片轮盘式
· Inline Expand 扩展列表式
· 圆盘(扇形)式
其中,所有核心导航模式都能够用作次级导航,但次级导航则不太适合用作核心导航。
一. Springboard 跳板式
优点:
1、清晰展现各入口
二、容易记住各入口位置,方便迅速找到
弊端:
1、无法在多入口间灵活跳转,不适合多任务操作
二、容易形成更深的路径
三、不能直接展现入口内容
四、不能显示太多入口次级内容
二. List Menu 列表式
优点:
1、层次展示清晰
二、可展示内容较长的标题
三、可展示标题的次级内容
弊端:
1、同级内容过多时,用户浏览容易产生疲劳
二、排版灵活性不是很高
三、只能通过排列顺序、颜色来区分各入口关键程度
三. Tab Menu 选项卡式
优点:
1、明白当前所在的入口位置
二、简单在各入口间频繁跳转且不会迷失方向
三、直接展现最关键入口的内容信息
弊端:
功能入口过多时,该模式显得笨重不实用
四. Galllery 陈列馆式
优点:
1、直观展现各项内容
二、方便浏览经常更新的内容
弊端:
1、不适合展现顶层入口框架
二、容易形成界面内容过多,显得杂乱
三、设计效果容易呆板
五. Dashboard 仪表式
提供了一个度量KPI (重要绩效指标)是否达到诉求的方法。
每一项度量都能够显示出额外的信息,这种模式对商业应用、分析工具、销售和市场应用非常有用。
六. Metaphor 隐喻式
用页面模仿应用的隐喻对象。
核心用于游戏,同时在帮忙助力人们组织事物(如日记、书籍、红酒等),对其进行分类的应用中也会用到。
七. Mega Menu 超级菜单式
八. Drawer Menus 抽屉式
这种导航的主要思想就是隐藏,将最核心的信息显示在界面上,而将非主要的信息隐藏
优点:
一.节省屏幕空间,让导航“藏”在侧滑抽屉里,释放了更多的空间给核心内容。
二.Drawer的好处就是可以提供在非顶级视图间导航的能力。
弊端:
一. 可发现app混合式开发框架性低;
二. 在某些官方下,和官方固有的导航设计模式有所冲突;
三. 低效,并非一瞥即得。
在哪些场景下意见使用抽屉导航呢?
一. 顶级视图超过三个;
二. 低层视图交叉导航;
三. 导航层级很深;
四. 导航枢纽:用户想要频繁访问导航。
九.页面轮盘式
这些导航方案不是孤立的,对于内容比较复杂的app会常常混合其中的几种导航,至于app应该采用哪种导航架构,第一应该依据app 的特性选用适合哪几种导航模式,然后再依据各个导航的优弊端确认适合的导航方案。
在一门APP的模块Store中包含数百种UIUX设计模块,其中有各类导航菜单、以及各式界面布局,方便制作者自建移动应用时随时调用。
- 开发APP从一门开始www.yimenapp.com
- APP打包:https://www.yimenapp.com/more.html
- EXE打包:https://www.yimenapp.com/exe.html
- 商城APP:https://www.yimenapp.com/shop.html
- IOS免签打包:https://www.yimenapp.com/iosmianqian.html
- APP上架:https://www.yimenapp.com/iosup.html
- APP软著申请:https://www.yimenapp.com/softpage.html
- SSL申请:https://www.yimenapp.com/ssl.html
- Discuz APP:https://www.yimenapp.com/discuz.html
- 教程汇总:https://www.yimenapp.com/jiaocheng.html