APP顶栏是一个至关重要的导航元素,贯穿整个APP,需要始终保持一致性。它可以让用户轻松切换屏幕或访问重要功能,确保无缝和直观的用户体验。
应用APP顶栏(也称为应用栏或导航栏)是位于应用或屏幕顶部的界面组件。
提供一致的导航和访问功能,APP顶栏充当中央枢纽,使用户可以在屏幕之间切换,访问重要功能,并在APP使用中保持和用户沟通。
APP顶栏通常包括各种交互元素,如菜单、按钮、图标、搜索栏和通知。这些元素使用户能够执行常见操作并导航到应用程序的不同部分。
现在让我们深入了解APP顶栏界面设计的详细信息吧 ↓
目录
- 左侧控件
- 中间部分
- 右侧控件
- 扁平风格
- 突出显示
- 阴影风格
- 反色风格
- 透明风格
- 选中状态
- 固定在底部位置
- 滚动时的阴影
- 模糊背景
- 调整大小时隐藏项目
结构
让我们分析APP顶栏的左侧、中间和右侧的功能bar。内容较多可以隐藏未使用的部分,例如隐藏标题,或者去除右侧控制部分。
左侧控制Bar
在应用的左侧,可以放置任何你想引起用户注意的可操作元素。通常,系统导航是大多数情况下的常见选择,用户对这种模式非常熟悉。
它们可能包括:
- 返回操作
- 菜单
- 关闭
- 自定义(例如设置、个人资料等)
或者,您可以使用其他类型的控件,以突显在特定情景上的控制。
在桌面屏幕上,您可以组合各种元素,以更充分地利用APP顶栏的空间功能。可以结合Logo标志、搜索输入、下拉菜单、图标(作为按钮)等等。
中间部分Bat
APP顶栏的中间空间主要用于显示应用程序的标题。如果需要,您可以将其替换为与当前App相关的其他控件。
中间部分可以包含以下内容:
- 标题(可能包含副标题)
- 用户头像(可能包含姓名)
- Logo标志
- 分段控件
- 搜索输入
- 导航项(选项卡、按钮组、面包屑等)
标题
您可以使用一个标题来命名APP,或者通过启用副标题来扩展其信息描述内容。
如果标题被点击后有内容需要展示,可以添加一个 Chevron/Caret 提示图标,以明确指示有内容要展示。
用户头像
用户头像可以用于在与个人资料、消息、社交互动时显示特定用户信息。将可点击的头像放置在APP顶栏的右上角区域,点击后可能会导向个人资料设置或显示弹出菜单。
Logo标志
将标志放在APP顶栏的中央部分,以优先考虑品牌标识。这特别适用于首页/起始页,用户的浏览通常从这里开始。
分段控件
在移动设备上,将分段控件放入应用导航栏中,只需一个操作即可切换屏幕状态或内容属性。
搜索输入
通常用于桌面端顶栏bar,中央位置的输入框可用于用户方便地进行搜索。
在移动设备上,通常在调整大小时,它会移动到APP顶栏的第二层。
导航项
选项卡、按钮组、面包屑是APP顶栏中常见的导航组件。
与前述情况一样,当缩小到手机视图时,它们会移到第二层。
右侧控制Bar
在APP顶栏的右侧,您可以放置任何类型的组件。可以放置一个单一控制项,或者经常使用的多个控制项。
例如:
- 头像
- 图标(作为按钮)
- 按钮(用作操作按钮)
- 搜索输入(主要用于桌面端)
- 下拉菜单(例如,用于切换帐户、语言等)
头像
为了显示与用户属性相关的内容,可在APP顶栏的右上角放置一个可点击的头像。
点击头像可以进入个人资料设置或显示弹出菜单。
图标按钮
将图标用作按钮,在符合用户习惯的常用操作。
将最常用的控件放在这里,使用户可以随时看到。
对于那些拥有5个或更多图标按钮的,您可以将不常用的项目隐藏在弹出菜单中,这种方法特别适用。
按钮
将按钮放置在右侧区域,以进行操作。当有多个按钮时,明智地使用样式和颜色,以区分与APP业务逻辑相关的主要和次要操作。您可以选择不同的形状,如方形、圆形、椭圆形按钮,并根据需要吸引用户注意力,选择不同的样式,如填充、凸起、轮廓(虚线)、平面等。
搜索输入框
通过将搜索输入框放置在右侧,作为单个组件或与其他控件组合使用,以便用户可以方便地进行搜索。这种方式主要适用于web端的情况。
下拉菜单
可以在APP顶栏的右侧区域嵌入下拉菜单,用于切换用户、账户、语言等。这种方式通常在平板电脑/桌面端高分辨率下使用。
样式与主题Styles & Themes
您可以通过添加各种样式为APP顶栏设置主题。为了与整体APP界面的外观相匹配,您可以使用以下主题:
- 扁平
- 凸出
- 阴影
- 反色
- 透明
扁平
APP顶栏的扁平主题多采用极简主义的设计,没有分隔,使标题和背景形成视觉上的融合。
凸出
突出风格为APP顶栏添加了平滑的阴影,以便轻松区分悬停在背景上的APP顶栏Bar。
阴影
APP顶栏填充了固定颜色,透明度降低至8-12%。这样,您可以使APP bar与品牌颜色相匹配。
反色
这是APP顶栏的深色版本,可以通过颜色对比突出显示标题。由于颜色与整体应用主题相反,所以称之为反色。
透明
这种样式主要用于移动APP顶栏,为特定部分(例如项目详情、个人资料、交易)提供更多空间,以展示全尺寸的图片。
用户体验与可用性UX & Usability
让我们来看一些特别适用于APP顶栏的行为。有些情况下,APP头部可能具有以下特性:
- 选定状态
- 定位在底部
- 滚动时的阴影
- 背景模糊
- 调整大小时隐藏
选定状态
APP顶栏可以动态切换主题,提供即时的用户反馈,例如在选择项目时、发生事件时、警告状态等。
定位在底部
在手机视图中,您可以将应用栏附加到底部。 因此,所有重要的操作都可以通过更少的手指伸展来实现。
从概念上讲,您可以为桌面 Web 应用实现相同的设定。 例如,在 macOS 和 Windows 上的桌面底部Docker栏,并且这种模式对于用户来说很熟悉。
滚动时的阴影
当屏幕滚动时,APP顶栏会升高。这种效果主要适用于扁平式头部。浮现的阴影模拟了悬停效果,使APP看起来更加自然和有逻辑。
背景模糊
这种微小的视觉效果使整体用户体验更加流畅。通过使用 CSS 属性 backdrop-filter: blur(16px);
可以实现APP顶栏背景的透明模糊效果。
调整大小时隐藏
在APP顶栏的导航项在调整大小时有时需要折叠并隐藏在“更多”操作(点点)的后面,特别是在从桌面尺寸调整到移动设备大小时。
这就是设计更好的APP顶栏所需要知道的一切。希望这次探讨能帮助您改善应用设计中用户体验。