CMS 组件库

Android 上那套基础控件,开源了。手指按住就跟手,动画随时能打断,松手按当时的速度落位。

Apache-2.0KotlinJetpack Compose

触摸

一次触摸,只有三个瞬间。

组件库的差别不在控件数量,而在松手之后那几百毫秒。

01

按下

立即接管当前动效,从当前位置和当前速度继续,不回到起点。

02

拖动

位置与手指一比一跟随,不会因为动画还没结束而滞后。

03

松手

把松手瞬间的速度交给弹簧,由它决定停在哪里。

CLEAR Design

从视觉到动效,贯穿整个清云世界的统一设计语言

不止一套视觉规范
更是清云世界统一的体验哲学

CLEAR Design 是清云世界所有产品共同遵守的设计语言与动效规范体系。 它不只是一套可以被复制粘贴的组件库,而是一套从"用户感受"出发、 贯穿视觉、动效、交互三层的底层标准。

每一款清云产品——无论是清云音乐、清云计算器还是未来的新应用—— 都会让你第一眼就觉得"这是清云的东西"。这种熟悉感来自华容网格的对齐节奏、 弥散光的温柔光感,以及触碰时每一次回弹都符合物理直觉的非线性动画。

我们相信,好的设计是"感觉不到设计"的。 CLEAR Design 所做的一切,都是为了让技术消失,让体验自然浮现。

01

跨产品一致

从卡片圆角到按钮反馈,所有清云产品同出一辙,学习一次即可畅行整个世界

02

以体感为尺

拒绝生硬的线性过渡与黑阴影,用自然的回弹与柔光让界面拥有"呼吸感"

03

三层可落地

视觉(华容/弥散光)· 动效(Motion)· 交互(统一组件)三层规范均已代码化落地,不是空谈

04

克制即高级

遵循 CLEAR 命名本意:干净、通透、克制,只在该强调的地方投入注意力

两大核心 · 支撑起每一个清云产品的底层体验

华容网格

8dp 基准栅格系统全局落地,间距、圆角、内边距严格按规范单调缩放;包含统一组件系统,按钮、卡片、栅格、标签基础类抽离一致,跨产品风格零偏差。

弥散光 Glow

CLEAR 核心光效体系,L1 ~ LS 五级精确参数已在按钮、卡片、演示区完整落地。

不止于形,更在于感
设计语言与动效引擎的统一

CLEAR Motion

遵循物理规律的非线性动画

拒绝生硬的线性过渡 · 自然变形拉伸 · 阻尼回弹效果。每一次触碰都伴随着灵动的响应,让数字元素拥有生命力。

华容网格

底层栅格系统,基准 8dp,严格规范间距、层级与对齐,信息排布清晰有序。

清云世界

极致产品体验 · 统一数字空间

Body · HarmonyOS Sans · 15px · 行高 1.6

Caption / 12px · 辅助信息 层级 5

字体排版

HarmonyOS Sans 字体家族;Display/H2/Body/Caption 四阶字号,行距字距严谨。

L1
L2
L3
L4
LS

弥散光 Glow

CLEAR Design 核心光效:组件自身颜色投射,避免黑色阴影;L1~LS 5 级精确参数。

4 类核心组件
一个体验标准贯穿所有清云产品

Button · 按钮

按在哪里都一样顺,每一次点击都有自然、灵动的反馈

Card · 卡片

视觉层次干净利落,信息一眼扫过就能抓住重点

Tag · 标签

Primary Accent Soft Mono

颜色语义清晰,重要标识一眼识别,不会看错

Grid · 栅格

信息布局错落有致,重内容更突出,轻内容不抢视线

告别生硬黑阴影
用组件本身的颜色做光效,页面更干净通透

按钮高亮

鼠标轻轻一悬,柔和的高光让可点击感一目了然,交互直觉自然

Focus Ring

输入聚焦柔光

输入框被选中时,温柔的柔光提示当前焦点,不刺眼也不迷路

Pro

徽章强调高光

重要信息配一点高光,视线自然汇聚,不会漏掉关键标签

接入

一次 Provide,全局统一。

默认值就能用;某个组件想改,也随时覆盖。

  1. 克隆仓库用 Android Studio 打开根目录,选 example 直接跑起来看效果。
  2. 引入模块把 library/ 放到宿主 app 同级,合并 settings-snippet.gradle.kts。
  3. 声明依赖在宿主里加 implementation(project(":cms-core")),包名、资源、字体与 JNI 一并带入。
Kotlin
import com.lindicra.cms.CMS
import com.lindicra.cms.CMSSettings

CMS.Appearance.Provide(
    CMSSettings(darkTheme = true, tabForm = CMSTabForm.Floating)
) {
    CMS.Appearance.Theme {
        Box(Modifier.fillMaxSize()) {
            CMS.Content.Source(
                Modifier.fillMaxSize(),
                onSourceReady = { source = it }
            ) {
                PageContent()
            }
            CMS.Navigation.TabView(
                items, selected, { selected = it },
                modifier = Modifier.align(Alignment.BottomCenter)
                    .navigationBarsPadding(),
                samplingSource = source
            )
        }
    }
}

宿主需补齐

  • androidx.compose.ui · ui-graphics · foundation · material3
  • androidx.core:core-ktx:1.16.0 · activity-compose:1.10.1
  • androidx.dynamicanimation:1.1.0
  • dev.chrisbanes.haze:1.7.1
  • liquidglass · continuous-rounded-corner · shared-elements

包名固定为 com.lindicra.cms;玻璃控件不能放在自己的采样源里,否则绑定会被拒绝。运行时另需 libCLEARMotionPro.so 与 libclearmotion_jni.so,JNI 按 16KB 页对齐构建。

许可见 Apache-2.0,保留版权与许可声明即可;第三方组件、字体与引擎二进制的清单见仓库内 NOTICE.md。