Five things you need to know when designing iOS apps

Based on our experience in creating excellent iOS apps, we believe that designers should keep in mind the five things that apply to iOS. Although the focus of this article is only on iOS apps, most of the comments also apply to other mobile platforms.

 

 

1. Learn about your media

This seems obvious. Designing applications rather than websites actually need to change the way of thinking. Applications are not websites and should not be designed as they do. Let's talk about the details.

Applications have completely different user interaction models with websites: hitting and clicking, views and pages, buttons and links. We believe that discussing the changes in the application design language can help us maintain a correct mindset.

In addition to different Interaction Models, applications should adopt different methods. Do not place too much content in a view; separate different functions into different views. As screen space is more limited, it is more important on the iPhone than on the iPad.

The use of applications is totally different from that of websites. The application's navigation hierarchy is often narrower and deeper than on the website. A user clicks a few times to achieve a certain goal or access certain content. Do not place too much content on the screen at a time to block this natural drilling behavior.

There is a big difference in navigation on iOS-there is no Chrome browser or the back button. Because of the launch of iOS, there are many navigation methods. Which of the following is the best choice for your applications depends on your specific needs. Let's take a look at Pttrns, including the interface navigation of many excellent applications.

Finally, remember the iOS applications running on iOS devices. Ah, right? But this is very important. Rendering translucent content with rounded corners, shadow images, and animated gradient overlays may cause performance problems. Come up with a way for developers to execute tricky design work on the interface, without causing the user to feel obviously lagging behind.

Wikipedia has an iOS device list, but we still list all devices running iOS 6, we hope this will help you make informed decisions on the elegant experience and hardware compatibility when designing your application.

FAQs about device screen size pixels
IPhone 3GS 3.5 "320x480 non-Retina Display iPhone Idioms
No Gyroscope
No front camera
 
IPhone 4 3.5 "640x960 only single-core Retina screen
The lowest performance in iPhone es
 
IPhone 4S 3.5 "640x960 none
 
IPhone 5 4″ 640x1136 extended display
 
IPod Touch (4th Generation) 3.5 "640 × 960 only single-core Retina screen
 
IPod Touch (5th Generation) 4″ 640x1136 Variable Length display
Although the screen is the same as that of iPhone 5, there is only half of the RAM
 
IPad (2nd Generation) 9.7 "1024x768 pixel low camera
 
IPad (3rd Generation) 9.7 "2048 × 1536 Retina screen may cause performance problems
 
IPad (4th Generation) 9.7 "2048 × 1536 none (Retina screen may cause performance problems fixed)
 
IPad Mini 7.9 "1024*768 because the pixel display ratio is smaller and the control point is smaller, You need to review your design
 

2. Design versatility
Our best application can work in a universal manner. This means they can work well on Retina and non-Retina screens, extended and short screens, iPad, iPhone and iPod touches.

This is very difficult, but we have a few simple tips for you to meet 80%.

Avoid odd-sized Retina Images
Non-Retina content must be accurate to half the size of Retina content. This means that if the size of the Retina content is 101 pixels and that of the non-Retina content is 50.5 pixels, this is impossible. Do not use an odd-sized Retina image so that you and your developers do not have a headache for this problem.

Make the click target large enough
Remember the difference between your application and Web browser? Well, they have no mouse. Instead, all interactions with your applications use an inaccurate instrument: finger.

To ensure that users can easily interact with your application interfaces, make sure that the operation area they can click is at least 44 points in width and height.

3. device-based Design
The pixel density of iOS devices varies with different colors. You should consider this when designing iOS applications.

To identify the display of your application, you should present it on multiple devices: retina and non-Retina screen, long screen or short screen, iPad or iPhone. You can use LiveView or Skala to simulate and display your photoshop files on your device. Finally, do not forget to adjust the screen brightness to ensure that your applications can be perfectly displayed in all circumstances.

4. UI Animation
IOS animation is simple-Apple has done a lot of work for apps to easily create transition animations. You should make full use of it.

Unfortunately, animation is not easily reflected and converted to iOS in PSD. The best way is to design an animation prototype on a device with developers. In short, you can create a one-time application to explore your animation ideas. This will give you an accurate feeling of the actual animation performance.

When designing an animation, the new view slides in from the right side when they click on a project. They want to slide the view from the bottom up when creating new content. Simulate these motion animations in your custom views. Do not design new animations that you are not used. You should learn how users are used to, so that your applications are more familiar with and friendly to users.

5. Early stages involving developers
We believe that developers participate early in the design process and continue to participate in the later development process. Collaboration between designers and developers will produce better applications.

Implementing any complicated design is a challenge for the implementers-a better solution allows developers to start thinking about solving these problems earlier.

Developers know that not all our designs can be implemented. All the work that allows designers to work with developers does not need to be repeated.

So you know the application, not the website. The design is universal. Design on the device. The animation is great. Early on, developers involved your design in your way.