iOS Platform Design specification

one, UI Controls Overview:

1, the framework UI elements are divided into 4 categories:

A: Columns: The combination of State column and navigation bar;

B: Content view: Apply the displayed content information, including the related interactive behavior, such as scrolling, inserting, deleting and other operations to sort;

C: Control elements: Product behavior or display of information;

D: Temporary views: Provide important information to the user temporarily or provide additional features and options.

2, the Frame UI size:

3, icons icon size:

　　Second, the layout of the UI overview:

1, clickable object area: Size not less than 44*44px;

2, the important content and function placed in the position of high weight, will be important elements in the first half screen better, for reading habits from left to right users, more close to the left side of the screen is easy to cause concern;

3, the use of visual representation of the weight and balance, the larger size of the elements have a higher weight, for small size elements, more attractive to look more important;

Overview of modal scenarios for the UI:

1. Modal: A pattern used to host a specific content, function, or experience, with its own advantages and disadvantages. It can help users accomplish certain tasks, or get information without interference, but temporarily force users to stop interacting with other parts of the application;

2, keep the modal task of simple, short, easy to focus: Do not make the modal view as if embedded in the application of the mini application;

3. Always provide a clear and safe way to exit: To ensure that the user exits the modal view, can have a clear understanding of what will happen next;

4, use the warning box to convey those essential important information, usually also provide executable function options.

　　Four, the UI gesture Interaction Overview:

A: Tap (TAP): Press or select an object;

B: Drag-and-drop: scrolling or moving objects (will move from one side of the interface to the other);

C: by sliding (flick): Fast scrolling or moving objects;

D: Through a finger light sweep (swipe): Can show more content, such as: List of delete button, from the top of the interface to start Notification Center;

E: Double tap: The content can be enlarged in the middle of the screen, mainly to enlarge and reduce the conversion;

F: Pinch open or closed by means of a double finger (pinch close): Enlarges or shrinks the content;

G: With a long press (Touch and hold): Display a magnifying glass on editable or selectable text to position the cursor;

H: Perform undo or redo operations by shaking (shake) the fuselage.

　Five, UI Animation Overview:

1, beautiful and exquisite animation effect throughout the iOS, they make the application experience more dynamic, more attractive, fine and appropriate animation effect can:

A: Communication Status

B: Enhance user perception of direct manipulation

C: Rendering operational results to the user in a visual manner

2, keep in line with iOS's built-in application animation mode: People are accustomed to using a variety of subtle animation in the built-in application, in fact, the user will be the built-in application of the dynamic effect as a standard of experience, such as the smooth transition effect when switching views, switch the horizontal screen when the smooth feedback, or roll-screen animations that show a variety of physical effects, and so on, are gradually becoming part of what people expect.

　Vi. UI Font Overview:

1, the font is the key to IOS7 design, most operations are clicked text or click on the icon, the button will have, but the proportion of small;

2, Apple's default font is Helvetica Nenu, a slender simple text, but that is not your only choice;

3, the font size of the Ios7 slightly increased, mainly because of its use, and the level of the relationship between the text is essential, the use of color and different thickness, to maintain the layout of text and UI elements of clear and understandable.

4, Apple font specifications:

A: Navigation bar title: Medium 34px;

B: Button and Table head: Light 34px

C: Table Tags: Regular 28px;

D:tab page icon Label: Regular 20px