资讯动态

Kanesumi Design - 无法在已有的标签中定义符合自己的定义,那就重新创造一个定义。

发布时间:2026/8/11 1:52:06 来源:尧图企业网站定制
Kanesumi Design以直角丈量边缘一个从 Metro 里长出来、却不再是 Metro 的设计语言。一、为什么我需要一个「自己的」设计语言我常用Claude和opencode这类agent。每次在写 UI 的时候如果不说agent 默认就会做成一堆圆角矩形——看起来很modern但并不符合我的个人审美。于是我在 prompt 里强调一遍「你应该使用Metro Design」。但此时 agent 大概率会说「用户要求用 Metro Design 设计 UI这种设计语言是微软提出的现在也叫做Fluent Design」——但这是一个错误的结论。导致我还需要回过头去强调这是 Win8–Win10 1709 区间的设计不是 Win11 的。但这样又导致了新的问题agent 会直接把它的圆角和轮廓删去然后改成纯色的犯了严重的教条主义错误。结果就是 AI 做出来的结果如同儿童拼贴画甚不协调。于是到最后我还得手动去调节一遍。并且我说实话我的设计也受一些无边框来源于Xperia XZ Premium 的正脸设计的影响导致其实我的 Metro 做出来并不很像 UWP 产物而是「有点那个意思但并不是」。综上种种问题让我意识到我不可以再用几个已有标签来指导 agent 干活我需要定义一种设计语言然后把文档给 agent 看它便不会乱猜。而事实证明这种做法是正确的——在规划了文档之后agent 明显对于 UI 设计的理解更加贴合我的 expectation这说明这个定义是有价值的。二、它到底长什么样这个定义到底长什么样先看一眼。把 Ncrust 打开第一眼是一整块纯黑——OLED那种黑黑得干净不是灰蒙蒙的黑。全屏只有一样东西有颜色一条强调色云杉绿或者你换的任意一种其余全是黑、白、灰。往下滚列表是平的。封面是一块块直角方块紧贴屏幕左沿一点padding都不留图片没有圆角没有阴影不是浮起来的卡片是嵌进黑底里的色板。文字直接铺在上面页面标题是大号的常规字重——不粗、不重就那么定在那。没有顶栏返回箭头浮在内容上身后是一层向下渐隐的深色纯粹为了让图标在任意封面上都看得清。按下去没有涟漪。整块矩形在你手指下面闪一下淡入淡出干脆利落。开关是矩形轨道配矩形拇指进度条是一条细线进度到哪颜色亮到哪。整个界面是「平」的。不是没有层次——层次用明暗和对比撑起来不用阴影和模糊。它不吵、不抢信息是主角别的都在让路。看起来像一块被裁得很准的板子而不是一堆互相叠着、生怕你看不见的卡片。三、家谱先说清楚它从哪来。它有三条源流分量不一样。美学原点Xperia XZ Premium 的正脸。2017 年我第一次真正「鉴赏」到无边框的美是在 Xperia XZ Premium 那块几乎无边框的正面上——整块正面是一个平面边缘消失了。贴边这个概念就是从这儿生根的。它不是任何软件发明的是一块硬件正脸给我的直觉。技术参考Metro / UWP。直角几何、信息优先、UWP 那套缓动轻盈、短促、0.25s、60Hz 友好是运动语法和控件行为规格的来源。microsoft-ui-xaml v2.8.7的经典控件模板我一条一条扒下来转成了自己的控件规格——这种东西不抠代码是定不准的。版式参考仅此而已Groove Music。封面通铺贴屏边、没有顶栏、浮层裸图标这些版式手法是跟它学的。但它只是版式参考——无边框的美学价值我认定在 XZP 的正脸上不在任何微软产品里。剩下的是我自己的定夺深底单强调色、弹簧主运动加缓动次属性的混合运动、GPU 零重组、零 Material。这些才是「改良」二字的全部含量也是它不该再叫 Metro 的理由。四、态度三条诚实Metro 留给我的最重要的不是某个样式而是一种态度。三条。直角像素是方的不是圆的。总有人问为什么不用圆角矩形那东西更「物理安全」、对眼睛更友好。可屏幕是方形像素铺出来的方形才是机器最接近物理本质的形状圆角是机器本来不会产生的是拿来讨好眼睛的。既然活在方形像素里界面就该承认这一点直角是唯一不撒谎的答案。而且直角不亏它能真正贴住边缘——圆角跟贴边天生犯冲——还省掉圆角光栅化的三角化和抗锯齿。诚实在这套语言里居然还省钱。反拟物数字界面不是现实的替身。皮革纹理、纸张质感、实体旋钮、真实投影全是把现实世界的东西搬过来。可数字界面有自己的物理刷新率、像素、分层合成。在一个以像素为基本单位的地方模拟皮质封面就是撒谎。界面是信息介质不是物体。所以 Kanesumi 拒绝一切无意义的拟物——不是冷是不骗人。信息直接显示于表面。Metro 的信条是content over chrome信息直接呈现在表面不藏进标题栏、边框、装饰层后面。Kanesumi 继承得很彻底——页面标题就是列表第一项返回键是浮在内容上的裸图标没有 Material 那种顶栏 Surface。理由就一句话装饰层是信息的税每多一层 chrome信息就离用户远一层。三条其实是同一件事的三个面对机器诚实直角、对媒介诚实反拟物、对用户诚实信息直陈。这比任何一条具体规则都更根本。五、四条铁律态度落到规则上就是四条铁律。几何直角。无圆角、无曲线一切由直角切出。开关的轨道和拇指都是矩形按下去的反馈不是涟漪是整块直角矩形闪一下。封面、图片、色块一律通铺裁直。布局贴边。封面贴住屏幕左沿零padding没有顶栏标题就是列表第一项。贴边不是塞满是让内容接触边缘。挖孔、刘海、手势条这些 Android 的几何分裂用一个MetroInsets抽象一次性解决底部叠层悬浮在内容之上内容侧自己让位——这是对 Material 那种「切一块空间给导航栏」的刻意反叛。色彩深底 单一强调色。OLED纯黑打底灰阶分层全屏一个强调色。一屏一色。纯色无渐变状态切换是硬切换明暗变化靠半透明叠层。深浅只有 dark / light 二态个性全交给强调色。运动受控混合。所有动画由单一progress驱动视觉属性只在draw phase读取——零重组。主运动位移、缩放、滑入走解析解弹簧帧率无关、可中断次属性透明度、颜色走 UWP 缓动短促收敛。弹簧只用于主运动次属性绝不回弹。运动是受控减速不是物理沙盒。动画唯一真源是Sokuou。六、为什么说它「客观」我不太喜欢管这套叫风格或者审美——它更像一套约束系统每条都能执行、能验收、能被 API 强制。默认即语言零配置就是 Kanesumi 外观需要「调教」才能用的 API 是设计缺陷。GPU 零重组动画只在draw phase读值绝不在组合阶段逐帧重组。动画只动视觉属性不动布局位移、缩放、透明绝不触发Measure/Arrange。单一真源tokens、动画、安全区、底部叠层各自只有一个源头。无隐藏控件、无ripple、无渐变、无阴影。无障碍不可妥协语义树从第 0 层就有。审美会漂移纪律不会。七、它现在活在哪里这套语言的第一块试验田是Ncrust——一个网易云音乐的第三方客户端。四根支柱在 Android 上完整跑了一遍。然后我把那个 UI 库从里面抽出来就是Kanesumi-sec-a零 Material 依赖「默认即 Kanesumi」直接拿 API 形状逼出来Ncrust 反过来消费它。但设计语言不能只活在一个 app 里。我后来把它搬到了Ether——一个 Linux 桌面。Ether 不是「套了一层皮的桌面环境」它给这套语言配了一个完整的空间维度SD.md里写用户进入 Ether 时不应该感受到系统正在运行而应该感受到自己已进入某处。直角、贴边、受控运动从「控件长什么样」上升到了「整个数字空间长什么样」。Kanesumi 在 Ether 里是一套 Rust 运行时和 Android 那边共用同一个圆心。Dock、Launchpad、TopBar 这些系统 UILibrarian、Settings、Launcher 这些原生应用都是它的应用面。开发的时候拿 Gallery 当daily driver直接在 KWin 上跑——这套语言是先在别人的桌面上练出来的之后要跑的是自己的桌面。再往后是 HTPC是移动端同一个 Kanesumi 平台。八、结语Kanesumi Design 出于 Metro但已然不是 Metro。将 XZP 正脸的无边框UWP 的克制缓动Metro 的物理诚实连同我的深色、性能、「默认即正确」等等一系列想法全部融成一体塑成了一套理性而客观的设计语言。给它一个名字是因为它值得被独立看待。矩隅 · 以直角丈量边缘。Kanesumi Design 设计语言正典KANESUMI_DESIGN.mdEther monorepo。2026-08-10

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价