图标设计里有个特别容易被忽略的细节同样是圆角矩形为什么有些图标看起来就是更贵、更稳而有些总透着一股廉价感答案往往藏在圆角的那条曲线上。大多数人画图标时习惯直接拉一个圆角矩形参数一填就完事但真正让界面显得精致的是超椭圆这条曲线。这篇内容就围绕一招学会绘制UI图标超椭圆展开把这条曲线的来龙去脉、绘制方法、参数调节和实战避坑一次讲透。不管你是刚入行的UI新人还是做了几年却一直靠圆角矩形凑合的老手看完都能直接上手把图标质感往上提一个档次。超椭圆这个词听起来有点学术其实它描述的就是一种介于矩形和椭圆之间的形状——四个角不是简单的圆弧过渡而是用一条连续的数学曲线把直边和圆角缝合起来视觉上更饱满、更协调。苹果那套图标体系之所以看起来统一又高级超椭圆功不可没。下面我不讲空理论直接从为什么圆角矩形不够用讲起一路讲到你在设计软件里怎么把它画出来、参数怎么调、导出时注意什么。1. 圆角矩形为什么总差一口气1.1 从视觉连续性说起先做个简单对比。你在设计工具里画一个 200×200 的圆角矩形圆角半径设 40再画一个同样尺寸的超椭圆把两者叠在一起看边缘。圆角矩形的直边到圆角之间是一个突变——直边是直线到了圆角突然变成一段标准圆弧曲率从 0 直接跳到 1/40这个跳变肉眼是能感知到的。而超椭圆的曲率是连续变化的从直边到圆角平滑过渡没有那个折点感。这个差异在小尺寸下不明显但图标一旦放大或者放在高分辨率屏幕上圆角矩形那种直边突然拐弯的生硬感就出来了。尤其是做一套图标时如果每个图标的圆角都是标准圆弧整体会显得有点机械缺少那种浑然一体的柔和感。这不是玄学是曲率连续性的数学问题。1.2 标准圆弧的曲率突变问题用生活化的说法解释想象你开车圆角矩形相当于直路开着开着突然打满方向盘拐弯乘客会被甩一下超椭圆相当于提前缓缓打方向过弯平顺。视觉系统对曲率突变很敏感虽然你说不出哪里不对但就是觉得这个角有点硬。具体到数值上标准圆角矩形的圆角部分曲率是恒定的 1/r直边部分曲率是 0两者交界处曲率不连续。超椭圆的曲率沿整条边连续变化在直边中点附近曲率接近 0越靠近角部曲率越大到 45 度对角线位置达到峰值。这种连续过渡正是它看起来顺的根本原因。提示判断一个图标圆角是否用了超椭圆最直接的办法是把图标放大到 400% 以上盯着圆角和直边的交界处看如果能看到一条隐约的接缝线或者拐点那多半是标准圆弧。1.3 大厂图标体系里的隐形规范很多成熟的设计体系在图标圆角上都做了特殊处理只是没大张旗鼓宣传。你去看那些看起来特别整的图标集把圆角部分单独截出来放大会发现它们的圆角并不是标准圆弧而是更饱满、更接近超椭圆的形态。原因很简单一套图标里几十上百个图形如果每个都用标准圆角拼在一起时圆角的硬度会累积整体观感偏冷偏硬换成超椭圆柔和度统一提升视觉上更亲和。这也是为什么很多设计团队在做图标规范时会把圆角曲线类型单独列一条。可惜大部分规范文档只写了圆角半径数值没写曲线类型导致执行的人各画各的最后拼起来风格不统一。这个坑我在实际项目里踩过不止一次。2. 超椭圆的数学底子其实没那么吓人2.1 一个公式看懂超椭圆超椭圆的数学表达式不复杂核心就是这条|x/a|^n |y/b|^n 1其中 a、b 是半轴长度n 是决定形状的关键指数。当 n2 时它就是标准椭圆当 n 趋近无穷大时它趋近矩形当 n 在 2 到 5 之间时得到的就是我们想要的圆角饱满、过渡平滑的超椭圆形态。UI 图标里常用的 n 值大概在 3 到 5 之间苹果图标体系里流传较广的取值接近 5。理解这个公式不用死记抓住一点就行n 越大形状越接近矩形圆角越方n 越小越接近椭圆圆角越圆。你要做的就是在太方和太圆之间找到那个视觉最舒服的点。2.2 n 值怎么影响圆角观感我把不同 n 值下的观感差异整理成表方便你建立直觉n 值形状倾向圆角观感适用场景2标准椭圆圆角极圆接近胶囊头像框、柔和风格图标3偏椭圆圆角饱满柔和通用 UI 图标亲和力强4中间态圆角适中兼顾力度工具类、系统类图标5偏矩形圆角收敛偏硬朗商务、专业感强的图标8 以上接近矩形圆角几乎成直角不适合做图标圆角实际调的时候我一般从 n4 起步然后根据图标风格微调。做偏活泼的产品就往 3 靠做偏严肃的工具就往 5 靠。这个区间内的差异是细腻的不会出现一眼假的情况。2.3 为什么不用贝塞尔硬凑有人会问我直接用钢笔工具拉贝塞尔曲线模拟不行吗行是行但有两个问题。第一手拉的曲线很难保证四个角完全一致尤其是做一套图标时每个都手调一致性没法保证。第二贝塞尔模拟的超椭圆在数学上不精确放大后可能出现细微的曲率不匀导出成不同尺寸时观感会漂移。用公式生成或者用工具内置的超椭圆功能好处是参数化、可复现、批量一致。你定好 n 值和尺寸所有图标用同一套参数风格天然统一。这也是为什么我建议把超椭圆当成一个规范参数来管理而不是每次手动画。3. 主流设计工具里的超椭圆画法3.1 Figma 里的实操路径Figma 原生没有超椭圆这个形状但有两个可行路径。路径一用圆角工具的平滑度参数。Figma 的圆角矩形在选中后圆角输入框旁边有个独立的小图标有的版本显示为corner smoothing点开可以调平滑度范围 0 到 100%。这个平滑度本质上就是在标准圆弧和超椭圆之间插值调到 60% 到 80% 区间观感就非常接近超椭圆了。这是最省事的办法适合绝大多数场景。路径二用插件生成精确超椭圆。搜superellipse相关的插件输入尺寸和 n 值直接生成矢量路径。适合对精度要求高、或者要做参数化组件的情况。插件生成的路径是纯矢量后续可以随意改填充和描边。我的习惯是日常画图标用路径一够用且快做设计规范、需要精确复现时用路径二把 n 值记进规范文档。3.2 Sketch 与 Adobe 系的处理方式Sketch 的圆角矩形同样有平滑度选项逻辑和 Figma 类似调高平滑度即可逼近超椭圆。Adobe Illustrator 稍微麻烦一点原生圆角是标准圆弧要画超椭圆得靠脚本或者手动用公式生成路径。网上有一些现成的超椭圆生成脚本输入 a、b、n 就能出路径粘进 AI 里直接用。如果你主力用 AI我建议把常用的几个 n 值3、4、5各生成一个母版路径存进自己的素材库以后直接复制缩放。缩放时注意用变换面板锁定比例避免非等比缩放把曲线拉变形。3.3 代码生成给前端和批量场景的方案做设计系统或者需要批量出图时代码生成更靠谱。用 SVG 的 path 直接画超椭圆核心是把公式离散成路径点。下面是一段生成超椭圆 SVG 路径的 JavaScript 思路function superellipsePath(cx, cy, a, b, n, steps 360) { const points []; for (let i 0; i steps; i) { const t (i / steps) * 2 * Math.PI; const cosT Math.cos(t); const sinT Math.sin(t); const x cx a * Math.sign(cosT) * Math.pow(Math.abs(cosT), 2 / n); const y cy b * Math.sign(sinT) * Math.pow(Math.abs(sinT), 2 / n); points.push(${x.toFixed(2)},${y.toFixed(2)}); } return M ${points.join( L )} Z; }这段代码用的是超椭圆的参数方程形式把角度 t 从 0 到 2π 采样每个点按公式算出坐标最后连成闭合路径。steps 取 360 已经足够平滑导出小尺寸图标时甚至可以降到 120 减少节点数。生成出来的 path 直接塞进 SVG 就能用前端做图标组件时特别方便。注意用代码生成时采样点太少会导致曲线出现多边形棱角尤其在圆角最弯的地方。判断标准是放大到 800% 看圆角如果能看到明显的直线段拼接痕迹就把 steps 调大。4. 参数调节把超椭圆调到刚刚好4.1 尺寸、圆角半径与 n 值的三角关系这三个参数是联动的不能孤立地调。经验规律是图标尺寸越小n 值可以适当调大一点因为小尺寸下超椭圆的柔和感体现不出来反而需要更方一点保证识别度尺寸越大n 值往小调让柔和感充分发挥。举个具体例子。做一个 24×24 的小图标圆角半径设 6n 取 4.5 左右比较稳同样风格放大到 96×96圆角半径按比例到 24n 可以降到 4 甚至 3.5观感更舒展。如果小尺寸也用 n3圆角会显得过于圆润图标在密集排列时容易糊成一团。4.2 一套图标里如何保持曲线一致做图标集最怕风格漂移。我的做法是固定 n 值只让尺寸和圆角半径按比例走。比如整套图标统一 n4圆角半径统一取短边的 20%这样无论图标是方的还是长的圆角曲线的性格是一致的。这里有个细节圆角半径按短边比例算而不是按长边。因为超椭圆的圆角观感受短边影响更大按短边算能保证不同长宽比的图标圆角视觉大小接近。这个规则写进规范里团队执行时就不会各调各的。4.3 视觉校准别只信数值要信眼睛数值是起点不是终点。超椭圆调完之后一定要做视觉校准把所有图标排成一行缩小到实际使用尺寸比如 24px眯着眼睛看整体。如果某个图标的圆角显得特别跳或者特别闷就单独微调它的 n 值通常上下浮动 0.3 到 0.5 就能拉回来。我踩过的一个坑是严格按公式算出来的超椭圆在某个特定尺寸下反而看着别扭因为屏幕像素栅格和曲线对不齐产生了视觉上的抖动。这种时候不要死磕公式手动把曲线微调一两个像素让它在目标尺寸下渲染干净比数学上精确更重要。图标是给人看的不是给公式看的。5. 导出与多尺寸适配的坑5.1 矢量导出与位图导出的差异超椭圆是纯矢量曲线导出 SVG 没问题但导出 PNG 时要注意尺寸。同一个超椭圆路径导出 24px 和导出 96px圆角的视觉柔和度是不一样的——小尺寸下抗锯齿会吃掉一部分曲线细节看起来比大尺寸更方。解决办法是按目标尺寸分别校准而不是拿一个大图无脑缩小。具体做法先在大尺寸比如 96px下调好 n 值然后导出 24px 版本对比看圆角是否还保持同样的柔和感如果偏方了就为小尺寸单独准备一个略小 n 值的版本。多套尺寸维护起来麻烦但这是保证多端观感一致的必要成本。5.2 像素对齐与抗锯齿图标导出位图时曲线边缘的抗锯齿质量直接影响观感。超椭圆的圆角部分曲率变化大如果路径节点没有对齐像素栅格边缘容易出现毛边或者发虚。实操建议导出前把图标放在整数坐标上路径的关键节点尤其是圆角最弯处的几个点尽量落在半像素或整像素位置。Figma 和 Sketch 都有对齐到像素网格的选项导出前打开。另外导出 PNG 时选择 2x 或 3x 再缩小比直接导出 1x 的抗锯齿质量更好这是很多人的经验之谈。5.3 不同平台图标规范的兼容做跨平台图标时超椭圆的 n 值不能一套通吃。不同平台的图标体系对圆角曲线的偏好不一样有的偏圆润有的偏硬朗。我的做法是维护一个基础 n 值 平台偏移量的规则比如基础 n4某平台偏圆润就减 0.5偏硬朗就加 0.5这样既保持品牌一致性又照顾平台调性。还有一点容易被忽略某些平台对图标的安全区、圆角最大半径有硬性限制超椭圆调过头可能超出安全区。导出前一定对照目标平台的图标规范检查一遍别等提交审核才发现圆角超了。6. 几个我踩过的真实坑6.1 平滑度拉满反而更丑刚接触 Figma 圆角平滑度时我以为拉满 100% 就是最超椭圆结果做出来的图标圆角过于饱满接近胶囊形放在方形图标里显得头重脚轻。后来才明白平滑度 100% 对应的 n 值偏小圆角太圆了。实际用下来60% 到 80% 才是甜区具体看图标比例。这个教训告诉我参数不是越大越好找到视觉平衡点才是关键。6.2 混用标准圆角和超椭圆有次做一套图标一部分用了超椭圆一部分图省事用了标准圆角矩形单独看每个都还行拼到一起就露馅了——超椭圆的那几个明显更润标准圆角的那几个显得干。这种不一致在放大展示时特别扎眼。从那以后我定了个规矩一套图标里圆角曲线类型必须统一要么全超椭圆要么全标准圆弧绝不混用。6.3 忽略描边图标的特殊性超椭圆用在填充图标上效果很好但用在描边图标上要小心。描边有粗细超椭圆的曲线在描边内侧和外侧的曲率表现不一样如果描边较粗比如 2px 以上圆角内侧可能出现视觉上的堆积感。解决办法是描边图标适当调大 n 值让圆角收敛一点或者改用内外双路径分别控制。这个细节很少有人提但做线性图标集时一定会遇到。6.4 缩放时忘了锁定比例前面提过一嘴这里再强调超椭圆路径非等比缩放会变形。有次我把一个 100×100 的超椭圆图标直接拉成 100×60圆角曲线被压扁观感完全变了。正确做法是缩放时锁定宽高比或者重新按新尺寸生成路径。如果确实需要非等比那就得重新调 n 值补偿变形不能直接拉伸。7. 把超椭圆沉淀成团队规范7.1 规范文档里该写什么如果团队要统一图标圆角风格规范文档里至少要写清四件事圆角曲线类型超椭圆、n 值或平滑度百分比、圆角半径的计算规则按短边比例、以及不同尺寸下的 n 值微调规则。只写圆角 8px是不够的执行的人不知道曲线类型最后还是各画各的。我建议再附一张对比图把标准圆弧和超椭圆并排放标注差异点让团队一眼看懂为什么要用超椭圆。规范这东西光有文字没人看配图才有人真去执行。7.2 组件化与参数化落地把超椭圆图标做成组件n 值和圆角半径作为可调参数暴露出来这样团队复用时不用每次重新画。Figma 里可以用组件变体或者插件参数实现代码侧则把 n 值抽成配置项。参数化的好处是改一处全局生效风格调整时不用逐个改图标。7.3 验收时怎么快速检查验收图标时我有个快速检查法把所有图标缩到 24px 排成网格退后两步看整体。如果整体观感统一、没有哪个图标的圆角跳出来基本就过关了。再抽查几个放大到 400%看圆角和直边交界处有没有接缝感。两步下来超椭圆用得对不对基本能判断个八九不离十。超椭圆这个东西说穿了就是一个参数、一条曲线的事但它对图标质感的提升是实打实的。我自己的体会是学会它之后再看市面上的图标一眼就能分辨出哪些是认真调过曲线的、哪些是圆角矩形直接凑合的。这种分辨力反过来又会推着你把自己的图标做得更细。工具和方法都在上面了剩下的就是动手画、动手调把 n 值那个甜区用自己的眼睛校准出来——毕竟图标最终是给人看的你的眼睛比任何公式都可靠。
