多语言展示
当前在线:886今日阅读:179今日分享:36

常用的APP导航布局有哪几种?应该怎么设计?

导航,是App设计时要着重考虑的,常见的App框架有列表、网格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合。常见的app框架有列表、网格、屏幕轮显、标签导航、tab导航、抽屉导航、卡片、泳道、堆叠组合。
方法/步骤
1

列表:列表(list),常见于功能比较单一的应用场景,是app中最常用的一种方式。列表内容常见形式有:文字列表、图标和文字的混合列表、标签和控件(复选框、按钮)列表、图片和视频缩略图与文字组合列表。遵循由上至下的阅读习惯方式,所以使用起来用户不会觉得困难。合理的应用列表,给自己的app加分。iOS和安卓的列表最小高度是不同的,安卓48dp,iOS的是44pt。

2

网格:网格(grid)就是把应用图标、缩略图、功能图标等内容根据水平方向和垂直方向划分所构成的辅助线进行布局。在界面设计中,九宫格这种类型的构图更为规范和常用,用户在使用过程中非常的方便,应用功能会显得格外的明确和突出。很明显的例子就是iPhone、安卓、windows phone主界面,均是采用的网格布局设计。在应用中,网格布局通常用来展示媒体内容,比如照片、视频、音乐专辑等;或者是包含图像、文本、按钮、链接元素的卡片。和列表一样,点击网格时,会进入到下一级内容,展现出另一个网格、内容列表、空间列表、预览页面、详情页面等。也可能会在当前页面弹出模态页面,进行更多操作。网格也可以进行有限或无限的滚动,通常条目过多的时候会把下面的条目展示部分到页面上,指导用户还有更多内容。

3

屏幕轮显:屏幕轮显(screen carousels)也是一种常见的交互方式,使用者可以向左或者向右滑动进行快速切换页面,比较适合页面层级较低的交互,几乎不需要进一步的交互。轮显的优点就是交互层级低,一般不需要用户更多的点击操作,适合层级简单的应用,一个页面基本就能满足需求。缺点就是不适合交互复杂的app。常见的有ios的天气应用、墨迹天气、常见的app引导页。

4

标签导航:标签栏(tab bar)通常以文字、图标、或者文字图标组合进行展示。点击标签,主内容区的页面会跟着切换,展示对应的内容。标签栏在iOS中一般在屏幕下方,经常使用图标,并在图标下方加上对应的文字。在安卓中,标签栏通常在屏幕上方。

5

抽屉导航抽屉(drawer)熟称汉堡导航,是把更多标签集合在一起,隐藏在抽屉中,点击抽屉图标,展示出来。和标签栏一样,被选中的项目会高亮展示。抽屉里的栏目样式不限定,常见的是文字列表或者带图标的列表,当然还有其他更多形式。抽屉的样式有两种,一种直接覆盖在原页面上,另一种是将原页面挤过去并排展示。抽屉的图标一般是放在左上角,但也有次要的抽屉放在右上角。抽屉的使用也一直备受争议,支持者认为,手机屏幕小,隐藏菜单,能展示更多的内容;其他人认为,抽屉将功能隐藏起来,需要多一步操作,很多功能不明显,影响了使用。当然,两方的说法都没有错,只是我们要合理使用。对于常用的功能应用,使用抽屉并没多大影响,用户会很快适应。如果你使用抽屉,建议首次进入时直接打开抽屉,或者采用首次引导。但是,本身应用就很少被用到,建议使用标签导航,主流应用也是以标签导航为主的。

6

泳道泳道(swimlane)是一组垂直排列的轮显,每个轮显能水平滚动,互不影响。泳道结合了网格布局的方法,排列比较规整。泳道的交互形式主要是:水平滑动(展示单条泳道里面更多的内容)、垂直滑动(展示更多泳道)、点击(进入泳道的下一层级)泳道需要注意的是,不能设置为自动滚动。在进行排版时,将泳道内的最后一个内容露出部分,引导用户进行水平滑动,垂直布局上也应该如此,减少用户的迷茫。使用泳道是要谨慎使用的,因为后面被隐藏的内容是不容易被发现的,所以使用泳道的时候要考虑到优先级的问题。

7

卡片卡片(cards)包含一组特定数据集的纸片,数据集含有各种相关信息,例如,关于单一主题的照片,文本,和链接。卡片常见的组织形式是列表,有时候也会以网格、轮显、泳道的形式出现。卡片有这些特点:一清晰直观,二简单易懂,三信息模块化。显示这些内容时使用卡片布局:作为一个集合,包含多种数据类型,如图像,电影和文本不需要直接比较(用户不直接比较图像或文字)支持高度可变长度的内容,如注释包含交互式内容,例如 1按钮或评论否则将在网格列表中,但需要显示更多的内容来补充图像

8

堆叠组合在非游戏类移动应用中,堆叠组合是最多使用的app框架模式。堆叠是常以列表、网格的形式存在,顶端或底端会有一个控制导航或访问功能的条栏。app中一种导航模式基本很难满足业务和使用需求,都是多个形式组合在一块,展示更丰富的内容。如下图,汽车之家首页采用了轮显、泳道、底部导航、顶部导航;淘宝也采用了轮显、网格、底部导航。

推荐信息