The Web Designer's Guide to iOS Apps: The iOS Interface and User Experience
- What is the status bar?
- Implementing the title bar
- Designing with tab bars
- Navigating with table views
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
- The iPod touch and iPhone screens—they're so small! How is it possible to design a quality user experience on something as tiny as 320 x 480 pixels?
Coming from a large-screen environment where we are typically designing for 960 pixel, 1024 pixel, or even wider spaces, these mobile screens at first seem impossibly small. But millions of people are buying and using these devices, and they aren't doing it to torture themselves—we're seeing some great user experiences on these pocket computers. They can be fun, easy, and even delightful to use.
So what makes this possible? How can we learn from Apple's own apps and from other examples? This is what we'll be focusing on in this chapter, as well as some of Apple's suggestions for how to succeed on the small screen.
As we begin figuring out how to use this small piece of real estate, it's important to take a look at everything Apple has given us. This includes walking the walk and talking the talk, so you'll also be learning a new vocabulary.
Let's start with the real estate itself. Figure 4.1 shows our 320 x 480 pixel screen (and note that in general discussions I will refer to the current iPod touch and iPhone 3GS screen size, though I will supplement with iPhone 4 and iPad sizes where appropriate):
)
4.1 The standard size iOS screen for iPod touch and iPhone (pre-4), where most iOS users are.
Screen is the most common term for the entirety of the view—it's not a window like on a desktop or laptop computer. Windows have close buttons, minimize, and enlarge buttons, and they reside on a desktop. But an iOS app screen just is—remember that this is a more immersive experience (consider screens in movie theaters), so thinking in terms of screens is a slight philosophical and practical change from designing less immersive, windows-based websites
Figure 4.2 shows the New York Times app and examples of the iOS interface elements that you'll learn how to implement in this chapter. The first element of the iOS screen you'll be introduced to is the status bar.
)
4.2 The New York Times iOS application in portrait and landscape orientations.
What is the status bar?
The iOS status bar (Figure 4.3), located at the top of the screen, grounds the device screen with some key information that we're all used to seeing. If it's an iPhone status bar, we see our cellular signal strength (or, as is often the case, our lack of signal strength!). And regardless of the device, we also see whether we're on a wireless internet connection and what its strength is.
)
4.3 The iOS status bar.
The local time is centered in the status bar. And a nice feature of this area is that tapping the center of the status bar is equivalent to a "Return to top of page" link on a website. It quickly scrolls the screen back to the top. This is a user interface feature that works in any app, so that's why all apps except video games tend to include the status bar in their design.
Finally, the rightmost element in the status bar is, of course, the battery charge indicator.
The default color of the status bar is silver, but it can also be set to black and black translucent. When using NimbleKit to trigger these native Objective-C settings, here's how to change the status bar to black using JavaScript:
var application = new NKApplication();
application.setStatusBarStyle("black");
And for black translucent:
var application = new NKApplication();
application.setStatusBarStyle("blacktranslucent");
The default setting is, not surprisingly, "default." Furthermore, if you're not changing the color to black, don't even worry about including this snippet in your app—it's only necessary if you don't want the default silver appearance.
When the device is rotated and the app supports landscape orientation, the status bar expands to fill the new width. So when planning app screen designs, it's important to take aspects like this into consideration. To help you with your planning, I will provide portrait and landscape dimensions of iOS elements for all three devices. Let's start with the status bar. In Table 4.1, I use the design term portrait to mean the standard, upright device orientation and the term landscape to mean the rotated or "sideways" orientation.
Table 4.1. Dimensions of the iOS status bar (in pixels)
|
Orientation |
iPhone/iPod Touch |
iPhone 4 |
iPad |
|
Portrait |
320 x 20 |
640 x 40 |
768 x 20 |
|
Landscape |
480 x 20 |
960 x 40 |
1024 x 20 |