brunch

You can make anything
by writing

C.S.Lewis

by Kim Wayne Jan 10. 2024

모바일 하단 내비게이션 바 Tip!(2)

Medium을 통해 해외 IT 아티클을 읽는 것을 습관 하고자 많이 보고 있습니다. 제가 본 아티클 중 도움이 되는 글을 소개드리고자 합니다. 출처는 하단에서 확인하실 수 있습니다.


알림 배지를 사용하여 업데이트를 강조하세요

하단 탐색 모음에 알림 배지를 사용하는 것은 사용자에게 새로운 업데이트나 메시지를 알리는 좋은 방법입니다. 이러한 배지는 단순한 빨간 원일 수도 있고, 새 업데이트 수량을 나타내는 숫자를 포함할 수도 있습니다.


배지는 아이콘을 압도하지 않을 만큼 작아야 하지만, 눈에 띌 만큼 커야 합니다. 자연스럽게 눈길을 끌기 때문에 아이콘의 오른쪽 상단에 배치하는 것이 일반적인 관행입니다. 또 하나의 팁이 있다면, 원 주위에 윤곽선을 사용하는 것입니다.


새 업데이트 수를 나타내기 위해 배지 내 숫자를 사용하는 경우, 읽기 쉬운지 꼭 확인하세요. 한눈에 알아보기 어려울 정도로 너무 작거나 양식화된 글꼴은 피하세요. 또한 탐색 표시줄 아이콘 색상과 비교하여 눈에 띄면서도 전체 디자인과 일관성을 유지하는 배지 색상을 선택하세요.


팔수 알림에만 배지를 사용하세요. 사소한 업데이트가 있을 때마다 사용자에게 배지가 과부하되면 알림이 피로하게 느껴지고, 이 기능의 효율성이 떨어질 수 있습니다.



너무 많은 색상을 사용하지 마세요

너무 많은 색상을 사용하거나 각 탭에서 다른 색상을 할당하면 역효과를 낳을 수 있습니다. 다양한 색상은 시각적으로 압도적인 경험을 선사할 수 있습니다. 


색상이 너무 많으면 사용자가 콘텐츠에 집중하지 못하게 되므로 탐색 프로세스가 앱에서 직관적으로 이동하는 것보다 색상을 이해하는 데 더 중점을 두게 됩니다.


앱을 분리하는 팔레트가 아니라 전체 앱을 하나로 묶는 통일된 모양을 해야 합니다. 그래서 브랜드의 색상 구성을 고수하면 브랜드 아이덴티티가 강화되고 전문적인 외관이 보장됩니다. 만약 색상이 너무 많으면 브랜드의 시각적 언어와 충돌하여 브랜드의 영향력이 회석될 수 있습니다.



하나의 아이콘 스타일을 고수하세요

동일한 탐색 표시줄에 채워진 아이콘과 윤곽선 아이콘을 혼합하는 것은 검은 넥타이를 매고 비치웨어를 입는 것과 같습니다. 이러한 시각적 불일치를 방지하려면 일관된 아이콘 스타일을 고수해야 합니다.


개요 아이콘을 결정했다면 모든 탭에서 사용하세요. 이는 조화롭고 전문적인 모습을 만들어냅니다. 그러나 예외가 있습니다. 바로 선택 상태입니다. 여기에서 개요 아이콘을 채워진 버전으로 전환하는 것은 활성 탭을 강조하는 효과적인 방법입니다. 이는 해당 탭에 특별한 명예 휘장을 부여하여 미묘하면서도 효과적인 방법으로 탭을 돋보이게 만드는 것과 같습니다.


또한 아이콘의 복잡성에 유의하세요. 일관성은 단지 스타일에 관한 것이 아닙니다. 하나의 아이콘이 단순하고 깔끔하다면 다른 아이콘도 이를 따라야 합니다. 기본 아이콘과 좀 더 복잡한 아이콘을 혼합하면 탐색 모음의 시각적 조화가 무너질 수 있습니다.



출처: https://medium.com/@uxpeak.com/top-ui-ux-design-tips-how-to-design-a-great-bottom-mobile-navigation-bar-part-6-97acd8b28453


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari