Sunday, June 16, 2013

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

  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.
  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.
  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.

No comments:

Post a Comment