摘要：当你的设计需要运行在工业显示屏、特殊 TFT 模块或非标准嵌入式设备上时，像素可能不再是正方形。忽略这一点，会导致圆形变椭圆、布局错位、反复返工。本文将结合真实 TFT 规格书，手把手教你如何在 Photoshop 中设置自定义像素长宽比，真正实现"所见即所得"。
📌 前言
在绝大多数 UI 设计场景中，我们都默认像素是完美的正方形。然而，当你面对工业控制屏、车载异形屏、特殊分辨率的 TFT 模块，甚至某些老式视频标准时，可能会遇到一个棘手的问题：像素本身是长方形的。
如果你仍然按照方形像素去设计，最终在目标屏幕上会出现一系列令人头痛的问题：
-
几何图形失真：你精心绘制的正圆，会变成椭圆；正方形的按钮被拉长成矩形。
-
界面布局错位：文字与图标的相对位置发生偏移，甚至超出屏幕显示区域。
-
物理尺寸偏差：根据设计图打样的外壳或结构件，装配时发现按键位置对不上、视窗区域与显示内容不符。
-
反复修改返工：无法在电脑上准确预览最终效果，只能反复烧录到设备上测试，效率极低。
本文将以一份真实的 7 英寸 TFT 模块规格书为例，详细讲解如何在 Photoshop 中设置非正方形像素，确保设计效果与实际显示完全一致。读完这篇文章，你将彻底告别"凭感觉调、反复试错"的困境。
一、为什么像素不一定是正方形？
1.1 像素间距（Pixel Pitch）的概念
在液晶显示屏（LCD）的规格书中，通常会标注 "像素间距"（Pixel Pitch） ，即每个像素在水平和垂直方向上的物理尺寸。例如某款 7 英寸 TFT 模块数据手册如下图，红框是像素尺寸，不难看出像素是长方形的。
TFT 模块的参数如下：
| 项目 | 数值 |
|---|---|
| 分辨率 | 800 × 480 像素 |
| 活动区域（AA区） | 154.08 mm × 85.92 mm |
| 水平像素间距 | 0.1926 mm |
| 垂直像素间距 | 0.1790 mm |
通过计算可以得到：
-
水平像素密度 = 800 / (154.08 / 25.4) ≈ 132 PPI
-
垂直像素密度 = 480 / (85.92 / 25.4) ≈ 142 PPI
关键结论 ：水平和垂直的 PPI 不同，意味着每个像素不是正方形，而是长方形。
像素宽高比（PAR）= 0.1926 / 0.1790 ≈ 1.076 : 1 （宽度 > 高度）。
1.2 长方形像素的典型应用场景
长方形像素并非缺陷，而是出于以下现实需求的工程设计：
-
工业控制屏：在特定分辨率下实现特定的显示比例，或适应驱动 IC 的限制。
-
车载显示：某些异形屏幕或特殊视角要求的屏幕。
-
早期视频标准：如 NTSC（720×486）的像素宽高比为 0.91:1（方形像素模拟）。
-
成本与性能平衡：在某些分辨率下，使用长方形像素可以降低驱动芯片的复杂度。
因此，作为一名负责任的设计师或工程师，理解并正确处理像素宽高比，是保证设计落地的必备技能。
二、Photoshop 中的像素长宽比核心概念
2.1 什么是"像素长宽比"？
在 Photoshop 中，"像素长宽比"（Pixel Aspect Ratio）定义了单个像素的形状。默认情况下，Photoshop 使用 "方形像素"（1.0:1.0），即像素的宽度等于高度。
当你的目标屏幕使用非正方形像素时，你必须告诉 Photoshop 这个比例。否则：
-
你画的一个 100×100 像素 的正圆，在物理屏幕上会被拉伸成一个椭圆（如果像素宽 > 高，则横向拉长）。
-
UI 元素的边框、图标、文字间距都会出现不可预知的变形。
2.2 计算目标像素宽高比（PAR）
像素宽高比（PAR）的计算公式非常简单：
PAR=水平像素间距垂直像素间距PAR=垂直像素间距水平像素间距
或者通过活动区域计算：
PAR=活动区域宽度/水平分辨率活动区域高度/垂直分辨率PAR=活动区域高度/垂直分辨率活动区域宽度/水平分辨率
以上述 TFT 为例：
PAR=154.08/80085.92/480=0.19260.1790≈1.076PAR=85.92/480154.08/800=0.17900.1926≈1.076
注意：PAR > 1 表示像素横向被拉长（宽 > 高）；PAR < 1 则表示像素纵向被拉长（高 > 宽）。
三、操作步骤：在 Photoshop 中设置非正方形像素
这是最规范、最不容易出错的方法。适合从头开始设计。
3.1：建立像素长宽比
打开任意已存在的.psd文件，视图->像素长宽比->自定像素长宽比
输入因子，如前述所示屏的因子为0.1926/0.1790=1.076
3.2：以屏的参数建立文档
-
打开 Photoshop，点击 文件 → 新建 （快捷键
Ctrl+N/Cmd+N）。 -
在"新建文档"窗口中，输入：
-
宽度 ：
800像素 -
高度 ：
480像素 -
分辨率 ：
134像素/英寸（可选，用于物理尺寸预览，不影响像素形状）
-
-
点击 "高级" 展开高级选项。
-
找到 "像素长宽比" 下拉菜单，选择 "自定义..."。
-
在弹出的对话框中：
-
名称 ：输入一个便于识别的名称，如
TFT 7寸 1.076 -
因子 ：输入
1.076（这是水平方向相对于垂直方向的比例） -
点击 "确定"。
-
-
返回新建文档窗口，此时"像素长宽比"已变为你自定义的名称。
-
点击 "创建" 完成文档建立。
💡 小提示：分辨率（PPI）的数值在这个场景下主要用于计算物理尺寸预览（例如"图像大小"中显示的厘米/英寸），不影响像素长宽比。你可以忽略它，或输入一个与你工作流匹配的值。
此时会弹出如下提示
3.3：设计UI、输出图片
进入psd文档后，保持勾选像素长宽比校正选项，此时电脑上显示的就是放入嵌入式设备后的显示效果。
-
植入嵌入式设备的图片导出： 按正常导出或保存即可，不用在做其它处理，就能保证图像不变形和失真。
-
评审等用途的效果图导出：使用截图软件直接截屏。
四、验证与实战技巧
4.1 如何验证设置是否正确？
一个简单的验证方法：在 Photoshop 中绘制一个 正圆 （使用椭圆工具，按住 Shift 键绘制）。然后：
-
如果像素长宽比设置为 方形像素（1.0），圆形在屏幕上看起来是正圆。
-
如果设置为 1.076 ，圆形在屏幕上看起来会被水平拉长（因为像素本身是宽的，但 PS 为了让你看到最终物理效果，会压缩显示）。
正确的预期 ：当你开启了 1.076 的自定义比例后，你在画布上看到的"正圆"实际上在方形像素屏幕上应该是扁的，但它在目标物理屏幕上会是正圆。这听起来有点反直觉，但记住：你看到的是模拟物理效果，而不是原始像素形状。
4.2 实战建议
| 阶段 | 建议操作 |
|---|---|
| 设计阶段 | 始终开启正确的像素长宽比预览，确保所有图形、文字、间距在视觉上符合预期。 |
| 切图与导出 | 导出时仍按原始像素尺寸（800×480）导出，不需要对图片做任何拉伸处理。 |
| 与开发对接 | 在标注中明确注明"目标屏幕像素宽高比为 1.076:1"，避免开发人员误拉伸。 |
| 固件/驱动侧 | 嵌入式工程师根据屏幕规格书配置显示控制器的时序参数，无需修改你的设计图。 |
4.3 常见误区
-
❌ 误区1 ：以为修改像素长宽比会改变图片的像素数据。
✅ 真相：它只改变 PS 的显示方式，不影响实际像素。
-
❌ 误区2 ：导出图片前手动拉伸图片来"补偿"变形。
✅ 真相：千万不要这样做！目标设备会自己处理物理像素形状，你手动拉伸反而会造成二次变形。
-
❌ 误区3 ：所有非正方形屏幕的 PAR 都大于 1。
✅ 真相：某些屏幕（例如竖向放置的条形屏）可能 PAR < 1，计算方法完全相同。
五、进阶：从规格书到自定义预设的完整流程
为了让你的工作流更加专业和高效，建议建立一个 "屏幕预设库"。步骤如下：
-
收集规格书数据：记录分辨率、活动区域宽/高（或直接记录水平/垂直像素间距）。
-
计算 PAR ：使用公式
PAR = (AA宽/水平分辨率) / (AA高/垂直分辨率)。 -
在 PS 中创建自定义像素长宽比 ：按照上述方法保存，命名规则建议为
分辨率_宽高比_用途，例如800x480_PAR1.076_TFT7inch。 -
测试验证：绘制一个正圆和一个正方形，与目标设备实拍照片对比，确认无误后即可用于团队共享。
此外，如果你的团队同时使用 Sketch、Figma 或 Adobe XD，这些工具也支持类似的自定义像素长宽比预览功能（通常需要插件或手动设置画板缩放），原理相同。
六、总结
处理非正方形像素的核心要点可以归纳为以下三句话：
一算 ：根据屏幕规格书计算像素宽高比（PAR）。
二设 ：在 Photoshop 中创建并启用自定义像素长宽比。
三验证：通过绘制正圆对比物理屏幕效果，确保准确无误。
掌握这个技能，你将不再被"为什么我的设计上设备就变形"所困扰，也能在与硬件工程师、结构工程师协作时展现出更高的专业度。工业设计、嵌入式 UI、特殊显示领域的项目，往往就因为这些细节的差异而决定成败。