# CellMore 视觉设计标准 **品牌**：CellMore（字标 `CELLMORE`） — 手机及数码配件零售连锁 **Slogan**：Easy Connect, More Expect. **适用**：官网、Landing Page、广告物料、社媒、门店/线上视觉 --- ## 1. 视觉主题与气质 CellMore 的视觉是**「克制的科技零售美学」**：以大面积纯白为底，浅木色注入温度，克莱茵蓝作为唯一的高纯度彩色精准点睛。整体气质对标 Apple Store——开放、洁净、可信赖，但通过克莱茵蓝建立强烈的品牌识别度，避免沦为千篇一律的极简。 **核心特征：** - 留白即主角：大面积白 + 戏剧化呼吸感，内容稀疏、对齐严谨 - 单一强势彩色：克莱茵蓝 `#002FA7` 是画面里唯一允许的高饱和色，用得越少越贵 - 暖中性平衡：浅木色中和蓝白的冷峻，传递亲和与高端零售温度 - 几何精确：Logo 与字标皆为几何造型，线条干净、端点圆润，呼应「无限连接」 --- ## 2. 色彩系统 ### 背景表面 - **Pure White 雪白** (`#FFFFFF`)：主背景，占画面 70%+，是品牌的呼吸 - **Mist Grey 雾灰** (`#F7F8FA`)：次级背景 / 分区 / 卡片底，几乎无存在感的层次 - **Klein Field 克莱茵场** (`#002FA7`)：整屏蓝色块，用于品牌强宣示页 / Banner / 页脚 ### 文本与内容 - **Ink Black 墨黑** (`#111111`)：主文本与标题，沉稳不刺眼的近黑；不得用于标准 Logo 字标 - **Slate Grey 石板灰** (`#6B7280`)：次要文本、说明、占位 - **On-Blue White** (`#FFFFFF`)：克莱茵蓝底上的文字，保持最高对比 ### 品牌与强调 - **Klein Blue 克莱茵蓝** (`#002FA7`)：核心品牌色（RGB 0,47,167 / CMYK 100,88,0,0）。Logo 图标、`CELLMORE` 字标、CTA、链接、关键图标、点缀。**唯一彩色** - **Klein Deep 深克莱茵** (`#002485`)：按钮 hover / pressed 态，蓝上加压 - **Klein Tint 克莱茵晕** (`#E5EAF6`)：浅蓝填充、选中态、标签底、信息卡 ### 辅助暖色（材质感） - **Maple Warmth 枫木暖** (`#E0D0B0`)：源自门店展示桌的浅榉木，用于营销物料的暖色平衡块、插画底，慎用、面积小 ### 功能色 - **Success** (`#16A34A`) · **Warning** (`#D97706`) · **Error** (`#DC2626`)：仅用于状态提示，不参与品牌叙事 ### 边框与分割 - **Hairline 发丝线** (`#E5E7EB`)：极细分割线、卡片描边，1px --- ## 3. 字体规范 - **西文字体** [推荐]：几何无衬线 —— **Montserrat** 或 **Poppins**（呼应字标的几何圆润感）；纤细标语用 Montserrat Light。Slogan 风格参照门店「Easy Connect, More to Expect.」的细体宽字距 - **中文字体** [推荐]：**思源黑体（Noto Sans SC）** / 苹方，与几何无衬线协调；标题用 Bold，正文用 Regular - **字标专用**：`CELLMORE` 定制字形（M=山峰+圆点，E=横线切割）仅作 Logo 使用，**禁止**用于正文排版 ### 字号刻度（px） | 级别 | 字号 | 用途 | |---|---|---| | Display | 48–64 | Hero 主标题、品牌宣示 | | H1 | 32–40 | 页面主标题 | | H2 | 24–28 | 区块标题 | | H3 | 20 | 小节标题 | | Body | 16 | 正文（基准） | | Small | 14 | 辅助说明 | | Caption | 12 | 标注、版权 | - **字重策略**：大标题 700 制造力量，正文 400 保持易读，标语 300 营造高级轻盈。避免中间字重堆叠 - **字距**：Display/标语放大字距（+0.04em～+0.1em）显从容；正文默认 - **行高**：标题 1.2，正文 1.6，长文 1.7 --- ## 4. 间距与布局 - **栅格基准**：8px（小元素可用 4px 微调） - **间距刻度**：4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 - **区块间距哲学**：主区块上下留白 96–128px，宁可空也不挤——留白是 CellMore 的奢侈 - **容器宽度**：内容最大 1200px，居中；文本段落最大 720px 保证可读 - **断点**：Mobile <640 · Tablet 640–1024 · Desktop >1024 - **对齐**：严格左对齐或居中，一个版面只用一种主对齐轴 --- ## 5. 圆角 · 阴影 · 描边 - **圆角**（呼应 Logo 圆润连接感）： - 按钮：Pill 全圆（999px）或 12px 大圆角 - 卡片：16px - 图片/容器：12px - 输入框：8px - **阴影**（克制、哑光，模拟门店漫射光）： - sm：`0 1px 2px rgba(17,17,17,0.05)` - md：`0 4px 16px rgba(17,17,17,0.08)` - lg（悬浮卡片）：`0 12px 32px rgba(0,47,167,0.10)` — 蓝调阴影呼应品牌 - **描边**：优先 1px 发丝线 `#E5E7EB`；强调容器可用 1px 克莱茵蓝 --- ## 6. 动效 - **缓动**：`cubic-bezier(0.4, 0, 0.2, 1)`（ease-in-out），流畅如「无限连接」 - **时长**：micro 150ms / 常规 250ms / 大转场 400ms - **标志动效**：∞ 无限符号的描边流动 / 渐显，体现 Easy Connect 的连接叙事 - **原则**：动效服务于引导，不炫技；进入用淡入+轻微上移（8px），hover 仅做轻量色阶/阴影变化 --- ## 7. 组件规范 - **Button** - Primary：克莱茵蓝底 `#002FA7` + 白字，Pill 圆角；hover→`#002485`；pressed 缩 98% - Secondary：白底 + 克莱茵蓝描边 + 蓝字；hover 填 `#E5EAF6` - Ghost：无底无框，纯蓝字 + 下划线动画，用于次要操作 - 尺寸：sm 32 / md 44 / lg 56（高度 px） - **Card**：白底 / 16px 圆角 / `shadow-sm`，hover 升 `shadow-lg`；图文卡顶部放产品图，下方留足白 - **Input**：白底 / 8px 圆角 / 发丝线描边；focus 描边变克莱茵蓝 + `Klein Tint` 外发光 - **Navigation**：透明或纯白吸顶，左 Logo（图标+字标）右导航；当前项克莱茵蓝下划线 - **Tag / Badge**：`Klein Tint` 底 + 克莱茵蓝字，Pill 形 --- ## 8. Logo 与组合（Lockup） Logo 由三元素构成：**∞ 图标**（克莱茵蓝连接符）、**CELLMORE 字标**（克莱茵蓝定制几何字形）、**Slogan**（Easy Connect, More Expect.）。组合方式源自门店招牌，固定比例锁版，按提供文件使用，**不得重组或重绘**。 ### 组合形式 - **Full Lockup 主组合**：图标 + 字标横排，下方居中 Slogan — 门店招牌 / 官网主视觉 / 品牌大图 - **Horizontal 横向组合**：图标 + 字标横排（无 Slogan）— 页头 / 导航栏 - **Mark only 单图标**：∞ — favicon / App 图标 / 小尺寸 - **Wordmark only 单字标**：CELLMORE — 正式署名 / 纯文字组合 - **Reversed 反白**：深色 / 克莱茵蓝底使用白色版资源；标准浅色底组合中图标与字标统一使用克莱茵蓝 ### 组合规则 - **元素间距**：图标与字标间距 ≈ 字标字高的 0.6×，横向基线居中对齐 - **Slogan 组合**：Slogan 置于字标下方、与字标左缘对齐，字号约为字标高度的 40%，用克莱茵蓝或墨黑 - **Clear Space 留白**：四周最小留白 = 图标高度的 50%，留白内不得有其它图文 - **最小尺寸**：图标 ≥ 24px；含字标组合时字标高 ≥ 16px ### 禁用 - ❌ 改变 Logo 颜色（克莱茵蓝以外）/ 拉伸变形 / 旋转 - ❌ 加阴影、描边、渐变、外发光 - ❌ 重排图标与字标位置 / 改变 Slogan 措辞或字体 - ❌ 把字标 `CELLMORE` 当正文字体使用 --- ## 9. 文案语气 **语言优先级**：CellMore 面向泰国市场，所有对外物料（官网 / 广告 / Landing Page / 门店）以 **英文 + 泰语为主，中文为辅**——标题层英泰并置，中文作小字辅助注释。本设计文档（DESIGN.md）为内部真源，仍以中文撰写便于团队理解。 **真实泰语文案范例**（采自门店招牌横幅 · 分期购机卖点 · 泰文待母语者校对）： - `บัตรประชาชนใบเดียว` — 只需一张身份证 - `ไม่ต้องใช้บัตรเครดิต` — 无需信用卡 - `อนุมัติง่ายรับเครื่องทันที` — 审批简单 · 即时取机 - `เครื่องแท้รับประกัน` — 正品 · 官方保修 > ⚠️ 门店 Slogan 仅有英文版「Easy Connect, More Expect.」，**暂无官方泰译，勿自行臆造**；如需泰文 slogan 须由品牌方/母语者提供。Logo 组合（Lockup）不使用泰语。 简洁、自信、亲和、面向大众消费者。短句、动词开头、利益点优先。延续 Slogan 的「Easy / More」精神：把复杂的数码消费说得轻松、值得期待。 - ✅ "一证连接，即刻拥有" · "Easy Connect, More Expect." - ❌ 冗长的技术参数堆砌、夸张促销感叹号轰炸 --- ## 10. 应用物料规范 应用物料分为四个主场景：官网 / Landing Page、数字广告、社媒方图、门店与包装物料。生成图只作为背景、材质或产品场景，不承载最终 Logo 或可读营销文字；Logo、CTA、价格、条款、泰文促销语必须在设计工具或 HTML 中用标准字体与标准资源叠加。 ### 物料资产 - **Website / Landing**：`img/applications/app-website-landing.jpg` — 官网首屏、活动页、服务介绍页背景 - **Digital Banner**：`img/applications/app-digital-banner.jpg` — 广告横幅、投放素材、活动 Banner - **Social Square**：`img/applications/app-social-square.jpg` — 1:1 / 4:5 社媒图、商品集合图 - **Store Collateral**：`img/applications/app-store-collateral.jpg` — 门店海报、包装、购物袋、柜台物料 ### 使用规则 - **官网 / Landing Page**：白场主导，克莱茵蓝作为 Logo、CTA 或单一色块信号；首屏只保留一个核心卖点。 - **数字广告**：一条主标题 + 一个 CTA；避免多个角标、爆炸贴纸、多重价格区块。 - **社媒方图**：上方保留文案安全区，下方承载商品或场景；Logo 小而清晰，不压住商品。 - **门店与印刷物料**：尽量留白，使用白色纸材 / 材质与克莱茵蓝标识；每个表面只放一个服务利益点。 - **AI 生成图限制**：不得直接使用生成图里的伪文字、伪 Logo、伪 UI；所有可读信息必须二次排版。 --- ## 11. Do's & Don'ts **✅ Do** - 让白色当主角，克莱茵蓝当主角的那一个亮点 - 用浅木暖色中和冷调，保持高端零售的温度 - 几何对齐、严格栅格、慷慨留白 - 克莱茵蓝只用官方值 `#002FA7`，保证跨物料一致 **❌ Don't** - 不要多种高饱和色并用，稀释克莱茵蓝的唯一性 - 不要把字标 `CELLMORE` 当正文字体使用或随意改字形 - 不要堆叠重阴影 / 渐变 / 高光，破坏哑光极简 - 不要压缩留白把版面塞满，那不是 CellMore