大内高手社区

标题: APP导航栏设计分析(上):4种交互状态 [打印本页]

作者: 玫瑰黑糖    时间: 2022-7-19 17:33
标题: APP导航栏设计分析(上):4种交互状态

  APP导航栏(App Bar)大家应该都很熟悉,位于屏幕顶部,集合了用户经常使用的一些功能,是页面设计中不可缺少的组成部分。

  虽然导航栏很常见,但是我们在使用产品的过程中会发现,每个APP的导航栏或多或少都存在一些设计上的差异。为了能让大家对导航栏有更清晰且全面的认识,这篇文章将导航栏的设计样式、设计风格、交互状态等多方面的内容综合在一起进行分析,一起来看看吧~

  一、导航栏的构成

  整个导航栏通常分为左、中、右三部分,左侧和右侧主要用来放置功能控件,中间部分主要用来放置文字标题,接下里展开分析左中右三部分的构成。

  左侧导航

  放置在APP顶部导航栏左侧的控件很多都跟动作相关,例如执行返回动作、关闭动作或者点击汉堡菜单进行展开动作等。

  除了在左侧放置表示动作的控件,还可以在放置头像框、消息提示等优先级较高的内容,用来引起用户的注意。

  在网页端的顶部导航栏中,左侧都会放置品牌logo,因为网页端顶部的空间更大,所以还可以在LOGO周围结合徽标、搜索框、下拉菜单等空间。

[attach]553[/attach]


  中间部分

  APP顶部导航栏的中间部分主要用于放置标题,当然根据使用场景的不同,还可以放置头像、搜索框、下拉框、导航等控件。

  1) 标题

  最常见的是在中间使用加粗的文字作为标题,也可以使用主标题+副标题的形式来展示更多的信息。还可以把标题区域做成支持下拉的样式,扩展更多的功能全。

  2) 用户头像

  在社交类产品或对话框中,会在中间部分放置用户的头像和信息,用来展示用户的详细信息。

  3) 产品Logo

  有些产品还会将Logo放在导航栏的中心位置用来展示品牌形象,在APP的首页可以考虑这样设计,起到强调作用。

  4) 分段控件

  在移动端产品中,还可以在中间部分放置分段控件,通常2-3个标签,在早期的网易云音乐APP中就用到了这样的设计,通过点击标签或者左右滑动页面完成内容切换。

  5) 搜索框

  导航栏中间经常能看到搜索框,然后搜索框左右两边放置其他的控件。当导航栏的内容太多,比如有文字标题、头像、按钮等控件,搜索栏和这些控件可能无法并排放置时,可以将搜索栏横向拉长,放在下一行单独展示。

  现在淘宝APP首页的导航栏就做成了两行,上一行用来放置文字标题和功能图标,搜素栏集合扫码、拍照等功能单独作为一行。

  6) 导航选项

  在网页中,标签、按钮、面包屑导航等常见的导航组件,通常会固定在网页导航的中心位置。当页面缩小到移动端时,考虑到移动端尺寸较小,如果顶部导航内容太多,可以尝试把功能组件放到第二层级。

  右侧导航

  相对于左侧和中间,APP导航栏的右侧部分更加灵活,没有固定的要求说必须放哪些内容,根据需求放置各种类型的功能控件。

  1) 头像

  如果想调用与用户属性相关的功能,就可以将头像放在导航栏的右侧区域,点击弹出相关的选项。

  2) 图标

  在右侧区域放置功能图标是最常见的设计,把用户最常使用的功能,例如消息图标、搜索图标,都可以集中到导航栏的右侧区域。

  如果右侧需要展示的图标太多,可以把这些图标聚合在一起,处理成类似微信首页右上角的设计,点击之后出现更多功能。

  3) 按钮

  按钮也可以放在右侧区域来引导用户操作。当出现多个按钮时,要使用样式和颜色来灵活区分按钮的主次关系。

  按钮的形状包括圆形、方形、圆角矩形等,按钮样式包括颜色填充、描边、图标和文字结合等多种风格,通过灵活的设计抓住用户的注意力。

  4) 搜索框

  在网页端中会看到搜索框放在右侧的设计,将搜索框作为单独的控件或者和其他控件组合使用放在右侧,方便用户快速访问。

  5) 下拉菜单

  在Pad端和网页端中,可以使用嵌套在应用栏右侧的下拉菜单进行切换帐户、语言等操作。

  【免责声明】本文部分系转载,文章来源于公众号Clip设计夹 ,作者大Clip设计夹,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!






欢迎光临 大内高手社区 (http://bbs.tedu.cn/) Powered by Discuz! X3.4