[UI/UX Challenge] Tab Bar
1. 탭바가 뭐람
❗️탭바는 스크린의 맨 밑에 위치하며, 사용자에게 앱이 제공하는 정보나 기능의 이해를 돕습니다.
A tab bar appears at the bottom of a screen, helping people understand the types of information or functionality an app provides.
기본적으로 탭바는 반투명합니다.
뒤에 콘텐츠가 있을 때 → 반투명한 탭바에 배경으로 사용됩니다.
뒤에 콘텐츠가 없을 때 → 콘텐츠가 배경으로 사용되지 않습니다.
탭바는...
투명도
와배경색
을 가질 수 있으며- 모든 화면에서
동일한 높이
를 유지하고 - 키보드가 나타나면 사라집니다.
❗️일반적으로 앱에서 정보를 구성하는데 탭바를 사용합니다.
2. 애플에서 제안하는 탭바 사용 규칙
화면이동 (Navigation) 에만 탭바를 사용하세요
- 화면 이동이 아닌 작업을 수행하는데 탭바를 사용하지 마세요.
- 현재 화면에 적용되는 컨트롤을 제공해야 할 경우, ToolBar를 사용하세요!
- 툴바는 탭바와 같이 화면 하단에 위치합니다.
탭바
가 화면 이동을 담당한다면,툴바
는 현재 화면과 관련된 항목 추가, 삭제, 주석추가, 사진촬영과 같은 액션을 보여줍니다.
기능을 사용할 수 없더라도 탭을 제거하거나 비활성화 하지 마세요
- 모든 탭이 항상 사용 가능한지 확인하고 탭의 컨텐츠를 이용할 수 없을 경우, 그 이유를 설명하세요.
- 예시) iOS기기에 노래가 없는 경우 음악 앱 내의 음악 탭에 노래 다운로드 방법이 설명되어 있습니다.
탭이 너무 적어도, 많아도 안됩니다
- 탭을 추가할때마다 사용할 수 있는 영역이 줄어들고 앱의 복잡성이 커져 정보를 찾기가 어려워집니다.
- 필수 탭만 포함하고 정보 계층에 필요한 최소 탭을 사용하세요.
- 인터페이스가 단절된것처럼 느껴질 수 있으므로 탭이 너무 적어도 문제가 될 수 있습니다.
- 일반적으로 아이폰에서는 3-5개의 탭 사용을 권장합니다. (아이패드에서는 추가할 수 있습니다.)
- 혹시 탭 5개이상을 권하지 않는 이유가 궁금하지 않나요?
- 보통 핸드폰을 할때 사용자들이 엄지로 많이 핸드폰을 하는 것을 볼 수 있죠.
- 탭바 하나의 크기는 기기의 가로사이즈를 동등하게 나눠서 정하는데, 5개가 넘어가면 탭 하나의 크기가 엄지에 들어오지 않을 가능성이 높다고 합니다.
- 페이스북 앱이 탭이 6개 인데, 탭이 4개인 알람 앱과 비교해보면 확연히 탭 하나의 사이즈가 작다는 것을 알 수 있죠!
티나지 않게 알림을 전달하려면 배지를 사용하세요
- 새 정보를 나타내기 위해 탭에 배지 (흰색 텍스트와 숫자 또는 느낌표가 포함된 빨간색 타원)을 표시할 수 있습니다.
3. 조금 더 나은 탭바를 만들기 위한 몇가지 팁
❗️조금 더 나은 탭바를 만들기 위해서는?
필수적인 화면만 탭바에 추가하세요.
- 불필요한 화면들을 탭바에 추가한다면 사용자에게 혼란을 줄 수 있습니다.
- 앱 사용시 꼭 사용자가 필수적으로 머물러야 한다고 판단되는 화면들만 탭바에 추가해야합니다.
- 이것의 연장선으로... 탭바의 갯수를 줄이려면 관련이 있는 화면들을 하나로 모으는것이 좋겠죠?
- 예를들면 "Pinterest" 에서 업데이트와 메세지를 "Notification" 탭에서 한꺼번에 보여주는 것처럼 말이에요!
탭에 라벨을 포함하는 것은 선택사항입니다
- 심플함을 추구한다면, 그리고 아이콘으로 충분히 설명이 가능하다면 탭바에 라벨을 넣지 않아도 됩니다.
- 하지만 라벨을 넣게 된다면, 짧고 간결해야 합니다.
사용자가 어디에 위치하고 있는지 표시해야합니다
- 탭의 아이콘 색을 바꾸거나, 커스텀탭바와 같이 움직이는 라인을 넣어줌으로서 사용자가 어느 탭에 머무르고 있는지 표시할 수 있습니다.
4. 구현해보자
탭바가 ... 어디보자.... 눈이 침침하네요.
저는 탭바에 배지
를 올리는 것을 한번 구현해보도록 하겠습니다.
보통 앱에서 사용자가 확인하지 않은 새로운 업데이트가 있는 탭에 저렇게 배지로 몇개가 업데이트 되었는지 알려준 다음, 그 탭을 클릭한다면 배지가 없어지곤 합니다.
추가하는 방법은... 사실 탭바 파일에 코드 한줄만 추가해주시면 됩니다.
tabBar.items?[4].badgeValue = "1"
4번째 인덱스에 있는 아이템에 있는 배지 값이 1이라는 뜻입니다.
그럼 이제 어떻게 없애주냐...
//해당 탭바컨트롤러가 delegate를 사용하도록 viewDidLoad에서 위임해주시고...
self.delegate = self
extension BaseTBC: UITabBarControllerDelegate{
override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
item.badgeValue = nil
}
}
탭바 파일에서 UITabBarControllerDelegate 프로토콜을 채택하셔야 합니다...
마치... tableViewDelegate와 같이... didSelect 함수가 몇번째 탭을 클릭했는지 알려줍니다...
만약에 사용자가 탭을 클릭했다면, 그 탭의 badgeValue를 nil로 만들어줌으로써 배지를 없애주는것이죠!
import Foundation
import UIKit
extension UITabBar {
func addBadge(index:Int) {
if let tabItems = self.items {
let tabItem = tabItems[index]
tabItem.badgeValue = "●"
tabItem.badgeColor = .clear
tabItem.setBadgeTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)
}
}
func removeBadge(index:Int) {
if let tabItems = self.items {
let tabItem = tabItems[index]
tabItem.badgeValue = nil
}
}
}
요렇게 따로 익스텐션을 만들어놓고 쓸수도 있습니다...
//
// BaseTBC.swift
// 29th_Youtube
//
// Created by Yi Joon Choi on 2021/10/22.
//
import Foundation
import UIKit
class BaseTBC: UITabBarController {
let titles = ["홈", "Shorts", "추가", "구독", "보관함"]
let defaultImages = [Const.Image.homeIcon,
Const.Image.shortsIcon,
Const.Image.plusCircleIcon,
Const.Image.subscriptionsIcon,
Const.Image.LibraryIcon]
let selectedImages = [Const.Image.homeIconFill,
Const.Image.shortsIconFill,
Const.Image.plusCircleIcon,
Const.Image.subscriptionsIconFill,
Const.Image.LibraryIconFill]
let views = [HomeXibVC(), ShortsVC(), PlusVC(), SubscribeVC(), ArchiveVC()]
var VCs : [UINavigationController] = []
override func viewDidLoad() {
super.viewDidLoad()
views.forEach{
VCs.append(UINavigationController(rootViewController: $0))
}
viewControllers = VCs
viewControllers?.indices.forEach{
viewControllers?[$0].tabBarItem = UITabBarItem(title: titles[$0], image: defaultImages[$0], selectedImage: selectedImages[$0])
}
//나중에 플러스 아이콘만 modal로 present 될 경우를 대비하여 delegate 코드 미리 추가했습니다!
self.delegate = self
UITabBar.appearance().barTintColor = .white
UITabBar.appearance().tintColor = .black
UITabBar.appearance().isTranslucent = false
tabBar.items?[4].badgeValue = "1"
if #available(iOS 15, *) {
let appearance = UITabBarAppearance()
let tabBar = UITabBar()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .white
appearance.selectionIndicatorTintColor = .black
tabBar.standardAppearance = appearance;
UITabBar.appearance().scrollEdgeAppearance = appearance
}
}
}
extension BaseTBC: UITabBarControllerDelegate{
override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
item.badgeValue = nil
}
}
풀코드 올립니다...
Author And Source
이 문제에 관하여([UI/UX Challenge] Tab Bar), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dlwns33/UIUX-Challenge-Tab-Bar저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)