Notionists Neutral 风格完全指南：用 DiceBear 生成手绘线条头像

UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载导读本文围绕 DiceBear 仓库中的Notionists Neutral头像风格展开它只画一张脸——眼睛、鼻子和嘴以松散黑色线条绘于素色背景之上没有头部轮廓、头发或身体。你将了解该风格的核心特征、如何通过 JavaScript 库与 HTTP API 调用、它与 Notionists 兄弟风格的区别、可用于该风格的全部核心选项以及仓库内置的 11 套可直接复用的预设配置并深入到编辑器注册与多语言核心实现的源码佐证。风格概览一张脸三条线一个完整的头像Notionists Neutral 是 DiceBear 官方头像风格之一。在其官方风格页 apps/docs/pages/styles/notionists-neutral/index.md 中官方给出的定义只有一句话却精确描述了它的全部美学The Notionists face on its own: eyes, nose and mouth in loose black lines on a plain background, without head, hair or body.翻译过来就是独立的 Notionists 面孔——在素色背景上用松散的黑线条画出眼睛、鼻子和嘴没有头部、头发或身体。这与它的同门风格Notionists形成鲜明对比。后者见 apps/docs/pages/styles/notionists/index.md绘制的是手绘半身人物角色手持手机、咖啡杯等小道具姿态丰富。而 Notionists Neutral 剥离了所有角色叙事只保留人脸最核心的器官组合因此画面更克制适合做需要低干扰头像的场景管理后台、评论区、列表占位因为去掉了头发、头型、帽子等大块变体由 seed 决定的随机组合依然存在于五官细节中每个 seed 仍能产出不同面孔线条语言与 Notionists 一脉相承都是松散黑线的手绘质感。官方描述同时点明了两种调用方式DiceBear HTTP API或JavaScript 库dicebear/core。该风格页面本身是一个 VitePress 页面通过SiteStylePage styleNamenotionists-neutral组件渲染——也就是说风格页的交互式预览、预设列表与选项面板都是由同一套主题组件驱动的styleName就是注册时的唯一标识。两种方式创建一个 Notionists Neutral 头像方式一JavaScript 库DiceBear 的 JavaScript 核心库为dicebear/core头像风格定义以 JSON 形式随dicebear/styles发布。核心用法是new Style(definition)new Avatar(style, options)与官方 核心选项文档 中展示的用法一致import { Style, Avatar } from dicebear/core; import definition from dicebear/styles/notionists-neutral.json with { type: json }; const style new Style(definition); const avatar new Avatar(style, { seed: John, // 其他核心选项见下文 }); // 导出 SVG 字符串 const svg avatar.toString();在编辑器源码 apps/editor/src/config/styles.ts 中可以看到该风格的注册方式——编辑器对每一种风格执行createStyle(definition)即new Style(definition)后再通过getSchemaOptions(style)读取其全部可用选项import notionistsNeutralDef from dicebear/styles/notionists-neutral.json; // ... notionistsNeutral: createStyle(notionistsNeutralDef),这说明 Notionists Neutral 与仓库中其他 30 余种风格走的是完全同一套运行时管线Style负责解析定义与校验Avatar负责基于 seed 取样并渲染 SVG。方式二HTTP API官方在多个文档如 HTTP API 集成页、标签过滤文档中演示的 HTTP API 风格名直接就是notionists-neutralhttps://api.dicebear.com/11.x/notionists-neutral/svg?seedJohn将输出格式换成png、jpg或webp即可获得栅格图。所有核心选项都可以作为查询参数追加例如https://api.dicebear.com/11.x/notionists-neutral/svg?seedJohnbackgroundColorececedscale1.3核心选项每个 DiceBear 风格都共享的通用配置官方文档 apps/docs/pages/customize/options/index.md 明确说明以下选项在 JavaScript、PHP、Python、Rust、Go、Dart、C# 七种核心实现以及 HTTP API 中名称、类型、默认值与行为完全一致仅传参语法不同。它们同样适用于 Notionists Neutral。选项类型默认值说明seedstring确定性生成的种子flipnone \| horizontal \| vertical \| bothnone翻转头像可传数组随机化rotatenumber \| [min, max]0旋转角度−360 到 360scalenumber \| [min, max]1围绕画布中心的统一缩放0 到 101为原始大小borderRadiusnumber \| [min, max]0以画布百分比计的圆角0 到 5050为圆形sizeinteger未设置输出像素尺寸1 到 4096未设置时 SVG 自适应容器translateXnumber \| [min, max]0水平平移画布宽度的百分比−1000 到 1000translateYnumber \| [min, max]0垂直平移画布高度的百分比−1000 到 1000idRandomizationbooleanfalse为每个 SVGid追加随机值避免同页多头像url(#…)冲突titlestring未设置无障碍标题设置后 SVG 变为roleimg并含titlefontFamilystring \| string[]system-ui文本型风格的字体栈仅对含文本的样式生效fontWeightinteger \| integer[]400文本型风格的字体粗细1 到 1000tagsstring \| string[]未设置按标签过滤变体详见下文标签过滤animation及*Animation、*AnimationSpeed、*AnimationDelay见核心文档—动画开关与逐动画速度/延迟控制风格未声明动画时被忽略值得注意的细节来自 核心选项文档当类型为[min, max]元组时PRNG 会在该范围内采样一个值同一 seed 仍保持确定性组件的旋转、平移与缩放是在渲染时从组件定义中采样得到的不存在{component}Rotate、{component}TranslateX这类用户选项通过extends声明的组件别名不暴露自己的选项键而是与源组件共享{source}Variant和{source}Probability。背景选项每个风格都可用即使定义中未声明background色组选项类型默认值说明backgroundColorstring \| string[]未设置背景十六进制色#可省略支持#RGB到#RRGGBBAAbackgroundColorFillsolid \| linear \| radialsolid背景填充方式可传数组随机化backgroundColorFillStopsinteger \| [min, max]2渐变停靠点数量最小 2solid时忽略backgroundColorAnglenumber \| [min, max]0渐变角度−360 到 360backgroundColorOrderrandom \| fixedrandom按给定顺序使用颜色fixed而非洗牌动态组件选项与动态颜色选项对每个组件如eyes、mouth与每个色组如ink、paper、background存在如下模式化选项组件{component}Variant限定变体可为字符串、字符串数组或{variant: weight}权重表、{component}Probability该组件出现的百分比概率0 到 100颜色{color}Color用十六进制覆盖调色板、{color}ColorFill、{color}ColorFillStops、{color}ColorAngle、{color}ColorOrder。对 Notionists Neutral 而言真正发挥作用的是inkColor墨线色与paperColor纸面色——下面预设一节中的所有配色方案都建立在这两个色组之上这是本风格相对其他风格最独特的可调维度。标签过滤按语义特征挑选五官变体tags是核心选项因此同样适用于 Notionists Neutral。官方 标签文档 给出如下规则Token效果category:value保留携带该标签的变体以及该类别下无标签的变体同一类别的多个值按或组合category要求必须携带该类别标签仅作用于使用该类别的组件!category:value丢弃恰好携带该标签的变体!category丢弃携带该类别任意标签的变体规则要点不同类别按与组合!否定总是优先于允许若过滤后某组件无任何匹配变体则该组件不再绘制给未携带标签的风格传tags不会有任何效果。仓库中的标签类别定义与语法约定可进一步查阅 How DiceBear tags variants。JavaScript 用法const avatar new Avatar(style, { seed: John, tags: [mouthExpression:smug, eyeShape:round], });HTTP API 用法https://api.dicebear.com/11.x/notionists-neutral/svg?seedJohntagseyeShape:round程序化枚举全部选项OptionsDescriptor因为每个风格依其组件与色组拥有不同选项DiceBear 提供了OptionsDescriptor在运行时枚举全部可用选项。官方 style-options 文档 中的 JavaScript 示例只需把定义换成 notionists-neutralimport { Style, OptionsDescriptor } from dicebear/core; import definition from dicebear/styles/notionists-neutral.json with { type: json }; const style new Style(definition); const descriptor new OptionsDescriptor(style); console.log(descriptor.toJSON());toJSON()返回的字段描述符类型包括string可含list、number可含min/max/list、boolean、enum可含values/list/weighted、color可含list/contrastTo/notEqualTo、range可含min/max。其中weighted表示该枚举选项额外接受权重表contrastTo表示渲染器会对比的色组。同一文档还给出了 PHP、Python、Go、Dart、C# 的等价写法七种核心实现能力对齐。11 套官方预设从素底到电光色的完整配色库Notionists Neutral 的预设定义存放在 apps/docs/.vitepress/theme/presets/notionists-neutral.json。官方 预设页 对预设的定位是一句话预设就是一组普通的渲染选项。你可以直接抄走某套预设的代码也可以打开到 Playground 中继续微调预设没有触碰的选项仍会随 seed 变化——这正是每行显示它还能产生多少个不同头像的原因。全部 11 套预设及其完整选项如下id名称摘要选项bareBare白底黑线不加任何东西backgroundColor: [ffffff]sepiaSepia牛皮纸上的棕色墨水backgroundColor: [e3d2b4]、inkColor: [4a3526]、paperColor: [f5ead6]greyscaleGreyscale浅灰底上的炭笔灰backgroundColor: [ececed]、inkColor: [3b3d42]、paperColor: [fafafa]duotoneDuotone深青配薄荷绿全图仅两色backgroundColor: [dff0eb]、inkColor: [0f3d38]、paperColor: [eefaf6]invertedInverted近黑底上的白线如粉笔字backgroundColor: [111113]、inkColor: [f2f2f4]、paperColor: [1c1c20]mutedMuted同一墨线下六种灰调底backgroundColor: [6b705c,a5a58d,b98b73,7c9082,8e9aaf,9c6b58]、inkColor: [1f1f22]、paperColor: [f0efe9]electricElectric黑线配六种酸性亮底backgroundColor: [ff2e88,00e5ff,ffe600,7cff00,ff6a00,b400ff]、inkColor: [101216]、paperColor: [ffffff]pastel-wallPastel Wall五种柔和底色backgroundColor: [ffe3ea,e3edff,e2f5e9,fdf1d4,efe6ff]bold-popBold Pop五种高饱和底色backgroundColor: [ff5d8f,ffb703,43aa8b,4d96ff,b57bff]sunriseSunrise画面下的暖色渐变backgroundColor: [ffd9b0,ffa8bf]、backgroundColorFill: linear、backgroundColorAngle: 135close-upClose Up聚焦五官的放大特写backgroundColor: [f4f1ea]、scale: 1.3、inkColor: [2f2a24]、paperColor: [fffdf9]这 11 套预设恰好覆盖了官方 核心选项文档 中大部分能力单色系bare、sepia、greyscale、duotone、inverted、close-up展示的是backgroundColor、inkColor、paperColor三色组的基本用法——因为本风格没有头部轮廓可填充背景就是纸墨线就是整幅画多色系muted、electric、pastel-wall、bold-pop展示的是颜色数组传多个十六进制值后每个 seed 会从数组中取样于是同一套配置能产出多种配色但整体气质统一渐变sunrise演示了backgroundColorFill: linearbackgroundColorAngle: 135的组合是理解*ColorFill、*ColorAngle、*ColorFillStops三个渐变选项最直观的样例几何变换close-up演示了scale: 1.3——官方在注释中说明这类人脸居中、四周留白多的风格放大裁剪能有效回收画面空间。将预设落地到代码中只需把它的options原样传入const avatar new Avatar(style, { seed: John, backgroundColor: [ff5d8f, ffb703, 43aa8b, 4d96ff, b57bff], // bold-pop });在 HTTP API 中则是追加查询参数https://api.dicebear.com/11.x/notionists-neutral/svg?seedJohnbackgroundColorff5d8f,ffb703,43aa8b,4d96ff,b57bff确定性生成同一 seed永远同一张脸Notionists Neutral 与所有 DiceBear 风格一样采用种子驱动的确定性生成给定相同 seed 与相同选项任何语言实现、任何时刻渲染出的 SVG 都完全一致。这一特性由核心库的 PRNG 链保证——在 src/js/core/src/Prng 目录下可以看到Fnv1a与Mulberry32两个实现前者把 seed 字符串散列为 32 位整数后者作为伪随机数生成器依次驱动组件变体、颜色与数值选项的取样同构实现还存在于 src/php/core/src/Prng、src/python/core/src/dicebear、src/rust/core/src/prng、src/go/core/internal/prng、src/dart/core/lib/src/prng 与 src/csharp/core/src/Prng 中。因此预设说明中选项未设定时随 seed 变化的语义是精确的预设固定的只是它写明的选项其余维度如五官变体、未锁定的色值全部交由 PRNG 按 seed 决定。想要头像保持某预设气质又各不相同就固定 seed 固定配置想要批量占位符各不相同就换 seed 保持配置。源码佐证编辑器注册与跨语言一致性编辑器注册apps/editor/src/config/styles.ts 中notionistsNeutral: createStyle(notionistsNeutralDef)表明 Notionists Neutral 与其余 30 余种风格以完全相同的方式接入 DiceBear 官方编辑器Playground风格定义形态各风格定义以 JSON 发布dicebear/styles/notionists-neutral.json由核心库Style类解析——这正是编辑器 createStyle 中new Style(definition)的输入跨语言一致性仓库 tests/fixtures/parity 下保存了风格定义、头像与描述符的奇偶校验夹具含styles/notionists.json、avatars/notionists.json、descriptors/notionists.json用于验证各语言核心JS、PHP、Python、Rust、Go、Dart、C#对同一风格定义产生完全一致的渲染结果——Notionists 家族同属此校验体系。适用场景建议结合官方描述与预设取向Notionists Neutral 尤其适合管理后台与评论区greyscale、muted 这类低对比预设刻意不抢页面头像更像标记而非图片表单与空状态占位face-only 构图在 24–64px 小尺寸下依然可读需要品牌统一的用户体系通过固定inkColor 多变backgroundColor数组在统一线条气质下保持个体差异深色主题适配inverted 预设天然为深色界面设计。如需继续深入可依次阅读仓库中的 核心选项文档、样式选项程序化访问、标签过滤文档 以及同族的 Notionists 风格页半身角色版。赞分享UI组件后端【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 项目地址https://gitcode.com/gh_mirrors/di/dicebear点击查看免费下载相关推荐Cutouts 头像风格完全指南用 DiceBear 生成撕纸拼贴风人物头像Cutouts 头像风格完全指南用 DiceBear 生成撕纸拼贴风人物头像 Cutouts 是 DiceBear 头像库中一款「撕纸拼贴」风格的免费头像生成UI组件后端DiceBear Open Peeps 风格指南手绘半身人物头像的生成、配置与自定义DiceBear Open Peeps 风格指南手绘半身人物头像的生成、配置与自定义 Open Peeps 是 DiceBear 头像库中的一款手绘风格头像UI组件后端Fun Emoji 风格头像生成指南用 DiceBear 打造表情风彩色方块头像Fun Emoji 风格头像生成指南用 DiceBear 打造表情风彩色方块头像 Fun Emoji 是 DiceBear 提供的一种极简表情头像风格在一张UI组件后端上一篇Dream Textures将Stable Diffusion集成到Blender的革命性工具下一篇【亲测免费】 开源项目充电桩云管理平台智能共享绿色出行新选择创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考