dpi、ppi、dp、px、分辨率、@1x、@2x、@3x

   <p>从事设计以来，这些单位概念，总是反复循环的遗忘混淆，于是下定决心整理一份自己容易理解的笔记，分享出来供大家一起参考。</p>    <ul>     <li> <p>px：像素 </p> </li>    </ul>    <ul>     <li>分辨率：屏幕水平方向上的像素 × 垂直方向上的像素，单位为px； </li>    </ul>    <p>例：iphone5的分辨率为：640 × 1136 px</p>    <ul>     <li> <p>ppi：Pixel per inch，每英寸像素数，为像素密度，单位：像素/每英寸 </p> </li>    </ul>    <p>针对显示器设计时， ppi=dpi</p>    <ul>     <li> <p>dpi：dots per inch，每英寸像素点，为像素密度，单位：像素/每英寸； </p> </li>    </ul>    <p>dpi=√ (屏幕水平像素^2 + 屏幕垂直像素^2) / 屏幕英寸数</p>    <ul>     <li> <p>dp：在Android开发中，使不同密度的屏幕显示一致的UI元素。称“密度独立像素” </p> </li>    </ul>    <p>dp=（dpi/（160像素/英寸））px</p>    <ul>     <li> <p>@1x、@2x、@3x：在ios开发中，为使在不同设备下显示一致的UI元素，将iphone手机分为了3类，对应称之为一倍图、二倍图、三倍图</p> </li>    </ul>    <p>在Android开发中的应用</p>    <p><img src="https://simg.open-open.com/show/ff69cd5ce665764f1425355f99227f96.jpg"></p>    <p>如上图所示，为方便开发，Android将主流设备分为了mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五大类。</p>    <p>例如：华为 Nova手机<br> 主屏尺寸：5英寸 1080x1920像素<br> 则：ppi=dpi=√ (1080^2 + 1920^2) / 屏幕英寸数 ≈ 440像素/每英寸<br> dp=（440/（160像素/英寸））px ≈ 3px<br> 其实当我们计算出dpi的时候，通过上表就可以知道，该屏幕属于xxhdpi屏，俗称3倍图 </p>    <p> </p>    <p>通过计算可以得出，一般情况下：</p>    <p>360px 宽的屏幕为mdpi（1倍图）</p>    <p>480px 宽的屏幕为hdpi（1.5倍图）</p>    <p>720px 宽的屏幕为xhdpi（2倍图）</p>    <p>1080px 宽的屏幕为xxhdpi（3倍图）</p>    <p>1440px 宽的屏幕为xxxhdpi（4倍图）</p>    <p><strong>Android设计中常见的尺寸与距离：</strong></p>    <ul>     <li>顶部状态栏高度：24dp</li>     <li>Appbar最小高度：56dp</li>     <li>底部导航栏高度：48dp</li>     <li>悬浮按钮尺寸：56x56dp/40x40dp</li>     <li>用户头像尺寸：64x64dp/40x40dp</li>     <li>小图标点击区域：48x48dp</li>     <li>侧边抽屉到屏幕右边的距离：56dp</li>     <li>卡片间距：8dp</li>     <li>分隔线上下留白：8dp</li>     <li>大多元素的留白距离：16dp</li>     <li>屏幕左右对齐基线：16dp</li>     <li>文字左侧对齐基线：72dp</li>    </ul>    <p><strong>栅格系统的最小单位是8dp， 一切距离、尺寸都应该是8dp的整数倍</strong></p>    <p><strong>所有可操作元素最小点击区域尺寸：48dp × 48dp；如实在满足不了可缩小视觉控件的大小，但是需要保留点击区域的大小</strong></p>    <p><strong>在iOS开发中的应用</strong></p>    <p><img src="https://simg.open-open.com/show/b7d87bffa0204a540fd43b4e0be1db89.jpg"></p>    <p>如上图所示，为方便开发，苹果将设备分为了@1x、@2x、@3x三大类。</p>    <p>除了状态栏高度无法改变，别的可以根据实际设计进行微调。<br> <strong>在@2x屏幕下，所有可操作元素最小点击区域尺寸为88px；如实在满足不了可缩小视觉控件的大小，但是需要保留点击区域的大小</strong></p>    <p>根据上表所示，我个人习惯用iPhone5作为设计原始稿尺寸，所有icon都用矢量的图形元素进行绘制，方便后续的放大缩小处理。之所以用iPhone5的尺寸，是因为，5和6同为@2x，如用6的尺寸来设计，容易使5的界面元素太过拥挤。 </p>    <p> </p>    <p><strong>参考资料：</strong></p>    <p><a href="/misc/goto?guid=4959724534135976025" rel="nofollow,noindex">http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html</a></p>    <p><a href="/misc/goto?guid=4959724534234748351" rel="nofollow,noindex">http://www.zcool.com.cn/article/ZNzEwMjg=.html</a></p>    <p><a href="/misc/goto?guid=4959724534314756702" rel="nofollow,noindex">https://material.google.com/layout/units-measurements.html#units-measurements-designing-layouts-for-dp</a></p>    <p><a href="/misc/goto?guid=4959724534420380137" rel="nofollow,noindex">https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/</a></p>    <p> </p>    <p> </p>    <p>来自：http://www.ui.cn/detail/187075.html</p>    <p> </p>