Tab Bar — คืออะไร แผงแท็บในแอปพลิเคชันมือถือ

Tab Bar คืออะไร?

Tab Bar (แถบแท็บ) คือองค์ประกอบอินเทอร์เฟซแบบกราฟิกที่อยู่ด้านล่างของหน้าจอแอปพลิเคชันมือถือ มันให้การเข้าถึงอย่างรวดเร็วไปยัง 3–5 ส่วนหลักของแอป แต่ละส่วนแสดงด้วยไอคอนและป้ายข้อความ ผู้ใช้แตะที่แท็บเพื่อสลับไปยังส่วนที่เกี่ยวข้อง Tab Bar จะยังคงมองเห็นได้บนหน้าจอทั้งหมดภายในแต่ละส่วน โดยให้จุดเข้าใช้งานที่คงที่

Apple แนะนำให้ใช้ Tab Bar สำหรับส่วนที่มีความสำคัญเท่ากัน แนวทางการออกแบบส่วนติดต่อผู้ใช้ (2026) ระบุว่า: "Tab Bar แสดง 3–5 แท็บ หากต้องการมากกว่านั้น แท็บสุดท้ายจะกลายเป็นรายการ 'เพิ่มเติม' ที่มีส่วนที่เหลืออยู่" Material Design ของ Google (2026) แนะนำ Bottom Navigation สำหรับจุดประสงค์เดียวกัน — 3–5 รายการ แท็บที่ใช้งานถูกเน้นด้วยสีและแอนิเมชัน

แตกต่างจากแถบแท็บด้านบน แผงด้านล่างสะดวกกว่าสำหรับการใช้งานด้วยมือเดียว — นิ้วหัวแม่มือสามารถเข้าถึงด้านล่างของหน้าจอได้อย่างเป็นธรรมชาติ การศึกษาของ Nielsen Norman Group (2025) แสดงให้เห็นว่าการนำทางด้านล่างช่วยลดเวลาในการทำงานให้เสร็จสิ้นลง 22% เมื่อเทียบกับการนำทางด้านบนบนสมาร์ทโฟนที่มีหน้าจอ 6 นิ้วขึ้นไป

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) แสดงให้เห็นว่าแอปที่มีป้ายมีอัตราการรักษาผู้ใช้สูงขึ้น 18% ในวันที่ 7 อย่างไรก็ตาม การใช้ป้ายมากเกินไป (มากกว่า 3 ป้ายพร้อมกัน) ทำให้ CTR ลดลง 12% Apple และ Google แนะนำให้แสดงป้ายเฉพาะสำหรับการแจ้งเตือนที่เกี่ยวข้องและรีเซ็ตเมื่อเปิดส่วน

การปรับแต่ง Tab Bar: ไอคอน สี แอนิเมชัน

ทั้งสองแพลตฟอร์มมีตัวเลือกการปรับแต่งที่หลากหลายสำหรับ Tab Bar บน iOS คุณสามารถเปลี่ยนสีพื้นหลัง สี tint ของแท็บที่ใช้งาน ฟอนต์ป้าย และเพิ่มไอคอนที่กำหนดเองผ่าน SF Symbols หรือทรัพย์สินที่กำหนดเอง บน Android การปรับแต่งรวมถึงรูปแบบ Material 3 แอนิเมชันการสลับ เอฟเฟกต์ระลอกคลื่น และสีไดนามิกตามวอลเปเปอร์

// การปรับแต่ง 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 นำเสนอแนวคิดของสีไดนามิก: จานสีถูกสร้างจากวอลเปเปอร์ของผู้ใช้และนำไปใช้กับคอมโพเนนต์โดยอัตโนมัติ นักพัฒนาสามารถแทนที่สีผ่านธีม ตั้งค่าแอนิเมชันตัวบ่งชี้ที่กำหนดเอง และกำหนดค่าเอฟเฟกต์ระลอกคลื่น

// การปรับแต่ง 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: ไม่เกิน 5 แท็บ ข้อความกระชับ ไอคอนมีความหมาย Material Design: 3–5 รายการ รายการที่ใช้งานถูกเน้น ตัวนับป้ายไม่เกิน 99 NN Group (2025): การนำทางด้านล่างควรมองเห็นได้บนหน้าจอทั้งหมดของส่วน มิฉะนั้นผู้ใช้จะสูญเสียบริบท

ข้อผิดพลาดทั่วไป: 6+ แท็บ (บังคับให้ใช้ 'เพิ่มเติม' — ลดความสามารถในการค้นพบ) การเปลี่ยนลำดับแท็บระหว่างการนำทาง (ทำให้ผู้ใช้สับสน) การซ่อน Tab Bar บนหน้าจอที่ซ้อนกัน (สูญเสียจุดยึดการนำทาง) แนวปฏิบัติที่ดีที่สุดรวมถึงลำดับที่คงที่ ไอคอนและป้ายข้อความที่สอดคล้องกัน ป้ายเฉพาะสำหรับการกระทำของผู้ใช้ (ไม่ใช่การตลาด)

• 3–5 แท็บ — จำนวนที่เหมาะสมที่สุดสำหรับการเลือกอย่างรวดเร็วโดยไม่โอเวอร์โหลด
• ลำดับคงที่ — แท็บควรมีความเสถียร ไม่มีการจัดลำดับใหม่แบบไดนามิก
• ไอคอน + ป้าย — ทั้งสององค์ประกอบจำเป็นสำหรับการทำความเข้าใจส่วน
• แท็บที่ใช้งาน — ควรแตกต่างทางสายตาด้วยสี ไอคอน หรือแอนิเมชัน
• ป้าย — ใช้สำหรับการแจ้งเตือน รีเซ็ตเมื่อเปิดส่วน