PPI (Pixelsperinch): the number of pixels per inch, that is, pixel density.
DPI (dotsperinch): that is, per inch, the number of dots that can be printed, generally known as pixel density. ppi formula: ppi = screen diagonal pixels / screen diagonal number of inches, through the collinear theorem to calculate the number of pixels on the screen diagonal.
ScreenSize (screen size): cell phone screen size, such as 3 inches, 4 inches, 4.3 inches, 5.7 inches, refers to the length of the diagonal.
DIP (device independentpixel): dip/dp, device independent pixel. 1px=1dp
density (determined by dpi)
Resolution: the number of pixels on the phone screen in the vertical and horizontal directions. eg resolution 480
800
Resolution: the number of pixels on the screen.
800, means the device has 800 pixels vertically and 480 pixels horizontally.
px(Pixel):The same pixel ui will look different on different resolution devices. It will be enlarged and distorted on small resolution devices, and reduced on large resolution devices.
AndroidDesign categorizes the dpi of mainstream devices into four classes:
120dpi, 160dpi, 240dpi, 320dpi
, see the table below.
In the actual development, we often need to convert these sizes (such as the first in a certain resolution to complete the design, and then scaled to other sizes after fine-tuning the output), generally in accordance with the ratio between the dpi that is, 2:1.5:1:0.75 to the interface elements to the size of the definition.
That is to say, if 160dpi as a benchmark, as long as the size of the DP is a common multiple of 4, XHDPI multiplied by 2, HDPI multiplied by 1.5, LDPI multiplied by 0.75 to meet all the dimensions of the size of all the integer pixel. but assuming that 240dpi as the standard, it needs to be a DP is 3 common multiples of XHDPI multiplied by 1.333, MDPI multiplied by 1.333, MDPI multiplied by 1.333, MDPI multiplied by 1.333, MDPI multiplied by 1.333 to meet the size of the interface elements to be defined. 1.333, MDPI multiplied by 0.666, LDPI divided by 2. LDPI and XHDPI as a benchmark is more complicated. Meanwhile the first Android device (HTC's T-MobileG1) was of 160dpi. For all these reasons,
Standard dpi=160
Google's official explanation of dp is as follows:
AvirtualpixelunitthatyoushouldusewhendefiningUIlayout. toexpresslayoutdimensionsorpositioninadensity-independentway.
Thedensity- independentpixelisequivalenttoonephysicalpixelona160dpiscreen,whichisthebaselinedensityassumedbythesystemfora "medium "densityscreen. Atruntime,thesystemtransparentlyhandlesanyscalingofthedpunits,asnecessary,basedontheactualdensityofthescreeninuse. Theconversionofdpunitstoscreenpixelsissimple:
px=dp*(dpi/160).
Forexample,ona240dpiscreen,1dpequals1.5physicalpixels.Youhouldalwaysusedpunitswhendefiningyourapplication'sUI, toensureproperdisadvantage. Youshouldalwaysusedpunitswhendefiningyourapplication'sUI, toensureproperdisplayofyourUIonscreenswithdifferentdensities.
Simply put, with 160dpi of the device as the standard, the device on the 1dp=1px; if the screen density is large, 1dip represents px is more, such as in the 320dpi screen on the screen, 1dip = 2px (that is, 1dp represents 2 pixels). In app development, it is best to use dp to do the layout of the interface to ensure that the adaptability of different screen density of the phone.
dp and px conversion formula:
My understanding, the formula indicates that the value of px is equal to the value of dp * (device dpi/160)
Note that, px, dp is the unit, but the density has no unit.
applyDimension of the source code is as follows, you can refer to:
android's many dimensions, it is recommended to use the resolution of
720x1280
dimension design. This size 720x1280 in the display perfectly, in 1080x1920 also looks clearer; after cutting the picture file size is also moderate, the application of memory consumption will not be too high.
The app launch icon is 48*48dp, corresponding to each dpi device, the image resource pixels are as follows:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|
|48
48px|72
The app launch icon is 48*48dp.
72px|94
96px|144px
144px|
Operation bar icon is 32*32dp, corresponds to the various dpi devices, the image resource pixels are as follows: the size of the graphic area is 24*24dp, you can refer to the usual ui cutout there will be a portion of white space.
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|---:|
|32
32px|48
48px|64
64px|96px
96px
The notification bar icon is 24*24dp, corresponding to each dpi device, the pixels of the icon are as follows:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|-:|--:|--:|--:|
|24
24px|36
36px|48
48px|64
64px|96px
96px|
96px p>36px|48
48px|72px
72px|
Some scenes need small icons, the size should be 16*16dp, where the graphic area size is 12*12dp.
|mdpi|hdpi|xhdpi|xxhdpi|
|-::|-::|- ---:|-:|-:|-:|
|16
16px|24
24px|32
32px|48px
48px|
APP INTERFACE MARKING AND CUTTING CAUTIONA. General Knowledge Introduction of App Screen Adaptation
1. Notes on markup
Generally, to locate an Icon, you only need to give the top/bottom margins, left/right margins
Mark the distance of the icon only to the outside of the clickable range
General-purpose colors, fonts and a separate markup
General-purpose modules only need to be marked individually a copy of the module, such as the navigation bar
Mobile phone viewing area is generally a fixed width, length beyond the border can be cut to fit the screen
Generic knowledge of app screen adaptation. fixed, length beyond the border can slide, so the labeling of the width of the object can be proportional to the description
If you want to label the content of the top and bottom center, left and right center, or isometric can not be labeled
When the drawing is a list and the content of each item is the same, you only need to label one, if the content of each item has a small difference, you only need to indicate the difference between the ____糠
When delivering the a complete picture, do not need to do model adaptation, just give the HD picture (1920 * 1080) can be, pay attention to compression
When the background is a solid color, just give the outstanding value (iOS uses RGB color value, Android uses hexadecimal color value)
The icon should be given to the clickable area
If the icon is repeated in different pages, and the size If the icon is repeated in different pages, and the size is not much difference, directly give the largest cutout, and in the round figure marked size, the program will be scaled according to the demand
Clickable buttons usually need to give two states: normal/click (selected)
Buttons, if only a rectangle, rounded rectangle, rounded, ellipse, give the size and color value, can be set by the program
Fade effect can be achieved by the program, just give the Start and end color values and range
2. Cutout naming convention
Background:bg_
Button:btn_xxx_
Image:img_
Tab:tab_
Icon:icon_
Photo:pht_
Navigation:nav_
Illustration:tip_
Menu:menu_
Sidebar:sidebar_
Two, iOS apps screen adaptation
1. iOS exactly if you want to adapt how many kinds of models, which model resolution as the design size is the best
2016-3
iOS only need to be compatible with the iPhone4, perfectly compatible with iphone5 and above models
If you make the design according to the vector drawing by 1X size, later enlargement into 2X, 3X; if you make the design according to the traditional px drawing apply the maximum size (3X) as the canvas.
3X as a canvas (1242 * 2208) is difficult to remember and can not be divided, we can directly to 1280 (640 * 2) as the width, the perfect zoom into 1X, 2X;
2X->3X to 1.5 to calculate the size and font size can be a better result
2. interface size
Device Resolution Status Bar Height 1136px40px88px98px
iPhone4/4s640*960px40px88px98px
iPad3/4/Air/Air2/mini22048*1536px40px88px98px
iPad1/21024* 768px20px44px49px
iPadmini1024*768px20px44px49px
Navigation bar background image, if you consider the background of the status bar, the size of the background image for the navigation bar px + status bar px, if you only change the color of the navigation bar, then you only need to navigate the bar px
3. Icon size
DeviceAppStoreProgramApplicationHomeSpotlightSearchTabBarToolbar and NavigationBar
iPhone6plus1024*1024px180*180px144*144px87*87px75*75px66*66px
iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone5/5s/5c24*1024px120*120px144*144px58*58px75*75px44*44px
iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px
iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100* 100px50*50px44*44px
iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px
iPadmini1024*1024px90*90px72*72px50*50px25* 25px22*22px
Button cutout is recommended to equal width and height size cutout, and pixels must be >=88,*88px, when the width or height of the image itself is not enough, supplement the blank pixels (transparent pixels). In general, only the ordinary state button cut can be
(Adaptation is not recommended isometric zoom)
4. References
AUO Device Index
APP Cutting Flow and APP Cutting Naming Specification Detailed and Complete
APP Cutting Detailed Specification Ultimate Guide
iOS and Android apps. Android app interface design specifications
APP interface cutout naming and file organization specifications
Three, Android app screen adaptation
1. px as the base unit of the defects
Comparison of the above figure can be seen, ppi the lower the picture is displayed the bigger, ppi the higher the picture is displayed the smaller, resulting in the layout of the picture displayed on different phones is not uniform
The more the picture is displayed on the mobile phone, the more it is displayed on the mobile phone. The layout of the images on different phones is not uniform!
Using dp as the unit of all machine display unity
2. Measure a screen clarity unit ---- screen density (dpi == ppi)
Calculation formula: screen dpi = √( screen length^2+screen width^2)/screen size
Name density stands for resolution android unit and pixel conversion
mdpi120dpi~160dpi320*4801dp=1px
hdpi160dpi~240dpi480*8001dp=1.5px
< p>xhdpi240dpi~320dpi720*12801dp=2pxxxhdpi320dpi~480dpi720*1280/1080*19201dp=3px
xxxhdpi480dpi~640dpi2k~4k1dp=4px
< p>Screen sizeLaunch iconOperation bar iconContext iconSystem notification icon (white)Finest stroke320*480px48*48px32*32px16*16px24*24pxNo less than 2px
480*800px/480×854px/540×960px72*72px48* 48px24*24px36*36px not less than 3px
720*1280px96*96px64*64px32*32px48*48px not less than 4px
1080*1920px144*144px96*96px48*48px72*72px not less than 6px<
3. How many models should be adapted
2016-3
Conclusion: only high-end xxhdpi (720*1280/1080*1920), low-end hdpi (480*800)
4. Units of measurement and borders
Touchable controls are all based on the unit of 48dp
Touchable controls are all based on the unit of 48dp
Touchable controls are based on the unit of 48dp
Touchable controls are all based on the unit of 48dp
Touchable controls are based on the unit of 48dp
Touchable controls are all based on the unit of 48dp.
Why 48dp? Typically, 48dp is the physical size of 9mm on a device (subject to change). This is just within the recommended size range for touch controls (7-10mm), and at this size, the user's finger is more accurate and easier to touch. (xxhdpi standard is 144px)
Border attention to the white space between the interface elements should be 8dp.
Example:
5. font layout
Roboto is the default font set of Android system, font size unit sp (scalablepixels)
According to the Android design specification, the recommended font sizes are 12, 14, 16, 20 and 34, with adjustable font thickness
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
(Note: the font size should be double, and no decimal places)
6.9-Patch Chart
What is a 9-patch chart
Why use 9-patch format to make a chart
To adapt to the various cell phone screen stretching picture needs, effectively reducing the size of the picture
What is the use of
When you find that the picture is the background and may be stretched by the stretching of the picture, or the picture is too large
How to Make a patch9 image
Add a transparent pixel to the outer layer of the image, and spend 4 solid black edges in the transparent pixel area
1. width stretchable area
2. height stretchable area
3. vertical content area
4. horizontal content area
8. references
AU device index
Android Design Guide Simplified Chinese Version 4.x
MaterialDesign Chinese Version
Android design in the .9.png
Technical Dried Goods: ApplewatchAPP Design SpecificationI. Outline of the specification
1. Navigation form
Hierarchical, through the current page click to jump to another page form. Suitable for complex products that require a hierarchical progression.
Page type, page switching, sliding, similar to the rotation
AppleWatch navigation form of either one, may not exist at the same time.
2. Interaction
Touch: list, button, switch and other controls
Gesture: vertical swipe, interface scrolling; horizontal swipe, interface navigation between the view; swipe from the left edge of the screen to the right to return to the parent interface.
Pressure touch: call up the current page context menu
Entity control (watch knob): long page browsing, to avoid long time finger swipe to avoid blocking the interface
3. Color
Use black as the background color of the app, or dark and gaussian blurred image as the background
High contrast color is used for text, Icons
4Text
SF and Applesquare
5. Icons
Notification icons, first screen icons, and long view icons, short view icons
Scenario icons (in-app function icons)
6. Layout
Don't have more than three icons in a row placed side-by-side
Priority of layout is to Adopt left alignment
Two, design size
1.1 Screen size
38mm(272*340px)
42mm(312*390px)
1.2 Icon size
Notification icon 48PX(38mm)55px(42mm)
The first screen Icons and often seen icons 80px(38mm)88px(42mm)
Short view icons 172px(38mm)196px(42mm)
Menu scenario icons (function icons within the app)
Icon size 70px,actual icon size 46px.(38mm)
Icon size 80px,actual icon size 54px.(42mm)
Icon line width should not be less than 4px
1.3 Icons
1.3.1
Notification icon, system notification popup icon
1.3.2
Header screen icon, as shown in the figure below. First screen icon 80px(38mm)88px(42mm)
1.3.3Long view icon, as shown below, the icon in the upper left corner. Long look icon 80px(38mm)88px(42mm)
1.3.4 Short look icon, as shown below. Short look at the icon 172px (38mm) 196px (42mm)
2. fonts and text
2.1 fonts
SF and applesquare
2.2 text (font size, the common font size units are PT and PX, PT is the unit of development, PX is the unit of design, under the @2X conversion relationship 1PT = 2PX)
Title headline18PT
Body titlecaption15PT
Body15PT
Remarks, footnotes, auxiliary text footnote12PT,13PT
3. color
High-contrast color used in text, icons, interface
1. main color, as shown below
2. secondary colors, accent colors (controls, buttons)
Button controls are usually designed with transparency
3. font color and transparency
4. layout
1 status bar and below the picture and list layout spacing
38mm (30px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px), 42mm (32px). 42mm(32px)
2 Status bar and list button layout spacing
38mm(11px),42mm(13px)
3 Status bar and text layout spacing below
38mm(46px),42mm(50px)
4 Text margins and divider buttons list image margins
38mm and 42mm margins are the same
5. Distance from pictures and buttons to both sides of the screen
38mm and 42mm margins are the same
5. Controls and lists
1 Single row control and list layout dimensions
38mm
42mm
2. Double row control and List Layout Dimensions
2.1 Body + Remarks
38mm
42mm
2.2 Two Row Body
38mm
42mm
3. Three Row Controls and List Layout Dimensions
38mm
42mm
4. Multi-row control and list layout size
38mm
42mm
5. Control and list type
_