小米橙白设计风格

要解决的问题

仿写一个小米官网风格的落地页时，最常见的翻车点不是配色选错，而是规则执行不到位：橙色撒得满屏都是，白色背景不够纯粹，参数排版要么稀疏要么挤成一团。这份风格指南的价值，在于把小米官网视觉体系拆成了一组可直接复用的硬约束，让生成结果不至于看起来像小米，细看却全是问题。

核心能力

配色：品牌橙 #FF6700 只分配给 Logo 和 CTA 按钮，且总面积控制在 5% 以内；背景大面积纯白 #FFFFFF，分区和卡片底色用浅灰 #F7F7F7 或 #F0F0F0；正文用柔和的深灰 #333333（非纯黑），技术参数和备注退到次级灰 #757575 或 #B0B0B0。

排版：统一使用 MiSans 字族。Hero 标题 36 到 56 像素 Bold 独占一行，卡片标题 20 到 28 像素 Medium，正文 14 到 16 像素 Regular（参数密集但字号不膨胀），价格 24 到 32 像素 Bold 且着橙色——醒目但不喧宾夺主。

布局：四条主线：

• 横向滚动卡片，一屏展示 3 到 5 个产品线；
• 硬核参数对比用简洁表格呈现；
• 8 像素栅格严格对齐；
• 米家、汽车、平板等生态链内容走瀑布流混排。

v1.1 的页面生成器还会自动生成竖线分隔的参数网格，省去手写分割线的步骤。

影像与文案：产品图统一纯白或浅灰背景、45° 倾斜视角并用高光勾勒轮廓；摄影样张沿用徕卡合作色彩科学；文案遵循参数前置（如「徕卡光学 Summilux 镜头 1 英寸大底」）、价格橙色大字前置、极客语境命名（「狂暴引擎 3.0」「冰封散热」），发布会后可加一句「Are you OK？」彩蛋。

适用边界

这套规则高度绑定小米的产品页语境。若用于其他品牌，直接套用会显得突兀——橙色 5% 以内的配额和参数前置的文案节奏都是小米品牌资产的一部分。人物形象只接受年轻活力风格，不适合正装商务场景。生态链瀑布流在产品数量过少时会失去布局意义，建议至少有 3 类产品再启用。