Tab Bar — چیست، پنل تب‌ها در اپلیکیشن‌های موبایل

Tab Bar چیست؟

Tab Bar (پنل تب‌ها) — عنصری از رابط گرافیکی در پایین صفحه اپلیکیشن موبایل. دسترسی سریع به ۳–۵ بخش اصلی اپلیکیشن را فراهم می‌کند. هر بخش با یک آیکون و برچسب متنی نمایش داده می‌شود. کاربر روی تب کلیک می‌کند تا به بخش مربوطه برود. Tab Bar در تمام صفحات هر بخش قابل مشاهده می‌ماند و یک نقطه ورود دائمی فراهم می‌کند.

Apple استفاده از Tab Bar را برای بخش‌های اپلیکیشن با سطح اهمیت برابر توصیه می‌کند. Human Interface Guidelines (2026) اشاره می‌کند: «Tab Bar ۳–۵ تب را نشان می‌دهد. اگر بیشتر نیاز باشد — آخرین تب به گزینه «بیشتر» با بقیه در داخل تبدیل می‌شود». Material Design Google (2026) Bottom Navigation را برای همین اهداف توصیه می‌کند — ۳–۵ گزینه، تب فعال با رنگ و انیمیشن برجسته می‌شود.

بر خلاف تب‌های بالایی (Top Tab Bar)، پنل پایین برای استفاده با یک دست راحت‌تر است — انگشت شست به طور طبیعی به پایین صفحه می‌رسد. تحقیقات Nielsen Norman Group (2025) نشان داد که ناوبری پایین زمان انجام کار را در مقایسه با ناوبری بالایی در گوشی‌های هوشمند با قطر ۶ اینچ به بالا ۲۲٪ کاهش می‌دهد.

UITabBarController در iOS

UITabBarController — کنترلر داخلی iOS برای سازماندهی ناوبری از طریق تب‌ها. هر تب مجموعه صفحات خود را که معمولاً در UINavigationController سازماندهی شده‌اند مدیریت می‌کند. UITabBarController به طور خودکار Tab Bar را در پایین صفحه با پس‌زمینه نیمه‌شفاف سیستمی و انیمیشن در هنگام جابجایی ایجاد می‌کند.

import UIKit

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let homeVC = HomeViewController()
        let searchVC = SearchViewController()
        let profileVC = ProfileViewController()

        homeVC.tabBarItem = UITabBarItem(
            title: "خانه",
            image: UIImage(systemName: "house.fill"),
            tag: 0
        )
        searchVC.tabBarItem = UITabBarItem(
            title: "جستجو",
            image: UIImage(systemName: "magnifyingglass"),
            tag: 1
        )
        profileVC.tabBarItem = UITabBarItem(
            title: "پروفایل",
            image: UIImage(systemName: "person.circle.fill"),
            tag: 2
        )

        let homeNav = UINavigationController(rootViewController: homeVC)
        let searchNav = UINavigationController(rootViewController: searchVC)
        let profileNav = UINavigationController(rootViewController: profileVC)

        viewControllers = [homeNav, searchNav, profileNav]
    }
}

هر تب در مثال شامل UINavigationController است که امکان استفاده از ناوبری پشته‌ای را در داخل بخش فراهم می‌کند. tabBarItem آیکون، عنوان و نشان را تنظیم می‌کند. سیستم به طور خودکار سبک SF Symbols را برای آیکون‌ها اعمال می‌کند — نمادهای استاندارد Apple با پشتیبانی از نوع پویا و چندرنگی.

BottomNavigationView در Android

BottomNavigationView — کامپوننت Android از Material Design Library که پنل ناوبری پایین را پیاده‌سازی می‌کند. در Android 13+ از NavigationBarView استفاده می‌شود — جانشین آن با انیمیشن بهبودیافته و رفتار تطبیقی. BottomNavigationView از مشخصات Material Design 3 (Material You) پیروی می‌کند و از تم اپلیکیشن، رنگ‌های پویا و انیمیشن در هنگام جابجایی پشتیبانی می‌کند.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val navView: NavigationBarView = binding.navView
        val navController = findNavController(R.id.nav_host_fragment)

        // اتصال BottomNavigation به NavController
        navView.setupWithNavController(navController)

        // تنظیم نشان در تب اعلان‌ها
        val badge = navView.getOrCreateBadge(R.id.navigation_notifications)
        badge.isVisible = true
        badge.number = 12
    }
}

کامپوننت BottomNavigationView از Material Design 3 با سه سبک پشتیبانی می‌کند: default (برچسب + آیکون)، labeled (برچسب بزرگ‌شده) و unlabeled (فقط آیکون). متد setupWithNavController پنل را به Navigation Component متصل می‌کند و به طور خودکار تب فعال را هنگام تغییر صفحه به‌روزرسانی می‌کند. نشان‌ها از طریق getOrCreateBadge ایجاد می‌شوند و از نشانگرهای عددی و نقطه‌ای پشتیبانی می‌کنند.

نشان‌ها و نشانگرهای Tab Bar

نشان‌ها — نشانگرهای عددی یا نقطه‌ای روی آیکون تب‌ها که تعداد اعلان‌ها، پیام‌های جدید یا وظایف را نمایش می‌دهند. در iOS نشان از طریق ویژگی badgeValue روی UITabBarItem تنظیم می‌شود. در Android نشان‌ها از طریق BadgeDrawable (Material 3) یا getOrCreateBadge در NavigationBarView مدیریت می‌شوند.

نشان‌ها ابزار قدرتمندی برای جذب هستند: تحقیقات Localytics (2025) نشان داد که اپلیکیشن‌های دارای نشان retention را در روز هفتم ۱۸٪ افزایش می‌دهند. اما استفاده بیش از حد از نشان‌ها (بیش از ۳ نشان همزمان) CTR را ۱۲٪ کاهش می‌دهد. Apple و Google توصیه می‌کنند نشان را فقط برای اعلان‌های مرتبط نشان دهید و پس از باز کردن بخش آن را بازنشانی کنید.

سفارشی‌سازی Tab Bar: آیکون‌ها، رنگ‌ها، انیمیشن‌ها

هر دو پلتفرم امکانات گسترده‌ای برای سفارشی‌سازی Tab Bar ارائه می‌دهند. در iOS می‌توان رنگ پس‌زمینه، رنگ tint تب فعال، فونت برچسب را تغییر داد و آیکون‌های سفارشی از طریق SF Symbols یا منابع خود اضافه کرد. در Android سفارشی‌سازی شامل استایل‌های Material 3، انیمیشن جابجایی، اثر ripple و رنگ‌های پویا بر اساس کاغذدیواره است.

// سفارشی‌سازی Tab Bar در iOS
let appearance = UITabBarAppearance()
appearance.backgroundColor = .systemBackground
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
    .foregroundColor: UIColor.secondaryLabel,
    .font: UIFont.systemFont(ofSize: 11)
]
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
    .foregroundColor: UIColor.systemBlue,
    .font: UIFont.boldSystemFont(ofSize: 12)
]
tabBar.standardAppearance = appearance.

در Android سفارشی‌سازی BottomNavigationView از طریق ویژگی‌های XML یا برنامه‌نویسی انجام می‌شود. Material 3 مفهوم رنگ‌های پویا را معرفی می‌کند: پالت از کاغذدیواره کاربر تولید شده و به طور خودکار به کامپوننت‌ها اعمال می‌شود. توسعه‌دهنده می‌تواند رنگ‌ها را از طریق تم بازنویسی کند، انیمیشن زیرخط (indicator) سفارشی تنظیم کند و اثر ripple را پیکربندی کند.

// سفارشی‌سازی BottomNavigationView در Android
val navView = findViewById<NavigationBarView>(R.id.nav_view)

with (navView) {
    labelVisibilityMode = NavigationBarView.LABEL_VISIBILITY_LABELED
    itemActiveIndicatorStyle = R.style.CustomIndicator
    itemRippleColor = ColorStateList.valueOf(
        Color.valueOf("#FFE0B2")
    )
}

// در XML: app:menu="@menu/bottom_nav_menu"
// در XML: app:itemActiveIndicatorStyle="@style/Widget.Material3.BottomNavigationView.ActiveIndicator"

بهترین روش‌های ناوبری پایین

هنگام طراحی Tab Bar رعایت توصیه‌های پلتفرم و تحقیقات کاربرپسندی مهم است. Apple HIG: حداکثر ۵ تب، متن مختصر، آیکون‌های معنایی. Material Design: ۳–۵ گزینه، گزینه فعال برجسته شده، شمارنده نشان حداکثر ۹۹. NN Group (2025): ناوبری پایین باید در تمام صفحات بخش قابل مشاهده باشد، در غیر این صورت کاربر زمینه را از دست می‌دهد.

اشتباهات اصلی: ۶+ تب (مجبور به استفاده از «بیشتر» — کاهش قابلیت کشف)، تغییر ترتیب تب‌ها در هنگام ناوبری (گیج‌کننده)، پنهان کردن Tab Bar در صفحات تو در تو (از دست دادن لنگر ناوبری). بهترین روش — ترتیب ثابت، آیکون‌ها و برچسب‌های متنی یکسان، نشان فقط برای اقدامات کاربر (نه برای بازاریابی).

• ۳–۵ تب — تعداد بهینه برای انتخاب سریع بدون بار اضافی
• ترتیب ثابت — تب‌ها باید پایدار باشند، بدون جابجایی پویا
• آیکون + برچسب — هر دو عنصر برای درک بخش ضروری هستند
• تب فعال — باید از نظر بصری با رنگ، آیکون یا انیمیشن متفاوت باشد
• نشان‌ها — برای اعلان‌ها استفاده کنید، هنگام باز کردن بخش بازنشانی کنید