Follow< /span>「 Longbow Boy"See more design dry goods! Hi, I am Yuan Yao. Welcome to press the QR code in the picture to add me on WeChat, and I will take you into the designer exchange group, and communicate and grow with tens of thousands of friends!
"Please note when adding friends: design communication"
When you draw design drafts or read design articles, you may have such problems:
—— CONCEPT 1——
px: pixel, pixel
The full name of px is pixel, which means "pixel" in Chinese, which can be understood as follows:
1. px is used to display on the screen The most basic point of the content.
2. < /em>px It is not a unit of length in nature, a px can be very small or very large, it is A "relative length".
3. screenHorizontal and vertical pointsThe number of cloth px, called"Resolution". For example 1920 * 1080 The actual meaning of the resolution is: the display panel is distributed horizontally by 1920 px, vertically distributed10< /span>80px.
4. Same , the more px , the higher the resolution, the more screen clear. You can compare it to a mosaic, px is like each grid of the mosaic, for the same painting, if the grid of the mosaic is smaller, the picture will beclearer;The larger the grid , the picture will bemore blurred.
For example, the length and width of the two pictures below are equal (equivalent to screens of the same size), but the left picture has 60 small grids (equivalent to 60 px ), there are 80 small grids (equivalent to 80 px) in the vertical column; the horizontal row of the picture on the right has only 30 small grids (equivalent to 30 px), There are only 40 small grids in a vertical column(equivalent to 40 px)) span>, so it looks like the picture on the left will be clearer (equivalent to higher resolution):
5. We will find that various The size of the device screen is various, and the size of px is relative. Both are variables. How can we know whether the image quality of a screen is good or not? For example, the two devices in the picture below have different screen sizes and resolutions, so it is difficult to visually compare the difference in screenimage quality:
This is to mention PPI (Pixels Per Inch)Pixel densityThis concept. PPI means: monitor screenThe number of pixels per inch . That is to say, no matter how big your screen size is, we only look at the number of pixels in one inch of the screen, the more the number, the the higher the PPI valuehigher , means the more pictures we seefine.
6. For the calculation formula and case of PPI, see Below(Trust me, it’s not difficult?):
Visible, compared to iPhone 5, iPho The larger the PPI of ne 12 , the rendered image will be more delicate and real.
—— CONCEPT 2——
pt: Common unit in the printing industry,
< h3 >Design unit of iOS systempt as a unit has two meanings, there is no connection between these two meanings, it is simply "duplicate name"?< /span>:
1. Printing Common units of industry
1. pt is point It is a special printing unit. When we use photoshop to make posters, the font unit is pt.
2. pt is a nature The standard length unit, which can be measured, is a "absolute length" (1pt is 1 / 72 inch , 1 inch = 2.54 centimeters, so 1pt is about 0.35 millimeters). As students who have done posters know, the 30pt text effect we draw on A4 paper is as shown in the left picture, and if we want to achieve the same effect on A3 paper, we need to use 72pt text:< /span>
2. Apple The design unit of the iOS system
1. pt represents resolution in iOS development The smallest unit. Like px, it is also a "relative length".
2. pt The reason for this unit is Apple The resolution of the Retina screen is relatively high.In order to better define and display its own products, Appledefined a design unit pt , used to make basic design for iOS system designers, and can be transformed into px according to the formula to adapt to mobile phones with different PPI.
3. pt and pxThe conversion method is: pt = ppi / 163px . When ppi notdivisible by 163, it can be rounded. For example, if ppi is 350, then pt = 350 / 163 = 2.14px, which means that 1pt is approximately equal to 2px.
4. The source of the number 163 in the above formula is: 3.5 inches of iPhone3 The resolution of the screen is 320*480px, and its ppi is equal to 163 according to the ppi calculation formula we mentioned above. Apple regulations: When ppi = 163, 1pt = 1px.
When it came to iPhone4, the screen resolution of the 3.5-inch mobile phone became 640*960px, ppi = 329, then 1pt = 2px.
In the image below, you can see the difference in px between iPhone3 and iPhone4 for the same rectangle. As for Apple, Using the unit of ptUnifiedchanges in the number of design dimensions brought about by equipment update iterations. 2pt should be the same size on any iOS device, but represents several px is Not fixed, determined by the ppi of the screen:
—— CONCEPT 3——
dp: Android system design unit
< p>Coincidentally, probably for similar reasons to Apple, Google launched the unit dp for designing on the Android system.
1. dp full nameDensity-independent pixel , can be understood as a design unit independent of px, which is used by the Andriod system for basic design by designers, and can also be used Convert to px according to the formula.
2. Same as pt, 1dp should be the same size on any device, However, the representation of several px is not fixed, so as to deal with devices with different ppi.
3. The conversion method of dp and px is: dp = < /span>ppi / 160 px. The principle is the same as above, but the denominator is taken as an integer, which is specified as 160, and the result can also be rounded.
—— CONCLUTION——
Having said so many concepts, let's see what conclusions we can draw: If your productis not suitable for platforms, systems and devices I have special preferences, I hope the product can be more general, it is recommended to use px< /strong>As a design unit, because pt and dp can be converted to px, pt is more suitable for iOS System products, dp is more suitable for Andriod system products, and px is common to all products and is more basic.
Work experience｜B-end component design work experience (6)
Detailed｜Design tokens in the design system< /span>
Detailed explanation｜How can designers obtain user data at low cost?
Learn more about design concepts and methods
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Detailed%20explanationpx%20pt%20dp%20cant%20tell%20Chat%20about%20these%20units%20in%20interaction%20design.html
支付宝扫一扫 
评论列表（196条）
测试