Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >收藏!UI Tabbar底部标签栏设计全攻略

收藏!UI Tabbar底部标签栏设计全攻略

作者头像
用户5009027
发布于 2022-10-27 02:54:21
发布于 2022-10-27 02:54:21
2.2K0
举报
文章被收录于专栏:静Design静Design

底部标签栏(也称为导航栏)是移动设计中最流行的导航类型之一。它位于易于触及的区域,使用户的拇指可以轻松访问。尽管它相对简单,但要正确设计可能会很棘手。

在本文中,我将分享设计标签栏时要记住的 7 件事。

标签栏导航剖析

底部标签栏可以是纯图标导航:

或图标可以与文本标签的组合:

所选导航选项通常具有不同的视觉风格,可以帮助用户一目了然地了解当前位置。

苹果 iOS 标签栏

对于 Apple iOS,导航选项的容器大小等于 390x49。(也可以是375)

苹果iOS标签栏

容器中图标的大小为:

  • 25x25 pt 用于常规标签栏
  • 18x18 pt 用于紧凑的标签栏

对于方形字形,图标应该是:

  • 23x23 pt 用于常规标签栏
  • 17x17 pt 用于紧凑的标签栏

对于文本标签,Apple iOS 使用 SF 字体,中文使用思源黑体或者苹方,大小 10 和中等粗细。

标签栏设计的 7 个注意事项

1.不要在bar中放置触发动作的元素

标签栏包含导航目的地,而不是操作。不要放置触发动作的控件,例如创建。

❌“创建”是行动,而不是导航选项

此规则的唯一例外是使用视觉上区分的号召性用语元素,如下例所示。

✅ 带有特定号召性用语对象的标签栏

2.不要添加超过5个导航图标

Tab 栏最适合 3-5 个顶级导航目的地。使用超过五个选项会使目标彼此过于接近并损害可用性。用户可能会意外触发错误的选项。

❌ 导航选项太多。与拇指(红色圆圈)相比,触摸目标(导航选项)太小。

该怎么办:

  • 如果您只有两个顶级导航选项,则可以进行分段控制。
  • 如果您有五个以上的导航选项,则很有可能并非所有选项都是最重要的。您可以评估导航选项,如果您仍然有五个以上的目的地,您可以使用像汉堡菜单这样的控件。

3. 不要设计可滚动的标签栏

可滚动的标签栏会损害可发现性。由于一次并非所有导航选项都可见,因此用户可能很容易错过重要选项。另外,当用户滚动标签栏时,当前位置可能会消失。

❌ 可滚动的标签栏

4. 不要使用不熟悉的图标

您在标签栏中使用的图标对您的目标受众来说应该是非常清晰的。如果您怀疑图标的含义是否明确,则应始终将图标与标签一起使用。

❌ 用户可能不清楚第二个导航选项

5. 不要使用“灰+灰”的颜色组合

图标颜色对比度差和标签字体小是标签栏设计的两个常见问题。

  • 始终检查文本和图标的颜色对比度。3 : 1 是活动用户界面组件和图形对象(如图标和图形)的最小比例(根据WCAG)
  • 确保文本标签清晰易读。

❌ 导航图标颜色对比度差

6. 不要截断标签

您在标签栏中没有太多空间,所以当涉及到文本标签时,每个字符都很重要。切勿截断标签,因为用户不清楚其含义。相反,尝试编写清楚地传达选项的简短标签。

❌ 第二个标签被截断

7. 不要使用花哨的动画过渡

花哨的动画对于初次使用的用户来说可能看起来很酷,但一旦您开始定期使用该应用程序,很快就会变得烦人。每个需要太多动作但没有提供实用价值的对象都会成为让用户感到沮丧的视觉噪音。这就是为什么要尽量避免在选项之间使用花哨的转换。

❌ 避免使用花哨的动画效果来更改导航

作者:Nick Babich

原文:https://uxplanet.org/bottom-tab-bar-design-best-practices-ef3ee71de0fc

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-10-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX
文章索引 4.1.1 状态栏 4.1.2 导航栏 4.1.3 工具栏 4.1.4 工具栏与导航标准按钮 4.1.5 标签栏 4.1.6 标签栏标准图标 4.1.7 搜索栏 4.1.8 范围栏 4.2.1 活动 4.2.2 活动视图控制器 4.2.3 集合视图 4.2.4 容器视图控制器 4.2.5 图片视图 4.2.6 地图视图 4.2.7 页面视图控制器 4.2.8 浮出层 4.2.9 滚动视图(Scroll View) 4.2.10 分栏视图控制器 4.2.11 表格视图 4.2.12 文本视图 4.2
腾讯ISUX
2018/06/29
11.5K0
Material Design — 底部导航(Bottom Navigation)
自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚
霖酱
2018/05/17
4.4K0
最新iOS设计规范三|3大界面要素:栏(Bars)
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。
晓吾
2021/04/08
11.1K0
最新iOS设计规范三|3大界面要素:栏(Bars)
iOS 图标图像 (官方翻译版)
图像尺寸和分辨率 iOS用于将内容放置在屏幕上的坐标系基于以点为单位的测量,它们映射到显示屏中的像素。在标准分辨率屏幕上,一点等于一个像素。高分辨率屏幕具有较高的像素密度。因为在相同量的物理空间中有更
GuangdongQi
2018/05/24
4K0
[ISUX转译]iOS 9人机界面指南(一)下篇:UI设计基础 - 腾讯ISUX
1.8 动画(Animation) 细微、精美的动画遍布iOS的用户界面,他们使应用的体验更具吸引力,更具动态性。适当的动画可以: 传达状态和提供反馈 增强直接的操纵感 将用户的操作可视化
腾讯ISUX
2018/06/29
1.9K0
利用BottomNavigationView实现底部标签栏
在Android Studio上创建官方默认的首屏标签页面很方便,首先右击需要添加标签栏的模块,在弹出的右键菜单中依次选择“New”——“Activity”——“Bottom Navigation Activity”,弹出下图所示的活动创建页面。
aqi00
2020/04/26
2.3K0
利用BottomNavigationView实现底部标签栏
最新iOS设计规范五|3大界面要素:控件(Controls)
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第5篇,介绍3大界面要素(栏、视图、控件)中的控件(Controls)。首先让我们回顾一下iOS的3大界面要素。 3大界面要素 (Interface Essentials) 大多数iOS应用都是由UI Kit中的组件构建的。UI Kit是一种定义通用界面元素的编程框架,这个框架不仅让APP在视觉外观上保持一致,同时也为个性化设计留有很大空间。UI Kit提供的界面组件有三类:栏(Bars),视图(Views),控件(Controls)。
晓吾
2021/04/08
9.7K0
最新iOS设计规范五|3大界面要素:控件(Controls)
最新iOS设计规范七|10大视觉规范(Visual Design)
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第7篇,介绍视觉设计(Visual Design)。
晓吾
2021/04/08
8.8K0
最新iOS设计规范七|10大视觉规范(Visual Design)
Android开发笔记(十九)底部标签栏TabBar
现在的APP,大多在页面底部显示标签栏Tabbar,用于切换不同栏目的页面。Tabbar起源于iOS,iOS的Tabbar自动位于页面下方,可是Android搬过来的时候做了改动,自带的Tabbar位于页面上方,很不适合用户的使用习惯。为此我们在Android实现底部标签栏,得额外进行底部适配处理,适配思路基本都是在底部罗列一排的按钮,然后根据点击不同的按钮,跳到不同的Activity页面。具体的实现方式,博主目前发现了三个:
aqi00
2019/01/18
5.4K0
简单了解下无障碍设计模式
一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的事情。
Jean
2018/10/31
5.3K0
重磅!iOS应用黑暗模式设计终极指南(附套件下载)
在本指南中,我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp,基于Apple的人机界面指南。
用户5009027
2020/03/10
3.6K0
七个用户体验设计小秘诀,打造最舒服的互动流程
好的用户体验是将成功的应用程序与不成功的区分开。根据用户体验设计的好坏,用户每天都有得到和损失。设计移动应用程序时要注意最重要是确保它既直观又实用。显而易见,如果应用程序不实用,就会对用户没有实际价值,任何人都不会有任何理由去使用它。即使应用程序实用但需要付出很多努力,所以人们就不用去学习如何使用它了。 好的设计解决了这两个问题:它明确关注用户的主要目标,并通过界面清晰度消除用户的所有障碍。在本文中,我将分享七个用户体验设计的小提示,我认为这是创建一个好的移动用户体验的关键。 1. 清晰无漏洞的用户流程 减
BestSDK
2018/02/28
2.6K0
七个用户体验设计小秘诀,打造最舒服的互动流程
最新iOS设计规范四|3大界面要素:视图(Views)
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。
晓吾
2021/04/08
9.7K0
最新iOS设计规范四|3大界面要素:视图(Views)
深入浅出 NavigationUI | MAD Skills
这是第二个关于导航 (Navigation) 的 MAD Skills 系列,如果您想回顾过去发布的内容,请参考下面链接查看:
Android 开发者
2022/03/09
3.3K0
深入浅出 NavigationUI | MAD Skills
Material Design —悬浮响应式按钮(Buttons: Floating Action Button)
自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚
霖酱
2018/05/17
6.2K0
零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)
🎥 作者简介: CSDN\阿里云\腾讯云\华为云开发社区优质创作者,专注分享大数据、Python、数据库、人工智能等领域的优质内容 🌸个人主页: 长风清留杨的博客 🍃形式准则: 无论成就大小,都保持一颗谦逊的心,尊重他人,虚心学习。 ✨推荐专栏: Python入门到入魔,Mysql入门到入魔,Python入门基础大全,Flink入门到实战 🍂若缘分至此,无法再续相逢,愿你朝朝暮暮,皆有安好,晨曦微露道早安,日中炽热说午安,星河长明寄晚安🍂
小白的大数据之旅
2024/12/24
8890
零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)
最新iOS设计规范二|7大应用架构
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。
晓吾
2021/04/08
2.9K0
最新iOS设计规范二|7大应用架构
React Native顶|底部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNative0.44版本以后已经被移除了。 好在有人提供了更好的导航组件,就是我们今天要讲的react-navigation,并且ReactNative官方更推荐我们使用此组件。 本篇文章只讲解基础用法,如果你想了解更多,请戳这里->戳我。  简介 react-navigation主要包括导航,底部tab,顶部tab,
磊哥
2018/05/08
8.2K0
React Native顶|底部导航使用小技巧
最新iOS设计规范十|5大拓展程序(Extensions)
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。 iOS设计规范系列共10篇。本文是第10篇,介绍拓展程序(Extensions)。
晓吾
2021/05/11
3.6K0
[译]《iOS Human Interface Guidelines》——Tab Bar标签栏
API NOTE 标签栏包含在标签栏控制器(管理一系列自定义视图的显示)内。查看Tab Bar Controllers和UITabBar来学习更多关于在你的代码中定义标签栏的内容。
Cloudox
2021/11/23
6020
[译]《iOS Human Interface Guidelines》——Tab Bar标签栏
推荐阅读
相关推荐
[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档