1. 从学XD第一天起就必须拿下的两件工具做UI设计的这十来年我眼看着工具从PS、AI一路换到Sketch、Figma中间多少人反复横跳。但有一件事一直没变过不管是哪款设计软件只要你想正经画界面文本工具和钢笔工具一定是你最先要攻克的两个据点。拿Adobe XD来说很多人觉得它轻盈、上手快就忽略了底层功力的打磨。实际去做一轮完整的UI项目就会明白界面里密密麻麻的标题、正文、按钮文字全是文本工具在扛而那些有个性的图标、插画、背景形状、切割造型几乎都要靠钢笔工具一笔一画勾出来。这两个工具如果只是“会点一下、会打几个字”的水平做出来的界面基本只能停留在“能看”的阶段离“能用、耐看、好交付”还差着十万八千里。这篇内容我想把XD里的文本工具和钢笔工具彻底掰开揉碎从最基础的原理讲到实际项目里的调用方式包括哪些参数值得反复调、哪些习惯能省掉一半返工以及我这些年真金白银踩出来的坑。无论你是刚摸XD的新手还是想补齐基本功的进阶设计师这篇文章都值得你花十几分钟仔细过一遍。2. 为什么UI设计中的文字和矢量造型是绕不开的两条主线2.1 界面是“图文”的编排艺术抛开复杂的交互逻辑不谈屏幕上的每一个界面本质上都是在做两件事把信息用文字讲清楚把结构用图形搭起来。文字负责传达语义图形负责建立视觉秩序。文本工具管的是前者钢笔工具管的是后者——两者一合才是一张真正能交付给开发的界面稿。我见过不少新手把精力全花在配色和特效上结果做出来的界面字体忽大忽小、按键形状歪歪扭扭看起来像临时拼凑的草稿。相反老练的设计师往往先从文本层级和关键图形轮廓入手标题用什么字号、正文用什么行距、图标是圆角还是直角、卡片要不要切掉一个角——这些定下来界面的骨架就不会塌。而这个“定下来”的过程靠的就是你对文本工具和钢笔工具的掌控力。2.2 XD里这两个工具的定位和分工Adobe XD的设计理念是“轻量、专注”所以它的工具集不像PS那样庞大但效率极高。文本工具支持直接点击输入和框选区域文本两种模式配合右侧属性面板里的字体、字号、行距、字距、对齐等参数可以快速搭出完整的文字层级。钢笔工具则承担了所有自定义矢量形态的绘制支持贝塞尔曲线的完整控制锚点、路径、布尔运算一应俱全画图标、做插画、裁切图片都不在话下。这两个工具在XD里并不是孤立存在的。文本可以转成矢量路径钢笔路径可以作为文本的排列边界甚至能用文本填充路径区域做出动态感十足的排版效果。理解它们之间的协作关系比单独背一堆快捷键重要得多。3. 文本工具从打字到排版的全链路控制3.1 两种文本模式的取舍在XD里创建文本有两种方式很多人用了一两年都没搞清区别导致后期排版频频翻车。第一种是点选输入。用文本工具在画布上单击一下直接输入文字这时候文本框会随着内容自动撑宽适合写标题、按钮、标签这类单行短文本。第二种是框选输入。按住鼠标左键拉出一个矩形区域再输入文字文字会在区域内自动换行适合正文、段落说明这类多行内容。选哪种模式不是随心情来的我看过一个很典型的返工案例同事做App介绍页时所有正文都用点选输入结果后来文案改长了一行排版整体错位他只能手动敲回车一根根断行来回折腾了一个多小时。正确做法是凡是可能出现换行的内容创建时就选择框选输入给文本划定一个明确的容器后续调整宽度时文字会自动重排省心得多。3.2 字体选择与排版参数的实战调法文本工具真正考验功力的地方在于字体和排版参数的微调。XD的右侧属性面板里和文字直接相关的主要有这么几项字体族、字号、行高、字距、段落间距、对齐方式。字体族界面中文案选字体时一屏里建议不超过两种字体族。标题用一款有力量感的字正文用一款阅读舒适的字需要强调的部分用字重或颜色区分而不是靠频繁换字体来制造层次。字号建议建立一套基础的字体阶梯比如大标题32号、中标题20号、正文16号、辅助说明12号。这套阶梯可以根据具体项目等比缩放但比例关系要保持稳定。行高正文行高一般是字号的1.5到1.8倍短标题可以压缩到1.2倍左右。文字密集的界面如果行高太小用户阅读起来会非常吃力。字距大号标题适当加一点字距会显得更大气正文则保持默认或微调即可。中文字体加字距时尤其要克制加过头会显得松散。3.3 文本工具的高级技巧动态组件与可变文本除了基础排版XD的文本工具还有一个容易被忽略的杀手级特性——组件状态里的文本替换。如果做一套按钮组件不同状态下默认、悬停、按下、禁用可能文字颜色不一样甚至文字内容不同。利用组件状态功能可以给同一个按钮组件创建多个状态然后逐个修改文本内容和颜色之后拖到画布上切换状态就能预览效果比复制粘贴做十几个按钮再手动对齐可控得多。另外在制作列表页或卡片模板时可以把文本绑定到组件的数据源上实现批量替换。比如做联系人列表制作一个联系人卡片组件然后在画布里用重复网格填充数据文本会自动跟随数据源变化。这样一来100个联系人只需要做一张卡片其余全部自动生成不仅效率提升修改时也只需要动组件模板。3.4 把文字玩出花文本转路径和排版变形文本工具和钢笔工具横向协同的一个典型场景就是文本转路径。选中一段文字后通过“对象”菜单里的“转换为路径”操作文字就变成了由锚点和路径构成的矢量图形。这时候你可以像编辑钢笔路径一样单独拖动某一个锚点把文字拉长、压扁、变形做出各种标准字体渲染做不到的造型。这个技巧特别适合做Logo字标、海报标题、活动主视觉。我之前帮某工作室设计一个音乐节视觉时直接把“LIVE”几个字母转成路径然后用钢笔工具把“L”的收笔处拉出一个小尾巴整体气质立刻不一样了。要提醒的是转成路径后文字不再是文本对象没法再改内容、改字体了所以操作前一定要复制一份备份这是很多新手容易忽略的关键一步。4. 钢笔工具从锚点原理到图标绘制的完整路径4.1 理解钢笔工具背后的贝塞尔曲线逻辑很多人在钢笔工具上受挫不是因为手不听使唤而是没理解路径生成的基本逻辑。钢笔工具画出来的每一段线背后都由锚点和方向控制柄决定。锚点决定线段端点位置控制柄决定线段进入和离开锚点时的曲率方向。可以把路径理解为一根柔软的金属丝锚点是固定金属丝的图钉控制柄则是你拉着金属丝使它弯曲的力。拉出来的控制柄越长弯曲越明显方向不同弯曲走向也不同。理解这套逻辑之后你再画曲线时心里就有数了想画一个饱满的圆弧控制柄要拉得大致垂直且等长想让曲线突然收尖就让一侧控制柄长度归零。在XD里绘制直线段时直接在目标位置单击即可锚点之间会以直线相连。绘制曲线段时在画布上按下鼠标后不要松开而是继续拖拽拉出一段控制柄再松开就能形成平滑曲线。混合使用这两种方式你就能在同一路径里兼顾直线和弧线画出完整的图形。4.2 锚点编辑与路径修正的核心操作画完的路径很少能一次到位锚点的编辑能力才是钢笔工具的真正分水岭。XD的钢笔工具组里提供了添加锚点、删除锚点和转换锚点三个核心功能配合直接选择工具使用可以精细调整任何一条已绘制的路径。添加锚点在已有路径段上点击可以插入一个新的锚点然后拖动它来改变局部形状。删除锚点点击已有锚点将其移除路径会重新连接相邻锚点。转换锚点把角点转成曲线点或反过来把曲线点转成角点。这个操作决定了锚点两侧是直线还是曲线以及是否有控制柄可控。直接选择工具在路径上点击后可以选中单个锚点拖动锚点本身或它的控制柄来精细调形。实际绘制图标时我的习惯是先画一个粗略的轮廓再逐步调整每个锚点的位置和曲率而不是追求一笔画准。比如画一个圆角心形我通常先用钢笔把五个关键锚点顶部两个波峰、两侧两个点、底部一个尖角点出来然后再用转换锚点和控制柄把它们一根根磨圆润。这样画出来的图形比直接拖拽生成的形状干净得多。4.3 结合布尔运算快速生成复杂形状钢笔工具并不是只能用来画“自由曲线”它和布尔运算联合使用是快速生成复杂图形的利器。Adobe XD的形状工具菜单里提供合并、减去、相交、排除重叠等布尔操作你可以先用钢笔画出基础轮廓再叠加几个矩形、圆形通过布尔运算裁减出最终形态。举个实际例子做文件下载图标时不需要用钢笔一笔一画描出一个完整的下载箭头。先画一个矩形作为文件主体再用钢笔画出向下的箭头路径两者叠加后执行合并运算一个标准的下箭头文件图标就完成了。后续想换颜色直接改填充属性就能全部生效比逐个路径描边高效得多。4.4 利用网格和辅助线让钢笔绘制更精准UI设计中的矢量图形特别是图标对精确度的要求是比较高的。看起来差不多的圆角差两个像素在视觉上就会有明显区别。借助XD的网格、布局和辅助线可以让钢笔绘制的每个锚点都能“落地”。我通常的做法是先设置好画布的网格间距比如8像素网格然后拖动锚点时开启智能参考线。锚点靠近其他图形的边缘、中心或等距位置时XD会出现红色的参考线提示此时松手锚点就精准吸附到了对应位置。这种基于网格和参考线的绘制方式比单纯靠肉眼对齐要可靠很多尤其是绘制多套尺寸图标时位置偏差会被成倍缩小。5. 文本加钢笔UI实战场景中的高频配合套路5.1 配合场景一图标配文字搭建功能入口在UI界面里绝大多数的功能入口都是“图标文字”的组合。这种组合看着简单实际做起来有很多细节。先用钢笔工具画出图标再右键选择“创建组件”把图标封装成可复用的组件旁边用文本工具输入功能名称再使用对齐功能让两者水平居中对齐。这里有个容易被忽略的点图标和文字的对齐不仅是“视觉居中”更要考虑两者组合后的视觉重心。比如一个正方形图标和一个汉字组合如果严格按照水平中线的像素对齐人眼会看起来图标偏高此时应该微调几个像素让图标略向下沉一点整体视觉才平衡。这个几像素的偏移是设计师经验和直觉的体现也是做UI看着“专业”和“业余”的差别所在。5.2 配合场景二自定义卡片和标签中的图文混排设计卡片、标签、勋章这类带体验感的小组件时文本和钢笔的配合几乎是无处不在的。比如做一张会员卡片先用钢笔或形状工具画出卡片的圆角矩形轮廓再叠加一个用钢笔绘制的装饰性弧线背景然后用文本工具输入会员等级、编号和权益说明。关键是排版时文字信息需要和背后的矢量造型保持视觉上的主次关系背景轮廓主要承担视觉氛围文字信息才是一眼要被读取的重点。做标签时也常用类似思路。比如“推荐”“新品”这类角标大多是先用钢笔绘制一个小色块作为标签底再将文字置于其上。这时候文本工具创建的文本对象尺寸要能够和矢量底板的边距保持相对稳定建议将文本和底板同时选中后使用对齐面板设置左右留白一致避免出现文字贴边或偏心的尴尬。5.3 配合场景三快速产出可交付的切图标注文本和钢笔在交付阶段的配合同样重要。做设计交付时免不了要给开发标注尺寸、说明交互状态。传统的做法是在设计稿旁边另开一块区域用文本写下说明再用钢笔加几条引线、拖几个箭头指向具体位置。XD里可以利用“墨稿”的模式直接完成这件事用钢笔工具画一条带箭头的路径作为标注引线再用文本工具在旁边写下参数说明可以组合成一个标注组件后续反复使用。这种组件一旦建好后续新页面需要标注时直接拖出来改文字就行不再需要重新画箭头和对齐位置。尤其碰到连续十几个界面都要出标注的时候这个小习惯能省下接近三分之一的工作量。6. 实操过程演示用15分钟完成一套小图标和文案排版6.1 建画布与基本准备下面我把一个典型的实操流程拆给大家看。先打开Adobe XD新建一个1920x1080的画板背景色设为浅灰方便观察白色和深色图形的对比。在顶部菜单关闭“画板网格”打开“网格”中的8像素网格这样绘制时所有锚点都有吸附基础。然后快捷键调出文本工具在画布左上角输入“功能入口”四个字字体选思源黑体或苹方这类中文字体字号调为36号字色设为深灰。这一个动作同时奠定了标题的视觉基调和字号基准。6.2 用钢笔绘制一套四枚工具图标接下来开始画图标。假设这套入口图标分别是“设置”“收藏”“搜索”“下载”形状各不相同正好可以练练钢笔的多种操作。设置图标常用“齿轮”造型。我采用简化思路先用钢笔点出齿轮外圈的大致多边形六到八个折角再用转换锚点工具把每个折角修成圆角中间画一个圆孔最后把两层路径执行减去运算齿轮雏形就有了调整锚点控制柄后圆润程度会很自然。收藏图标心形是钢笔初学者的经典练习。五个关键锚点定位后逐个拉出两侧控制柄并调整方向心形的饱满度完全由控制柄长度决定建议头部两个弧线的控制柄长度保持一致这样心形不会歪。搜索图标画一个圆环再加一个斜向的短柄。圆形可以直接用钢笔的曲线路径也可以叠加椭圆形状后用减去运算做出圆环短柄用直线路径画出来就行。下载图标矩形加向上的箭头符号按前文说的方法组合。四个图标画好后统一设置描边为2像素填充色改为白色排列成一行间距保持24像素。这里需要一个规范所有图标的尺寸统一在48x48的边界框内这样视觉大小才会趋于均衡。6.3 添加文字标签并完成排版图标排好之后用文本工具在每个图标正下方输入功能名称。文字建议采用点选输入模式字号14号颜色灰色与图标垂直间距设为8像素。逐个输入完成后全选单行文字使用对齐面板里的“水平居中”对齐让它们相对于各自的图标居中。这一步里有一个容易犯的错误文字标签必须和对应图标单独成组后做居中而不是把所有图标和所有文字分别群组再统一居中。分开成组能确保每一组内部是独立的后续调整单个入口名称时不会破坏整体的排列关系。6.4 以组件方式沉淀复用最后一步很关键为这套图标和文字创建组件。选中一个图标和对应文字右键选择“创建组件”命名时采用规范格式比如“入口图标/设置”。创建好组件后将它拖到画板四角复用当设计稿扩展到多页面时需要调整样式只需要编辑组件原型所有页面中的实例都会同步更新。这是文本与钢笔工作流沉淀为资产的核心步骤也是做UI从“一次做好”升级为“长期高效”的关键所在。7. 常见问题与坑点速查这些坑我都替你踩过了7.1 文本的换行和间距失控点选输入的文本在有内容更新时往往会产生意外的换行错乱。这是很多刚用XD的人最容易遇到的问题因为点选输入的文本框宽度是固定的文字超出宽度后并不会自动延伸换行不受控制。解决办法是双击文本对象观察顶部是否出现蓝色的边界框如果有将其拉宽即可如果是框选输入的段落文本则直接调整文本框宽度文字会重排。行距按钮失灵的情况也出现过多次。选中文本后调节“行距”数值没有反应排查后发现是文本对象在组件内部修改发生在覆盖层时需要进入组件编辑模式才能调整基础行距值。这个机制初看复杂但理解了组件状态与父组件样式的关系后其实很好掌控。7.2 钢笔绘制时锚点乱跑或曲线不符合预期画曲线时很多新人被“控制柄长短变化影响曲线形状”这一点坑得够呛。鼠标拖出控制柄时如果控制柄拖得太长曲线拱起就会过大太短弯曲程度又不足。更麻烦的是控制柄的方向决定曲线进入锚点的切线方向方向拉偏了曲线必然走形。如果你画着画着发现曲线总是不听话我的建议是先把控制柄全部拖出来不要急着松开鼠标眼睛盯着路径预览当预览弧度符合预期时再松手。如果已经画错用直接选择工具选中锚点单独调整它的控制柄进行修复。这比重新画一整条路径要快得多。另外画完一段曲线后继续画下一段时如果上一段控制柄还拖在锚点外侧下一段曲线的起点方向会延续上一段的切线方向导致转折生硬。这时候在锚点上双击一次把多余的控制柄“折断”再往新方向拖拽曲线就会按预期拐弯。7.3 文本转路径后无法再编辑原始内容这是我觉得最重要的一条避坑提醒。前文提过文字转路径是将文字对象变成不可编辑的矢量轮廓一旦执行你没法再用文本工具修改其中的文字内容、字体、字号。如果在转路径之后发现文案有错别字对不起只能重新输入再转一次。所以我的习惯是任何需要转路径做变形的文字在做操作之前先在画布角落复制一份原始文本对象隐藏到图层最底层作为备份。如果最终方案里还需要修改文字直接改备份然后用插件或脚本自动替换路径文本效率提升明显。7.4 使用钢笔工具的辅助键与快捷键汇总下面是使用过程中我认为值得抽空背下来的快捷键清单功能快捷键选择工具V直接选择工具A钢笔工具P文本工具T矩形工具R椭圆工具E画板工具A放大画布空格 Ctrl 点击缩小画布空格 Ctrl Alt 点击我个人的建议是不要一次性背完遇到操作卡壳时回头看一眼多用几次自然就形成了肌肉记忆。8. 工具的边界和审美文本与钢笔之外别忘回头打磨基础Adobe XD的文本工具和钢笔工具有多强其实取决于使用者对排版和造型的理解有多深。工具只是替你把脑海中的构思落到画布上如果你对字距、行高、曲线节奏这些审美概念没有感觉再熟练的快捷键也拼不出一张高级的界面。我在实际带新人的过程中发现很多同学在工具操作上完全没问题反而是在两个点上卡住一是字体的气质是否匹配界面调性拿不准选择了不合适的字体让整体显得廉价二是图形比例和负空间控制不好画出来的图标要么太大太满、要么太小太孤立。多花时间去看好的设计作品拿钢笔工具照着临摹几组成熟的图标再用文本工具把那些优秀界面的文字层级复盘一遍配合工具规范的训练基本功一定会比单纯跟着教程走扎实得多。文本和钢笔这两件工具是Adobe XD里最基础却最长效的武器值得你花足够多的时间掌握它们。如果你看完这篇分享准备上手试一试那不妨从今天开始把过去随手用矩形拼的那些图标换成钢笔一笔一画地勾一次。画完你可能会发现原来自己离进阶设计师之间的距离并没有想象中那么远。
