Nothing-Inspired UI/UX Design System 是一个面向界面设计工作的设计系统类技能,其目标是为设计过程提供一套源自瑞士排版、工业设计(Braun、Teenage Engineering)与现代界面工艺的规范。整体风格为单色、以排版驱动、信息密集但不杂乱,并要求深色与浅色模式保持同等严谨。
设计哲学
技能强调「做减法,不要做加法」,每个元素都必须为自己的像素负责,默认选择是移除。结构本身即是装饰,应暴露网格、数据与层级。单色是画布,颜色是事件而非默认,仅在编码数据状态时例外。字体承担主要工作,层级由字号、字重与间距而非颜色、图标或边框建立。深色与浅色两种模式均为一等公民,深色模式采用 OLED 黑,浅色模式采用暖调米白,均需完整的设计投入,并需询问用户从哪种模式开始。此外强调工业化的温度——精确但不高冷。
主要能力(构成规则)
- 视觉层级(三层规则):每个屏幕恰好三层重要性,主层为第一个被看到的内容,使用较大字号与充足留白;次层为支撑性上下文,紧贴主层;第三层为元数据与导航,使用大写标签并推向边缘或底部。判断方法是眯眼看屏幕,若两项相互竞争则需缩小、淡化或移动其中一项。
- 字体纪律:每屏最多 2 个字族(Space Grotesk 与 Space Mono,Doto 仅用于主角时刻)、3 个字号、2 个字重,将字号/字重视为预算,若需引入新字号,通常是间距问题。
- 间距即含义:紧凑(4–8px)表示同属一组,中等(16px)表示同组不同项,宽(32–48px)表示新分组,巨大(64–96px)表示新上下文;若需要分割线,通常说明间距不对。
- 容器策略:优先使用间距,其次单条分割线、微妙边框轮廓、带背景变化的表面卡片,选择能起作用的最轻工具,勿将最重要元素装进盒子。
- 颜色作为层级:在单色系统中灰色阶即层级,每屏最多 4 级;红色(#D71921)不属于层级,而是「现在看这里」的中断信号,若不紧急则屏上无红。数据状态色在编码数据值时不受「唯一强调色」限制,且应作用于数值本身而非标签或行背景。
- 一致性与变化:字体家族、标签处理、间距节奏、颜色角色、组件形状、对齐保持一致,但每屏恰好在一处打破规律。
- 构图平衡:主张非对称优于对称,如大左小右、上重下轻、边缘锚定,用更多空白而非更多重元素来平衡。
- Nothing 气质:以空无传达自信、在小处追求精确、把数据作为美、保持机械诚实、保留一个惊喜时刻、节奏上「打击乐式而非流体式」。
- 数据密集屏的视觉多样性:当一屏出现 3 个以上数据区块时,变换视觉形式,如主角数字、分段进度条、同心圆/弧、行内紧凑条、仅数字加状态色、迷你趋势图、统计行,形式变化而语气不变。
使用方式
工作流为:声明字体(告知用户需加载哪些 Google Fonts)、询问模式(深色或浅色,二者皆非默认)、勾画层级(写代码前先确定 3 层)、编排(应用构成规则)、核对令牌(查阅 references/tokens.md)、构建组件(查阅 references/components.md)、适配平台(查阅 references/platform-mapping.md)。
反模式(明确禁止)
界面装饰不使用渐变;不使用阴影与模糊,采用扁平表面与边框分隔;不使用骨架屏加载,改用 [LOADING...] 文本或分段式加载指示;不使用弹出提示,改用行内状态文本如 [SAVED]、[ERROR: ...];不使用悲伤表情插画、可爱吉祥物或多段式空状态;表格不使用斑马纹;不使用填充图标、多色图标或将 emoji 作为界面元素;不使用视差、滚动劫持或无谓动画;不使用弹簧/弹跳缓动,仅使用微妙的 ease-out;卡片圆角不超过 16px,按钮为胶囊形(999px)或技术感(4–8px);数据可视化在引入颜色之前先用透明度(100%/60%/30%)或图案(实心/条纹/点状)区分。
适用场景
依据资料,该技能适用于用户明确说出「Nothing style」「Nothing design」「/nothing-design」或直接要求使用/应用 Nothing 设计时,也适用于需要按上述设计系统进行界面与组件设计的场景,并可适配 HTML/CSS、SwiftUI、React/Tailwind 及 Paper 等平台输出约定。
限制
资料未提供该技能的具体收费、价格、版本号、支持的平台完整清单、性能数据或使用效果等信息,暂未提供。