175 lines
9.8 KiB
Markdown
175 lines
9.8 KiB
Markdown
# 淘宝开放平台风格采集卡
|
||
|
||
## 1. 采集信息
|
||
- 来源：`https://open.taobao.com/index.htm`；辅助参考：`https://developer.alibaba.com/en/index.htm`、淘宝开放平台 Color 颜色文档。
|
||
- 采集日期：2026-06-26。
|
||
- 视口/页面：首页 HTML、首页公开 CSS、导航/公告/业务入口/能力模块/文档颜色规范。
|
||
- 可信度：中。`open.taobao.com/index.htm` 当前页面为 Rax 应用壳，静态 HTML 只暴露资源入口；本文件的精确色值主要来自公开 CSS 与文档页源码，布局与组件来自可读取首页结构。
|
||
|
||
## 2. 一句话风格定位
|
||
深色技术导航 + 白底业务入口 + 蓝色交互高亮的 B2B 开放平台风格，强调开发者可信、信息密度和平台能力展示。
|
||
|
||
## 3. 风格关键词
|
||
- 开发者平台感：顶部深色导航 `#373942`，二级菜单 `#2b2d34`，适合承载控制台、文档、解决方案等技术入口。
|
||
- 蓝色高亮交互：链接 hover、菜单标题、查看更多使用 `#5eb5fe` / `#6cb5f4`，形成“技术服务”而非电商促销的视觉语气。
|
||
- 白底轻量内容：业务卡片、公告、能力模块主要使用白底、灰字、细分割线，信息密度高但克制。
|
||
- 图片型 Hero：首屏轮播使用 1920 宽大图，外层深背景 `#0a091e`，品牌视觉主要交给 banner 图承担。
|
||
- 低圆角、轻阴影：组件多为直角或小圆角，通知/菜单使用 2–4px 圆角，阴影只在浮层中使用。
|
||
|
||
## 4. 配色系统
|
||
| Token | Hex/RGB | 用途 | 观察证据 |
|
||
|---|---:|---|---|
|
||
| color-nav-bg | `#373942` | 顶部/侧边深色导航背景 | `.openplatform-nav { background:#373942 }` |
|
||
| color-nav-panel | `#2b2d34` | hover 状态、二级菜单背景、激活导航 | `.top-openplatform-nav ul li.active/hover` 与 `.sub-nav` |
|
||
| color-hero-bg | `#0a091e` | 首页轮播深色承托背景 | `.slide { background-color:#0a091e }` |
|
||
| color-primary | `#5eb5fe` | 菜单标题、链接 hover、阅读更多 | `.sub-nav dl dt`、`.page-tips a.read-more` |
|
||
| color-primary-hover | `#6cb5f4` | 顶部菜单项 hover | `.open-nav-menu > li > a:hover` |
|
||
| color-tech-blue | `#28a3ef` | 技术能力模块数字/步骤高亮 | `.cols-3 .grid .step-1` |
|
||
| color-text-main | `#333333` | 主要正文/图标 | `.cols-1 i`、`.bottom-item` |
|
||
| color-text-heading | `#444444` | 业务入口标题 | `.cols-1 h4` |
|
||
| color-text-muted | `#666666` | 公告、段落、弱信息 | `.page-tips a`、`.cols-1 p` |
|
||
| color-text-subtle | `#7c7c7c` | 次级说明文本 | `.cols-3 p` |
|
||
| color-nav-text | `#e5e9ee` | 深色导航主文字/Logo | `.logo-container h1 a`、`.top-openplatform-nav a` |
|
||
| color-nav-muted | `#a3a3a3` | 二级菜单普通链接 | `.sub-nav dl dd a` |
|
||
| color-border | `#e6e6e6` | 公告底线、表格分割线 | `.page-tips`、`.table-bordered` |
|
||
| color-nav-border | `#383a45` | 深色菜单内部分割线 | `.sub-nav dl dd` |
|
||
| color-success-bg | `#edffe9` | 成功通知背景 | `.open-success` |
|
||
| color-success | `#4ab933` | 成功通知文字 | `.open-success` |
|
||
| color-error-bg | `#fff2f2` | 错误通知背景 | `.open-alert` |
|
||
| color-error-border | `#ffe3e0` | 错误通知边框 | `.open-alert` |
|
||
| color-danger | `#d44044` | 通知红点 hover / 强提醒 | `.notify-container.has-message:hover` |
|
||
|
||
## 5. 字体与字号
|
||
| 层级 | Font | Size | Weight | Line-height | 说明 |
|
||
|---|---|---:|---:|---:|---|
|
||
| Body | 系统 sans-serif / Bootstrap 默认 | `12px` | 400 | 默认 | 首页 CSS 明确 `body{font-size:12px}`，偏传统门户密度。 |
|
||
| Nav | 系统 sans-serif | `14px` | 400 | `64px` | 顶部导航高 64，文字垂直居中。 |
|
||
| Logo | iconfont + sans-serif | `18px` | 400 | `64px` | Logo 文案不加粗，依靠图标与深色背景建立品牌识别。 |
|
||
| Section H3 | 系统 sans-serif | `22px` | 400/默认 | 默认 | 模块标题使用较大字号但非粗重风格。 |
|
||
| Business H4 | 系统 sans-serif | `20px` | 400/默认 | 默认 | 四列业务入口标题。 |
|
||
| Paragraph | 系统 sans-serif | `12–14px` | 400 | `1.8–2` | 段落行高较松，缓解小字号带来的拥挤。 |
|
||
| Iconfont | Alibaba iconfont | `16–105px` | normal | 1 | 大图标用于业务入口和能力模块。 |
|
||
|
||
## 6. 布局与间距
|
||
- 页面宽度：核心容器 `max-width:1170px`，文档页内容 `990px`。
|
||
- 顶部导航：高度 `64px`，深色通栏，Logo 左置，主导航横排，登录/搜索右置。
|
||
- 首页 Hero：全宽轮播，图片 1800–1920px 级别，背景深色兜底。
|
||
- 公告条：Hero 下方 `15px` 上下外边距，底部 `1px #e6e6e6` 分割线。
|
||
- 业务入口：四列栅格 `.col-md-3`，容器左右内边距 `45px`，每项图标/图片 + 标题 + 描述。
|
||
- Section spacing：模块常用 `margin-top:20–80px`、`margin-bottom:40–60px`。
|
||
- 信息密度：导航和表格偏紧凑，营销/能力模块留白较多。
|
||
|
||
## 7. 组件拆解
|
||
|
||
### Nav
|
||
- 尺寸：高 `64px`，主导航项左右 padding `20px`。
|
||
- 背景：默认 `#373942`，hover/active `#2b2d34`。
|
||
- 文本：默认 `#e5e9ee`，菜单子项 `#a3a3a3`，标题/hover `#5eb5fe`。
|
||
- 下拉：深色大面板，顶部贴合导航，padding `25px 20px 20px`，内部按 `dl/dt/dd` 分组。
|
||
- 动效：hover 展开，opacity 0.3s；箭头旋转 180 度，0.5s。
|
||
- 可复用规则：适合控制台型产品的顶栏或左侧导航；导航背景不要纯黑，使用带蓝灰倾向的深 Slate。
|
||
|
||
### Button / CTA
|
||
- 首页强 CTA 不突出；更多使用链接、图片卡片、`btn-knowmore`。
|
||
- `btn-knowmore`：高 `44px`，透明蓝背景 `rgba(80,133,177,0.8)`，边框 `#3199f4`，hover 背景 `rgba(49,153,244,0.8)`。
|
||
- 可复用规则：主按钮可使用蓝色描边/半透明填充，不要大面积淘宝橙；橙色只适合品牌点缀或营销态。
|
||
|
||
### Card / Business Entry
|
||
- 结构：图标/图片在上，`h4` 标题，`p` 描述。
|
||
- 背景：白底或透明，无明显卡片边框。
|
||
- Hover：整项文字/图标变蓝 `#5eb5fe`。
|
||
- 尺寸：图形资源约 `135px × 85px`；标题 `20px`。
|
||
- 可复用规则：入口卡片应轻边界、重图标，避免厚重阴影。
|
||
|
||
### Announcement Bar
|
||
- 结构：公告图标 + 多条横向链接 + “查看更多”。
|
||
- 颜色：普通链接 `#666`，查看更多 `#5eb5fe`。
|
||
- 行为：文本单行截断，宽度约 `16em`，适合密集公告。
|
||
|
||
### Tech Grid
|
||
- 形态：蜂窝/网格图形背景，hover 翻转 `rotateY(180deg)`。
|
||
- 高亮：数字/步骤用 `#28a3ef`，hover 后白字。
|
||
- 动效：transform 0.3s ease-in-out。
|
||
- 可复用规则：可用于“能力矩阵”“流程步骤”“开放能力”展示。
|
||
|
||
### Notification
|
||
- 浮层：高 `46px`，顶部 fixed，阴影 `0 2px 5px rgba(0,0,0,.26)`，圆角 `2px`。
|
||
- 成功：`#edffe9` 背景、`#dcf9d6` 边框、`#4ab933` 文本。
|
||
- 错误：`#fff2f2` 背景、`#ffe3e0` 边框、red 文本。
|
||
|
||
## 8. 圆角、边框、阴影、质感
|
||
- Radius scale：`2px` 用于通知，`3px` 用于选中胶囊，`4px` 用于下拉菜单；整体偏低圆角。
|
||
- Border：浅色分割线 `#e6e6e6`；深色菜单分割线 `#383a45`。
|
||
- Shadow：只在通知和下拉菜单中使用；菜单阴影 `1px 1px 5px rgba(0,0,0,.75)`，通知阴影 `0 2px 5px rgba(0,0,0,.26)`。
|
||
- Texture：部分模块使用背景图纹理，不是纯色卡片风格；复用时建议用极淡网格/渐变替代老旧纹理图。
|
||
|
||
## 9. 动效与交互
|
||
- 顶部下拉：hover 展开，opacity 0.3s ease-in-out。
|
||
- 箭头旋转：0.5s。
|
||
- 搜索框：border-color 0.3s，input width 0.3s。
|
||
- 技术网格：hover 翻转，transform 0.3s ease-in-out。
|
||
- 云环境卡片：hover 后内容上移/淡入，all 0.3s。
|
||
- 复用建议：保留 0.2–0.3s 的快速反馈；避免大面积 3D 翻转，可改为轻微 translate/opacity 以现代化。
|
||
|
||
## 10. 可复用主题 Tokens
|
||
```css
|
||
:root {
|
||
--tbop-bg: #ffffff;
|
||
--tbop-bg-muted: #f7f8fa;
|
||
--tbop-nav-bg: #373942;
|
||
--tbop-nav-panel: #2b2d34;
|
||
--tbop-hero-bg: #0a091e;
|
||
|
||
--tbop-primary: #5eb5fe;
|
||
--tbop-primary-hover: #6cb5f4;
|
||
--tbop-tech-blue: #28a3ef;
|
||
--tbop-link: #5eb5fe;
|
||
|
||
--tbop-text: #333333;
|
||
--tbop-text-heading: #444444;
|
||
--tbop-text-muted: #666666;
|
||
--tbop-text-subtle: #7c7c7c;
|
||
--tbop-text-inverse: #e5e9ee;
|
||
--tbop-text-inverse-muted: #a3a3a3;
|
||
|
||
--tbop-border: #e6e6e6;
|
||
--tbop-border-dark: #383a45;
|
||
|
||
--tbop-success: #4ab933;
|
||
--tbop-success-bg: #edffe9;
|
||
--tbop-success-border: #dcf9d6;
|
||
--tbop-error: #d44044;
|
||
--tbop-error-bg: #fff2f2;
|
||
--tbop-error-border: #ffe3e0;
|
||
|
||
--tbop-font-sans: Arial, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
--tbop-font-size-xs: 12px;
|
||
--tbop-font-size-sm: 14px;
|
||
--tbop-font-size-md: 20px;
|
||
--tbop-font-size-lg: 22px;
|
||
|
||
--tbop-radius-xs: 2px;
|
||
--tbop-radius-sm: 3px;
|
||
--tbop-radius-md: 4px;
|
||
|
||
--tbop-shadow-menu: 1px 1px 5px rgba(0, 0, 0, 0.75);
|
||
--tbop-shadow-notify: 0 2px 5px rgba(0, 0, 0, 0.26);
|
||
|
||
--tbop-nav-height: 64px;
|
||
--tbop-container: 1170px;
|
||
--tbop-doc-container: 990px;
|
||
--tbop-transition-fast: 0.2s ease-in-out;
|
||
--tbop-transition-normal: 0.3s ease-in-out;
|
||
}
|
||
```
|
||
|
||
## 11. 适合用于 / 不适合用于
|
||
- 适合：开放平台、开发者门户、插件市场、企业 SaaS 控制台、API 文档中心、技术生态官网。
|
||
- 不适合：强消费转化型落地页、年轻化社交产品、移动端优先 C 端 App、需要大量圆角/玻璃拟态的现代品牌页面。
|
||
|
||
## 12. 复刻注意事项
|
||
- 保留：深色技术导航、蓝色交互高亮、白底四列能力入口、公告条、能力矩阵、低圆角与轻阴影。
|
||
- 避免：直接复制淘宝/阿里 Logo、banner 原图、iconfont 字形、具体文案和品牌名称。
|
||
- 现代化变体：保持 `#373942 + #5eb5fe` 的骨架，把小字号从 12px 提升到 14px，把老式图片纹理替换为浅蓝渐变/网格背景，把 3D 翻转改为轻微浮起与淡入。
|
||
- 用于当前 RPA 工作站原型时：可将左侧导航改成 `#373942` 深 Slate，激活/hover 用 `#2b2d34`，图标高亮用 `#5eb5fe`，内容区继续保持白底与 `#e6e6e6` 分割线。
|