Inside iOS 7: Animations work with flat graphics to create sense of space

Posted:
in iPhone edited January 2014
The iOS 7 beta's user interface overhaul is a striking departure from past aesthetics, and one that has garnered a fair share of press, but a complete rebuilding of system animations is equally impactful despite going largely unnoticed.

While eye-catching static design choices like Jony Ive's "flat" iconography and a liberal use of Helvetica Neue Ultra Thin font may be the first things people notice about iOS 7, it's what they don't see that makes Apple's latest OS beautiful.

Animation


Animations are simple-yet-necessary tools designers use to create a great user experience. For example, the rubber-banding feature in iOS ? recently in the news as part of Apple's ongoing patent dispute against Samsung ? has been a key asset to the operating system since the first iPhone debuted in 2007.

The animation is seemingly minor, showing a slight bounce-back when the end of a scrollable page is reached, but without it, users would have no feedback from the system when navigating documents. This speaks in no small part to the responsiveness of an OS.

Other system animations are app-specific or are meant to be seen, such as the "jiggle mode" for editing and deleting apps from a home screen.

With iOS 7 beta, a number of new and interesting animation tweaks come into play. Some are overt, though many are so subtle they may never be noticed by a user. The examples below offer just a sampling of what the OS has to offer.

Lock Screen

Starting with the Lock Screen, there are already a multitude of changed elements, including the "slide to unlock" bar, which no longer exists. User still need to "slide" or swipe right to unlock the iPhone, but the animation has been modified to move an entire layer of the screen instead of just a small slider. The Lock Screen also fades in from black when the iPhone wakes up, which is a nice touch.

Lock Screen
The Lock Screen now moves as a panel instead of a single slider when unlocking an iPhone.


Notification Center, which is now accessible from the Lock Screen as a system settings option, slides down as it did in iOS 6. The translucent panel that pops into view has some added physics, however, as it "thuds" to the bottom of the screen, bouncing back as if rebounding from a fall.

The motion is not quite as "elastic" as the usual rubber-banding bounce-back, but is similar in magnitude, with faster pull-downs getting a larger bounce than slow swipes. This particular animation offers quite a different "feel" than anything in previous iOS version. The physics of the bounce are harder, and convey a sense of weight and structure to the panel.

Swiping up from the opposite end of the screen brings the new Control Center into view, with the window gliding to just below the clock before slightly retracting in a very "rubber-bandy" movement. This panel, also accessible from anywhere in the OS, doesn't rely on magnitudes of motion, meaning it bounces back the same degree, no matter how fast or slow the swipe.

Located at the top of Control Center, and the bottom of the Notification Center, is a small animated line. When each panel is at rest, the line takes on the shape of a chevron which points either up or down depending on whether a window is open or closed. When the panels are moving, it becomes a straight line.

For example, at the Lock Screen, the two chevrons appear at the top and bottom of the screen, inviting users to pull down or swipe up to open Notification Center or Control Center. The chevrons recede to the edges of the display as the device is unlocked.

Lines
From left: Translucent Notification Center panel, Control Center pane in motion, Control Center pane up.

Home Screen

Users are met with another dramatic animation upon entering the home screen view, with app icons falling into place seemingly from above the display, while the dock glides up from the screen bottom. In iOS 6, icons swoop in from the screen edges in a more two-dimensional manner.

Home Screen
Click to view GIF.


When iOS 7 was demoed at WWDC 2013, there was mention of a so-called "parallax" home screen view. This animation, unlike other additions, uses the iPhone's internal sensors to determine the position a user is holding the device, and shifts the background in concert with any off-axis movement. The result is interesting and makes the icons appear to be hovering over the wallpaper.

While completely unnecessary, parallax view offers a certain level of liveliness to the home screen without being too much of a distraction. The effect is similar to one found in Google's Android, which shifts the background slightly when navigating between icon pages.

In addition to parallax view, Apple has added "zoom" animations that are activated when opening an app or app folder. For apps, the function is straightforward: a user presses an icon and the OS animates a zoom-in that appears to drill directly into the app. Important to note here is that the selected icon is enlarged along with all other icons on the page, with the final view ending in an open app. In contrast, the same action in iOS 6 has icons slide out of the way as an app window expands from the center of the screen.

Things are a bit more complex with folders. Instead of merely enlarging and homing in on a folder from its resting position, iOS 7 beta animates a zoom motion for both the folder and the swath of wallpaper directly behind it. The animation is quite clever, as app folders don't come close to taking up the entire screen, thus leaving much of the wallpaper showing. By slightly zooming in on the background, iOS doesn't break the illusion that its icons are floating in mid air.

Zoom
Click to view GIF.


The new multitasking view makes copious use of physics. Swiping left or right on the app preview panes triggers slower, dampened movement, while doing the same with the icons beneath scrubs more quickly, almost at a one-to-one ratio with a user's thumb. The app panes are equidistant in this perspective, but the icons track by magnitude, meaning a quick flick expands the space between.

Also present is the space filling animation seen Music, which is activated when an app is manually terminated by swiping it toward the top of the screen.

Multitasking
Multitasking view. Note icon spacing relative to that of app preview panes.


There are a few quirks to the system, however, one of which allows certain apps like weather to continue to run in multitasking view. It is not clear if Apple is planning to keep the "feature," though it does put extra strain on already precious CPU, memory and battery resources.

App-Specific Animations

After years of pleas, Apple has finally added another "active" icon to its first-party app lineup in Clock. With iOS 7, the Clock app's icon now reflects the correct time and even includes a moving second hand. Also changed is the font and style of the Calendar icon, though transitions between dates remains the same.

As for Apple's in-app animations, Weather is perhaps the most well conceived and uses rich effects to reflect changing weather patterns for user selected cities.

Minor tweaks have been made to Message, like an animated ellipsis to denote a friend is typing. Also new is an action when sending a message, which "throws" the text into the conversation above it. Speech bubbles now appear to float when scrolling through the conversation, seemingly bumping into one another. This carries a liveliness and dimensionality to the app as seen in other places of the OS, like the home screen.

Message
From Left: Animated incoming message bubble, sent message from text box, scrolling messages.


For the most part, the beta feels snappier than iOS 6, with in-app pages and menus sliding quickly and with purpose. In some cases, no animation is applied to pop-up contextual menus, though this might change before public release.

One thing worth mentioning is the way apps in iOS 7 handle asset deletion. For example, in the Photos app, deleting a photo slides those following one space to the left, while trashing multiple photos at random renders a delet-and-fill type animation.

Another take on thumbnail rearrangement can also be found in the Music app, where moving in and out of the revamped landscape view uses fade-outs to keep album covers in order. Going from 8 full on-screen thumbnails, to 15, then 28, the Music app retains an alphabetized order. But instead of simply zooming in and out of a predefined map-like snapshot of the largest 28-album screen, the covers are rejiggered dynamically.

Music

Work in Progress

Apple is obviously continuing work on iOS 7, and at least some of the animations mentioned above will change before the OS sees public release this fall.

Overall, though, the additions and tweaks create a sense of space, a design language one would expect to speak directly against the "flat" iconography found throughout the beta. In some respects, that notion holds true, especially in the case of pop-up menus which look out of place. However, for the most part, the flat design lends itself quite nicely to the multi-axis world that is iOS 7.

If the icons and typefaces were themselves attempting to mimic depth, the UI would likely become cluttered and unappealing. The animations don't dominate the user experience, but seamlessly manipulate graphics already bold in their simplicity. That is what makes the system so transparent, and therefore effective.

Those wanting to see iOS 7's effects in action can view a sampling on Apple's website.

For more on Apple's latest mobile operating system, see AppleInsider's ongoing Inside iOS 7 series:

Apple's new App Store simplifies app updating & discovery


Siri gets smarter with new system controls

Apple puts Pandora on notice with iTunes Radio

Apple automates picture organization in new Photos app
«134

Comments

  • Reply 1 of 75
    irelandireland Posts: 17,588member
    The springboard animation during unlock feels a bit heavy handed, perhaps because of its slowness. It needs work. The parallaxing feature where you tilt your home screen to see "behind the icons" is so odd a UI idea from Apple that I'm left a sort of bewildered. It serves as nothing but a distraction from an otherwise elegantly simple home screen interface. I similarly detest the panoramic home screen wallpapers. And the existence of the animated wallpapers offends me. The icons are so ugly I don't know what to say. The beautiful fonts are harsh on the eyes, given how thin they appear presented on a high contrast background. The lock screen is a bit of a mess, with arrows on the top and bottom of the screen only serving to confuse and complicate the elegant iOS lock screen, with no arrow where it matters: pointing the unlock direction. The camera icon on the lock screen is also somewhat odd in its placement and lack of thoughtful design in what it's trying to convey.

    Other than that I like iOS 7, yeah.

    To be fair, 7-8 months isn't much time, but I sure as hell hope there's a huge number of changes before GM; not just bug fixes.
  • Reply 2 of 75
    nagrommenagromme Posts: 2,834member
    Interesting stuff. It'll be fun to see it evolve.

    "While completely unnecessary, parallax view offers a certain level of liveliness to the home screen without being too much of a distraction. The effect is similar to one found in Google's Android, which shifts the background slightly when navigating between icon pages. "

    Actually, I'd say it's a very functional effect--in a way Android's more conventional page-panning is not: it helps the icons and labels stand out from the background.

    It's always a challenge to let the user pick any old photo for their wallpaper, AND at the same time have tiny content be clearly visible no matter where on the screen it appears. Drop shadows are a common partial answer. But this motion, responding constantly to your hand, helps with the same issue in a new way.

    Plus, it gives you another way to see more of the photo.
  • Reply 3 of 75
    stelligentstelligent Posts: 2,680member

    Quote:

    Originally Posted by Ireland View Post



    To be fair, 7-8 months isn't much time, but I sure as hell hope there's a huge number of changes before GM; not just bug fixes.


    Indeed. They've done much in barely over half a year. But if they don't haul ass in the next quarter, it will be an imperfect coronation for King Ive.

  • Reply 4 of 75
    stelligentstelligent Posts: 2,680member

    Quote:

    Originally Posted by nagromme View Post





    It's always a challenge to let the user pick any old photo for their wallpaper, AND at the same time have tiny content be clearly visible no matter where on the screen it appears. Drop shadows are a common partial answer. But this motion, responding constantly to your hand, helps with the same issue in a new way.



    Plus, it gives you another way to see more of the photo.


    But it is not really useful to see more of the wallpaper. And I hope they're not using this parallax effect to provide contrast against the wallpaper (if that's what you're saying), because that's gimmicky and not effective.

  • Reply 5 of 75
    boeyc15boeyc15 Posts: 986member
    I don't have iOS 7 loaded so don't know for sure, but in print , the ultra thin text seems too thin. The background seems to overwhelm the lettering. For those of you with the real thing, what are your thoughts? Different in person?

    The one thing that seems a bit odd is this parallel view and multi tasking... Apple use to be almost fanatical about using battery life. They must of really made some code improvements to add these...'features'. Have not heard too much how well this beta is regarding battery life, although I know a beta is not a fair indicator either.
  • Reply 6 of 75
    stelligentstelligent Posts: 2,680member

    Quote:

    Originally Posted by boeyc15 View Post



    I don't have iOS 7 loaded so don't know for sure, but in print , the ultra thin text seems too thin. The background seems to overwhelm the lettering. For those of you with the real thing, what are your thoughts? Different in person?



    The one thing that seems a bit odd is this parallel view and multi tasking... Apple use to be almost fanatical about using battery life. They must of really made some code improvements to add these...'features'. Have not heard too much how well this beta is regarding battery life, although I know a beta is not a fair indicator either.


    It's not too thin to me, not at all; however, that sort of thing is personal. It is possible for the wallpaper to dominate, but I don't think the weight of the typeface is the biggest issue.


     


    Federighi explained how/why they are finally expanding multitasking due to improved power management. It's not about "code improvement". A big part of it is about scheduling app updates according to network connectivity and user behavior. 

  • Reply 7 of 75
    irelandireland Posts: 17,588member
    boeyc15 wrote: »
    I don't have iOS 7 loaded so don't know for sure, but in print , the ultra thin text seems too thin. The background seems to overwhelm the lettering. For those of you with the real thing, what are your thoughts? Different in person?

    Exactly as you described.
  • Reply 8 of 75
    tbelltbell Posts: 3,146member

    Quote:

    Originally Posted by boeyc15 View Post



    I don't have iOS 7 loaded so don't know for sure, but in print , the ultra thin text seems too thin. The background seems to overwhelm the lettering. For those of you with the real thing, what are your thoughts? Different in person?



    The one thing that seems a bit odd is this parallel view and multi tasking... Apple use to be almost fanatical about using battery life. They must of really made some code improvements to add these...'features'. Have not heard too much how well this beta is regarding battery life, although I know a beta is not a fair indicator either.


     


     


    Perhaps, but if you don't like it, you can change it. 

  • Reply 9 of 75
    rogifanrogifan Posts: 10,669member
    I obviously don't have the beta installed but from the video the animations/parallax seemed really cool (and got plenty of cheers in the room). But maybe it's something that seems cool but in practice isn't really. Multitasking was also something that got huge applause, I use the downcast podcasting app frequently. I'd love it if that was able to update in the background so whenever I open it any new podcasts have been already downloaded.

    I watched a number of the developer videos from the WWDC app (still not quite sure how I was able to log in and success them but I was) and the engineers running the sessions seemed reall jazzed about what they were showing off, especially UIKit Dynamics and Text Kit. And it didn't seem like forced enthusiasm either. Federighi mentioned there were 1500 new APIs for developers. I'll be interested to see what 3rd party developers do with iOS 7.

    I'm just happy that we're finally getting features other platforms have has for a while now. What logical reason is there that we didn't have quick toggles for commonly used settings in previous versions of iOS? Or Siri being able to adjust settings for you. Nothing more annoying than asking Siri to turn off Bluetooth and she says "I'd like to but I cannot". Was Forstall so consumed by Maps that other things suffered? I still laugh at the iOS 6 demo where he made a big deal out of Siri being able to provide sports scores.

    iOS 7 no doubt still needs work but I like the direction Apple is going. With the major overhaul they did in such a short amount of time I do think its possible we'll see more point releases in the future that are more than just bug fixes. The fact an iPad beta hasn't been released yet indicates to me they did rush to get something finished by WWDC and a lot of work is still being done. One question I have is did Federighi and Ive perhaps bite off more than they could chew? Or was their pressure from Cook and others to deliver something major for WWDC. Seems crazy what they all tried to get done in only 6-7 months.
  • Reply 10 of 75
    tbelltbell Posts: 3,146member

    Quote:

    Originally Posted by Ireland View Post

    The parallaxing feature where you tilt your home screen to see "behind the icons" is so odd a UI idea from Apple that I'm left a sort of bewildered. It serves as nothing but a distraction from an otherwise elegantly simple home screen interface. I similarly detest the panoramic home screen wallpapers. And the existence of the animated wallpapers offends me. The icons are so ugly I don't know what to say. The beautiful fonts are harsh on the eyes, given how thin they appear presented on a high contrast background. The lock screen is a bit of a mess, with arrows on the top and bottom of the screen only serving to confuse and complicate the elegant iOS lock screen, with no arrow where it matters: pointing the unlock direction. The camera icon on the lock screen is also somewhat odd in its placement and lack of thoughtful design in what it's trying to convey.



    Other than that I like iOS 7, yeah.



    To be fair, 7-8 months isn't much time, but I sure as hell hope there's a huge number of changes before GM; not just bug fixes.


     


    I like the new interface a lot. To me, the phone should be fun. The parallaxing gives the OS depth in a subtle fun manner. The panoramic home screen wallpaper is cool, but if you don't like it, just do not pick such a picture. I personally would not have that as my background all the time, but I could certainly see using it occasionally. 


     


    The icons can be adjusted to size, and the user picks the background picture. Consequently, I do not see your issue because the background image tends to have a significant effect on how the fonts appear giving the phone a user defined personality. Some of icons are nice. Some need work. At the end of the day whether they look good or not is subjective. I like new, and I did not love all the old Safari icons. 


     


    Apple really can't win no matter what it does. Many people are calling the GUI stale. I tend to agree. So Apple has to make it different while kind of making it the same. That is an interesting design challenge. I for one think Apple has done a good job. There can be refinements, but I would not change a whole bunch. 


     


    It is worth noting many people disliked the interface of OSX when it was first released. 

  • Reply 11 of 75
    65c81665c816 Posts: 133member

    Quote:

    Originally Posted by boeyc15 View Post



    The one thing that seems a bit odd is this parallel view and multi tasking... Apple use to be almost fanatical about using battery life. They must of really made some code improvements to add these...'features'. Have not heard too much how well this beta is regarding battery life, although I know a beta is not a fair indicator either.


    Battery life sucks ass.  If you play Clash of Clans, say goodbye to your battery life.  I have to manually kill it after I'm done each time, because, otherwise, it'll run in the background.


     


    There needs to be a way, perhaps an advanced tab, where you can give zero cpu to a background app.  Seriously, I don't need background apps to run, other than to pick up notifications (ie, when a notification comes in, wake up, pick up the message, and then zero cpu again).

  • Reply 12 of 75


    iOS 7's UI is very disappointing, looks like flat-looking UI from miui, a Chinese android maker. wonder if miui can sue apple in china.


     


    http://www.miui.com/features.php#item6

  • Reply 13 of 75
    gtrgtr Posts: 3,231member


    The number one reason to get iOS 7:


     



     


    image

  • Reply 14 of 75


    For the love of God I just want time stamps in iMessage. Please.

  • Reply 15 of 75
    rogifanrogifan Posts: 10,669member
    65c816 wrote: »
    Battery life sucks ass.  If you play Clash of Clans, say goodbye to your battery life.  I have to manually kill it after I'm done each time, because, otherwise, it'll run in the background.

    There needs to be a way, perhaps an advanced tab, where you can give zero cpu to a background app.  Seriously, I don't need background apps to run, other than to pick up notifications (ie, when a notification comes in, wake up, pick up the message, and then zero cpu again).
    Good grief it's beta 1 software that should only be used by developers right now. People complained that iOS needed better multitasking or "real multitasking" and now that we're getting it people are whining about battery life. Does anyone not think battery life is a primary concern for Apple? That's probably the biggest reason iOS doesn't have widgets on the home screen. I doubt Apple implemented better multitasking without considering battery life implications. You can't use beta software as a gauge for what battery life will be once the product ships.
  • Reply 16 of 75
    iOS7 - Ugly icons except for the "Settings" icon. They really should have built the other icons around the same design theme as the Settings icon... or maybe allow users to choose between a black, white, or color set of icons. The UI animations I like however, I just wish the animations were a bit snappier.

    Macbook Air - genius piece of machinery from top to bottom. I don't care if it's not in retina... retina hurts my eyes. Battery life is amazing and it's so thin and light... it's what I always wanted in a laptop but didn't realize until after owning one and experiencing it.

    Mac Pro - epic genius. It looks like something right out of Star Wars. Actually, it would be cooler if it was aluminum and matched the Macbook's aluminum theme. Then it would look almost like it fell from a spaceship.

    As for Microsoft Windows 8 - give me a break. The OS on a computer is complete garbage. The only reason people still use Windows is because they need to use Microsoft Office or want a cheaper tablet/computer. Let's not kid ourselves. Most Windows based hardware is junk that they mark up at a premium and Windows 8 is just junk inside of junk. The only reason Microsoft is still around is because Apple hasn't focused on iWork. Apple really should destroy Microsoft by refocusing on their productivity suite.

    As for Tim Cook, I think he's doing a fantastic job. I think consumers need to get it through their thick skulls that there is no replacement for Steve Jobs. Steve was unique. Tim Cook is a completely different person. He's not going to act like Steve Jobs. He's not an asshole. Tim Cook is more rational, more of a team player. He is a better manager. He is a professional. There's more than one way to make a company successful. If it weren't for Tim, Apple wouldn't be where it's at right now. I think Steve Jobs knew that.

    For all you crying, sniveling little babies threatening to leave the Apple eco-system, go ahead, descend down to mediocrity. Android is junk. It is fragmented and buggy. They have nothing close to iCloud. Their Chrome OS is complete garbage. Their laptops are a joke. People who whine about jumping ship because Apple isn't satisfying all their desires, need to spend a little time in Android/Microsoft hell to sober up.
  • Reply 17 of 75
    asciiascii Posts: 5,941member

    The WWDC video "What's New in iOS User Interface Design," clearly explains their thinking, and also explains why it turned out like it did, despite them following good-sounding principles.


     


    One of the presenters puts up a totally white slide and says "We started with a totally blank slate." They then go on to talk about the principles they decided to follow in their design: Clarity, Deference, Depth, Detail.


     


    This very approach: starting with a blank slate and choosing principles you will follow based on what feels right is basically Platonism, it is not just a method of designing but of thinking in general, and throughout history it has lead to disaster in many fields of human endeavour.


     


    Design must always follow principles, but the way you get them is not to start with a blank slate and choose ones that feel right. The way you get them is to take iOS 6 and make 2 big lists: things that worked and things that didn't. Then look for *commonalities* among the things that worked, and commonalities among the commonalities, ... until you go abstract enough to arrive at principles. This is the scientific/Aristotelean method of arriving at principles, and has resulted in success in many fields of human endeavour.


     


    Those Discovered Commonalities are what they should have started their Big Redesign with, not a Blank Slate. Maybe then it would have turned out better.

  • Reply 18 of 75
    vl-tonevl-tone Posts: 337member


    The simpler textureless design of Windows 8 and Android interfaces have been dictated by their need to automatically rearrange their UI layouts on a variety of screen sizes.


     


    To me, it's very obvious that the radical iOS 7 design shift has a lot to do with a need for greater flexibility in dealing with various screen sizes.

  • Reply 19 of 75

    Quote:

    Originally Posted by stelligent View Post


    It's not too thin to me, not at all; however, that sort of thing is personal. It is possible for the wallpaper to dominate, but I don't think the weight of the typeface is the biggest issue.



    I would hope Apple and Ive are considering the rapidly aging U.S. population and whether the selected font is readable by weakened eyesight. It would be tragic to lose a lot of potential buyers because another product is far easier to use by elderly readers/users. Perhaps they have another Helvetica font with a bolder stroke as part of their accessibility choices.

  • Reply 20 of 75

    Quote:

    Originally Posted by daewalker View Post



    As for Microsoft Windows 8 - give me a break. The OS on a computer is complete garbage. The only reason people still use Windows is because they need to use Microsoft Office or want a cheaper tablet/computer.


     


    A lot of them use windows because they just don't know better. They've spent YEARS getting to the point where they can navigate XP without having the whole computer blow up, so upgrading to a newer version is spine-chillingly frightening. OSX is so simple that they are sure it must be a lot more complex and they just are not understanding something huge.


     


    As far as MS Office is concerned, I've had it on my Macs since its parts came out on 400K floppies. Office is buggy, it locks up now and then or quits unexpectedly. I don't mind it all that much because it reminds me of why I hate Microsoft crap OS and keeps me loyal to Apple. When iWork grows up and bit and begins to fill out some, I'll probably start dating her instead.

Sign In or Register to comment.