正在发生

观察行业视觉,用我们专业的角度,讲出你们的心声。

您当前所在的位置:原创观点>中至胜观点

手机网站建设中导航布局有哪些类型?

2020-01-15 95 字号 作者:

    手机网站建设中导航布局有哪些类型?导航布局,是UI设计时需要重点考虑的部分。一个手机网站的导航可以被设计成多种形式的,导航设计的合理与否,直接关系到用户能否根据自己过去的生活习惯和直觉,不假思索地去浏览手机网站,并且完成用户想要完成的任务。上篇谈到了企业网站制作过程文字排版应满足什么要求?本次谈谈手机网站建设中导航布局的类型。

1.jpg

    1 一级导航/主导航

    1.1 标签式导航

    标签式导航又叫Tab式导航,是目前移动端市场上最为广泛的导航设计。标签导航通常分为底部,顶部,顶、底混合使用这三种模式。

    1.1.1 底部导航

    采用文字加图标的方式展现。一般有3~5个标签,适合在相关的几类信息中间频繁的切换使用。这类信息优先级较高、用户使用频繁,彼此之间相互独立,通过标签式导航的引导,用户可以迅速的实现页面之间的切换且不会迷失方向,简单而高效。它的缺点是会占用一定高度的空间,如果用户是小屏幕手机,则视觉体验不太好。

    1.1.2 顶部导航

    当内容分类比较多,用户对不同内容的打开率相差不是很大,需要快速切换/调出的时候,经常会采用顶部导航设计模式。

    1.1.3 顶部、底部双Tab导航

    标签式导航除了设在顶部和底部,另外有些内容比较多的产品会采用顶部、底部混合使用标签式导航,

    1.2 抽屉式导航

    抽屉导航指的是一些功能菜单按钮隐藏在当前页面后,点击入口或侧滑即可像拉抽屉一样拉出菜单。这种导航设计比较适合于那么不需要频繁切换的次要功能,例如对设置、关于、会员、皮肤设置等功能的隐藏。

    抽屉式导航的优点在于节省页面展示空间,使主页面更加简洁美观,让用户将更多的注意力聚焦到当前页面。

    缺点在于次功能入口比较隐蔽,用户不容易发现;使用次功能需要二次点击,增加用户使用成本。

    1.3 桌面式导航

    桌面式导航类似于操作系统或启动控制面板,其特色是主页由多个按钮组成。均衡布局时,按钮通常大小一致,以3*3、2*3、2*2和1*2等形式排布于桌面。点击按钮时,跳转至其他内部子系统/子模块。

注:当圆角矩形弧度越来越小,甚至消失不见成为正方形的时候,往往用方形格子隔开各个按钮,使得视觉效果最好,这种模式见于下一节的“宫格式导航”中。

    1.4 宫格式导航

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

    2 二级导航

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

    2.1 列表式导航

    列表式导航作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。列表导航与宫格导航类似,常用于二级页面,不会默认展示任何实质内容。这种导航结构清晰,易于用户理解,能够帮助用户快速的定位去到对应的页面。列表菜单导航的每个列表均指向相应的功能/内容选项,它有许多衍生形态,包括个性化菜单列表、分组菜单列表和增强型菜单列表。增强型菜单列表是指在简单列表的基础上,带有额外的搜索、浏览及过滤功能。

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

    2.2 选项卡式

    底部选项卡现在几乎成了IOS和Android两大系统(黑莓和webOS也比较广泛,但因为已经不是主流系统,因此暂不讨论)阵营中,绝大多数应用的标配。也有非常多的应用,将Tab标签设置再子导航栏下,即顶部导航,有点类似于传统网站导航,如360云盘、扇贝单词、豆瓣和Facebook等。

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

    2.3 图库式

    图库式界面被分割成用于导航的各个内容区块。内容区通常载有单独的文章、标题、照片、产品和其他能够放置在内容区、网格或幻灯片里展示的内容。如TED、BBC NEWS、Bilibili、搜狐视频等。

有时候如果内容区是以分组形式布局,分组的内容应设计得容易被用户浏览到,如使用侧Tab形式(也称抽屉式导航)去管理分组内容,让用户能够在Tab中切换,查看不同分组。

    最佳实践:图库式界面的设计模式适用于用户想要浏览的、经常更新的内容。

    2.4 页面旋转式

    页面旋转常见模式是使用左右滑动手势在页面间快速切换,用户滑动时将显示下一个页面。页面指示器(IOS系统下面的小点)显示一共有多少页可供切换。

    手机网站页面旋转导航模式有一定的局限性,当页面超过8个时,要考虑使用列表导航。

最佳实践:

    ①页面旋转导航适用于页面数量较少的情况;

    ②使用指示器反应页面数量和当前页面;

    ③左右滑动手势是最常见的旋转导航手势。

    2.5 图片旋转式

    图片旋转式的常见形态,是类似于2D旋转木马形式,图片可以左右滑动,且沿任意方向一直滑动可重新回到初始图片处。

    武汉网站建设中至胜网络专注于:武汉高端网站设计、武汉小程序开发、武汉微信开发、武汉网站建设、武汉网站设计

企业网站制作过程文字排版应满足什么要求? 企业网站设计中色彩有何特点?

企业网站制作过程文字排版应满足什么要求?企业网站设计中色彩有何特点?
多一份参考,总有益处
联系中至胜,免费获得专属《策划方案》及报价