先说明一下,这篇内容是结合我自己几年的Axure实际使用经验写的,不是软件说明书式的罗列。钢笔工具在Axure里属于那种“人人知道有,但很少认真用”的功能,很多人做了两三年原型都没碰过它,总觉得画图标、画形状应该去Sketch或者Illustrator里搞定。但真到了做高保真原型、做大屏驾驶舱、做自定义控件的时候,会发现在Axure里直接用钢笔反而最省事,不用来回切软件。这篇就把钢笔工具从原理到实操完整过一遍,结合我做过的几个项目场景来聊。
1. 为什么原型工具里要有一支“钢笔”:贝塞尔曲线的底层逻辑
先说个反直觉的事:我见过不少产品经理用Axure画图,遇到不规则形状的第一反应是去网上找图标素材,或者去AI里画完再导图。但实际做高保真原型时,这种“外部导入”的路径有一个致命弱点——图片素材在Axure里没法响应式缩放、没法变色、没法做交互态切换。你导一张仪表盘指针的PNG进来,想让它转15度就得重新去AI里改;但如果你用钢笔在Axure里画的矢量路径,鼠标拖一拖,旋转、变色、加交互全都很方便。这就是钢笔工具最大的价值:它让你在原型工具内部就拥有“实时可编辑的矢量图形能力”。
很多新手一听到“贝塞尔曲线”就头大,觉得这是设计师才需要搞懂的数学概念。其实用生活里的例子特别好理解:你可以把贝塞尔曲线想象成一根有弹性的金属丝,锚点就是固定金属丝的钉子,控制柄就是你在金属丝上某处用力拉扯后形成的弯曲方向。你拉控制柄越长,曲线越顺着这个方向“冲出去”再弯回来;控制柄越短,曲线越像被按住了一样贴着锚点。钢笔工具只是用一种可视化的方式,让你通过“放钉子、调拉扯方向和力度”来精确控制曲线形状。
在Axure里,钢笔工具位于顶部工具栏左侧,长得像一支传统钢笔尖的图标,快捷键是P。点开下拉菜单还会看到“转换锚点”这个兄弟工具,后面会专门讲。它的核心使用逻辑就三条:
单击在画布上落一个直角锚点,连续单击可以画直线段;按住左键拖拽落一个曲线锚点,拖拽方向决定曲线进入这个锚点的切线方向;指针移回起点路径上出现小圆点后单击,路径闭合,可以填充颜色。
这三条规则,和Photoshop、Illustrator、Figma里钢笔工具的逻辑完全一致。所以一旦在Axure里练会了,以后切到其他设计工具都不会有太大学习成本,反过来也一样。我个人特别建议新手哪怕不做复杂图形,也先用钢笔徒手画几个简单的图形找手感——比如一个云朵、一个信封、一个箭头。钢笔工具最大的门槛不是“理解锚点”,而是“手感”——你的手需要建立起鼠标或触控板上控制柄拖拽幅度和最终曲线形状之间的对应感,这个只有靠动手练。
2. 从直线到曲线:Axure钢笔工具的完整拆解
2.1 基础绘制:确认画布与网格的配合
打开Axure RP9(9和10的操作基本一样),新建页面后先别急着画,建议先确认一下画布左下角视图缩放到100%,顶部“布局”菜单里把“标尺”和“网格”打开。钢笔工具在一些需要精确对位的时候,网格和辅助线特别重要,比如画对称的图标。如果画布上没显示网格,点顶部菜单的“布局 → 网格 → 显示网格”,快捷键是Ctrl+Shift+4。网格间距默认是10像素,足够日常用了。
2.2 直线路径的绘制技巧
在工具栏选中钢笔工具后,直接在画布上单击一个点,移动鼠标再单击第二个点,两点之间就是一条直线段。连续单击可以画出折线。这里有个细节:按住Shift键再单击,可以锁定水平、垂直或45度角的方向,这个快捷键在画图标底边、对称结构时非常有用。
画到最后一个点时,如果想把路径闭合,把鼠标移回起点,钢笔光标旁边会出现一个小圆圈,此时单击就闭合路径了,闭合后形状自动带填充色和描边色。如果不需要闭合,按一下Esc键或者双击鼠标,就能结束当前路径。
我第一次用的时候犯过一个很蠢的错:画完一个多边形,想画第二个,结果发现接着上一个路径继续画了。后来才明白,Axure默认结束一条路径后会自动进入“待绘制下一条”的状态,但其实你按完Esc之后,如果不小心点在画布上,它会认为是新路径的起点,不会连到旧路径上。如果遇到“一直连在一起”的情况,检查一下是不是没按Esc就切换了工具,再把工具切换一下就能断开。
2.3 曲线路径:理解控制柄的拖拽方向
画曲线时,拖拽而不是单击。在起点上按住左键不放,向某个方向拖拽一小段,松开。这时你落下的不是一个点,而是一个带“拉杆”的锚点,拉杆就是控制柄。再移到第二个位置,同样按住拖拽,这时Axure就会根据两侧控制柄的方向和长度,生成一段平滑的曲线连接两个锚点。
这里有一个新手最容易绕晕的点:控制柄拖拽的方向,决定的是曲线的“进入方向”,而不是“去向”。比如你从左侧起点向右上方拖控制柄,曲线进入这个锚点时的方向就是从左下方来、朝右上方去。控制柄越长,曲线越早开始转向、弧度越大;控制柄越短,曲线越贴着锚点,弧度越小。
我用一个实际例子解释。想画一个类似苹果Logo那样的叶子形状(椭圆形尖角叶片):
- 第一个锚点(叶子的底部尖点):按住鼠标向左上方拖拽控制柄,长度大约画布网格的4格;
- 第二个锚点(叶子的顶部尖点):移动到斜上方位置,按住鼠标向右下方拖拽控制柄,长度和刚才差不多;
- 把鼠标移回起点,单击闭合。
你会发现闭合后是一个相当饱满的叶片形,左右两侧都是平滑弧线。这就是两个曲线锚点,各自带一对控制柄相互作用的结果。
2.4 锚点编辑:转换锚点、圆角、直角
光会画还不够,形状画完基本都要微调。Axure的钢笔工具按钮旁边下拉菜单里还有几个锚点编辑相关的工具:
- 转换锚点(快捷键也是P,选中钢笔工具后按下拉选转换锚点):这是最常用的。它能切换锚点的类型——把曲线锚点(带两侧拉杆)变成直角锚点(没有拉杆),或者点击曲线锚点并拖拽重新拉出控制柄。操作方式是:选中转换锚点工具,
单击一个曲线锚点,它就变成直角锚点,两侧拉杆消失;如果是直角锚点,按住拖拽,就能拉出拉杆变成曲线锚点。 - 直接选择工具(黑色箭头,快捷键A):用来选中单个锚点、拖动位置、调整锚点两侧的控制柄端点,也可以直接拖动路径上的线段来微调曲线弧度。
我用一个场景来说明这些工具的配合:画一个带圆角的矩形,钢笔点四个角,然后用转换锚点工具分别点住每个角向外拖拽,就能拉出圆角,比用矩形工具放一个固定圆角半径更自由——四个角可以圆润程度完全不同。这在画真实感原型(比如手机通知卡片、圆角不规则按钮)时特别实用。
2.5 钢笔画的路径和普通形状有什么不同
很多人画完钢笔路径后发现,选中它时属性面板里显示的是“路径”而不是“矩形”或“椭圆”。这意味着什么?钢笔路径本质上是一段自由矢量轮廓,它的填充、描边、阴影这些都是可调的,但还是可以右键菜单里选择“转换为形状”或者“转换为自定形状”,转换后你就可以像使用普通形状一样对它做圆角控制、缩放而不变形、甚至直接拖拽调整某些特定参数。这个转换在做组件时很重要。
3. 实战:用钢笔工具画一个驾驶舱大屏的仪表盘
这几年做B端原型,“驾驶舱大屏”几乎是标配需求,Axure被搜索最多的场景之一就是“axure如何制作驾驶舱原型”。这类页面典型的元素,全都是钢笔工具可以出力的地方:圆弧表盘、指针、数据走势曲线、折线图。下面我用一个仪表盘组件来完整走一遍钢笔流程。
3.1 画表盘弧线:从椭圆到路径
表盘最常见的做法是半圆弧。你可以用圆形工具画一个正圆,然后叠加一个矩形去做布尔运算切出半圆;也可以用钢笔直接勾半圆弧。我更喜欢用钢笔直接画弧线,这样后续调整更灵活。
- 先用钢笔工具在画布上找一个起点,按住Shift,在起点上向右拖拽出一段控制柄(长度约等于期望半径的1/3到1/2);
- 移动到弧线的另一个端点,按住鼠标向下(或向左)拖拽控制柄,让弧线产生弯曲;
- 完成后按Esc结束路径,不闭合。
这条弧线就是一个没有填充、只有描边的开放路径。接下来选中它,在右侧样式面板调描边颜色、粗细(一般设4-6px),大表盘的外圈就出来了。注意:钢笔画的开放路径默认没有填充色,这正好符合弧线的需求,如果画闭合形状后想去掉填充,在样式面板把填充色设为“无”即可。
3.2 表盘数字刻度:复制旋转而不是逐个画
刻度其实不需要钢笔,用椭圆或矩形工具画一个小刻度条,然后复制、旋转、排列就行。但这里有一个效率点:画第一条刻度时,尽量让它的起点对准圆心,这样后面以圆心为轴旋转复制时,所有刻度都精确指向圆心。用矩形工具画一条细长的刻度条,放在表盘下方,然后复制它,在样式面板里设定“旋转”角度,比如每15度一个刻度,复制24份并依次调整角度。
3.3 指针:一个典型的钢笔三角形
指针是个典型的用钢笔画的形状。用P选中钢笔工具:
- 单击一个点作为指针的底部(固定端);
- 移动到中部稍偏上的位置,拖拽出一段小控制柄,形成指针尾部的弧线;
- 单击指针尖端;
- 回到底部起点,单击闭合。
这时你会得到一个类似水滴或梭子形的指针形状,填充成主视觉色即可。指针尖端的指向可以根据需求,通过整体旋转来对准某个刻度。
这里有一个重要经验:指针底部最好放在仪表盘圆心的位置,所以画的时候可以先用椭圆工具确定好圆心并放一个辅助小圆点,以它为参照落锚点。我在第一次画的时候没有设参考点,结果指针上下不对称,后来凡是涉及和圆心对齐的图形,一律先拉辅助线或画一个临时参考圆,再画钢笔路径,画完再把参考删除。
3.4 实时数据曲线:把折线勾成平滑曲线
驾驶舱里还经常有趋势图、走势图。很多人直接用“线”工具画折线,但折线显得很生硬,尤其B端大屏设计稿里都是平滑曲线。用钢笔勾平滑曲线其实特别简单:
- 用钢笔工具,在每个数据点位置
单击拖拽,拖出控制柄让相邻两点间呈现平滑过渡; - 拖拽时控制柄方向尽量与数据走势的切线方向一致,这样曲线不会出现怪异回折。
如果画完发现某个节点过渡太“尖”,就切换到转换锚点工具,单击那个锚点,再拖拽重新拉出控制柄,曲线就平滑了。如果发现某个锚点把曲线拉得太弯,直接调整控制柄长度,变短一些曲线就贴合了。
3.5 驾驶舱组件化:钢笔图形变成可复用控件
画好的仪表盘要变成真正的原型组件,不能留在页面里当死图。全选所有相关元素(表盘圈、刻度、指针、数字标签),右键“编组”或者按Ctrl+G打包。更彻底的做法是:把这些内容放进一个动态面板,或者转换为“母版”(Axure里的Master),这样其他页面复用时就只需要拖一个母版实例出来,双击进去可以单独修改数据文案,而样式改动只需改一处,全局生效。
我在做驾驶舱项目时,最后把整个表盘组件做成带状态变量的动态面板,通过交互里的“设置文本”或“设置选中”,让同一个指针根据数据在不同角度间切换。这样演示时,甲方点一下按钮,指针就从一个区间跳到另一个区间,效果几乎接近真实系统。
4. 钢笔路径的进阶玩法:布尔运算、自定义形状与交互联动
4.1 钢笔和布尔运算的配合:复杂图形也能“可编辑”
钢笔画的路径毕竟是“一条连续轮廓”,想直接在一个复杂图形里“挖洞”或者“合并”并不总能从钢笔工具本身实现。这时就要用到Axure的布尔运算(形状工具合并)。选中两个形状(其中至少有一个可以是钢笔画的路径,最好是先转换为形状),然后在顶部工具栏点“形状”下拉,里面有一组按钮:合并、减去、相交、排除重叠。
举一个我做过的例子:要做一个带圆角的下载箭头图标。箭头本身用钢笔很好画:一个三角形加一个矩形底座,合并起来就行。但想要圆角效果,直接在钢笔里拉圆角比较费劲。更好的做法是:先用矩形工具画底座,用钢笔画三角形,然后对它们执行“合并”并集——合并之后,再对结果执行“转换为自定形状”,这时再选中它,用直接选择工具去拖动锚点的位置或调整控制柄,就可以把尖角拉成圆角了。
顺序很重要:先合并,再转换自定形状,然后才是编辑锚点。如果先编辑锚点再合并,合并结果可能不是你想要的形状。
4.2 钢笔路径怎么变成动态导航按钮
很多Axure用户都搜过“axure 按钮组”。普通按钮用矩形工具就够了,但一些特殊导航形态,比如斜切角、圆角菱形、探照灯形状的标签,就必须靠钢笔或钢笔与布尔运算配合。这里分享一个我常用来做导航标签的实操:
- 用钢笔工具画一个不闭合的开放轮廓,形状类似一个斜角矩形(下边右端收窄);
- 按Esc结束路径,打开样式面板设置填充色为深色,描边为无;
- 选中这个图形,右键“转换为形状”;
- 把一个动态面板拖到形状上方,设置面板大小为和形状一致;
- 给面板里的内容配置鼠标移入、选中、点击等交互。
这样做出来的导航栏,视觉上比普通的矩形标签更有设计感,而且因为是Axure原生矢量,改颜色、改大小都不糊。后来我在很多金融、政务类项目中都用这种斜切导航,客户评价“看起来像专业UI稿”。
4.3 将钢笔路径和交互事件绑定
钢笔工具本身只管画,画完就和其他形状没有区别——可以设置单击事件、鼠标移入事件,甚至添加到动态面板的状态里做切换。我习惯把需要交互的钢笔图形统一命名(双击命名或者“属性”里改名称,例如pen_pointer),这样在交互面板里更好辨识。
在做驾驶舱时,我画了一个三角形警示图标,给它添加“鼠标移入时显示提示框”的交互;还画过一个地图上用的定位图钉,设置成点击后弹窗显示详细数据。这类效果如果在别的工具里画好再导入,交互绑定就会非常别扭,至少没法直接在图片上加状态。这是Axure内置钢笔工具的“隐形优势”——画出来的东西天然就在Axure的交互体系里。
4.4 为什么我建议“能钢笔就不导图”
最后补一句关于工具边界的话。很多人纠结“Axure钢笔不如Figma好使,要不要先到Figma画完导过来”。我的建议是分情况:
- 如果是非常复杂的插画、品牌图形、渐变场景,那就去专业工具里画,做成矢量SVG或者图片导入Axure;
- 如果是原型里需要参与交互的图形——按钮、仪表盘指针、图标状态、自定义控件——那就尽量在Axure里用钢笔完成。
因为一旦导入图片,你就失去了Axure的交互可能性:没法设置选中态变色、没法做鼠标移入效果、没法让元素内部的不同状态切换。导图这件事,本质上是用“视觉精度”换“交互灵活度”。在原型设计阶段,交互灵活度永远比像素精度更重要。
5. 钢笔工具常见问题排查:画错、卡顿、和对不齐
5.1 画的形状填充色是灰的,怎么去掉
钢笔工具默认画出的闭合路径会带灰蓝色填充。有些场景想只要描边不要填充,选中图形后,在右侧样式面板找到“填充”一栏,点开颜色选择器,选择最上角的“无”(一个白色斜杠圆点),填充就没了。如果以后想恢复,再选一遍颜色即可。
5.2 曲线总是“发飘”,回折得很奇怪
这是最典型的新手问题,根源在于控制柄方向和长度不合适。解决办法分两步:
- 先选中路径,用转换锚点工具,把明显畸形的锚点重新拖拽拉出合理控制柄;
- 再用直接选择工具,拖动控制柄端点微调,尽量让控制柄方向和曲线走向在同一条切线上。
实际操作中我总结了一个判断技巧:如果曲线在某处出现“绕圈”,说明这个控制柄的长度远大于相邻两点间的距离,把控制柄缩短到两点距离的1/3左右,基本就正常了。这里的1/3不是一个绝对精确值,但作为初始调整的参考很有效。
5.3 闭合路径内填充溢出了边界
有时钢笔画的路径,填充颜色跑到轮廓外面,看起来像是背景漏出来。这往往是因为路径没有真正闭合。确认方法:用直接选择工具在路径上单击,观察锚点是否全部实心显示。如果发现有锚点没被选中(空心状态),说明路径的起点和终点没有连上。解决办法:用钢笔工具再点一下终点旁的圈状图标,或者直接用直接选择工具选中两个端点,右键选“合并”把开放路径闭合。
5.4 放大后发现边缘有锯齿
Axure里的钢笔路径是矢量数据,导出图片或浏览器预览时边缘理应清晰。如果预览时看着毛糙,通常是浏览器缩放比例不是100%导致的。确认预览时浏览器缩放为100%,如果还是毛糙,检查一下描边宽度是否过小(小于等于1px时高DPI屏幕上确实会显得模糊)。这种场景下可以把描边设到2px以上,或者干脆不用描边,用填充色表达轮廓。这个坑在给客户演示前一定要提前检查,不然大屏上看着一条断断续续的细线,观感很差。
5.5 画的路径太多导致文件卡顿
钢笔路径本质上是复杂矢量数据,一个页面里几十条复杂曲线,再加上动态面板和交互,Axure文件会明显变卡。解决办法有两个:
- 图形画完并确认不再修改后,右键“转换为图片”,这样节省算力;
- 把不常用的图层收进“模板”(母版)或动态面板里,Axure渲染时不会对不可见部分做重复计算。
我在做完整驾驶舱时,光仪表盘就十几个,后来把每个仪表盘都转成母版,切换页面明显流畅了。但前提是——确定不再调样式,否则一旦转图片或母版化,改起来就麻烦很多。
5.6 快捷键失灵,钢笔工具画不了
偶尔会遇到选中钢笔工具后,在画布上单击一点反应都没有,或者点击后新路径自动跑到别的图层里。先检查两点:一是画的页面是否被锁定(页面名右键有锁定选项),二是是否无意中选中了其他元素导致钢笔落到那个元素里了。如果都不是,那大概率是Axure的工具栏状态卡住了,按一下Esc退出当前状态,重新点钢笔工具即可。这个问题虽然不常见,但真出现时很搞人心态,我先写在前面。
6. 画完钢笔路径后的三个“顺手习惯”
这部分不是功能教学,是实际经验总结。我建议你每次用钢笔画完一组图形后,下意识做三件事:
第一件,重新命名。Axure里钢笔画的形状默认叫“路径”“曲线”之类的,等图层一多根本分不清。双击每个形状,在名称栏改成有意义的名称,像“btn_download_arrow”“dial_pointer_left”。虽然前期麻烦点,但在做交互事件时,下拉列表里看到整齐的命名,效率差太多了。
第二件,给关键形状设置选中状态或样式。原型的价值在于“演示时可交互”。你辛辛苦苦用钢笔画的图形,如果只是静态摆在那里,就不能体现钢笔工具的威力。给重要的图标加上鼠标移入的样式变化、点击后的选中态,比如变色、加阴影、放大一点,这让原型一下子“活”起来。
第三件,用“发布”里的“预览”或生成HTML文件,在浏览器里看看钢笔路径在不同分辨率下的表现。尤其是大屏项目,一定要缩放窗口到75%、50%、150%分别检查一遍。我在一个项目里画的指针,在100%时正正好好,缩小到80%时指针尖端和刻度之间出现了半像素偏移,看着就是别扭。这类问题在Axure画布内很难察觉,浏览器里一眼就暴露了。
钢笔工具在Axure里不是最抢眼的功能,但凡是做高保真、做B端大屏、做定制组件的产品经理和交互设计师,迟早都会撞到它面前。与其等真需要用的时候再去临时查教程,不如现在找半小时,照着这篇的步骤画一个云朵、一个信封、一个仪表盘,把锚点和控制柄的手感建立起来。这项技能不会白练——它会在你做下一个原型的时候,让你少三次“切出去找素材再导回来”的折腾。