本港台开奖现场直播 j2开奖直播报码现场
当前位置: 新闻频道 > IT新闻 >

APP设计模式:浅析导航栏设计(2)

时间:2017-06-29 18:10来源:天下彩论坛 作者:118KJ 点击:
宫格导航是将主要入口全部聚合在主页面中(因其布局比较像传统PC桌面上的图标排列,又被称为“桌面式导航”),每个宫格相互独立,它们的信息间也

宫格导航是将主要入口全部聚合在主页面中(因其布局比较像传统PC桌面上的图标排列,又被称为“桌面式导航”),每个宫格相互独立,它们的信息间也没有任何交集,无法跳转互通。因为这种特质,宫格式导航被广泛应用于各平台系统的中心页面。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,因此现在采用这种导航的APP已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。下图应用分别是钉钉和epocrates:

APP设计模式:浅析导航栏设计

作为二级导航的宫格式导航:

APP设计模式:浅析导航栏设计

1.5 舵式导航

在有些情况下,简单的底部tab式导航难以满足更多的操作功能,这个时候我们就需要一些扩展形式来满足需求 ,新浪微博、lofter、闲鱼底部采用的就是舵式导航,舵式导航(之前看到别人这么叫所以我也就这么称呼吧)跟标签式导航相比,区别在于舵式导航把类似生产内容的主功能按钮放在中间,标签更加突出醒目,同时该主功能标签做了功能扩展,也因此给设计增加了一些个性化的亮点。如新浪微博和育学园:

APP设计模式:浅析导航栏设计

1.6 隐喻式导航

这种模式的特点是用一个页面来体现整个应用程序。常用于游戏app,如Air Supremacy和2020:My country。

APP设计模式:浅析导航栏设计

此外,在分类物品(如各类笔记、书籍、酒品)应用,和其他单一功能应用中也能经常看到隐喻式Tab。如DAKA、石墨文档、拼图酱和Moment:

APP设计模式:浅析导航栏设计

APP设计模式:浅析导航栏设计

最佳实践:使用隐喻式要慎重,一个执行起来不明确的隐喻,反而会起到反作用。

2 二级导航

二级导航用于在页面及模块中进行导航,因此这种应用通常来讲至少有3层信息结构,最常见的就是国内绝大多数APP都有的“我的”功能菜单。

2.1 列表式导航

列表式导航作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。列表导航与宫格导航类似,常用于二级页面,不会默认展示任何实质内容,所以通常app不会在首页使用它。这种导航结构清晰,易于用户理解,能够帮助用户快速的定位去到对应的页面。下图应用分别是微信和Strides:

APP设计模式:浅析导航栏设计

列表菜单导航的每个列表均指向相应的功能/内容选项,它有许多衍生形态,包括个性化菜单列表、分组菜单列表和增强型菜单列表。增强型菜单列表是指在简单列表的基础上,带有额外的搜索、浏览及过滤功能。

下图应用分别是:QQ、有道云笔记、Retrica和Strides:

APP设计模式:浅析导航栏设计

APP设计模式:浅析导航栏设计

最佳实践:列表菜单导航适合长标题或者有副标题说明,使用类表菜单导航应该提供一个从子页面返回类表页面的方式,通常在标题栏添加一个带有菜单字样的按钮作为返回按钮。

2.2 选项卡式

底部选项卡现在几乎成了IOS和Android两大系统(黑莓和webOS也比较广泛,但因为已经不是主流系统,因此暂不讨论)阵营中,绝大多数应用的标配。如Facebook、Twitter、微信和新浪微博:

APP设计模式:浅析导航栏设计

APP设计模式:浅析导航栏设计

也有非常多的应用,将Tab标签设置再了导航栏下,即顶部导航,有点类似于传统网站导航,如360云盘、扇贝单词、豆瓣和Facebook等。

APP设计模式:浅析导航栏设计

APP设计模式:浅析导航栏设计

最佳实践:使用选项卡导航要注意视觉上对已选择和未选择的选项进行有效区分。

2.3 图库式

(责任编辑:本港台直播)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容