1

I am building a news app for iPhones.

The app has five main sections which are news, videos, articles ( different from new ), settings and favorites. All these sections are tabbed at the bottom using Tab Bar Controller. Example as below:

enter image description here

But for news and videos, there are categories which users can select such as "Latest", "Top News" etc. How do I view these categories while maintaining a clean look? Android has a slider tab element which works, but on iOS, I can't seem to find these second tier navigation options.

Any ideas?

2 Answers 2

1

Use Bottom Tabs to show your main functionalities. In your example News on Tab and Create Segmented Tabs inside a tab and add latest there. Check image

enter image description here

1
  • The categories is a long list. It has at least six items. Won't it look a little crowded? Jan 3, 2017 at 6:50
1

According to iOS Human Interface Guidelines (emphasis mine):

Each additional tab reduces the tappable area for selecting a tab and increases the complexity of your app, making it harder to locate information. Although a More tab can display extra tabs, this requires additional taps and is a poor use of space. Include essential tabs only, and use the minimum tabs necessary for your information hierarchy. Too few tabs can be a problem too, as it can make your interface feel disconnected. In general, use between three and five tabs on iPhone. A few more are acceptable on iPad.


In Material design the Tab bar can be scrollable:


However in a Bottom Navigation, like the one you show in the image, Material design doesn't recommend making it scrollable:

Don't.

Avoid scrollable content in the bottom navigation bar.

1
  • Thanks for the answer. But my problem remains. I still have a vague idea on how to display the categories. There are about at least 6 categories each, which means I can't use the tabs. Jan 5, 2017 at 3:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.