Infonity Tech
Published in

Infonity Tech

Revolution in iOS 11 User Interface

Apple is synonymous with App design and User Experience. Apple designing team echelon for design. With the unveiling of iOS 11, Apple reimagined the design of Apps. Well, It’s not quite so big a change as the iOS 7 update, iOS 11 introduces a variety of major changes to the way Apps look and feel. It’s reversing iOS 7 changes. iOS 11 design seems BIG & BOLD, as Apple App Store, Music, and News were among the first to adopt big titles, rounded card-like UI, and filled buttons.

Comprehensive look of iOS 11

- Large Navigation Bar

Big text navigation Bar, Apple almost all default apps appear with the large Navigation bar, for example, Apple Music, App Store, News, Notes, Mail, and much more.
The user experience of Bar is simple and amazing. A large navigation bar design is the notion of ‘Thumb Zone’. Navigation Bar hard-to-reach area in the flow of the thumb zone.

Navigation Bar shrinks when the user scrolls and bouncing back on the pull-down.

DEVELOPER NOTE

  • The developer can control Which UIViewController has a large title and which should have small.
navigationController?.navigationBar.prefersLargeTitles = true
navigationItem.largeTitleDisplayMode = .automatic //(.always | .never)
  • The developer can embed search control with the navigation bar, that will hide on the scroll and also you can also make search bar static on scroll also.
navigationItem.searchController = UISearchController(searchResultsController: nil)
navigationItem.hidesSearchBarWhenScrolling = false

- Screen Edges Deferring

Many times users find the problem with Notification Center and Control Center conflicted with other apps or sometimes users find the small arrow. Finally, Apple resolved these issues in iOS 11.

DEVELOPER NOTE

  • A new method for UIViewController called preferredScreenEdgesDeferringSystemGestures(), which allows specifying edge should delay gesture for Notification Center and Control Center.
override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {
return .top
}

Apple also made noticeable UI changes in the OS. You can see a quick comparison of iOS 11: UI Design changes here: http://www.iphonehacks.com/2017/06/ios-10-vs-ios-11-ui-design-changes.html

If you find this post helpful, please recommend it for others to read.

Follow me for the next interesting article. 😇
I hope you liked, have a good dev day 😀
Please leave comments below if you have new ideas or suggestions.

Thanks for the reading 👍

--

--

--

ARE YOU CURIOUS?

Recommended from Medium

SWIFTip#4: Casual insight of the week

Android SurfaceViewRenderer explained

Ruler and Compass (02)

Top 5 iOS Testing Frameworks

Material based Modal Dialog for iOS

Delegation pattern in Swift 5.1

Stop writing UITableViewDataSource

An Overview of Built-In SwiftUI Views

Phone

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Darshit Shah

Darshit Shah

Sr. Software Developer, Passionate for App UI/UX, Blogger

More from Medium

Design Sprint by Google Venture

Help users do things

7 tips for designing impactful keynotes

Announcing Avatar Studio

The view for designing your Avatar in Avatar Studio.