第 1 页
The design book for iOS developers looking to learn more about the design process DesignLearn iOS for Development Sian Morson www.allitebooks.com
资料内容
第 2 页
For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.allitebooks.com
第 3 页
Contents at a Glance About the Author ���������������������������������������������������������������������������������������������������������������� xv About the Technical Reviewer ������������������������������������������������������������������������������������������ xvii Acknowledgments������������������������������������������������������������������������������������������������������������� xix Introduction����������������������������������������������������������������������������������������������������������������������� xxi ■Chapter 1: So You’ve Got an Idea for an iPhone App, Now What?�������������������������������������1 ■Chapter 2: iOS: What You Need to Know����������������������������������������������������������������������������9 ■Chapter 3: iOS 7 and Flat Design�������������������������������������������������������������������������������������29 ■Chapter 4: Getting to Know the User Interface of the iPhone and iPad Design Considerations�����������������������������������������������������������������������������������������������������39 ■Chapter 5: Mobile Design Patterns����������������������������������������������������������������������������������55 ■Chapter 6: Using Wireframes to Design Your App �����������������������������������������������������������69 ■Chapter 7: Designing Your Visual Assets with Adobe Photoshop������������������������������������85 ■Chapter 8: Creating Your App Icon and Additional Graphics for the App Store�������������103 ■Chapter 9: Finalizing Your Assets for App Development �����������������������������������������������113 ■Chapter 10: Design Best Practices and Mistakes to Avoid��������������������������������������������127 Index���������������������������������������������������������������������������������������������������������������������������������133 v www.allitebooks.com
第 4 页
Introduction iOS is one the most popular mobile operating systems of our time. If you are serious about mobile design, then iOS 7 is a must. As the owner of a mobile development agency, I can tell you that over 50 percent of our requests for apps are requested for iOS. With the release of iOS 7 and new devices, iOS is a global leader in a mobile ecosystem. Anyone serious about mobile design or development cannot exclude iOS. Who This Book Is For This book is for those already familiar with iOS from a development standpoint but are now ready to try their hand at design. It assumes that you are familiar with some of the nuances of the operating system and are interested in designing a simple application that either you or someone else will develop. The book will take you through the process of crafting your idea into a clear and actionable statement, through the details of creating your first wireframes and ultimately to design your app. It highlights tools and tips to help you with the design process and even highlights popular mobile design patterns to ease some of the challenges of design. If you’re ready to take on designing for the world’s most popular mobile operating system, Learn Design for iOS is for you. How to Use This Book This book is structured in a way that allows you to take your concept for an iOS application from your initial idea through preparation for development. The book will guide you, step-by-step through the processes of idea validation, ideation, design, and asset preparation for development. It covers creation of screens and guidelines that designers should be aware of from Apple’s Human Interface Guidelines. The book is a general high-level guide for those who are interested in learning more about the iPhone operating system and what is required when designing an application for the iPhone, iPod Touch, or iPad. xxi www.allitebooks.com
第 5 页
xxii Introduction What You’ll Find on the Web Site The apress.com web site contains a sample Design Specifications document for the fictional Travel Light application referred to in the book. It provides a guide on which fonts, colors, and other information that the developer needs to know during development of the application. www.allitebooks.com
第 6 页
1 Chapter So You’ve Got an Idea for an iPhone App, Now What? Congratulations! You’ve got an idea for an app and have made the important decision to design it yourself! You’ve joined the ranks of the hundreds of thousands who have decided to learn just what is required to take an idea from a tiny spark in your imagination to a fully designed application ready for development. As you may or may not already know, apps are an integral part of the mobile ecosystem. All mobile devices run apps. However, your decision to design an app for iOS is a unique one. Of all of the app stores, the Apple app store is the granddaddy of them all, featuring more apps than any other app store. But, you already know this because you’ve chosen to design an app for iOS. Apps are everywhere. Since the Apple app store initially launched in July 2008 with 500 apps, the number of apps have increased steadily. As of June 2013, that number has increased to just under 900,000 with Apple CEO Tim Cook estimating that $10 billion has been paid out to developers so far. So, if you have an idea for an app, there are great opportunities for making money and reaching a large audience with it. Those are pretty good reasons for wanting to design for iOS. These days, ideas for apps aren’t hard to find. Lots of people have them. So, how do you take your idea from just an idea to creating an actual app that is in the app store and runs on a device? It doesn’t happen overnight, but with a little diligence, it’s absolutely possible. Getting an app into Apple’s app store isn’t the hard part. But creating an app that features an original idea, great visuals, and great execution is; it requires lots of planning, a bit of research, and some dedication. If you are to take your idea through from just an idea to a fully designed and developed iOS app running on mobile devices, there are steps that you will need to take to get it there: very specific ones. While the process itself might seem arduous it is a necessary one, especially if this is your first time attempting to design the app. 1 www.allitebooks.com
第 7 页
2 CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? The simple truth is that most apps that are submitted to the app store die on the vine and fall into obscurity shortly after their release date. Without proper planning and faced with the competition from the sheer number of other apps in the app store, if your app doesn’t feature a unique idea and execution, then chances are, it won’t be noticed by very many people. Whether it’s for business or just a personal project, your ultimate goal when thinking of creating an app is to reach as many people as possible. If you’ve got a great idea for an app and you believe in it, then do it. There are many people who come up with an idea and never take it anywhere so you’re a part of a very small minority simply by having that idea. Celebrate it because the real work starts now. Assumptions This book makes a few assumptions, the main one being that you are at the very least familiar with iOS from a development standpoint but are looking for an opportunity to expand your development knowledge with some design knowledge as well. This book, however, is not about development per se. If you are curious about learning how to build an iPhone app, then this book isn’t for you. If you are, however, looking to enhance your knowledge of design specifically as it relates to the iPhone operating system, then you are in the right place. For the purposes of simplicity, in this chapter I’ve broken out the ideation process into six easy-to- follow steps. Each step will bring you closer to the ultimate goal of designing your iOS app. 1. Define your idea. 2. Share your idea with peers. 3. Compare your app to others’. 4. Analyze your findings. 5. Store comparative apps for future reference. 6. Revise your idea if needed. Step One: Define your idea First, write down your idea in one or two sentences. Three might be permissible but really try to nail it in two short sentences. If you need more sentences, that’s fine; however, the goal is to be able to describe and explain the idea behind your app and what it does in 30 seconds or less. This is usually called your elevator pitch and it is the first step in the process. Spend some time trying to make the sentence or sentences as succinct as possible while still capturing what your app does. This is important and will serve you and your app as you move forward because you will return to these statements again and again as you design and ultimately build your application. As you move through the next few steps, you will find that your description of the app might change as you look at other apps and categories. This is a natural part of the process. Be flexible and open to change. For example: “The Travel Light app will help frequent travelers by providing checklists to ensure that they pack only what they need for their upcoming trips.” After you’ve written your statement out, recite it until you have it in your memory. You should be able to say it without referring back to your notes. Ask yourself how it sounds. Are you using proper www.allitebooks.com
第 8 页
CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? 3 grammar? Are your ideas about the application timely? Does it solve a problem that people are facing today? Does it address issues in a way that people need it to? Is it unique? If so, what is unique about it? If not, then you will need to keep working on your description. Don’t rush this process. If you get stuck on the first step, then it is likely that your idea needs some work. Give it the time that it deserves. Once you can clear this first hurdle and you are happy with your description of the app, set it all aside and return to it after a few days. When you read your idea and its description again, does it sound as exciting to you as it did the first time? Does the sentence make you want to explore the application further? What has changed? More importantly, does it still sound like a good idea, and does it still fill you with the passion you initially had for the project? If not, then it might be worth it to take another stab at your description and the idea that spawned it. Depending on how strongly you feel about it, you might want to scrap that idea altogether and start on another idea for a different app. It is all up to you. It is important to remember that many people have ideas every day. But, there’s a big difference between having an idea and actually bringing it to fruition. The first step in the process is moving your idea past the initial idea stage. But, if you feel just as strongly as you did at the beginning and are still passionate about your idea, then it’s time to progress to the next step. Step Two: Share your idea with peers Share your idea with others! This might sound counterintuitive and even downright scary to some, but it’s really not. In order to validate your idea, you simply must share it with others. What good is an idea if it sits in your head? Ask your friends and others around you that you trust and get them to speak honestly in response to your idea. Try to share your idea and description with people who aren’t afraid to give you honest feedback. Ask for constructive criticism, but also be sure that you are ready to receive it. Ask questions that will help to move the idea forward and ultimately inform its design and functionality. If you have time, create a brief questionnaire and ask people to fill it out. Staying with our initial idea of a Travel Light app above, the following questions are examples of what you might ask: 1. Do you understand the problem the app is trying to solve? 2. If not, what’s missing? 3. Is it clear to whom the app is trying to reach? 4. Would you use this app? Why or why not? 5. What would you change? Briefly state the idea around the app, what it does, and how it will work. Then ask a few key questions that will help to provide you with information that will help to develop the idea further. www.allitebooks.com
第 9 页
4 CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? The questions should be leading with the intent of drawing responses that are as specific as possible. At this point in the ideation process, the more specific the responses, the more valuable they will be to you and will help to inform the design of your application. Some of you might be hesitant to share your ideas with others at this stage. In this day and age of patent trolls and copyright infringements, it might be easy to think that sharing your idea is the wrong thing to do. Remember, you can’t copyright an idea so it is important to get critical feedback up front and early in the process. If you are concerned about sharing your ideas with a wider audience, stick with a core group of people that you can trust. Friends, colleagues, and even family members will do as long as they are within the target demographic for your app. The process doesn’t have to be a long, drawn-out affair either. Your description of the app and what it does and a few short questions that will illicit the best feedback will suffice. Once you’ve done this and you receive responses either verbally or via your questionnaire, go through all responses carefully. Are the answers clear? Do you need to ask follow-up questions for clarification? If you need to, then do so. When this is complete, sit down with your idea and the feedback you’ve received and review your idea description while reviewing the feedback. How can you revise your idea to address the issues outlined in the feedback? It is important to note that not all feedback is good feedback. Some feedback, you will need to take with a grain of salt. A good rule of thumb is to consider feedback and suggestions that bring you closer to the core of what you saw your app to be. If the feedback you receive helps you to solve the problem your app is addressing, then consider it. Did you receive feedback that was unexpected or that might cause you to rethink your idea? This is perfectly fine. If you need to rewrite your statement and description for your idea, then do so and check it against the feedback you’ve received again. Keep all the feedback you receive, even if you don’t use it in this phase of the project. It will come in handy later as you move through the design process. Step Three: Compare your app to others’ In this step, we will begin to really expand on the initial idea you created for your app in step 1. Now that you’ve validated it with a small control group of potential users, we’ll need to see how your idea stands up against existing apps in the Apple app store. Since the App store launched in 2008 with 500 apps, the number of applications available for iOS devices has grown exponentially every year. As mentioned earlier, as of June 2013, there were approximately 900,000 apps in the Apple app store. That’s a lot of competition! Luckily, Apple does a pretty good job at categorizing the apps, and the app store is easy to access and browse right from your iPhone, iPad, or iPod Touch. A good place to start is in the Featured section or tab of the App store. Here, you will see the New and Noteworthy and What’s Hot sections of the store. These are apps that have been chosen by Apple’s editorial staff as exhibiting best-in-class usability, design, and functionality. Because of this, they are featured by Apple and also tend to do extremely well when it comes to popularity and sales. Usually, these apps are flagged upon submission to the app store as being unique. Apple’s editorial staff tries to pick apps that are innovative in some way to feature in the App store. Chances are, you may already have some of these apps but with the sheer number of apps being released www.allitebooks.com
第 10 页
CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? 5 every day, you may see new apps that you’ve not seen before. Apps in the New and Noteworthy and What’s Hot sections will be from a variety of categories. It is a good idea to view apps that aren’t in your particular app’s category as well as ones that are to be able to see a variety of styles and functionalities. Take a look at apps in the Top Charts as well for an indication of which apps are currently most popular. Navigate to each app’s page and pay particular attention to the description and screenshots for each app. Are there any hints as to what makes this app unique in its particular category? Note that you will find multiple apps that do the same thing in one category. For example, Games is far and away the most popular category in the Apple app store followed by Education, Entertainment, and Lifestyle. These categories are chocked full of apps with more being designed, developed, approved, and released every day. Your app will really need to stand out if it’s targeting one of these categories. As you go through the lists of popular apps, be sure to navigate to each app’s page in the app store. Note the icon for the app; the app’s name; its description; screenshots; and last, but not least, the number of reviews and average rating. Most apps listed in the New and Noteworthy section of the App store have impressive download numbers, reviews, and high ratings. Reviews and ratings are important statistics for any app. They are visibly shown on your app’s page in the app store, so naturally, you want your app to be popular and well designed in order to receive high ratings from its users. When reviewing an app’s page you will see that screenshots are required for all apps. Take a look at the screenshots for the more popular apps. Note the ones that stand out for you. Note that based on the screenshots, you might be able to get a sense of functionality. That is not the purpose of this exercise. Use the screenshots to get a sense of the design aesthetic of each app. What is unique about the UI of the app? Note the color scheme and what works based on what you can see from the page. Do any of these things make you more or less inclined to download the app? Note why or why not. Pay special attention to the apps that are in the same category as the app you would like to create. Are there similarities? What clues can you glean from the app’s page in the app store about functionality and design? Every app in the app store will have reviews. Every customer is able to post a public review and rating to the app’s page in the app store that everyone will be able to read. Be sure to read the first 10 or so reviews of the top apps in your category as well as those of the apps that appeal to you. Try to get a sense of each reviewer’s main concerns. Are they praising the app? Are they trashing it? Reviewers can sometimes be brutally honest, but hidden in some of the most brutal comments are nuggets of truth. So, if users are passionate enough to write a review, there must be some valid points somewhere. If you have downloaded the apps (of course do what your budget allows), then be sure to use the apps and read some of the best and worst reviews to get a balance sense of what the issues in the app are. Compare these to your app. Try to ascertain if your app can fill the void created by some of these applications, especially ones in your category. Make a note of these as well. You may also want to try app review sites. These are sites that review apps and rate them outside of the app store system. The quality of what you find here might vary but you might also find apps that you www.allitebooks.com
第 11 页
6 CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? don’t find in the app store. The difficulty of searching Apple’s app store have been debated but is good to get a sense of what Apple deems to be a great example of app design. Step Four: Analyze your findings This is the part of the project where we collate all of the data we’ve collected from the app store and from our own. Make two lists. One list will contain your favorite apps from your recent app store exploration. Why were you drawn to these particular apps? Describe what stood out to you about these apps. What is unique about them? Was it their names, logo designs, or screenshots? Are there any apps that are similar to your idea? Do any of the apps fall into the same category as your app? Pay special attention to those. Are there lots of similarities between your app and other popular apps? If so, how can you differentiate between yours and theirs? If you need to, revisit your sentence describing your app to think about how your app will be different and how not to reinvent the wheel. List One: App #1 – Great design App #2 – Silly name. Has nothing to do with what it does App #3 – Love the color scheme The second list will contain the apps that are specifically from the same category as your idea app. What are the top apps in that category? What are these apps doing right and what are they doing wrong in your opinion? Pay close attention to apps with high ratings and downloads. What are users saying about them and note anything that stands out as unique, positive or negative about these applications. Note anything else about your category. Are most of the apps in your category paid apps or free apps? Is there any consistency among the top rated apps with the best reviews and highest downloads? When you look at the screenshots do you see any similarities in the UI of these apps? What do they do well? List Two: App #1 – Very similar to my app. Reviews complain about price point. App #2 – Easy to use. Very popular. Number1 app in the category. App #3 – Recommended by Apple. Great design and UI. Easy to use. Take, for instance, the Utilities category. This category contains many apps with similar functionality. The To-Do apps are a perfect example of this. There are quite a few of these applications in the in the app store, and they all have a similar goal: to help users manage their time or projects by allowing them to categorize their tasks and by creating lists. Each app, however, treats the problem in a different way and while the core task of each application may be the same, each application is markedly different from the other. Each differs in terms of UI, functionality, and color palette. These things alone can make two apps that do similar tasks appear completely different. Think about this in relation to your app and what will make it stand out in a field that just might be already saturated.
第 12 页
CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? 7 An already saturated field isn’t a reason to abandon your idea. After all, with almost a million apps in the app store, you’d be hard pressed to find a field that isn’t already saturated. So, rather than seeing a potentially saturated category as a barrier to success, think of a saturated field as something that could push you to find a unique way to solve a very popular problem. It will force you to think outside the box and to create a truly original solution to an existing problem. Step Five: Store comparative apps for future reference If you can, download as many of the apps on your lists as possible. Hopefully, most of them are free and the others aren’t too expensive. Usually apps in the app store range from free to $3.99, but there are others that can be more expensive. Download what your budget allows. Apps costing more than $3.00 or so are considered premium apps and it is up to you to decide what you can afford. If you choose not to buy apps, try to find reviews of those apps on the Internet. If an app is featured in the App store, then it is likely that it has been featured in popular tech journals like Mashable, Tech Crunch, or Venture Beat. The articles will sometimes go into greater detail about the user interface and functionality of the apps than the description in the app store. A quick Google search should yield a good selection of reviews of some of the top apps. This can save you some cash if you’re hesitant to download an app that you won’t likely use or one that is not compatible with your budget. Once the apps have been downloaded, place them in a folder with a title like “Research” or another title that will remind you of its purpose. If you need to, you can further categorize the apps in folders marked paid, free, etc. Keep the folders handy on your phone where you can easily access them if you need to. Throughout this process you will be referring back to these applications to help you with your ideation process. Step Six: Revise your idea if needed Once you’ve downloaded the apps and categorized them, the real fun begins. Keeping your one- sentence description of your app handy (or you should have memorized all of the various versions by now) explore the apps you’ve downloaded in greater depth. Initially, plan to spend at least a half an hour with each app. You will find that depending on what the app does well, you may spend less or more time with each one. Note this, too. Other questions you might consider asking yourself are: What do these apps do well? Where do they drop the ball? What are the unique elements of their UI? Are they easy to use? More importantly, how do they relate to the app you would like to create?
第 13 页
8 CHAPTER 1: So You’ve Got an Idea for an iPhone App, Now What? Pay particular attention to apps that are in the same category as your idea app. How do they compare to the core problem that your application is trying to solve? If, in our opinion, your app stacks up against these apps then, that is great. You could truly be onto something! If you believe enough in your app, then go for it. While based on the number of apps submitted to the app store each day the numbers alone could stack the odds against you. So, it is important to stand out in any way that you possibly can. Now that you have an idea that you truly believe in, the hard work really begins. Ask yourself the following questions: What problem am I trying to solve with my application? Who is the intended audience for my application? What is the ultimate goal of the application? Will the app be available for both the iPhone and iPad? Once you’ve answered these questions and none of the answers are showstoppers, then you’re ready to proceed with your app. This means that your idea is solid, you’ve done the basic validation and market research, and you’re ready to move onto the next stage of designing your application for iOS. Summary All apps start with an idea. But research is critical to your design, too. Creating a statement of what the app does and validating it with others will help you to refine your idea so that it becomes more than just an idea. Checking your app idea against others in the app store is a great way to see what you’re up against, get ideas, and understand what users really want. Going through the necessary define and refine process is an important step in the creation of your app and will lay the foundation for the subsequent steps. Next, we’ll discuss what you will need to understand about Apple’s new operating system, iOS7.
第 14 页
2 Chapter iOS: What You Need to Know iOS stands for the iPhone Operating System and is the software upon which all of Apple’s mobile devices and tablets are built. This includes the iPhone, all versions of the iPad, and even the iPod Touch. iOS allows all of the apps to run on these devices. iOS was released in 2007 with the original iPhone and has undergone minor changes up until recently with the announcement and release of iOS 7. It is an operating system for multi-touch devices. As such, users are meant to interact directly with the screen of the device upon which the OS is running. This presents some unique opportunities and problems for designers. Therefore, it is important to know what elements are standard and have become familiar to users over the years when interacting with iOS. Throughout iOS, there are commonly used UI elements that are standard regardless of the device and that help users to perform common actions, regardless of which app is in use. We will review some of these elements, as they will be useful when you design your application. In June 2013 at the annual Developer’s Conference in San Francisco, Apple announced iOS 7. In this chapter, we will discuss standard UI elements for iOS and how they have evolved and changed with iOS 7. What to Expect in iOS 7 iOS 7 is important because it represents the most significant change in the operating system since its release over six years ago. If you are designing an app from scratch, you will need to understand how Apple expects you to conform to its new design language; and if you already have designed an app, it will need to be redesigned to conform to the new, improved design paradigm set forth in iOS 7. While the overall functionality of the toolbars, tab bars, navigation bars, and other user interface elements have remained the same, the look and feel of the entire operating system has been changed completely. As a design-centric company, Apple has always been known for its beautiful, yet simple design aesthetic with its software as well as its hardware. That design aesthetic has become a part of the 9
第 15 页
10 CHAPTER 2: iOS: What You Need to Know company’s legacy. iOS 7 is an extension of that design aesthetic. While it does not represent a new design paradigm per se (it has borrowed generously in design and has taken hints and clues from some of the more popular apps currently on the market), it does represent a completely new direction for the operating system and will change the way that designers approach the design for their applications moving forward. It is safe to say that applications exhibiting pre-iOS 7 standards will look dated when running on the new OS. iOS 7 Guiding Principles Jonathan Ive, Apple’s Creative Tsar as he is sometimes called, has always been known for allowing form and function to coexist in a beautiful and seamless way whether it applies to hardware or software, and iOS 7 is no different. Thus, the new interface prides itself on being unobtrusive. Throughout the new updated Human Interface Guidelines (HIG), Apple implores designers to allow the design to facilitate the content. iOS 7 is an attempt to show by doing. Designers who follow in suit will find that their apps look and work seamlessly within the iOS 7 framework. The key to designing for iOS 7 is to keep it simple. This has always been mentioned in the HIG, but with this new design direction, simplicity is front and center. Older app designs that worked well for the previous version of the OS will now appear heavy and complicated on iOS 7. So, you will have to consider how to adapt to this new color palette while keeping content front and center. While previous upgrades to iOS were focused on development, there are plenty here, too. Designers will be forced to make significant changes in the way that they approach app designs moving forward. All apps must now be optimized for retina screens, and icons have a new look and feel. There are three guiding principles and themes that should guide designs for iOS 7 apps: Deference – Refers to the ability of the user interface to understand and interact with the content of your application but not to compete with it. In fact, the HIG states that the UI should never compete with content. This means that the elements you choose in your UI must not overwhelm the content or make the user have to choose between the two. If there is ever any question, content wins. Every time. Clarity – Refers to the new requirement that all new designs be legible on retina screens. Previously, if your designs were not optimized for retina screens, they would appear slightly fuzzy on the newer devices. No more. With iOS 7, Apple now requires text and icons to be clear, crisp, and lucid on all devices. That also means no more bevels and drop shadows for effect. Depth – New attention has been placed on layers, transparency, translucency, and motion to create depth in applications. iOS 7 is brimming with beautiful transitions and realistic animations that add new responsiveness and depth to the environment. If you are adapting an older app for iOS 7, you will need to revisit every page to remove the appearance of heavy shadows, bevels, and other features that tend to weight designs down. Remember, functionality and content must be front and center. iOS 7 will expose your app to your users in a whole new way, so think about how you would like to approach a scaled-down look of your app, yet with a heightened functionality in an elegant and stylish way. All of these elements must balance each other out to work with iOS 7.
显示前 15 页。下载资料查看完整内容。
评论 (0)
暂无评论。快来抢沙发吧！