iOS 8 设计 Cheat Sheet

Yet again, Apple managed to surprise the world with its recently launched iPhone 6 and iPhone 6 Plus. What’s new? Both iPhone 6 sisters are largest in the iPhone family, with rounded edges and Retina HD. They both are well toned with 0.27-inch (or 6.9mm) thickness, and are available in three colors- gold, silver and space gray. Besides, Apple moved the power/lock button from top to right side, and reserved Apple Pay for only these two devices.

Since the change in a screen size results in change in the requirements for Human Interface elements, Click Labs decided to do some research, and compiled an exhaustive list on ‘iPhone 6 and iPhone 6 Plus User Interface Specifications’ for all the iOS Developers out there. These lists of specifications include Resolution, Display, Iconography, UI Elements and Typography.

In addition, we are giving away our very first iOS 8 Design Graphic User Interface (GUI) Photoshop Design (PSD) template of iPhone 6 Plus. Scroll down for the Free Download.

1) Display

Apple increased the LED screen-size (diagonal) of iPhone 6 and iPhone 6 Plus from 4 inch (of iPhone 5/5C/5S) to 4.7 inch and 5.5 inch respectively. However, the company maintained the tradition of aspect ratio to 16:9 in both the devices. This means that apps designed and developed for iPhone 5 screen can conveniently scale on iPhone 6 and 6 Plus. Besides, with the big screen of iPhone 6 Plus supporting the landscape mode which will be similar to that of the iPad, developers can now think of adding landscape view features to their apps.

iOS 8 Design: Display Specifications  for iPhone 6 and iPhone 6 Plus

2) Resolution

As iPhone 6 and iPhone 6 Plus offers resolution of 750×1334 pixels at 326 ppi and 1080×1920 pixels at 401 ppi respectively, Apple has upgraded its status from Retina to Retina HD.

iOS 8 Design: Resolution Specification for iPhone 6 and iPhone 6 Plus

 

3) Iconography

Icons form the most important part of any user experience. Even though iPhone 6 will support same icon dimensions as that of iPhone 5 i.e. 2x pixel size, iPhone 6 Plus  will support 3x pixel size.

iOS 8 Design: Iconography for iPhone 6 and iPhone 6 Plus

 

4) UI Elements

Similar to the icons, UI Elements of iPhone 6 and 6 Plus will also support 2x and 3 x pixel size respectively.

iOS 8 Design: User Interface Specification for iPhone 6 and iPhone 6 Plus

 

5) Typography

With default font continuing to be Helvetica Neue, the font size of iPhone 5 and 6 will remain the same for Navigation Bar Title, Regular Buttons, Table Header and Tab Bar Icon Labels. Besides, the font size and weight will increase in all the elements of iPhone 6 Plus.

iOS 8 Design: Typography Specifications for iPhone 6 and iPhone 6 Plus

 

(Sources: cNet, Apple Developer, Ivomynttinen, Paint Code App, Apple)

Google+Sina WeiboShare

TrackBack

TrackBack URL for this entry:
http://blog.vash.cn/wp-trackback.php?p=1783

Post a comment

You must be logged in to post a comment.

  • RSS VASH ^ ^

  • 越来越多的分类

  • On Pinning

  • 幫vash喂小鱼

  • 标签云朵

  • 博客状态

    • 访问页面总数:550668
    • 唯一访问者:185856
    • 最近24小时内访问页面总数:333
    • 最近24小时内唯一访问者:56
  • 大家最近說的