AestheticDialogs 令牌Tokens设计系统详解颜色、间距、排版与动效的语义化清单【免费下载链接】AestheticDialogs An Android Library built with Jetpack Compose for fluid, beautiful, custom Dialogs.项目地址: https://gitcode.com/gh_mirrors/ae/AestheticDialogsAestheticDialogs 是一个基于 Jetpack Compose 的 Android 对话框库它的核心竞争力来自一套完整的**设计令牌Design Tokens**系统颜色、间距、排版、形状、阴影和动效全部被抽象成语义化令牌组件只读令牌、不读裸值。本文带你用清单的方式逐层看懂这套令牌架构是如何让主题化变成一次纯粹的重新映射。为什么需要设计令牌三层架构AestheticDialogs 的令牌遵循业界通行的三层架构理解它是理解全部细节的钥匙原始层Primitive最底层的裸值如 AestheticPalette.kt 里的Grey50 ~ Grey950灰阶色板。这一层是internal的库内外都不允许直接读取。语义层Semantic把裸值映射成角色如surface.container容器背景、status.error错误色调。组件只能看到这一层。组件层Component对话框、按钮等具体实现全部通过语义令牌取色、取距。这套设计带来一个巨大的好处深色主题不是第二套实现而是同一次重新映射。换品牌色也是复制一份方案再copy()几个字段而不必重写任何组件。颜色令牌从原始色相到五大语义角色原始色相层AestheticPalette有几个精心设计的规则每个状态色都成对出现bright亮 deep深深值用在浅色表面上亮值用在深色表面上保证两种主题下对比度都清晰状态色还配有Tint浅色调背景用于徽章底、提示条底色等灰阶覆盖Grey50 ~ Grey950全区间为深色主题保留足够层次。语义角色层AestheticColors.kt刻意控制在两层深度如colors.content.primary分为五大组角色组代表角色用途surfacecontainer / raised / sunken / scrim容器、嵌套内容、凹陷区、模态遮罩contentprimary / secondary / muted / disabled / inverse标题、正文、弱化文本、禁用态bordersubtle / default / focus行分隔细线、默认描边、焦点环statussuccess / error / warning / info / neutral五种语义色调DialogToneactionprimary / onPrimary / secondaryBorder / disabled*按钮系列其中每个Tone又固定为四个角色accent色相本体用于图标和色条、onAccent、container色调底、onContainer。组件通过status.forTone(tone)取值无需写任何when分支——这正是警告永远像警告的设计保证。 库刻意不做动态取色dynamic color设计系统的职责就是保证语义一致壁纸派生色板做不了这个承诺。间距令牌一张不可被覆写的 4dp 网格AestheticSpacing.kt 是一张极简的4dp 网格库内所有 gap 和 padding 都从这里取令牌值令牌值none0dpmd12dpxxs2dplg16dpxs4dpxl20dpsm8dpxxl24dpxxxl32dp值得注意的设计决策间距故意不属于主题。颜色、字体、形状、动效表达的是品牌而布局网格表达的是组件自身的结构——如果允许调用方改写网格每个对话框都会变成不可测试的布局。需要不同内边距改组件而不是改网格。组件级尺寸统一收在 AestheticDimens.kt 中出现了两次以上的值图标尺寸、控件高度、宽度桶都必须住在这里源码注释直言primitive 里出现裸 dp 字面量即评审不通过。关键令牌包括minTouchTarget 48dpAndroid 无障碍指南的最小触控目标statusGlyph 72dp/statusGlyphCompact 32dp模态对话框与通知横幅的大/小状态徽章breakpointMedium 600dp/breakpointExpanded 840dp宽度桶按对话框实际拿到的空间解析手机横屏、折叠屏和自由窗口都能正确自适应notificationMaxWidth 520dp更宽的屏幕上横幅保持居中。排版令牌恰好六个文本角色AestheticTypography.kt 定义了六个、一个不多的文本角色——对话框有标题、正文、辅助行、按钮文案、列表行和说明文字第六个角色之外直接不发货。对比 Material 的完整 type scale这是只带会用到的样式的克制哲学角色字号/行高字重使用场景title20sp / 26spSemiBold对话框标题itemLabel16sp / 22spMedium选择列表行message15sp / 22spNormal正文信息action15sp / 20spSemiBold按钮文案含 0.1sp 字距supporting13sp / 18spNormal辅助说明caption12sp / 16spNormal时间戳、弱化说明所有尺寸与行高都用sp而非dp库内没有任何文字被钉死用户调大系统字体时对话框会等比放大项目截图测试中专门用 200% 字体比例验证过这一点。形状与阴影令牌克制的轮廓语言形状令牌分两级AestheticShapes.kt圆角刻度AestheticRadiusnone / sm 8dp / md 16dp / lg 24dp / full形状角色AestheticShapesdialog 24dp 圆角模态容器、banner 16dp贴边通知、button full胶囊按钮、control 8dp输入框、选择行、circle状态徽章圆盘。AestheticShapes是 data class 而非常量对象因为形状属于品牌给AestheticDialogsTheme传一个副本就能一次性换掉所有对话框的轮廓。阴影AestheticElevation.kt故意只有三档none / banner 6dp / dialog 12dp。库用发丝级描边 色调对比区分层级阴影只出现在平台预期的地方悬浮对话框、脱离内容的横幅——长阴影刻度在深色主题下会显得浑浊且渲染更贵。动效令牌时长、缓动与减少动态开关AestheticMotion.kt 把动效也令牌化了核心是一条**进入减速、离开加速**的物理直觉令牌默认值语义durationMedium220ms内容进入LinearOutSlowInEasing减速让表面落定durationFast120ms内容离开加速缓动让它尽快让路durationSlow320ms预留跨全屏的过渡最贴心的是enabled开关主题默认从系统ANIMATOR_DURATION_SCALE读取当用户在系统里打开移除动画时所有过渡直接坍缩为即时切换零时长而不是简单地变短——这才是减少动态无障碍选项真正想要的效果。对于通知横幅另有 AestheticNotificationAnimation 五种入场/出场风格Slide从锚定边滑入默认、Fade原地淡入最安静、Scale92% 放大 淡入、SlideHorizontal与None。令牌如何生效AestheticDialogsTheme 与三级覆写优先级所有令牌最终由 AestheticDialogsTheme.kt 通过四个 CompositionLocal 下发。它的覆写优先级只有清晰的三级库默认值 - AestheticDialogsTheme(...) - 组件的 UI Model库拥有默认值主题拥有品牌UI Model拥有单个对话框的语义它携带哪种 Tone、某个动作是否 destructive主题不会重绘你的 App它不安装MaterialTheme你放进内容对话框里的自有组件依然保持原样品牌化靠复制方案而非实现方案aestheticLightColors().withBrand(primary ..., onPrimary ...)即可让对话框跟随你已有的品牌色包裹主题是可选的——不包裹时组件会按系统深色设置自动解析合理默认值什么都不包裹也不会崩、也不会出现浅底浅字。一句话总结AestheticDialogs 的令牌系统可以用一句话概括原始值被锁在库内语义角色面向组件品牌只允许在主题层改写一次。颜色保证警告永远像警告4dp 网格保证布局可测试六个文本角色保证排版随系统缩放动效令牌保证无障碍优先——这正是设计令牌四个字的完整含义。上手时你只需认识两样东西AestheticColors的语义角色和AestheticDialogsTheme的四个参数其余的令牌已经替你想好了。【免费下载链接】AestheticDialogs An Android Library built with Jetpack Compose for fluid, beautiful, custom Dialogs.项目地址: https://gitcode.com/gh_mirrors/ae/AestheticDialogs创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考