app的架构和导航设计
app的好坏不仅仅和其功能设计有关,更好其产品的架构以及导航设计,视觉设计有很大关系。好的产品架构设计和导航设计,能够合理地展示产品的功能,并合理引导用户使用产品功能。
用户使用app的过程就是一个探索产品的过程,而导航要做的就是给用户指明方向,告知用户在哪儿,他该怎么去他想去的地方。
比较前后两个版本的微信,我们就可以发现,微信在底部导航上面做了较大的改进,将找朋友的功能变成了发现,这个发现本身具有探索的意思,引导用户自己去发现新的功能,这一设计被多家app采用。设置成为“我”中的一个功能,变更之后两个按钮包含了更多的功能,这两个按钮明确地用户需要探索获得信息和个人的内容区别开来的确是优秀的导航设计。这种设计能够明确告诉用户你现在在哪?你如何找到需要的东西。
一、 功能和所展示信息的归类
如果希望你的导航能够清晰和简单,那么你首先需要对你的app的各种功能进行归类和架构,以便能够在导航设计时将他们整合达到一个统一的按钮之中。构建一个app的归类和架构等于完成了app的基本骨骼,只有在骨骼合理的情况之下,才有可能在添入血肉之后成为一枚“美少女”。
对于app中信息,进行归类,使得展示出来的信息不杂乱,对于其功能构建一个合理的网状的功能操作模式,来让设计师知道用户如何在app的各个功能层级之间进行流转,用户对每个功能有哪些需求。
二、 导航方式的选择
在完成了app的功能架构和信息分类之后,就需要选择导航的方式。主要的导航方式包括:经典的tabbar,侧边的抽屉式导航栏,滑条式导航栏,以及图标式导航栏,以及他们之间的组合。针对不同的产品类型和功能设计,可以采用适当的导航栏。
1、tabber
这种经典的底部导航栏受到绝大数app设计师的青睐。这种设计符合手机端用户单手操作的习惯,包括新版微信,人人新的2014版本的手机端,百度手机等都采用的这一方式。这种设计一般方式是:
**设置一个回到首页的按钮
**将最核心的最常用的功能键设置在导航栏中间
以四个导航按钮为例,最方便操作的是第二和第三个按钮,例如微信将最常用的发现(包含朋友圈,扫一扫,游戏中心等)设置在第三个按钮上,国外流行的图片分享应用instagram则将最为核心的图片分享功能设置在了导航栏最中间的位置。突出了核心功能的同时,方便用户操作。
**导航栏按钮个数控制在3-5个为宜,三个略显简单,五个略显拥挤,四个最佳。
**图片下方是否需要标示文字。这个需要根据产品本身来决定,国内一般的设计都进行的标示,如微信的做了是否简介的标示“发现”&“我” facebook的设计同样做了标注
**如果有更多的功能需要展示,要么学习微信,将你的功能归类在一个大项之下,要么做一个按钮”更多“来展示那些tabber放不下的功能。
2、抽屉式导航
这种隐藏在侧边的导航栏,需要进行某种操作才能展示,一般需要向左滑动或者点击顶部按钮,即可进入导航栏,或者利用安卓手机自带的硬按钮。
国内的应用中也有许多采用这一方式,如豌豆荚就采用了这一导航模式,而在主页看并没有tabber导航模式,这种方式优点是可以展示更多的功能,但缺点也很明显,那就是增加操作成本,在没有首页按钮的情况下,用户很难回到初始页面。导航栏起到的作用就是像路标一样指导用户,而这种导航方式需要用户先把藏起来的路标找出来,才能看到路标。
3、滑条式导航栏
这种导航栏多见于信息来信息,含有大量信息的应用,在进行分类时,有许多平级的信息需要并排显示,次数滑动式的导航栏,便能够很好地完成这一任务。最近很红的新闻应用”今日头条就采用这一方式。此类导航适合功能较少,而信息分类较多的场景,如新闻类app,此类应用不设置tabber,为用户节省更多的页面空间减少阅读信息的障碍。
滑条式的导航还可以和tabber导航结合在一起来实现多层级的功能导航。例如360手机助手、联想乐商店等就有类似设计。底部的taber推荐功能下,在顶部有滑动式导航,两个层次功能导航。
4、页面图标式导航
这种导航多见于工具类应用,用户只是在需要时使用,此时采用超大图标,展示产品功能也是一个不错的设计。