34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
The incredible growth rates for the iPhone, iPod touch, and iPad have pushed consumers to a new “App” economy, with developers racing to the platform. Mobile touch-centric interfaces vary greatly from traditional computing platforms, and programmers as well as designers must learn to adapt to the new form-factor.The iPhone User Interface Cookbook offers a complete breakdown of standard interface design on the iPhone, iPod touch, and iPad. You will learn the tools behind the trade, how to properly utilize standard interface elements, and custom UI tricks that will help your work stand out on the App Store.The book is designed to be a complete overview of interface design on all iOS platforms, offering insight and an inside look into app design. A variety of topics are covered, starting with an overview of tools for the app interface designer, touching upon popular interface components such as the Tab Bar, and offering suggestions for complex game interfaces. Whether you’re new to the platform or a seasoned developer with numerous applications in the App Store, this book strives to teach everyone simple and easy to implement tips for iOS interface design. Regardless of skill level, the iPhone User Interface Cookbook offers a detailed breakdown of all things interface design.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 380
Veröffentlichungsjahr: 2011
Ähnliche
Table of Contents
iPhone User Interface Cookbook
iPhone User Interface Cookbook
Copyright © 2011 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2011
Production Reference: 1171111
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-84969-114-7
www.packtpub.com
Cover Image by Asher Wishkerman ( <[email protected]> )
Credits
Author
Cameron Banga
Reviewers
Daria Bernabei
Robb Lewis
Chris Zaplatosch
Acquisition Editor
Steven Wilding
Development Editor
Maitreya Bhakal
Technical Editor
Aaron Rosario
Project Coordinator
Vishal Bodwani
Proofreader
Aaron Nash
Indexer
Monica Ajmera Mehta
Graphics
Valentina D'silva
Production Coordinator
Alwin Roy
Cover Work
Alwin Roy
About the Author
Cameron Banga is an iOS application interface designer and entrepreneur, having played a role in the development of over 35 applications for the iPhone and iPad since beginning work on the platform in May 2009. Cameron can be found on Twitter at @cameronbanga, or at her personal website, http://cameronbanga.com. He can be e-mailed at <[email protected]>.
Currently Cameron is lead designer at 9magnets LLC, which is an iPhone and iPad application design, development, and marketing studio he co-founded in May of 2010.
The team has seen strong success in the App Store and has had their work featured and reviewed positively by the New York Times, Chicago Sun-Times, Fox Business News, Macworld, PC Magazine, and more.
I'd like to thank Nathan, Mom, and Dad, thanks for putting up with my hectic schedule while remaining to be the best family a guy could ever ask for, as I can't even begin to describe my appreciation. Kathryn, thanks for the patience and believing in me throughout this entire process, I owe you an omelet. Adam, Aviral, Bud, Harry, Hayson, Mike, and Tom, I apologize for being the non-existent friend over the past year. To Lank 5 South, this one is for Cardboard Mike Lucien. I'd like to give a special thanks to Maitreya, Vishal, Aaron, Steven, and the rest of the Packt Pub team, for helping direct and lead the production of this book. Thanks as well to Chris, Daria, and Robb for their unbelievably valuable feedback during the technical review stage.
About the Reviewers
Ever since the early days at the Graphic Design school in Italy, Daria Bernabei knew her real passion was the web. After working for several small studios, Daria moved to Barcelona and soon started to work for lastminute.com, where user experience and the marketing departments worked hand in hand to deliver campaigns where eye-catching creativity was balanced with high technical skill to provide adequate support on the platform side.
At the moment she leads the User Experience department in Gsicommerce International, coordinating the creation of user interfaces for online stores. Her goal is to optimize design as well as technical implementation according to the web standards and the main focus is about improving the user's shopping experience.
She is fascinated by the new challenges and opportunities that mobile devices are bringing to the web developers and a total fanatic of Apple gadgets.
Robb Lewis is a web developer and student studying web technologies at Portsmouth University. Robb has a great interest in technology, specifically mobile technology, and is an Apple advocate. Robb also blogs about software, technology, and the Internet at http://therobb.co.uk.
Chris Zaplatosch works in the technical support industry, specializing in customer support and management. He has more than five years of experience in the IT support field.
Since March 2011 he has been working for Blackboard Inc. as a Technical Support Manager, providing support for system administrators.
Prior to working at Blackboard, Chris spent three years working at a university help desk as a Help Desk Manager, supporting students, faculty, and staff in day to day technical operations.
Chris has a bachelor's degree in Business Management from Valparaiso University.
www.PacktPub.com
This book is published by Packt Publishing. You might want to visit Packt's website at www.PacktPub.com and take advantage of the following features and offers:
Discounts
Have you bought the print copy or Kindle version of this book? If so, you can get a massive 85% off the price of the eBook version, available in PDF, ePub, and MOBI.
Simply go to http://www.packtpub.com/iphone-user-interface-cookbook/book, add it to your cart, and enter the following discount code:
ipuicebk
Free eBooks
If you sign up to an account on www.PacktPub.com, you will have access to nine free eBooks.
Newsletters
Sign up for Packt's newsletters, which will keep you up to date with offers, discounts, books, and downloads.
You can set up your subscription at www.PacktPub.com/newsletters
Code Downloads, Errata and Support
Packt supports all of its books with errata. While we work hard to eradicate errors from our books, some do creep in. Many Packt books also have accompanying snippets of code to download.
You can find errata and code downloads at www.PacktPub.com/support
PacktLib.PacktPub.com
PacktLib offers instant solutions to your IT questions. It is Packt's fully searchable online digital book library, accessible from any device with a web browser.
If you have a Packt account, you might want to have a look at the nine free books which you can access now on PacktLib. Head to PacktLib.PacktPub.com and log in or register.
Preface
The incredible growth rates for the iPhone, iPod touch, and iPad have pushed consumers to a new "App" economy, with developers racing to the platform. Mobile touch-centric interfaces vary greatly from traditional computing platforms, and programmers as well as designers must learn to adapt to the new form-factor.
The iPhone User Interface Cookbook offers a complete breakdown of standard interface design on the iPhone, iPod touch, and iPad. You will learn the tools behind the trade, how to properly utilize standard interface elements, and custom UI tricks that will help your work stand out on the App Store.
The book is designed to be a complete overview of interface design on all iOS platforms, offering insight and an inside look into app design. A variety of topics are covered, starting with an overview of tools for the app interface designer, touching upon popular interface components such as the Tab Bar, and offering suggestions for complex game interfaces. Whether you're new to the platform or a seasoned developer with numerous applications in the App Store, this book strives to teach everyone simple and easy to implement tips for iOS interface design. Regardless of skill level, the iPhone User Interface Cookbook offers a detailed breakdown of all things interface design.
What this book covers
In the Preface, we'll touch upon the basic features of iOS and the common tools that we'll use as interface designers. If you're uncomfortable with the thought of being considered a designer, start your reading here.
For Chapter 1, Getting Started: Prototyping, Proper Tools, and Testing our Design, we'll touch upon the first steps of interface development. We'll start out with early design sketches, then progress on to the point where we put our app onto a device or offer a test build for beta users.
In Chapter 2, Customizing our Icon, the Navigation Bar, and the Tab Bar, we'll tackle the first thing the user sees when using our app: the icon. This 512 pixel square will be an essential piece of the puzzle if we want to see success, and we'll discuss some ways in which our work can stand out from the crowd.
Chapter 3, Different Ways To "View" our Application, is all about the different content presentation views that are available for our application. We'll discuss web views, Twitter views, modal views, and much more.
What's the difference between a Tab Bar and a Navigation View? In Chapter 4, Utilizing Common UI Elements, we'll tackle the various navigational interface elements that exist for our use in iOS.
Chapter 5, All About Games is action packed, as we tackle interface challenges that exist for games on iOS. Unsure about how to best go about game play mechanics or a heads up display when working with a touch platform? These recipes will help you gain a high score in interface design.
First impressions and final goodbyes are the topics that we'll take on in Chapter 6, Starting, Stopping, and Multitasking. From the Default.PNG to multitasking in iOS 4 and 5, we'll learn about the best ways to design our application for the stop and go nature of iOS.
Chapter 7, Notifications, Locations, and Sounds helps teach interface principles requirements that come into play when we design to include push notifications, badges, iCloud, location services, or iAds into our app. These are all common app features, and our app will be more successful if we use each correctly in our interface.
We'll discuss app configurations, copy and paste, and accessibility in Chapter 8, Accessibility, Options, and Limited Opportunity to Help our User. While often overlooked, the features discussed in these recipes are often responsible for the extra polish that pushes an app into the top sales charts.
Finally, for Chapter 9, Migrating to the iPad, we'll grow up a bit and talk about the iPad. Interface design for the larger screen and wider aspect ratio can be a bit different than the work we produce for the iPhone, and we'll discuss those differences here.
Looking for a bit more help? We'll tackle the problem of direct manipulation and the importance of application responsiveness in Appendix A,
As a final encore, we'll discuss the interface challenges that arise when designing a touch based operating system in Appendix B, If you need a stylus, you blew it. Software designed around use with a finger instead of a mouse can be a bit tricky, but we'll help you master the subject.
Who this book is for
The iPhone Interface Cookbook is written from the ground up for people who are new to iOS or application interface design in general. Each chapter discusses the reasoning and design strategy behind critical interface components, as well as how to best integrate each into any iPhone or iPad application. Detailed and straight-forward recipes help give guidance and build understanding far beyond what is offered through Apple's Human Interface Guidelines.
Getting to know the features of iOS
If we want to develop an attractive yet functional user interface, we need to start by taking the time to fully understand the uniqueness of the iOS operating system and how it is designed to provide an exceptional touch-centric experience. Let's take a look at the key hardware features that the user will use to interact with and experience our application.
Looking at the features...
Take note of the hardware features present on the iPhone or iPad. All iOS devices have a circle home button located below the touch-sensitive screen, volume controls found on the side of the device, a headphone jack, and a sleep button on the top of the device. On the iPhone and iPad, a switch can be found that toggles silent mode on and off.
Several other features can be found on each device, depending on the model. A rear-facing camera has been prevalent on the iPhone since the first model in 2007. A front-facing camera has become a common addition since the introduction of the iPhone 4 and Facetime in 2010. Recent iPod touch and iPad devices have also received front and rear cameras. All devices besides the first generation iPod touch contain a microphone for recording audio. With the addition of the iPhone 4S, Apple included its system-wide Siri voice dictation software, which is available to all applications through inclusion of the standard keyboard.
An ambient light sensor and accelerometer can be found on every iOS device. Bluetooth has been a staple of every iPhone and iPad, with iPod touches receiving the feature in 2008 models and beyond. A gyroscope is a new addition to iOS devices, being introduced with the iPhone 4 in the summer of 2010.
Music, photos, and applications are all held on the device in flash ROM storage. The amount of storage on each device can fluctuate anywhere between 8 GB to 64 GB and is not expandable after a user has purchased the device.
Unlike other touch capable phones or tablets, iOS devices contain no programmable hardware buttons for developers or designers to work into an application. Instead, every interaction between the user and the application must be implemented through either a software interaction with the touch screen or by utilizing the accelerometer or gyroscope for user interaction.
We've just begun to scratch the surface on the functionality available to iOS designers. Here are a few more tips that we can use to best understand the basic principles of iOS user interface development.
Understanding our audience
Fully understanding the hardware specifications and limitations for the device we're looking to target is absolutely essential. The more we know about who will be using our application and what device features they have, the better we can fine tune our user interface in order to provide a great experience for the end user.
Before we ever begin to map out any interface design, we should take the time to sit and consider where and when people will be using our application.
Imagine we are looking to build an application to help bus riders in Chicago keep track of stop locations. In this app, it wouldn't make sense to use the accelerometer and have the app update the user's location when the device is shaken, because the constant stop and go nature of a bus ride could accidentally trigger an update and frustrate the user.
Dealing with download caps
Even though Apple's cap of a 2 GB file size per application is usually more than enough space for any app, it's also important to remember that many wireless carriers across the world place a limit on the size of applications that can be downloaded over the wireless data network.
When determining a target audience and use case for an application, it's important to see what app size limitations are in place for the target market.
Using our example of an application to help bus riders find detailed stop information, it would be detrimental to have our app size be above the wireless download cap placed by the carrier, because users would be unable to download the application while walking around the city looking for a bus stop.
The tools of the trade
In designing the user interface for an iOS application, we're lucky that very few tools are required during the production process. That being said, this does mean that the tools we do need are that much more important when it comes to producing a quality application.
Let's look at what hardware and software we're going to need in order to develop the best interface possible for our application.
What we'll be using...
The first thing we need to do is pick up a capable computer for design work. Since we're developing for iOS, a Macintosh is definitely preferable if not required. If we're not going to be doing any programming, it could be possible to get away with a PC that runs Adobe Photoshop, but this is not recommended. Without a Macintosh, we will not have access to the iOS Simulator and other tools that Apple provides for design.
All other things being equal, a quality monitor of significant size may be the most important attribute when picking up a computer for design work. The iMac or a Mac Pro with Cinema Display may be the best option, but a Macbook or Macbook Pro is certainly sufficient. Given the Retina display of the iPhone or large display of the iPad, we'll want to have as much room for high-resolution art on our monitor as possible.
Currently, the Mac Pro is the only Apple computer that is easily upgradable after initial purchase. With a slight bit of tinkering, it's easy to add more RAM or install a new hard drive on the professional grade machine, so it should be our first choice if we're looking for a device to build upon in the future.
In comparison, it is relatively difficult to upgrade an iMac, Mac Mini, Macbook Pro, Macbook, or Macbook Air. Any Apple computer should be more than capable of producing exceptional UI design, but this lack of expandability should be something to keep in mind in case we plan on upgrading our machine down the road.
Pick up a copy of Adobe Photoshop and if possible, Adobe Illustrator. Adobe offers a variety of packages on software, which can all vary greatly in price depending on our needs and circumstances. When it comes to design and graphic production, Adobe is the gold standard and we can never go wrong by having their design suite on hand. Ultimately, Photoshop is really the only application we will need, but it never hurts to have Adobe's entire design suite just in case.
Many designers like working in Illustrator because it makes it easy to do vector drawings, which are resolution independent and work well if we ever need art for a magazine ad or promotional banner. We also never know when Apple will increase the resolution on iOS devices, as they did in 2010 with the Retina Display, and it is much easier to upscale artwork for higher resolution screens when resource files are easily available in vector format.
If Photoshop is out of our price range, fear not, as there are several other raster graphic programs that can help in the design process. Acorn by Flying Meat Software, found online at http://flyingmeat.com/acorn/, is an extremely capable image editor that can be purchased for only $50. Acorn is fundamentally similar to Photoshop, so moving between the two is quite easy.
We'll also want to make sure that we've downloaded the latest version of Apple's iOS SDK tools as well. The iOS SDK can be downloaded for free from Apple's Developer Center, regardless of whether we are registered in the iOS developer program or not. When we're ready to download the SDK, we can visit http://developer.apple.com/devcenter/ios/index.action.
If we're not performing any of the programming for our application, we could get away without using or learning how to use the iOS SDK, but this is not preferable. The iOS SDK, along with XCode, allows us to change art resource files quickly and then launch the iOS Simulator to see how resources look when running in our application.
While this seems like a fairly limited tool set, we should be able to compete with nearly any user interface in the App Store once we have these items. Anything we can't build in code can be produced in Photoshop, which gives us the flexibility of only needing one application for the majority of our work. The negative side to this is that we're going to be spending a lot of time in one application, so we need to be comfortable in the image manipulation program.
We won't dive too deep into Photoshop in this book, so you may find yourself struggling a bit at first if you've never used the application. Luckily, there are many resources available to help teach Photoshop, written by individuals who are extremely talented with the application. A simple web search of the Photoshop technique you're looking to learn or a stop by a bookstore should provide more than enough information on improving our Photoshop skills.
Resources for designing iOS apps
Many websites and blogs focus primarily on the design of iOS applications. Here are a few handy resources that can help inspire and educate.
Sizing up interface elements
iDev101 offers a great breakdown of the exact sizing requirements of different iOS UI elements, which can be found at http://www.idev101.com/code/User_Interface/sizes.html.
The complete package
The iPhone GUI PSD http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/ is an extremely handy Photoshop file compiled by Teehan+Lax. The file typically sees an update whenever Apple makes changes to UI elements, making this an extremely valuable resource for any designer.
Great examples from the pros
365PSD is an extremely useful site by Dutch designer Jonno Riekwel, which releases a new Photoshop file per day as a free resource. A good deal of the posts focus on iOS and the files can be a great way to learn first hand how a specific UI effect was performed in Photoshop. To download files from 365PSD, we should visit http://365psd.com/.
Working with a finger as a pointing device
In developing an operating system without a keyboard or physical buttons, Apple had to decide on whether or not to facilitate interaction with a stylus. Ultimately, it was decided that a stylus would create an unsatisfactory experience and the device was built from the ground up to only support human finger interaction.
There are many benefits in developing a touch only operating system. Users have no stylus to lose, the barrier between person and device is essentially torn down through direct interaction, and the device can easily be managed with only a thumb when held in the palm of a hand.
While often considered to be an afterthought, it's important to understand how our users will hold the device with using our application. Difference in aspect ratio, hand placement, and grip are rather serious attributes that can greatly change the development of our interface.
Let's take a look at how hands are both a blessing and a curse.
Working with our hands...
While nearly everyone who first uses an iOS device has had an experience with a traditional button based cell phone, the large screen touch based devices offer a significant difference by allowing a truly orientation independent device.
In many respects, the decision to create a device which functions as properly right side up as it does upside down was intentional on Apple's part. All iOS devices contain a single, circular, and orientation neutral button that sends the user back to the home screen upon impression. All other menus and buttons to control an application are produced on screen and as such, defined by the developer.
This establishes an incredible sense of free reign for creative design in application perspective. Games such as Doodle Jump by Lima Sky can offer entertaining and fast paced play mechanics while various Twitter applications can offer landscape views for reading or typing away at tweets. Applications such as Ocarina by Smule can flip an iPhone or iPod touch completely on its head and require a user to rotate the device completely around so that the microphone can be used to mimic an actual ocarina.
In deciding which orientation best fits our iPhone or iPod touch application, the general purpose of our app will help guide our way. In nearly every situation, the user expects the application to function properly within the portrait orientation. Unless our app is a game that requires a simulated control pad and buttons or landscape orientation, we should always assume that users will expect portrait orientation in some respect or another. Landscape can offer an intriguing and greatly appreciated bonus for many users, especially in applications that depend heavily on typing or data entry, as many users prefer typing on the larger landscape keyboard.
While the above flexibility applies to smaller iOS devices, Apple demands orientation independence when working with the iPad. Unless there is a specific reason as to why an iPad app could not support both landscape and portrait view, we're expected to design our application to fit both perspectives.
Designing visually appealing work for both portrait and landscape perspectives on the iPad can be a challenging experience. The device features a 4:3 aspect ratio which creates a screen size that's not quite a square, but not wide enough to be a true widescreen perspective either. This provides an interesting problem where it is difficult to create two unique orientation interfaces that work well in their own way.
To help account for both orientations, Apple has developed a fair amount of new interface elements for our use in an application. Popovers and Dual pane views are just two new tools that are at our disposal to help produce quality interfaces. Tab Bar and Navigation Bar views have also been redeveloped to help better fit the larger screen as well. In designing our application, we should provide some sort of dual interface perspective that best works to provide clear navigation regardless of orientation.
Instapaper - © 2008-2011 Marco Arment
Instapaper by Marco Arment implements a prime example of an iPad application that provides a dual pane interface when in landscape view and a single pane presentation aided by a Popover sheet when in portrait view.
When holding an iPhone in portrait view, the thumb of the hand holding device is easily available for use on screen. This portrait view also allows for the opposite hand to also be used as a way to interact with the device with ease. When holding an iPhone in landscape view, the device is typically held in a fashion that allows for only the thumb of each hand to be used to interact with the screen. As such, the landscape perspective is best used for typing or game applications.
Due to the large size of the iPad, the device offers a different experience with regards to holding and interacting with the screen. Typically, the iPad is held with two hands much like a book, with one hand lifting up to touch on screen with the pointer finger when input is needed. A large bezel surrounding the device prevents a finger from accidentally coming in contact with screen and makes it difficult for a thumb to move from a relaxed position to the screen. This distance makes applications or games with persistent interaction, such as a game with a software simulated control stick, difficult to play for extended periods of time because the hand will naturally fatigue while being held up to touch the screen.
With this information in mind, we should be able to develop applications that behave predictably for the user. When the user knows what to expect with our app, time spent learning the application will diminish and users will have more time to enjoy our work.
Screen sizes and the touch surface can vary based on the device, which means we shouldn't assume a great iPhone app will automatically make a successful iPad app.
It all depends on how you hold it
While the iPad and iPhone both run iOS, the size difference between the two devices can cause us to hold each considerably different. The iPhone and iPod touch are primarily one-hand devices while the iPad is more commonly held with two hands like a book.
Just because an interface works well on an iPhone doesn't mean it will necessarily translate to the bigger device and vice versa. Likewise, actions that work well with in one way on iPhone may need a different gesture or a button on iPad.
These size differences help demonstrate why we should have multiple test devices on hand during development. Just because one mechanic works well on a specific device doesn't mean we should assume that it would work well on another.
What you need for this book
To tackle the recipes inside of this book, you'll be best served to have the following equipment on hand: a Macintosh computer running Snow Leopard or Lion operating systems, an iPhone, iPod touch, or iPad device, a copy of Adobe's Photoshop software, and sketching tools such as a notepad and pencil. Throughout the book, we will refer to additional software and tools that can help make interface creation easier; however these side notes will never be required during the design process.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code is set as follows:
