从数位板到Inkscape：零基础UI图标全流程

从数位板到 Inkscape：零基础画出第一套 UI 小组件

如果你刚拿到数位板，最容易掉进两个坑：一是还没把驱动和压感调顺，就怀疑自己不会画；二是一打开 Inkscape，看到满屏工具便想一次学完。

其实我们只需要完成一条很短的工作流：

1. 让 Windows 正确认出数位板；
2. 把笔尖、映射和压感调到舒服；
3. 在 Inkscape 中用基础形状搭出图标和卡片；
4. 保存可编辑的 SVG，再导出给程序使用的 SVG 或 PNG；
5. 把资源交给 Xcode，后续 Swift 编程只做简短衔接。

本文会用一个“晴间多云”图标和天气卡片贯穿全程。完成后的目标大致如下：

一、开始前准备什么

硬件与账号

• 一块 Wacom 数位板或数位屏；
• 原装或确认支持数据传输的 USB 线；
• Windows 管理员权限；
• 稳定网络，用于下载驱动与 Inkscape；
• 最好准备鼠标。驱动异常时，鼠标能帮助你继续操作。

先翻到设备背面或查看包装，本数位板型号为CTL-472。

软件

• Wacom Windows 驱动：Wacom 官方驱动页面
• Inkscape：Inkscape 中文官网

二、在 Windows 安装 Wacom 驱动

下载正确的 Windows 版本

打开 Wacom驱动页面，搜索CTL-472，下载其对应的驱动。若你使用常见的 Intel 或 AMD 电脑，选择 Windows x64；如果是搭载 Snapdragon 等处理器的 Windows on ARM 电脑，则确认页面明确支持 ARM64。

运行安装程序并重启

双击下载的安装程序，看到 Windows 用户账户控制提示后确认发布者，再选择“是”。按照向导完成安装。安装器若提示重启，请重启，不要跳过。

重启看似麻烦，但驱动需要加载系统服务。很多“光标能动、压感却没有”的问题，只是因为安装后没有重启。

打开 Wacom Center，确认设备在线

在开始菜单搜索 Wacom Center。正常情况下，左侧会出现你的设备，以及压感笔、快捷键、触摸或显示设置等入口。不同产品看到的项目不完全相同，这是正常的。

先完成三个检查：

1. 设备名称是否出现；
2. 笔尖悬停在板面上方时，屏幕光标是否移动；
3. Wacom Center 的“设置 / 一般设置”里是否有驱动或固件更新。

Wacom 官方说明中也强调：检查设备更新时，产品必须连接电脑。若有固件更新，保持线缆稳定，更新期间不要拔线。

设置屏幕映射

数位板通常采用“绝对定位”：板面左上角对应屏幕左上角，板面右下角对应屏幕右下角。它和鼠标不断累积位移的感觉不同，刚开始不习惯很正常。

如果你有两台显示器，建议先把数位板映射到你实际绘图的那一台。否则一块板要覆盖两块横向屏幕，手部的小动作会被放大，画圆尤其容易变扁。

建议初始设置：

• 映射到单个绘图显示器；
• 保持数位板与屏幕比例一致；
• 右手用户把快捷键区放左侧，左手用户反过来；
• 暂时不要给所有快捷键分配复杂命令。

设置笔尖与按键

新手可以用这套朴素配置：

• 笔尖：单击 / 绘制；
• 下方侧键：右键；
• 上方侧键：撤销 Ctrl + Z 或中键拖动画布；
• 橡皮擦端：若设备支持，再设置为橡皮擦。

先求稳定，再求效率。等你真正发现“某个操作每天要按一百次”，再把它放到快捷键上。

Wacom Center 的具体布局会因设备而异，但基本结构都是：左侧选设备和压感笔，中间调笔尖灵敏度，右侧或高级面板调双击间距、压力曲线及 Windows Ink。

用 3 分钟调好压感

进入压感笔设置，在测试区从轻到重画三到五条线。合适的状态不是“参数看起来专业”，而是：

• 轻轻落笔就能连续出线；
• 加重时线条能明显变粗；
• 不必用力戳板面就能达到较大压力；
• 抬笔后不会莫名拖出小尾巴。

如果你手比较轻，把笔尖灵敏度稍微调“柔和”；如果还没碰到板面就容易误触，或轻微动作反应过度，则稍微调“坚硬”。每次只改一点，然后重新画线。

Wacom 官方帮助特别提到：双击间距过大，可能在部分图形应用中造成下笔或拖动延迟。出现延迟时，先减小双击间距。Windows Ink 在 Windows 驱动中默认开启，第一次测试建议保持开启；只有明确遇到兼容性问题时才切换它，而且一次只改一个选项，改完后重启 Inkscape 再比较。关闭 Windows Ink 可能让某些软件失去压感，所以不要把“关闭它”当成通用答案。

安装阶段的快速排错

Wacom Center 找不到设备

• 换一个电脑自带的 USB 接口，先不要经过扩展坞；
• 换一条确认能传数据的线；
• 打开 Windows“设备管理器”，看连接设备时列表是否有变化；
• 重启电脑后再试；
• 仍无效时，按 Wacom 官方支持流程重新安装驱动。

光标会动，但没有压感

• 先在 Wacom Center 测试区确认是否有粗细变化；
• Wacom Center 有压感、Inkscape 没有，通常是应用内工具设置问题；
• 两边都没有压感，优先检查驱动、线缆和笔，不要先折腾 Inkscape。

三、安装并认识 Inkscape

下载 Windows 安装包

进入 Inkscape 官网的 Windows 下载页。普通 Intel / AMD 电脑选 64 位版本；Windows on ARM 设备选官方提供的 ARM 版本。零基础用户使用正常安装版即可，便携压缩包更适合知道自己为什么需要它的人。

安装时保留默认组件通常就够了。第一次启动后，如果界面不是中文，可以在 Edit（编辑） → Preferences（首选项） → Interface（界面） → Language（语言） 中选择简体中文，然后重启 Inkscape。菜单名称可能随翻译版本略有变化。

只认识六个区域

初次打开，界面像驾驶舱。暂时只看这六处：

1. 顶部菜单：保存、导出、对象和路径操作；
2. 左侧工具箱：选择、矩形、椭圆、钢笔、文字、节点；
3. 上方工具控制栏：当前工具的宽高、坐标、圆角等参数；
4. 中间白色页面：最终会被保存或导出的区域；
5. 底部色板：快速设置填充色和描边色；
6. 右侧停靠面板：填充与描边、对齐、图层、导出等。

几个最常用的快捷键：

快捷键不是考试内容。用到一次记一次即可。

先保存，再开始画

新建文档后立刻按 Ctrl + Shift + S，保存为 weather-card-master.svg。Inkscape 的 SVG 是可继续编辑的源文件，相当于设计稿母版。之后每完成一个小阶段就按 Ctrl + S。

不要只留下 PNG。PNG 像一张照片，导出后很难再改节点、圆角和颜色；SVG 才保留对象结构。

数位板在 Inkscape 里怎么测试

选择“书法 / Calligraphy”工具，在上方控制栏开启压力选项，然后画几条从轻到重的线。Inkscape 本身支持利用数位笔压力和倾斜控制书法工具等工具的宽度与角度。

但要注意：做 UI 图标时，绝大多数形状应该用圆、矩形、路径和布尔运算精确搭建，而不是用压感笔徒手描最终边缘。数位板在这里更像一只自然、精细的鼠标：用来画草图、拉节点和调曲线；最终几何结构仍交给矢量工具。

四、实战：画一个“晴间多云”图标

建立 64 × 64 像素页面

打开 文件 → 文档属性，把单位设为 px，页面宽和高都设为 64。这个 64 × 64 页面是练习画板；以后交付 SVG 时可以自由缩放，交付 PNG 时再按实际显示尺寸输出。

建议打开网格，或至少启用吸附到对象边界 / 节点。UI 图标很依赖对齐，但吸附过强也会妨碍微调。如果对象总被“吸走”，临时关闭吸附再移动。

 用圆和短线搭太阳

选择椭圆工具，按住 Ctrl 拖出正圆。设置暖黄色填充，取消描边。再画一条短的圆头竖线作为光芒：

1. 用钢笔工具点击起点和终点；
2. 在“填充与描边”里取消填充，设置与太阳相同的描边色；
3. 把描边端点设为圆头；
4. Ctrl + D 复制，再旋转得到上下左右和四条斜向光芒。

另一种更规整的方法，是使用细长圆角矩形做光芒，然后复制并旋转。对新手来说，两种都可以。

用重叠形状搭云朵

云朵可以由三个圆和一个圆角矩形组成：中间圆最大，两侧圆稍小，底部用圆角矩形托住。让这些形状稍微重叠。

全选云朵的几个形状，执行 路径 → 并集（常用快捷键为 Ctrl + +），它们会合并为一个路径。合并前最好先 Ctrl + D 备份一份并移到页面外，避免之后想改比例却没有原始形状。

矢量图形中，“开放路径”和“闭合路径”很重要：闭合路径能稳定填色，开放路径更像一根线。云朵应该是闭合路径。

用节点工具修轮廓

选中云朵，切换节点工具。拖动节点会改变位置，拖动节点两侧的控制柄会改变曲线弧度。第一次调节点时遵守一个原则：能少加节点，就不要多加。节点越多，曲线越容易出现小鼓包。

叠放、对齐并编组

把云朵放到太阳的右下方，让太阳露出一部分。选择太阳和云朵，打开 对象 → 对齐与分布，检查它们的视觉位置。几何居中不一定等于看起来居中，小图标最终要靠眼睛做一点光学校正。

确认后按 Ctrl + G 编组。编组不会把路径焊死，只是让多个对象作为整体移动。双击组或进入组内仍可编辑。

做小尺寸检查

把缩放调到 100%，再把图标临时缩到 24 × 24 附近观察：

• 太阳光芒是否糊成一团；
• 云朵的凹口是否太窄；
• 描边是否细到几乎消失；
• 图标四周留白是否均衡；
• 浅色背景和深色背景上是否都看得清。

UI 图标不是越细越高级。24 px 左右的小尺寸里，清楚比复杂重要。

五、把图标放进天气卡片

另存一个文件 weather-card-master.svg，把页面改成 320 × 180 px。

画卡片底板

用矩形工具画满页面，设置：

• X = 0，Y = 0；
• W = 320，H = 180；
• 圆角半径约 24–28 px；
• 取消描边。

按 G 使用渐变工具，从左上拖到右下，设置蓝紫到天蓝的渐变。渐变不要堆太多色标，两种颜色已经足够。

放入天气图标

在图标文件里复制整组，回到卡片文件原位粘贴，再缩放到合适大小。缩放时锁定宽高比例，避免太阳和云被压扁。

如果图标在深色背景上不够清晰，可以：

• 把云朵改为白色；
• 把太阳改为更亮的黄色；
• 去掉过细描边；
• 不要立刻加阴影，先靠颜色和尺寸建立层级。

添加设计稿文字

用文字工具添加城市、日期、温度和天气状态。设计稿中可以使用系统常见字体，比如微软雅黑或思源黑体。

不过准备给 SwiftUI 使用时，建议把“24°”“上海”等动态文字留给代码，而不是烘焙进图片。原因很实际：

• 代码文字支持深色模式、无障碍字号和本地化；
• 天气、日期和城市本来就是动态数据；
• 图片里的文字无法被屏幕阅读器正确读取；
• 修改文案不必重新导图。

因此最终交付通常是：一个天气图标 SVG，必要时再加一张纯装饰背景；文字、圆角卡片和布局由 SwiftUI 完成。

六、保存与导出：把设计稿变成开发资源

永远保留 SVG 母版

先保存 Inkscape SVG 源文件，例如：

design/
├─ source/
│  ├─ weather-icon-master.svg
│  └─ weather-card-master.svg
└─ export/
   ├─ weather-partly-cloudy.svg
   ├─ weather-partly-cloudy.png
   ├─ weather-partly-cloudy@2x.png
   └─ weather-partly-cloudy@3x.png

交付给开发者的 SVG 可使用 文件 → 另存副本，格式选择“纯 SVG / Plain SVG”。纯 SVG 会减少 Inkscape 专用元数据，更适合进入代码仓库。母版仍保留为 Inkscape SVG。

如果 SVG 含文字，而你确实要把文字作为图形交付，先复制一份，再执行 路径 → 对象转路径。转路径后文字不依赖字体，但也不能再像普通文本那样编辑。动态 UI 文案仍不建议这样做。

导出 PNG

按 Shift + Ctrl + E 打开导出面板。

导出区域常见四种选择：

• 页面 Page：严格按页面尺寸导出，最适合需要固定留白的 UI 图标；
• 绘图 Drawing：包住文档里的所有对象；
• 选择 Selection：只导出当前选中对象；
• 自定义 Custom：手动输入区域。

这次图标选择“页面”，这样四周留白不会丢失。然后设置图片宽度。若应用中希望图标占 24 pt：

• 1×：24 × 24 px；
• 2×：48 × 48 px；
• 3×：72 × 72 px。

文件名可用：

weather-partly-cloudy.png
weather-partly-cloudy@2x.png
weather-partly-cloudy@3x.png

透明背景还是白色背景

图标通常需要透明背景。Inkscape 导出 PNG 时，页面空白区域默认可能是透明的；这不是导出失败。

如果确实需要白底，打开文档属性，修改页面背景色，并把 Alpha / A 值设为完全不透明。注意：给页面“看起来是白色”和“导出为不透明白底”不是同一件事。

导出前的 30 秒检查

• 页面尺寸是否正确；
• 图标有没有越过页面边界；
• 四周留白是否一致；
• 背景是否按需求透明；
• SVG 中是否使用了不必要的模糊、复杂滤镜或外链图片；
• PNG 的 1× / 2× / 3× 尺寸是否正确；
• 文件名是否稳定、可读；
• 母版和导出文件是否分开放置。

七、常见问题

导出的图标被裁掉

通常是导出区域选成了“选择”或“绘图”，对象边缘又刚好贴住边界。UI 图标优先使用“页面”导出，并在页面内预留安全边距。

导出的 PNG 很糊

检查是否把 1× 图片放到了 2× 或 3× 屏幕位置。优先使用 SVG；必须使用 PNG 时，按实际显示尺寸提供对应倍率，不要在代码里把小图强行放大。

SVG 到 Xcode 后显示异常

先尝试：

1. 另存为 Plain SVG；
2. 把必须保留的文字转路径；
3. 减少滤镜、遮罩、复杂混合模式；
4. 确认 viewBox 与页面边界正确；
5. 仍不兼容时，改交单页矢量 PDF 或 PNG 多倍率资源。

数位笔在 Inkscape 里有延迟

先在 Wacom Center 测试。若 Wacom Center 正常，再逐项检查：

• 双击间距是否过大；
• Inkscape 是否打开了过重的滤镜或超复杂文件；
• 是否同时安装了会争夺输入设备的旧驱动；
• 切换 Windows Ink 前是否记录了原设置；
• 改完驱动选项后是否重启了 Inkscape。

不要同时改五个设置。一次改一个，才知道是哪一步有效。

八、交给 Swift / SwiftUI：到这里一笔带过

设计资源到这里已经完成。后续只需要把导出的 SVG 或 PNG 拖入 Xcode 的 Assets.xcassets，把资源命名为 weather-partly-cloudy，再在 SwiftUI 中加载：

Image("weather-partly-cloudy")
    .resizable()
    .scaledToFit()
    .frame(width: 24, height: 24)
    .accessibilityLabel("晴间多云")

Apple 从 Xcode 12 起支持 SVG 图像资源；在符合部署版本要求的系统上可保留矢量表示。实际项目仍应在目标设备和深色模式下检查显示。若图标需要跟随代码改变颜色，可在资源属性中考虑模板渲染，或制作适合模板渲染的单色图标。

天气卡片更建议用 SwiftUI 的圆角矩形、渐变和文字重建，只把天气图标作为资源：

HStack {
    VStack(alignment: .leading) {
        Text("上海 · 周六")
        Text("24°").font(.system(size: 48, weight: .bold))
        Text("晴间多云")
    }

    Spacer()

    Image("weather-partly-cloudy")
        .resizable()
        .scaledToFit()
        .frame(width: 72, height: 72)
}
.padding(24)
.background(
    LinearGradient(
        colors: [.indigo, .cyan],
        startPoint: .topLeading,
        endPoint: .bottomTrailing
    )
)
.clipShape(RoundedRectangle(cornerRadius: 28))

编程部分并非本文重点。只需要记住交接原则：图标交资源，动态文字交代码，布局和圆角尽量交 SwiftUI。

参考资料与图片来源

• Wacom：官方驱动下载
• Wacom：Wacom Center 使用说明
• Wacom：压感笔的高级设置
• Inkscape 中文官网
• Inkscape 1.4.4 发布信息
• Inkscape Beginners’ Guide
• Inkscape Beginners’ Guide：导出 PNG
• Inkscape 官方文档仓库
• Apple：Adding images to your Xcode project
• Apple：Xcode 12 Release Notes（SVG 图像资源支持）