顺滑的 tab bar 设计

来源：https://www.instagram.com/p/B2KMQdegsTZ/

「好的设计是让产品更易懂的」日常收集好看交互特效的我今天在 medium 上看到了一篇文章，视觉享受🌟🌟🌟🌟🌟，转载一下，原文链接：https://medium.com/flawless-app-stories/animations-in-ios-tab-bar-concepts-e1fd73ddac67

animations-in-ios-tab-bar

我们每天都会看到标签栏。它们指导应用程序内的用户，使他们能够在不同选项卡之间快速切换。Apple在其《人机界面指南》中提供了一个不错的选择：

Tab bars are translucent, may have a background tint, maintain the same height in all screen orientations, and are hidden when a keyboard is displayed. A tab bar may contain any number of tabs, but the number of visible tabs varies based on the device size and orientation. If some tabs can’t be displayed due to limited horizontal space, the final visible tab becomes a More tab, which reveals the additional tabs in a list on a separate screen 标签栏是半透明的，可能具有背景色，在所有屏幕方向上都保持相同的高度，并且在显示键盘时被隐藏。标签栏可以包含任意数量的标签，但是可见标签的数量根据设备的大小和方向而变化。如果由于水平空间有限而无法显示某些标签，则最终的可见标签将变为“更多”标签，该标签会在单独的屏幕上显示列表中的其他标签

但是谁说移动导航应该很无聊呢？

让我们探索一下标签栏内有趣的动画。我首先关注针对iOS平台的产品。并提到了一些在Swift implement中实现动画选项卡栏的有用指南，其中一些动画来自真实的应用程序。而其他的只是很好的设计概念，是为启发而设计的。你是否会将其中一些用于你的应用程序？

WeChat Tab Bar Redesign by Adrian Reznicek for PLATFORM

Animated tab bar concept by Cadabra Studio

Camera app tab bar [iPhone X edition] concept by Oleg Frolov for Magic Unicorn

Yoga App Menu Concept by Dannniel

Create a New Document Tab Bar concept by Hoang Nguyen

Fluid Tab Bar Interaction concept by Oleg Frolov

Animated Tab Bar Icons — Interface concept by Andrew McKay

Animated Tab Bar Icons — Interface concept by Andrew McKay

Tab bar icons by Dimest

Tab bar active animation by Aaron Iker, based on Valentin Tsymbaluk concept

Animated Tab Bar Icons — Interface concept and Swift implementation by Ramotion

Tab bar interaction concept by Boyang Zhang

Animated Tab Bar concept by Mauricio Bucardo

Tab bar interaction concept by Kaiseir

If you want to practice with designing or developing tab bars, these guides will help you out:

• Human Interface Guidelines on Tab Bars, where you’ll learn best practices in a quick 4 min read.
• Guide on “Starting an iOS Tab Bar App with UITabBarViewController”.
• 29 implemented examples.
• Swift UI module library for adding animation to iOS tab bar.

Hope you enjoyed this small inspirational peace. You can also check 30 beautiful examples of animations for iOS and Everything you need to know about Loading Animations 🧡
Happy designing and developing!

希望您喜欢这个小小的鼓舞人心的和平。您还可以查看30个漂亮的iOS动画示例，以及有关加载动画所需的所有知识🧡设计和开发愉快！