IOS APP Design Tips

screen size and resolution ios

Here Insert Picture Description

IOS basic constituent elements of the mobile phone interface

The basic constituent elements: the status bar, navigation bar, menu bar, content area.
Weakening the status bar, but the size has not changed

IOS APP Design Tips

APP layout techniques:

Golden Rule vertical line 6: 4, 4: 6

(7:3、8:2较少)

Here Insert Picture Description
1, to reduce the visual design modification and materialized
materialized panel gradation and shading the UI becomes thick, grab content.

2, limit the scope of the content of reality
so that users do not need to see the full zoom and drag and drop content directly

3, using the visual weight and balance of
the important elements to display relevant

4, to ensure application definition
a, color to simplify UI, make focused and clever representation of interactivity
b, using the borderless button, the button to activate the highlighted
c, use a lot of white space
d, use the system font to ensure legibility
e, using the layout to communicate

5, using the layout and content to enhance the application of important functions
a, place the top half of the main content, from left to right habits.
b, ample space to each interactive elements, user-wing content and easy to operate controls
c, use the alignment to make reading more comfortable, so that an orderly grouping and hierarchy between
d, try to avoid inconsistent behavior on the UI

6. font
characters clear readability

English: HelveticaNeue
Chinese: blackbody under Mac - Simple
Chinese under the blackbody win

All the font size to use the even

Font Specifications:
navigation column headings: medium 34px
buttons and meter: light 34px
table tags: Regular 28px
the Tab page icon labels: regular 20px

The difference between the font size and line spacing of the text size of each file is provided 2px
typically title and text font size difference of at least 4px
applications to use a single overall font
size of the text changes to a corresponding priority

Production steps of APP

1. Requirements Analysis
2. FIG prototype
3.UI prepared (note specification)
4. Production distal
5. programming background

Published 141 original articles · won praise 28 · views 10000 +

Guess you like

Origin blog.csdn.net/weixin_42554191/article/details/103980172