前段时间在工作中接到了一个需求：门店购物小票的设计，本来以为很简单的设计，最后却变成了一道数学题。
正常在设计印刷产品的时候，我们会用PS或AI去做，可以直接用物理单位：mm（毫米）、inch（英寸）、pt（点），模式可以选择CMYK。但是问题来了，开发告诉我他使用的前端设计器是以px为单位的，这样就需要找出px和各种物理长度之间的关系。转化为一个复杂的数学题，如下：
已知小票的宽度为80mm，打印机的分辨率为200dpi，小票的文字不小于8pt。求：设计稿的宽度和最小字号（单位为px）？
拿到问题我是一脸懵，对于那几个单位虽然经常听，但是说到关系，我一时也理不清。但是经过2小时的查阅资料，加上我有限的数学知识，还是解决了这个难题。下面是我的草稿:
红框内是结论，肯定大家都看不懂吧，因为5个月后的今天，我再看这个时，也完全看不懂自己写的东西。所以今天又花了半个多小时，来重新梳理了一下，终于又想通了。下面就跟大家仔细讲一遍，也防止我以后再忘记。
· px
像素，这是UI设计师最熟悉的单位。
它不是物理上的长度单位，是屏幕上显示数据的最基本的点，单个像素没有具体的尺寸概念。
相同尺寸的显示器下，像素越多，单个像素的尺寸就越小，屏幕越清晰；像素越少，单个像素的尺寸就越大，屏幕越模糊。
上图是华为Mate Xs的屏幕分辨率：
2480px*2200px，就是长由2480个像素点组成，宽由2200个像素点组成。
上图是华为Mate Xs拍摄照片的分辨率：
4000万=长度上像素点的总个数 * 宽度上像素点的总个数。
· dpi
分辨率，图像每英寸的像素点数，这个图像可以是屏幕的图像也可以是实际打印的图像。一般我们做UI设计用72dpi，打印高清晰度用300dpi。dpi是屏幕像素和实际物理尺寸间的桥梁。
· inch、mm、 pt
英寸和毫米都是物理单位，可以直接测量 。
· inch、pt、mm
同属物理单位，有规定好的换算比率 1inch = 72pt = 25.4mm
· inch、dpi、px
dpi是每英寸长度内的像素点数 px = inch * dpi
回顾一下问题：已知小票的宽度为80mm，打印机的分辨率为200dpi，小票的文字不小于8pt。求：设计稿的宽度和最小字号（单位为px）？
设计稿宽度：
先把小票的宽度换算为英寸 80mm/25.4= 3.15inch
设计稿的宽度=3.15inch* 200dpi≈ 630px
最小字号：
先把字号转换为英寸8pt/72=（1/9）inch
最小字号=（1/9）inch*200dpi≈ 22px
一步一步的分析，是不是很esay，以后大家遇到类似问题可以直接把数值套进来使用。
下面来看一下打印的成品：
网友评论