Skate 的 UI 设计师：用 nine-slice 让粗糙纹理也能进设计系统
Gnarly by design: building systems with grit ft. Beau Wingfield | Config 2026 · Amy
全片 23 分钟·真正值得盯屏约 11 分钟·3 个必看点
- 0:11 – 7:15略
从涂鸦本到 EA：讲者是谁
Figma 的 Amy 开场介绍后，Beau 回顾自己从少年时期画涂鸦、做滑板文化视觉，一路走到 EA 担任资深 UI 设计师的经历，中间穿插早年素描作品和工作现场的照片。
他的审美不是后来“设计”出来的风格选择，而是从手绘石墨、灰阶加一点点颜色的老习惯里长出来的，这解释了后面所有决策的偏好来源。
屏幕上多是个人作品集和旧照片，翻得也快，扫一眼手绘稿感受一下调性即可，叙事本身可以加速听。▶ 跳到 0:11讲者 · Amy、Beau Wingfield - 7:16 – 9:20听
问题出现：干净的框架装不下粗粝
介绍他在 Skate 中维护的设计系统规模——上百个组件、大量变体和多个扩展库，约二十个功能已随游戏上线；随后抛出核心矛盾：Material、Apple、Polaris 这类主流体系都建立在干净扁平的前提上。
当美学要求是马克笔字体、朋克拼贴、毛边图标时，问题不是组件不够用，而是整套框架的底层假设不成立，只能自建。
这一段主要是把矛盾讲清楚，配图只是几张主流设计系统的常规界面截图，信息全在话里，不看屏幕也不丢东西。▶ 跳到 7:16讲者 · Beau Wingfield - 9:20 – 11:46略
风格是怎么试出来的
为了给 Skate 定风格指南，团队混用 Figma 笔刷、平板上的 Photoshop 和 iPad 上的 Procreate，大量绘制形状、箭头和纹理素材；再用这些素材反复做启动画面概念稿，包括一版 3D 尝试，来验证哪种调性在游戏里站得住。
先不问用途地大量画，再用同一个高曝光场景反复试装——被否掉的稿子不是浪费，它们是这套流程的必要产出。
屏幕上是成片的素材墙和一版版启动画面方案，看的是数量和差异带来的直观冲击，逐张细看没必要，快速扫过去就能体会取舍。▶ 跳到 9:20讲者 · Beau Wingfield - 11:49 – 15:03看
把个性注入组件本身
拿 Skate 的顶部导航、提示气泡、选择器和通信轮盘举例，说明如何放弃通用形状、规整布局和扁平样式，改用风格化图标、叠加纹理和不规则轮廓；结尾演示从纯色到富纹理的四步渐进叠加。
个性要加在组件层，而且必须克制——刻意留出没有纹理的干净元素来制造平衡，同时守住色盲和对比度的可访问性底线。
全段靠真实界面截图说话，尤其最后那组“边缘几乎看不出纹理、背后再压一层微弱质感”的对比，差异细到必须盯着屏幕才看得见。▶ 跳到 11:49讲者 · Beau Wingfield - 15:06 – 18:08看
nine-slice：让纹理能缩放
解释这项防变形的二维缩放技术：把背景容器拆成九块，四角固定、四边单向拉伸、中心自由填充，特别适合角落和边缘带独特纹理边的容器；随后给出制作规范。
四角必须是 1:1 的正方形，且九块要从左上开始按行列顺序编号——编号错了，游戏引擎就映射不回来。
参考线怎么落、哪一块归哪一格、Skate 角色自定义界面里哪些地方用了纹理强调、哪些点故意保持成没有纹理的正圆，这些全靠画面标注，纯听会完全失去空间参照。▶ 跳到 15:06讲者 · Beau Wingfield - 18:11 – 21:24看
在 Figma 里做出来
完整走一遍落地流程：用切片工具沿参考线导出九块，编组建主组件，四角四边用约束定位、中心填纯色；进阶做法是把每块做成带三种变体的小组件，用属性逐块切换出随机质感。同时指出切片工具只能导出位图，想保持全矢量得手动切。
位图与矢量是一次明确的取舍：手动切最费时但缩放效果最好，能接受位图就可以用九宫格插件把效率提上来。
这是全场唯一的软件操作演示，快捷键、约束面板的设置、切片边缘要多留一点背景以免拉伸时露缝——每一步都在屏幕上发生，跟着做才有意义。▶ 跳到 18:11讲者 · Beau Wingfield - 21:27 – 22:56看
实机验证与收尾
回到游戏里检验成果：任务通知、任务信息面板、音乐工具栏、专辑与播放列表瓦片以及它们的悬停态，全部复用同一个组件的不同变体，纹理边缘在 Figma 和游戏引擎中都缩放自如。
一个组件撑起全游戏的矩形容器，这才是“系统级可行”的证明；碰到技术限制不代表方向错了，反而说明该在限制里创新。
结尾放的是游戏实机画面，同一套纹理边在大小差异悬殊的容器上依然没有变形——这个结果只能眼见为实，是整场论证的收口。▶ 跳到 21:27讲者 · Beau Wingfield