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